/* ==========================================================================
   vanvan — Sổ Thương Mại 3F · shared mockup stylesheet
   --------------------------------------------------------------------------
   Identity (docs/vanvan/PRODUCT.md): "giấy tờ thương mại" — a company book
   written in blue ballpoint ink ("mực") and sealed with an orange-red stamp
   ("son"). White paper, ruled hairlines, serif document titles, numbers in
   straight columns, statuses as rubber-stamp labels with words, never colour
   alone. Calm by default; only work waiting on you, overdue invoices, goods
   paid-but-not-arrived, negative stock and negative profit raise their voice.

   Class vocabulary is the contract for the app port (visual QA compares
   same-class computed styles). Mockup-only scaffolding uses the `mock-`
   prefix and must not be ported.

   Fonts are local stacks on purpose (no remote assets): the app should use
   the same stacks so the measured diff stays meaningful.
   ========================================================================== */

:root {
  /* ---------- Colour: neutrals tinted toward the ink hue (262) ---------- */
  --c-paper: oklch(1 0 0);                 /* #ffffff page */
  --c-tint: oklch(0.975 0.006 262);        /* #f4f7fb binder / table head */
  --c-tint-2: oklch(0.955 0.010 262);      /* #ecf0f7 phone page, hover */
  --c-sunk: oklch(0.945 0.008 262);        /* #eaedf2 wells, read-only */
  --c-line: oklch(0.905 0.010 262);        /* #dce0e6 hairline */
  --c-line-strong: oklch(0.80 0.014 262);  /* #b9bec7 input border */
  --c-ink: oklch(0.22 0.035 264);          /* #121a2b body text 17.4:1 */
  --c-ink-2: oklch(0.37 0.03 264);         /* #384050 secondary 10.4:1 */
  --c-ink-3: oklch(0.48 0.025 264);        /* #565e6c tertiary 6.5:1 */

  /* ---------- Colour: brand ---------- */
  --c-muc: oklch(0.42 0.15 266);           /* #26449d mực — links, doc numbers, focus */
  --c-muc-deep: oklch(0.33 0.13 266);      /* #162d77 */
  --c-muc-tint: oklch(0.95 0.025 266);     /* #e7efff selected row, active tab */
  --c-muc-tint-2: oklch(0.91 0.04 266);    /* #d5e1fd */
  --c-son: oklch(0.555 0.155 48);          /* #b84f00 son — primary action, seal */
  --c-son-deep: oklch(0.49 0.145 46);      /* #9f3e00 hover / text on tint */
  --c-son-tint: oklch(0.955 0.03 55);      /* #ffebde */
  --c-son-line: oklch(0.85 0.07 52);       /* #f4c2a4 */

  /* ---------- Colour: states (always paired with a word or sign) ---------- */
  --c-ok: oklch(0.46 0.11 152);            /* #176938 done */
  --c-ok-bg: oklch(0.963 0.03 152);        /* #e5f9e9 */
  --c-ok-line: oklch(0.86 0.06 152);       /* #b5ddbe */
  --c-wait: oklch(0.47 0.095 78);          /* #785307 waiting on someone */
  --c-wait-bg: oklch(0.965 0.05 92);       /* #fff3ce */
  --c-wait-line: oklch(0.86 0.09 88);      /* #eace8c */
  --c-bad: oklch(0.505 0.19 24);           /* #b91a28 overdue, loss, negative, rejected */
  --c-bad-bg: oklch(0.965 0.022 20);       /* #ffeeed */
  --c-bad-line: oklch(0.86 0.065 20);      /* #f9c1bf */
  --c-scrim: oklch(0.22 0.035 264 / 0.44);

  /* ---------- Type ---------- */
  --font-ui: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-doc: Cambria, "Noto Serif", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-code: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", Menlo, monospace;
  --fs-2xs: 11.5px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-4xl: 32px;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* ---------- Space (4px unit) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;

  /* ---------- Radius ---------- */
  --r-stamp: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-1: 0 1px 2px oklch(0.22 0.035 264 / 0.07);
  --sh-2: 0 1px 2px oklch(0.22 0.035 264 / 0.06), 0 6px 16px oklch(0.22 0.035 264 / 0.08);
  --sh-3: 0 2px 6px oklch(0.22 0.035 264 / 0.10), 0 18px 48px oklch(0.22 0.035 264 / 0.20);
  --focus-ring: 2px solid var(--c-muc);

  /* ---------- Layers ---------- */
  --z-sticky: 10;
  --z-top: 20;
  --z-nav: 30;
  --z-scrim: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out-quart */
  --t-fast: 140ms;
  --t-med: 220ms;

  /* ---------- Layout ---------- */
  --side-w: 236px;
  --top-h: 52px;
  --p-top-h: 56px;
  --p-nav-h: 64px;
  --tap: 44px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--c-muc); text-decoration: none; }
a:hover { color: var(--c-muc-deep); text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--c-muc-tint-2); }

.skip { position: absolute; left: 8px; top: -60px; z-index: var(--z-toast); padding: 8px 12px; background: var(--c-ink); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: 8px; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Text helpers ---------- */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.neg { color: var(--c-bad); }
.code, .docno { font-family: var(--font-code); font-size: 0.92em; letter-spacing: 0; white-space: nowrap; }
.docno { color: var(--c-muc); font-weight: 600; }
a.docno:hover { color: var(--c-muc-deep); }
.muted { color: var(--c-ink-3); }
.ink-2 { color: var(--c-ink-2); }
.strong { font-weight: 650; }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.serif { font-family: var(--font-doc); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { font-weight: 650; }          /* "Kiên mua … cho Linkfarm" — the Zalo sentence */
.what { color: var(--c-ink); }

/* ---------- Icons (inline SVG sprite, 24-grid, stroke) ---------- */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 15px; height: 15px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }

/* ---------- Layout helpers ---------- */
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  font: inherit; font-size: var(--fs-md); font-weight: 600; line-height: 1.2;
  color: var(--c-ink); background: var(--c-paper);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--c-tint); border-color: var(--c-ink-3); color: var(--c-ink); text-decoration: none; }
