/* ==========================================================================
   Sổ Sản Xuất Bim Bim (tenant minhson) — shared mockup stylesheet (Phase 3)

   Concept: "Thùng carton · Cân bàn".
     The office desk is a kraft-paper folder; every document (phiếu mẻ, phiếu kho,
     sổ quỹ, bảng lương) is a white sheet laid on it. The chrome (sidebar, phone
     top bar) is kraft. The work surface between sheets is a near-neutral grey.
     Warmth comes from the kraft chrome, the roasted-brown ink and ONE action
     colour, fried-golden ("vàng chiên giòn"), used only for primary actions,
     the active nav marker and focus halos. Never a dark sidebar, never blue.

   Signature pieces (all carry text, never colour alone):
     .ticket   scale-ticket readout: labelled fields split by dashed rules,
               big condensed numerals, the unit always attached.
     .dev      định mức ↔ thực xuất beam: a centre tick = định mức, the bar runs
               left (ít hơn) or right (vượt). Paired with a signed figure.
     .lvl      stock-vs-threshold meter: the tick = ngưỡng, a hatched fill means
               "Sắp hết" (prints in black and white).
     .sp-label carton-print product label: code · NAME · kg/thùng.
     .stamp    rubber stamp for document states: ĐÃ HỦY, ĐÃ CHỐT, TẠM TÍNH, MẺ HỎNG.
     .q .u     every quantity carries its unit; thành phẩm always "68 thùng (163,2 kg)".

   Type: Source Sans 3 (UI, tables, numbers — tabular), IBM Plex Sans Condensed
   (page/panel titles, readouts, stamps, brand), IBM Plex Mono (codes NVL001,
   SX2610-014). Chinese material names fall back to a CJK system face.
   Fonts are local copies (fonts/*.woff2, OFL) — no CDN, no network.

   Viewports: office screens 1440×900 (body.desk), storekeeper/owner phone
   screens 390×844 (body.phone), print previews (body.print).
   Mockup-only switches: ?state=<key> and ?vai-tro=<thu-kho|ke-toan|quan-tri>
   (see minhson.js); nothing here depends on JS for the default state.
   ========================================================================== */

/* ---------- Fonts (local) ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-sans-3-vietnamese.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-sans-condensed-500-vietnamese.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-sans-condensed-500-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-sans-condensed-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-sans-condensed-600-vietnamese.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-sans-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-sans-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400-vietnamese.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500-vietnamese.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-mono-600-vietnamese.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-mono-600-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-mono-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Surfaces: grey work surface, white sheets ---- */
  --bg: #F3F2EE;            /* work surface between sheets (near-neutral) */
  --surface: #FFFFFF;       /* sheets: panels, tables, inputs */
  --surface-2: #FAF9F6;     /* table head, panel foot, quiet fills */
  --sunk: #ECEAE4;          /* read-only fields, pressed, skeleton */
  --line: #E3DFD6;          /* hairlines, row rules */
  --line-strong: #CEC7B9;   /* strong rules, header underline */
  --line-field: #8E8574;    /* input + button borders, 3.65:1 on white */

  /* ---- Ink: roasted brown-black ---- */
  --ink: #1E1912;           /* 17.5:1 on white */
  --ink-2: #463D31;         /* 10.7:1 */
  --ink-3: #685E50;         /* 6.4:1 on white, 5.7:1 on --bg */
  --ink-4: #9A9183;         /* disabled / empty-cell dash only */
  --ink-inv: #FFFFFF;

  /* ---- Kraft: the chrome (sidebar, phone top bar, group rows) ---- */
  --kraft: #E0CCA7;
  --kraft-2: #D4BC92;       /* hover / pressed on kraft */
  --kraft-line: #C4A97D;    /* rules on kraft */
  --kraft-ink: #2A2015;     /* 10.4:1 on kraft */
  --kraft-ink-2: #5B4830;   /* 5.7:1 on kraft */
  --kraft-soft: #F4ECDC;    /* light kraft: product label, group rows, Sunday */

  /* ---- Fried golden: the one action colour ---- */
  --gold: #F2B33D;          /* primary buttons (ink text 9.4:1) */
  --gold-hover: #E8A424;
  --gold-press: #D69418;
  --gold-edge: #B37A0C;     /* primary button border */
  --gold-soft: #FDF1D3;     /* selected row, highlight */
  --gold-line: #ECC778;
  --gold-ink: #7A4F00;      /* golden text on white, 7.1:1 */

  /* ---- Links + focus ---- */
  --link: #7C4A12;          /* soy brown, 7.4:1 */
  --link-hover: #5A3409;
  --focus: #1E1912;
  --focus-halo: rgba(242, 179, 61, 0.55);

  /* ---- Meaning (always paired with words / signs / icons) ---- */
  --ok: #1E6B3A;     --ok-bg: #E6F2E9;     --ok-line: #A8D2B4;
  --warn: #8A4B00;   --warn-bg: #FDF0D6;   --warn-line: #EBC27C;
  --danger: #B42318; --danger-bg: #FDECEA; --danger-line: #F0B4AD;
  --info: #245B8C;   --info-bg: #E8F0F8;   --info-line: #B5CBE3;
  --lock: #454039;   --lock-bg: #ECEAE6;   --lock-line: #CFCAC0;
  --void: #766D60;          /* voided documents (with strike + "Đã hủy"): 5.1:1 on white */

  /* ---- Chart series: products (pattern-backed for B/W print) ---- */
  --c-khoai-say: #C0601F;
  --c-canh-ga: #E0A21F;
  --c-nhu-y: #9C2F22;
  --c-gay-lt: #3E6F8E;
  --c-mi: #4B3B2D;
  --c-zonzon: #2E7D6C;
  --c-vi-tom: #D9705A;
  --c-tom-xanh: #6B8E3A;
  --c-khoai-tay: #A27B2A;
  --c-bap: #7A5C9E;
  /* money series */
  --c-doanh-thu: #2F2A24;
  --c-gia-von: #C9A672;
  --c-loi-nhuan: #1E6B3A;
  --c-lo: #B42318;
  --c-phai-thu: #245B8C;
  --c-phai-tra: #B0661A;
  --c-grid: #E7E3DA;

  /* ---- Type ---- */
  --font-ui: "Source Sans 3", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "IBM Plex Sans Condensed", "Source Sans 3", "Microsoft YaHei UI", "PingFang SC", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-cjk: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;

  --text-caption: 0.75rem;   /* 12  chart ticks, legal */
  --text-meta: 0.8125rem;    /* 13  meta, column heads, second lines */
  --text-dense: 0.875rem;    /* 14  dense grids (payroll, NXT, timesheet) */
  --text-ui: 0.9375rem;      /* 15  desktop UI + table body */
  --text-body: 1rem;         /* 16  inputs, prose, phone body */
  --text-lg: 1.125rem;       /* 18  phone emphasis, dialog titles */
  --text-title: 1.25rem;     /* 20  panel titles, phone page title */
  --text-h2: 1.5rem;         /* 24  section titles */
  --text-page: 1.75rem;      /* 28  desktop page title */
  --text-readout: 2rem;      /* 32  ticket readouts */
  --text-hero: 2.5rem;       /* 40  phone big readout, login brand */

  --lh-tight: 1.15;
  --lh-ui: 1.4;
  --lh-body: 1.5;

  /* ---- Space (4pt) ---- */
  --s-1: 0.25rem;  /* 4 */
  --s-2: 0.5rem;   /* 8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 */
  --s-6: 1.5rem;   /* 24 */
  --s-7: 2rem;     /* 32 */
  --s-8: 2.5rem;   /* 40 */
  --s-9: 3rem;     /* 48 */
  --s-10: 4rem;    /* 64 */

  /* ---- Shape ---- */
  --r-xs: 2px;     /* stamps, labels, chips */
  --r-sm: 4px;     /* inputs, buttons */
  --r-md: 6px;     /* panels, sheets of paper */
  --r-lg: 10px;    /* dialogs */
  --r-sheet: 16px; /* phone bottom sheets */
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(30, 25, 18, 0.06);
  --sh-2: 0 8px 24px rgba(30, 25, 18, 0.14), 0 2px 6px rgba(30, 25, 18, 0.08);
  --sh-3: 0 18px 48px rgba(30, 25, 18, 0.22), 0 4px 12px rgba(30, 25, 18, 0.1);
  --sh-up: 0 -6px 18px rgba(30, 25, 18, 0.1);

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

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 220ms;

  /* ---- Layout ---- */
  --side-w: 15rem;     /* 240 */
  --top-h: 3.5rem;     /* 56 */
  --pad-x: 2rem;       /* desktop page gutter */
  --gutter: 1rem;      /* phone gutter */
  --tap: 2.75rem;      /* 44 */
  --tap-lg: 3.25rem;   /* 52 */
}

/* ==========================================================================
   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(--text-ui);
  line-height: var(--lh-ui);
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
}
h1, h2, h3, h4, h5 { margin: 0; line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
p { margin: 0; }
p + p { margin-top: var(--s-2); }
ul, ol { margin: 0; padding: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
[hidden] { display: none !important; }
:lang(zh), :lang(zh-Hans) { font-family: var(--font-cjk); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); border-radius: var(--r-sm); }
::selection { background: var(--gold-soft); color: var(--ink); }

.skip { position: absolute; left: var(--s-3); top: -3rem; z-index: var(--z-toast); padding: var(--s-2) var(--s-3); background: var(--ink); color: var(--ink-inv); border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s-3); color: var(--ink-inv); }

/* ---------- Text utilities (few, on purpose) ---------- */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-weight: 500; font-size: 0.875em; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
a.code { color: var(--link); }
.muted { color: var(--ink-3); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.small { font-size: var(--text-meta); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-6); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }

/* ---------- Icons (inline SVG, 24 grid, stroke = currentColor) ---------- */
.i { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: -0.25em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 1rem; height: 1rem; }
.i-xs { width: 0.875rem; height: 0.875rem; }
.i-lg { width: 1.5rem; height: 1.5rem; }
.i-xl { width: 2rem; height: 2rem; }

/* ---------- Quantities, units, money ---------- */
.q { white-space: nowrap; font-variant-numeric: tabular-nums; }
.u { margin-left: 0.2em; font-size: 0.86em; font-weight: 400; color: var(--ink-3); }
.q-sub { display: block; font-size: var(--text-meta); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.q-alt { font-weight: 400; color: var(--ink-3); }          /* "(163,2 kg)" inline */
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-neg { color: var(--danger); }                          /* always with "−" or a word */
.is-pos { color: var(--ok); }
.dash { color: #736A5D; }  /* empty / zero marks: lighter than numbers, still 4.5:1 on white and kraft-soft */
.cn .dash, .x-cn .dash { color: var(--ink-3); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 2.25rem; padding: 0 0.875rem;
  font-size: var(--text-ui); font-weight: 600; line-height: 1.1;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-field); border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.btn:active { background: var(--sunk); }
.btn .i { width: 1.125rem; height: 1.125rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--gold); border-color: var(--gold-edge); color: var(--ink); }
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-edge); }
.btn-primary:active { background: var(--gold-press); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--ink-inv); }
.btn-dark:hover { background: #352D22; border-color: #352D22; color: var(--ink-inv); }
.btn-danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--ink-inv); }
.btn-danger-solid:hover { background: #941B12; border-color: #941B12; color: var(--ink-inv); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(30, 25, 18, 0.06); border-color: transparent; }
.btn-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { background: none; color: var(--link-hover); }
.btn-sm { min-height: 2rem; padding: 0 0.625rem; font-size: var(--text-meta); }
.btn-lg { min-height: 2.75rem; padding: 0 1.125rem; font-size: var(--text-body); }
.btn-xl { min-height: 3.25rem; padding: 0 1.25rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-icon { width: 2.25rem; padding: 0; }
.btn-icon.btn-sm { width: 2rem; }
.btn.is-busy { cursor: progress; }
.btn.is-busy .i { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.label { font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); }
.label .opt { font-weight: 400; color: var(--ink-3); }
.req::after { content: " *"; color: var(--danger); }
.input, .select, .textarea {
  width: 100%; min-height: 2.25rem; padding: 0.4375rem 0.625rem;
  font-size: var(--text-ui); line-height: 1.3; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-field); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.textarea { min-height: 4.5rem; resize: vertical; }
.select { appearance: none; padding-right: 2rem; 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='%23463D31' stroke-width='2.4' 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 0.625rem center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-halo); }
.input[readonly], .input:disabled, .select:disabled, .textarea:disabled { background: var(--sunk); color: var(--ink-2); border-color: var(--line-strong); cursor: not-allowed; }
.input.num { text-align: right; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); background: #FFFBFA; }
.input.is-changed { background: var(--gold-soft); border-color: var(--gold-edge); }
.hint { font-size: var(--text-meta); color: var(--ink-3); }
.error-text { display: flex; gap: 0.375rem; align-items: flex-start; font-size: var(--text-meta); font-weight: 600; color: var(--danger); }
.error-text .i { width: 1rem; height: 1rem; margin-top: 0.0625rem; }
.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group > .input, .input-group > .select { border-radius: 0; min-width: 0; }
.input-group > :first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.input-group > :last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.input-group > * + * { margin-left: -1px; }
.addon { display: inline-flex; align-items: center; padding: 0 0.625rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-field); white-space: nowrap; }
.input-group > .select.unit { flex: 0 0 auto; width: auto; min-width: 4.5rem; background-color: var(--surface-2); font-weight: 600; }
.conv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; font-size: var(--text-meta); color: var(--ink-2); }
.conv b { font-weight: 700; color: var(--ink); }
.conv .eq { color: var(--ink-3); }
.check, .radio { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.check input, .radio input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); flex: none; }
.check.is-disabled { color: var(--ink-3); cursor: not-allowed; }
.switch { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; font-weight: 600; }
.switch input { appearance: none; position: relative; width: 2.5rem; height: 1.5rem; margin: 0; flex: none; border-radius: var(--r-pill); background: var(--line-strong); border: 1px solid var(--line-field); cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(30, 25, 18, 0.3); transition: transform var(--t-fast) var(--ease); }
.switch input:checked { background: var(--ink); border-color: var(--ink); }
.switch input:checked::after { transform: translateX(1rem); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .span-2, .form-grid-3 .span-2 { grid-column: span 2; }
.form-grid .span-all, .form-grid-3 .span-all { grid-column: 1 / -1; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: 0.375rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); }

/* Segmented control: selection = ink (a pressed key), never gold */
.seg { display: inline-flex; border: 1px solid var(--line-field); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.seg > button, .seg > a, .seg > label { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.125rem; padding: 0 0.875rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); background: none; border: 0; border-right: 1px solid var(--line); cursor: pointer; text-decoration: none; white-space: nowrap; }
.seg > :last-child { border-right: 0; }
.seg > :hover { background: var(--surface-2); color: var(--ink); }
.seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-current="page"], .seg > .is-on { background: var(--ink); color: var(--ink-inv); }
.seg .count { font-weight: 400; opacity: 0.85; }

/* Stepper (− value +) */
.stepper { display: flex; align-items: stretch; }
.stepper .input { border-radius: 0; text-align: center; font-weight: 700; min-width: 0; }
.stepper button { flex: none; width: 2.25rem; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-field); cursor: pointer; color: var(--ink); }
.stepper button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: 0; }
.stepper button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 0; }
.stepper button:hover { background: var(--sunk); }

.search { position: relative; }
.search > .i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search > .input { padding-left: 2.25rem; }

