/* Farm Plus · Sản xuất — style dùng chung. Giá trị lấy theo tokens.css và các màn .dc.html
   trong docs/design/handoff/src (Đăng nhập, App Shell, Sidebar, Quản lý tài khoản). */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-variant-numeric: tabular-nums; }
a { color: var(--fp-green-700); }
a:hover { color: var(--fp-green-800); }
button, input, select, textarea { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fp-green-700); outline-offset: -1px; }
[hidden] { display: none !important; }
.ms {
  font-family: 'Material Symbols Rounded'; line-height: 1; font-weight: 400; font-style: normal;
  display: inline-block; font-size: 20px; letter-spacing: normal; text-transform: none; white-space: nowrap;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; user-select: none;
}
.ms.fill { font-variation-settings: 'FILL' 1; }
.mono { font-family: var(--fp-font-mono); font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--fp-control-l);
  padding: 0 18px; border: 0; border-radius: var(--fp-r-sm); font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; color: var(--fp-ink); background: transparent; text-decoration: none;
}
.btn .ms { font-size: 20px; }
.btn--primary { background: var(--fp-green-700); color: #fff; }
.btn--primary:hover { background: var(--fp-green-800); color: #fff; }
.btn--secondary { background: #fff; border: 1px solid var(--fp-border-strong); font-weight: 500; padding: 0 14px; }
.btn--secondary .ms { font-size: 18px; }
.btn--secondary:hover { background: var(--fp-canvas); }
.btn--saved { background: var(--fp-success-bg); color: var(--fp-success-strong); }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: var(--fp-r-sm); background: transparent; cursor: pointer;
  color: var(--fp-ink-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;
}
.icon-btn:hover { background: var(--fp-divider); }
.icon-btn .ms { font-size: 20px; }

/* ---------- thông báo ---------- */
.alert {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--fp-r-md); border: 1px solid;
  font-size: 14px; line-height: 20px;
}
.alert .ms { font-size: 20px; font-variation-settings: 'FILL' 1; flex: none; }
.alert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert__body b { font-weight: 600; }
.alert--error { background: var(--fp-error-bg); border-color: var(--fp-error-border); color: var(--fp-error-strong); }
.alert--success { background: var(--fp-success-bg); border-color: var(--fp-success-border); color: var(--fp-success-strong); }
.alert--warning { background: var(--fp-warning-bg); border-color: var(--fp-warning-border); color: var(--fp-warning-strong); }
.alert--info { background: var(--fp-info-bg); border-color: var(--fp-info-border); color: var(--fp-info-strong); }
.alert--muted { background: var(--fp-divider); border-color: transparent; color: #3A443E; align-items: center; }
.op-block { align-items: center; }
.op-block .alert__body { flex: 1; }
.op-block .btn { flex: none; }
.op-block .btn .ms { font-variation-settings: normal; }

/* ---------- ô nhập ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.field__hint { font-size: 14px; font-weight: 400; color: var(--fp-ink-3); }
.input {
  width: 100%; height: 44px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm);
  padding: 0 12px; font-size: 16px; color: var(--fp-ink); background: #fff;
}
.input:disabled { background: var(--fp-canvas); color: var(--fp-ink-2); }
.input--error { border: 2px solid var(--fp-error); }
.input--error:focus { outline-color: var(--fp-error); }
.input.mono { font: 500 15px var(--fp-font-mono); }
textarea.input { height: auto; min-height: 72px; padding: 10px 12px; font-size: 15px; resize: vertical; }

/* ======================================================================
   ĐĂNG NHẬP (Đăng nhập.dc.html)
   ====================================================================== */
.login-page {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 40px 16px; background: var(--fp-canvas);
}
.login-card {
  width: 420px; max-width: 100%; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-xl);
  box-shadow: 0 4px 16px rgba(28, 36, 32, .06); padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 52px; height: 52px; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-size: 20px; font-weight: 600; color: var(--fp-green-700); }
.brand__sub { font-size: 14px; color: var(--fp-ink-3); }
.login-card h1 { margin: 4px 0 0; font: var(--fp-text-page); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; }
.pw-wrap .icon-btn { position: absolute; right: 2px; top: 2px; }
.pw-wrap .icon-btn:hover { background: transparent; }
.pw-wrap .icon-btn .ms { font-size: 22px; }
.check-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0; border: 0; background: transparent;
  font-size: 14px; color: var(--fp-ink); cursor: pointer; align-self: flex-start;
}
.check-btn .ms { font-size: 24px; color: var(--fp-ink-3); }
.check-btn[aria-checked="true"] .ms { color: var(--fp-green-700); font-variation-settings: 'FILL' 1; }
.btn-login {
  height: 48px; border: 0; border-radius: var(--fp-r-sm); background: var(--fp-green-700); color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login:hover { background: var(--fp-green-800); }
.btn-login:disabled { background: var(--fp-border); color: var(--fp-ink-3); cursor: not-allowed; }
.btn-login .ms { font-size: 20px; }
.login-note { font-size: 14px; color: var(--fp-ink-3); line-height: 20px; }
.login-version { font-size: 14px; color: var(--fp-ink-3); text-align: center; }
@media (max-width: 480px) {
  .login-page { justify-content: flex-start; padding: 24px 16px; }
  .login-card { padding: 24px 20px 22px; }
  .btn-login, .input { height: var(--fp-control-phone); }
  .pw-wrap .icon-btn { top: 6px; }
}

/* ======================================================================
   KHUNG APP (App Shell.dc.html + Sidebar.dc.html)
   ====================================================================== */
.shell { display: flex; height: 100%; background: var(--fp-canvas); overflow: hidden; }

.sidebar {
  width: var(--fp-sidebar); flex: none; height: 100%; background: #fff; border-right: 1px solid var(--fp-border);
  display: flex; flex-direction: column; transition: width .18s ease; z-index: 30;
}
.sidebar__brand {
  height: var(--fp-header); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--fp-divider);
}
.sidebar__brand img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sidebar__brand-name { font-size: 16px; font-weight: 600; color: var(--fp-green-700); white-space: nowrap; }
.sidebar__brand-sub { font-size: 14px; color: var(--fp-ink-3); white-space: nowrap; }
.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 12px; overflow-x: hidden; overflow-y: auto; }
.nav__line { height: 1px; background: var(--fp-divider); margin: 6px 4px; flex: none; }
.nav__line--first { background: transparent; }
.nav__group { padding: 4px 12px; font-size: 14px; font-weight: 600; color: var(--fp-green-700); }
.nav__item {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--fp-r-sm);
  color: var(--fp-ink); font-size: 14px; text-decoration: none; position: relative; flex: none;
}
.nav__item:hover { background: var(--fp-canvas); color: var(--fp-ink); }
.nav__item .ms { font-size: 20px; color: var(--fp-ink-2); }
.nav__label { flex: 1; line-height: 18px; padding: 8px 0; }
.nav__item.is-active { background: var(--fp-green-50); color: var(--fp-green-700); font-weight: 600; }
.nav__item.is-active .ms { color: var(--fp-green-700); font-variation-settings: 'FILL' 1; }
.sidebar__foot { padding: 10px; border-top: 1px solid var(--fp-divider); flex: none; }
.sidebar__toggle {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--fp-r-sm);
  background: transparent; color: var(--fp-ink-2); font-size: 14px; cursor: pointer; width: 100%;
}
.sidebar__toggle:hover { background: var(--fp-canvas); }
.sidebar__toggle .ms { font-size: 20px; }

.shell.is-collapsed .sidebar { width: var(--fp-sidebar-collapsed); }
.shell.is-collapsed .sidebar__brand, .shell.is-collapsed .nav__item, .shell.is-collapsed .sidebar__toggle { justify-content: center; }
.shell.is-collapsed .sidebar__brand-text, .shell.is-collapsed .nav__group,
.shell.is-collapsed .nav__label, .shell.is-collapsed .sidebar__toggle span:not(.ms) { display: none; }
.shell.is-collapsed .nav__line--first { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--fp-header); flex: none; background: #fff; border-bottom: 1px solid var(--fp-border);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.menu-btn { display: none; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fp-ink-3); flex: 1; min-width: 0; white-space: nowrap; }
.crumbs .ms { font-size: 18px; }
.crumbs__current { color: var(--fp-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

.workdate { display: flex; align-items: center; gap: 10px; }
.workdate__label { font-size: 14px; color: var(--fp-ink-3); white-space: nowrap; }
.workdate__box { display: flex; align-items: center; height: var(--fp-control); border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm); background: #fff; }
.workdate__nav {
  width: 32px; height: 34px; border: 0; background: transparent; cursor: pointer; color: var(--fp-ink-2);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.workdate__value {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 100%; min-width: 172px;
  border-left: 1px solid var(--fp-divider); border-right: 1px solid var(--fp-divider);
}
.workdate__value .ms { font-size: 18px; color: var(--fp-green-700); }
.workdate__date { font-size: 14px; font-weight: 600; white-space: nowrap; }
.workdate__rel { font-size: 14px; color: var(--fp-green-700); background: var(--fp-green-50); padding: 0 6px; border-radius: var(--fp-r-xs); line-height: 22px; white-space: nowrap; }
.topbar__sep { width: 1px; height: 28px; background: var(--fp-border); flex: none; }

.account { position: relative; flex: none; }
.account__btn {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 4px; border: 1px solid transparent;
  border-radius: var(--fp-r-md); background: #fff; cursor: pointer; color: var(--fp-ink); text-align: left;
}
.account__btn:hover, .account__btn[aria-expanded="true"] { background: var(--fp-canvas); }
.account__btn[aria-expanded="true"] { border-color: var(--fp-border-strong); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--fp-green-50); color: var(--fp-green-700);
  font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none;
}
.account__meta { display: flex; flex-direction: column; line-height: 18px; }
.account__name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.account__role { font-size: 14px; color: var(--fp-ink-3); white-space: nowrap; }
.account__btn > .ms { font-size: 20px; color: var(--fp-ink-2); }
.account__menu {
  position: absolute; right: 0; top: 50px; width: 260px; background: #fff; border: 1px solid var(--fp-border-strong);
  border-radius: var(--fp-r-lg); box-shadow: 0 12px 32px rgba(28, 36, 32, .18); z-index: 40; padding: 6px;
  display: flex; flex-direction: column;
}
.account__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--fp-divider); margin-bottom: 4px; display: flex; flex-direction: column; line-height: 20px; font-size: 14px; }
.account__head b { font-weight: 600; }
.account__head span { color: var(--fp-ink-3); }
.account__logout {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: var(--fp-r-sm);
  font-size: 14px; color: var(--fp-error); background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%;
}
.account__logout:hover { background: var(--fp-error-bg); color: var(--fp-error); }

.content { flex: 1; min-height: 0; overflow: auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.content--dense { padding: 18px 24px 20px; gap: 14px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.page-head h1 { margin: 0; font: var(--fp-text-page); }
.page-head__sub { font-size: 14px; color: var(--fp-ink-2); }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.placeholder {
  flex: 1; min-height: 240px; border: 1.5px dashed var(--fp-border-strong); border-radius: var(--fp-r-md);
  background: repeating-linear-gradient(135deg, var(--fp-canvas) 0 10px, #EFF2EE 10px 20px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.placeholder span {
  font-family: var(--fp-font-mono); font-size: 14px; color: var(--fp-ink-3); background: var(--fp-canvas);
  padding: 4px 10px; border-radius: var(--fp-r-xs); text-align: center;
}

.center-screen { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--fp-canvas); }
.center-card {
  width: 440px; max-width: 100%; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-xl);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.center-card h2 { margin: 0; font: var(--fp-text-title-s); }
.center-card p { margin: 0; color: var(--fp-ink-2); }
.center-card__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.backdrop { position: fixed; inset: 0; background: rgba(28, 36, 32, .35); z-index: 25; }

@media (max-width: 1100px) {
  .workdate__label { display: none; }
  .account__meta, .account__btn > .ms { display: none; }
  .account__btn { padding: 0 4px; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--fp-shadow-modal); }
  .shell.is-collapsed .sidebar { width: var(--fp-sidebar); }
  .shell.is-collapsed .sidebar__brand-text, .shell.is-collapsed .nav__group, .shell.is-collapsed .nav__label { display: revert; }
  .shell.is-collapsed .nav__item, .shell.is-collapsed .sidebar__brand { justify-content: flex-start; }
  .sidebar__foot { display: none; }
  .menu-btn { display: inline-flex; margin-left: -8px; }
  .topbar { padding: 0 16px; gap: 8px; height: var(--fp-header-tablet); }
  .crumbs > :not(.crumbs__current) { display: none; }
  .crumbs__current { font-weight: 600; }
  .workdate__value { min-width: 0; padding: 0 8px; }
  .workdate__value > .ms, .workdate__rel, .topbar__sep { display: none; }
  .content, .content--dense { padding: 16px; }
}
@media (max-width: 480px) {
  .workdate__date { font-size: 13px; }
}

/* ======================================================================
   QUẢN LÝ TÀI KHOẢN (Quản lý tài khoản.dc.html)
   ====================================================================== */
.tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--fp-border); flex: none; overflow-x: auto; }
.tab {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; font-size: 15px; font-weight: 500; color: var(--fp-ink-2); cursor: pointer; margin-bottom: -1px; white-space: nowrap;
}
.tab .ms { font-size: 20px; }
.tab[aria-selected="true"] { border-bottom-color: var(--fp-green-700); color: var(--fp-green-700); font-weight: 600; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: flex; align-items: center; gap: 6px; height: var(--fp-control); padding: 0 14px; border: 1px solid var(--fp-border-strong);
  border-radius: 18px; background: #fff; font-size: 14px; font-weight: 500; color: var(--fp-ink); cursor: pointer; white-space: nowrap;
}
.chip b { font-weight: 600; }
.chip[aria-pressed="true"] { border-color: var(--fp-green-700); background: var(--fp-green-50); color: var(--fp-green-700); }
.search { margin-left: auto; position: relative; width: 320px; max-width: 100%; }
.search .ms { position: absolute; left: 10px; top: 9px; font-size: 20px; color: var(--fp-ink-3); }
.search input {
  width: 100%; height: 38px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm);
  padding: 0 12px 0 38px; font-size: 14px; color: var(--fp-ink); background: #fff;
}