.btn:active { background: var(--c-tint-2); }
.btn[disabled], .btn.is-disabled { color: var(--c-ink-3); background: var(--c-sunk); border-color: var(--c-line); cursor: not-allowed; }
.btn-primary { color: #fff; background: var(--c-son); border-color: var(--c-son); box-shadow: inset 0 -1px 0 oklch(0 0 0 / 0.12); }
.btn-primary:hover { color: #fff; background: var(--c-son-deep); border-color: var(--c-son-deep); }
.btn-primary:active { background: oklch(0.44 0.13 45); }
.btn-primary[disabled], .btn-primary.is-disabled { color: #fff; background: oklch(0.80 0.06 50); border-color: oklch(0.80 0.06 50); box-shadow: none; }
.btn-ink { color: #fff; background: var(--c-muc); border-color: var(--c-muc); }
.btn-ink:hover { color: #fff; background: var(--c-muc-deep); border-color: var(--c-muc-deep); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-ink-2); }
.btn-ghost:hover { background: var(--c-tint-2); border-color: transparent; }
.btn-danger { color: var(--c-bad); border-color: var(--c-bad-line); }
.btn-danger:hover { color: var(--c-bad); background: var(--c-bad-bg); border-color: var(--c-bad); }
.btn-danger-solid { color: #fff; background: var(--c-bad); border-color: var(--c-bad); }
.btn-danger-solid:hover { color: #fff; background: oklch(0.45 0.18 24); border-color: oklch(0.45 0.18 24); }
.btn-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--c-muc); font-weight: 600; }
.btn-link:hover { background: none; color: var(--c-muc-deep); text-decoration: underline; text-underline-offset: 2px; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-sm); gap: 5px; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: var(--fs-lg); }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--c-ink-3) transparent var(--c-ink-3) transparent; animation: spin .8s linear infinite; }
.btn-primary.is-loading::after { border-color: #fff transparent #fff transparent; }
.btn .kbd { font-size: var(--fs-xs); font-weight: 500; opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2); }
.label .opt { font-weight: 400; color: var(--c-ink-3); }
.req::after { content: " *"; color: var(--c-bad); }
.input, .select, .textarea {
  width: 100%; min-height: 36px; padding: 7px 10px;
  font: inherit; font-size: var(--fs-md); color: var(--c-ink);
  background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-muc); box-shadow: 0 0 0 3px var(--c-muc-tint-2); }
.input[readonly], .input:disabled, .select:disabled, .textarea[readonly] { background: var(--c-sunk); color: var(--c-ink-2); border-color: var(--c-line); }
.input.num, .input[inputmode="numeric"], .input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
.textarea { min-height: 68px; resize: vertical; }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23384050' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.is-invalid, .input.is-invalid, .select.is-invalid { border-color: var(--c-bad) !important; background-color: var(--c-bad-bg); }
.is-invalid:focus { box-shadow: 0 0 0 3px var(--c-bad-line) !important; }
.hint { font-size: var(--fs-xs); color: var(--c-ink-3); }
.err { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--c-bad); }
.err .i { width: 15px; height: 15px; margin-top: 2px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.addon { display: inline-flex; align-items: center; padding: 0 10px; font-size: var(--fs-sm); color: var(--c-ink-2); background: var(--c-tint); border: 1px solid var(--c-line-strong); border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; white-space: nowrap; }
.check, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input, .radio input { width: 17px; height: 17px; margin: 0; accent-color: var(--c-muc); flex: none; }
.search { position: relative; }
.search > .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.search .input { padding-left: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2); }

/* Segmented control */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--c-tint-2); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.seg > a, .seg > button, .seg > label { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; white-space: nowrap; }
.seg > a:hover, .seg > button:hover { color: var(--c-ink); text-decoration: none; }
.seg > .is-on { background: var(--c-paper); color: var(--c-ink); box-shadow: var(--sh-1); }
.field > .seg { align-self: flex-start; }

/* Suggestion list under a combobox (gợi ý tên hàng, khách, NCC) */
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-top); list-style: none; background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-2); overflow: hidden; }
.combo-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.combo-list li:last-child { border-bottom: 0; }
.combo-list li.is-active { background: var(--c-muc-tint); }
.combo-list li small { display: block; color: var(--c-ink-3); font-size: var(--fs-xs); }
.combo-list mark { background: none; color: var(--c-muc); font-weight: 700; }
.combo-list .combo-new { color: var(--c-muc); font-weight: 600; }

/* Radio chips (phân loại, tài khoản tiền) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
button.chip { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2); background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.chip input:checked + span { color: var(--c-muc-deep); background: var(--c-muc-tint); border-color: var(--c-muc); box-shadow: inset 0 0 0 1px var(--c-muc); }
.chip input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }
.chip small { font-weight: 500; color: var(--c-ink-3); }

/* ==========================================================================
   Stamps (status tags) — rubber-stamp labels, uppercase words + glyph
   ========================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 7px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
  color: var(--c-ink-2); background: var(--c-paper);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-stamp);
  white-space: nowrap; vertical-align: middle;
}
.tag::before { content: "○" / ""; font-size: 1.05em; font-weight: 700; line-height: 1; }
.tag-done { color: var(--c-ok); background: var(--c-ok-bg); border-color: var(--c-ok-line); }
.tag-done::before { content: "✓" / ""; }
.tag-wait { color: var(--c-wait); background: var(--c-wait-bg); border-color: var(--c-wait-line); }
.tag-wait::before { content: "●" / ""; font-size: .8em; }
.tag-part { color: var(--c-muc); background: var(--c-muc-tint); border-color: var(--c-muc-tint-2); }
.tag-part::before { content: "◐" / ""; }
.tag-bad { color: var(--c-bad); background: var(--c-bad-bg); border-color: var(--c-bad-line); }
.tag-bad::before { content: "✕" / ""; }
.tag-mute { color: var(--c-ink-3); background: var(--c-sunk); border-color: var(--c-line); }
.tag-mute::before { content: "–" / ""; }
.tag-ink { color: var(--c-muc); border-color: var(--c-muc); background: var(--c-paper); }
.tag-ink::before, .tag-plain::before { content: none; }
.tag-son { color: var(--c-son-deep); border-color: var(--c-son-line); background: var(--c-son-tint); }
.tag-son::before { content: none; }
.tag-lock { color: var(--c-ink-2); background: var(--c-sunk); border-color: var(--c-line-strong); }
.tag-lock::before { content: "⊡" / ""; }
.tag small { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 1em; opacity: .9; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-lg { height: 28px; padding: 0 10px; font-size: var(--fs-sm); }

/* Count pill (sidebar, tabs, filter chips) */
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-2); background: var(--c-sunk); border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.count-wait { color: var(--c-wait); background: var(--c-wait-bg); box-shadow: inset 0 0 0 1px var(--c-wait-line); }
.count-bad { color: var(--c-bad); background: var(--c-bad-bg); box-shadow: inset 0 0 0 1px var(--c-bad-line); }

/* ==========================================================================
   Notes (banners) — full hairline border + tint + leading icon
   ========================================================================== */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; font-size: var(--fs-md); color: var(--c-ink-2); background: var(--c-tint); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.note > .i { margin-top: 2px; color: var(--c-muc); }
.note strong { color: var(--c-ink); }
.note .note-acts { margin-left: auto; display: flex; gap: 8px; flex: none; align-self: center; }
.note-wait { background: var(--c-wait-bg); border-color: var(--c-wait-line); color: oklch(0.38 0.08 78); }
.note-wait > .i { color: var(--c-wait); }
.note-wait strong { color: oklch(0.33 0.07 78); }
.note-bad { background: var(--c-bad-bg); border-color: var(--c-bad-line); color: oklch(0.40 0.15 24); }
.note-bad > .i { color: var(--c-bad); }
.note-bad strong { color: oklch(0.36 0.14 24); }
.note-ok { background: var(--c-ok-bg); border-color: var(--c-ok-line); color: oklch(0.37 0.09 152); }
.note-ok > .i { color: var(--c-ok); }
.note-lock { background: var(--c-sunk); border-color: var(--c-line-strong); }
.note-lock > .i { color: var(--c-ink-2); }

/* ==========================================================================
   Boxes & sections (white sheets with a hairline; no nested cards)
   ========================================================================== */