/* ==========================================================================
   Sheets of paper: panels, page heads, toolbars
   ========================================================================== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3.25rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); }
.panel-title small { margin-left: 0.5rem; font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.panel-sub { font-size: var(--text-meta); color: var(--ink-3); }
.panel-tools { display: flex; align-items: center; gap: var(--s-2); }
.panel-body { padding: 1.25rem; }
.panel-body.tight { padding: 0.75rem 1.25rem; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.75rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); font-size: var(--text-meta); color: var(--ink-3); }
.panel-flush { overflow: clip; }  /* clip, not hidden: keeps sticky table heads tied to the page */
.panel + .panel { margin-top: var(--s-5); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-7) 0 var(--s-3); }
.section-title h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); letter-spacing: -0.01em; }
.section-title .note { font-size: var(--text-meta); color: var(--ink-3); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-page); line-height: 1.12; letter-spacing: -0.01em; }
.page-title .code { font-size: 0.72em; font-weight: 500; color: var(--ink-3); margin-left: 0.4rem; vertical-align: 0.1em; }
.page-sub { margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; color: var(--ink-3); }
.page-sub > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.toolbar { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.toolbar .field { min-width: 9rem; }
.toolbar .field.wide { min-width: 16rem; flex: 1 1 16rem; }
.toolbar .spacer { flex: 1 1 auto; }
.toolbar .result { font-size: var(--text-meta); color: var(--ink-3); padding-bottom: 0.5rem; }
.filters-more { position: relative; }
.filters-more > summary { list-style: none; }
.filters-more > summary::-webkit-details-marker { display: none; }
.applied { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: calc(var(--s-2) * -1) 0 var(--s-4); }
.applied .chip-x { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.375rem 0.125rem 0.625rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
.applied .chip-x button { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; border-radius: var(--r-xs); }
.applied .chip-x button:hover { background: var(--sunk); color: var(--ink); }

/* Two-column page layouts */
.cols { display: grid; gap: var(--s-5); align-items: start; }
.cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cols-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cols-side { grid-template-columns: 16rem minmax(0, 1fr); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Definition list */
.dl { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.5rem 1rem; margin: 0; }
.dl dt { color: var(--ink-3); font-size: var(--text-meta); padding-top: 0.0625rem; }
.dl dd { margin: 0; font-weight: 500; min-width: 0; }

/* Leader rows ("Định mức ........ 72 thùng") — receipt / scale-ticket voice */
.leaders { display: grid; gap: 0.375rem; margin: 0; }
.leaders > div { display: flex; align-items: baseline; gap: 0.5rem; }
.leaders dt { color: var(--ink-2); white-space: nowrap; }
.leaders dt::after { content: ""; }
.leaders .fill { flex: 1 1 auto; border-bottom: 1px dotted var(--line-strong); transform: translateY(-0.25em); min-width: 1rem; }
.leaders dd { margin: 0; font-weight: 600; white-space: nowrap; text-align: right; }
.leaders .tot dt, .leaders .tot dd { font-weight: 700; color: var(--ink); }
.leaders .tot { padding-top: 0.375rem; margin-top: 0.125rem; border-top: 1px solid var(--ink); }

/* ==========================================================================
   Tables
   ========================================================================== */
.tbl-wrap { position: relative; }
.tbl-scroll { overflow: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-ui); }
.tbl th, .tbl td { padding: 0.5625rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tbl thead th { position: sticky; top: var(--top-h); z-index: 2; background: var(--surface-2); font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); line-height: 1.25; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tbl-scroll .tbl thead th { top: 0; }
.tbl thead th small { display: block; font-weight: 400; color: var(--ink-3); }
.tbl thead tr.th-group th { text-align: center; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tbl thead tr.th-group th + th { border-left: 1px solid var(--line); }
.tbl th.num, .tbl td.num { text-align: right; white-space: nowrap; }
.tbl th.center, .tbl td.center { text-align: center; }
.tbl td.sep, .tbl th.sep { border-left: 1px solid var(--line); }
.tbl tbody tr:hover > td { background: #FBF8F1; }
.tbl tbody tr.is-selected > td { background: var(--gold-soft); }
.tbl tbody tr.is-flash > td { background: var(--gold-soft); }
.tbl tr.grp > td { background: var(--kraft-soft); font-weight: 600; color: var(--kraft-ink); border-bottom-color: #E7D9BF; }
.tbl tr.grp > td .muted { font-weight: 400; color: var(--kraft-ink-2); }
.tbl tr.sub > td { background: var(--surface-2); font-weight: 600; }
.tbl tr.total > td { font-weight: 700; background: var(--surface); border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.tbl tr.total > td .u, .tbl tr.total > td .q-sub { font-weight: 400; }
.tbl tr.opening > td { background: var(--surface-2); color: var(--ink-2); font-style: italic; }
.tbl tr.is-void > td { color: var(--void); }
.tbl tr.is-void .code { text-decoration: line-through; color: var(--void); }
.tbl tr.is-dim > td { color: var(--ink-3); }
.tbl tr.is-free > td { color: var(--ink-3); background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(30, 25, 18, 0.025) 7px 14px); }
.tbl td.c-name { min-width: 12rem; }
.tbl td .sub, .tbl th .sub { display: block; font-size: var(--text-meta); font-weight: 400; color: var(--ink-3); }
.tbl td.actions { text-align: right; white-space: nowrap; width: 1%; }
.tbl a.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.tbl a.row-link:hover { color: var(--link); text-decoration: underline; }
.tbl .nowrap { white-space: nowrap; }
.tbl-dense th, .tbl-dense td { padding: 0.375rem 0.5rem; font-size: var(--text-dense); }
.tbl-dense thead th { font-size: 0.78125rem; }
.tbl-compact th, .tbl-compact td { padding: 0.4375rem 0.625rem; }
.tbl-plain thead th { position: static; }
.panel > .tbl-wrap > .tbl tr:last-child > td, .panel > .tbl tr:last-child > td { border-bottom: 0; }
.panel > .tbl-wrap > .tbl tr.total:last-child > td { border-bottom: 3px double var(--ink); }
.tbl .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.tbl thead .sticky-col { z-index: 3; background: var(--surface-2); }
.tbl .sticky-end { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -1px 0 0 var(--line-strong); }
.tbl thead .sticky-end { z-index: 3; background: var(--surface-2); }
.tbl tr.total .sticky-col, .tbl tr.total .sticky-end { background: var(--surface); }
.tbl tbody tr:hover > td.sticky-col, .tbl tbody tr:hover > td.sticky-end { background: #FBF8F1; }

/* ==========================================================================
   Signature: ticket readouts, variance, deviation beam, level meter
   ========================================================================== */
.ticket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.ticket > .tk { padding: 0.875rem 1.125rem 1rem; border-left: 1px dashed var(--line-strong); min-width: 0; }
.ticket > .tk:first-child { border-left: 0; }
.tk-label { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-3); }
.tk-value { margin-top: 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-readout); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.tk-value .u { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--ink-3); margin-left: 0.25rem; letter-spacing: 0; }
.tk-value.is-neg { color: var(--danger); }
.tk-value.is-pos { color: var(--ok); }
.tk-sub { margin-top: 0.25rem; font-size: var(--text-meta); color: var(--ink-3); }
.tk-sub b { color: var(--ink-2); font-weight: 600; }
.ticket-sm .tk-value { font-size: 1.5rem; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.625rem 1.125rem; border-bottom: 1px dashed var(--line-strong); font-size: var(--text-meta); color: var(--ink-3); grid-column: 1 / -1; }

/* Variance: sign + word + icon, colour only reinforces */
.var { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; white-space: nowrap; }
.var .i { width: 0.8125rem; height: 0.8125rem; stroke: none; fill: currentColor; }
.var .pct { font-weight: 400; }
.var-bad { color: var(--danger); }
.var-good { color: var(--ok); }
.var-flat { color: var(--ink-3); }
.var-warn { color: var(--warn); }
.var-chip { padding: 0.125rem 0.5rem; border-radius: var(--r-xs); border: 1px solid; }
.var-chip.var-bad { background: var(--danger-bg); border-color: var(--danger-line); }
.var-chip.var-good { background: var(--ok-bg); border-color: var(--ok-line); }
.var-chip.var-flat { background: var(--surface-2); border-color: var(--line); }
.flag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.375rem; font-size: var(--text-meta); font-weight: 700; line-height: 1.375rem; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-xs); white-space: nowrap; }

/* Deviation beam: centre tick = định mức. --d = |chênh| / 20 %, capped at 1 */
.dev { position: relative; display: inline-block; width: 4.5rem; height: 0.875rem; vertical-align: middle; flex: none; }
.dev::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); border-radius: 1px; }
.dev::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink-2); border-radius: 1px; }
.dev > i { position: absolute; top: 50%; height: 0.5rem; margin-top: -0.25rem; background: var(--ink-3); border-radius: 1px; }
.dev-over > i { left: 50%; width: calc(var(--d, 0) * 50%); }
.dev-under > i { right: 50%; width: calc(var(--d, 0) * 50%); }
.dev-bad > i { background: var(--danger); }
.dev-good > i { background: var(--ok); }
.dev-none > i { display: none; }
.dev.is-capped.dev-over > i { border-radius: 1px 0 0 1px; }
.dev.is-capped.dev-over::before { background: linear-gradient(90deg, var(--line) 0 96%, var(--danger) 96%); }

/* Level meter: tick at 50 % = ngưỡng. --v = tồn / (2 × ngưỡng), capped at 1 */
.lvl { position: relative; display: block; height: 0.5rem; background: var(--sunk); border-radius: 2px; }
.lvl > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0) * 100%); background: var(--ink-3); border-radius: 2px; }
.lvl::after { content: ""; position: absolute; left: 50%; top: -0.1875rem; bottom: -0.1875rem; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.lvl.is-low > i { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #C27A1A 3px 6px); }
.lvl.is-zero > i { width: 0; }
.lvl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.25rem 0.75rem; }
.lvl-row .lvl { grid-column: 1 / -1; }

/* ==========================================================================
   Labels: badges, stamps, product label, codes, bilingual names
   ========================================================================== */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.4375rem; font-size: var(--text-meta); font-weight: 600; line-height: 1.375rem; border: 1px solid transparent; border-radius: var(--r-xs); white-space: nowrap; vertical-align: middle; }
.badge .i { width: 0.875rem; height: 0.875rem; }
.badge-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.badge-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.badge-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.badge-info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.badge-lock { color: var(--lock); background: var(--lock-bg); border-color: var(--lock-line); }
.badge-muted { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-strong); }
.badge-gold { color: var(--gold-ink); background: var(--gold-soft); border-color: var(--gold-line); }
.badge-ink { color: var(--ink-inv); background: var(--ink); border-color: var(--ink); }
.count-pill { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; font-size: 0.75rem; font-weight: 700; line-height: 1; border-radius: var(--r-pill); background: var(--warn); color: var(--ink-inv); }

/* Rubber stamp: double rule, condensed caps */
.stamp { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); border: 2px solid currentColor; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px currentColor; background: var(--surface); white-space: nowrap; }
.stamp .i { width: 1rem; height: 1rem; }
.stamp-lg { font-size: 1.125rem; padding: 0.3125rem 0.875rem; transform: rotate(-2deg); }
.stamp-huy, .stamp-hong { color: var(--danger); }
.stamp-chot { color: var(--lock); }
.stamp-tam { color: var(--warn); }
.stamp-ok { color: var(--ok); }

/* Carton-print product label */
.sp-label { display: inline-flex; align-items: stretch; border: 1.5px solid var(--kraft-ink); border-radius: var(--r-xs); background: var(--kraft-soft); color: var(--kraft-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.sp-label > span { padding: 0 0.5rem; }
.sp-label > span + span { border-left: 1.5px solid var(--kraft-ink); }
.sp-label .sp-code { font-family: var(--font-mono); font-weight: 500; font-size: 0.875em; letter-spacing: 0; text-transform: none; }
.sp-label .sp-kg { font-family: var(--font-ui); font-weight: 600; text-transform: none; letter-spacing: 0; }
.sp-label-lg { font-size: 1.125rem; }

/* Product dot (legend + table) */
.swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; flex: none; vertical-align: -0.0625rem; background: var(--sw, var(--ink-3)); }

/* Bilingual material name: Vietnamese first, Chinese/workshop name after */
.vt { font-weight: 600; color: var(--ink); }
.vt-cn { margin-left: 0.3em; font-family: var(--font-cjk); font-weight: 400; font-size: 0.92em; color: var(--ink-3); }
.vt-sub { display: block; font-size: var(--text-meta); font-weight: 400; color: var(--ink-3); }
.vt-sub .code { color: var(--ink-3); }

/* ==========================================================================
   Feedback: alerts, flash, empty, skeleton, block error, toast
   ========================================================================== */
.alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; border: 1px solid; border-radius: var(--r-sm); font-size: var(--text-ui); line-height: var(--lh-body); }
.alert > .i { flex: none; margin-top: 0.125rem; }
.alert-body { flex: 1 1 auto; min-width: 0; }
.alert-title { font-weight: 700; }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.alert-info { background: var(--info-bg); border-color: var(--info-line); color: #163D60; }
.alert-info > .i { color: var(--info); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-line); color: #5A3200; }
.alert-warn > .i { color: var(--warn); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-line); color: #7A1810; }
.alert-danger > .i { color: var(--danger); }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-line); color: #154B29; }
.alert-ok > .i { color: var(--ok); }
.alert-lock { background: var(--lock-bg); border-color: var(--lock-line); color: var(--ink-2); }
.alert-lock > .i { color: var(--lock); }
.alert ul { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.alert li + li { margin-top: 0.125rem; }

/* After-save notice: "Sau phiếu này: … dưới ngưỡng" */
.after { border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: var(--r-sm); padding: 0.75rem 1rem; color: #5A3200; }
.after-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.after-head .i { color: var(--warn); }
.after-list { list-style: none; margin-top: 0.5rem; display: grid; gap: 0.5rem; }
.after-list li { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; align-items: center; gap: 1rem; }
.after-list .lvl { background: rgba(255, 255, 255, 0.7); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2.5rem 1.5rem; color: var(--ink-3); }
.empty-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--kraft-soft); color: var(--kraft-ink-2); margin-bottom: 0.25rem; }
.empty-ico .i { width: 1.75rem; height: 1.75rem; }
.empty-title { font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.empty p { max-width: 34rem; }
.empty .btn { margin-top: 0.5rem; }
.empty.small { padding: 1.5rem 1rem; }

.sk { display: block; height: 0.875rem; border-radius: 2px; background: linear-gradient(90deg, #ECE9E2 0%, #F5F3EE 50%, #ECE9E2 100%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
.sk + .sk { margin-top: 0.625rem; }
.sk.w-60 { width: 60%; } .sk.w-40 { width: 40%; } .sk.w-80 { width: 80%; } .sk.h-24 { height: 1.5rem; } .sk.h-32 { height: 2rem; }
@keyframes sk { to { background-position: -200% 0; } }
.blk-err { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1.25rem; color: var(--danger); font-weight: 600; }
.blk-err .btn { margin-left: auto; }

.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; background: var(--ink); color: var(--ink-inv); border-radius: var(--r-sm); box-shadow: var(--sh-2); font-weight: 600; max-width: min(32rem, calc(100vw - 2rem)); }
.toast .i { color: #8FD3A6; }

/* ==========================================================================
   Navigation pieces: tabs, pager, crumbs, report switcher
   ========================================================================== */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line-strong); overflow-x: auto; }
.tabs > a, .tabs > button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; margin-bottom: -1px; font-size: var(--text-ui); font-weight: 600; color: var(--ink-3); background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.tabs > a:hover, .tabs > button:hover { color: var(--ink); }
.tabs > [aria-selected="true"], .tabs > [aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.tabs .count { font-size: 0.75rem; font-weight: 700; padding: 0 0.4375rem; line-height: 1.25rem; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-2); }
.tabs .count.is-warn { background: var(--warn); color: var(--ink-inv); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.625rem 1.25rem; border-top: 1px solid var(--line); font-size: var(--text-meta); color: var(--ink-3); }
.pager .btn-group { gap: 0.25rem; }

.crumbs { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: var(--text-meta); color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .i { width: 0.875rem; height: 0.875rem; color: var(--line-field); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Overlays: scrim, drawer, dialog, popover, menu (static-open in mockups)
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(30, 25, 18, 0.4); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(34rem, 100vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--sh-3); border-left: 1px solid var(--line-strong); }
.drawer-wide { width: min(46rem, 100vw); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); }
.drawer-head p { margin-top: 0.25rem; font-size: var(--text-meta); color: var(--ink-3); }
.drawer-body { flex: 1 1 auto; overflow: auto; padding: 1.25rem 1.5rem; }
.drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: 0.875rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.drawer-foot .left { margin-right: auto; font-size: var(--text-meta); color: var(--ink-3); }
.dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-dialog); width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.dialog-wide { width: min(40rem, calc(100vw - 2rem)); }
.dialog-head { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1.25rem 1.5rem 0.5rem; }
.dialog-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.2; }
.dialog-head .ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--danger-bg); color: var(--danger); }
.dialog-head .ico.is-warn { background: var(--warn-bg); color: var(--warn); }
.dialog-head .ico.is-lock { background: var(--lock-bg); color: var(--lock); }
.dialog-body { padding: 0.5rem 1.5rem 1.25rem; color: var(--ink-2); line-height: var(--lh-body); }
.dialog-body > * + * { margin-top: 0.875rem; }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 0.875rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.popover { position: absolute; z-index: var(--z-dropdown); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.menu { list-style: none; padding: 0.375rem; min-width: 14rem; }
.menu a, .menu button { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; font-size: var(--text-ui); font-weight: 500; color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); text-decoration: none; text-align: left; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu .i { color: var(--ink-3); }
.menu small { margin-left: auto; color: var(--ink-3); font-size: var(--text-meta); }
.menu .sep { height: 1px; margin: 0.375rem 0.25rem; background: var(--line); }
.menu .menu-label { padding: 0.375rem 0.625rem 0.125rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-3); }