.table { flex: 1; min-height: 0; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: flex; flex-direction: column; overflow: hidden; }
.table__scroll { flex: 1; min-height: 0; overflow: auto; }
.urow {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 150px 170px 190px minmax(0, 1.1fr) 100px;
  column-gap: 12px; padding: 8px 16px; min-height: 56px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--fp-divider); background: #fff;
}
.urow--head { min-height: 40px; height: 40px; padding: 0 16px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-bottom: 0; flex: none; }
.urow.is-off { background: var(--fp-surface-alt); }
.urow.is-off .uname { color: var(--fp-ink-3); }
.urow.is-off .avatar { background: var(--fp-divider); color: var(--fp-ink-3); }
.ucell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ucell-name__text { display: flex; flex-direction: column; line-height: 19px; min-width: 0; }
.uname { font-weight: 600; color: var(--fp-ink); overflow: hidden; text-overflow: ellipsis; }
.uname--empty { color: var(--fp-ink-3); font-weight: 500; font-style: italic; }
.unote { color: var(--fp-ink-3); overflow: hidden; text-overflow: ellipsis; }
.ulogin { font: 500 14px var(--fp-font-mono); color: var(--fp-ink-2); overflow: hidden; text-overflow: ellipsis; }
.ulast { color: var(--fp-ink-2); }
.uactions { display: flex; gap: 2px; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 26px; padding: 0 9px 0 7px;
  border-radius: 13px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.pill .ms { font-size: 16px; }
.pill--on { color: var(--fp-success); background: var(--fp-success-bg); }
.pill--temp { color: var(--fp-warning); background: var(--fp-warning-bg); }
.pill--off { color: var(--fp-ink-3); background: var(--fp-canvas); }
.lock-btn.is-locked { color: var(--fp-green-700); }
.empty-row { padding: 32px 16px; text-align: center; color: var(--fp-ink-3); }
.ulabel { display: none; }

.segmented { display: flex; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm); overflow: hidden; max-width: 100%; overflow-x: auto; }
.segmented button {
  height: 38px; padding: 0 14px; border: 0; border-left: 1px solid var(--fp-border-strong); background: #fff; color: var(--fp-ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.segmented button:first-child { border-left: 0; }
.segmented button span { font-weight: 400; }
.segmented button[aria-pressed="true"] { background: var(--fp-green-700); color: #fff; }
.diff-text { margin-left: auto; font-size: 14px; color: var(--fp-ink-2); white-space: nowrap; }
.diff-text.has-diff { color: var(--fp-warning); }

.matrix { flex: 1; min-height: 0; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: auto; }
.matrix__inner { min-width: 820px; }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(7, 96px); padding: 0 16px; min-height: 48px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--fp-divider); }
.mrow--head { height: 44px; min-height: 44px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); position: sticky; top: 0; z-index: 1; border-bottom: 0; }
.mrow--head span:not(:first-child) { text-align: center; }
.mgroup { padding: 0 16px; height: 32px; display: flex; align-items: center; background: var(--fp-surface-alt); border-bottom: 1px solid var(--fp-divider); font-size: 14px; font-weight: 600; color: var(--fp-green-700); }
.mfn { display: flex; flex-direction: column; line-height: 19px; }
.mfn b { font-weight: 500; }
.mfn span { color: var(--fp-ink-3); min-height: 19px; }
.mna { text-align: center; color: var(--fp-border-strong); }
.mcell {
  justify-self: center; width: 44px; height: 40px; border: 1px solid transparent; border-radius: var(--fp-r-sm); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.mcell .ms { font-size: 24px; color: var(--fp-ink-3); }
.mcell[aria-pressed="true"] .ms { color: var(--fp-green-700); font-variation-settings: 'FILL' 1; }
.mcell.is-diff { border: 2px solid var(--fp-warning-input); background: var(--fp-warning-bg); }
.mcell:disabled { cursor: not-allowed; }
.mcell:disabled .ms, .mcell:disabled[aria-pressed="true"] .ms { color: var(--fp-ink-3); }

.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 460px; max-width: 100%; background: #fff; z-index: 50;
  box-shadow: -12px 0 32px rgba(28, 36, 32, .18); display: flex; flex-direction: column;
}
.drawer-backdrop { position: fixed; inset: 0; background: rgba(28, 36, 32, .35); z-index: 49; }
.drawer__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--fp-divider); }
.drawer__title { font: var(--fp-text-title-s); flex: 1; min-width: 0; }
.drawer__head .icon-btn .ms { font-size: 22px; }
.drawer__body { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.drawer__body .input { font-size: 15px; }
.drawer__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--fp-divider); background: var(--fp-surface-alt); }
.drawer__foot .btn { height: 44px; }
.role-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md);
  background: #fff; text-align: left; cursor: pointer; color: var(--fp-ink); width: 100%;
}
.role-opt .ms { font-size: 22px; color: var(--fp-ink-3); }
.role-opt__text { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.role-opt__text b { font-weight: 600; }
.role-opt__text span { color: var(--fp-ink-2); font-weight: 400; }
.role-opt[aria-checked="true"] { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.role-opt[aria-checked="true"] .ms { color: var(--fp-green-700); }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; margin-top: 4px; }
.pick-empty { font-size: 14px; font-weight: 400; color: var(--fp-ink-3); padding: 6px 2px; }
.pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; width: 100%;
  border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; text-align: left; cursor: pointer; color: var(--fp-ink);
}
.pick-row:disabled { cursor: default; background: var(--fp-canvas); }
.pick-row.is-on { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.pick-row__main { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 20px; }
.pick-row__main b { font-weight: 600; }
.pick-row__main span { color: var(--fp-ink-2); font-weight: 400; overflow-wrap: anywhere; }
.pick-row__note { font-size: 13px; font-weight: 400; color: var(--fp-ink-3); text-align: right; flex: none; max-width: 45%; }
.pick-row__note--new { color: var(--fp-green-700); }
.info-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--fp-r-md); background: var(--fp-canvas); font-size: 14px; line-height: 20px; }
.info-box b { font-weight: 600; }
.info-box span { color: var(--fp-ink-2); }

@media (max-width: 1100px) {
  .urow { grid-template-columns: minmax(0, 1.4fr) 130px 150px 170px 100px; }
  .urow > .ulast, .urow--head > :nth-child(5) { display: none; }
}
@media (max-width: 760px) {
  .search { margin-left: 0; width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .table { flex: none; }
  .urow--head { display: none; }
  .urow {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name actions" "login login" "role role" "status status" "last last";
    row-gap: 6px; padding: 12px 16px;
  }
  .urow > .ucell-name { grid-area: name; }
  .urow > .ulogin { grid-area: login; }
  .urow > .urole { grid-area: role; }
  .urow > .pill { grid-area: status; }
  .urow > .ulast { grid-area: last; display: block; }
  .urow > .uactions { grid-area: actions; }
  .ulabel { display: inline; color: var(--fp-ink-3); font: 400 14px var(--fp-font); }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1; }
  .diff-text { margin-left: 0; white-space: normal; }
  .matrix__inner { min-width: 0; width: max-content; }
  .mrow { grid-template-columns: 190px repeat(7, 64px); padding: 0 12px; }
  .mrow--head span:not(:first-child) { font-size: 13px; line-height: 16px; }
}

/* ======================================================================
   GĐ1 — DANH MỤC: mã cám, vật tư hàng hoá, công thức
   (Danh mục mã cám / vật tư hàng hoá / công thức, Form mã cám và vật tư,
    Tạo công thức mới, Soạn công thức .dc.html)
   ====================================================================== */
.shell.is-wide .sidebar { width: var(--fp-sidebar-collapsed); }
.shell.is-wide .sidebar__brand, .shell.is-wide .nav__item, .shell.is-wide .sidebar__toggle { justify-content: center; }
.shell.is-wide .sidebar__brand-text, .shell.is-wide .nav__group, .shell.is-wide .nav__label,
.shell.is-wide .sidebar__toggle span:not(.ms), .shell.is-wide .nav__line--first { display: none; }
.crumbs__link { color: var(--fp-ink-3); text-decoration: none; }
.crumbs__link:hover { color: var(--fp-green-700); }
.muted { color: var(--fp-ink-3); }
.muted-2 { color: var(--fp-ink-2); }
.b { font-weight: 600; }
.r { text-align: right; }
.grow { flex: 1; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loading { padding: 48px 0; text-align: center; color: var(--fp-ink-3); }
.ro-badge { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--fp-r-sm); background: var(--fp-divider); font-size: 14px; color: #3A443E; }
.ro-badge .ms { font-size: 18px; }
.btn--s { height: 36px; padding: 0 12px; }
.btn--dark { background: var(--fp-ink); color: #fff; }
.btn[aria-disabled="true"] { color: var(--fp-ink-3); border-color: var(--fp-border); cursor: not-allowed; }
.btn.is-ready { border-color: var(--fp-green-700); color: var(--fp-green-700); }
.btn--outline-g { flex: 1; height: 36px; border: 1px solid var(--fp-green-700); background: #fff; color: var(--fp-green-700); padding: 0 8px; gap: 4px; }
.btn--outline-g.is-on { background: var(--fp-green-50); }
.btn--warn-s { height: 30px; padding: 0 10px; border: 1px solid var(--fp-warning); border-radius: var(--fp-r-sm); background: #fff; color: var(--fp-warning-strong); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn--ghost-s { height: 32px; padding: 0 10px; font-size: 14px; font-weight: 500; color: var(--fp-green-700); gap: 4px; }
.btn--ghost-s .ms { font-size: 18px; }
.icon-btn--s { width: 30px; height: 30px; }
.icon-btn--s .ms { font-size: 18px; }
.chip__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--fp-divider); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.chip[aria-pressed="true"] .chip__count { background: #fff; }
.chip--s { height: 34px; padding: 0 12px; border-radius: 17px; }
.chip--type { height: 40px; border-radius: 20px; font-weight: 600; }
.chip--type .ms { font-size: 18px; }
.chip:disabled { cursor: not-allowed; opacity: .55; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--fp-divider); font-weight: 500; font-size: 14px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--fp-r-xs); border: 1px solid var(--fp-border); background: var(--fp-surface-alt); font-size: 14px; white-space: nowrap; }
.tag--off { color: var(--fp-ink-3); text-decoration: line-through; }
.tag--new { height: 20px; padding: 0 5px; font-size: 13px; font-weight: 600; color: var(--fp-success-strong); background: var(--fp-success-bg); border-color: var(--fp-success-border); }
.tag--cur { height: 20px; padding: 0 5px; font-size: 13px; font-weight: 600; color: var(--fp-success); background: var(--fp-success-bg); border: 0; }
.tag--info { height: 20px; padding: 0 5px; font-size: 13px; font-weight: 600; color: var(--fp-info); background: var(--fp-info-bg); border: 0; }
.tag--warn { height: 20px; padding: 0 5px; font-size: 13px; font-weight: 600; color: var(--fp-warning-strong); background: var(--fp-warning-bg); border: 0; }
.pill--idle { color: var(--fp-ink-2); background: var(--fp-divider); }
.pill--new { color: var(--fp-info); background: var(--fp-info-bg); }
.pill--s { height: 22px; font-size: 13px; padding: 0 8px 0 6px; }
.pill--s .ms { font-size: 15px; }
.sep-tag { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 6px; border-radius: var(--fp-r-xs); background: var(--fp-info-bg); color: var(--fp-info); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sep-tag .ms { font-size: 15px; }
.count-badge { min-width: 28px; height: 26px; padding: 0 8px; border-radius: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.count-badge--multi { background: var(--fp-green-50); color: var(--fp-green-700); }
.count-badge--one { background: var(--fp-divider); }
.count-badge--none { background: var(--fp-warning-bg); color: var(--fp-warning); }
.table__foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--fp-border); font-size: 14px; color: var(--fp-ink-2); display: flex; gap: 16px; flex-wrap: wrap; }
.table__warn { display: inline-flex; align-items: center; gap: 4px; }
.table__warn .ms { font-size: 16px; color: var(--fp-warning); }
.empty-state { padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--fp-ink-2); }
.empty-state .ms { font-size: 32px; color: var(--fp-ink-3); }
.empty-state b { font-size: 16px; font-weight: 600; color: var(--fp-ink); }
.field-msg { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; margin-top: -6px; }
.field-msg .ms { font-size: 18px; }
.field-msg.is-error { color: var(--fp-error-strong); }
.field-msg.is-ok { color: var(--fp-success); }
.field--s { gap: 4px; font-weight: 400; color: var(--fp-ink-2); }
.field--s .input { height: 36px; font-size: 14px; }
.req { font-weight: 400; color: var(--fp-error); font-size: 14px; }
.input--s { height: 36px; font-size: 14px; padding: 0 8px; width: auto; }
.input--code { font: 600 16px var(--fp-font-mono); text-transform: uppercase; }
select.input { padding: 0 8px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.grid-2--code { grid-template-columns: 180px minmax(0, 1fr); }
.grid-3 { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; gap: 12px; }
.inline-field { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fp-ink-2); white-space: nowrap; }
.segmented--l button { height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; }
.segmented--l button .ms { font-size: 18px; }
.segmented button:disabled { cursor: not-allowed; }
.segmented--l { align-self: flex-start; }
.warn-box { display: flex; gap: 6px; font-size: 14px; font-weight: 400; color: var(--fp-warning-strong); background: var(--fp-warning-bg); padding: 8px 10px; border-radius: var(--fp-r-sm); line-height: 20px; }
.warn-box .ms { font-size: 18px; margin-top: 1px; }
.tabs-bar { display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--fp-border); flex: none; }
.tabs-bar .tabs { border-bottom: 0; flex: 1; min-width: 0; }
.tabs-bar .search { margin-bottom: 6px; width: 300px; flex: none; }
.tabs-bar .tab { padding: 0 12px; }
.tab__count { min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--fp-divider); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.tab[aria-selected="true"] .tab__count { background: var(--fp-green-50); }
.search--s { margin: 0; width: 100%; }
.search--s .ms { top: 8px; font-size: 18px; left: 8px; }
.search--s input { height: 34px; padding-left: 32px; }
.search--full { margin: 0; width: 100%; }
.search--l input { height: 44px; font-size: 15px; padding-left: 40px; }
.search--l .ms { top: 12px; left: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--fp-ink); color: #fff; border-radius: var(--fp-r-md); font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); z-index: 80; max-width: calc(100vw - 32px);
}
.toast .ms { font-size: 20px; color: #A7D98A; }
.toast--error .ms { color: #F2A39B; }
.toast button { border: 0; background: transparent; color: #A7D98A; font-size: 14px; font-weight: 600; cursor: pointer; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(28, 36, 32, .45); z-index: 60; }
.modal {
  position: fixed; left: 50%; top: 56px; transform: translateX(-50%); width: 860px; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px);
  background: #fff; border-radius: var(--fp-r-xl); box-shadow: var(--fp-shadow-modal); z-index: 61; display: flex; flex-direction: column;
}
.modal--s { width: 480px; }
.modal--l { width: 860px; }
.modal--xl { width: 960px; top: 40px; bottom: 40px; max-height: none; }
.modal__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--fp-divider); }
.modal__head > .ms { font-size: 24px; }
.modal__title { font: var(--fp-text-title-s); flex: 1; min-width: 0; }
.modal__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; overflow: auto; min-height: 0; flex: 1; }
.modal__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--fp-ink-2); }
.modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--fp-divider); background: var(--fp-surface-alt); border-radius: 0 0 var(--fp-r-xl) var(--fp-r-xl); }
.modal__sum { flex: 1; font-size: 14px; color: var(--fp-ink-2); }
.drawer--wide { width: 560px; }
.drawer__meta { flex: 1; font-size: 14px; color: var(--fp-ink-3); align-self: center; }
.drawer__foot { align-items: center; }
.menu-pop {
  position: fixed; z-index: 70; background: #fff; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-md); box-shadow: var(--fp-shadow-popover);
  padding: 4px; display: flex; flex-direction: column; min-width: 260px;
}
.menu-pop button { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 0; border-radius: var(--fp-r-sm); background: transparent; font-size: 14px; color: var(--fp-ink); cursor: pointer; text-align: left; }
.menu-pop button:hover:not(:disabled) { background: var(--fp-canvas); }
.menu-pop button:disabled { color: var(--fp-ink-3); cursor: not-allowed; }
.menu-pop .ms { font-size: 18px; color: var(--fp-ink-2); }
.menu-pop .danger, .menu-pop .danger .ms { color: var(--fp-error); }

/* ---------- Danh mục mã cám ---------- */
.frow {
  display: grid; grid-template-columns: 130px 80px minmax(0, 1.3fr) 150px minmax(0, 1.9fr) 150px 76px; column-gap: 12px; padding: 8px 16px; min-height: 52px;
  align-items: center; font-size: 14px; border-bottom: 1px solid var(--fp-divider); color: var(--fp-ink); text-decoration: none; background: #fff;
}
a.frow:hover { background: var(--fp-canvas); color: var(--fp-ink); }
.frow--head { min-height: 40px; height: 40px; padding: 0 16px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); flex: none; border-bottom: 0; }
.frow__code { font: 600 15px var(--fp-font-mono); }
.frow__kind { display: flex; align-items: center; gap: 6px; min-width: 0; }
.frow__kind.is-missing { color: var(--fp-warning); }
.frow__kind .ms { font-size: 18px; }
.frow__cts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.frow__act { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.frow__act .chev { color: var(--fp-ink-3); }
.uses { border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: hidden; }
.uses__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--fp-surface-alt); border-bottom: 1px solid var(--fp-divider); }
.uses__head .ms { font-size: 20px; color: var(--fp-green-700); }
.uses__title { font-size: 15px; font-weight: 600; flex: 1; }
.uses__add { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 2px; text-decoration: none; }
.uses__add .ms { font-size: 18px; color: inherit; }
.uses__row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px; column-gap: 10px; padding: 6px 12px; min-height: 44px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--fp-divider); color: var(--fp-ink); text-decoration: none; }
.uses__row:last-child { border-bottom: 0; }
.uses__row:hover { background: var(--fp-canvas); color: var(--fp-ink); }
.uses__name { display: flex; flex-direction: column; line-height: 19px; min-width: 0; }
.uses__name b { font-weight: 600; }
.uses__name span { color: var(--fp-ink-3); }
.uses__mid { text-align: right; color: var(--fp-ink-2); }
.uses__st { text-align: right; font-weight: 600; color: var(--fp-ink-3); }
.uses__st.is-on { color: var(--fp-success); }
.uses__empty { padding: 16px 12px; font-size: 14px; color: var(--fp-ink-3); }