.box { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--c-line); }
.box-head h2, .box-head h3 { font-size: var(--fs-lg); font-weight: 700; }
.box-head .sub { font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: 400; }
.box-body { padding: 16px; }
.box-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 16px; border-top: 1px solid var(--c-line); background: var(--c-tint); border-radius: 0 0 var(--r-md) var(--r-md); font-size: var(--fs-sm); color: var(--c-ink-3); }
.box-flush > .tbl-wrap { border: 0; border-radius: 0; }

.sec + .sec { margin-top: var(--sp-7); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--c-ink); }
.sec-head h2 { font-size: var(--fs-lg); }
.sec-head h3 { font-size: var(--fs-md); font-weight: 650; }
.sec-head .sub { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* Key–value list */
.kv { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.kv dt { font-size: var(--fs-sm); color: var(--c-ink-3); padding-top: 1px; }
.kv dd { margin: 0; font-weight: 500; min-width: 0; }
.kv-wide { grid-template-columns: 190px minmax(0, 1fr); }

/* ==========================================================================
   Tables — ruled ledger
   ========================================================================== */
.tbl-wrap { overflow: auto; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.tbl { width: 100%; font-size: var(--fs-md); }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-line); }
.tbl thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--c-tint); font-size: var(--fs-sm); font-weight: 650; color: var(--c-ink-2); white-space: nowrap; border-bottom: 1px solid var(--c-line-strong); }
.tbl thead tr.th-group th { text-align: center; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
.tbl thead tr.th-group + tr th { top: 37px; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl th.center, .tbl td.center { text-align: center; }
.tbl tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
.tbl tbody tr:hover > td { background: var(--c-tint); }
.tbl tbody tr:last-child > td { border-bottom: 0; }
.tbl td .sub { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.4; margin-top: 1px; }
.tbl tr.is-sel > td { background: var(--c-muc-tint); }
.tbl tr.is-sel:hover > td { background: var(--c-muc-tint); }
.tbl tr.is-off > td { color: var(--c-ink-3); }
.tbl tr.is-off .docno { color: var(--c-ink-3); text-decoration: line-through; }
.tbl tr.is-bad > td { background: var(--c-bad-bg); }
.tbl tr.is-wait > td { background: oklch(0.985 0.025 92); }
.tbl tr.grp > td { background: var(--c-tint-2); font-weight: 700; color: var(--c-ink); padding-top: 7px; padding-bottom: 7px; }
.tbl tr.sum > td { font-weight: 700; background: var(--c-tint); border-top: 1px solid var(--c-line-strong); }
.tbl tfoot td { font-weight: 700; background: var(--c-paper); border-top: 1px solid var(--c-ink); border-bottom: 3px double var(--c-ink); }
.tbl .c-check { width: 40px; padding-right: 0; }
.tbl .c-act { width: 1%; white-space: nowrap; text-align: right; }
.tbl .c-doc { width: 1%; white-space: nowrap; }
.tbl-dense th, .tbl-dense td { padding: 6px 10px; }
.tbl-dense thead th { font-size: var(--fs-xs); }
.tbl a.src { color: inherit; border-bottom: 1px dotted var(--c-ink-3); }
.tbl a.src:hover { color: var(--c-muc); border-bottom-color: var(--c-muc); text-decoration: none; }
.tbl .acts { display: inline-flex; gap: 4px; }
.tbl tr.opening > td { background: var(--c-tint); color: var(--c-ink-2); }

.tbl-scroll { max-height: 560px; }
.sticky-col { position: sticky; left: 0; z-index: 1; background: var(--c-paper); box-shadow: inset -1px 0 0 var(--c-line); }
thead .sticky-col { z-index: calc(var(--z-sticky) + 1); background: var(--c-tint); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 16px; font-size: var(--fs-sm); color: var(--c-ink-3); border-top: 1px solid var(--c-line); }

/* ==========================================================================
   Filters + status filter chips
   ========================================================================== */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: var(--sp-3); }
.toolbar .field { min-width: 150px; }
.toolbar .field.wide { min-width: 260px; flex: 1; }
.toolbar .spacer { flex: 1; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.fchip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px 0 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2); background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; }
.fchip:hover { border-color: var(--c-ink-3); color: var(--c-ink); text-decoration: none; }
.fchip.is-on { color: #fff; background: var(--c-ink); border-color: var(--c-ink); }
.fchip.is-on .count { color: var(--c-ink); background: #fff; box-shadow: none; }

/* Underline tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line-strong); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; margin-bottom: -1px; font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-3); background: none; border: 0; border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--c-ink); text-decoration: none; }
.tabs .is-on, .tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* ==========================================================================
   Desktop shell (office, 1280–1440)
   ========================================================================== */
body.desk { min-width: 1280px; }
.d-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

.d-side { background: var(--c-tint); border-right: 1px solid var(--c-line); }
.d-side-in { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.d-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; color: var(--c-ink); text-decoration: none; }
.d-brand:hover { text-decoration: none; color: var(--c-ink); }
.d-brand strong { display: block; font-family: var(--font-doc); font-size: 17px; line-height: 1.15; letter-spacing: -0.005em; }
.d-brand small { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.3; margin-top: 2px; }

.seal { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--c-son); color: #fff; font-family: var(--font-doc); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; box-shadow: inset 0 0 0 2px var(--c-son), inset 0 0 0 3px oklch(1 0 0 / 0.75); }
.seal-lg { width: 52px; height: 52px; font-size: 22px; border-radius: var(--r-md); box-shadow: inset 0 0 0 3px var(--c-son), inset 0 0 0 4.5px oklch(1 0 0 / 0.8); }

.d-nav { flex: 1; padding: 4px 10px 16px; }
.d-nav-group + .d-nav-group { margin-top: 14px; }
.d-nav-label { padding: 0 10px 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--c-ink-3); }
.d-nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; margin: 1px 0; font-size: var(--fs-md); font-weight: 500; color: var(--c-ink-2); border: 1px solid transparent; border-radius: var(--r-sm); text-decoration: none; }
.d-nav a .i { color: var(--c-ink-3); }
.d-nav a:hover { background: var(--c-tint-2); color: var(--c-ink); text-decoration: none; }
.d-nav a[aria-current="page"] { background: var(--c-paper); border-color: var(--c-line); box-shadow: var(--sh-1); color: var(--c-ink); font-weight: 650; }
.d-nav a[aria-current="page"] .i { color: var(--c-son); }
.d-nav a .count { margin-left: auto; }
.d-nav-home { padding-bottom: 2px; border-bottom: 1px solid var(--c-line); margin-bottom: 4px; }

.d-side-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--c-line); }
.d-side-foot .who-box { flex: 1; min-width: 0; line-height: 1.3; }
.d-side-foot .who-box strong { display: block; font-size: var(--fs-sm); }
.d-side-foot .who-box small { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); }
.av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-muc-tint-2); color: var(--c-muc-deep); font-size: var(--fs-sm); font-weight: 700; }
.av-sm { width: 26px; height: 26px; font-size: 11px; }

.d-main { min-width: 0; display: flex; flex-direction: column; }
.d-top { position: sticky; top: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--top-h); padding: 0 32px; background: oklch(1 0 0 / 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-line); }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.crumbs a { color: var(--c-ink-3); }
.crumbs a:hover { color: var(--c-ink); }
.crumbs .i { width: 14px; height: 14px; color: var(--c-line-strong); }
.crumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.d-top-right { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--c-ink-3); }