/* ==========================================================================
   Desktop shell (body.desk) — kraft sidebar, white sheets
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  background-color: var(--kraft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  border-right: 1px solid var(--kraft-line); color: var(--kraft-ink);
}
.brand { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1rem 0.875rem; color: var(--kraft-ink); text-decoration: none; }
.brand:hover { color: var(--kraft-ink); }
.brand-mark { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--gold); color: var(--ink); border: 1.5px solid var(--kraft-ink); border-radius: 3px; }
.brand-mark .i { width: 1.5rem; height: 1.5rem; stroke-width: 1.9; }
.brand strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.005em; }
.brand small { display: block; font-size: var(--text-meta); color: var(--kraft-ink-2); line-height: 1.25; }
.nav { flex: 1 1 auto; padding: 0.25rem 0.625rem 0.75rem; }
.nav-group { margin-top: 0.625rem; }
.nav-label { padding: 0.25rem 0.625rem 0.25rem; font-size: 0.78125rem; font-weight: 700; color: var(--kraft-ink-2); letter-spacing: 0.01em; }
.nav-item { display: flex; align-items: center; gap: 0.625rem; min-height: 2rem; padding: 0.3125rem 0.625rem; margin: 1px 0; font-size: var(--text-ui); font-weight: 600; color: var(--kraft-ink); text-decoration: none; border-radius: var(--r-sm); position: relative; }
.nav-item .i { width: 1.125rem; height: 1.125rem; color: var(--kraft-ink-2); }
.nav-item:hover { background: rgba(255, 255, 255, 0.42); color: var(--kraft-ink); }
.nav-item[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 rgba(42, 32, 21, 0.18), 0 0 0 1px rgba(42, 32, 21, 0.1); }
.nav-item[aria-current="page"] .i { color: var(--ink); }
.nav-item[aria-current="page"]::after { content: ""; position: absolute; right: 0.625rem; top: 50%; width: 0.4375rem; height: 0.4375rem; margin-top: -0.21875rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--gold-edge); }
.nav-item .count-pill { margin-left: auto; }
.nav-item[aria-current="page"] .count-pill + ::after { display: none; }
.nav-item.has-count[aria-current="page"]::after { display: none; }
.side-foot { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; border-top: 1px solid var(--kraft-line); }
.avatar { flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--kraft-ink); color: var(--kraft); font-weight: 700; font-size: var(--text-meta); letter-spacing: 0.02em; }
.who { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.who strong { display: block; font-size: var(--text-meta); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; font-size: 0.78125rem; color: var(--kraft-ink-2); }
.side-foot .btn-ghost { color: var(--kraft-ink-2); }
.side-foot .btn-ghost:hover { background: rgba(255, 255, 255, 0.42); color: var(--kraft-ink); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--top-h); padding: 0 var(--pad-x); background: rgba(243, 242, 238, 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.top-meta { display: flex; align-items: center; gap: var(--s-4); font-size: var(--text-meta); color: var(--ink-3); white-space: nowrap; }
.top-meta > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.top-meta .i { width: 1rem; height: 1rem; }
.top-meta .sep { width: 1px; height: 1.25rem; background: var(--line-strong); }
.page { padding: var(--s-6) var(--pad-x) var(--s-10); width: 100%; max-width: 105rem; }
.page-narrow { max-width: 64rem; }

/* ==========================================================================
   Phone shell (body.phone) — kraft top bar, white bottom nav, golden "+"
   ========================================================================== */
body.phone { font-size: var(--text-body); line-height: var(--lh-body); background: var(--bg); }
body.phone .tbl thead th { top: 0; }
.m-shell { min-height: 100vh; display: flex; flex-direction: column; }
.m-top { position: sticky; top: 0; z-index: var(--z-top); display: flex; align-items: center; gap: 0.25rem; min-height: 3.5rem; padding: 0.375rem 0.5rem 0.375rem 0.25rem; background-color: var(--kraft); color: var(--kraft-ink); border-bottom: 1px solid var(--kraft-line); }
.m-top.is-plain { padding-left: var(--gutter); }
.m-back, .m-act { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-sm); color: var(--kraft-ink); background: none; border: 0; text-decoration: none; cursor: pointer; }
.m-back:hover, .m-act:hover { background: rgba(255, 255, 255, 0.4); color: var(--kraft-ink); }
.m-back .i, .m-act .i { width: 1.5rem; height: 1.5rem; }
.m-titles { flex: 1 1 auto; min-width: 0; }
.m-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sub { font-size: 0.875rem; color: var(--kraft-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-brand { display: flex; align-items: center; gap: 0.5rem; }
.m-brand .brand-mark { width: 2rem; height: 2rem; }
.m-brand .brand-mark .i { width: 1.25rem; height: 1.25rem; }
.m-page { flex: 1 1 auto; padding: var(--gutter) var(--gutter) 6.5rem; }
.m-page.has-actionbar { padding-bottom: 11rem; }
.m-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-top); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; background: var(--surface); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom); }
.m-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 4rem; padding-bottom: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-3); text-decoration: none; position: relative; }
.m-nav a .pill { display: grid; place-items: center; width: 3.25rem; height: 1.875rem; border-radius: var(--r-pill); }
.m-nav a .i { width: 1.375rem; height: 1.375rem; }
.m-nav a[aria-current="page"] { color: var(--ink); }
.m-nav a[aria-current="page"] .pill { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.m-nav .badge-dot { position: absolute; top: 0.375rem; left: 50%; margin-left: 0.5rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--ink-inv); background: var(--warn); border-radius: var(--r-pill); border: 2px solid var(--surface); }
.m-nav .fab { justify-self: center; align-self: start; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; min-height: 0; margin-top: -1.125rem; padding: 0; border-radius: 50%; background: var(--gold); color: var(--ink); border: 1.5px solid var(--gold-edge); box-shadow: 0 0 0 4px var(--surface), 0 6px 14px rgba(30, 25, 18, 0.22); }
.m-nav .fab .i { width: 1.75rem; height: 1.75rem; stroke-width: 2.2; }
.m-nav .fab:hover { background: var(--gold-hover); color: var(--ink); }

/* Phone typography + controls: 16 px floor, 44 px targets */
body.phone .btn { min-height: var(--tap); font-size: var(--text-body); padding: 0 1rem; }
body.phone .btn-lg { min-height: 3.25rem; font-size: 1.0625rem; }
body.phone .btn-xl { min-height: 3.5rem; font-size: 1.125rem; }
body.phone .btn-sm { min-height: var(--tap); font-size: 0.9375rem; padding: 0 0.75rem; }
body.phone .btn-icon { width: var(--tap); }
body.phone .input, body.phone .select, body.phone .textarea { min-height: 3rem; font-size: 1.0625rem; padding: 0.625rem 0.75rem; border-width: 1.5px; }
body.phone .select { padding-right: 2.25rem; }
body.phone .label { font-size: 0.9375rem; color: var(--ink); }
body.phone .hint, body.phone .error-text, body.phone .conv { font-size: 0.9375rem; }
body.phone .check input, body.phone .radio input { width: 1.375rem; height: 1.375rem; }
body.phone .seg { display: flex; width: 100%; }
body.phone .seg > * { flex: 1 1 0; min-height: var(--tap); font-size: 0.9375rem; padding: 0 0.5rem; }
body.phone .stepper button { width: 3rem; }
body.phone .stepper .input { font-size: 1.375rem; }
body.phone .alert { font-size: 0.9375rem; }
body.phone .badge { font-size: 0.875rem; line-height: 1.5rem; }
body.phone .search > .input { padding-left: 2.625rem; }
body.phone .search > .i { left: 0.8125rem; width: 1.25rem; height: 1.25rem; }
body.phone .tabs > a, body.phone .tabs > button { min-height: var(--tap); font-size: 1rem; }

.m-sec { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 1.5rem 0 0.625rem; }
.m-sec:first-child { margin-top: 0.25rem; }
.m-sec h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.m-sec a, .m-sec .btn-link { font-size: 0.9375rem; font-weight: 600; }
.m-list { list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.m-list > li + li { border-top: 1px solid var(--line); }
.m-item { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; padding: 0.75rem 0.875rem; color: inherit; text-decoration: none; }
a.m-item:hover { background: #FBF8F1; color: inherit; }
.m-item .grow > strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.m-item .grow > small { display: block; font-size: 0.875rem; color: var(--ink-3); line-height: 1.35; }
.m-item .end { text-align: right; white-space: nowrap; }
.m-item .end strong { display: block; font-size: 1.0625rem; font-weight: 700; }
.m-item .end small { display: block; font-size: 0.875rem; color: var(--ink-3); }
.m-item > .i { color: var(--ink-3); }
.m-item.is-void .grow > strong, .m-item.is-void .end strong { color: var(--void); text-decoration: line-through; }
.m-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0.875rem; }
.m-card + .m-card { margin-top: 0.75rem; }
.m-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-top); padding: 0.625rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: var(--sh-up); }
.m-actionbar .sum { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9375rem; color: var(--ink-2); }
.m-actionbar .sum strong { font-size: 1.125rem; color: var(--ink); }
.m-actionbar .row { gap: 0.625rem; }
.m-form > * + * { margin-top: 1.125rem; }
.m-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

/* Phone picker button (opens a bottom sheet) */
.picker { width: 100%; min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; text-align: left; font-size: 1.0625rem; font-weight: 700; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-field); border-radius: var(--r-sm); cursor: pointer; text-decoration: none; }
.picker small { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); }
.picker .i { color: var(--ink-3); }
.picker.is-empty { font-weight: 500; color: var(--ink-3); }
.picker.is-invalid { border-color: var(--danger); background: #FFFBFA; }

/* Bottom sheet */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: 0 -12px 32px rgba(30, 25, 18, 0.25); }
.sheet-head { padding: 0.625rem var(--gutter) 0.75rem; border-bottom: 1px solid var(--line); }
.sheet-head::before { content: ""; display: block; width: 2.5rem; height: 0.25rem; margin: 0 auto 0.75rem; border-radius: 2px; background: var(--line-strong); }
.sheet-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.sheet-body { overflow-y: auto; padding: 0.5rem 0; }
.sheet-foot { padding: 0.75rem var(--gutter) 1rem; border-top: 1px solid var(--line); }
.sheet .m-list { border: 0; border-radius: 0; }
.sheet .opt-label { padding: 0.75rem var(--gutter) 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--ink-3); }

/* ==========================================================================
   Screen components (shared across screens)
   ========================================================================== */