/* ---------- Danh mục vật tư ---------- */
.irow {
  display: grid; grid-template-columns: 96px minmax(0, 1.25fr) 52px 180px minmax(0, 2fr) 130px 76px; column-gap: 12px; padding: 8px 16px; min-height: 48px;
  align-items: center; font-size: 14px; cursor: pointer;
}
.irow-wrap { border-bottom: 1px solid var(--fp-divider); background: #fff; }
.irow-wrap.has-hint { background: #FFFDF6; }
.irow-wrap:hover { background: var(--fp-canvas); }
.irow--head { min-height: 40px; height: 40px; padding: 0 16px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); flex: none; cursor: default; white-space: nowrap; }
.irow__code { color: var(--fp-ink-2); }
.irow__name { display: flex; align-items: center; gap: 6px; font-weight: 600; flex-wrap: wrap; min-width: 0; }
.irow__type { display: flex; align-items: center; gap: 6px; color: var(--fp-ink-2); }
.irow__type .ms { font-size: 18px; }
.irow__aliases { display: flex; flex-wrap: wrap; gap: 4px; }
.irow__act { display: flex; gap: 2px; justify-content: flex-end; }
.alias { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border-radius: 13px; font-size: 14px; background: var(--fp-canvas); border: 1px solid var(--fp-border); color: var(--fp-ink); }
.alias--new { background: var(--fp-success-bg); border-color: var(--fp-success-border); color: var(--fp-success-strong); }
.alias--new .ms { font-size: 15px; }
.alias--chip { height: 30px; padding: 0 4px 0 10px; border-radius: 15px; gap: 2px; }
.alias--chip button { width: 24px; height: 24px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; color: var(--fp-ink-2); display: flex; align-items: center; justify-content: center; padding: 0; }
.alias--chip button .ms { font-size: 16px; }
.alias-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm); min-height: 44px; }
.alias-box input { flex: 1; min-width: 140px; height: 30px; border: 0; font-size: 14px; outline: none; }
.dup-hint { display: flex; align-items: center; gap: 8px; margin: -2px 16px 10px 124px; padding: 6px 10px; border-radius: var(--fp-r-sm); background: var(--fp-warning-bg); border: 1px solid var(--fp-warning-border); font-size: 14px; color: var(--fp-warning-strong); }
.dup-hint .ms { font-size: 18px; }
.dup-hint > span:nth-child(2) { flex: 1; }
.sep-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; text-align: left; cursor: pointer; color: var(--fp-ink); }
.sep-toggle > .ms { font-size: 24px; color: var(--fp-ink-3); }
.sep-toggle.is-on { border-color: var(--fp-green-700); background: #F7FBF7; }
.sep-toggle.is-on > .ms { color: var(--fp-green-700); font-variation-settings: 'FILL' 1; }
.sep-toggle > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.sep-toggle b { font-weight: 600; }
.sep-toggle > span:last-child span { color: var(--fp-ink-2); }
.unk { background: #fff; border: 1px solid var(--fp-warning-border); border-radius: var(--fp-r-md); flex: none; }
.unk__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #F3E6C2; background: #FFFBEE; border-radius: var(--fp-r-md) var(--fp-r-md) 0 0; flex-wrap: wrap; }
.unk__head .ms { font-size: 20px; color: var(--fp-warning); }
.unk__head b { font-size: 15px; font-weight: 600; }
.unk__head span:last-child { font-size: 14px; color: var(--fp-warning-strong); }
.unk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; }
.unk__card { border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.unk__raw { font: 600 16px var(--fp-font-mono); }
.unk__src { font-size: 14px; color: var(--fp-ink-3); line-height: 20px; }
.unk__sug { font-size: 14px; line-height: 20px; }
.unk__btns { display: flex; gap: 6px; margin-top: 2px; }
.unk__btns .btn { flex: 1; height: 36px; padding: 0 8px; gap: 4px; }
.unk__btns .btn.is-on { background: var(--fp-divider); }
.pop {
  position: absolute; top: calc(100% + 6px); background: #fff; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-md); box-shadow: 0 8px 24px rgba(28, 36, 32, .18);
  z-index: 10; padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.pop--assign { left: 0; width: 380px; max-width: calc(100vw - 48px); }
.pop--create { right: 0; width: 320px; max-width: calc(100vw - 48px); padding: 12px; gap: 10px; }
.pop__title { font-size: 14px; font-weight: 600; padding: 2px 4px; }
.pop__foot { font-size: 14px; color: var(--fp-ink-3); padding: 2px 4px; }
.pop__actions { display: flex; justify-content: flex-end; gap: 6px; }
.pop__actions .btn { height: 36px; }
.pop__opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--fp-r-sm); cursor: pointer; background: #fff; border: 0; text-align: left; font-size: 14px; color: var(--fp-ink); width: 100%; }
.pop__opt:hover:not(:disabled) { background: var(--fp-green-50); }
.pop__opt:disabled { cursor: not-allowed; opacity: .55; }
.pop__opt .mono { font-size: 13px; min-width: 64px; }
.pop__opt b { flex: 1; font-weight: 600; }
.pop__opt.is-sug { background: var(--fp-canvas); }
.pop__sug { font-size: 13px; font-weight: 600; color: var(--fp-green-700); }
.pick-list { display: flex; flex-direction: column; gap: 2px; }
.mcard { text-align: left; border: 1px solid var(--fp-border); border-radius: var(--fp-r-lg); background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; color: var(--fp-ink); }
.mcard.is-keep { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.mcard__top { display: flex; align-items: center; gap: 8px; }
.mcard__top .ms { font-size: 22px; color: var(--fp-ink-3); }
.mcard.is-keep .mcard__top .ms { color: var(--fp-green-700); }
.mcard__top b { font-size: 16px; font-weight: 600; flex: 1; }
.mcard__role { font-size: 14px; font-weight: 600; color: var(--fp-ink-2); }
.mcard.is-keep .mcard__role { color: var(--fp-green-700); }
.mcard__grid { display: grid; grid-template-columns: 120px 1fr; row-gap: 4px; font-size: 14px; line-height: 20px; }
.effects { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--fp-r-md); background: var(--fp-canvas); font-size: 14px; line-height: 20px; }
.effects b { font-weight: 600; }
.effects span { display: flex; gap: 6px; }
.effects .ms { font-size: 18px; color: var(--fp-green-700); }

/* ---------- Danh mục công thức ---------- */
.check-btn--s { height: 36px; }
.sel-text { margin-left: auto; font-size: 14px; color: var(--fp-ink-2); }
.crow {
  display: grid; grid-template-columns: 36px minmax(0, 1.9fr) 110px 100px 76px 76px minmax(0, 1fr) 64px 104px 120px; column-gap: 10px; padding: 0 14px; min-height: 48px;
  align-items: center; font-size: 14px; border-bottom: 1px solid var(--fp-divider); background: #fff;
}
.crow--head { min-height: 44px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); flex: none; line-height: 18px; border-bottom: 0; }
.crow.is-sel { background: #F2F9F3; }
.crow.is-off { color: var(--fp-ink-3); }
.cb { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cb .ms { font-size: 22px; color: var(--fp-ink-3); }
.cb[aria-pressed="true"] .ms { color: var(--fp-green-700); font-variation-settings: 'FILL' 1; }
.crow__name { display: flex; flex-direction: column; line-height: 19px; text-decoration: none; color: inherit; min-width: 0; }
.crow__name b { font-weight: 600; }
.crow__name:hover b { color: var(--fp-green-700); text-decoration: underline; }
.crow__name span { color: var(--fp-ink-3); }
.crow__ver { display: flex; flex-direction: column; line-height: 19px; min-width: 0; }
.tot--warn { color: var(--fp-warning); }
.tot--note { color: var(--fp-ink-2); }
.cgroup { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 36px; background: var(--fp-surface-alt); border-bottom: 1px solid var(--fp-divider); font-size: 14px; }
.cgroup .mono { font-size: 15px; }
.cgroup .badge { height: 22px; font-size: 13px; font-weight: 600; }
.cgroup__n { margin-left: auto; color: var(--fp-ink-3); }
.cmp__cols, .cmp__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 110px; column-gap: 12px; padding: 0 20px; align-items: center; font-size: 14px; }
.cmp__cols { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--fp-border); align-items: end; }
.cmp__cols .r { display: flex; flex-direction: column; }
.cmp__body { flex: 1; min-height: 0; overflow: auto; }
.cmp__head { padding: 0 20px; height: 32px; display: flex; align-items: center; background: var(--fp-table-head); font-size: 14px; font-weight: 600; color: var(--fp-ink-2); }
.cmp__row { min-height: 34px; border-bottom: 1px solid var(--fp-divider); }
.cmp__row.is-diff { background: #FFF8E6; }
.cmp__row.is-diff .cmp__name { font-weight: 600; }
.cmp__row .pos { color: var(--fp-success); }
.cmp__row .neg { color: var(--fp-error); }

/* ---------- Tạo công thức mới ---------- */
.wiz { width: 820px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.wiz__h1 { margin: 0; font: var(--fp-text-page); }
.steps { display: flex; align-items: center; gap: 8px; }
.step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.step__dot { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; color: var(--fp-ink-3); border: 1px solid var(--fp-border-strong); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.step__dot .ms { font-size: 18px; }
.step.is-cur .step__dot { background: var(--fp-green-50); color: var(--fp-green-700); border: 2px solid var(--fp-green-700); }
.step.is-done .step__dot { background: var(--fp-green-700); color: #fff; border: 0; }
.step__text { display: flex; flex-direction: column; line-height: 19px; font-size: 14px; min-width: 0; }
.step__text b { font-weight: 600; color: var(--fp-ink-3); }
.step.is-cur .step__text b, .step.is-done .step__text b { color: var(--fp-ink); }
.step__text span { color: var(--fp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step__line { flex: 1; height: 2px; background: var(--fp-border); margin: 0 4px; min-width: 12px; }
.step.is-done .step__line { background: var(--fp-green-700); }
.wiz__card { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.wiz__title { font-size: 17px; font-weight: 600; }
.wiz__foot { display: flex; align-items: center; gap: 8px; }
.wiz__foot .btn { height: 44px; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; text-align: left; cursor: pointer; color: var(--fp-ink); }
.pick > .ms { font-size: 22px; color: var(--fp-ink-3); }
.pick.is-on { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.pick.is-on > .ms { color: var(--fp-green-700); }
.pick__text { display: flex; flex-direction: column; line-height: 19px; flex: 1; font-size: 14px; min-width: 0; }
.pick__text b { font-size: 15px; font-weight: 600; }
.pick__text span { color: var(--fp-ink-2); }
.pick__n { font-size: 14px; color: var(--fp-ink-3); white-space: nowrap; }
.prefix-input { display: flex; align-items: center; height: 48px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm); overflow: hidden; background: #fff; }
.prefix-input.is-error { border: 2px solid var(--fp-error); }
.prefix-input__pre { padding: 0 6px 0 12px; font: 600 16px var(--fp-font-mono); color: var(--fp-ink-2); background: var(--fp-canvas); align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--fp-divider); white-space: nowrap; }
.prefix-input input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 12px; font-size: 16px; font-weight: 600; color: var(--fp-ink); }
.prefix-input input:focus { outline: none; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-lg); background: #fff; text-align: left; cursor: pointer; color: var(--fp-ink); min-height: 120px; }
.mode.is-on { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.mode__top { display: flex; align-items: center; justify-content: space-between; }
.mode__top .ms { font-size: 20px; color: var(--fp-ink-3); }
.mode__top .mode__icon { font-size: 24px; color: var(--fp-ink-2); }
.mode.is-on .mode__top .ms { color: var(--fp-green-700); }
.mode b { font-size: 15px; font-weight: 600; }
.mode > span:last-child { font-size: 14px; color: var(--fp-ink-2); line-height: 20px; }
.kv-row { display: flex; gap: 16px; padding: 10px 12px; border-radius: var(--fp-r-md); background: var(--fp-canvas); font-size: 14px; flex-wrap: wrap; }
.kv-row > span { display: flex; flex-direction: column; line-height: 20px; }
.kv-row b { font-weight: 600; }
.paste { font: 500 14px/1.5 var(--fp-font-mono) !important; min-height: 150px; }
.ptable { border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: hidden; }
.ptable__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 110px 90px; column-gap: 10px; padding: 0 12px; min-height: 34px; align-items: center; font-size: 14px; border-top: 1px solid var(--fp-divider); }
.ptable__row--head { height: 32px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-top: 0; }
.ptable__row > span:nth-child(2) { display: flex; align-items: center; gap: 6px; color: var(--fp-success); }
.ptable__row--head > span:nth-child(2) { color: var(--fp-ink-2); }
.ptable__row > span:nth-child(2) .ms { font-size: 18px; }
.ptable__row.is-warn { background: #FFFBEE; }
.ptable__row.is-warn > span:nth-child(2) { color: var(--fp-warning); font-weight: 600; }
.ptable__row.is-calc > span:nth-child(2) { color: var(--fp-ink-2); }
.paste-sum { font-size: 14px; color: var(--fp-ink-2); }

/* ---------- Soạn công thức ---------- */
.editor { flex: 1; min-height: 0; display: flex; margin: -18px -24px -20px; }
.ed-left { width: 268px; flex: none; background: #fff; border-right: 1px solid var(--fp-border); display: flex; flex-direction: column; min-height: 0; }
.ed-left__top { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--fp-divider); font-size: 14px; }
.ed-left__top select { height: 40px; font: 600 15px var(--fp-font-mono); }
.ed-left__label { padding: 10px 14px 4px; font-size: 14px; font-weight: 600; color: var(--fp-ink-2); }
.ed-left__list { flex: 1; min-height: 0; overflow: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.ctcard { text-align: left; padding: 10px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; color: var(--fp-ink); display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.ctcard:hover { color: var(--fp-ink); background: var(--fp-canvas); }
.ctcard.is-on { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.ctcard b { font-size: 15px; font-weight: 600; }
.ctcard > span { font-size: 14px; color: var(--fp-ink-2); }
.ctcard__ver { display: flex; align-items: center; gap: 6px; }
.ctcard__ver .ms { font-size: 16px; }
.ctcard .pill { align-self: flex-start; }
.ctadd { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 1px dashed var(--fp-border-strong); border-radius: var(--fp-r-md); background: #fff; color: var(--fp-green-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.ed-main { flex: 1; min-width: 0; overflow: auto; padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.ed-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ed-head__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.ed-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ed-head__title h1 { margin: 0; font: var(--fp-text-page); }
.ed-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vst { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 8px; border-radius: 13px; font-size: 14px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.vst .ms { font-size: 16px; }
.vst--cur { color: var(--fp-success); background: var(--fp-success-bg); border-color: var(--fp-success-border); }
.vst--old { color: var(--fp-ink-2); background: var(--fp-divider); border-color: var(--fp-border); }
.vst--draft, .vst--up { color: var(--fp-info); background: var(--fp-info-bg); border-color: var(--fp-info-border); }
.panel { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel__head > .ms { font-size: 20px; color: var(--fp-green-700); }
.panel__head b { font-size: 15px; font-weight: 600; }
.panel__head b { flex: 1; }
.panel__hint { order: 3; flex-basis: 100%; font-size: 14px; margin-top: -6px; }
.vchips { display: flex; gap: 8px; flex-wrap: wrap; }
.vchip { min-width: 150px; text-align: left; padding: 8px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; color: var(--fp-ink); display: flex; flex-direction: column; gap: 3px; text-decoration: none; max-width: 260px; }
.vchip:hover { color: var(--fp-ink); border-color: var(--fp-border-strong); }
.vchip.is-on { border: 2px solid var(--fp-green-700); background: #F7FBF7; }
.vchip.is-draft:not(.is-on) { background: #F4F8FD; }
.vchip__label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.vchip__sub { font-size: 14px; color: var(--fp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vchip__tot { font-size: 14px; color: var(--fp-ink-2); }
.vchip__tot.tot--warn { color: var(--fp-warning); }
.ro-line, .hint-line, .note-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fp-ink-2); padding: 0 2px; }
.ro-line .ms, .hint-line .ms, .note-line .ms { font-size: 18px; }
.draft-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--fp-info-border); border-radius: var(--fp-r-md); padding: 8px 10px; }
.draft-bar__save { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fp-info); white-space: nowrap; }
.draft-bar__save .ms { font-size: 18px; }
.draft-bar .input--s { min-width: 200px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ed-tables { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ed-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ftable { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: hidden; }
.ftable__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fp-border); }
.ftable__head b { font-size: 15px; font-weight: 600; flex: 1; }
.fl { display: grid; grid-template-columns: 30px minmax(0, 1fr) 108px; column-gap: 6px; padding: 0 10px; min-height: 34px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--fp-divider); }
.ftable--vl1 .fl, .ftable--vl2 .fl { grid-template-columns: 30px minmax(0, 1fr) 84px 66px; }
.ftable.is-draft .fl { grid-template-columns: 30px minmax(0, 1fr) 108px 30px; }
.ftable--vl1.is-draft .fl, .ftable--vl2.is-draft .fl { grid-template-columns: 30px minmax(0, 1fr) 84px 66px 30px; }
.fl--head .fl__cum { font-size: 13px; line-height: 16px; }
.fl--head { height: 32px; min-height: 32px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-bottom: 0; }
.fl__stt { text-align: right; color: var(--fp-ink-3); }
.fl--head .fl__stt { color: var(--fp-ink-2); }
.fl__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; padding: 4px 0; }
.fl__name > .ms { font-size: 16px; color: var(--fp-ink-3); }
.fl__raw { font-size: 13px; color: var(--fp-ink-3); }
.fl__qty { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; text-align: right; }
.fl__cum { text-align: right; color: var(--fp-ink-2); }
.fl__base { font-size: 13px; color: var(--fp-ink-3); white-space: nowrap; }
.fl__chg { color: var(--fp-info); }
.fl__in { height: 28px; width: 76px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-xs); padding: 0 6px; font-size: 14px; text-align: right; color: var(--fp-ink); font-family: inherit; font-variant-numeric: tabular-nums; }
.fl__in.is-bad { border-color: var(--fp-error); background: var(--fp-error-row); }
.fl.is-new { background: #F2F9F3; }
.fl.is-new .fl__in { font-weight: 700; }
.fl.is-added { background: #F2F9F3; }
.fl.is-changed { background: #F4F8FD; }
.fl.is-changed .fl__in { font-weight: 700; }
.fl.is-unknown { background: #FFFBEE; }
.fl.is-calc { background: var(--fp-surface-alt); }
.fl.is-removed { background: #FDF3F2; color: var(--fp-error-strong); }
.fl__act { display: flex; justify-content: flex-end; }
.fl-add { display: flex; align-items: center; gap: 6px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--fp-divider); background: #fff; color: var(--fp-green-700); font-size: 14px; font-weight: 600; cursor: pointer; }
.fl-add:hover { background: var(--fp-green-50); }
.fl-add .ms { font-size: 18px; }
.tfoot { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; padding: 0 12px 0 22px; min-height: 38px; align-items: center; font-size: 14px; font-weight: 600; background: var(--fp-surface-alt); }
.tfoot .ms { font-size: 18px; }
.tfoot--ok { background: var(--fp-success-bg); color: var(--fp-success-strong); }
.tfoot--note { background: var(--fp-divider); color: var(--fp-ink-2); }
.tfoot--warning { background: var(--fp-warning-bg); color: var(--fp-warning-strong); }
.ed-right { width: 316px; flex: none; background: #fff; border-left: 1px solid var(--fp-border); display: flex; flex-direction: column; min-height: 0; }
.ed-right__head { padding: 14px 16px 10px; border-bottom: 1px solid var(--fp-divider); display: flex; flex-direction: column; gap: 4px; }
.ed-right__head b { font-size: 16px; font-weight: 600; }
.ed-right__head span { font-size: 14px; color: var(--fp-ink-2); }
.ed-right__diffs { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--fp-divider); font-size: 14px; max-height: 40%; overflow: auto; }
.diff { display: flex; gap: 8px; align-items: flex-start; line-height: 20px; }
.diff .ms { font-size: 18px; margin-top: 1px; }
.diff b { font-weight: 600; }
.ed-right__label { padding: 12px 16px 6px; font-size: 15px; font-weight: 600; }
.note-form { display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "text btn" "day ."; gap: 4px; padding: 0 14px 8px; }
.note-form #n-text { grid-area: text; width: 100%; }
.note-form #n-day { grid-area: day; width: 150px; }
.note-form .icon-btn { grid-area: btn; height: 36px; }
.ed-right__log { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.log { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--fp-divider); border-radius: var(--fp-r-md); }
.log__meta { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fp-ink-3); }
.log__meta .ms { font-size: 16px; }
.log__text { font-size: 14px; line-height: 20px; }

@media (max-width: 1280px) {
  .ed-right { display: none; }
  .unk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ed-tables { grid-template-columns: minmax(0, 1fr); }
  .crow { grid-template-columns: 36px minmax(0, 1.9fr) 90px 92px 70px 70px minmax(0, 1fr) 100px; }
  .crow > :nth-child(8), .crow > :nth-child(9) { display: none; }
  .irow { grid-template-columns: 90px minmax(0, 1.25fr) 170px minmax(0, 1.6fr) 120px 76px; }
  .irow > .irow__unit, .irow--head > :nth-child(3) { display: none; }
  .frow { grid-template-columns: 110px 70px minmax(0, 1.2fr) 130px minmax(0, 1.6fr) 76px; }
  .frow > .frow__used, .frow--head > :nth-child(6) { display: none; }
}
@media (max-width: 900px) {
  .shell.is-wide .sidebar { width: var(--fp-sidebar); }
  .editor { flex-direction: column; margin: -16px; }
  .ed-left { width: auto; border-right: 0; border-bottom: 1px solid var(--fp-border); }
  .ed-left__list { flex-direction: row; overflow-x: auto; padding: 4px 14px 12px; }
  .ctcard { min-width: 220px; }
  .ctadd { min-width: 180px; padding: 0 12px; }
  .ed-main { overflow: visible; padding: 16px; }
  .ed-right { display: flex; width: auto; border-left: 0; border-top: 1px solid var(--fp-border); }
  .ed-right__diffs { max-height: none; }
  .content[data-page="congthuc"] { overflow: auto; }
  .panel__hint { text-align: left; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .tabs-bar { flex-direction: column; align-items: stretch; gap: 0; }
  .tabs-bar .search { margin: 8px 0; }
  .toolbar .inline-field { flex: 1; min-width: 140px; }
  .toolbar .inline-field select { flex: 1; }
  .sel-text { margin-left: 0; flex-basis: 100%; }
  .unk__grid { grid-template-columns: minmax(0, 1fr); }
  .grid-2, .grid-2--code, .grid-3, .mode-grid, .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .pop--create { left: 0; right: auto; }
  .frow--head, .irow--head, .crow--head { display: none; }
  .frow {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code group act" "kind kind kind" "die die die" "cts cts cts";
    row-gap: 6px; padding: 12px 16px;
  }
  .frow__code { grid-area: code; } .frow__group { grid-area: group; } .frow__kind { grid-area: kind; } .frow__die { grid-area: die; }
  .frow__cts { grid-area: cts; } .frow__act { grid-area: act; } .frow > .frow__used { display: none; }
  .irow {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "code st" "type type" "aliases aliases"; row-gap: 6px; padding: 12px 16px;
  }
  .irow__code { grid-area: code; } .irow__name { grid-area: name; } .irow__type { grid-area: type; } .irow__aliases { grid-area: aliases; }
  .irow__st { grid-area: st; } .irow__act { grid-area: act; } .irow > .irow__unit { display: none; }
  .dup-hint { margin: 0 16px 12px; flex-wrap: wrap; }
  .crow {
    grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "cb name st" ". die die" ". tot tot" ". vl1 vl1" ". vl2 vl2" ". ver ver";
    row-gap: 4px; padding: 10px 12px; align-items: start;
  }
  .crow > .cb { grid-area: cb; } .crow > .crow__name { grid-area: name; } .crow > :nth-child(3) { grid-area: die; }
  .crow > :nth-child(4) { grid-area: tot; text-align: left; } .crow > :nth-child(5) { grid-area: vl1; text-align: left; } .crow > :nth-child(6) { grid-area: vl2; text-align: left; }
  .crow > :nth-child(7) { grid-area: ver; } .crow > :nth-child(10) { grid-area: st; }
  .crow > :nth-child(8), .crow > :nth-child(9) { display: none; }
  .cmp__cols, .cmp__row { grid-template-columns: minmax(0, 1fr) 76px 76px 60px; padding: 0 12px; column-gap: 6px; }
  .cmp__cols { padding-top: 10px; padding-bottom: 10px; }
  .modal, .modal--xl { left: 8px; right: 8px; transform: none; width: auto; max-width: none; top: 16px; bottom: 16px; max-height: none; }
  .modal--s { bottom: auto; }
  .drawer--wide { width: 100%; }
  .steps .step__text span { display: none; }
  .wiz__foot { flex-wrap: wrap; }
  .wiz__foot .btn--primary { flex: 1; }
  .ptable__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 70px; }
  .ptable__row > :nth-child(3) { display: none; }
  .ed-head__actions { width: 100%; }
  .ed-head__actions .btn--primary { flex: 1; }
  .fl { padding: 0 8px; column-gap: 6px; }
  .ftable.is-draft .fl { grid-template-columns: 26px minmax(0, 1fr) 92px 30px; }
  .ftable--vl1.is-draft .fl, .ftable--vl2.is-draft .fl { grid-template-columns: 26px minmax(0, 1fr) 84px 30px; }
  .ftable--vl1 .fl, .ftable--vl2 .fl { grid-template-columns: 26px minmax(0, 1fr) 84px 64px; }
  .ftable--vl1.is-draft .fl__cum, .ftable--vl2.is-draft .fl__cum { display: none; }
  .fl__in { width: 72px; height: 34px; font-size: 15px; }
  .draft-bar .input--s { min-width: 0; flex-basis: 100%; }
  .vchip { min-width: 0; flex: 1 1 140px; }
  .tfoot { padding: 0 8px; }
}
.btn--primary:disabled { background: var(--fp-border); color: var(--fp-ink-3); opacity: 1; }
.drawer__body > *, .modal__body > * { flex: none; }

/* ===================== GĐ2 · KHSX: Nhập · Xem trước & chốt · In phiếu ===================== */
.kh-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kh-title h1 { white-space: nowrap; }
.kh-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--fp-ink-3); }
.kh-sub .ms { font-size: 16px; }
.kh-dot { color: var(--fp-border-strong); }
.pill.kh-chip--err { color: var(--fp-error); background: var(--fp-error-bg); }
.btn-link { border: 0; background: transparent; color: var(--fp-green-700); font: inherit; font-weight: 500; cursor: pointer; padding: 0; white-space: nowrap; }
.btn-link:hover { text-decoration: underline; }
.kh-in.is-warn, .input.is-warn { border: 2px solid var(--fp-warning-input); background: #FFFBEE; }

/* ---- Nhập KHSX ---- */
.kh-machine { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); }
.kh-machine__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--fp-border); }
.kh-machine__head b { font-size: 16px; font-weight: 600; }
.kh-machine__head span { color: var(--fp-ink-2); }
.kh-grid { display: grid; grid-template-columns: 28px 28px minmax(220px, 1.3fr) minmax(0, 1.5fr) 84px 84px 104px minmax(0, 1.2fr) 40px; column-gap: 8px; padding: 0 10px; align-items: center; }
.kh-head { height: 36px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); }
.kh-rowwrap { border-bottom: 1px solid var(--fp-divider); background: #fff; }
.kh-rowwrap.is-err { background: #FFFBFA; }
.kh-rowwrap.is-drag { opacity: .4; }
.kh-rowwrap.is-over, .kh-foot.is-over { box-shadow: inset 0 3px 0 var(--fp-green-700); }
.kh-row { padding-top: 5px; padding-bottom: 5px; min-height: 46px; }
.kh-drag { cursor: grab; color: var(--fp-ink-3); display: flex; justify-content: center; }
.kh-drag .ms { font-size: 20px; }
.kh-stt { color: var(--fp-ink-3); }
.kh-ct { position: relative; min-width: 0; }
.kh-in { width: 100%; height: 36px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-xs); padding: 0 8px; font: inherit; color: var(--fp-ink); background: #fff; min-width: 0; }
.kh-in--ct { font-weight: 600; padding: 0 10px; }
.kh-in.is-err { border: 2px solid var(--fp-error); }
.kh-in.r { text-align: right; }
.kh-in.b { font-weight: 600; }
.kh-meta { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--fp-ink-2); }
.kh-meta__code { font-weight: 600; color: var(--fp-ink); }
.kh-meta--err { color: var(--fp-error); }
.kh-ver { flex: none; font-size: 13px; color: var(--fp-success-strong); background: var(--fp-success-bg); border-radius: var(--fp-r-xs); padding: 0 6px; line-height: 20px; }
.kh-ver--none { color: var(--fp-error); background: var(--fp-error-bg); }
.kh-cell { display: block; min-width: 0; }
.kh-ml { display: none; }
.kh-me__box { display: flex; align-items: center; gap: 2px; }
.kh-reset { color: var(--fp-warning); flex: none; }
.kh-calc { font-weight: 400; color: var(--fp-warning); font-size: 13px; }
.kh-act { display: flex; justify-content: center; }
.kh-move { display: none; }
.kh-del:hover { background: var(--fp-error-bg); color: var(--fp-error); }
.kh-msg { display: flex; align-items: center; gap: 6px; margin: -2px 50px 6px 74px; padding: 4px 8px; border-radius: var(--fp-r-xs); font-size: 14px; }
.kh-msg .ms { font-size: 16px; }
.kh-msg b { font-weight: 600; }
.kh-msg--error { background: var(--fp-error-bg); color: var(--fp-error-strong); }
.kh-msg--warning { background: var(--fp-warning-bg); color: var(--fp-warning-strong); }
.kh-empty { padding: 14px 20px; color: var(--fp-ink-3); border-bottom: 1px solid var(--fp-divider); }
.kh-foot { height: 44px; font-weight: 600; background: var(--fp-surface-alt); border-radius: 0 0 var(--fp-r-md) var(--fp-r-md); }
.kh-foot__label { color: var(--fp-ink-2); }
.kh-foot__me { padding-right: 8px; }
.kh-add { justify-self: start; }
.kh-ac { position: absolute; left: 0; top: 40px; width: 460px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-md); box-shadow: var(--fp-shadow-popover); z-index: 30; padding: 4px; }
.kh-ac__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px 10px; border-radius: var(--fp-r-sm); cursor: pointer; }
.kh-ac__opt:hover { background: var(--fp-green-50); }
.kh-ac__opt.is-active { background: var(--fp-canvas); box-shadow: inset 3px 0 0 var(--fp-green-700); }
.kh-ac__text { display: flex; flex-direction: column; line-height: 19px; min-width: 0; }
.kh-ac__text b { font-weight: 600; }
.kh-ac__text span { color: var(--fp-ink-3); }
.kh-ac__ver { color: var(--fp-ink-2); align-self: center; white-space: nowrap; }
.kh-ac__none { padding: 10px; color: var(--fp-ink-2); }
.kh-ac__hint { padding: 6px 10px 4px; border-top: 1px solid var(--fp-divider); margin-top: 4px; font-size: 13px; color: var(--fp-ink-3); }
.kh-sum { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 12px 16px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kh-sum__machines { display: flex; gap: 24px; }
.kh-tot { display: flex; flex-direction: column; }
.kh-tot span { color: var(--fp-ink-3); }
.kh-tot b { font-size: 16px; font-weight: 600; }
.kh-tot--day { padding-left: 24px; border-left: 1px solid var(--fp-divider); }
.kh-tot--day b { font-size: 20px; color: var(--fp-green-700); }
.kh-bagnote { display: flex; align-items: center; gap: 6px; color: var(--fp-ink-2); }
.kh-bagnote .ms { font-size: 18px; }
.kh-checks { margin-left: auto; display: flex; gap: 6px; }
.kh-checks .pill { height: 30px; font-size: 14px; }
.kh-new { padding: 0; }
.kh-new__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.kh-paste { width: 980px; }
.kh-paste__body { gap: 12px; }
.kh-paste__ta { height: auto; padding: 8px 10px; font: 13px/18px var(--fp-font-mono); resize: vertical; white-space: pre; }
.kh-ptable { border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: hidden; }
.kh-pgrid { display: grid; grid-template-columns: 70px 64px 150px minmax(0, 1fr) 60px 60px 50px 150px; column-gap: 10px; padding: 0 12px; min-height: 38px; align-items: center; border-top: 1px solid var(--fp-divider); }
.kh-pgrid--head { min-height: 34px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-top: 0; }
.kh-pgrid.is-err { background: var(--fp-error-row); }
.kh-pgrid .mono { color: var(--fp-ink-2); }
.kh-pgrid.is-err .mono { color: var(--fp-error); }
.kh-unk { border: 1px solid var(--fp-error-border); border-radius: var(--fp-r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--fp-error-row); }
.kh-unk__sug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kh-unk__btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-md); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--fp-ink); }
.kh-unk__btn:hover { border-color: var(--fp-green-700); background: var(--fp-green-50); }
.kh-unk__btn span { font-size: 13px; color: var(--fp-ink-3); }
.kh-paste__foot { align-items: center; }
.kh-paste__hint { flex: 1; font-weight: 600; }
.kh-paste__hint.is-ok { color: var(--fp-success); }
.kh-paste__hint.is-err { color: var(--fp-error-strong); }

/* ---- Xem trước & kiểm tra ---- */
.content[data-page="khsx"] .pv { margin: -18px -24px -20px; }
.pv { display: grid; grid-template-columns: minmax(0, 1fr) var(--fp-side-panel); min-height: calc(100vh - var(--fp-header)); }
.pv-main { min-width: 0; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.pv-head { display: flex; align-items: center; gap: 14px; }
.pv-head .page-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-sum { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); scroll-margin-top: 16px; transition: box-shadow .3s; }
.pv-sum.is-hl, .pv-card.is-hl { box-shadow: 0 0 0 4px rgba(27, 107, 53, .15); border-color: var(--fp-green-700); }
.pv-sum__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fp-border); }
.pv-sum__head b { font-size: 16px; font-weight: 600; flex: 1; }
.pv-sum__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-sum__col + .pv-sum__col { border-left: 1px solid var(--fp-border); }
.pv-sgrid { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px 150px; column-gap: 8px; padding: 0 16px; height: 36px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.pv-sgrid--head { height: 34px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-bottom: 0; }
.pv-sgrid.is-adj { background: #F4F8FD; }
.pv-sgrid.is-zero { color: var(--fp-ink-3); }
.pv-sgrid s, .pv-kl s { margin-right: 6px; }
.pv-adj-ic { font-size: 16px; color: var(--fp-info); vertical-align: -3px; }
.pv-sum__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 16px; background: var(--fp-surface-alt); border-radius: 0 0 var(--fp-r-md) var(--fp-r-md); }
.pv-sum__foot b { font-size: 15px; }
.pv-grand { font-size: 20px; font-weight: 600; color: var(--fp-green-700); }
.pv-group { display: flex; flex-direction: column; gap: 12px; }
.pv-group__head { display: flex; align-items: baseline; gap: 10px; }
.pv-group__head h2 { margin: 0; font: var(--fp-text-title-s); }
.pv-group__head span { color: var(--fp-ink-2); }
.pv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pv-card { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); scroll-margin-top: 16px; transition: box-shadow .3s, border-color .3s; }
.pv-card.has-err { border-color: var(--fp-error-border); }
.pv-card__head { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--fp-divider); }
.pv-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-code { font-size: 16px; font-weight: 600; }
.pv-card__name { color: var(--fp-ink-2); flex: 1; min-width: 0; }
.pv-me { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--fp-green-50); color: var(--fp-green-700); font-weight: 600; white-space: nowrap; }
.pv-flag { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px 0 5px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.pv-flag .ms { font-size: 16px; }
.pv-flag--err { color: var(--fp-error); background: var(--fp-error-bg); }
.pv-flag--warn { color: var(--fp-warning); background: var(--fp-warning-bg); }
.pv-flag--note { color: #3A443E; background: var(--fp-divider); }
.pv-card__f { display: flex; align-items: center; gap: 8px; }
.pv-nct { font-size: 13px; font-weight: 600; color: var(--fp-green-700); background: var(--fp-green-50); border-radius: 10px; padding: 0 6px; line-height: 20px; white-space: nowrap; }
.pv-fsel { flex: 1; min-width: 0; width: auto; font-weight: 500; }
.pv-fstatic { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--fp-divider); border-radius: var(--fp-r-sm); background: var(--fp-surface-alt); font-weight: 500; }
.pv-card__qc { font-size: 13px; }
.pv-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 30px; column-gap: 6px; padding: 0 10px 0 14px; min-height: 34px; align-items: center; }
.pv-cgrid--head { height: 32px; min-height: 32px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); }
.pv-cgrid--foot { height: 40px; font-weight: 600; background: var(--fp-surface-alt); }
.pv-dev { color: var(--fp-warning); }
.pv-rowwrap { border-bottom: 1px solid var(--fp-divider); }
.pv-rowwrap.is-adj { background: #F4F8FD; }
.pv-rowwrap.is-err { background: var(--fp-error-row); }
.pv-err-ic { font-size: 18px; color: var(--fp-error); vertical-align: -4px; }
.pv-kl { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; }
.pv-adjval { font-weight: 600; color: var(--fp-info); }
.pv-tune { color: var(--fp-ink-3); }
.pv-tune.is-on { color: var(--fp-info); background: var(--fp-info-bg); }
.pv-adjnote { display: flex; align-items: flex-start; gap: 6px; padding: 0 10px 8px 14px; color: var(--fp-info); line-height: 20px; }
.pv-adjnote .ms { font-size: 16px; margin-top: 2px; }
.pv-adjnote > span:nth-child(2) { flex: 1; }
.pv-adjform { margin: 0 10px 10px; padding: 12px; border: 1px solid var(--fp-info-border); background: #F4F8FD; border-radius: var(--fp-r-md); display: flex; flex-direction: column; gap: 10px; }
.pv-adjform__grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; }
.pv-adjform__grid .input { width: 100%; }
.pv-adjform__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-exp { display: flex; align-items: center; gap: 6px; width: 100%; height: 40px; padding: 0 14px; border: 0; border-top: 1px solid var(--fp-divider); background: transparent; font: inherit; font-weight: 500; color: var(--fp-green-700); cursor: pointer; border-radius: 0 0 var(--fp-r-md) var(--fp-r-md); }
.pv-exp:hover { background: var(--fp-canvas); }
.pv-vls { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.pv-vl { border: 1px solid var(--fp-border); border-radius: var(--fp-r-sm); overflow: hidden; }
.pv-vl.is-err { border-color: var(--fp-error-border); }
.pv-vgrid { display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px; column-gap: 6px; padding: 0 10px; min-height: 32px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.pv-vgrid--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); }
.pv-vgrid--foot { min-height: 34px; font-weight: 600; background: var(--fp-surface-alt); border-bottom: 0; }
.pv-vgrid--foot > span:first-child { display: flex; align-items: center; gap: 6px; }
.pv-vgrid--foot .ms { font-size: 18px; color: var(--fp-success); }
.pv-vl.is-err .pv-vgrid--foot { background: var(--fp-error-bg); color: var(--fp-error-strong); }
.pv-vl.is-err .pv-vgrid--foot .ms { color: var(--fp-error); }
.pv-nodata { padding: 14px; color: var(--fp-error); }
.pv-aside { background: #fff; border-left: 1px solid var(--fp-border); display: flex; flex-direction: column; position: sticky; top: 0; height: calc(100vh - var(--fp-header)); min-height: 0; }
.pv-aside__head { padding: 16px 18px 12px; border-bottom: 1px solid var(--fp-divider); display: flex; flex-direction: column; gap: 10px; }
.pv-aside__title { display: flex; align-items: center; gap: 8px; }
.pv-aside__title .ms { font-size: 22px; color: var(--fp-green-700); }
.pv-aside__title b { font: var(--fp-text-title-s); flex: 1; }
.pv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-aside__body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.pv-cgroup { display: flex; flex-direction: column; gap: 6px; }
.pv-cgroup__t { padding: 0 4px; font-weight: 600; }
.pv-cgroup__t.is-err { color: var(--fp-error); }
.pv-cgroup__t.is-warn { color: var(--fp-warning); }
.pv-cgroup__t.is-ok { color: var(--fp-success); }
.pv-check { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; text-align: left; font: inherit; color: var(--fp-ink); cursor: pointer; }
.pv-check:disabled { cursor: default; color: var(--fp-ink); }
.pv-check:not(:disabled):hover { filter: brightness(.98); }
.pv-check > .ms { font-size: 20px; margin-top: 1px; }
.pv-check--err { background: var(--fp-error-bg); border-color: var(--fp-error-border); }
.pv-check--err > .ms { color: var(--fp-error); }
.pv-check--warn { background: var(--fp-warning-bg); border-color: var(--fp-warning-border); }
.pv-check--warn > .ms { color: var(--fp-warning); }
.pv-check--ok > .ms { color: var(--fp-success); }
.pv-check__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 20px; }
.pv-check__text b { font-weight: 600; }
.pv-check__text span { color: var(--fp-ink-2); }
.pv-check .pv-check__go { color: var(--fp-ink-3); }
.pv-aside__foot { padding: 14px 18px 16px; border-top: 1px solid var(--fp-border); display: flex; flex-direction: column; gap: 10px; background: var(--fp-surface-alt); }
.pv-note { color: var(--fp-ink-2); line-height: 20px; }
.pv-note > .ms { font-size: 18px; vertical-align: -4px; margin-right: 4px; }
.pv-note b { color: var(--fp-ink); }
.pv-blocked, .pv-done { display: flex; gap: 8px; line-height: 20px; border-radius: var(--fp-r-sm); padding: 8px 10px; }
.pv-blocked { color: var(--fp-error-strong); background: var(--fp-error-bg); border: 1px solid var(--fp-error-border); }
.pv-done { color: var(--fp-success); background: var(--fp-success-bg); border: 1px solid var(--fp-success-border); }
.pv-done a { color: var(--fp-success); font-weight: 600; }
.pv-blocked .ms, .pv-done .ms { font-size: 18px; margin-top: 1px; }
.pv-ack { display: flex; align-items: flex-start; gap: 8px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; font: inherit; line-height: 20px; color: var(--fp-ink); }
.pv-ack .ms { font-size: 22px; color: var(--fp-ink-2); }
.pv-ack .ms.is-on { color: var(--fp-green-700); }
.pv-btns { display: flex; gap: 8px; }
.pv-btns .btn { height: 44px; }
.pv-lock { font-size: 15px; }

/* ---- In phiếu ---- */
.content[data-page="in"] { overflow: hidden; }
.pr { flex: 1; min-height: 0; display: flex; gap: 12px; }
.pr-list { width: 340px; flex: none; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: flex; flex-direction: column; min-height: 0; }
.pr-list__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fp-border); }
.pr-list__head > span { margin-left: auto; }
.pr-all { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px; border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; color: var(--fp-ink); }
.pr-list__body { flex: 1; min-height: 0; overflow: auto; padding: 6px 0; }
.pr-sec { padding: 10px 14px 4px; font-weight: 600; color: var(--fp-green-700); }
.pr-cb { font-size: 22px; color: var(--fp-ink-2); }
.pr-cb.is-on { color: var(--fp-green-700); }
.pr-hit { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pr-code { display: flex; align-items: center; gap: 6px; padding: 6px 12px 2px 8px; }
.pr-item { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px 0 8px; margin: 1px 6px; border-radius: var(--fp-r-sm); cursor: pointer; }
.pr-item--in { padding-left: 30px; }
.pr-item:hover { background: var(--fp-canvas); }
.pr-item.is-cur { background: var(--fp-green-50); box-shadow: inset 0 0 0 1px var(--fp-green-700); }
.pr-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 19px; padding: 5px 0; }
.pr-item__text b { font-weight: 600; }
.pr-item__text span { color: var(--fp-ink-3); }
.pr-item__n { white-space: nowrap; }
.pr-view { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #DDE2DD; border-radius: var(--fp-r-md); min-height: 0; }
.pr-view__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md) var(--fp-r-md) 0 0; }
.pr-nav { border: 1px solid var(--fp-border-strong); }
.pr-nav:disabled { opacity: .4; cursor: default; }
.pr-view__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 19px; padding-left: 4px; }
.pr-view__canvas { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 16px; }
.pr-paper { width: 794px; flex: none; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); aspect-ratio: 210 / 297; display: flex; align-items: center; justify-content: center; }
.pr-paper.is-land { width: 1123px; aspect-ratio: 297 / 210; }
.pr-paper img { width: 100%; height: 100%; display: block; }
.pr-view__canvas.is-fit { align-items: center; }
.pr-view__canvas.is-fit .pr-paper { width: auto; height: 100%; max-width: 100%; }
.pr-view__canvas.is-fit .pr-paper img { object-fit: contain; }