.d-page { padding: 24px 32px 56px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-family: var(--font-doc); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.01em; color: var(--c-ink); }
.page-sub { margin-top: 4px; color: var(--c-ink-3); font-size: var(--fs-md); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.subnav { margin: -4px 0 20px; }

/* Report layout (S17): report list left, the chosen report right */
.rp { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.rp-nav { position: sticky; top: calc(var(--top-h) + 16px); }
.rp-nav h3 { margin: 16px 10px 4px; font-size: var(--fs-sm); font-weight: 650; color: var(--c-ink-3); }
.rp-nav h3:first-child { margin-top: 0; }
.rp-nav a { display: block; padding: 6px 10px; font-size: var(--fs-md); color: var(--c-ink-2); border-radius: var(--r-sm); text-decoration: none; }
.rp-nav a:hover { background: var(--c-tint-2); color: var(--c-ink); text-decoration: none; }
.rp-nav a[aria-current="page"] { background: var(--c-muc-tint); color: var(--c-muc-deep); font-weight: 650; }

/* Voucher head — the top of a printed form: title left, "Số" box right */
.voucher { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.voucher-kind { font-family: var(--font-doc); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-son-deep); }
.voucher-title { margin-top: 4px; font-family: var(--font-doc); font-size: var(--fs-3xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.voucher-title .who { font-weight: 700; }
.voucher-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--c-ink-3); }
.voucher-meta span { display: inline-flex; align-items: center; gap: 5px; }
.voucher-meta .i { width: 15px; height: 15px; }
.voucher-no { min-width: 200px; text-align: right; }
.voucher-no .so { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1px solid var(--c-muc); border-radius: var(--r-sm); background: var(--c-paper); }
.voucher-no .so small { font-family: var(--font-doc); font-size: var(--fs-sm); color: var(--c-ink-3); }
.voucher-no .so b { font-family: var(--font-code); font-size: var(--fs-lg); color: var(--c-muc); letter-spacing: 0.01em; }
.voucher-no .ngay { margin-top: 6px; font-family: var(--font-doc); font-style: italic; font-size: var(--fs-sm); color: var(--c-ink-3); }
.voucher-acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voucher-acts .spacer { flex: 1; }

/* Status rail — the four request statuses as one strip */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); overflow: hidden; }
.rail-cell { padding: 10px 12px; min-width: 0; }
.rail-cell + .rail-cell { border-left: 1px solid var(--c-line); }
.rail-cell .rail-k { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); margin-bottom: 6px; }
.rail-cell .rail-d { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.4; }
.rail-v { display: grid; grid-template-columns: 1fr; }
.rail-v .rail-cell + .rail-cell { border-left: 0; border-top: 1px solid var(--c-line); }
.rail-v .rail-cell { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.rail-v .rail-cell .rail-k { margin: 3px 0 0; }
.rail-v .rail-cell .rail-d { grid-column: 2; margin-top: 0; }

/* Timeline (dòng thời gian) */
.tl { list-style: none; position: relative; }
.tl li { position: relative; display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: 0 8px; padding-bottom: 14px; }
.tl li::before { content: ""; position: absolute; left: 68px; top: 16px; bottom: 0; width: 1px; background: var(--c-line-strong); }
.tl li:last-child::before { display: none; }
.tl time { font-size: var(--fs-xs); color: var(--c-ink-3); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl .dot { width: 9px; height: 9px; margin: 6px auto 0; border-radius: 50%; background: var(--c-paper); border: 2px solid var(--c-line-strong); position: relative; z-index: 1; }
.tl .dot-done { border-color: var(--c-ok); background: var(--c-ok); }
.tl .dot-wait { border-color: var(--c-wait); background: var(--c-wait-bg); }
.tl .dot-bad { border-color: var(--c-bad); background: var(--c-bad); }
.tl .dot-ink { border-color: var(--c-muc); background: var(--c-muc); }
.tl .tl-body { font-size: var(--fs-md); min-width: 0; }
.tl .tl-body p { color: var(--c-ink-2); font-size: var(--fs-sm); margin-top: 2px; }
.tl .tl-body .files { margin-top: 8px; }
.diff { white-space: nowrap; font-family: var(--font-code); font-size: var(--fs-xs); color: var(--c-ink-2); background: var(--c-tint); padding: 1px 6px; border-radius: var(--r-stamp); }

/* Source trail — "con số này từ đâu ra" (LN, HH, công nợ) */
.calc { font-variant-numeric: tabular-nums; }
.calc-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--c-line-strong); }
.calc-op { font-weight: 700; color: var(--c-ink-3); text-align: center; }
.calc-k { min-width: 0; }
.calc-k small { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); }
.calc-k a { font-size: var(--fs-xs); }
.calc-v { text-align: right; white-space: nowrap; font-weight: 600; }
.calc-total { border-bottom: 3px double var(--c-ink); border-top: 1px solid var(--c-ink); margin-top: -1px; }
.calc-total .calc-k, .calc-total .calc-v { font-weight: 700; font-size: var(--fs-lg); }
.calc-total .calc-op { color: var(--c-ink); }
.calc-edit { display: inline-flex; align-items: baseline; gap: 6px; }
.calc-edit s { color: var(--c-ink-3); font-weight: 500; }

/* Override trail: suggested value beside the edited one */
.ovr { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ovr .ovr-v { font-weight: 700; }
.ovr .ovr-s { font-size: var(--fs-xs); color: var(--c-ink-3); white-space: nowrap; }
.ovr .ovr-s s { text-decoration-thickness: 1px; }
.ovr-mark { display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 700; color: var(--c-wait); vertical-align: super; }

/* Attachments (ảnh chuyển khoản, hóa đơn GTGT, báo giá) */
.files { display: flex; flex-wrap: wrap; gap: 10px; }
.file { width: 118px; text-decoration: none; color: var(--c-ink-2); }
.file:hover { text-decoration: none; color: var(--c-ink); }
.file-thumb { position: relative; height: 88px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-tint); overflow: hidden; display: grid; place-items: center; }
.file-thumb svg { width: 100%; height: 100%; }
.file:hover .file-thumb { border-color: var(--c-muc); }
.file-name { display: block; margin-top: 5px; font-size: var(--fs-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name small { display: block; color: var(--c-ink-3); }
.file-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 118px; height: 88px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muc); background: var(--c-paper); border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm); cursor: pointer; }
.file-add:hover { border-color: var(--c-muc); background: var(--c-muc-tint); }
.file-type { position: absolute; left: 6px; bottom: 6px; padding: 0 5px; font-size: 10px; font-weight: 700; color: #fff; background: var(--c-ink); border-radius: 2px; }

/* Việc của tôi — counters as a task ledger, not a card grid */
.tasks { list-style: none; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.task { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.tasks > li:last-child > .task { border-bottom: 0; }
a.task:hover { background: var(--c-tint); text-decoration: none; color: var(--c-ink); }
.task-n { display: grid; place-items: center; height: 44px; font-size: var(--fs-2xl); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-paper); }
.task-n.is-wait { color: var(--c-wait); background: var(--c-wait-bg); border-color: var(--c-wait-line); }
.task-n.is-bad { color: var(--c-bad); background: var(--c-bad-bg); border-color: var(--c-bad-line); }
.task-n.is-zero { color: var(--c-ink-3); background: var(--c-tint); border-color: var(--c-line); }
.task-k { display: block; font-size: var(--fs-sm); font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; }
.task-d { display: block; font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 1px; }
.task .i { color: var(--c-ink-3); }
.task-role { padding: 14px 16px 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2); border-bottom: 1px solid var(--c-line); background: var(--c-tint); }

/* Figures strip (a few totals that always link to their table) */
.figs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.fig { padding: 12px 16px; min-width: 0; color: var(--c-ink); text-decoration: none; }
.fig + .fig { border-left: 1px solid var(--c-line); }
a.fig:hover { background: var(--c-tint); text-decoration: none; color: var(--c-ink); }
.fig-k { display: block; font-size: var(--fs-sm); color: var(--c-ink-3); }
.fig-v { display: block; margin-top: 2px; font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.fig-d { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-ink-3); }
.fig-v.neg { color: var(--c-bad); }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--c-ink-3); }
.empty > .i { width: 32px; height: 32px; color: var(--c-line-strong); }
.empty strong { font-size: var(--fs-lg); color: var(--c-ink-2); }
.empty p { max-width: 46ch; }