/* Production lines (phiếu mẻ): phone line card */
.line { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 0.75rem 0.875rem 0.875rem; }
.line + .line { margin-top: 0.625rem; }
.line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.line-head .vt { font-size: 1.0625rem; }
.line-dm { margin-top: 0.125rem; font-size: 0.9375rem; color: var(--ink-3); }
.line-dm b { color: var(--ink-2); font-weight: 600; }
.line-entry { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem auto minmax(0, 4.75rem) auto; align-items: center; gap: 0.375rem; margin-top: 0.625rem; }
.line-entry .plus { font-weight: 700; color: var(--ink-3); text-align: center; }
.line-entry .unit-fixed { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.line-entry.single { grid-template-columns: minmax(0, 1fr) 5.5rem; }
.line-res { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--line-strong); font-size: 0.9375rem; color: var(--ink-2); }
.line-res b { color: var(--ink); font-size: 1.0625rem; }
.line.is-flagged { border-color: var(--warn-line); box-shadow: inset 0 0 0 1px var(--warn-line); }
.line.is-free { border-style: dashed; background: var(--surface-2); color: var(--ink-3); }
.line.is-added { border-color: var(--gold-edge); }
.line.is-invalid { border-color: var(--danger); background: #FFFBFA; }
.sec-band { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 1.25rem 0 0.5rem; padding: 0.375rem 0.75rem; background: var(--kraft-soft); border: 1px solid #E7D9BF; border-radius: var(--r-sm); color: var(--kraft-ink); font-weight: 700; }
.sec-band small { font-weight: 500; color: var(--kraft-ink-2); font-size: 0.875rem; }

/* Low-stock block ("Sắp hết") */
.low { list-style: none; }
.low > li { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.low > li:last-child { border-bottom: 0; }
.low-name { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.low-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.low-name a:hover { color: var(--link); text-decoration: underline; }
.low-fig { white-space: nowrap; font-weight: 700; }
.low-meta { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.375rem; font-size: var(--text-meta); color: var(--ink-3); }
.low .lvl { margin-top: 0.5rem; }

/* Money strip (Hôm nay: Tiền) */
.money-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.money-strip > div { padding: 1rem 1.25rem; border-left: 1px solid var(--line); min-width: 0; }
.money-strip > div:first-child { border-left: 0; }
.ms-label { font-size: var(--text-meta); font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 0.375rem; }
.ms-value { margin-top: 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: 1.625rem; line-height: 1.12; white-space: nowrap; }
.ms-value .u { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; }
.ms-rows { margin-top: 0.5rem; display: grid; gap: 0.25rem; font-size: var(--text-meta); color: var(--ink-2); }
.ms-rows > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.ms-rows a { color: var(--ink-2); }

/* Ledger / statement running balance */
.tbl td.run { font-weight: 700; background: var(--surface-2); }
.bal-note { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--text-meta); font-weight: 600; padding: 0 0.375rem; border-radius: var(--r-xs); }
.bal-note.is-credit { color: var(--info); background: var(--info-bg); }

/* Report switcher (báo cáo) */
.rep-nav { display: grid; gap: 0.25rem; }
.rep-nav a { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.625rem; align-items: center; padding: 0.5rem 0.75rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.rep-nav a .i { grid-row: span 2; color: var(--ink-3); }
.rep-nav a strong { font-weight: 600; }
.rep-nav a small { font-size: var(--text-meta); color: var(--ink-3); }
.rep-nav a:hover { background: var(--surface-2); }
.rep-nav a[aria-current="page"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.rep-nav .money-only small::after { content: ""; }
.period { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.period .stepper-month { display: inline-flex; align-items: center; border: 1px solid var(--line-field); border-radius: var(--r-sm); background: var(--surface); }
.period .stepper-month button { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 0; background: none; cursor: pointer; color: var(--ink-2); }
.period .stepper-month button:hover { background: var(--surface-2); }
.period .stepper-month strong { padding: 0 0.625rem; font-weight: 700; min-width: 7.5rem; text-align: center; }

/* Charts (server SVG) */
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui); }
.chart text { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .grid { stroke: var(--c-grid); stroke-width: 1; }
.chart .zero { stroke: var(--ink-2); stroke-width: 1.25; }
.chart .lbl { font-weight: 600; fill: var(--ink-2); }
.chart .lbl-strong { font-weight: 700; fill: var(--ink); }
.chart .lbl-neg { font-weight: 700; fill: var(--danger); }
.chart .lbl-pos { font-weight: 700; fill: var(--ok); }
.chart .na { fill: var(--sunk); }
.chart .na-text { fill: var(--ink-3); font-style: italic; }
.legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: var(--text-meta); color: var(--ink-2); }
.legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend .swatch { width: 0.875rem; height: 0.875rem; }
.chart-data { border-top: 1px solid var(--line); }
.chart-data > summary { display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1.25rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.chart-data > summary::-webkit-details-marker { display: none; }
.chart-data > summary .i { transition: transform var(--t-fast) var(--ease); }
.chart-data[open] > summary .i { transform: rotate(90deg); }

/* Day grid (T2…CN): báo cáo sản phẩm tháng + bảng công tháng */
.grid-wrap { overflow: auto; max-height: calc(100vh - 13rem); border-top: 1px solid var(--line); }
.daygrid { border-collapse: separate; border-spacing: 0; font-size: var(--text-dense); }
.daygrid th, .daygrid td { padding: 0.3125rem 0.375rem; border-bottom: 1px solid var(--line); border-right: 1px solid #EFEBE3; text-align: right; white-space: nowrap; min-width: 2.75rem; }
.daygrid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.15; border-bottom: 1px solid var(--line-strong); }
.daygrid thead th .wd { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--ink-3); }
.daygrid .rowhead { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; min-width: 13rem; max-width: 15rem; border-right: 1px solid var(--line-strong); font-weight: 600; }
.daygrid thead .rowhead { z-index: 3; background: var(--surface-2); }
.daygrid .cn { background: var(--kraft-soft); }
.daygrid thead th.cn { background: #EFE3CB; color: var(--kraft-ink); }
.daygrid thead th.cn .wd { color: var(--kraft-ink); font-weight: 700; }
.daygrid td.is-empty { color: var(--ink-4); text-align: center; }
.daygrid .tot { background: var(--surface-2); font-weight: 700; border-left: 1px solid var(--line-strong); }
.daygrid thead th.tot { background: #F1EEE7; }
.daygrid tr.grp > td, .daygrid tr.grp > th { background: var(--kraft-soft); font-weight: 700; color: var(--kraft-ink); text-align: left; }
.daygrid tr.blk-head > th { background: var(--ink); color: var(--ink-inv); text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; position: sticky; left: 0; }
.daygrid td.is-off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--sunk) 5px 10px); color: var(--ink-4); }

/* Timesheet marks: text + shape, never colour alone */
.tc { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.375rem; padding: 0 0.25rem; font-weight: 700; font-size: 0.8125rem; border-radius: 3px; line-height: 1; }
.tc-du { color: var(--ink); }
.tc-nua { color: var(--ink); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.tc-p { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.tc-k { color: var(--ink-inv); background: var(--danger); }
.tc-0 { color: #736A5D; }
.ot { display: inline-block; margin-left: 1px; font-size: 0.6875rem; font-weight: 700; color: var(--gold-ink); vertical-align: 0.375rem; }
.meal { display: inline-block; width: 0.375rem; height: 0.375rem; margin-left: 2px; border-radius: 50%; background: var(--ink-3); vertical-align: 0.375rem; }
.daygrid td.cell { text-align: center; padding: 0.25rem; cursor: pointer; }
.daygrid td.cell:hover { box-shadow: inset 0 0 0 2px var(--ink-2); }
.daygrid td.cell.is-editing { box-shadow: inset 0 0 0 2px var(--ink); background: var(--gold-soft); }
.daygrid td.cell.is-error { box-shadow: inset 0 0 0 2px var(--danger); background: var(--danger-bg); }

/* Spreadsheet preview (S20 Excel export, S21 import templates).
   The chrome is a neutral spreadsheet program; the file's own styling (kraft header fill,
   bold totals) is what the export writes. Frozen panes = sticky rows/columns inside .xl-scroll. */
.xl-app { --xl-line: #E2E2DE; --xl-chrome: #F3F3F0; --xl-chrome-line: #CDCDC8; --xl-sel: #1A6B43; --xl-rh: 1.5rem;
  margin-top: 0.75rem; background: #fff; border: 1px solid #BDBDB8; border-radius: 6px; overflow: hidden; box-shadow: var(--sh-2); }
.xl-bar { display: flex; align-items: center; gap: 0.625rem; min-height: 2.5rem; padding: 0 0.875rem; background: var(--xl-chrome); border-bottom: 1px solid var(--xl-chrome-line); color: #262624; }
.xl-bar > .i { color: var(--xl-sel); }
.xl-name { font-size: 0.9375rem; font-weight: 700; }
.xl-meta { margin-left: auto; font-size: var(--text-meta); color: #5F5F5A; }
.xl-formula { display: flex; align-items: stretch; height: 2rem; border-bottom: 1px solid var(--xl-chrome-line); font-family: Calibri, "Source Sans 3", Arial, sans-serif; font-size: 0.875rem; }
.xl-formula > span { display: flex; align-items: center; padding: 0 0.625rem; }
.xl-ref { width: 5.5rem; border-right: 1px solid var(--xl-chrome-line); color: #262624; }
.xl-fx { border-right: 1px solid var(--xl-chrome-line); color: #7A7A74; font-style: italic; }
.xl-val { flex: 1 1 auto; min-width: 0; color: #111; white-space: nowrap; overflow: hidden; }
.xl-scroll { position: relative; isolation: isolate; max-height: 34rem; overflow: auto; background: #fff; }
.xl-scroll.xl-short { max-height: 26rem; }
.xl-scroll:focus-visible { outline: 3px solid var(--focus, #1F6FB2); outline-offset: -3px; }
.xl-sheet { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; font-family: Calibri, "Source Sans 3", "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", Arial, sans-serif; font-size: 0.8125rem; color: #111; font-variant-numeric: tabular-nums; }
.xl-c-rn { width: 2.5rem; }
.xl-sheet th, .xl-sheet td { height: 1.375rem; padding: 0 0.375rem; border-right: 1px solid var(--xl-line); border-bottom: 1px solid var(--xl-line); white-space: nowrap; overflow: hidden; text-align: left; font-weight: 400; vertical-align: middle; line-height: 1.25; background: #fff; }
/* column letters and row numbers */
.xl-sheet .xl-cols th { position: sticky; top: 0; z-index: 6; height: var(--xl-rh); padding: 0; text-align: center; font-size: 0.75rem; color: #57574F; background: var(--xl-chrome); border-right-color: var(--xl-chrome-line); border-bottom-color: var(--xl-chrome-line); }
.xl-sheet .rn { position: sticky; left: 0; z-index: 2; padding: 0; text-align: center; font-size: 0.75rem; color: #57574F; background: var(--xl-chrome); border-right-color: var(--xl-chrome-line); border-bottom-color: var(--xl-chrome-line); }
.xl-sheet .xl-cols .rn { z-index: 8; }
.xl-sheet .xl-cols th.is-sel, .xl-sheet .rn.is-sel { background: #DCEADF; color: var(--xl-sel); font-weight: 700; box-shadow: inset 0 -2px 0 var(--xl-sel); }
.xl-sheet .rn.is-sel { box-shadow: inset -2px 0 0 var(--xl-sel); }
/* frozen rows (fz1–fz6) and columns (fzc1–fzc4, bảng công) */
.xl-sheet tr.fz > * { position: sticky; z-index: 3; height: var(--xl-rh); }
.xl-sheet tr.fz1 > * { top: calc(var(--xl-rh) * 1); }
.xl-sheet tr.fz2 > * { top: calc(var(--xl-rh) * 2); }
.xl-sheet tr.fz3 > * { top: calc(var(--xl-rh) * 3); }
.xl-sheet tr.fz4 > * { top: calc(var(--xl-rh) * 4); }
.xl-sheet tr.fz5 > * { top: calc(var(--xl-rh) * 5); }
.xl-sheet tr.fz6 > * { top: calc(var(--xl-rh) * 6); }
.xl-sheet tr.fz > .rn { z-index: 5; }
.xl-sheet tr.fz-last > * { border-bottom: 1px solid #8F8F88; }
.xl-sheet th[rowspan] { border-bottom: 1px solid #8F8F88; }
.xl-bc { --c1: 2.5rem; --c2: 4.75rem; --c3: 8.5rem; --c4: 18.5rem; }
.xl-sheet .fzc { position: sticky; z-index: 1; }
.xl-sheet .fzc1 { left: var(--c1); }
.xl-sheet .fzc2 { left: var(--c2); }
.xl-sheet .fzc3 { left: var(--c3); }
.xl-sheet .fzc4 { left: var(--c4); border-right: 1px solid #8F8F88; }
.xl-sheet tr.fz > .fzc { z-index: 4; }
.xl-sheet .xl-cols th.fzc { z-index: 7; }
.xl-sheet td.x-span { overflow: visible; }
.xl-sheet .x-fill { padding: 0; }
/* what the file itself writes */
.xl-sheet .x-org { font-weight: 700; }
.xl-sheet .x-h1 { font-weight: 700; font-size: 0.9375rem; }
.xl-sheet .x-sub { color: #3F3F3A; }
.xl-sheet .x-hd { font-weight: 700; text-align: center; background: #F2E6CF; border-right-color: #DCCBA9; border-bottom-color: #DCCBA9; }
.xl-sheet .x-hd-g { border-bottom-color: #DCCBA9; }
.xl-sheet .x-hd-s { font-weight: 600; }
.xl-sheet .x-n { text-align: right; }
.xl-sheet .x-b { font-weight: 700; }
.xl-sheet .x-i { font-style: italic; color: #4A4A44; }
.xl-sheet .x-note { font-style: italic; color: #4A4A44; }
.xl-sheet .x-warn { color: #8A4B00; }
.xl-sheet tr.x-grp > td { background: #FBF3E4; font-weight: 700; }
.xl-sheet tr.x-sum > td { font-weight: 700; border-top: 1px solid #111; }
.xl-sheet tr.x-tot > td { font-weight: 700; background: #FBF3E4; border-bottom: 3px double #111; }
.xl-sheet tr.x-dim > td { color: #66665F; }
.xl-sheet td.x-sel { box-shadow: inset 0 0 0 2px var(--xl-sel); }
.xl-sheet .x-day { padding: 0; text-align: center; }
.xl-sheet .x-cn { background: #F1EBDD; }
.xl-sheet th.x-cn { background: #E8D6B3; }
.xl-sheet .x-c { padding: 0; text-align: center; }
.xl-sheet .x-off { background: #E3E3DF; }
.xl-sheet .x-p { color: #1D4F86; font-weight: 700; }
.xl-sheet .x-k { color: #A3170C; font-weight: 700; }
.xl-sheet .x-tt { white-space: normal; line-height: 1.1; font-size: 0.75rem; }
/* template: required header mark, cell comments, list validation */
.xl-sheet .x-req::before { content: "*"; margin-right: 0.125rem; color: #A3170C; }
.xl-sheet .x-cmt { overflow: visible; }
.xl-sheet .x-cmt::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 0.4375rem 0.4375rem 0; border-color: transparent #C8281B transparent transparent; }
.x-comment { position: absolute; top: calc(100% + 0.25rem); left: 55%; z-index: 9; width: 16rem; padding: 0.5rem 0.625rem; white-space: normal; text-align: left; font-weight: 400; font-size: 0.8125rem; line-height: 1.4; color: #222; background: #FFFBD6; border: 1px solid #B8AE62; box-shadow: 2px 3px 6px rgba(30, 25, 18, 0.22); }
.x-comment b { font-weight: 700; }
.xl-sheet td.x-pick { position: relative; overflow: visible; }
.x-dd-btn { position: absolute; top: 0; right: -1.25rem; width: 1.125rem; height: 100%; display: grid; place-items: center; font-size: 0.625rem; color: #333; background: #F3F3F0; border: 1px solid #A9A9A3; }
.x-dd { position: absolute; top: calc(100% + 1px); left: -2px; z-index: 9; display: grid; min-width: calc(100% + 1.25rem); padding: 0.125rem 0; background: #fff; border: 1px solid #8F8F88; box-shadow: 2px 3px 6px rgba(30, 25, 18, 0.2); }
.x-dd span { padding: 0.125rem 0.5rem; line-height: 1.5; color: #111; }
.x-dd span[aria-selected="true"] { background: #DCEADF; }
/* sheet tabs */
.xl-tabs { display: flex; align-items: stretch; min-height: 2rem; background: var(--xl-chrome); border-top: 1px solid var(--xl-chrome-line); font-family: Calibri, "Source Sans 3", Arial, sans-serif; font-size: 0.875rem; }
.xl-tab { display: flex; align-items: center; padding: 0 1rem; color: #3A3A36; border-right: 1px solid var(--xl-chrome-line); }
.xl-tab.is-on { background: #fff; color: var(--xl-sel); font-weight: 700; box-shadow: inset 0 -3px 0 var(--xl-sel); }
.xl-status { margin-left: auto; display: flex; align-items: center; padding: 0 0.875rem; font-size: var(--text-meta); color: #5F5F5A; }

/* Print previews (A4 landscape payroll, A5 payslips) */
body.print { background: #D9D6CF; }
.print-bar { position: sticky; top: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0.625rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line-strong); box-shadow: var(--sh-1); }
.print-bar .hint { max-width: 32rem; }
.paper-stage { padding: 1.5rem 0 3rem; display: grid; justify-content: center; gap: 1.5rem; }
.paper { background: #fff; color: #000; box-shadow: 0 2px 10px rgba(30, 25, 18, 0.25); position: relative; font-family: var(--font-ui); }
.paper.a4-land { width: 297mm; min-height: 210mm; padding: 10mm 10mm 12mm; }
.paper.a4-port { width: 210mm; min-height: 297mm; padding: 0; display: grid; grid-template-rows: 1fr 1fr; }
.pr-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1rem; margin-bottom: 4mm; }
.pr-org { font-size: 9pt; line-height: 1.35; }
.pr-org strong { display: block; font-size: 10pt; text-transform: uppercase; }
.pr-title { text-align: center; }
.pr-title h1 { font-family: var(--font-display); font-weight: 600; font-size: 16pt; letter-spacing: 0.04em; text-transform: uppercase; }
.pr-title p { font-size: 9.5pt; margin-top: 1mm; }
.pr-mark { justify-self: end; }
.pr-mark .stamp { font-size: 13pt; color: #000; background: transparent; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #000; }
.pr-tbl { width: 100%; border-collapse: collapse; font-size: 7.6pt; line-height: 1.2; }
.pr-tbl th, .pr-tbl td { border: 0.6pt solid #000; padding: 1.1mm 1mm; }
.pr-tbl thead th { font-weight: 700; text-align: center; vertical-align: middle; background: #fff; }
.pr-tbl td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-tbl td.name { white-space: nowrap; }
.pr-tbl td.sign { width: 22mm; }
.pr-tbl tr.tot td { font-weight: 700; border-top: 1.2pt solid #000; }
.pr-foot { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 6mm; font-size: 9pt; }
.pr-foot strong { display: block; }
.pr-foot em { display: block; font-style: italic; font-size: 8pt; margin-bottom: 14mm; }
.pr-note { font-size: 8pt; margin-top: 2mm; }
.slip { padding: 8mm 12mm; border-bottom: 0.8pt dashed #000; display: flex; flex-direction: column; }
.slip:last-child { border-bottom: 0; }
.slip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4mm; border-bottom: 1.2pt solid #000; padding-bottom: 2mm; }
.slip-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 13pt; text-transform: uppercase; letter-spacing: 0.04em; }
.slip-head p { font-size: 8.5pt; }
.slip-who { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 6mm; margin: 2.5mm 0; font-size: 9pt; }
.slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; font-size: 8.6pt; }
.slip-cols h3 { font-size: 9pt; font-weight: 700; border-bottom: 0.6pt solid #000; padding-bottom: 0.8mm; margin-bottom: 1mm; }
.slip-cols dl { display: grid; grid-template-columns: 1fr auto; gap: 0.6mm 2mm; margin: 0; }
.slip-cols dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.slip-cols .sum { font-weight: 700; border-top: 0.6pt solid #000; padding-top: 0.6mm; }
.slip-net { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; border-top: 1.2pt solid #000; border-bottom: 1.2pt solid #000; padding: 1.6mm 0; font-size: 11pt; font-weight: 700; }
.slip-sign { display: flex; justify-content: space-between; margin-top: 2mm; font-size: 8.5pt; }
.slip.is-blank { display: grid; place-items: center; color: #666; font-size: 9pt; font-style: italic; }

@media print {
  @page { margin: 0; }
  body.print { background: #fff; }
  .print-bar, .no-print { display: none !important; }
  .paper-stage { padding: 0; gap: 0; }
  .paper { box-shadow: none; page-break-after: always; }
}

/* ==========================================================================
   Login (S1) — the one screen with room for the brand
   ========================================================================== */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem;
  background-color: var(--kraft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--kraft-ink); border-right: 1px solid var(--kraft-line);
}
.login-art .brand { padding: 0; }
.carton-print { align-self: flex-start; max-width: 30rem; border: 3px solid var(--kraft-ink); padding: 1.25rem 1.5rem 1.375rem; position: relative; }
.carton-print::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--kraft-ink); pointer-events: none; }
.carton-print h1 { font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: 1.02; letter-spacing: -0.005em; text-transform: uppercase; }
.carton-print .lines { margin-top: 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.04em; }
.carton-print .lines dt { color: var(--kraft-ink-2); }
.carton-print .lines dd { margin: 0; font-weight: 600; }
.carton-marks { display: flex; gap: 1.25rem; align-items: center; color: var(--kraft-ink); }
.carton-marks svg { width: 2.5rem; height: 2.5rem; }
.carton-marks span { font-size: var(--text-meta); color: var(--kraft-ink-2); max-width: 22rem; }
.login-form { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: var(--bg); }
.login-card { width: 100%; max-width: 25rem; }
.login-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; }
.login-card .lead { margin-top: 0.375rem; color: var(--ink-3); }
.login-card form { margin-top: 1.5rem; display: grid; gap: 1rem; }
.login-card .input { min-height: 3rem; font-size: 1.0625rem; }
.pw { position: relative; }
.pw .input { padding-right: 3.25rem; }
.pw button { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 2.875rem; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); border-radius: var(--r-sm); cursor: pointer; }
.pw button:hover { color: var(--ink); background: var(--surface-2); }
.forgot { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; font-size: var(--text-ui); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.forgot .i { color: var(--info); margin-top: 0.125rem; }
.login-foot { margin-top: 1.75rem; font-size: var(--text-meta); color: var(--ink-3); text-align: center; }

/* ==========================================================================
   Mockup index (index.html only)
   ========================================================================== */
.mk-index { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.mk-index h1 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; }
.mk-index .lead { margin-top: 0.5rem; color: var(--ink-2); max-width: 52rem; line-height: var(--lh-body); }
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.mk-grid .panel-head { min-height: 0; }
.mk-grid > .panel + .panel { margin-top: 0; }
.mk-grid > .panel { align-self: start; }
.mk-list { list-style: none; }
.mk-list > li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--line); }
.mk-list > li:last-child { border-bottom: 0; }
.mk-list .sid { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-meta); color: var(--ink-2); }
.mk-list a.name { font-weight: 600; color: var(--ink); }
.mk-list .route { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--ink-3); }
.mk-list .vp { font-size: 0.78125rem; color: var(--ink-3); white-space: nowrap; }
.mk-list .states { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--text-meta); }

/* ==========================================================================
   Responsive + motion
   ========================================================================== */
@media (max-width: 1279px) {
  :root { --side-w: 13.5rem; --pad-x: 1.25rem; }
  .cols-2-1 { grid-template-columns: minmax(0, 1fr); }
  .money-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-strip > div:nth-child(3) { border-left: 0; }
  .money-strip > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { padding: 1.25rem var(--gutter) 1.5rem; gap: 1rem; border-right: 0; border-bottom: 1px solid var(--kraft-line); }
  .carton-print { padding: 0.875rem 1rem 1rem; border-width: 2px; }
  .carton-print h1 { font-size: 1.875rem; }
  .carton-print .lines { font-size: 0.9375rem; margin-top: 0.625rem; }
  .carton-marks { display: none; }
  .login-form { place-items: start center; padding: 1.5rem var(--gutter) 2rem; }
  .login-card h2 { font-size: 1.5rem; }
  .ticket { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket > .tk { border-left: 0; border-top: 1px dashed var(--line-strong); }
  .ticket > .tk:nth-child(-n + 2) { border-top: 0; }
  .ticket > .tk:nth-child(even) { border-left: 1px dashed var(--line-strong); }
  .ticket .tk-value { font-size: 1.625rem; }
  .ticket-head + .tk, .ticket-head + .tk + .tk { border-top: 0; }
  .after-list li { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .dl { grid-template-columns: 8rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .sk { background: #ECE9E2; }
}

/* ==========================================================================
   Additions (shared pieces used by several screens)
   ========================================================================== */
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.xuat { display: inline-flex; }
.m-card-flush { padding: 0; overflow: hidden; }
.m-card-flush .low > li { padding: 0.75rem 0.875rem; }
.m-item .tile { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); background: var(--kraft-soft); color: var(--kraft-ink); border: 1px solid #E7D9BF; }
.m-item .tile .i { width: 1.375rem; height: 1.375rem; }
.m-who { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem var(--gutter) 0.75rem; }
.m-who .grow strong { display: block; font-weight: 700; }
.m-who .grow small { display: block; font-size: 0.875rem; color: var(--ink-3); }
.m-who .avatar { width: 2.5rem; height: 2.5rem; }
.m-sec h2 .count-pill { vertical-align: 0.15em; margin-left: 0.25rem; }
.page-sub .i { margin-right: 0.375rem; }
.page-sub > span { gap: 0; }
.m-sec:first-child { margin-top: 1.5rem; }
.m-page > .m-sec:first-child, .m-page > :first-child > .m-sec:first-child { margin-top: 0.25rem; }
.var-stack { display: inline-flex; flex-direction: column; gap: 0.0625rem; line-height: 1.25; }
.var-sub { font-size: var(--text-meta); color: var(--ink-3); white-space: nowrap; }
.dev-none { opacity: 0.45; }
.tbl td.c-sp { white-space: nowrap; }
.tbl-compact th, .tbl-compact td { padding-left: 0.625rem; padding-right: 0.625rem; }
.tbl-compact th:first-child, .tbl-compact td:first-child { padding-left: 1.25rem; }
.tbl-compact th:last-child, .tbl-compact td:last-child { padding-right: 1.25rem; }
/* the kraft column continues below the sticky sidebar on long pages */
.shell { background-image: linear-gradient(90deg, var(--kraft) calc(var(--side-w) - 1px), var(--kraft-line) calc(var(--side-w) - 1px), var(--kraft-line) var(--side-w), transparent var(--side-w)); }
.money-strip.is-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.money-strip.is-2x2 > div:nth-child(odd) { border-left: 0; }
.money-strip.is-2x2 > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.ms-label .stamp { margin-left: auto; }
.stamp-sm { font-size: 0.75rem; padding: 0.0625rem 0.4375rem; border-width: 1.5px; box-shadow: none; letter-spacing: 0.06em; }

/* ---------- Date field (dd/mm/yyyy text + calendar glyph; same on every locale) ---------- */
.date-field { position: relative; display: block; min-width: 0; }
.date-field > .input { padding-right: 2.25rem; font-variant-numeric: tabular-nums; }
.date-field > .i { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--ink-3); pointer-events: none; }
body.phone .date-field > .input { padding-right: 2.75rem; }
body.phone .date-field > .i { right: 0.8125rem; width: 1.25rem; height: 1.25rem; }

/* ---------- Phone: day stepper + day readout (S3, S15) ---------- */
.day-step { display: flex; align-items: stretch; gap: 0.5rem; }
.day-step > .grow { display: block; }
.day-step > .btn-icon { width: 3rem; min-height: 3rem; background: var(--surface); border-width: 1.5px; }
.m-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.m-sum > div { min-width: 0; padding: 0.5rem 0.75rem 0.625rem; border-left: 1px dashed var(--line-strong); }
.m-sum > div:first-child { border-left: 0; }
.m-sum-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.m-sum-value { margin-top: 0.125rem; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.1; white-space: nowrap; }
.m-sum-value .u { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; }
.m-sum-value.is-neg { color: var(--danger); }
.m-sum-sub { font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Phone form pieces (S4, S7, S9) ---------- */
.sheet-search { margin: 0.5rem var(--gutter) 0.5rem; }
.check-lg { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); font-weight: 700; cursor: pointer; }
.check-lg input { margin-top: 0.125rem; }
.check-lg small { display: block; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 400; color: var(--ink-3); }
.check-lg:has(input:checked:not([hidden])) { border-color: var(--danger-line); background: var(--danger-bg); color: #7A1810; }
.line.is-zero .line-res { color: var(--ink-3); }
.line-res .badge { flex: none; }

/* ---------- Desktop entry form (S4 máy tính, S7, S11) ---------- */
.cols-form { grid-template-columns: minmax(0, 1fr) 20rem; }
.form-aside { position: sticky; top: calc(var(--top-h) + 1rem); }
.panel-foot.form-actions { justify-content: flex-end; gap: var(--s-2); }
.tbl-form td { vertical-align: middle; }
.tbl-form .input, .tbl-form .select { min-height: 2rem; padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
.cell-entry { display: flex; align-items: center; gap: 0.25rem; }
.cell-entry > .input { width: 5.5rem; flex: none; }
.cell-entry > .select { width: 5.25rem; flex: none; background-color: var(--surface-2); font-weight: 600; }
.cell-entry > .addon { min-height: 2rem; border-radius: var(--r-sm); }
.cell-entry > .plus { padding: 0 0.125rem; font-weight: 700; color: var(--ink-3); }
.tbl tr.add-row > td { background: var(--surface-2); padding-top: 0.625rem; padding-bottom: 0.625rem; }
.tbl tr.add-row .search { max-width: 34rem; }
.mt-1 { margin-top: var(--s-1); } .mt-5 { margin-top: var(--s-5); } .mt-7 { margin-top: var(--s-7); }
.ov { display: contents; }
.m-top.is-root { padding-left: 0.75rem; gap: 0.625rem; }
.toolbar .field.date { flex: none; width: 10.5rem; min-width: 0; }
.m-sum { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.m-actionbar .sum { align-items: center; }
.sum-main { min-width: 0; }
.sum-main small { display: block; font-size: 0.875rem; color: var(--ink-3); line-height: 1.3; }
.vt-cn { white-space: nowrap; }
/* Desktop batch header: Ngày · Ca · Sản phẩm / Số mẻ · Thu về · Mẻ hỏng, note on the right */
.form-row-me { display: grid; grid-template-columns: 11rem 11rem minmax(0, 24rem) minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; }
.form-row-me .note { grid-column: 4; grid-row: 1 / span 2; }
.form-row-me .note .textarea { min-height: 7.5rem; }
.field-check { padding-top: 1.875rem; }
.form-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); }
.tbl-form th, .tbl-form td { padding-left: 0.5rem; padding-right: 0.5rem; }
.tbl-form th:first-child, .tbl-form td:first-child { padding-left: 0.75rem; }
.tbl-form th:last-child, .tbl-form td:last-child { padding-right: 0.75rem; }
.cell-entry > .input { width: 4.75rem; }
.cell-entry > .select { width: 4.75rem; }

/* ---------- Document detail (S5, S8, S14b): stamp in title, recipe line, cost arithmetic, history ---------- */
.page-title .stamp { margin-left: 0.875rem; vertical-align: 0.2em; }
.recipe-ref { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 var(--s-4); font-size: var(--text-meta); color: var(--ink-2); }
.recipe-ref .i { color: var(--ink-3); }
.ticket:has(+ .ticket-foot) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ticket-foot { display: flex; flex-wrap: wrap; gap: 0.375rem 2rem; padding: 0.625rem 1.125rem; margin-top: -1px; font-size: var(--text-meta); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-top: 1px dashed var(--line-strong); border-radius: 0 0 var(--r-md) var(--r-md); }
.ticket-foot b { color: var(--ink); font-weight: 700; }
.is-voided .tk-value, .is-voided .ticket-foot b { color: var(--void); text-decoration: line-through; text-decoration-thickness: 2px; }
.hist { list-style: none; display: grid; gap: 0.625rem; }
.hist li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.hist time { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--ink-3); white-space: nowrap; }

/* phone read-only lines (S5 điện thoại) */
.ro-lines > li { padding: 0.625rem 0.875rem 0.75rem; }
.ro-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ro-top > strong { font-size: 1.0625rem; white-space: nowrap; }
.ro-bot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font-size: 0.875rem; color: var(--ink-3); }
.ro-bot > :first-child { flex: 1 1 auto; }
.ro-line.is-flagged { background: var(--warn-bg); }
.ro-line.is-free { background: var(--surface-2); color: var(--ink-3); }
.m-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.m-doc-meta { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-3); }
.sheet-pad { padding: 0.5rem var(--gutter) 0.75rem; display: grid; gap: 0.875rem; }
body.phone .toast { top: 4.25rem; bottom: auto; width: max-content; max-width: calc(100vw - 2rem); }
.cols > * + * { margin-top: 0; }
body.phone .toast { top: auto; bottom: 5.75rem; }

/* ---------- Stock list (S6) ---------- */
.ng-cell { display: grid; gap: 0.3125rem; min-width: 9.5rem; max-width: 13rem; font-size: var(--text-meta); color: var(--ink-3); }
.tbl tr.is-low > td { background: #FFFBF2; }
.tbl tr.is-low:hover > td { background: #FDF5E4; }
.low-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); }
.low-head p { font-size: var(--text-meta); color: var(--ink-3); }
.section-h { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); }
.section-h > .i { color: var(--warn); }
.chip-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding: 0 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1.5px solid var(--line-field); border-radius: var(--r-pill); cursor: pointer; }
.chip-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inv); }
.chip-toggle[aria-pressed="true"] .count-pill { background: var(--gold); color: var(--ink); }
.m-result { margin: 0.875rem 0 0.5rem; font-size: 0.9375rem; color: var(--ink-3); }
.stock-item { align-items: flex-start; }
.stock-item .lvl { margin-top: 0.5rem; max-width: 12rem; }
.stock-item .end .badge { margin-top: 0.25rem; }

/* ---------- Stock documents (S7a, S8, S10a) ---------- */
.loai { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.loai .i { width: 1rem; height: 1rem; }
.loai-nhap .i { color: var(--ok); }
.loai-xuat .i { color: #9A4A12; }
.loai-xuat-nhap .i { color: var(--gold-ink); }
.seg .count { margin-left: 0.375rem; }
.seg-types { flex-wrap: wrap; }
.tbl td.c-partner { max-width: 15rem; }
.tbl td.c-content { max-width: 24rem; font-size: var(--text-meta); color: var(--ink-2); }

/* ---------- Stock document forms (S7) ---------- */
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid-4 .span-2 { grid-column: span 2; }
.form-grid-4 .span-all { grid-column: 1 / -1; }
.conv-cell .conv + .conv, .conv-cell .conv + .error-text { margin-top: 0.125rem; }
.tbl tr.more-row > td { padding: 0.5rem 0.75rem; font-size: var(--text-meta); font-style: italic; color: var(--ink-3); background: var(--surface-2); }
.tbl tr.is-error > td { background: #FFF8F7; }
.pay { display: grid; gap: 0.875rem; align-content: start; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.linked { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; font-size: var(--text-meta); color: var(--ink-2); }
.linked .i { color: var(--ink-3); }
/* quick-pick reason chips (phone) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.chip { min-height: 2.5rem; padding: 0 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--gold-soft); border-color: var(--gold-edge); }
.cell-entry.wide > .input { width: 7.5rem; }
.cols > .panel + .panel { margin-top: 0; }

/* ---------- Stock-take (S9) ---------- */
.var-info, .is-info { color: var(--info); }
.tk-value.is-info { color: var(--info); }
.center { text-align: center; }
.kk-sum { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.kk-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem 0.75rem; padding: 0.75rem 0.875rem 0.875rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.kk-count { font-size: 0.9375rem; color: var(--ink-2); }
.kk-count b { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; color: var(--ink); margin-right: 0.125rem; }
.kk-at { font-size: 0.875rem; color: var(--ink-3); }
.kk-bar { grid-column: 1 / -1; display: flex; gap: 2px; }
.kk-bar > i { flex: 1 1 0; height: 0.5rem; background: var(--sunk); border-radius: 1px; }
.kk-bar > i.is-on { background: var(--ok); }
.kk-bar > i.is-warn { background: var(--warn-line); }
.kk-list > li { padding: 0.75rem 0.875rem 0.875rem; }
.kk-book { display: grid; justify-items: end; font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; line-height: 1.3; }
.kk-book b { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.kk-entry { display: grid; grid-template-columns: minmax(0, 1fr) 5.25rem minmax(0, 7.75rem); align-items: center; gap: 0.5rem; margin-top: 0.625rem; }
.kk-verdict { display: grid; justify-items: end; gap: 0.25rem; text-align: right; font-size: 0.9375rem; }
.kk-item.is-moved { background: var(--warn-bg); }
.kk-note, .kk-memo, .kk-conv { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.4; }
.kk-note { color: var(--warn); }
.kk-memo { color: var(--ink-2); }
.kk-conv { color: var(--ink-3); }
.kk-conv b { color: var(--ink); }
.kk-note .i, .kk-memo .i { flex: none; margin-top: 0.1875rem; }
.kk-card { align-items: flex-start; }
.kk-card-extra { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
body.phone .kk-result .ticket { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.phone .kk-result .tk { padding: 0.75rem 0.875rem; }
body.phone .kk-result .tk:nth-child(odd) { border-left: 0; }
body.phone .kk-result .tk:nth-child(n + 3) { border-top: 1px dashed var(--line-strong); }
body.phone .kk-result .tk:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kk-allok { display: grid; justify-items: center; text-align: center; gap: 0.375rem; padding: 1.5rem 1rem; }
.kk-allok .empty-ico { background: var(--ok-bg); color: var(--ok); }
.plain-list { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.plain-list > li::marker { color: var(--ink-4); }
.chip { min-height: var(--tap); }
.kk-item.is-todo .kk-entry .input { border-style: dashed; }

/* ---------- Catalogue (S10) ---------- */
.tree { padding: 0.5rem; align-self: start; }
.tree ul { list-style: none; }
.tree ul ul { margin: 0.125rem 0 0.375rem 0.875rem; padding-left: 0.5rem; border-left: 1px solid var(--line); }
.tree a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.25rem; padding: 0.375rem 0.625rem; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; }
.tree a.is-root { font-weight: 700; color: var(--ink); }
.tree a:hover { background: var(--surface-2); color: var(--ink); }
.tree a[aria-current="page"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); color: var(--ink); font-weight: 600; }
.tree-n { font-size: var(--text-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tree-foot { margin: 0.5rem 0.625rem 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--line); font-size: var(--text-meta); color: var(--ink-3); }
.qd-chip { display: inline-flex; align-items: center; padding: 0 0.375rem; font-size: var(--text-meta); font-weight: 600; line-height: 1.375rem; color: var(--kraft-ink); background: var(--kraft-soft); border: 1px solid #E7D9BF; border-radius: var(--r-xs); white-space: nowrap; }
.qd-list { display: grid; gap: 0.5rem; }
.qd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.qd-row .error-text { grid-column: 1 / -1; }
.qd-row .eq, .kk-conv .eq { color: var(--ink-3); font-weight: 700; }
.locked { position: relative; display: block; }
.locked > .i { position: absolute; right: 2.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--lock); pointer-events: none; }
.drawer-foot .left-btn { margin-right: auto; }

/* ---------- Excel import (S10b) ---------- */
.steps { display: flex; list-style: none; margin-bottom: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.steps li { flex: 1 1 0; display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; font-weight: 600; color: var(--ink-3); border-left: 1px dashed var(--line-strong); }
.steps li:first-child { border-left: 0; }
.step-n { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--line-field); border-radius: 50%; font-family: var(--font-display); font-weight: 600; color: var(--ink-2); }
.steps li[aria-current="step"] { color: var(--ink); background: var(--gold-soft); }
.steps li[aria-current="step"] .step-n { background: var(--gold); border-color: var(--gold-edge); color: var(--ink); }
.file-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.file-row + .file-row { margin-top: 0.5rem; }
.file-row > .i { flex: none; width: 1.5rem; height: 1.5rem; color: var(--ok); }
.file-row .grow { flex: 1 1 auto; min-width: 0; }
.file-row strong { display: block; overflow-wrap: anywhere; }
.file-row small { display: block; font-size: var(--text-meta); color: var(--ink-3); }
.ok-txt { color: var(--ok); font-weight: 600; }
.bad-txt { color: var(--danger); font-weight: 600; }
.dropzone { display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; color: var(--ink-2); background: var(--surface-2); border: 1.5px dashed var(--line-field); border-radius: var(--r-md); }
.dropzone > .i { width: 2rem; height: 2rem; color: var(--ink-3); }
mark.cell-bad { padding: 0 0.25rem; font-weight: 600; color: var(--danger); background: var(--danger-bg); border-radius: var(--r-xs); }
.result-head { display: flex; align-items: center; gap: 1rem; }
.result-head .empty-ico { margin: 0; background: var(--ok-bg); color: var(--ok); }
.sub-h { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); }
.err-list { list-style: none; display: grid; gap: 0.5rem; }
.err-list li { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; color: var(--ink); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-sm); }
.err-list .code { font-size: var(--text-meta); color: var(--danger); }
.unit-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.upload-strip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 0.75rem 1.5rem; align-items: center; }
.upload-strip > .files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.upload-strip > .files .file-row + .file-row { margin-top: 0; }
.upload-strip > .alert, .upload-strip > .hint { grid-column: 1 / -1; }
.err-where { font-size: var(--text-meta); font-weight: 700; color: var(--danger); }

/* ---------- Item card + stock ledger (S10a) ---------- */
.item-head { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
.item-stock { display: grid; gap: 0.25rem; align-content: start; padding: 1.125rem 1.25rem 1.25rem; border-right: 1px dashed var(--line-strong); }
.item-stock .lvl { margin-top: 0.5rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.fact { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.fact:nth-child(odd) { border-right: 1px solid var(--line); }
.fact dt { font-size: var(--text-meta); font-weight: 600; color: var(--ink-3); }
.fact dd { margin: 0.25rem 0 0; font-size: var(--text-lg); font-weight: 700; }
.fact dd small { display: block; margin-top: 0.125rem; font-size: var(--text-meta); font-weight: 400; color: var(--ink-3); }
.toolbar.inset { padding: 0.875rem 1.25rem 0; margin-bottom: 0.875rem; }
.toolbar .span-row { flex-basis: 100%; }
.tbl-ledger td.c-date { width: 1%; white-space: nowrap; }
.tbl-ledger tr.day-first > td { border-top: 1px solid var(--line-strong); }
.tbl-ledger tr.is-voided > td:not(.c-date) { color: var(--void); }
.tbl-ledger tr.is-voided .q-in, .tbl-ledger tr.is-voided .row-link { color: var(--void); text-decoration: line-through; }
.tbl-ledger tr.is-reversal > td { background: #FAF8F4; color: var(--void); }
.tbl-ledger tr.is-reversal .c-content { font-style: italic; }
.q-in { font-weight: 600; color: var(--ok); }
.q-out { font-weight: 600; color: #9A4A12; }
.loai-void .i { color: var(--void); }
/* phone stock card */
.m-stock-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.m-stock-top .tk-label, .m-stock-top .tk-value { display: block; }
.m-stock-alt { text-align: right; font-size: 1.0625rem; font-weight: 700; }
.m-stock-alt small { display: block; font-size: 0.875rem; font-weight: 400; color: var(--ink-3); }
.m-stock .lvl { margin-top: 0.75rem; }
.m-day { display: flex; justify-content: space-between; gap: 0.5rem; margin: 1rem 0 0.375rem; font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); }
.m-day span { font-size: 0.875rem; font-weight: 400; color: var(--ink-3); }
.tk-list a { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.625rem 0.875rem; color: inherit; text-decoration: none; }
.tk-time { flex: none; width: 2.75rem; font-size: 0.875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tk-list .grow { flex: 1 1 auto; min-width: 0; }
.tk-list .grow strong { display: block; font-size: 0.9375rem; }
.tk-list .grow small { display: block; font-size: 0.875rem; line-height: 1.35; color: var(--ink-3); }
.tk-list .end { text-align: right; white-space: nowrap; }
.tk-list .end strong { display: block; font-size: 1.0625rem; }
.tk-list .end small { display: block; font-size: 0.8125rem; color: var(--ink-3); }
.tk-row.is-voided .grow strong, .tk-row.is-voided .end strong { color: var(--void); text-decoration: line-through; }
.tk-row.is-reversal { background: #FAF8F4; }

/* ---------- Recipes (S11a, S11) ---------- */
.tbl tr.is-missing > td { background: #FFFBF2; }
.tbl tr.is-changed > td { background: #FFFCF3; }
.tbl tr.is-added > td { background: var(--gold-soft); }
.tbl-form .free-name { font-weight: 600; max-width: 14rem; }
.was { display: block; margin-top: 0.25rem; font-size: var(--text-meta); color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.rc-sec .tbl-form td:nth-child(4) .input { min-width: 12rem; }
.rc-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.rc-empty .search { flex: 1 1 22rem; max-width: 34rem; }
.diff { list-style: none; display: grid; gap: 0.5rem; }
.diff li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: var(--text-meta); color: var(--ink-2); }
.diff-v { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.diff-v s { color: var(--ink-3); text-decoration-color: var(--ink-4); }
.diff-v b { color: var(--ink); }
.diff-v .i { color: var(--ink-3); }
.rc-ticket { margin-top: var(--s-1); }
.tk-value.tk-text { font-size: 1.125rem; line-height: 1.35; white-space: normal; padding-top: 0.25rem; }
/* phone read-only recipe */
.rc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.rc-base { margin-top: 0.625rem; font-size: 1.0625rem; font-weight: 700; }
.rc-kpi { display: flex; gap: 1.25rem; margin-top: 0.375rem; color: var(--ink-3); }
.rc-kpi b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--ink); }
.rc-fold { margin-top: 0.875rem; }
.rc-fold > summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding: 0.375rem 0.75rem; list-style: none; cursor: pointer; font-weight: 700; color: var(--kraft-ink); background: var(--kraft-soft); border: 1px solid #E7D9BF; border-radius: var(--r-sm); }
.rc-fold > summary::-webkit-details-marker { display: none; }
.rc-fold > summary small { margin-left: auto; font-size: 0.875rem; font-weight: 500; color: var(--kraft-ink-2); }
.rc-fold > summary .i { transition: transform var(--t-fast) var(--ease); }
.rc-fold[open] > summary .i { transform: rotate(180deg); }
.rc-fold > .m-list { margin-top: 0.5rem; }
.rc-li { display: flex; align-items: center; gap: 0.75rem; min-height: 3.75rem; padding: 0.625rem 0.875rem; }
.rc-li .grow { flex: 1 1 auto; min-width: 0; }
.rc-li .grow strong { display: block; font-size: 1.0625rem; }
.rc-li .grow small { display: block; font-size: 0.875rem; color: var(--ink-3); }
.rc-li .end { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.rc-li .end .u { margin-left: 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-3); }
.rc-list > li.is-free { background: var(--surface-2); }
.rc-list > li.is-free .end { font-size: 1rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .rc-fold > summary .i { transition: none; } }
.tbl tr.add-row .row .search { flex: 1 1 auto; max-width: 30rem; }
.delta-list { display: grid; gap: 0.625rem; margin: 0; }
.delta-list dt { font-size: var(--text-meta); font-weight: 600; color: var(--ink-3); }
.delta-list dd { display: flex; align-items: center; gap: 0.375rem; margin: 0.125rem 0 0; }
.delta-list s { color: var(--ink-3); text-decoration-color: var(--ink-4); }
.delta-list b { font-size: var(--text-lg); }
.delta-list .i { color: var(--ink-3); }
.rc-card .rc-card-top .stamp { flex: none; }

/* ---------- Reports (S12, S12.x) ---------- */
.rep-panel { position: sticky; top: calc(var(--top-h) + 1rem); }
.rep-nav { padding: 0.5rem; }
.rep-group + .rep-group { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid var(--line); }
.rep-label { padding: 0.375rem 0.75rem 0.25rem; font-size: 0.78125rem; font-weight: 700; color: var(--ink-3); }
.rep-nav a small { line-height: 1.3; }
.range { display: flex; align-items: center; gap: 0.375rem; }
.range .date-field { width: 9.5rem; }
.range-sep { color: var(--ink-3); font-weight: 700; }
.period-alt { display: contents; }
.chart-pad { padding: 0.75rem 1.25rem 1rem; }
.chart-head-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1.25rem 0; }
.panel-head .legend { justify-content: flex-end; }
.chart-data .tbl { font-size: var(--text-meta); }
.chart-data .tbl th, .chart-data .tbl td { padding: 0.375rem 0.75rem; }
.chart-data .tbl-scroll { max-height: 18rem; }
/* deviation beams: ranking of loss by product (the .dev beam, report size) */
.beam-chart { --beam-name: 9.5rem; --beam-v: 7.5rem; padding-bottom: 0.5rem; }
.beams { list-style: none; }
.beams-axis { display: grid; grid-template-columns: var(--beam-name) minmax(0, 1fr) var(--beam-v); gap: 0.75rem; padding: 0.75rem 1.25rem 0.375rem; font-size: var(--text-caption); font-weight: 600; color: var(--ink-3); }
.beams-axis > span:nth-child(2) { display: flex; justify-content: space-between; }
.beams > li > a, .beams > li > .beam-row { display: grid; grid-template-columns: var(--beam-name) minmax(0, 1fr) var(--beam-v); align-items: center; gap: 0.75rem; min-height: 2.5rem; padding: 0.25rem 1.25rem; color: var(--ink); text-decoration: none; }
.beams > li > a:hover { background: #FBF8F1; }
.beams > li > a:hover .beam-name { color: var(--link); text-decoration: underline; }
.beam-name { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beam { position: relative; height: 1.25rem; }
.beam::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.beam::after { content: ""; position: absolute; left: 50%; top: -0.25rem; bottom: -0.25rem; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.beam > i { position: absolute; top: 0.1875rem; bottom: 0.1875rem; border-radius: 1px; }
.beam > i.is-under { right: 50%; width: calc(var(--w, 0) * 50%); background: var(--danger); }
.beam > i.is-over { left: 50%; width: calc(var(--w, 0) * 50%); background: var(--ok); }
.beam.is-none::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.beam-v { text-align: right; font-weight: 700; white-space: nowrap; font-size: var(--text-meta); }
/* ranked partners (top 10 phải thu / phải trả) */
.rank { list-style: none; counter-reset: rk; padding: 0.25rem 0 0.5rem; }
.rank > li > a { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; grid-template-areas: "n name v" ". bar bar"; gap: 0.25rem 0.5rem; align-items: center; padding: 0.4375rem 1.25rem; color: var(--ink); text-decoration: none; }
.rank > li > a:hover { background: #FBF8F1; }
.rank > li > a:hover .rank-name { color: var(--link); text-decoration: underline; }
.rank > li > a::before { counter-increment: rk; content: counter(rk); grid-area: n; font-size: var(--text-meta); font-weight: 700; color: var(--ink-3); }
.rank-name { grid-area: name; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-v { grid-area: v; font-weight: 700; white-space: nowrap; }
.rank-bar { grid-area: bar; display: block; height: 0.375rem; background: var(--sunk); border-radius: 1px; }
.rank-bar > i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--c-phai-thu); border-radius: 1px; }
.rank.is-tra .rank-bar > i { background: var(--c-phai-tra); }
/* P&L statement */
.tbl-pl td, .tbl-pl th { padding-top: 0.6875rem; padding-bottom: 0.6875rem; }
.tbl-pl .op { display: inline-block; width: 1.125rem; font-weight: 700; color: var(--ink-3); }
.tbl-pl td.c-line { padding-left: 1.25rem; }
.tbl-pl td.c-line .sub { padding-left: 1.125rem; }
.tbl-pl tr.subtot > td { font-weight: 700; border-top: 1px solid var(--ink-2); background: var(--surface-2); }
.tbl-pl tr.result > td { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); background: var(--surface); }
.tbl-pl tr.result > td .sub { font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 400; }
.tbl-pl tr.ref > td { font-size: var(--text-meta); color: var(--ink-2); background: var(--kraft-soft); border-bottom-color: #E7D9BF; }
.tbl-pl tr.ref .i { color: var(--kraft-ink-2); margin-right: 0.375rem; }
.tbl-pl tr.is-sep > td { border-top: 1px dashed var(--line-strong); }
.tbl-pl td.pct { color: var(--ink-3); font-size: var(--text-meta); }
.lo-label { font-weight: 700; color: var(--danger); }
.lai-label { font-weight: 700; color: var(--ok); }
.beam-na { position: absolute; left: calc(50% + 0.5rem); top: 50%; transform: translateY(-50%); padding: 0 0.25rem; font-size: var(--text-meta); font-weight: 600; font-style: italic; color: var(--ink-3); background: var(--surface); white-space: nowrap; }
.beams > li > a:hover .beam-na { background: #FBF8F1; }
.cols-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.m-sum.is-even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-card .beams-axis { padding-left: 0.875rem; padding-right: 0.875rem; }
.m-card .beams > li > a { padding-left: 0.875rem; padding-right: 0.875rem; gap: 0.5rem; }
.m-card .beam-chart { --beam-name: 6.5rem; --beam-v: 3.75rem; }
.toolbar.is-top { align-items: flex-start; }
.daygrid .wd { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--ink-3); }
.daygrid .rowhead .wd { font-weight: 400; }
.daygrid .stick { position: sticky; left: 0.625rem; display: inline-block; }
.daygrid tr.grp > th { padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: var(--text-meta); }
.grid-wrap.is-phone { max-height: none; border-top: 0; }
body.phone .daygrid .rowhead { min-width: 8.5rem; max-width: 9.5rem; white-space: normal; }
body.phone .daygrid th, body.phone .daygrid td { font-size: 0.875rem; }
/* two-row sticky header (group row + column row) */
.tbl-2h { --grp-h: 1.875rem; }
.tbl-2h thead tr.th-group th { height: var(--grp-h); padding-top: 0; padding-bottom: 0; }
.tbl-2h thead tr.th-group th[rowspan] { vertical-align: bottom; padding-bottom: 0.5rem; text-align: left; }
.tbl-2h thead tr.th-group th.num[rowspan] { text-align: right; }
.tbl-2h thead tr:not(.th-group) th { top: calc(var(--top-h) + var(--grp-h)); }
.tbl-2h thead th.sep, .tbl-2h td.sep { border-left: 1px solid var(--line); }
.tbl tr.sub-grp > td { padding-top: 0.3125rem; padding-bottom: 0.3125rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); background: var(--surface-2); }
.tbl tr.sub-grp > td .muted { font-weight: 400; }
.tbl tr.is-quiet > td { color: var(--ink-3); }
.tbl tr.is-quiet a.row-link { color: var(--ink-2); font-weight: 500; }
.tbl tr.total.grand > td { background: var(--kraft-soft); border-top-color: var(--kraft-ink); }
.tbl-nxt tr.total + tr.total > td { border-top: 0; }
.tbl-nxt tr.total:not(:last-child) > td { border-bottom: 1px solid var(--line-strong); }
.tbl-nxt td.c-name { min-width: 13rem; max-width: 17rem; }
.tbl-nxt .c-code { display: inline-block; min-width: 3.75rem; margin-right: 0.375rem; color: var(--ink-3); }
.tbl-nxt td.c-name .vt-cn { margin-left: 0.25rem; }
.tbl-nxt .sub-in { display: inline; margin-left: 0.375rem; }
.tbl-nxt td.num, .tbl-nxt th.num { padding-left: 0.5rem; padding-right: 0.5rem; }
a.cell-link { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.cell-link:hover { text-decoration-thickness: 2px; }
.tbl-days td.c-date { width: 1%; white-space: nowrap; }
.applied.inset { margin: 0; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); align-items: center; }
/* variance report (S12.5) */
.var-word { font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.var-word.is-over { color: var(--danger); }
.money-over { color: var(--danger); }
.money-under { color: var(--ink-2); }
.tbl tr.is-flag > td { background: #FFFAF7; }
.tbl-var td .badge { white-space: nowrap; }
.tbl-var td.actions .btn { min-width: 6.5rem; justify-content: space-between; }
.norc { list-style: none; margin: 0; padding: 0; }
.norc li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--line); font-size: var(--text-ui); }
.norc li:first-child { border-top: 0; }
.norc li .muted { flex-basis: 100%; font-size: var(--text-meta); }
/* statement summary strip: đầu kỳ · tăng · giảm · cuối kỳ (S12.6, S13a) */
.sum-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line); }
.sum-strip > div { padding: 0.75rem 1.25rem; border-left: 1px dashed var(--line-strong); }
.sum-strip > div:first-child { border-left: 0; }
.sum-strip dt { font-size: var(--text-meta); color: var(--ink-3); }
.sum-strip dd { margin: 0.125rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.sum-strip .is-total { background: var(--surface-2); }
.sum-strip .is-total dd { font-size: 1.5rem; }
.neg-note { color: var(--ink-2); font-weight: 600; }
/* share bar in category tables (S12.7) */
.tbl td.c-share { width: 15rem; white-space: nowrap; }
.share { display: inline-block; vertical-align: middle; width: 10rem; height: 0.5rem; margin-right: 0.625rem; background: var(--sunk); border-radius: 1px; }
.ll-yes { font-weight: 600; color: var(--ink); }
.tbl-lg td.c-share { width: auto; }
.tbl-lg .share { width: 4.5rem; margin-right: 0.5rem; }
.tbl-pl tr.result td.c-content { font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 400; color: var(--ink-2); }
.tbl-pl tr.result td.pct { font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 600; }
.tbl-cat tr.grp > td { padding-top: 0.4375rem; padding-bottom: 0.4375rem; }
.share > i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); min-width: 2px; background: var(--kraft-ink-2); border-radius: 1px; }
.share-v { font-size: var(--text-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.void-amt { color: var(--void); text-decoration: line-through; }
.tbl td.cq { color: var(--ink-2); }
.tbl tr.total.sub-total > td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); background: var(--surface-2); }
/* partner debt list (S13): balance bars scaled to the largest balance, no 100% track */
.tbl-debt td.c-share { width: 11rem; }
.tbl-debt .share { width: 6.5rem; background: none; }
.tbl-debt .share > i { background: var(--kraft-ink-2); }
.tbl-debt td.actions { width: 1%; }
/* a dialog opened over an open drawer or sheet dims that drawer too */
.ov:has(> .drawer, > .sheet):not([hidden]) ~ .ov:has(> .dialog) > .scrim { z-index: calc(var(--z-drawer) + 1); }
/* statement page (S13a): the balance field is wider than the three that explain it */
@media (min-width: 761px) { .ticket-ledger { grid-auto-flow: row; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); } }
.ticket-ledger .tk:not(.tk-main) .tk-value { font-size: 1.5rem; padding-top: 0.375rem; }
p.static { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-height: 2.5rem; margin: 0; padding: 0.375rem 0.75rem; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.hint.words { color: var(--ink-2); }
.after-box { padding: 0.875rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
/* cash book (S14) */
a.tk.tk-link { display: block; color: inherit; text-decoration: none; }
a.tk.tk-link:hover { background: var(--surface-2); }
a.tk.tk-link:hover .tk-label { color: var(--link); }
.ticket > a.tk:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.tbl-money td.c-content .dm { font-weight: 600; color: var(--ink); }
.ll-tag { display: inline-block; margin-left: 0.25rem; padding: 0 0.3125rem; font-size: 0.75rem; font-weight: 600; line-height: 1.125rem; color: var(--kraft-ink); background: var(--kraft-soft); border-radius: var(--r-xs); vertical-align: 1px; }
.tbl td.cq-span { text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tbl td.cq-span .q-sub { text-align: center; }
.result-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.75rem 1.25rem; font-size: var(--text-meta); color: var(--ink-2); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.result-note .i { flex: none; margin-top: 0.125rem; color: var(--info); }
/* voucher form (S14a): the form on the left, what saving will do on the right */
.cols-form-wide { grid-template-columns: minmax(0, 1fr) 24rem; }
@media (max-width: 1100px) { .cols-form-wide { grid-template-columns: minmax(0, 1fr); } }
.warn-text { display: flex; gap: 0.375rem; align-items: flex-start; font-size: var(--text-meta); font-weight: 600; color: var(--warn); }
.input-money .input { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; height: 3rem; }
.check-lg.check-info:has(input:checked) { border-color: var(--info-line); background: var(--info-bg); color: var(--ink); }
.vp { position: sticky; top: calc(var(--top-h) + var(--s-4)); padding: 0; overflow: hidden; }
.vp-head { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.75rem 1.25rem; font-size: var(--text-meta); font-weight: 700; color: var(--kraft-ink); background: var(--kraft-soft); border-bottom: 1px dashed var(--kraft-ink-2); }
.vp-amount { display: grid; gap: 0.125rem; padding: 1rem 1.25rem 1.125rem; border-bottom: 1px dashed var(--line-strong); }
.vp-amount strong { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.vp-amount strong .u { margin-left: 0.25rem; font-family: var(--font-ui); font-size: 1rem; color: var(--ink-3); }
.vp-words { font-size: var(--text-meta); color: var(--ink-2); }
.vp-label { margin: 0; font-size: var(--text-meta); font-weight: 600; color: var(--ink-3); }
.vp-body { display: grid; gap: 0.75rem; padding: 1rem 1.25rem; }
.vp-moves { display: grid; gap: 0.75rem; margin: 0; }
.vp-moves > div { display: grid; gap: 0.125rem; }
.vp-moves dt { font-size: var(--text-meta); color: var(--ink-2); }
.vp-moves dd { margin: 0; }
.vp-moves dd.move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-variant-numeric: tabular-nums; }
.vp-moves .was { display: inline; margin: 0; font-size: inherit; color: var(--ink-3); text-decoration: none; }
.vp-moves .move .i { align-self: center; color: var(--ink-3); }
.vp-moves .move b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.move-word { font-size: var(--text-meta); font-weight: 700; color: var(--ink-2); }
.vp-moves .move b.is-neg + .move-word { color: var(--danger); }
.vp-ll { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: var(--text-meta); color: var(--ink-2); }
.vp-ll .i { flex: none; margin-top: 0.125rem; color: var(--kraft-ink-2); }
.vp-status { display: flex; gap: 0.5rem; align-items: center; margin: 0; padding: 0.75rem 1.25rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--line); }
.vp-status.is-ok { color: var(--ok); background: var(--ok-bg); border-top-color: var(--ok-line); }
.vp-status.is-warn { color: var(--warn); background: var(--warn-bg); border-top-color: var(--warn-line); }
.vp-status.is-block { color: var(--danger); background: var(--danger-bg); border-top-color: var(--danger-line); }
.vp.vp-doc { position: static; }
.vp-doc .panel-body .dl { margin: 0; }
.linked:has(> .linked-t) { align-items: flex-start; flex-wrap: nowrap; }
.linked > .linked-t { flex: 1 1 0; min-width: 0; }
.linked:has(> .linked-t) > .i { margin-top: 0.125rem; flex: none; }
.ll-yes, .ll-no { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.ll-no { color: var(--ink-2); }
.ll-no .i { color: var(--ink-3); }
.switch.is-disabled { color: var(--ink-3); cursor: not-allowed; }
.switch.is-disabled input { cursor: not-allowed; opacity: 0.6; }
.dialog-head .ico.is-info { background: var(--info-bg); color: var(--info); }
/* daily attendance (S15): one row per worker, only exceptions get touched; targets ≥ 44px */
.ticket-cc .tk { padding: 0.75rem 1rem 0.875rem; }
.ticket-cc .tk-value { font-size: 1.75rem; }
.cc-group { margin-top: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cc-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: 0.625rem 1.25rem; background: var(--kraft-soft); border-bottom: 1px solid #E7D9BF; border-radius: var(--r-md) var(--r-md) 0 0; }
.cc-head h2 { margin: 0 auto 0 0; font-size: var(--text-ui); font-weight: 700; color: var(--kraft-ink); }
.cc-head h2 .muted { font-weight: 400; color: var(--kraft-ink-2); }
.cc-list { list-style: none; margin: 0; padding: 0; }
.cc-row { display: grid; grid-template-columns: minmax(14rem, 1fr) auto 9.5rem auto; align-items: center; gap: 0.375rem 1.25rem; padding: 0.375rem 1.25rem; border-top: 1px solid var(--line); }
.cc-list > .cc-row:first-child { border-top: 0; }
.cc-row.is-changed { background: var(--gold-soft); }
.cc-name { min-width: 0; }
.cc-name strong { display: block; font-weight: 600; }
.seg-cc > button { min-height: var(--tap); padding: 0 0.75rem; font-size: 0.875rem; }
/* the default answer stays quiet, the exceptions carry colour */
.seg-cc > button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-3); }
.seg-cc > button.cc-nua[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 2px var(--warn); }
.seg-cc > button.cc-P[aria-pressed="true"] { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 2px var(--info); }
.seg-cc > button.cc-KP[aria-pressed="true"] { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.cc-meal .chip-toggle[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.cc-meal .chip-toggle[aria-pressed="false"] { border-style: dashed; color: var(--ink-3); }
.cc-row.is-group .cc-meal .chip-toggle[aria-pressed="true"] + .chip-toggle[aria-pressed="true"], .cc-row .cc-meal .chip-toggle[aria-pressed="true"]:nth-child(2) { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.cc-tc .input-group .input { height: var(--tap); }
.cc-tc .addon { font-size: 0.8125rem; }
.cc-meal { display: flex; gap: 0.375rem; }
.cc-meal .chip-toggle { padding: 0 0.75rem; font-size: 0.875rem; }
.cc-note { grid-column: 2 / -1; margin: -0.125rem 0 0; font-size: var(--text-meta); color: var(--kraft-ink-2); }
.cc-row .error-text { margin-top: 0.25rem; }
.cc-row.is-group .cc-tc .input { background: var(--info-bg); }
.seg-cc > button:disabled { cursor: default; color: var(--ink-3); }
.seg-cc > button:disabled[aria-pressed="true"] { color: var(--ink-2); }
.chip-toggle:disabled { cursor: default; opacity: 0.75; }
/* monthly attendance grid (S15a): the only direct-edit grid. Frozen name column, frozen totals,
   frozen day header and day-sum row; compact 40px day cells with corner marks for overtime and supper */
.toolbar-cc { align-items: center; gap: var(--s-3) var(--s-5); }
.cc-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); }
.cc-legend .tc { min-width: 1.375rem; height: 1.25rem; font-size: 0.75rem; }
.cc-legend .lg-ot { position: relative; display: inline-grid; place-items: center; width: 1.625rem; height: 1.25rem; font-size: 0.75rem; font-weight: 700; }
.cc-legend .lg-ot .ot { position: absolute; top: -0.125rem; right: 0; margin: 0; font-size: 0.625rem; vertical-align: 0; }
.cc-legend .lg-meal { position: relative; display: inline-block; width: 1rem; height: 1.25rem; }
.cc-legend .lg-meal .meal { position: absolute; bottom: 0.1875rem; right: 0.125rem; margin: 0; }
.cc-off { display: inline-block; width: 1.25rem; height: 0.875rem; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--sunk) 4px 8px); }
.daygrid-cc .rowhead { min-width: 12rem; max-width: 12rem; }
.daygrid-cc .rh-code { float: right; margin-left: 0.5rem; font-size: 0.75rem; font-weight: 400; line-height: 1.6; color: var(--ink-3); }
.daygrid-cc thead th:not(.rowhead) { min-width: 2.5rem; padding-inline: 0.125rem; }
.daygrid-cc tbody td:not(.tot) { position: relative; min-width: 2.5rem; width: 2.5rem; padding: 0; text-align: center; }
.daygrid-cc td.cell { padding: 0; cursor: default; }
.daygrid-cc td.cell:hover { box-shadow: none; }
.cell-btn { position: relative; display: grid; place-items: center; width: 100%; min-height: 2.125rem; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font: inherit; }
.cell-btn:hover { box-shadow: inset 0 0 0 2px var(--ink-2); }
.cell-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.daygrid-cc .ot { position: absolute; top: 0.125rem; right: 0.1875rem; margin: 0; font-size: 0.625rem; line-height: 1; vertical-align: 0; }
.daygrid-cc .meal { position: absolute; bottom: 0.25rem; right: 0.25rem; margin: 0; }
.daygrid-cc td.is-empty { color: var(--ink-4); }
.daygrid-cc tbody td { height: 2.125rem; }
.daygrid-cc tr.is-row-on > th.rowhead { background: var(--gold-soft); }
.daygrid td.cell.is-conflict { box-shadow: inset 0 0 0 2px var(--warn); background: var(--warn-bg); }
.daygrid td.cell.is-flash, .daygrid td.tot.is-flash { background: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold-line); }
.grid-cc.is-ro td.cell { cursor: default; }
/* frozen totals at the right edge */
.daygrid-cc .tot { position: sticky; z-index: 1; width: 3.25rem; min-width: 3.25rem; max-width: 3.25rem; padding-inline: 0.375rem; border-left-color: var(--line); }
.daygrid-cc .tot.t1 { right: 16.25rem; width: 4rem; min-width: 4rem; max-width: 4rem; border-left: 2px solid var(--ink-3); }
.daygrid-cc .tot.t2 { right: 13rem; }
.daygrid-cc .tot.t3 { right: 9.75rem; }
.daygrid-cc .tot.t4 { right: 6.5rem; }
.daygrid-cc .tot.t5 { right: 3.25rem; }
.daygrid-cc .tot.t6 { right: 0; border-right: 0; }
.daygrid-cc thead th.tot { z-index: 3; text-align: right; }
.daygrid-cc thead th.tot .wd { text-align: right; }
/* frozen day-sum row at the bottom */
.daygrid-cc tfoot th, .daygrid-cc tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; color: var(--ink); }
.daygrid-cc tfoot td:not(.tot) { min-width: 2.5rem; font-size: 0.75rem; text-align: center; padding: 0.375rem 0.125rem; }
.grid-cc { max-height: calc(100vh - 16.5rem); min-height: 22rem; }
.grid-cc.is-phone { max-height: none; min-height: 0; }
.daygrid-cc tfoot td.cn { background: #EFE3CB; }
.daygrid-cc tfoot .rowhead, .daygrid-cc tfoot .tot { z-index: 3; }
.daygrid-cc tfoot .tot.is-flash { background: var(--gold-soft); }
/* the small edit box under the chosen cell */
.cell-pop { position: absolute; top: calc(100% + 0.375rem); left: -0.75rem; z-index: var(--z-dropdown); width: 21rem; padding: 0.875rem 1rem 1rem; text-align: left; white-space: normal; font-size: var(--text-ui); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.cell-pop::before { content: ""; position: absolute; top: -0.4375rem; left: 1.5rem; width: 0.75rem; height: 0.75rem; background: var(--surface); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); }
.cell-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.cell-pop-head p { margin: 0; line-height: 1.3; }
.cell-pop-head b { display: block; font-weight: 700; }
.cell-pop-head span { font-size: var(--text-meta); color: var(--ink-3); }
.seg-2x2 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.seg-2x2 > button { border-right: 0; }
.seg-2x2 > button:nth-child(odd) { border-right: 1px solid var(--line); }
.seg-2x2 > button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.cell-pop-row { display: grid; grid-template-columns: 4.5rem auto 1fr; align-items: center; gap: 0.625rem; margin-top: 0.75rem; }
.cell-pop-row .label { margin: 0; }
.cell-pop-row .input-group { width: 7rem; }
.cell-pop-row .input { height: var(--tap); }
.cell-pop-row .cc-meal { grid-column: 2 / -1; }
.cell-pop-msg { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.875rem 0 0; padding: 0.625rem 0.75rem; font-size: var(--text-meta); font-weight: 600; color: #5A3200; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-sm); }
.cell-pop-msg .i { flex: none; margin-top: 0.0625rem; color: var(--warn); }
.cell-pop-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.cell-pop-foot .hint { margin-right: auto; }
.cell-pop.is-warn { border-color: var(--warn-line); }
.cell-tag { position: absolute; top: calc(100% - 0.125rem); left: 50%; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.5rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--ink-inv); background: var(--danger); border-radius: var(--r-xs); box-shadow: var(--sh-1); }
.cell-tag button { padding: 0; min-height: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }
body.phone .daygrid-cc .rowhead { min-width: 9rem; max-width: 9rem; white-space: normal; }
body.phone .daygrid-cc .rh-code { float: none; display: block; margin: 0; line-height: 1.3; }
.seg-cc > button.cc-du[aria-pressed="true"] { font-weight: 700; }
/* piece rate (S16): lines typed from the team leader's book; batch output shown only as a reference slip */
.tbl-khoan .c-idx { width: 2.25rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tbl-khoan .date-field { width: 8.25rem; }
.tbl-khoan .select { width: 100%; min-width: 11rem; }
.tbl-khoan .cell-entry > .input { width: 5rem; }
.tbl-khoan td .hint { display: block; margin-top: 0.25rem; }
.khoan-ref { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.625rem 0.875rem; font-size: var(--text-meta); color: var(--kraft-ink); background: var(--kraft-soft); border: 1px dashed var(--kraft-line); border-radius: var(--r-sm); }
.khoan-ref .i { flex: none; margin-top: 0.125rem; }
.khoan-side { position: sticky; top: calc(var(--top-h) + 1rem); }
.khoan-people { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.khoan-people > li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px dashed var(--line-strong); }
.kp-name strong { display: block; font-weight: 600; }
.kp-name small, .kp-num small { display: block; font-size: var(--text-meta); color: var(--ink-3); }
.kp-num { text-align: right; white-space: nowrap; font-size: var(--text-meta); color: var(--ink-2); }
.kp-num b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.grp-day { font-weight: 700; }
.tbl-khoan-so td .code { margin-left: 0.25rem; font-size: 0.75rem; color: var(--ink-3); }
/* payroll month (S17): a spreadsheet-like sheet. Frozen name and net-pay columns, frozen two-row head and total row */
.ticket-pay { grid-auto-columns: auto; grid-template-columns: 0.8fr 1.35fr 1fr 1fr 1.25fr; }
.ticket-pay .tk-value { font-size: 1.625rem; }
.ticket-pay .tk-main .tk-value { font-size: var(--text-readout); }
.tk-edit { margin-left: 0.5rem; vertical-align: 0.3em; font-family: var(--font-ui); }
.tk-lock { display: inline-grid; place-items: center; margin-left: 0.5rem; vertical-align: 0.25em; color: var(--lock); }
.cc-edit { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; }
.cc-edit .input-group { width: 7rem; }
.tk-cc .error-text { margin-top: 0.375rem; }
.pay-wrap { overflow: auto; max-height: calc(100vh - 12rem); min-height: 24rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.tbl-pay { --grp-h: 1.875rem; font-size: 0.8125rem; border-collapse: separate; border-spacing: 0; }
.tbl-pay th, .tbl-pay td { padding: 0.4375rem 0.5rem; white-space: nowrap; }
.tbl-pay thead th { position: sticky; top: 0; z-index: 2; }
.tbl-pay thead tr:not(.th-group) th { top: var(--grp-h); min-width: 5.75rem; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.tbl-pay thead tr:not(.th-group) th.cong { min-width: 3rem; }
.tbl-pay thead tr.th-group th { text-align: center; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.tbl-pay thead th.g-cong-tien, .tbl-pay thead th.g-tru, .tbl-pay td.cong-tien:nth-child(5), .tbl-pay th.cong-tien:first-of-type { border-left: 1px solid var(--line-strong); }
.tbl-pay .tru { background: #FBF9F5; }
.tbl-pay thead .tru { background: var(--surface-2); }
.tbl-pay td.sum, .tbl-pay th.sum { background: var(--surface-2); }
.tbl-pay td.sum { font-weight: 700; }
.tbl-pay td.cong-tien.sum, .tbl-pay th.cong-tien.sum { border-right: 1px solid var(--line-strong); }
.tbl-pay .pay-name { position: sticky; left: 0; z-index: 1; min-width: 14rem; max-width: 14rem; text-align: left; white-space: normal; background: var(--surface); border-right: 1px solid var(--line-strong); }
.tbl-pay thead .pay-name { z-index: 3; vertical-align: bottom; background: var(--surface-2); }
.tbl-pay .pay-name small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
.tbl-pay .pay-net { position: sticky; right: 0; z-index: 1; min-width: 8rem; font-weight: 700; font-size: 0.875rem; background: var(--gold-soft); border-left: 2px solid var(--ink-3); }
.tbl-pay thead .pay-net { z-index: 3; vertical-align: bottom; background: #F6E7C4; }
.pay-who { display: inline-flex; align-items: baseline; gap: 0.375rem; padding: 0; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; }
.pay-who b { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.pay-who:hover b { text-decoration-color: var(--ink); }
.pay-who .code { font-size: 0.6875rem; color: var(--ink-3); }
.tbl-pay tr.grp > th { position: static; padding: 0.375rem 0.75rem; font-size: var(--text-meta); text-align: left; background: var(--kraft-soft); color: var(--kraft-ink); border-bottom: 1px solid #E7D9BF; }
.tbl-pay tr.grp .stick { position: sticky; left: 0.75rem; }
.tbl-pay tr.grp .muted { font-weight: 400; color: var(--kraft-ink-2); }
.tbl-pay tbody tr.is-neg-row > .pay-net { background: var(--danger-bg); }
.tbl-pay tbody tr.is-flash > td, .tbl-pay tbody tr.is-flash > th { background: var(--gold-soft); }
.tbl-pay tfoot th, .tbl-pay tfoot td { position: sticky; bottom: 0; z-index: 2; font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--ink); }
.tbl-pay tfoot .pay-name, .tbl-pay tfoot .pay-net { z-index: 3; }
.tbl-pay tfoot .pay-net { background: #F6E7C4; }
.neg-word { font-weight: 700; }
/* explanation drawer: every amount with its arithmetic */
.gt-h { margin: 1.25rem 0 0.375rem; font-size: var(--text-ui); font-weight: 700; }
.gt-h:first-of-type { margin-top: 0.5rem; }
.leaders-calc dt { font-weight: 600; }
.leaders-calc .calc, .gt-net .calc { display: block; font-weight: 400; font-size: var(--text-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.leaders-calc > div { align-items: flex-end; padding: 0.375rem 0; }
.gt-net { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 0.75rem 1rem; font-weight: 700; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-sm); }
.gt-net b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; white-space: nowrap; }
/* adjustments list */
.dc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dc-list > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.dc-list > li.is-flash { background: var(--gold-soft); }
.dc-who { flex: 1 1 auto; min-width: 0; }
.dc-who b { display: block; font-weight: 600; }
.dc-who small { display: block; font-size: var(--text-meta); color: var(--ink-3); }
.dc-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-amt.is-minus { color: var(--danger); }
/* finalise dialog */
.neg-box { margin-top: 1rem; padding: 0.875rem 1rem; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-md); }
.neg-title { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.375rem; font-weight: 700; color: var(--danger); }
.neg-box ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.neg-box .check-lg { background: var(--surface); }
.neg-box .hint { margin-top: 0.5rem; }
.foot-why { margin-right: auto; font-size: var(--text-meta); font-weight: 600; color: var(--ink-2); }
.gt { max-width: 46rem; }
.tbl-pay thead th.g-cong { border-left: 0; }
/* payroll months (S17a): each month a ticket; the month name is the heading */
.month-list { display: grid; gap: var(--s-4); }
.ticket-month { grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-auto-flow: row; }
.ticket-month .ticket-head { gap: 0.75rem 1rem; padding: 0.875rem 1.125rem; color: var(--ink-2); }
.month-name { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.month-meta { margin-right: auto; }
.ticket-month .tk { border-top: 0; }
.ticket-month .tk:nth-child(2) { border-left: 0; }
.ticket-month .tk-value { font-size: 1.5rem; }
.ticket-month .tk:nth-child(2) .tk-value { font-size: var(--text-readout); }
.ticket-month.is-quiet { background: var(--surface-2); }
.ticket-month.is-quiet .month-name { color: var(--ink-2); }
.tk-wide { grid-column: 1 / -1; }
.tk-note { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-meta); color: var(--ink-2); }
/* payroll print (S17b, S17c) */
.paper-set { display: contents; }
.pr-pay { font-size: 7.2pt; }
.pr-pay th { font-size: 6.8pt; line-height: 1.15; }
.pr-pay tr.grp td { padding: 0.8mm 1mm; font-weight: 700; font-size: 7pt; background: #fff; border-top: 1pt solid #000; }
.pr-pay td.b { font-weight: 700; }
.pr-code { font-size: 6.4pt; color: #333; }
.pr-done { margin: 0; font-size: 8.5pt; text-align: right; line-height: 1.35; }
.pr-cont { display: flex; justify-content: space-between; margin-bottom: 3mm; font-size: 8.5pt; }
.pr-page { position: absolute; right: 10mm; bottom: 5mm; margin: 0; font-size: 7.5pt; color: #333; }
.slip-mark .stamp { color: #000; background: transparent; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #000; }
.slip-mark p { margin: 0; font-size: 8.5pt; }
.slip-cols dt.sum, .slip-cols dd.sum { font-weight: 700; border-top: 0.6pt solid #000; padding-top: 0.6mm; }
.slip-words { margin: 1mm 0 0; font-size: 8pt; font-style: italic; }
.print-pick { display: inline-flex; }
.print-pick .select { min-width: 14rem; }
.slip-cols dl { column-gap: 0; }
.slip-cols dd { padding-left: 2mm; }
/* workers (S18, S18a) */
.search-lg { flex: 1 1 22rem; max-width: 28rem; }
.tbl-cn td.c-name .code { margin-left: 0.25rem; font-size: 0.75rem; color: var(--ink-3); }
.tbl-cn td.c-name .sub { display: block; font-size: var(--text-meta); color: var(--ink-3); }
.tbl-cn mark { padding: 0 0.125rem; color: inherit; background: var(--gold-soft); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 2px; }
.kl { display: inline-block; font-weight: 600; }
.kl-thang { color: var(--ink); }
.kl-ngay { color: var(--ink-2); }
.kl-khoan { color: var(--kraft-ink); }
.kl-plus { font-weight: 400; font-size: var(--text-meta); color: var(--ink-3); }
.hint-dup { display: flex; gap: 0.375rem; align-items: flex-start; margin-top: 0.375rem; padding: 0.5rem 0.625rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.hint-dup .i, .hint-ok .i { flex: none; margin-top: 0.125rem; }
.hint-ok { display: flex; gap: 0.375rem; margin-top: 0.75rem; color: var(--ok); font-weight: 600; }
.pay-pick { padding: 0.875rem 1rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.pay-pick.is-invalid { background: var(--danger-bg); border-color: var(--danger-line); }
.pay-pick > .label { display: block; margin-bottom: 0.625rem; }
.pay-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 1rem; }
.pay-or { align-self: center; margin-top: 0.5rem; padding: 0.25rem 0.625rem; font-size: var(--text-meta); font-weight: 700; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-pill); }
.pay-pick .error-text { margin-top: 0.75rem; }
.quit-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 0.875rem; padding: 0.75rem 0.875rem; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-sm); }
.quit-row .hint { margin: 1.625rem 0 0; color: #5A3200; }
.est-side { position: sticky; top: calc(var(--top-h) + 1rem); }
.form-bar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; justify-content: flex-end; gap: var(--s-2); margin: var(--s-5) calc(var(--pad-x) * -1) calc(var(--s-10) * -1); padding: 0.75rem var(--pad-x); background: rgba(243, 242, 238, 0.96); border-top: 1px solid var(--line-strong); }
.tbl-cn td.c-tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.field > .seg { align-self: flex-start; }

/* ==========================================================================
   S19a Người dùng và vai trò
   ========================================================================== */
.avatar-sm { width: 1.875rem; height: 1.875rem; font-size: 0.6875rem; }
.avatar.is-off { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.c-user { display: flex; align-items: center; gap: 0.75rem; min-width: 14rem; }
.c-user strong { font-weight: 700; }
.c-user .badge { margin-left: 0.25rem; }
.tbl-users td.actions .btn + .btn { margin-left: 0.375rem; }
.tbl-users tr.is-quiet .c-user strong { color: var(--ink-2); }
.tbl-perm th.c-perm, .tbl-perm td.c-perm { width: 10rem; text-align: center; }
.tbl-perm td .sub.code { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--ink-3); }
.perm-on { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: var(--r-xs); background: var(--lock-bg); color: var(--lock); }
.perm-on .i { width: 1rem; height: 1rem; stroke-width: 2.4; }
.perm-box { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); cursor: pointer; }
.perm-box:hover { background: var(--surface-2); }
.perm-box input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.perm-box.is-changed { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.dash-list { list-style: none; padding: 0; display: grid; gap: 0.375rem; }
.dash-list li { position: relative; padding-left: 1.125rem; }
.dash-list li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }

/* ==========================================================================
   S19b Cài đặt
   ========================================================================== */
.settings { display: grid; gap: var(--s-5); }
.start-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.start-date { display: flex; align-items: baseline; gap: 0.25rem 0.75rem; flex-wrap: wrap; }
.start-date > .i { align-self: center; width: 1.375rem; height: 1.375rem; color: var(--kraft-ink-2); }
.start-date b { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.start-date span { font-size: var(--text-meta); color: var(--ink-3); }
.chot-row { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.chot-row .field { flex: 0 1 20rem; }
.chot-row > .btn { margin-top: 1.4375rem; }
.note-split { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.625rem 0.875rem; font-size: var(--text-meta); line-height: 1.45; color: var(--ink-2); background: var(--lock-bg); border: 1px solid var(--lock-line); border-radius: var(--r-sm); }
.note-split > .i { flex: none; margin-top: 0.125rem; color: var(--lock); }

/* ==========================================================================
   S19c Nhật ký thay đổi
   ========================================================================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip-sm { min-height: 2.375rem; padding: 0 0.75rem; gap: 0.375rem; font-size: var(--text-meta); }
.chip-sm .i { width: 1rem; height: 1rem; }
body.phone .chip-sm { min-height: var(--tap); font-size: 0.9375rem; }
.m-chips .chip-row { flex-wrap: nowrap; gap: 0.375rem; overflow-x: auto; }
.m-chips .chip-sm { flex: none; padding: 0 0.625rem; }
.tbl-log td { vertical-align: top; }
.tbl-log td.c-when, .tbl-log th:first-child { width: 1%; white-space: nowrap; }
.when-d { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.when-t { display: block; font-size: var(--text-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.c-who { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.act { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; white-space: nowrap; }
.act .i { width: 1rem; height: 1rem; stroke-width: 2.2; }
.act-tao { color: var(--ok); }
.act-huy { color: var(--danger); }
.act-sua { color: var(--info); }
.act-chot { color: var(--lock); }
.c-diff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); gap: 0 0.625rem; align-items: baseline; min-width: 26rem; }
.diff-before { color: var(--ink-3); }
.diff-arrow { color: var(--ink-4); font-weight: 700; }
.diff-after { color: var(--ink); font-weight: 600; }
.toolbar-log .field { min-width: 0; }
.toolbar-log .field:last-child { margin-left: auto; }
.log-cards { list-style: none; padding: 0; display: grid; gap: 0.625rem; }
.log-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.log-card summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.25rem; grid-template-areas: "act when chev" "obj obj chev" "who who chev"; gap: 0.25rem 0.5rem; align-items: center; min-height: var(--tap); padding: 0.75rem 0.875rem; cursor: pointer; border-radius: var(--r-md); }
.log-card summary::-webkit-details-marker { display: none; }
.log-card summary::after { content: ""; grid-area: chev; justify-self: center; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.log-card details[open] summary::after { transform: rotate(-135deg); }
.log-card summary .act { grid-area: act; }
.log-when { grid-area: when; font-size: 0.875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-obj { grid-area: obj; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.log-who { grid-area: who; font-size: 0.875rem; color: var(--ink-3); }
.log-diff { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.375rem 0.75rem; margin: 0; padding: 0.75rem 0.875rem; border-top: 1px dashed var(--line-strong); font-size: 0.9375rem; line-height: 1.4; }
.log-diff dt { color: var(--ink-3); }
.log-diff dd { margin: 0; }
.log-diff dd:last-of-type { font-weight: 600; }
.log-card details > .btn { margin: 0 0.875rem 0.875rem; }

/* ==========================================================================
   S0 Không có quyền — the lock is stamped like a sealed carton
   ========================================================================== */
.denied { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 36rem; margin: 4.5rem auto 0; text-align: center; }
.denied-ico { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: 0.5rem; color: var(--lock); background: var(--surface); border: 2px solid currentColor; border-radius: 3px; box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px currentColor; transform: rotate(-3deg); }
.denied-ico .i { width: 2rem; height: 2rem; stroke-width: 1.9; }
.denied-title { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; }
.denied-url .code { display: inline-block; padding: 0.25rem 0.625rem; font-size: 0.9375rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
.denied > p:not(.hint):not(.denied-url) { max-width: 32rem; color: var(--ink-2); line-height: var(--lh-body); }
.denied-acts { margin-top: 0.75rem; }
body.phone .denied { margin-top: 2rem; }
body.phone .denied-title { font-size: 1.5rem; }
body.phone .denied-acts { align-self: stretch; }

/* ==========================================================================
   S1 Đăng nhập — phone sizing (text ≥ 16 px, 48 px button)
   ========================================================================== */
body.login-page { background: var(--bg); }
@media (max-width: 760px) {
  .login-page .label { font-size: 1rem; color: var(--ink); }
  .login-page .btn-lg { min-height: 3rem; font-size: 1.0625rem; }
  .login-page .forgot { font-size: 1rem; }
  .login-page .alert { font-size: 1rem; }
}
.settings .sub-h { margin-bottom: 0.75rem; font-size: 1.125rem; }
.settings .sub-h .muted { font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 400; color: var(--ink-3); }
.form-bar > .hint { margin-right: auto; align-self: center; }
.page-narrow .form-bar { align-items: center; bottom: 1rem; margin: var(--s-5) 0 calc(var(--s-10) * -1 + 1rem); padding: 0.625rem 0.75rem 0.625rem 1rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.tbl-log td.c-obj { min-width: 15rem; }
.panel-foot .pager { padding: 0; border-top: 0; }

/* ==========================================================================
   S20, S21 — file documents (Excel export, import templates); desktop only
   ========================================================================== */
body.doc { background: var(--bg); }
.doc-page { max-width: 90rem; margin: 0 auto; padding: 1.75rem 2rem 4rem; }
.doc-crumb { display: flex; align-items: center; gap: 0.625rem; font-size: var(--text-meta); font-weight: 600; color: var(--kraft-ink-2); }
.doc-crumb .brand-mark { width: 1.75rem; height: 1.75rem; }
.doc-crumb .brand-mark .i { width: 1.125rem; height: 1.125rem; }
.doc-head h1 { margin-top: 0.75rem; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; }
.doc-head .lead { margin-top: 0.5rem; max-width: 52rem; color: var(--ink-2); line-height: var(--lh-body); }
.doc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.doc-cap { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: var(--text-ui); color: var(--ink-2); }
.doc-cap > .i { flex: none; color: var(--ink-3); }
.doc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-5); margin-top: var(--s-6); align-items: start; }
.doc-cols-guide { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.dl-doc { grid-template-columns: 8.5rem 1fr; gap: 0.625rem 1rem; }
.dl-doc dd { font-weight: 400; color: var(--ink); line-height: 1.45; }
.dl-doc .code { white-space: normal; }
.spec-list { list-style: none; padding: 0; }
.spec-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.875rem 1.25rem; }
.spec-row + .spec-row { border-top: 1px solid var(--line); }
.spec-demo { display: flex; align-items: center; min-height: 2.75rem; }
.spec-t { font-weight: 700; }
.spec-d { margin-top: 0.125rem; font-size: var(--text-meta); line-height: 1.45; color: var(--ink-2); }
.spec-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: var(--text-meta); font-weight: 600; }
.spec-alert { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; font-size: var(--text-meta); font-weight: 700; color: #7A1810; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-sm); }
.spec-alert > .i { flex: none; color: var(--danger); }
.spec-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-meta); font-weight: 700; color: var(--ink-2); }
.spec-note > .i { flex: none; color: var(--ink-3); }
.doc-checks { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.doc-checks li { display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.45; }
.doc-checks .i { flex: none; margin-top: 0.1875rem; color: var(--ok); }
.tbl-guide td { vertical-align: top; }
.tbl-guide td.c-col { width: 1%; font-family: var(--font-mono); font-weight: 600; text-align: center; color: var(--ink-2); }
.tbl-guide td.c-eg { color: var(--ink-2); }
.xl-sheet tr.x-con > td { color: #4A4A44; }
.doc-cols > .panel + .panel { margin-top: 0; }
.xl-sheet tr > td.x-out, .xl-sheet tr > td.x-fill { background: #fff; font-weight: 400; border-top: 0; border-bottom: 1px solid var(--xl-line); }
.tbl-guide td strong { white-space: nowrap; }

/* Phone tap targets ≥ 44 px for links that sit in compact rows */
body.phone .skip { display: inline-flex; align-items: center; min-height: var(--tap); }
body.phone .m-sec a, body.phone .m-sec .btn-link { display: inline-flex; align-items: center; min-height: var(--tap); margin: -0.625rem 0; }
body.phone .low > li { position: relative; }
body.phone .low-name a::after { content: ""; position: absolute; inset: 0; }
body.phone .low-name a:focus-visible { outline: 0; }
body.phone .low-name a:focus-visible::after { outline: 3px solid var(--focus, #1F6FB2); outline-offset: -3px; border-radius: var(--r-sm); }
body.phone .beams > li > a { min-height: var(--tap); }
body.phone .chart-data > summary { min-height: var(--tap); }
body.phone .period .stepper-month button { width: var(--tap); height: var(--tap); }
.xl-spt { --c1: 2.5rem; --c2: 13.5rem; --c3: 17.75rem; }
.xl-spt .fzc3 { border-right: 1px solid #8F8F88; }