@media (max-width: 1280px) {
  .pv-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .kh-grid { grid-template-columns: 24px 24px minmax(180px, 1.3fr) minmax(0, 1.2fr) 70px 70px 90px minmax(0, 1fr) 36px; column-gap: 6px; }
  .kh-msg { margin-left: 64px; margin-right: 10px; }
  .pv { grid-template-columns: minmax(0, 1fr); }
  .pv-aside { position: static; height: auto; border-left: 0; border-top: 1px solid var(--fp-border); order: -1; }
  .pv-aside__body { max-height: 320px; }
  .pr-list { width: 280px; }
}
@media (max-width: 760px) {
  .kh-head, .kh-drag { display: none; }
  .kh-grid { padding: 0 10px; }
  .kh-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stt ct ct ct" "stt meta meta meta" "stt xa bao me" "stt note note note" "stt act act act"; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .kh-row > .kh-stt { grid-area: stt; align-self: start; padding-top: 8px; }
  .kh-row > .kh-ct { grid-area: ct; }
  .kh-row > .kh-meta { grid-area: meta; }
  .kh-row > .kh-xa { grid-area: xa; }
  .kh-row > .kh-bao { grid-area: bao; }
  .kh-row > .kh-me { grid-area: me; }
  .kh-row > .kh-note { grid-area: note; }
  .kh-row > .kh-act { grid-area: act; justify-content: flex-end; }
  .kh-row > span:empty { display: none; }
  .kh-ml { display: block; font-size: 13px; color: var(--fp-ink-3); margin-bottom: 2px; }
  .kh-in { height: 44px; font-size: 16px; }
  .kh-move { display: flex; gap: 2px; margin-right: auto; }
  .kh-msg { margin: -4px 10px 8px 32px; }
  .kh-foot { grid-template-columns: auto 1fr auto auto auto; height: auto; padding: 8px 10px; gap: 8px; }
  .kh-foot > span:empty { display: none; }
  .kh-ac { width: calc(100vw - 60px); }
  .kh-sum { gap: 12px; }
  .kh-sum__machines { gap: 16px; }
  .kh-tot--day { padding-left: 0; border-left: 0; }
  .kh-checks { margin-left: 0; }
  .kh-pagehead .page-head__actions { width: 100%; }
  .kh-pagehead .page-head__actions .btn { flex: 1; }
  .kh-pgrid { grid-template-columns: 50px 50px minmax(0, 1fr) 46px 46px 40px; }
  .kh-pgrid > :nth-child(3), .kh-pgrid > :nth-child(8) { display: none; }
  .content[data-page="khsx"] .pv { margin: -16px; }
  .pv-main { padding: 16px; }
  .pv-head { flex-wrap: wrap; }
  .pv-sum__cols { grid-template-columns: minmax(0, 1fr); }
  .pv-sum__col + .pv-sum__col { border-left: 0; }
  .pv-sum__col + .pv-sum__col .pv-sgrid--head { display: none; }
  .pv-sgrid { grid-template-columns: 34px minmax(0, 1fr) 30px 120px; padding: 0 10px; }
  .pv-cgrid { grid-template-columns: minmax(0, 1fr) 90px 96px 30px; padding-left: 10px; }
  .pv-adjform__grid { grid-template-columns: minmax(0, 1fr); }
  .content[data-page="in"] { overflow: auto; }
  .pr { flex-direction: column; flex: none; }
  .pr-list { width: auto; max-height: 46vh; }
  .pr-view { min-height: 70vh; }
  .pr-head .page-head__actions { width: 100%; }
  .pr-head .page-head__actions .btn { flex: 1; }
  .pr-xlsx { display: none; }
  .kh-title h1 { white-space: normal; font-size: 20px; line-height: 28px; }
  .pr-view .segmented { display: none; }
  .pr-view__title b { white-space: normal; }
  .pv-cgrid { grid-template-columns: minmax(0, 1fr) 112px 96px 30px; }
  .pv-cgrid--foot > :nth-child(2) { white-space: nowrap; }
}