/* Skeleton */
.sk { display: block; height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--c-sunk) 0%, var(--c-tint) 50%, var(--c-sunk) 100%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ==========================================================================
   Overlays — drawer, modal, sheet, toast
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--c-scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--c-paper); border-left: 1px solid var(--c-line-strong); box-shadow: var(--sh-3); transform: translateX(104%); transition: transform var(--t-med) var(--ease-out); }
.drawer.is-open { transform: none; }
.drawer-wide { width: min(760px, 100vw); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: 16px 20px 14px; border-bottom: 1px solid var(--c-line); }
.drawer-head h2 { font-family: var(--font-doc); font-size: var(--fs-2xl); }
.drawer-head .sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--c-ink-3); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-body > * + * { margin-top: 18px; }
.drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-line); background: var(--c-tint); }
.drawer-foot .spacer { flex: 1; }

.modal { position: fixed; left: 50%; top: 50%; z-index: var(--z-modal); width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--c-paper); border-radius: var(--r-md); box-shadow: var(--sh-3); transform: translate(-50%, -48%); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.modal.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.modal-head { padding: 18px 20px 4px; }
.modal-head h2 { font-family: var(--font-doc); font-size: var(--fs-xl); }
.modal-body { padding: 10px 20px 18px; color: var(--c-ink-2); }
.modal-body > * + * { margin-top: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-line); background: var(--c-tint); border-radius: 0 0 var(--r-md) var(--r-md); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; font-weight: 500; color: #fff; background: var(--c-ink); border-radius: var(--r-md); box-shadow: var(--sh-3); animation: toast-in var(--t-med) var(--ease-out); }
.toast .i { color: oklch(0.82 0.12 152); }
.toast-bad { background: oklch(0.36 0.13 24); }
.toast-bad .i { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* Big money input (ghi thanh toán, thu, chi) */
.money-in .input { font-size: var(--fs-xl); font-weight: 700; min-height: 44px; }
.money-in .addon { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }

/* Allocation editor (phân bổ dòng tiền vào chứng từ) */
.alloc { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.alloc-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 120px 150px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--c-line); }
.alloc-row:last-child { border-bottom: 0; }
.alloc-row .input { min-height: 32px; padding: 4px 8px; }
.alloc-row.is-sug { background: var(--c-muc-tint); }
.alloc-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: var(--c-tint); font-weight: 600; }
.alloc-sum.is-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.alloc-sum.is-bad { background: var(--c-bad-bg); color: var(--c-bad); }

/* Progress (nhập Excel theo lô) */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--c-sunk); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--c-muc); border-radius: inherit; }

/* Step list (import, wizard) */
.steps { list-style: none; display: flex; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; background: var(--c-paper); }
.steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: var(--fs-sm); color: var(--c-ink-3); }
.steps li + li { border-left: 1px solid var(--c-line); }
.steps li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--fs-xs); border: 1px solid var(--c-line-strong); color: var(--c-ink-2); flex: none; }
.steps li.is-done b { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.steps li.is-on { color: var(--c-ink); font-weight: 650; background: var(--c-tint); }
.steps li.is-on b { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* Picked file (nhập Excel) */
.file-pick { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-md); background: var(--c-tint); }
.file-pick > .i { color: var(--c-ink-3); }
.file-pick.is-bad { border-color: var(--c-bad-line); background: var(--c-bad-bg); }
.file-pick.is-bad > .i { color: var(--c-bad); }

/* ==========================================================================
   Attendance grid (chấm công) & payroll sheet (bảng lương)
   ========================================================================== */
.cc { font-size: var(--fs-sm); }
.cc th, .cc td { padding: 0; height: 38px; text-align: center; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
.cc thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--c-tint); font-weight: 650; color: var(--c-ink-2); line-height: 1.15; padding: 4px 0; }
.cc thead th small { display: block; font-size: 10.5px; font-weight: 600; color: var(--c-ink-3); }
.cc .cc-name { text-align: left; padding: 0 12px; min-width: 172px; white-space: nowrap; position: sticky; left: 0; z-index: 1; background: var(--c-paper); }
.cc thead .cc-name { z-index: calc(var(--z-sticky) + 1); background: var(--c-tint); }
.cc .cc-name small { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.2; }
.cc .cc-day { width: 27px; min-width: 27px; font-variant-numeric: tabular-nums; }
.cc .cc-sun { background: var(--c-sunk); }
.cc thead .cc-sun { color: var(--c-bad); }
.cc thead .cc-today { background: var(--c-muc-tint-2); color: var(--c-muc-deep); }
.cc .cc-l { font-weight: 700; color: var(--c-muc); }
.cc .cc-half { color: var(--c-wait); font-weight: 700; }
.cc .cc-zero { color: var(--c-ink-3); }
.cc .cc-cur { outline: 2px solid var(--c-muc); outline-offset: -2px; background: var(--c-muc-tint); }
.cc .cc-bad { outline: 2px solid var(--c-bad); outline-offset: -2px; background: var(--c-bad-bg); color: var(--c-bad); font-weight: 700; }
.cc .cc-dirty { position: relative; }
.cc .cc-dirty::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-wait); }
.cc .cc-off { background: repeating-linear-gradient(-45deg, var(--c-paper) 0 4px, var(--c-tint-2) 4px 8px); }
.cc .cc-sum { min-width: 64px; font-weight: 700; background: var(--c-tint); position: sticky; right: 0; }
.cc thead .cc-sum { z-index: calc(var(--z-sticky) + 1); }
.cc.is-locked td.cc-day { color: var(--c-ink-2); }
.cc tr.grp > * { height: 30px; background: var(--c-tint-2); font-weight: 700; color: var(--c-ink); }

.bl { font-size: var(--fs-sm); }
.bl th, .bl td { padding: 7px 9px; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); white-space: nowrap; }
.bl thead { position: sticky; top: 0; z-index: calc(var(--z-sticky) + 2); }
.bl thead th { background: var(--c-tint); font-size: var(--fs-xs); font-weight: 650; color: var(--c-ink-2); text-align: center; white-space: normal; line-height: 1.25; vertical-align: bottom; min-width: 96px; }
.bl td.num { text-align: right; }
.bl .bl-name { position: sticky; left: 0; z-index: 1; background: var(--c-paper); min-width: 170px; text-align: left; }
.bl thead .bl-name { background: var(--c-tint); }
.bl .bl-tt { position: sticky; left: 0; z-index: 1; background: var(--c-paper); width: 40px; min-width: 40px; text-align: center; }
.bl .bl-tt + .bl-name { left: 40px; box-shadow: inset -1px 0 0 var(--c-line-strong); }
.bl thead .bl-tt { background: var(--c-tint); }
.bl tr.grp .bl-tt, .bl tr.grp .bl-name { background: var(--c-tint-2); }
.bl tr.sum .bl-tt, .bl tr.sum .bl-name, .bl tfoot .bl-tt, .bl tfoot .bl-name { background: var(--c-tint); }
.bl tr.grp td { background: var(--c-tint-2); font-weight: 700; }
.bl tr.sum td { background: var(--c-tint); font-weight: 700; }
.bl tfoot td { font-weight: 750; border-top: 1px solid var(--c-ink); border-bottom: 3px double var(--c-ink); background: var(--c-paper); }
.bl .is-sug { background: var(--c-wait-bg); }
.bl .is-ovr { background: var(--c-muc-tint); }
.bl .bl-real { background: var(--c-tint); font-weight: 750; }

/* Suggestions (gợi ý thưởng trên bảng lương nháp) */
.sug { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.sug:last-child { border-bottom: 0; }
.sug .sug-k { font-weight: 600; }
.sug .sug-k small { display: block; font-weight: 400; color: var(--c-ink-3); font-size: var(--fs-sm); }
.sug.is-taken { background: var(--c-ok-bg); }

/* ==========================================================================
   A4 print sheet (bảng lương, phiếu lương, phiếu kho) — black & white safe
   ========================================================================== */
.print-stage { background: var(--c-sunk); padding: 24px 0 48px; min-height: calc(100vh - var(--top-h)); }
.print-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 794px; margin: 0 auto 14px; }
.a4 { width: 794px; min-height: 1123px; margin: 0 auto; padding: 56px 60px; background: #fff; color: #000; box-shadow: var(--sh-2); font-size: 13px; line-height: 1.45; }
.a4-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid #000; }
.a4-head .co { font-family: var(--font-doc); font-weight: 700; font-size: 14px; text-transform: uppercase; }
.a4-head .addr { font-size: 12px; }
.a4-title { margin: 22px 0 4px; text-align: center; font-family: var(--font-doc); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.a4-sub { text-align: center; font-family: var(--font-doc); font-style: italic; margin-bottom: 18px; }
.a4 table { width: 100%; }
.a4 th, .a4 td { padding: 5px 8px; border: 1px solid #000; }
.a4 th { font-weight: 700; text-align: center; background: #fff; }
.a4 td.num { text-align: right; }
.a4 tr.total td { font-weight: 700; }
.a4 .sign { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 16px; margin-top: 32px; text-align: center; }
.a4 .sign b { display: block; font-family: var(--font-doc); }
.a4 .sign i { display: block; font-size: 12px; }
.a4 .sign .space { height: 72px; }

/* ==========================================================================
   Phone shell (Giám đốc, Sale, Thủ kho — 360–430 px)
   ========================================================================== */
body.phone { font-size: var(--fs-lg); background: var(--c-tint-2); }
.p-shell { position: relative; max-width: 430px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--c-tint-2); }
.p-top { position: sticky; top: 0; z-index: var(--z-top); display: flex; align-items: center; gap: 4px; min-height: var(--p-top-h); padding: 6px 8px 6px 4px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.p-top h1 { flex: 1; min-width: 0; padding-left: 8px; font-family: var(--font-doc); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-top h1 small { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--c-ink-3); letter-spacing: 0; }
.p-top .p-back + h1 { padding-left: 0; }
.p-iconbtn { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); color: var(--c-ink-2); background: none; border: 0; border-radius: var(--r-md); cursor: pointer; text-decoration: none; }
.p-iconbtn:hover { background: var(--c-tint-2); color: var(--c-ink); text-decoration: none; }
.p-iconbtn .i { width: 24px; height: 24px; }
.p-hello { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.p-hello .seal { width: 34px; height: 34px; font-size: 14px; }
.p-hello strong { display: block; font-family: var(--font-doc); font-size: 19px; line-height: 1.15; }
.p-hello small { display: block; font-size: 14px; color: var(--c-ink-3); }

.p-main { flex: 1; padding: 16px 16px 24px; }
.p-main.has-bar { padding-bottom: 28px; }
.p-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 22px 4px 8px; }
.p-sec:first-child { margin-top: 4px; }
.p-sec h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.p-sec a, .p-sec .muted { font-size: 16px; font-weight: 600; }

.p-nav { position: sticky; bottom: 0; z-index: var(--z-nav); display: grid; grid-template-columns: repeat(5, 1fr); min-height: var(--p-nav-h); padding: 4px 4px max(6px, env(safe-area-inset-bottom)); background: var(--c-paper); border-top: 1px solid var(--c-line); }
.p-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; font-size: 13.5px; font-weight: 600; color: var(--c-ink-3); text-decoration: none; position: relative; }
.p-nav a .ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--r-pill); transition: background-color var(--t-fast) var(--ease-out); }
.p-nav a .i { width: 23px; height: 23px; }
.p-nav a:hover { color: var(--c-ink); text-decoration: none; }
.p-nav a[aria-current="page"] { color: var(--c-muc-deep); }
.p-nav a[aria-current="page"] .ico { background: var(--c-muc-tint-2); }
.p-nav .badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; font-weight: 750; line-height: 20px; text-align: center; color: #fff; background: var(--c-son); border: 2px solid var(--c-paper); border-radius: var(--r-pill); }