/* ===================== GĐ3 · Phân nhãn đóng bao, Tổng quan ===================== */
.nav__item { position: relative; }
.nav__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--fp-warning-input); color: #3A2A00; font-size: 12px; font-weight: 600; line-height: 1; }
.shell.is-collapsed .nav__badge, .shell.is-wide .nav__badge { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; }
.pill--bag { color: #3F2A70; background: #F1ECFA; }
.btn--danger { background: var(--fp-error); color: #fff; }
.btn--danger:hover { background: var(--fp-error-strong); color: #fff; }
.btn--danger:disabled { background: var(--fp-border); color: var(--fp-ink-3); opacity: 1; }
.btn--danger-o { background: #fff; border: 1px solid var(--fp-error); color: var(--fp-error); padding: 0 14px; }
.btn--danger-o:hover { background: var(--fp-error-bg); }
.btn--danger-o .ms { font-size: 18px; }

.bg-head .page-head__actions { align-items: center; }
.bg-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--fp-ink-3); white-space: nowrap; }
.bg-saved .ms { font-size: 16px; }
.bg-saved.is-err { color: var(--fp-error); }
.bg-pending { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--fp-warning-strong); }
.bg-pending > .ms { font-size: 18px; }
.bg-closed { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--fp-r-md); background: #F1ECFA; border: 1px solid #CFC1EA; color: #3F2A70; }
.bg-closed .ms { font-size: 22px; }
.bg-closed > span:last-child { flex: 1; }
.bg-ack { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--fp-r-md); background: var(--fp-warning-bg); border: 1px solid var(--fp-warning-border);
  color: var(--fp-warning-strong); cursor: pointer; text-align: left; font: inherit; }
.bg-ack .ms { font-size: 24px; color: var(--fp-warning); }
.bg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bg-kpi { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.bg-kpi > span:first-child { color: var(--fp-ink-2); }
.bg-kpi > div { display: flex; align-items: baseline; gap: 6px; }
.bg-kpi b { font-size: 26px; line-height: 34px; font-weight: 600; }
.bg-kpi small { font-size: 14px; color: var(--fp-ink-2); }
.bg-kpi--ok { border-color: var(--fp-success-border); }
.bg-kpi--ok b { color: var(--fp-success); }
.bg-kpi--warn { border-color: var(--fp-warning-border); }
.bg-kpi--warn b { color: var(--fp-warning); }
.bg-kpi--err { border-color: var(--fp-error-border); }
.bg-kpi--err b { color: var(--fp-error); }
.bg-table { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); }
.bg-grid { display: grid; grid-template-columns: 64px minmax(0, 1.3fr) 70px 76px 130px minmax(0, 2fr) 100px 120px minmax(0, 1fr); column-gap: 10px; padding: 0 14px; align-items: center; }
.bg-hd { min-height: 40px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); line-height: 17px; border-radius: var(--fp-r-md) var(--fp-r-md) 0 0; }
.bg-rowwrap { border-bottom: 1px solid var(--fp-divider); }
.bg-rowwrap.is-err { background: #FFFBFA; }
.bg-rowwrap.is-warn { background: #FFFDF6; }
.bg-row { padding-top: 8px; padding-bottom: 8px; min-height: 52px; }
.bg-ct { display: flex; flex-direction: column; line-height: 19px; min-width: 0; }
.bg-ct b { font-weight: 600; }
.bg-in, .bg-jf input { width: 100%; height: 36px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-xs); padding: 0 8px; font: inherit; text-align: right; color: var(--fp-ink); background: #fff; min-width: 0; }
.bg-note .bg-in { text-align: left; }
.bg-in.is-err { border: 2px solid var(--fp-error); }
.bg-in.is-warn { border: 2px solid var(--fp-warning-input); }
.bg-in:disabled, .bg-jf input:disabled, .bg-jf select:disabled, .bg-fpcode:disabled { background: var(--fp-canvas); color: var(--fp-ink); opacity: 1; }
.bg-fp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-fpcode { border: 0; background: transparent; font-size: 12px; color: var(--fp-ink-3); padding: 0; max-width: 100%; }
.bg-jfs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.bg-jf { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-sm); background: #fff; }
.bg-jf.is-err { border: 2px solid var(--fp-error); }
.bg-jf.is-err select { color: var(--fp-error); }
.bg-jf select { height: 30px; border: 0; font-size: 13px; font-weight: 600; background: transparent; color: var(--fp-ink); }
.bg-jf input { width: 64px; height: 30px; border-color: var(--fp-divider); padding: 0 6px; }
.bg-addjf { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 1px dashed var(--fp-border-strong); border-radius: var(--fp-r-sm); background: #fff;
  color: var(--fp-green-700); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.bg-addjf .ms { font-size: 18px; }
.bg-sum { display: flex; flex-direction: column; align-items: flex-end; line-height: 19px; }
.bg-d { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.bg-d .ms { font-size: 16px; }
.bg-d--ok { color: var(--fp-success); }
.bg-d--warning { color: var(--fp-warning); }
.bg-d--error { color: var(--fp-error); }
.bg-msg { margin: -4px 14px 8px 88px; }
.bg-foot { height: 44px; font-weight: 600; background: var(--fp-surface-alt); border-radius: 0 0 var(--fp-r-md) var(--fp-r-md); }
.bg-foot .is-warn { color: var(--fp-warning); }
.bg-foot .is-ok { color: var(--fp-success); }
.bg-reasons { display: flex; gap: 6px; flex-wrap: wrap; font-weight: 400; }
.bg-reason { height: auto; padding: 8px 10px; resize: none; font-weight: 400; }
.textarea.is-warn, .bg-reason.is-warn { border: 2px solid var(--fp-warning-input); }
.bg-ret { width: 560px; }


@media (max-width: 1280px) {
  .bg-grid { grid-template-columns: 56px minmax(0, 1.2fr) 60px 70px 120px minmax(0, 1.7fr) 86px 104px minmax(0, 0.9fr); column-gap: 8px; }
}
@media (max-width: 1100px) {
  .bg-hd { display: none; }
  .bg-row { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "m ct ct ct" "t need sum sum" "fp fp phe phe" "jf jf jf jf" "note note note note"; row-gap: 8px; }
  .bg-row > .bg-m { grid-area: m; } .bg-row > .bg-ct { grid-area: ct; } .bg-row > .bg-t { grid-area: t; text-align: left; } .bg-row > .bg-need { grid-area: need; text-align: left; }
  .bg-row > .bg-fp { grid-area: fp; } .bg-row > .bg-jfs { grid-area: jf; } .bg-row > .bg-phe { grid-area: phe; } .bg-row > .bg-sum { grid-area: sum; } .bg-row > .bg-note { grid-area: note; }
  .bg-row .kh-ml { display: block; font-size: 13px; color: var(--fp-ink-3); margin-bottom: 2px; flex-basis: 100%; }
  .bg-msg { margin-left: 14px; }
  .bg-foot { grid-template-columns: auto auto auto; height: auto; padding: 10px 14px; gap: 6px 12px; }
  .bg-foot > span:empty, .bg-foot > span:nth-child(2) { display: none; }
  .bg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bg-in, .bg-jf input { height: 44px; font-size: 16px; }
  .bg-jf { height: 44px; }
  .bg-kpi b { font-size: 22px; line-height: 28px; }
  .bg-head .page-head__actions { width: 100%; }
  .bg-head .page-head__actions .btn { flex: 1; }
  .bg-saved { flex-basis: 100%; }
}
.empty-state .btn .ms { font-size: 20px; color: inherit; }

/* ===================== GĐ4 · Chốt sản lượng, Báo cáo xuất kho ===================== */
.op-head .page-head__actions { align-items: center; }
.pill.op-pill-closed { color: #fff; background: var(--fp-green-700); }
.op-closed { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--fp-r-md); background: var(--fp-success-bg); border: 1px solid var(--fp-success-border); color: var(--fp-success-strong); }
.op-closed .ms { font-size: 22px; }
.op-kd { color: var(--fp-warning); font-weight: 600; }
.op-table { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: hidden; }
.op-grid { display: grid; grid-template-columns: 86px minmax(0, 1.25fr) 40px 50px 54px minmax(0, 1.15fr) 58px 62px 62px 66px 76px 62px 58px 58px minmax(0, 1.3fr); column-gap: 6px; padding: 0 12px; align-items: center; }
.op-band { height: 30px; align-items: end; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); }
.op-b { padding-bottom: 2px; border-bottom: 2px solid var(--fp-border-strong); }
.op-b--k:nth-child(3) { grid-column: span 4; }
.op-b--t { grid-column: span 6; border-bottom-color: var(--fp-green-700); color: var(--fp-green-700); }
.op-b--k:nth-child(5) { grid-column: span 2; }
.op-hd { min-height: 38px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-bottom: 1px solid var(--fp-border); line-height: 17px; }
.op-group { padding: 0 12px; height: 30px; display: flex; align-items: center; gap: 10px; background: var(--fp-surface-alt); border-bottom: 1px solid var(--fp-divider); }
.op-group b { font-weight: 600; }
.op-group span { color: var(--fp-ink-2); }
.op-rowwrap { border-bottom: 1px solid var(--fp-divider); }
.op-rowwrap.is-d { background: #FFFBEE; }
.op-rowwrap.is-x { background: #F4F8FD; }
.op-row { padding-top: 6px; padding-bottom: 6px; min-height: 44px; }
.op-codecell { display: flex; align-items: center; gap: 4px; }
.op-ps { font: 600 12px var(--fp-font); color: var(--fp-info); background: var(--fp-info-bg); border-radius: var(--fp-r-xs); padding: 0 4px; line-height: 18px; }
.op-ct { color: var(--fp-ink-2); line-height: 18px; }
.op-ctcell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op-ctcell .input { width: 100%; }
.op-lbl { line-height: 18px; }
.op-in { width: 100%; height: 34px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-xs); padding: 0 6px; font: inherit; color: var(--fp-ink); background: #fff; min-width: 0; }
.op-in.r { text-align: right; }
.op-in.is-d { border: 2px solid var(--fp-warning-input); background: var(--fp-warning-bg); font-weight: 700; }
.op-in.is-need { border: 2px solid var(--fp-warning-input); }
.op-ro { display: block; padding: 0 6px; border-radius: var(--fp-r-xs); line-height: 30px; }
.op-ro.is-d { background: var(--fp-warning-bg); font-weight: 700; }
.op-c { display: block; min-width: 0; }
.op-jfs { display: flex; flex-direction: column; gap: 2px; }
.op-jf { display: flex; flex-direction: column; gap: 1px; }
.op-code { font-size: 11px; color: var(--fp-ink-3); text-align: right; }
.op-jfc { border: 0; background: transparent; font-size: 11px; color: var(--fp-ink-3); }
.op-dcell { color: var(--fp-ink-3); }
.op-dcell.is-dd { color: var(--fp-warning); }
.op-warn { margin: -2px 12px 8px 250px; display: flex; align-items: center; gap: 6px; color: var(--fp-warning); }
.op-warn .ms { font-size: 18px; }
.op-add { padding: 6px 12px; border-bottom: 1px solid var(--fp-divider); }
.op-foot { height: 42px; font-weight: 600; background: var(--fp-surface-alt); }
.op-foot .is-d { color: var(--fp-warning); }
.op-miss { color: var(--fp-warning); }
.op-ing { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); }
.op-ing__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--fp-border); flex-wrap: wrap; }
.op-ing__head .ms { font-size: 22px; color: var(--fp-green-700); }
.op-ing__head b { font-size: 16px; font-weight: 600; flex: 1; }
.op-igrid { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 110px 110px 96px; column-gap: 8px; padding: 0 16px; height: 34px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.op-igrid--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); }
.op-igrid.is-d { background: #FFFBEE; }
.op-igrid .op-dd, .op-dd { color: var(--fp-warning); }
.op-igrid:not(.is-d) .op-dd { color: var(--fp-ink-3); }
.op-ing__foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 12px 16px; background: var(--fp-surface-alt); border-radius: 0 0 var(--fp-r-md) var(--fp-r-md); flex-wrap: wrap; }
.op-cf { display: flex; gap: 8px; margin-bottom: 4px; }
.op-cf .ms { font-size: 18px; color: var(--fp-green-700); margin-top: 1px; }
.modal__text .muted { display: block; margin-top: 6px; }

.rp-head .page-head__actions { align-items: center; }
.rp-filters { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-filters .segmented button { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rp-filters .segmented .ms { font-size: 18px; }
.rp-filters .input--s { height: 38px; }
.rp-item { max-width: 220px; }
.rp-sep { width: 1px; height: 28px; background: var(--fp-border); }
.rp-src { margin-left: auto; }
.rp-merge { height: 38px; white-space: nowrap; align-self: center; }
.rp-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; }
.rp-kpi { text-align: left; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; color: var(--fp-ink); }
.rp-kpi:hover { border-color: var(--fp-border-strong); }
.rp-kpi__l { display: flex; align-items: center; gap: 6px; color: var(--fp-ink-2); }
.rp-kpi__l .ms { font-size: 18px; }
.rp-kpi > div { display: flex; align-items: baseline; gap: 6px; }
.rp-kpi b { font-size: 26px; line-height: 34px; font-weight: 600; }
.rp-kpi small { font-size: 14px; color: var(--fp-ink-2); }
.rp-kpi__s { color: var(--fp-ink-3); }
.rp-kpi.is-warn { background: var(--fp-warning-bg); border-color: var(--fp-warning-border); }
.rp-kpi.is-warn .rp-kpi__l, .rp-kpi.is-warn .rp-kpi__s { color: var(--fp-warning-strong); }
.rp-kpi.is-warn b { color: var(--fp-warning); }
.rp-chart { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-chart__head { display: flex; align-items: center; gap: 8px; }
.rp-chart__head b { flex: 1; font-weight: 600; }
.rp-chart__head span { display: flex; align-items: center; gap: 4px; color: var(--fp-ink-2); }
.rp-lg { width: 10px; height: 10px; border-radius: 2px; background: var(--fp-green-700); display: inline-block; }
.rp-lg--pend { background: var(--fp-warning-bg); border: 1px dashed var(--fp-warning); }
.rp-bars { height: 86px; display: flex; align-items: flex-end; gap: 2px; }
.rp-bar { flex: 1; min-width: 0; border: 0; border-radius: 2px 2px 0 0; padding: 0; background: var(--fp-divider); cursor: default; }
.rp-bar.is-v { background: var(--fp-green-700); cursor: pointer; }
.rp-bar.is-v:hover, .rp-bar.is-on { background: var(--fp-green-800); }
.rp-bar.is-pend { background: var(--fp-warning-bg); border: 1px dashed var(--fp-warning); }
.rp-ticks { display: flex; justify-content: space-between; font-size: 13px; color: var(--fp-ink-3); }
.rp-tabs { display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--fp-border); }
.rp-tabs .tabs { border-bottom: 0; flex: 1; min-width: 0; }
.rp-tabs > .muted { padding-bottom: 10px; white-space: nowrap; }
.rp-body { display: flex; gap: 12px; min-height: 300px; }
.rp-body.is-loading { opacity: .5; }
.rp-main { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: auto; max-height: 70vh; }
.rp-sgrid { display: grid; grid-template-columns: 52px 96px minmax(0, 1fr) 56px 150px 120px 120px; column-gap: 12px; padding: 0 16px; min-height: 38px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.rp-sgrid--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); position: sticky; top: 0; z-index: 1; }
.rp-sgrid.is-on, .rp-cgrid.is-on { background: var(--fp-green-50); }
.rp-foot { font-weight: 600; background: var(--fp-surface-alt); position: sticky; bottom: 0; }
.rp-grand { color: var(--fp-green-700); font-size: 16px; }
.rp-vl { color: var(--fp-info-strong); }
.rp-num { border: 0; background: transparent; padding: 2px 4px; border-radius: var(--fp-r-xs); font: inherit; font-weight: 600; color: var(--fp-green-700); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--fp-success-border); text-underline-offset: 3px; }
.rp-num:hover { background: var(--fp-green-50); }
.rp-matrix { display: flex; flex-direction: column; width: max-content; min-width: 100%; }
.rp-mrow { display: flex; height: 36px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.rp-mrow--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); position: sticky; top: 0; z-index: 2; height: 38px; }
.rp-mrow--foot { background: var(--fp-surface-alt); font-weight: 600; position: sticky; bottom: 0; z-index: 2; height: 40px; }
.rp-mname { width: 190px; flex: none; padding: 0 12px; position: sticky; left: 0; background: #fff; align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--fp-border); z-index: 1; }
.rp-mrow--head .rp-mname { background: var(--fp-table-head); }
.rp-mrow--foot .rp-mname { background: var(--fp-surface-alt); }
.rp-mcell { width: 76px; flex: none; text-align: right; padding: 0 8px; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.rp-mcell.is-empty { color: var(--fp-border-strong); }
.rp-mcell.is-pend { color: var(--fp-warning); background: #FFFBEE; font-size: 12px; }
.rp-num2 { border: 0; background: transparent; font: inherit; color: var(--fp-ink); cursor: pointer; }
.rp-num2:hover { background: var(--fp-green-50); }
.rp-num2.is-on { background: var(--fp-green-50); outline: 2px solid var(--fp-green-700); outline-offset: -2px; }
.rp-mtot { width: 120px; flex: none; text-align: right; padding: 0 12px; position: sticky; right: 0; align-self: stretch; display: flex; align-items: center; justify-content: flex-end;
  border-left: 1px solid var(--fp-border); background: var(--fp-canvas); font-weight: 600; color: var(--fp-green-700); }
.rp-mrow--head .rp-mtot, .rp-mrow--foot .rp-mtot { background: #E4E9E3; }
.rp-cgrid { display: grid; grid-template-columns: 110px minmax(0, 1.6fr) 90px 130px 160px 140px; column-gap: 12px; padding: 0 16px; min-height: 44px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.rp-cgrid--head { min-height: 38px; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); position: sticky; top: 0; }
.rp-warn { color: var(--fp-warning); font-weight: 600; }
.rp-drill { width: 400px; flex: none; background: #fff; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-md); display: flex; flex-direction: column; max-height: 70vh;
  box-shadow: 0 4px 16px rgba(28, 36, 32, .10); }
.rp-drill__head { padding: 12px 14px; border-bottom: 1px solid var(--fp-divider); display: flex; align-items: flex-start; gap: 8px; }
.rp-drill__head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rp-drill__head b { font-size: 16px; font-weight: 600; }
.rp-drill__head span { color: var(--fp-ink-2); }
.rp-drill__body { flex: 1; min-height: 0; overflow: auto; }
.rp-dr { padding: 8px 14px; border-bottom: 1px solid var(--fp-divider); display: flex; flex-direction: column; gap: 2px; }
.rp-dr > div { display: flex; align-items: center; gap: 8px; }
.rp-form { font-size: 13px; font-weight: 600; padding: 1px 6px; border-radius: var(--fp-r-xs); background: var(--fp-divider); }
.rp-drill__foot { padding: 10px 14px; border-top: 1px solid var(--fp-border); background: var(--fp-surface-alt); border-radius: 0 0 var(--fp-r-md) var(--fp-r-md); display: flex; justify-content: space-between; font-weight: 600; }
.rp-drill__foot b { color: var(--fp-green-700); }

@media (max-width: 1280px) {
  .rp-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-chart { grid-column: 1 / -1; }
  .op-grid { column-gap: 4px; padding: 0 8px; grid-template-columns: 70px minmax(0, 1.1fr) 34px 44px 46px minmax(0, 1fr) 52px 56px 56px 60px 70px 56px 48px 50px minmax(0, 1.1fr); }
}
@media (max-width: 1100px) {
  .op-band, .op-hd { display: none; }
  .op-row { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "code code ct ct ct ct" "k1 k2 k3 lbl lbl lbl" "c1 c2 c3 c4 c5 c6" "d1 d2 note note note note"; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .op-row > :nth-child(1) { grid-area: code; } .op-row > :nth-child(2) { grid-area: ct; } .op-row > :nth-child(3) { grid-area: k1; } .op-row > :nth-child(4) { grid-area: k2; }
  .op-row > :nth-child(5) { grid-area: k3; } .op-row > :nth-child(6) { grid-area: lbl; } .op-row > :nth-child(7) { grid-area: c1; } .op-row > :nth-child(8) { grid-area: c2; }
  .op-row > :nth-child(9) { grid-area: c3; } .op-row > :nth-child(10) { grid-area: c4; } .op-row > :nth-child(11) { grid-area: c5; } .op-row > :nth-child(12) { grid-area: c6; }
  .op-row > :nth-child(13) { grid-area: d1; } .op-row > :nth-child(14) { grid-area: d2; } .op-row > :nth-child(15) { grid-area: note; }
  .op-row .kh-ml { display: block; font-size: 12px; color: var(--fp-ink-3); text-align: left; margin-bottom: 2px; }
  .op-row .op-k, .op-row .op-dcell { text-align: left; }
  .op-warn { margin-left: 12px; }
  .op-foot { display: none; }
  .rp-body { flex-direction: column; }
  .rp-drill { width: auto; }
}
@media (max-width: 760px) {
  .op-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "code ct ct" "k1 k2 k3" "lbl lbl lbl" "c1 c2 c3" "c4 c5 c6" "d1 d2 d2" "note note note"; }
  .op-in { height: 44px; font-size: 16px; }
  .op-head .page-head__actions, .rp-head .page-head__actions { width: 100%; }
  .op-head .page-head__actions .btn, .rp-head .page-head__actions .btn { flex: 1; }
  .op-igrid { grid-template-columns: 26px minmax(0, 1fr) 0 84px 84px 64px; column-gap: 6px; padding: 0 10px; }
  .op-igrid > :nth-child(3) { visibility: hidden; }
  .rp-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpi b { font-size: 22px; line-height: 28px; }
  .rp-src { margin-left: 0; }
  .rp-filters .input--s { flex: 1; min-width: 140px; }
  .rp-tabs > .muted { display: none; }
  .rp-sgrid { grid-template-columns: 28px minmax(0, 1fr) 120px 44px; column-gap: 8px; padding: 0 10px; }
  .rp-sgrid > :nth-child(2), .rp-sgrid > :nth-child(4), .rp-sgrid > :nth-child(7) { display: none; }
  .rp-cgrid { grid-template-columns: 70px 60px 70px minmax(0, 1fr); column-gap: 8px; padding: 0 10px; }
  .rp-cgrid > :nth-child(2), .rp-cgrid > :nth-child(6) { display: none; }
  .rp-mname { width: 130px; }
}
@media print {
  .sidebar, .topbar, .rp-filters, .rp-tabs, .rp-drill, .rp-chart, .rp-head .page-head__actions, .toast { display: none !important; }
  .shell, .main, .content { display: block !important; overflow: visible !important; height: auto !important; }
  .rp-main { max-height: none; overflow: visible; border: 0; }
  .rp-top { grid-template-columns: repeat(4, 1fr); }
  .rp-num, .rp-num2 { text-decoration: none; color: #000; }
}
.op-table, .op-ing, .rp-body, .rp-top, .rp-filters, .rp-tabs, .bg-table, .kh-machine, .pv-sum { flex: none; }
.rp-cgrid { grid-template-columns: 90px minmax(200px, 1.6fr) 70px 110px 140px 110px; min-width: 760px; }

/* =====================================================================
   GĐ5 — trạng thái dùng chung, trang lỗi, Tổng quan ngày, Lịch sử KHSX, Nhật ký hoạt động, Cài đặt hệ thống
   ===================================================================== */
.loading { display: flex; align-items: center; justify-content: center; gap: 8px; }
.loading .ms { font-size: 22px; }
.state { flex: 1; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; text-align: center; }
.state__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--fp-green-50); display: flex; align-items: center; justify-content: center; }
.state__icon .ms { font-size: 28px; color: var(--fp-green-700); }
.state--err .state__icon { background: var(--fp-error-bg); }
.state--err .state__icon .ms { color: var(--fp-error); }
.state__title { font: var(--fp-text-title-s); }
.state__text { margin: 0; max-width: 480px; color: var(--fp-ink-2); line-height: 22px; }
.state__actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.btn--l { height: 44px; font-size: 15px; padding: 0 18px; }
.btn--warn-o { height: 36px; padding: 0 12px; border: 1px solid var(--fp-warning); background: #fff; color: var(--fp-warning-strong); font-weight: 600; }
.nowrap { white-space: nowrap; }
.is-warn { color: var(--fp-warning); }

/* trang lỗi 404 / 403 (Lỗi truy cập.dc.html) */
.crumbs__url { color: var(--fp-ink-3); font-size: 14px; }
.content[data-page="loi"] { align-items: center; justify-content: center; }
.errpage { max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 40px 0; }
.errpage__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--fp-divider); display: flex; align-items: center; justify-content: center; }
.errpage__icon .ms { font-size: 36px; color: var(--fp-ink-2); }
.errpage__icon--lock { background: var(--fp-warning-bg); }
.errpage__icon--lock .ms { color: var(--fp-warning); }
.errpage__code { font-size: 14px; font-weight: 600; color: var(--fp-ink-3); }
.errpage h1 { margin: 0; font-size: 26px; line-height: 34px; font-weight: 600; }
.errpage p { margin: 0; font-size: 15px; line-height: 24px; color: var(--fp-ink-2); text-wrap: pretty; }
.errpage__need { display: grid; grid-template-columns: auto auto; gap: 6px 16px; margin: 0; padding: 12px 16px; border-radius: var(--fp-r-md); background: #fff; border: 1px solid var(--fp-border); text-align: left; }
.errpage__need dt { color: var(--fp-ink-3); }
.errpage__need dd { margin: 0; font-weight: 600; }
.errpage__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* ---------- Tổng quan ngày ---------- */
.ov-weeknav { align-items: center; }
.ov-wk { display: flex; align-items: center; height: 36px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm); background: #fff; }
.ov-wk .icon-btn { width: 34px; height: 34px; }
.ov-wk span { padding: 0 10px; border-left: 1px solid var(--fp-divider); border-right: 1px solid var(--fp-divider); line-height: 34px; font-weight: 500; white-space: nowrap; }
.ov-todo { background: var(--fp-warning-bg); border: 1px solid var(--fp-warning-border); border-radius: var(--fp-r-md); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov-todo > .ms { font-size: 24px; color: var(--fp-warning); }
.ov-todo__text { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 2px; color: var(--fp-warning-strong); }
.ov-todo__text b { font-size: 15px; font-weight: 600; }
.ov-todo__day { height: 36px; padding: 0 12px; border: 1px solid var(--fp-warning); background: #fff; color: var(--fp-warning-strong); font-weight: 600; }
.ov-todo--err { background: var(--fp-error-bg); border-color: var(--fp-error-border); }
.ov-todo--err > .ms, .ov-todo--err .ov-todo__text { color: var(--fp-error-strong); }
.ov-todo--err .ov-todo__day { border-color: var(--fp-error); color: var(--fp-error-strong); }
.ov-todo--info { background: var(--fp-info-bg); border-color: var(--fp-info-border); }
.ov-todo--info > .ms, .ov-todo--info .ov-todo__text { color: var(--fp-info-strong); }
.ov-todo--info .ov-todo__day { border-color: var(--fp-info); color: var(--fp-info-strong); }
.ov-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; flex: none; }
.ov-day { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 124px; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); background: #fff; cursor: pointer; text-align: left; color: var(--fp-ink); font: inherit; min-width: 0; }
.ov-day.is-past { background: var(--fp-surface-alt); }
.ov-day.is-todo { border-color: var(--fp-warning-border); }
.ov-day.is-on { border: 2px solid var(--fp-green-700); box-shadow: 0 2px 8px rgba(27,107,53,.16); padding: 11px; }
.ov-day:hover { border-color: var(--fp-green-700); }
.ov-day__top { display: flex; align-items: baseline; gap: 6px; width: 100%; }
.ov-day__top b { font-weight: 600; }
.ov-day__top > span:not(.ov-day__rel) { color: var(--fp-ink-2); }
.ov-day__rel { margin-left: auto; color: var(--fp-green-700); font-weight: 500; white-space: nowrap; }
.ov-day__bot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; min-width: 0; }
.ov-day__bot b { font-size: 18px; font-weight: 600; white-space: nowrap; }
.ov-day__note { display: inline-flex; align-items: center; gap: 3px; color: var(--fp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; }
.ov-day__note .ms { font-size: 16px; }
.ov-day__note.is-warn { color: var(--fp-warning); font-weight: 600; }
.ov-day__note.is-diff { color: var(--fp-warning); }
.ov-st { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: 24px; padding: 0 8px 0 6px; border-radius: 12px; font-size: 14px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.ov-st .ms { font-size: 16px; }
.ov-st--l { height: 28px; padding: 0 10px 0 8px; border-radius: 14px; font-weight: 600; align-self: center; }
.ov-st--l .ms { font-size: 18px; }
.ov-st--none { color: var(--fp-ink-3); background: #fff; border: 1px dashed var(--fp-border-strong); }
.ov-st--draft { color: #3A443E; background: var(--fp-divider); border-color: var(--fp-border); }
.ov-st--locked { color: var(--fp-success); background: var(--fp-success-bg); border-color: var(--fp-success-border); }
.ov-st--bagged { color: #3F2A70; background: #F1ECFA; border-color: #CFC1EA; }
.ov-st--printed { color: var(--fp-info); background: var(--fp-info-bg); border-color: var(--fp-info-border); }
.ov-st--closed { color: #fff; background: var(--fp-green-700); border-color: var(--fp-green-700); }
.ov-st--todo { color: var(--fp-warning); background: var(--fp-warning-bg); border-color: var(--fp-warning-border); }
.ov-sel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; position: relative; }
.ov-sel h2 { margin: 0; font: var(--fp-text-title-m); }
.ov-sel__act { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-note { display: flex; align-items: center; gap: 6px; color: var(--fp-ink-2); }
.ov-note .ms { font-size: 18px; }
.ov-pop { position: absolute; right: 0; top: 48px; width: 440px; max-width: 100%; background: #fff; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-lg); box-shadow: 0 12px 32px rgba(28,36,32,.18); z-index: 5; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ov-pop__head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ov-pop__head .ms { color: var(--fp-green-700); font-size: 22px; }
.ov-pop p { margin: 0; color: var(--fp-ink-2); line-height: 20px; }
.ov-pop p b { color: var(--fp-ink); }
.ov-pop textarea { height: auto; padding: 8px 10px; resize: none; }
.ov-pop textarea.input--warn { border: 2px solid var(--fp-warning-input); }
.ov-pop__foot { display: flex; justify-content: flex-end; gap: 8px; }
.ov-warn { background: var(--fp-warning-bg); border: 1px solid var(--fp-warning-border); border-radius: var(--fp-r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ov-warn__head { display: flex; align-items: center; gap: 8px; color: var(--fp-warning); font-size: 15px; flex-wrap: wrap; }
.ov-warn__head span:last-child { color: var(--fp-warning-strong); }
.ov-warn__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #FFFBEE; border-radius: var(--fp-r-sm); }
.ov-warn__row .mono { min-width: 84px; }
.ov-warn__row a { display: flex; align-items: center; gap: 2px; font-weight: 600; text-decoration: none; }
.ov-warn__row a .ms { font-size: 18px; }
.ov-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ov-kpi { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov-kpi__l { color: var(--fp-ink-2); }
.ov-kpi > div { display: flex; align-items: baseline; gap: 6px; }
.ov-kpi b { font-size: 32px; line-height: 40px; font-weight: 600; }
.ov-kpi b.muted { color: var(--fp-ink-3); }
.ov-kpi small { font-size: 16px; color: var(--fp-ink-2); }
.ov-kpi__s { color: var(--fp-ink-3); }
.ov-machines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ov-machine { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); overflow: hidden; min-width: 0; }
.ov-machine__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--fp-border); }
.ov-machine__head b { font-size: 16px; }
.ov-mrow { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(0, 1.5fr) repeat(5, minmax(52px, .7fr)); column-gap: 8px; padding: 0 16px; min-height: 40px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.ov-mrow > span:first-child { display: flex; align-items: center; gap: 6px; }
.ov-mrow--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); min-height: 36px; white-space: nowrap; }
.ov-mrow--foot { background: var(--fp-surface-alt); font-weight: 600; border-bottom: 0; }
.ov-mrow.is-hl { background: var(--fp-warning-bg); }
.ov-mrow .is-warn { color: var(--fp-warning); }
.ov-w { font-size: 18px; color: var(--fp-warning); }
.ov-mempty { padding: 14px 16px; }
.ov-info { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-info > div { padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--fp-divider); min-width: 0; }
.ov-info > div:first-child { border-left: 0; }
.ov-info b { font-size: 15px; font-weight: 600; }
.ov-info b.is-warn { color: var(--fp-warning); }
.ov-info b.is-err { color: var(--fp-error); }
.ov-info > div > span:last-child { color: var(--fp-ink-2); }
.ov-empty { flex: 1; min-height: 420px; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; }
.ov-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--fp-green-50); display: flex; align-items: center; justify-content: center; }
.ov-empty__icon .ms { font-size: 28px; color: var(--fp-green-700); }
.ov-empty > b { font-size: 18px; font-weight: 600; }
.ov-empty p { margin: 0; color: var(--fp-ink-2); line-height: 22px; max-width: 480px; }
.ov-empty__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ov-empty__src { display: flex; align-items: center; gap: 6px; color: var(--fp-ink-3); }
.ov-empty__src .ms { font-size: 18px; }

/* ---------- Lịch sử KHSX ---------- */
.hs-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-month { font-weight: 600; width: auto; }
.chip b { margin-left: 2px; }
.hs-table { flex: 1; min-height: 0; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: flex; flex-direction: column; overflow: auto; }
.hs-row { flex: none; display: grid; grid-template-columns: 170px 240px 80px 64px 60px minmax(0, 1fr) minmax(0, 1.2fr) 100px 32px; column-gap: 12px; padding: 6px 16px; min-height: 46px; align-items: center; border-bottom: 1px solid var(--fp-divider); color: var(--fp-ink); text-decoration: none; }
a.hs-row:hover { background: var(--fp-canvas); color: var(--fp-ink); }
.hs-row--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); min-height: 40px; position: sticky; top: 0; z-index: 1; }
.hs-row.is-pend { background: #FFFDF6; }
.hs-row .ov-st { font-weight: 600; height: 26px; }
.hs-today { font-size: 13px; font-weight: 500; color: var(--fp-green-700); background: var(--fp-green-50); padding: 0 5px; border-radius: 4px; line-height: 20px; }
.hs-re { font-size: 18px; color: var(--fp-warning); vertical-align: -3px; }
.hs-foot { flex: none; display: flex; gap: 16px; padding: 10px 16px; margin-top: auto; border-top: 1px solid var(--fp-border); color: var(--fp-ink-2); flex-wrap: wrap; }
.hs-detail { flex: 1; min-height: 0; display: flex; gap: 14px; }
.hs-aside { width: 300px; flex: none; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.hs-aside h1 { margin: 0; font: var(--fp-text-page); }
.hs-aside > .ov-st { font-weight: 600; height: 26px; }
.hs-aside__lbl { font-weight: 600; color: var(--fp-ink-2); margin-top: 6px; }
.hs-ver { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.hs-ver.is-on { border: 2px solid var(--fp-green-700); padding: 9px 11px; }
.hs-ver__top { display: flex; align-items: center; gap: 8px; }
.hs-ver__top .check-btn { height: 32px; }
.hs-ver__top b { font-size: 16px; flex: 1; }
.hs-ver__top .is-cur { color: var(--fp-success); font-weight: 600; }
.hs-ver__top .muted { font-weight: 600; }
.hs-ev { display: flex; gap: 6px; line-height: 19px; }
.hs-ev .ms { font-size: 16px; color: var(--fp-ink-2); margin-top: 1px; }
.hs-ev b { font-weight: 600; }
.hs-reason { line-height: 20px; padding: 6px 8px; border-radius: var(--fp-r-sm); background: var(--fp-warning-bg); color: var(--fp-warning-strong); }
.hs-reason b { font-weight: 600; }
.hs-slip { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.hs-slip .ms { font-size: 18px; }
.hs-aside__btns { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hs-cmp { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: flex; flex-direction: column; overflow: hidden; }
.hs-cmp__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--fp-border); flex-wrap: wrap; }
.hs-cmp__head > .ms { font-size: 22px; color: var(--fp-green-700); }
.hs-cmp__head b { font-size: 16px; flex: 1; min-width: 200px; }
.hs-cmp__scroll { flex: 1; min-height: 0; overflow: auto; }
.hs-cmp__row { display: grid; grid-template-columns: 70px 120px minmax(0, 1.4fr) repeat(6, minmax(52px, 1fr)); column-gap: 8px; padding: 0 16px; min-height: 40px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.hs-cmp__row.is-single { grid-template-columns: 70px 120px minmax(0, 1.4fr) repeat(3, minmax(52px, 1fr)); }
.hs-cmp__band { min-height: 30px; align-items: end; background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); border-bottom: 0; }
.hs-band { grid-column: span 3; border-bottom: 2px solid var(--fp-border-strong); padding-bottom: 2px; }
.hs-band--b { border-bottom-color: var(--fp-green-700); color: var(--fp-green-700); }
.hs-cmp__hd { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); min-height: 34px; border-bottom: 1px solid var(--fp-border); }
.hs-cmp__row.is-chg, .hs-cmp__row.is-add, .hs-cmp__row.is-del { background: #FFF8E6; }
.hs-cmp__row .is-ch { font-weight: 700; color: var(--fp-warning); }
.hs-cmp__foot { background: var(--fp-surface-alt); font-weight: 600; min-height: 42px; border-top: 1px solid var(--fp-border); border-bottom: 0; }
.hs-tag { font: 600 12px var(--fp-font); padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.hs-tag--add { color: var(--fp-success-strong); background: var(--fp-success-bg); }
.hs-tag--del { color: var(--fp-error-strong); background: var(--fp-error-bg); }
.hs-nodiff { padding: 40px; text-align: center; font-size: 15px; color: var(--fp-ink-2); }
.hs-slips { width: min(1100px, calc(100vw - 32px)); height: min(860px, calc(100vh - 48px)); display: flex; flex-direction: column; }
.hs-slips .modal__head .icon-btn { margin-left: auto; }
.hs-slips__body { flex: 1; min-height: 0; display: flex; }
.hs-slips__list { width: 280px; flex: none; overflow: auto; border-right: 1px solid var(--fp-border); padding: 6px 0; }
.hs-slips__list .pr-item { width: calc(100% - 12px); border: 0; background: transparent; font: inherit; text-align: left; color: var(--fp-ink); }
.hs-slips__view { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fp-canvas); }
.hs-slips__bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--fp-border); background: #fff; }
.hs-slips__bar .muted { color: var(--fp-error); font-weight: 600; }
.hs-slips__paper { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
.hs-slips__paper img { max-width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); }

/* ---------- Nhật ký hoạt động ---------- */
.lg-filters { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.lg-f { display: flex; align-items: center; gap: 6px; color: var(--fp-ink-2); }
.lg-f .input { width: auto; }
.lg-types { margin-left: auto; }
.lg-body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.lg-list { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); display: flex; flex-direction: column; overflow: hidden; }
.lg-scroll { flex: 1; min-height: 0; overflow: auto; }
.lg-row { width: 100%; display: grid; grid-template-columns: 110px 170px 170px minmax(0, 1.1fr) minmax(0, 1.6fr); column-gap: 12px; padding: 8px 16px; min-height: 50px; align-items: center; border: 0; border-bottom: 1px solid var(--fp-divider); background: #fff; text-align: left; cursor: pointer; color: var(--fp-ink); font: inherit; }
.lg-row:hover { background: var(--fp-canvas); }
.lg-row.is-on { background: var(--fp-green-50); box-shadow: inset 3px 0 0 var(--fp-green-700); }
.lg-row--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); min-height: 40px; cursor: default; flex: none; }
.lg-row--head:hover { background: var(--fp-table-head); }
.lg-2 { display: flex; flex-direction: column; line-height: 19px; min-width: 0; }
.lg-2 b { font-weight: 600; }
.lg-obj { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; }
.lg-obj .ms { font-size: 18px; color: var(--fp-ink-2); }
.lg-act { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 26px; padding: 0 9px 0 7px; border-radius: 13px; font-size: 14px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; }
.lg-act .ms { font-size: 16px; }
.lg-act--ok { color: var(--fp-success-strong); background: var(--fp-success-bg); }
.lg-act--info { color: var(--fp-info-strong); background: var(--fp-info-bg); }
.lg-act--warn { color: var(--fp-warning-strong); background: var(--fp-warning-bg); }
.lg-act--err { color: var(--fp-error-strong); background: var(--fp-error-bg); }
.lg-act--idle { color: #3A443E; background: var(--fp-divider); }
.lg-act--dark { color: #fff; background: var(--fp-green-700); }
.lg-empty { padding: 48px 20px; text-align: center; font-size: 15px; color: var(--fp-ink-2); }
.lg-more { padding: 12px; text-align: center; }
.lg-foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--fp-border); color: var(--fp-ink-2); }
.lg-detail { width: 440px; flex: none; background: #fff; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-md); display: flex; flex-direction: column; min-height: 0; box-shadow: 0 4px 16px rgba(28,36,32,.10); overflow: auto; }
.lg-detail__head { padding: 14px 16px; border-bottom: 1px solid var(--fp-divider); display: flex; align-items: flex-start; gap: 8px; }
.lg-detail__head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-detail__head b { font-size: 16px; font-weight: 600; }
.lg-reason { margin: 12px 16px 0; padding: 10px 12px; border-radius: var(--fp-r-md); background: var(--fp-warning-bg); border: 1px solid var(--fp-warning-border); line-height: 20px; color: var(--fp-warning-strong); }
.lg-reason b { font-weight: 600; }
.lg-sum { margin: 12px 16px 0; color: var(--fp-ink-2); line-height: 20px; }
.lg-diff { margin: 12px 16px 0; border: 1px solid var(--fp-divider); border-radius: var(--fp-r-sm); overflow: hidden; }
.lg-diff__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; padding: 8px 10px; line-height: 19px; border-bottom: 1px solid var(--fp-divider); word-break: break-word; }
.lg-diff__row:last-child { border-bottom: 0; }
.lg-diff__row--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); }
.lg-b { color: var(--fp-error-strong); }
.lg-b.is-old { text-decoration: line-through; }
.lg-a { color: var(--fp-success-strong); font-weight: 600; }
.lg-nodiff { margin: 12px 16px 0; }
.lg-detail__foot { margin-top: auto; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-detail__foot a { font-weight: 600; display: flex; align-items: center; gap: 2px; text-decoration: none; }
.lg-detail__foot a .ms { font-size: 18px; }

/* ---------- Cài đặt hệ thống ---------- */
.content[data-page="caidat"] { padding: 0; gap: 0; }
.cd-dirty, .cd-saved { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 24px; flex-wrap: wrap; }
.cd-dirty { background: var(--fp-warning-bg); border-bottom: 1px solid var(--fp-warning-border); color: var(--fp-warning-strong); }
.cd-dirty b { font-weight: 600; }
.cd-dirty > .ms { font-size: 20px; }
.cd-saved { background: var(--fp-success-bg); border-bottom: 1px solid var(--fp-success-border); color: var(--fp-success-strong); }
.cd-saved .ms { font-size: 20px; }
.cd { display: flex; gap: 24px; padding: 20px 24px 32px; align-items: flex-start; }
.cd-toc { width: 220px; flex: none; position: sticky; top: 64px; display: flex; flex-direction: column; gap: 2px; }
.cd-toc h1 { margin: 0 0 4px; font: var(--fp-text-page); }
.cd-meta { color: var(--fp-ink-3); margin-bottom: 8px; font-size: 13px; }
.cd-toc a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--fp-r-sm); color: var(--fp-ink); text-decoration: none; }
.cd-toc a:hover { background: var(--fp-divider); color: var(--fp-ink); }
.cd-toc a .ms { color: var(--fp-ink-2); }
.cd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cd-sec { background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-r-md); scroll-margin-top: 70px; }
.cd-sec__head { padding: 14px 18px; border-bottom: 1px solid var(--fp-divider); display: flex; align-items: center; gap: 10px; }
.cd-sec__head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cd-sec__head b { font-size: 16px; font-weight: 600; }
.cd-sec__head span { color: var(--fp-ink-2); }
.cd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cd-params { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 18px; }
.cd-param { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.cd-unit { display: flex; align-items: center; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-r-sm); height: 44px; background: #fff; overflow: hidden; }
.cd-unit input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 10px; font-size: 16px; font-weight: 600; color: var(--fp-ink); text-align: right; background: transparent; }
.cd-unit input:focus { outline: 0; }
.cd-unit:focus-within { outline: 2px solid var(--fp-green-700); outline-offset: -1px; }
.cd-pre { padding-left: 12px; font-size: 16px; color: var(--fp-ink-2); }
.cd-unit__u { padding: 0 12px; color: var(--fp-ink-2); background: var(--fp-canvas); align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--fp-divider); white-space: nowrap; }
.cd-unit.is-dirty, .input.is-dirty { border: 2px solid var(--fp-warning-input); }
.cd-unit.is-bad, .input.is-bad { border: 2px solid var(--fp-error); }
.cd-help { font-weight: 400; color: var(--fp-ink-3); line-height: 20px; }
.cd-derived { padding: 0 18px 14px; color: var(--fp-ink-2); }
.cd-derived b { color: var(--fp-ink); font-weight: 600; }
.cd-mrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 160px 180px 130px; column-gap: 12px; padding: 6px 18px; min-height: 48px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.cd-mrow--head { background: var(--fp-table-head); font-weight: 600; color: var(--fp-ink-2); min-height: 36px; }
.cd-order { display: flex; align-items: center; gap: 4px; }
.cd-move { display: inline-flex; gap: 2px; margin-left: auto; }
.cd-mrow .cd-move { margin-left: 6px; }
.cd-st { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 28px; padding: 0 9px 0 7px; border-radius: 14px; font: 600 14px var(--fp-font); border: 0; cursor: pointer; white-space: nowrap; color: #3A443E; background: var(--fp-divider); }
.cd-st .ms { font-size: 16px; }
.cd-st.is-on { color: var(--fp-success); background: var(--fp-success-bg); }
.cd-lrow { display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 10px; min-height: 48px; border-bottom: 1px solid var(--fp-divider); }
.cd-lrow .cd-move { margin-left: 0; }
.cd-uses { white-space: nowrap; min-width: 70px; text-align: right; }
.cd-add { display: flex; gap: 8px; padding: 10px 18px; }
.cd-add .input { flex: 1; }
.cd-frow { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; column-gap: 10px; padding: 8px 18px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.cd-frow__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-brow { display: grid; grid-template-columns: 210px minmax(0, 1fr) 90px; column-gap: 14px; padding: 12px 18px; align-items: center; border-bottom: 1px solid var(--fp-divider); }
.cd-brow:last-child { border-bottom: 0; }
.cd-brow__name { display: flex; flex-direction: column; line-height: 20px; }
.cd-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cd-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--fp-surface-alt); border: 1px solid var(--fp-border); font-size: 13px; color: var(--fp-ink); white-space: nowrap; }
button.cd-chip { cursor: pointer; }
button.cd-chip:hover { border-color: var(--fp-green-700); }
.cd-chip.is-off { background: var(--fp-canvas); color: var(--fp-ink-3); }
.cd-chip.is-new { border: 2px solid var(--fp-warning-input); }
.cd-newjf { width: 140px; height: 30px; border-radius: 15px; font-size: 13px; }
.cd-addjf { width: 32px; height: 32px; border: 1px solid var(--fp-green-700); border-radius: 16px; color: var(--fp-green-700); }
.cd-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px 18px; }
.cd-field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.cd-field.is-full { grid-column: 1 / -1; }
.cd-field .input { height: 44px; font-size: 15px; }
.cd-toggle { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--fp-border-strong); border-radius: 18px; background: #fff; font: 600 14px var(--fp-font); cursor: pointer; color: var(--fp-ink-2); }
.cd-toggle__knob { width: 40px; height: 24px; border-radius: 12px; background: var(--fp-border-strong); position: relative; }
.cd-toggle__knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.cd-toggle.is-on { color: var(--fp-green-700); border-color: var(--fp-green-700); }
.cd-toggle.is-on .cd-toggle__knob { background: var(--fp-green-700); }
.cd-toggle.is-on .cd-toggle__knob::after { left: 19px; }
.cd-toggle.is-dirty { border: 2px solid var(--fp-warning-input); }
.cd-preview { margin: 0 18px 18px; border: 1px dashed var(--fp-border-strong); border-radius: var(--fp-r-sm); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; font-family: Arial, sans-serif; font-size: 13px; color: #000; }
.cd-preview__top { display: flex; justify-content: space-between; gap: 12px; }
.cd-preview__top > span:first-child { display: flex; flex-direction: column; }
.cd-preview__top small { font-size: 11px; }
.cd-preview__sig { display: grid; text-align: center; font-weight: 700; padding-top: 6px; }
.cd-preview__foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #333; border-top: 1px solid #999; padding-top: 4px; }

@media (max-width: 1100px) {
  .ov-machines { grid-template-columns: minmax(0, 1fr); }
  .lg-detail { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100vw); z-index: 30; border-radius: 0; }
  .lg-row { grid-template-columns: 96px 150px 150px minmax(0, 1fr); }
  .lg-row > :nth-child(5) { display: none; }
  .hs-detail { flex-direction: column; }
  .hs-aside { width: auto; overflow: visible; }
  .cd-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ov-week { display: flex; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
  .ov-day { flex: 0 0 132px; scroll-snap-align: start; }
  .ov-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ov-kpi { padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .ov-kpi b { font-size: 24px; line-height: 30px; }
  .ov-kpi__l { flex-basis: 100%; }
  .ov-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-info > div:nth-child(3) { border-left: 0; }
  .ov-info > div:nth-child(n+3) { border-top: 1px solid var(--fp-divider); }
  .ov-sel__act { margin-left: 0; width: 100%; }
  .ov-sel__act .btn { flex: 1; }
  .ov-pop { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; }
  .ov-mrow { grid-template-columns: minmax(70px, 1fr) repeat(5, minmax(44px, .8fr)); padding: 0 12px; column-gap: 6px; }
  .ov-mrow > :nth-child(2) { display: none; }
  .ov-weeknav { width: 100%; }
  .ov-wk { flex: 1; justify-content: space-between; }
  .hs-table { overflow: auto; }
  .hs-row { grid-template-columns: 1fr auto; grid-template-areas: "d v" "s s" "n n"; row-gap: 4px; padding: 10px 16px; }
  .hs-row--head { display: none; }
  .hs-row > :nth-child(1) { grid-area: d; } .hs-row > :nth-child(2) { grid-area: s; } .hs-row > :nth-child(8) { grid-area: v; }
  .hs-row > :nth-child(3), .hs-row > :nth-child(4), .hs-row > :nth-child(5), .hs-row > :nth-child(6), .hs-row > :nth-child(7), .hs-row > :nth-child(9) { display: none; }
  .hs-row::after { content: attr(data-sum); grid-area: n; color: var(--fp-ink-2); }
  .hs-cmp__row { grid-template-columns: 56px 92px repeat(6, minmax(44px, 1fr)); padding: 0 10px; }
  .hs-cmp__row.is-single { grid-template-columns: 56px 92px repeat(3, minmax(44px, 1fr)); }
  .hs-cmp__row > :nth-child(3) { display: none; }
  .hs-slips__list { display: none; }
  .lg-filters .lg-f { flex: 1; }
  .lg-types { margin-left: 0; }
  .lg-row { grid-template-columns: 70px minmax(0, 1fr); grid-template-areas: "t a" "t o" "t w"; row-gap: 2px; }
  .lg-row > :nth-child(1) { grid-area: t; align-self: start; } .lg-row > :nth-child(2) { grid-area: w; } .lg-row > :nth-child(3) { grid-area: a; } .lg-row > :nth-child(4) { grid-area: o; }
  .lg-row--head { display: none; }
  .content[data-page="caidat"] { padding: 0; }
  .cd { flex-direction: column; padding: 16px; gap: 12px; }
  .cd-toc { position: static; width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .cd-toc h1 { flex-basis: 100%; }
  .cd-meta { flex-basis: 100%; }
  .cd-toc a { height: 36px; border: 1px solid var(--fp-border); background: #fff; }
  .cd-params, .cd-fields { grid-template-columns: minmax(0, 1fr); }
  .cd-mrow { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "c n s" "m m o"; row-gap: 6px; padding: 10px 14px; }
  .cd-mrow--head { display: none; }
  .cd-mrow > :nth-child(1) { grid-area: c; } .cd-mrow > :nth-child(2) { grid-area: n; } .cd-mrow > :nth-child(3) { grid-area: m; } .cd-mrow > :nth-child(4) { grid-area: o; } .cd-mrow > :nth-child(5) { grid-area: s; }
  .cd-brow { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .cd-lrow { flex-wrap: wrap; padding: 8px 14px; }
  .cd-lrow .input { flex: 1 1 160px; }
  .cd-lrow .cd-uses { min-width: 0; margin-left: auto; }
  .cd-brow > .r { text-align: left; }
  .cd-frow { grid-template-columns: 70px minmax(0, 1fr); grid-template-areas: "c n" "u s"; row-gap: 6px; }
  .cd-frow > :nth-child(1) { grid-area: c; } .cd-frow > :nth-child(2) { grid-area: n; } .cd-frow > :nth-child(3) { grid-area: u; text-align: left; } .cd-frow > :nth-child(4) { grid-area: s; justify-self: end; }
  .cd-dirty, .cd-saved { padding: 10px 16px; }
  .cd-dirty .btn { flex: 1; }
  .cd-dirty .grow { flex-basis: calc(100% - 40px); }
  .cd-unit, .cd-field .input { height: 48px; }
  .errpage { padding: 24px 0; }
  .errpage__actions { flex-direction: column; width: 100%; }
}