/* Phone lists */
.p-list { list-style: none; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.p-list > li + li { border-top: 1px solid var(--c-line); }
.p-item { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 12px 14px; color: var(--c-ink); text-decoration: none; }
a.p-item:hover, button.p-item:hover { background: var(--c-tint); text-decoration: none; color: var(--c-ink); }
button.p-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.p-item .grow > .l1 { display: block; font-size: 16px; line-height: 1.35; }
.p-item .grow > .l2 { display: block; margin-top: 2px; font-size: 16px; color: var(--c-ink-3); line-height: 1.35; }
.p-item .grow > .tags { margin-top: 8px; }
.p-item .amt { text-align: right; font-weight: 700; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-item .amt small { display: block; font-weight: 500; font-size: 14px; color: var(--c-ink-3); }
.p-item > .i { margin-top: 3px; color: var(--c-ink-3); }
.p-item .docno { font-size: 15px; }

/* Phone variants of shared components */
.phone .btn { min-height: 48px; font-size: 16px; padding: 0 18px; border-radius: var(--r-md); }
.phone .btn-sm { min-height: var(--tap); font-size: 16px; padding: 0 14px; }
.phone .btn-icon { width: 48px; padding: 0; }
.phone .input, .phone .select, .phone .textarea { min-height: 48px; font-size: 17px; padding: 10px 12px; border-radius: var(--r-md); }
.phone .select { padding-right: 36px; background-position: right 12px center; }
.phone .label, .phone .fieldset > legend { font-size: 16px; color: var(--c-ink); }
.phone .hint { font-size: 16px; }
.phone .err { font-size: 16px; }
.phone .note { font-size: 16px; padding: 12px 14px; }
.phone .tag { height: 26px; padding: 0 8px; font-size: 13.5px; }
.phone .check input, .phone .radio input { width: 22px; height: 22px; }
.phone .search .input { padding-left: 42px; }
.phone .search > .i { left: 13px; width: 20px; height: 20px; }
.phone .chip span { min-height: var(--tap); padding: 0 16px; font-size: 16px; }
.phone .seg { display: flex; width: 100%; }
.phone .seg > a, .phone .seg > button, .phone .seg > label { flex: 1; justify-content: center; min-height: 44px; font-size: 15px; }
.phone .fchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
.phone .fchip { min-height: 44px; font-size: 15px; }
.phone .kv { grid-template-columns: 112px minmax(0, 1fr); font-size: 16px; }
.phone .kv dt { font-size: 16px; }
.phone .combo-list li { padding: 12px 14px; min-height: 52px; }
.phone .combo-list li small { font-size: 14px; }
.phone .empty { padding: 56px 24px; }
.phone .empty strong { font-size: 18px; }
.phone .toast { bottom: calc(var(--p-nav-h) + 16px); font-size: 16px; }
.phone .file { width: calc((100% - 20px) / 3); }
.phone .file-add { width: calc((100% - 20px) / 3); height: 96px; font-size: 14px; }
.phone .file-thumb { height: 96px; }
.phone .file-name { font-size: 14px; }
.phone .file-name small { font-size: 14px; }
.phone .count { font-size: 13.5px; min-width: 22px; height: 22px; }
.phone .p-nav .badge { min-width: 22px; height: 22px; font-size: 13.5px; line-height: 18px; }
.phone .addon { font-size: 16px; }
.phone .av-sm { width: 30px; height: 30px; font-size: 13.5px; }
.phone .voucher-kind { font-size: 14px; }
.phone .tl time { font-size: 14px; }
.phone .tl .tl-body, .phone .tl .tl-body p { font-size: 16px; }
.phone .calc-row { padding: 8px 0; font-size: 16px; }
.phone .calc-k small { font-size: 14px; }
.phone .calc-k a { font-size: 14px; }
.phone .tasks { border-radius: var(--r-lg); overflow: hidden; }
.phone .task { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; min-height: 76px; padding: 12px 12px 12px 14px; }
.phone .task-n { height: 50px; font-size: 25px; }
.phone .task-k { font-size: 14.5px; }
.phone .task-d { font-size: 16px; line-height: 1.35; margin-top: 2px; }

/* Phone card (one document to act on: duyệt, xuất kho) */
.p-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.p-card + .p-card { margin-top: 12px; }
.p-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 0; font-size: 15px; color: var(--c-ink-3); }
.p-card-body { padding: 8px 14px 12px; }
.p-card-body .what { font-size: 17px; line-height: 1.4; }
.p-card-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line-strong); }
.p-card-amt .money { font-size: 24px; font-weight: 750; letter-spacing: -0.01em; }
.p-card-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin-top: 10px; font-size: 16px; }
.p-card-meta dt { color: var(--c-ink-3); }
.p-card-meta dd { margin: 0; font-weight: 500; min-width: 0; }
.p-card-acts { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--c-line); }
.p-card.is-done { background: var(--c-ok-bg); border-color: var(--c-ok-line); }
.p-card.is-done .p-card-acts { border-top-color: var(--c-ok-line); }
.p-card.is-stale { border-color: var(--c-wait-line); box-shadow: 0 0 0 1px var(--c-wait-line); }

/* Phone form */
.p-form > * + * { margin-top: 18px; }
.p-form .p-sec { margin-top: 26px; }
.p-line { background: var(--c-paper); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); padding: 12px 14px 14px; }
.p-line + .p-line { margin-top: 12px; }
.p-line-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--c-ink-3); }
.p-line-calc { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--c-line-strong); font-size: 16px; color: var(--c-ink-2); }
.p-line-calc strong { font-size: 18px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.p-line.is-invalid { border-color: var(--c-bad); background: oklch(0.99 0.008 20); }
.p-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-3col { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; }
.p-stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 16px; color: var(--c-ink-2); }
.p-stock b { font-variant-numeric: tabular-nums; color: var(--c-ink); }
.p-stock.is-low b { color: var(--c-bad); }

/* Sticky action bar (phone forms) */
.p-bar { position: sticky; bottom: 0; z-index: var(--z-nav); padding: 10px 16px max(14px, env(safe-area-inset-bottom)); background: var(--c-paper); border-top: 1px solid var(--c-line); box-shadow: 0 -8px 20px oklch(0.22 0.035 264 / 0.06); }
.p-bar-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 16px; color: var(--c-ink-2); }
.p-bar-total strong { font-size: 22px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.p-bar-total small { display: block; font-size: 14px; color: var(--c-ink-3); text-align: right; }
.p-bar .row { gap: 10px; }
.p-bar .row > .btn { flex: 1; }
.p-bar .row > .btn-primary { flex: 1.6; }

/* Bottom sheet */
.p-sheet { position: fixed; left: 50%; bottom: 0; z-index: var(--z-modal); width: 100%; max-width: 430px; max-height: 86vh; display: flex; flex-direction: column; background: var(--c-paper); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-3); transform: translate(-50%, 104%); transition: transform var(--t-med) var(--ease-out); }
.p-sheet.is-open { transform: translate(-50%, 0); }
.p-sheet-head { padding: 8px 16px 12px; border-bottom: 1px solid var(--c-line); }
.p-sheet-head::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--c-line-strong); }
.p-sheet-head h2 { font-family: var(--font-doc); font-size: 20px; }
.p-sheet-head p { margin-top: 2px; color: var(--c-ink-3); font-size: 16px; }
.p-sheet-body { overflow-y: auto; padding: 16px; }
.p-sheet-body > * + * { margin-top: 16px; }
.p-sheet-foot { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); display: flex; gap: 10px; }
.p-sheet-foot .btn { flex: 1; }
.p-sheet-foot .btn-primary, .p-sheet-foot .btn-danger-solid { flex: 1.6; }

/* Phone menu grid (Thêm) — grouped link lists, not tiles */
.p-menu { list-style: none; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.p-menu li + li { border-top: 1px solid var(--c-line); }
.p-menu a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 14px; color: var(--c-ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.p-menu a:hover { background: var(--c-tint); text-decoration: none; color: var(--c-ink); }
.p-menu a > .i:first-child { color: var(--c-muc); width: 22px; height: 22px; }
.p-menu a > .i:last-child { margin-left: auto; color: var(--c-ink-3); }
.p-menu .count { margin-left: auto; }
.p-menu .count + .i { margin-left: 8px !important; }

/* Phone figure block (số dư tài khoản…) */
.p-figs { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.p-figs table { width: 100%; font-size: 16px; }
.p-figs th, .p-figs td { padding: 11px 14px; border-bottom: 1px solid var(--c-line); text-align: left; }
.p-figs tr:last-child > * { border-bottom: 0; }
.p-figs td.num { text-align: right; font-weight: 650; }
.p-figs th { font-weight: 500; color: var(--c-ink-2); }
.p-figs th small { display: block; font-size: 14px; color: var(--c-ink-3); font-weight: 400; }
.p-figs tfoot td, .p-figs tfoot th { border-top: 1px solid var(--c-ink); font-weight: 700; color: var(--c-ink); }
.p-figs .neg, .p-figs tfoot .neg { color: var(--c-bad); }

/* Login */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-paper); }
.login-main { flex: 1; width: 100%; max-width: 400px; margin: 0 auto; padding: 56px 24px 32px; }
.login-brand { display: flex; align-items: center; gap: 14px; }
.login-brand strong { display: block; font-family: var(--font-doc); font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; }
.login-brand small { display: block; margin-top: 4px; font-size: 15px; color: var(--c-ink-3); }
.login-rule { margin: 28px 0 24px; border: 0; border-top: 1px solid var(--c-ink); position: relative; }
.login-rule::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 1px solid var(--c-ink); }
.login h1 { font-size: 20px; margin-bottom: 4px; }
.login form > * + * { margin-top: 16px; }
.login-foot { padding: 20px 24px 28px; text-align: center; font-size: 15px; color: var(--c-ink-3); border-top: 1px solid var(--c-line); }
.login .pw { position: relative; }
.login .pw .input { padding-right: 52px; }
.login .pw button { position: absolute; right: 2px; top: 2px; }
.login-desk { display: grid; grid-template-columns: minmax(0, 1fr) 520px; min-height: 100vh; }
.login-desk .login-aside { background: var(--c-tint); border-right: 1px solid var(--c-line); padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; }
.login-ledger { margin-top: 40px; max-width: 560px; }
.login-ledger li { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-line-strong); font-size: 16px; color: var(--c-ink-2); }
.login-ledger li b { font-family: var(--font-doc); color: var(--c-son-deep); font-size: 18px; }
.login-ledger li strong { color: var(--c-ink); }

/* Attachment viewer (S20) */
.viewer { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; background: oklch(0.16 0.02 264); color: #fff; }
.viewer-top { display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 56px; border-bottom: 1px solid oklch(0.3 0.02 264); }
.viewer .p-iconbtn { color: #fff; }
.viewer .p-iconbtn:hover { background: oklch(0.26 0.02 264); color: #fff; }
.viewer-top strong { display: block; font-size: 16px; }
.viewer-top small { display: block; font-size: 14px; color: oklch(0.80 0.01 264); }
.viewer-stage { flex: 1; display: grid; place-items: center; padding: 16px; overflow: auto; }
.viewer-stage svg { width: 100%; max-width: 360px; height: auto; border-radius: var(--r-sm); box-shadow: 0 10px 40px oklch(0 0 0 / 0.5); }
.viewer-foot { padding: 12px 16px 18px; border-top: 1px solid oklch(0.3 0.02 264); font-size: 15px; color: oklch(0.85 0.01 264); }
.viewer-foot a { color: oklch(0.85 0.08 266); }

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  body { background: #fff !important; min-width: 0 !important; }
  .d-side, .d-top, .print-bar, .no-print, .p-nav, .p-top { display: none !important; }
  .d-shell { display: block; }
  .print-stage { padding: 0; background: #fff; }
  .a4 { box-shadow: none; margin: 0; width: auto; min-height: 0; padding: 0; }
  .tag { border-color: #000 !important; color: #000 !important; background: #fff !important; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   Mockup-only scaffolding (never port): index page, state captions
   ========================================================================== */
.mock-index { max-width: 1120px; margin: 0 auto; padding: 40px 32px 80px; }
.mock-index h1 { font-family: var(--font-doc); font-size: 32px; }
.mock-index .mock-lede { margin-top: 6px; color: var(--c-ink-3); max-width: 72ch; }
.mock-index h2 { margin-top: 32px; padding-bottom: 6px; border-bottom: 1px solid var(--c-ink); font-family: var(--font-doc); font-size: 20px; }
.mock-index table { width: 100%; margin-top: 4px; }
.mock-index td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; font-size: 14px; }
.mock-index td:first-child { width: 330px; }
.mock-index .mock-vp { font-family: var(--font-code); font-size: 12px; color: var(--c-ink-3); white-space: nowrap; }
.mock-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mock-swatches span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: 12px; }
.mock-swatches i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid oklch(0 0 0 / 0.1); }

/* S20 desktop viewer
   Office (1440x900) layout of the attachment viewer: dark stage with prev /
   next and a thumbnail strip on the left, a white panel on the right saying
   what the file is attached to. Extends .viewer; the phone rules are unchanged. */
.viewer-desk .viewer-top { gap: 12px; min-height: 60px; padding: 8px 16px 8px 8px; }
.viewer-tools { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid oklch(0.3 0.02 264); }
.viewer-tools .small { min-width: 52px; text-align: center; color: oklch(0.85 0.01 264); font-variant-numeric: tabular-nums; }
.viewer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr); }
.viewer-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.viewer-desk .viewer-stage { position: relative; min-height: 0; padding: 24px 96px; }
.viewer-desk .viewer-stage > svg { width: auto; max-width: none; height: min(640px, calc(100vh - 236px)); aspect-ratio: 360 / 760; }
.viewer-step { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; padding: 0; display: grid; place-items: center; color: #fff; background: oklch(0.24 0.02 264); border: 1px solid oklch(0.36 0.02 264); border-radius: 50%; cursor: pointer; text-decoration: none; }
.viewer-step:hover { color: #fff; background: oklch(0.30 0.02 264); text-decoration: none; }
.viewer-step[disabled] { opacity: 0.35; cursor: not-allowed; }
.viewer-step .i { width: 24px; height: 24px; border-radius: 0; box-shadow: none; }
.viewer-step.is-prev { left: 24px; }
.viewer-step.is-next { right: 24px; }
.viewer-desk .viewer-foot { display: flex; align-items: flex-start; gap: 14px; padding: 12px 24px 14px; }
.viewer-desk .viewer-foot .file { width: 104px; color: oklch(0.88 0.01 264); }
.viewer-desk .viewer-foot .file-thumb { height: 60px; border-color: oklch(0.36 0.02 264); }
.viewer-desk .viewer-foot .file-name small { color: oklch(0.74 0.01 264); }
.viewer-desk .viewer-foot .file:hover .file-thumb { border-color: oklch(0.85 0.08 266); }
.viewer-desk .viewer-foot .file.is-sel .file-thumb { border-color: oklch(0.85 0.08 266); box-shadow: 0 0 0 2px oklch(0.85 0.08 266); }
.viewer-desk .viewer-top :focus-visible, .viewer-pane :focus-visible { outline-color: oklch(0.85 0.08 266); }
.viewer-side { min-height: 0; overflow-y: auto; padding: 20px 20px 28px; color: var(--c-ink); background: var(--c-paper); }
.viewer-side .kv { grid-template-columns: 104px minmax(0, 1fr); }