/* ==========================================================================
   congthanh — Sổ Tài Chính Dự Án Lam Hồng
   Shared stylesheet for every mockup screen (tokens + all shared components).

   Identity (docs/congthanh/PRODUCT.md "Brand Personality"):
   - A design office's drawing sheet: the KHUNG TÊN (title block) is the one
     signature element. It heads every project table and every printed page.
   - Calm, precise, few ornaments: cool drafting-table grey around white
     sheets, graphite ink, one working colour (mực lam) and one seal colour
     (dấu hồng) used only for the brand mark and signed/official stamps.
   - Input cells, computed cells, cells fed from another table and manual
     overrides are visually distinct everywhere (REQ-027, ASM-044).
   Type: IBM Plex Sans (UI + amounts, tabular figures), IBM Plex Sans
   Condensed (title-block labels, table heads, dense sheet columns),
   IBM Plex Mono (codes and formulas only).
   ========================================================================== */

/* ---------- Fonts (local, no remote request) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/plex-sans-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, 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+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, 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+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, 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+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  /* Surfaces: drafting-table grey around white drawing sheets */
  --c-bg: #edeff1;          /* app surround */
  --c-sheet: #ffffff;       /* sheets, forms, dialogs */
  --c-sheet-2: #f7f8f9;     /* table heads, sheet foot, side panel */
  --c-sunk: #e5e8eb;        /* wells, segmented track, group rows */
  --c-calc: #f2f4f7;        /* computed (tự tính) cells */

  /* Graphite ink (contrast on white: 15.6 / 9.0 / 5.4 : 1) */
  --c-ink: #1c2127;
  --c-ink-2: #434b54;
  --c-ink-3: #5f6770;
  --c-ink-inv: #ffffff;

  /* Rules: light ruling, field borders, the title-block frame */
  --c-rule: #d6dbe0;
  --c-rule-2: #b4bcc4;
  --c-field: #8a939c;
  --c-frame: #2a3038;

  /* Mực lam: the one working colour (links, primary, active, focus) */
  --c-lam: #24467f;         /* white text 9.3:1 */
  --c-lam-hover: #1a3768;
  --c-lam-ink: #1d3b6c;     /* text on lam tints */
  --c-lam-100: #dde6f3;
  --c-lam-50: #eff3f9;
  --c-lam-line: #a3b6d6;

  /* Dấu hồng: brand seal + signed stamps only, never a UI state */
  --c-hong: #b3304a;
  --c-hong-100: #f7e3e7;

  /* States (always paired with a word or icon, never colour alone) */
  --c-ok: #1d6a46;      --c-ok-bg: #e5f1ea;      --c-ok-line: #b3d5c1;
  --c-warn: #855000;    --c-warn-bg: #fcefd6;    --c-warn-line: #ebc787;
  --c-danger: #b42318;  --c-danger-bg: #fbe8e6;  --c-danger-line: #efb8b2;
  --c-lock: #4a5058;    --c-lock-bg: #eceef0;    --c-lock-line: #cbd0d6;
  --c-man: #744700;     --c-man-bg: #fff3d6;     --c-man-line: #e2bb5c;   /* nhập tay */

  /* Type */
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-cond: "IBM Plex Sans Condensed", "Arial Narrow", var(--f-sans);
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --lh: 1.5;

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

  /* Shape */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(28, 33, 39, 0.06);
  --sh-pop: 0 14px 36px rgba(28, 33, 39, 0.18), 0 2px 6px rgba(28, 33, 39, 0.08);
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--c-lam);

  /* Layout */
  --hdr-h: 52px;
  --side-w: 232px;
  --rail-w: 60px;
  --doc-w: 252px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-14);
  line-height: var(--lh);
  color: var(--c-ink);
  background: var(--c-bg);
  font-feature-settings: "tnum" 1;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-22); }
h2 { font-size: var(--fs-16); }
h3 { font-size: var(--fs-15); }
h4 { font-size: var(--fs-14); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--c-lam); text-underline-offset: 2px; }
a:hover { color: var(--c-lam-hover); }
small { font-size: var(--fs-12); }
hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--sp-4) 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code { font-family: var(--f-mono); font-size: 0.9em; letter-spacing: 0; white-space: nowrap; }
.cond { font-family: var(--f-cond); }
.muted { color: var(--c-ink-3); }
.ink2 { color: var(--c-ink-2); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.neg { color: var(--c-danger); }
.pos { color: var(--c-ok); }
.small { font-size: var(--fs-13); }
.tiny { font-size: var(--fs-12); }
.right { text-align: right; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-1); }
.mt-8 { margin-top: var(--sp-2); }
.mt-12 { margin-top: var(--sp-3); }
.mt-16 { margin-top: var(--sp-4); }
.mt-24 { margin-top: var(--sp-6); }

/* ---------- Icons (inline SVG, stroke) ---------- */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.i-sm { width: 15px; height: 15px; vertical-align: -3px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 40px; height: 40px; stroke-width: 1.3; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  font: inherit; font-size: var(--fs-14); font-weight: 500;
  color: var(--c-ink); background: var(--c-sheet);
  border: 1px solid var(--c-rule-2); border-radius: var(--r-2);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--c-sheet-2); border-color: var(--c-ink-3); color: var(--c-ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; }
.btn-primary { background: var(--c-lam); border-color: var(--c-lam); color: var(--c-ink-inv); font-weight: 600; }
.btn-primary:hover { background: var(--c-lam-hover); border-color: var(--c-lam-hover); color: var(--c-ink-inv); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--c-ink-2); }
.btn-quiet:hover { background: var(--c-sunk); border-color: transparent; }
.btn-danger { color: var(--c-danger); border-color: var(--c-danger-line); }
.btn-danger:hover { background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger); }
.btn-danger-solid { background: var(--c-danger); border-color: var(--c-danger); color: #fff; font-weight: 600; }
.btn-danger-solid:hover { background: #941b12; border-color: #941b12; color: #fff; }
.btn-ok { background: var(--c-ok); border-color: var(--c-ok); color: #fff; font-weight: 600; }
.btn-ok:hover { background: #155337; color: #fff; }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--c-lam); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { background: none; color: var(--c-lam-hover); }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-13); }
.btn-lg { min-height: 44px; padding: 0 20px; font-size: var(--fs-15); }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-2) 0 0 var(--r-2); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lbl { font-size: var(--fs-13); font-weight: 500; color: var(--c-ink-2); }
.req::after { content: " *"; color: var(--c-danger); }
.inp, .sel, .txt {
  width: 100%; min-height: 36px; padding: 7px 10px;
  font: inherit; font-size: var(--fs-14); color: var(--c-ink);
  background: var(--c-sheet); border: 1px solid var(--c-field); border-radius: var(--r-2);
}
.txt { min-height: 76px; resize: vertical; line-height: 1.5; }
.sel { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23434b54' 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 10px center; }
.inp:hover, .sel:hover, .txt:hover { border-color: var(--c-ink-2); }
.inp:focus, .sel:focus, .txt:focus { outline: none; border-color: var(--c-lam); box-shadow: 0 0 0 3px var(--c-lam-100); }
.inp[readonly], .inp:disabled, .sel:disabled, .txt:disabled { background: var(--c-calc); color: var(--c-ink-2); border-color: var(--c-rule-2); cursor: not-allowed; }
.inp.num { text-align: right; font-variant-numeric: tabular-nums; }
.inp.is-invalid, .sel.is-invalid { border-color: var(--c-danger); background: #fffafa; box-shadow: 0 0 0 3px var(--c-danger-bg); }
.hint { font-size: var(--fs-12); color: var(--c-ink-3); }
.err { font-size: var(--fs-13); color: var(--c-danger); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }
.err .i { margin-top: 1px; }
.inp-group { display: flex; align-items: stretch; }
.inp-group .inp { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.inp-add { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--c-field); border-left: 0; background: var(--c-sheet-2); color: var(--c-ink-2); font-size: var(--fs-13); border-radius: 0 var(--r-2) var(--r-2) 0; white-space: nowrap; }
.inp-echo { font-size: var(--fs-12); color: var(--c-ok); font-weight: 500; }
.check, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-14); }
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--c-lam); margin: 0; }
.search { position: relative; }
.search .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.search .inp { padding-left: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.fieldset { border: 1px solid var(--c-rule); border-radius: var(--r-2); padding: var(--sp-4); margin: 0; }
.fieldset legend { padding: 0 6px; font-weight: 600; font-size: var(--fs-13); color: var(--c-ink-2); }
.dropzone { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1.5px dashed var(--c-rule-2); border-radius: var(--r-2); background: var(--c-sheet-2); color: var(--c-ink-2); }
.dropzone strong { color: var(--c-ink); }
.dropzone .i-lg { color: var(--c-lam); }
.file-row { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px; border: 1px solid var(--c-rule); border-radius: var(--r-2); background: var(--c-sheet); font-size: var(--fs-13); }
.file-row + .file-row { margin-top: 6px; }
.file-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Segmented control */
.seg { display: inline-flex; border: 1px solid var(--c-rule-2); border-radius: var(--r-2); overflow: hidden; background: var(--c-sheet); }
.seg > a, .seg > button, .seg > label { font: inherit; font-size: var(--fs-13); font-weight: 500; padding: 6px 12px; border: 0; background: none; color: var(--c-ink-2); cursor: pointer; border-right: 1px solid var(--c-rule); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg > :last-child { border-right: 0; }
.seg > .is-on { background: var(--c-lam); color: #fff; }

/* ---------- Status tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: var(--fs-12); font-weight: 600; line-height: 19px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.tag .i { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2; }
.tag-ok { color: var(--c-ok); background: var(--c-ok-bg); border-color: var(--c-ok-line); }
.tag-warn { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-line); }
.tag-danger { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-line); }
.tag-lock { color: var(--c-lock); background: var(--c-lock-bg); border-color: var(--c-lock-line); }
.tag-info { color: var(--c-lam-ink); background: var(--c-lam-50); border-color: var(--c-lam-line); }
.tag-draft { color: var(--c-ink-2); background: var(--c-sheet); border-color: var(--c-rule-2); border-style: dashed; }
.tag-man { color: var(--c-man); background: var(--c-man-bg); border-color: var(--c-man-line); }
.tag-void { color: var(--c-ink-3); background: var(--c-sunk); border-color: var(--c-rule-2); text-decoration: line-through; }
.tag-active { color: #fff; background: var(--c-lam); border-color: var(--c-lam); }
.codechip { display: inline-flex; align-items: center; padding: 0 6px; font-family: var(--f-mono); font-size: 12px; line-height: 20px; border: 1px solid var(--c-rule-2); border-radius: var(--r-1); background: var(--c-sheet); color: var(--c-ink-2); white-space: nowrap; }

/* Stamps: official marks, like the seal on administrative paper */
.stamp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-12); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: var(--r-1); transform: rotate(-1.5deg); }
.stamp-ky { color: var(--c-hong); background: var(--c-hong-100); }
.stamp-khoa { color: var(--c-lock); background: var(--c-lock-bg); }

/* ---------- Bands (page-wide notices) ---------- */
.band { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid; border-left-width: 4px; border-radius: var(--r-2); font-size: var(--fs-14); }
.band .i { margin-top: 2px; }
.band strong { font-weight: 600; }
.band .grow p + p { margin-top: 2px; }
.band-info { background: var(--c-lam-50); border-color: var(--c-lam-line); border-left-color: var(--c-lam); color: var(--c-lam-ink); }
.band-warn { background: var(--c-warn-bg); border-color: var(--c-warn-line); border-left-color: #c58a12; color: #5c3800; }
.band-danger { background: var(--c-danger-bg); border-color: var(--c-danger-line); border-left-color: var(--c-danger); color: #7d1a12; }
.band-ok { background: var(--c-ok-bg); border-color: var(--c-ok-line); border-left-color: var(--c-ok); color: #144a31; }
.band-lock { background: var(--c-lock-bg); border-color: var(--c-lock-line); border-left-color: var(--c-lock); color: var(--c-ink-2); }

/* ---------- Sheets (white panels) ---------- */
.sheet { background: var(--c-sheet); border: 1px solid var(--c-rule); border-radius: var(--r-2); box-shadow: var(--sh-1); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 16px; border-bottom: 1px solid var(--c-rule); min-height: 50px; }
.sheet-head h2 { font-size: var(--fs-15); }
.sheet-head .sub { font-size: var(--fs-13); color: var(--c-ink-3); font-weight: 400; }
.sheet-body { padding: 16px; }
.sheet-foot { padding: 10px 16px; border-top: 1px solid var(--c-rule); background: var(--c-sheet-2); border-radius: 0 0 var(--r-2) var(--r-2); font-size: var(--fs-13); color: var(--c-ink-3); }
.sheet-flush > .sheet-body { padding: 0; }
.sec-title { font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); margin-bottom: var(--sp-2); }

/* ---------- Definition list ---------- */
.dl { display: grid; grid-template-columns: 168px 1fr; gap: 8px 16px; margin: 0; }
.dl dt { color: var(--c-ink-3); font-size: var(--fs-13); }
.dl dd { margin: 0; font-weight: 500; }

/* ==========================================================================
   App shell (office, ≥1280px)
   ========================================================================== */
body.dk { min-width: 1280px; }
.hdr {
  position: sticky; top: 0; z-index: 40;
  height: var(--hdr-h); display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5) 0 0; background: var(--c-sheet); border-bottom: 1px solid var(--c-rule-2);
}
.brand { display: flex; align-items: center; gap: 10px; width: var(--side-w); height: 100%; padding: 0 16px; text-decoration: none; color: var(--c-ink); border-right: 1px solid var(--c-rule); flex: none; }
.is-hoso .brand { width: calc(var(--rail-w) + var(--doc-w)); }
.seal { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--c-hong); color: #fff; font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: .02em; border-radius: var(--r-1); box-shadow: inset 0 0 0 2px var(--c-hong), inset 0 0 0 3px rgba(255,255,255,.55); }
.brand-name { line-height: 1.15; }
.brand-name strong { display: block; font-size: var(--fs-14); font-weight: 600; letter-spacing: -0.01em; }
.brand-name small { display: block; font-size: var(--fs-12); color: var(--c-ink-3); }
.hdr-search { width: 380px; }
.hdr-search .inp { min-height: 34px; background: var(--c-sheet-2); border-color: var(--c-rule-2); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.lockchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--c-ink-2); padding: 4px 10px; border: 1px solid var(--c-lock-line); background: var(--c-lock-bg); border-radius: var(--r-pill); text-decoration: none; }
.lockchip:hover { color: var(--c-ink); }
.hdr-date { font-size: var(--fs-13); color: var(--c-ink-3); }
.who { display: flex; align-items: center; gap: 10px; padding-left: var(--sp-4); border-left: 1px solid var(--c-rule); }
.who-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-lam-100); color: var(--c-lam-ink); font-weight: 600; font-size: 12px; }
.who-name { line-height: 1.2; }
.who-name strong { display: block; font-size: var(--fs-13); font-weight: 600; }
.who-name small { color: var(--c-ink-3); }

.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--hdr-h));
  background: linear-gradient(to right, var(--c-sheet) 0, var(--c-sheet) calc(var(--side-w) - 1px), var(--c-rule) calc(var(--side-w) - 1px), var(--c-rule) var(--side-w), transparent var(--side-w)); }
.layout.is-hoso { grid-template-columns: var(--rail-w) var(--doc-w) minmax(0, 1fr);
  background: linear-gradient(to right, var(--c-sheet) 0, var(--c-sheet) calc(var(--rail-w) - 1px), var(--c-rule) calc(var(--rail-w) - 1px), var(--c-rule) var(--rail-w), var(--c-sheet-2) var(--rail-w), var(--c-sheet-2) calc(var(--rail-w) + var(--doc-w) - 1px), var(--c-rule) calc(var(--rail-w) + var(--doc-w) - 1px), var(--c-rule) calc(var(--rail-w) + var(--doc-w)), transparent calc(var(--rail-w) + var(--doc-w))); }

/* Global navigation (light, ruled — not a dark admin sidebar) */
.side { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); overflow-y: auto; background: var(--c-sheet); border-right: 1px solid var(--c-rule); display: flex; flex-direction: column; }
.nav { padding: 10px 10px 16px; flex: 1; }
.nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-rule); }
.nav-label { padding: 0 10px 4px; font-family: var(--f-cond); font-size: var(--fs-12); font-weight: 500; color: var(--c-ink-3); }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; color: var(--c-ink-2); text-decoration: none; border-radius: var(--r-2); font-size: var(--fs-14); position: relative; }
.nav a .i { color: var(--c-ink-3); }
.nav a:hover { background: var(--c-sheet-2); color: var(--c-ink); }
.nav a.is-on { background: var(--c-lam-50); color: var(--c-lam-ink); font-weight: 600; }
.nav a.is-on::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; background: var(--c-lam); border-radius: 0 2px 2px 0; }
.nav a.is-on .i { color: var(--c-lam); }
.nav .count { margin-left: auto; font-size: var(--fs-12); font-weight: 600; color: var(--c-danger); background: var(--c-danger-bg); border-radius: var(--r-pill); padding: 0 7px; line-height: 18px; }
.side-foot { padding: 12px 16px; border-top: 1px solid var(--c-rule); font-size: var(--fs-12); color: var(--c-ink-3); }
.side-foot a { color: var(--c-ink-2); }

/* Rail (global sections, icon only, used inside a project file) */
.rail { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); background: var(--c-sheet); border-right: 1px solid var(--c-rule); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 2px; }
.rail a { width: 44px; height: 40px; display: grid; place-items: center; color: var(--c-ink-3); border-radius: var(--r-2); text-decoration: none; position: relative; }
.rail a:hover { background: var(--c-sheet-2); color: var(--c-ink); }
.rail a.is-on { background: var(--c-lam-50); color: var(--c-lam); }
.rail hr { width: 28px; margin: 6px 0; }

/* Project file index: the register of sheets (danh mục bảng), in the old workbook order */
.doc { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); overflow-y: auto; background: var(--c-sheet-2); border-right: 1px solid var(--c-rule); display: flex; flex-direction: column; }
.doc-top { padding: 12px 14px 12px; border-bottom: 1px solid var(--c-rule); background: var(--c-sheet); }
.doc-back { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); color: var(--c-ink-3); text-decoration: none; }
.doc-back:hover { color: var(--c-lam); }
.doc-name { margin-top: 6px; font-weight: 600; font-size: var(--fs-14); line-height: 1.3; }
.doc-cts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.doc-list { list-style: none; padding: 6px 0 16px; }
.doc-list li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0; min-height: 34px; padding: 0 12px 0 0; text-decoration: none; color: var(--c-ink-2); font-size: var(--fs-13); border-left: 3px solid transparent; }
.doc-list li a:hover { background: var(--c-sheet); color: var(--c-ink); }
.doc-list .no { font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-13); color: var(--c-ink-3); text-align: right; padding-right: 10px; border-right: 1px solid var(--c-rule); align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.doc-list .nm { padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list .st { display: inline-flex; color: var(--c-ink-3); }
.doc-list .st .i { width: 14px; height: 14px; }
.doc-list li a.is-on { background: var(--c-sheet); color: var(--c-lam-ink); font-weight: 600; border-left-color: var(--c-lam); }
.doc-list li a.is-on .no { color: var(--c-lam); }
.doc-list li a.is-ro .nm::after { content: " (xem)"; color: var(--c-ink-3); font-weight: 400; }
.doc-sep { height: 1px; background: var(--c-rule); margin: 6px 12px 6px 52px; }

/* Main column */
.main { min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-8); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--c-ink-3); margin-bottom: 6px; }
.crumbs a { color: var(--c-ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--c-lam); text-decoration: underline; }
.crumbs .sep { color: var(--c-rule-2); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.page-head h1 { font-size: var(--fs-22); }
.page-head .lede { margin-top: 4px; color: var(--c-ink-3); font-size: var(--fs-14); max-width: 72ch; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   KHUNG TÊN — the title block (signature element)
   Heads every project table and printed page, like the title block of a
   drawing sheet: fixed fields in ruled cells, field label above the value.
   ========================================================================== */
.tb { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); border: 1.5px solid var(--c-frame); background: var(--c-sheet); border-radius: var(--r-1); }
.tb-cell { padding: 7px 12px 8px; border-left: 1px solid var(--c-frame); min-width: 0; }
.tb-cell:first-child { border-left: 0; }
.tb-lbl { display: block; font-family: var(--f-cond); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); line-height: 1.3; }
.tb-val { display: block; margin-top: 2px; font-size: var(--fs-14); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-val.big { font-size: var(--fs-18); }
.tb-sub { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sheet { display: flex; align-items: baseline; gap: 8px; }
.tb-sheet .no { font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-22); line-height: 1; color: var(--c-ink); }
.tb-cell.is-active .tb-val { color: var(--c-lam-ink); }
.tb + .lanbar { margin-top: 12px; }

/* Version bar ("lần"): one is "đang dùng", locked ones carry a lock */
.lanbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lans { display: inline-flex; align-items: stretch; border: 1px solid var(--c-rule-2); border-radius: var(--r-2); background: var(--c-sheet); overflow: hidden; }
.lan { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--fs-13); color: var(--c-ink-2); text-decoration: none; border-right: 1px solid var(--c-rule); white-space: nowrap; }
.lan:last-child { border-right: 0; }
.lan:hover { background: var(--c-sheet-2); color: var(--c-ink); }
.lan.is-on { background: var(--c-lam-50); color: var(--c-lam-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--c-lam); }
.lan .use { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--c-ok); }
.lan .use .i { width: 13px; height: 13px; stroke-width: 2.2; }
.lan .lk .i { width: 13px; height: 13px; color: var(--c-lock); }
.lanbar .spacer { flex: 1; }

/* Cell legend */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-12); color: var(--c-ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 22px; height: 14px; border-radius: 2px; display: inline-block; border: 1px solid var(--c-rule-2); }
.sw-in { background: var(--c-sheet); border-color: var(--c-field); }
.sw-calc { background: var(--c-calc); }
.sw-src { background: var(--c-sheet); border-color: var(--c-lam-line); border-style: dashed; }
.sw-man { background: var(--c-man-bg); border-color: var(--c-man-line); }

/* Source line ("Lấy từ Khái toán – Lần 2 (đang dùng)") */
.srcline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-13); color: var(--c-ink-2); }
.srcline a { display: inline-flex; align-items: center; gap: 4px; }

/* ==========================================================================
   Tables
   ========================================================================== */
.tbl-wrap { overflow: auto; }
.tbl-frame { overflow: auto; border: 1px solid var(--c-rule); border-radius: var(--r-2); background: var(--c-sheet); max-height: none; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.tbl th, .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--c-rule); text-align: left; vertical-align: middle; background: var(--c-sheet); }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--c-sheet-2); font-family: var(--f-cond); font-size: var(--fs-13); font-weight: 600; color: var(--c-ink-2); border-bottom: 1px solid var(--c-rule-2); white-space: nowrap; line-height: 1.25; }
.tbl thead th .col { display: block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; color: var(--c-ink-3); margin-top: 1px; }
.tbl thead tr.sup th { border-bottom: 1px solid var(--c-rule); text-align: center; }
.tbl thead th.num { text-align: right; }
.tbl tbody tr:hover > td { background: var(--c-lam-50); }
.tbl tr.is-sel > td { background: var(--c-lam-50); box-shadow: inset 0 0 0 0 transparent; }
.tbl tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 var(--c-lam); }
.tbl tr.is-void > td { color: var(--c-ink-3); }
.tbl tr.is-void > td.num, .tbl tr.is-void .strike { text-decoration: line-through; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.ctr, .tbl th.ctr { text-align: center; }
.tbl td.wrap { white-space: normal; }
.tbl .sub { display: block; font-size: var(--fs-12); color: var(--c-ink-3); font-weight: 400; }
.tbl a.rowlink { color: inherit; text-decoration: none; }
.tbl a.rowlink:hover { color: var(--c-lam); text-decoration: underline; }
.tbl a.amt { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--c-ink-3); }
.tbl a.amt:hover { color: var(--c-lam); border-bottom-color: var(--c-lam); }
.tbl .acts { display: flex; justify-content: flex-end; gap: 2px; }
.tbl-compact th, .tbl-compact td { padding: 6px 10px; }
.tbl-dense { font-size: var(--fs-13); }
.tbl-dense th, .tbl-dense td { padding: 5px 8px; }
.tbl-cond td { font-family: var(--f-cond); font-weight: 500; font-size: var(--fs-14); }
.tbl-cond td.txtcell { font-family: var(--f-sans); font-weight: 400; font-size: var(--fs-13); }

/* Group, subtotal, total rows — totals close with a double rule as on a bill of quantities */
.tbl tr.g0 > td { background: var(--c-sunk); font-weight: 700; font-family: var(--f-cond); font-size: var(--fs-14); letter-spacing: .01em; }
.tbl tr.g1 > td { background: var(--c-sheet-2); font-weight: 600; }
.tbl tr.g2 > td { font-weight: 600; }
.tbl tr.sum > td { font-weight: 600; background: var(--c-sheet-2); border-top: 1px solid var(--c-rule-2); }
.tbl tr.tot > td { font-weight: 700; background: var(--c-sheet); border-top: 1.5px solid var(--c-frame); border-bottom: 3px double var(--c-frame); font-size: var(--fs-15); }
.tbl tr.old > td { background: repeating-linear-gradient(-45deg, var(--c-sheet-2), var(--c-sheet-2) 6px, var(--c-sheet) 6px, var(--c-sheet) 12px); color: var(--c-ink-3); font-style: normal; }
.tbl td.ind1 { padding-left: 28px; }
.tbl td.ind2 { padding-left: 44px; }
.tbl td.stt { width: 44px; color: var(--c-ink-3); font-family: var(--f-cond); }

/* Sticky name column for wide sheets (dòng tiền, so sánh thầu phụ) */
.tbl .stk { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--c-rule-2); }
.tbl thead th.stk { z-index: 3; }
.tbl .stk2 { position: sticky; z-index: 1; }

/* ---------- Sheet cell types (ô nhập / ô tự tính / nguồn / nhập tay) ---------- */
.tbl td.c-in { padding: 3px 4px; }
.cin { width: 100%; min-width: 64px; height: 30px; padding: 4px 8px; font: inherit; font-size: inherit; color: var(--c-ink); background: var(--c-sheet); border: 1px solid var(--c-field); border-radius: var(--r-1); text-align: right; font-variant-numeric: tabular-nums; }
.cin.txt-l { text-align: left; }
.cin:hover { border-color: var(--c-ink-2); }
.cin:focus { outline: none; border-color: var(--c-lam); box-shadow: 0 0 0 2px var(--c-lam-100); }
.cin.is-invalid { border-color: var(--c-danger); background: #fffafa; box-shadow: 0 0 0 2px var(--c-danger-bg); }
.cin:disabled, .is-ro .cin { background: transparent; border-color: transparent; color: var(--c-ink); cursor: default; }
.tbl td.c-calc { background: var(--c-calc); color: var(--c-ink); position: relative; }
.tbl tbody tr:hover > td.c-calc { background: #e8edf5; }
.tbl td.c-calc[tabindex]:focus { box-shadow: inset 0 0 0 2px var(--c-lam); outline: none; }
.tbl td.c-src { background: var(--c-sheet); }
.tbl td.c-src a { color: var(--c-lam-ink); text-decoration: none; border-bottom: 1px dashed var(--c-lam-line); }
.tbl td.c-src a:hover { border-bottom-style: solid; }
.tbl td.c-man { background: var(--c-man-bg); box-shadow: inset 0 0 0 1px var(--c-man-line); }
.tbl td.c-man .cin { background: #fffaf0; border-color: var(--c-man-line); }
.mantag { display: block; font-family: var(--f-sans); font-size: 11px; font-weight: 500; color: var(--c-man); text-align: right; line-height: 1.35; margin-top: 3px; white-space: normal; }
.mantag b { font-weight: 700; }
.tbl td.c-err { background: var(--c-danger-bg); }
.celerr { display: block; font-size: 11.5px; font-weight: 500; color: var(--c-danger); text-align: left; white-space: normal; line-height: 1.3; margin-top: 3px; }
.fx { font-family: var(--f-mono); font-size: 11px; color: var(--c-ink-3); }

/* Formula popover: "= 125.307.784.122 × 0,218% × 1" */
.fxpop { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: max-content; max-width: 460px; padding: 10px 12px; background: var(--c-ink); color: #eef1f4; border-radius: var(--r-2); box-shadow: var(--sh-pop); text-align: left; white-space: normal; font-weight: 400; }
.fxpop::before { content: ""; position: absolute; top: -5px; right: 22px; width: 10px; height: 10px; background: var(--c-ink); transform: rotate(45deg); }
.fxpop .fx-t { display: block; font-family: var(--f-cond); font-size: 11.5px; color: #aab4be; margin-bottom: 4px; }
.fxpop .fx-f { display: block; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.55; color: #fff; }
.fxpop .fx-n { display: block; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.55; color: #c9e2ff; }
.fxpop .fx-r { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid #3a434d; font-size: var(--fs-12); color: #aab4be; }

.tbl td.c-in { text-align: right; }
.cin.w-s { width: 64px; min-width: 0; }
.cin.w-m { width: 104px; min-width: 0; }
.tbl .sub.right { text-align: right; }
.tbl-frame.is-open { overflow: visible; }
.tbl-frame.is-open table.tbl { table-layout: fixed; }
.tbl-frame.is-open td.txtcell { white-space: normal; }
.tbl td.is-pop { z-index: 5; box-shadow: inset 0 0 0 2px var(--c-lam); }
.is-ro select.cin { appearance: none; }
.is-ro .c-in { padding: 8px 12px; }

/* Overflow hint for wide sheets */
.scrollhint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--c-ink-3); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-rule-2); overflow-x: auto; }
.tabs a, .tabs button { font: inherit; font-weight: 500; font-size: var(--fs-14); padding: 9px 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--c-ink-3); cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabs a:hover, .tabs button:hover { color: var(--c-ink); }
.tabs .is-on, .tabs [aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-lam); font-weight: 600; }
.tabs .count { font-size: 11.5px; background: var(--c-sunk); padding: 0 6px; border-radius: var(--r-pill); color: var(--c-ink-2); font-weight: 600; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 12px 14px; background: var(--c-sheet); border: 1px solid var(--c-rule); border-radius: var(--r-2); }
.filters .field { min-width: 150px; }
.filters .field.wide { min-width: 260px; flex: 1; }
.filters .inp, .filters .sel { min-height: 34px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipf { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--fs-13); border: 1px solid var(--c-rule-2); border-radius: var(--r-pill); background: var(--c-sheet); color: var(--c-ink-2); text-decoration: none; }
.chipf:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.chipf.is-on { background: var(--c-lam-50); border-color: var(--c-lam-line); color: var(--c-lam-ink); font-weight: 600; }
.chipf .n { font-weight: 600; color: var(--c-ink-3); }

/* Totals strip under a ledger */
.totline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding: 10px 16px; border-top: 1.5px solid var(--c-frame); background: var(--c-sheet); font-size: var(--fs-13); color: var(--c-ink-3); }
.totline b { color: var(--c-ink); font-size: var(--fs-16); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ---------- Bảng số: the five MENU figures as one ruled strip (no card grid) ---------- */
.figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1.5px solid var(--c-frame); background: var(--c-sheet); border-radius: var(--r-1); }
.fig { padding: 12px 16px 13px; border-left: 1px solid var(--c-frame); text-decoration: none; color: inherit; display: block; min-width: 0; }
.fig:first-child { border-left: 0; }
a.fig:hover { background: var(--c-lam-50); }
.fig-lbl { font-family: var(--f-cond); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.fig-val { margin-top: 4px; font-size: var(--fs-22); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-val small { font-size: var(--fs-14); font-weight: 500; color: var(--c-ink-3); margin-left: 2px; }
.fig-sub { margin-top: 4px; font-size: var(--fs-12); color: var(--c-ink-3); }

/* Meter (ngân sách, tiến độ) */
.meter { height: 8px; background: var(--c-sunk); border-radius: 1px; overflow: hidden; position: relative; }
.meter > span { display: block; height: 100%; background: var(--c-lam); }
.meter.is-warn > span { background: #c58a12; }
.meter.is-over > span { background: var(--c-danger); }
.meter .mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--c-frame); }

/* Chart (server SVG) */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .ax { stroke: var(--c-rule-2); stroke-width: 1; }
.chart .gl { stroke: var(--c-rule); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .bt { fill: var(--c-lam); }
.chart .bc { fill: #9aa5b1; }
.chart text { font-family: var(--f-cond); font-size: 11px; fill: var(--c-ink-3); }
.chart text.v { fill: var(--c-ink-2); font-weight: 600; }
.keyline { display: flex; gap: 16px; font-size: var(--fs-12); color: var(--c-ink-3); }
.keyline span { display: inline-flex; align-items: center; gap: 6px; }
.keyline i { width: 12px; height: 12px; display: inline-block; border-radius: 1px; }

/* ---------- Project card list (S4) ---------- */
.plist { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--c-rule); border-radius: var(--r-2); background: var(--c-sheet); }
.pitem { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--c-rule); text-decoration: none; color: inherit; }
.pitem:first-child { border-top: 0; }
.pitem:hover { background: var(--c-lam-50); }
.pitem-name { font-weight: 600; font-size: var(--fs-15); }
.pitem-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pitem .k { font-family: var(--f-cond); font-size: var(--fs-12); color: var(--c-ink-3); display: block; }
.pitem .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.phead { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 16px; padding: 8px 18px; background: var(--c-sheet-2); border-bottom: 1px solid var(--c-rule-2); font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-13); color: var(--c-ink-2); border-radius: var(--r-2) var(--r-2) 0 0; }

/* ---------- Register of sheets on the project index (S6) ---------- */
.reg { border: 1.5px solid var(--c-frame); border-radius: var(--r-1); background: var(--c-sheet); }
.reg-row { display: grid; grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.1fr) 120px 110px; align-items: center; min-height: 46px; border-top: 1px solid var(--c-rule); text-decoration: none; color: inherit; }
.reg-row:first-child { border-top: 0; }
a.reg-row:hover { background: var(--c-lam-50); }
.reg-row > div { padding: 8px 12px; min-width: 0; }
.reg-row .no { font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-16); text-align: right; border-right: 1px solid var(--c-frame); align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.reg-row .nm { font-weight: 600; }
.reg-row .nm small { display: block; font-weight: 400; color: var(--c-ink-3); }
.reg-hd { background: var(--c-sheet-2); min-height: 34px; font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-12); color: var(--c-ink-2); letter-spacing: .02em; }
.reg-hd .no { font-size: var(--fs-12); }
.reg-row.is-empty .nm { color: var(--c-ink-2); }

/* ---------- Drawer & modal ---------- */
.scrim { position: fixed; inset: 0; background: rgba(28, 33, 39, .38); z-index: 80; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100vw); background: var(--c-sheet); z-index: 90; box-shadow: var(--sh-pop); display: flex; flex-direction: column; border-left: 1px solid var(--c-rule-2); }
.drawer-wide { width: min(760px, 100vw); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--c-rule); }
.drawer-head h2 { font-size: var(--fs-18); }
.drawer-head .sub { margin-top: 2px; font-size: var(--fs-13); color: var(--c-ink-3); }
.drawer-body { flex: 1; overflow: auto; padding: 20px; }
.drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-rule); background: var(--c-sheet-2); }
.drawer-foot .lead { margin-right: auto; font-size: var(--fs-13); color: var(--c-ink-3); }
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--c-sheet); border-radius: var(--r-3); box-shadow: var(--sh-pop); z-index: 95; border: 1px solid var(--c-rule-2); }
.modal-wide { width: min(640px, calc(100vw - 32px)); }
.modal-head { padding: 18px 20px 6px; display: flex; gap: 12px; align-items: flex-start; }
.modal-head h2 { font-size: var(--fs-18); }
.modal-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.modal-ic.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.modal-ic.danger { background: var(--c-danger-bg); color: var(--c-danger); }
.modal-ic.info { background: var(--c-lam-50); color: var(--c-lam); }
.modal-body { padding: 8px 20px 18px; color: var(--c-ink-2); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-rule); background: var(--c-sheet-2); border-radius: 0 0 var(--r-3) var(--r-3); }

/* ---------- Toast ---------- */
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--c-ink); color: #fff; border-radius: var(--r-2); box-shadow: var(--sh-pop); font-weight: 500; font-size: var(--fs-14); max-width: min(560px, calc(100vw - 32px)); }
.toast .i { color: #8fd6ad; }
.toast a { color: #c9e2ff; }
.toast-danger { background: #7d1a12; }
.toast-danger .i { color: #ffc7c0; }

/* ---------- Empty, offline, block error ---------- */
.empty { text-align: center; padding: 44px 24px; color: var(--c-ink-3); }
.empty .i-xl { color: var(--c-rule-2); margin-bottom: 10px; }
.empty strong { display: block; color: var(--c-ink); font-size: var(--fs-16); font-weight: 600; margin-bottom: 4px; }
.empty p { max-width: 52ch; margin: 0 auto; }
.empty .btn { margin-top: 14px; }
.blockerr { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; color: var(--c-ink-2); font-size: var(--fs-14); }
.skel { display: block; height: 12px; border-radius: 2px; background: linear-gradient(90deg, #e6e9ec 0%, #f3f5f7 50%, #e6e9ec 100%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- Timeline / audit ---------- */
.diff { font-size: var(--fs-13); }
.diff del { color: var(--c-danger); text-decoration: line-through; background: var(--c-danger-bg); padding: 0 3px; border-radius: 2px; }
.diff ins { color: var(--c-ok); text-decoration: none; background: var(--c-ok-bg); padding: 0 3px; border-radius: 2px; }

/* ---------- Steps (Nhập Excel) ---------- */
.steps { display: flex; gap: 0; border: 1px solid var(--c-rule); border-radius: var(--r-2); background: var(--c-sheet); overflow: hidden; }
.step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: var(--fs-13); color: var(--c-ink-3); border-left: 1px solid var(--c-rule); }
.step:first-child { border-left: 0; }
.step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--c-rule-2); font-weight: 600; font-size: 12px; flex: none; }
.step.is-done { color: var(--c-ink-2); }
.step.is-done .n { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.step.is-on { color: var(--c-ink); font-weight: 600; background: var(--c-lam-50); }
.step.is-on .n { border-color: var(--c-lam); color: var(--c-lam); }

/* ---------- Guide (Hướng dẫn) ---------- */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.toc { position: sticky; top: calc(var(--hdr-h) + 20px); font-size: var(--fs-13); }
.toc a { display: block; padding: 6px 10px; color: var(--c-ink-2); text-decoration: none; border-left: 2px solid var(--c-rule); }
.toc a.is-on { color: var(--c-lam-ink); border-left-color: var(--c-lam); font-weight: 600; }
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--fs-18); margin: 28px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--c-ink-2); }
.prose p + p { margin-top: 8px; }
.prose ol, .prose ul { padding-left: 22px; margin-top: 8px; }
.prose li + li { margin-top: 6px; }
.rhythm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--c-frame); border-radius: var(--r-1); background: var(--c-sheet); }
.rhythm > div { padding: 14px 16px; border-left: 1px solid var(--c-frame); }
.rhythm > div:first-child { border-left: 0; }
.rhythm h3 { font-size: var(--fs-15); margin-top: 4px; }
.rhythm p { font-size: var(--fs-13); color: var(--c-ink-2); margin-top: 6px; }

/* ---------- Sign-in ---------- */
body.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--c-bg); }
.auth-card { width: min(420px, 100%); background: var(--c-sheet); border: 1.5px solid var(--c-frame); border-radius: var(--r-1); }
.auth-top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--c-frame); }
.auth-top .seal { width: 40px; height: 40px; font-size: 15px; }
.auth-top strong { display: block; font-size: var(--fs-16); font-weight: 600; line-height: 1.25; }
.auth-top small { display: block; color: var(--c-ink-3); font-size: var(--fs-12); line-height: 1.35; }
.auth-body { padding: 22px; }
.auth-body .inp { min-height: 44px; }
.auth-body .btn { min-height: 44px; }
.auth-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--c-frame); }
.auth-foot > div { padding: 8px 14px; border-left: 1px solid var(--c-frame); }
.auth-foot > div:first-child { border-left: 0; }
.auth-note { margin-top: 14px; font-size: var(--fs-13); color: var(--c-ink-3); text-align: center; }

/* ---------- Full-page message (forbidden, not found) ---------- */
.msgpage { max-width: 560px; margin: 72px auto; text-align: center; }
.msgpage .i-xl { color: var(--c-ink-3); }
.msgpage h1 { margin-top: 12px; font-size: var(--fs-22); }
.msgpage p { margin-top: 8px; color: var(--c-ink-2); }
.msgpage .row { justify-content: center; margin-top: 18px; }

/* ==========================================================================
   Print — A4 portrait / landscape (ASM-040, browser print)
   ========================================================================== */
body.prt { min-width: 1280px; background: #d9dde1; }
.prt-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--c-sheet); border-bottom: 1px solid var(--c-rule-2); }
.prt-bar h1 { font-size: var(--fs-16); }
.prt-bar .grow { color: var(--c-ink-3); font-size: var(--fs-13); }
.prt-stage { padding: 28px 0 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.a4 { width: 210mm; min-height: 297mm; padding: 16mm 15mm 16mm 20mm; background: #fff; color: #000; box-shadow: 0 2px 12px rgba(0,0,0,.18); font-size: 12.5px; line-height: 1.45; position: relative; }
.a4.land { width: 297mm; min-height: 210mm; padding: 12mm 12mm 12mm 14mm; }
.a4 .co { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.a4 .co-l { text-align: center; font-size: 12px; }
.a4 .co-l strong { display: block; text-transform: uppercase; font-size: 12px; }
.a4 .co-r { text-align: center; font-size: 12px; }
.a4 .co-r strong { display: block; font-size: 12.5px; }
.a4 .co-r em { font-style: normal; display: inline-block; border-bottom: 1px solid #000; padding-bottom: 1px; font-weight: 600; }
.a4 .ttl { text-align: center; margin: 18px 0 4px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.a4 .ttl-sub { text-align: center; font-style: italic; margin-bottom: 12px; }
.a4 table.pt { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.a4 table.pt th, .a4 table.pt td { border: 0.6pt solid #000; padding: 3px 5px; vertical-align: top; }
.a4 table.pt th { background: #f0f0f0; font-weight: 700; text-align: center; }
.a4 table.pt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.a4 table.pt tr.b td { font-weight: 700; }
.a4 table.pt tr.g td { font-weight: 700; background: #f7f7f7; }
.a4 .ky { display: grid; gap: 12px; margin-top: 22px; text-align: center; }
.a4 .ky strong { display: block; text-transform: uppercase; font-size: 12px; }
.a4 .ky .nm { display: block; margin-top: 64px; font-weight: 700; }
.a4 .ky em { display: block; min-height: 1.45em; }
.a4 .ky-2 { grid-template-columns: repeat(2, 1fr); }
.a4 .ky-3 { grid-template-columns: repeat(3, 1fr); }
.a4 .ky-4 { grid-template-columns: repeat(4, 1fr); }
.a4 p { margin: 4px 0; }
.a4 .ind { text-indent: 1.2em; }
.a4 .dots { border-bottom: 1px dotted #000; display: inline-block; min-width: 120px; }
.a4 .tbk { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border: 1pt solid #000; margin-top: 18px; font-size: 10.5px; }
.a4 .tbk > div { padding: 3px 6px; border-left: 0.6pt solid #000; }
.a4 .tbk > div:first-child { border-left: 0; }
.a4 .tbk b { display: block; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #333; }
.a4 .pgno { position: absolute; bottom: 8mm; right: 12mm; font-size: 10px; color: #444; }
@media print {
  @page { size: A4; margin: 0; }
  body.prt { background: #fff; min-width: 0; }
  .prt-bar, .demo { display: none !important; }
  .prt-stage { padding: 0; gap: 0; }
  .a4 { box-shadow: none; page-break-after: always; }
}

/* ==========================================================================
   Phone frame (390×844): Tổng quan, Công nợ, tra một phiếu (PRODUCT)
   ========================================================================== */
body.ph { background: #cfd4d9; }
.ph-app { max-width: 390px; min-height: 100vh; margin: 0 auto; background: var(--c-bg); display: flex; flex-direction: column; position: relative; }
.ph-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 8px 6px 12px; background: var(--c-sheet); border-bottom: 1px solid var(--c-rule-2); }
.ph-bar .seal { width: 30px; height: 30px; font-size: 12px; }
.ph-bar h1 { font-size: var(--fs-16); font-weight: 600; line-height: 1.2; }
.ph-bar h1 small { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--c-ink-3); }
.ph-bar .btn-icon { width: 44px; height: 44px; min-height: 44px; }
.ph-main { flex: 1; padding: 14px 14px 96px; }
.ph-main > * + * { margin-top: 14px; }
.ph-tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 390px; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--c-sheet); border-top: 1px solid var(--c-rule-2); padding-bottom: 4px; }
.ph-tabs a { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; color: var(--c-ink-3); text-decoration: none; }
.ph-tabs a .i { width: 22px; height: 22px; }
.ph-tabs a.is-on { color: var(--c-lam); font-weight: 600; }
.ph .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph .fig { border-left: 0; border-top: 1px solid var(--c-frame); padding: 10px 12px; }
.ph .fig:nth-child(-n+2) { border-top: 0; }
.ph .fig:nth-child(even) { border-left: 1px solid var(--c-frame); }
.ph .fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ph .fig-val { font-size: var(--fs-18); }
.ph-card { background: var(--c-sheet); border: 1px solid var(--c-rule); border-radius: var(--r-2); }
.ph-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--c-rule); }
.ph-card-head h2 { font-size: var(--fs-15); }
.ph-card-body { padding: 12px 14px; }
.ph-list { list-style: none; }
.ph-list li > a, .ph-list li > div { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 14px; border-top: 1px solid var(--c-rule); text-decoration: none; color: inherit; }
.ph-list li:first-child > a, .ph-list li:first-child > div { border-top: 0; }
.ph-list .t { font-weight: 600; font-size: var(--fs-14); line-height: 1.3; }
.ph-list .s { font-size: var(--fs-12); color: var(--c-ink-3); margin-top: 2px; }
.ph-list .a { margin-left: auto; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-list .a small { display: block; font-weight: 400; color: var(--c-ink-3); }
.ph .inp, .ph .sel, .ph .btn { min-height: 44px; }
.ph .chipf { min-height: 36px; }
.ph .tbl-frame { border-radius: var(--r-2); }
.ph-desk { text-align: left; padding: 16px; }
.ph-desk .i-xl { color: var(--c-lam); }
.ph-desk h2 { font-size: var(--fs-16); margin-top: 8px; }
.ph-desk p { margin-top: 6px; color: var(--c-ink-2); font-size: var(--fs-14); }
.ph .dl { grid-template-columns: 1fr auto; gap: 8px 12px; }
.ph .dl dd { text-align: right; font-variant-numeric: tabular-nums; }
.ph .tb { grid-template-columns: 1fr 1fr; }
.ph .tb-cell:nth-child(n+3) { border-top: 1px solid var(--c-frame); }
.ph .tb-cell:nth-child(3) { border-left: 0; }
.ph .tb-cell:first-child { grid-column: 1 / -1; border-left: 0; }
.ph .tb-cell:nth-child(2) { border-top: 1px solid var(--c-frame); border-left: 0; }
.ph .page-head { margin-bottom: 0; }

/* ==========================================================================
   Mockup-only demo bar (names the page's role + device set and links to that
   set's own index; no device or role switch, sets never link to each other). Not part of the
   app: hidden under automation (navigator.webdriver) so visual QA
   screenshots never contain it; hidden in print.
   ========================================================================== */
.demo { position: fixed; left: 12px; bottom: 12px; z-index: 200; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; background: #fff; border: 1px dashed #8a939c; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); font: 500 12px/1.2 var(--f-sans); color: #434b54; max-width: calc(100vw - 24px); flex-wrap: wrap; }
.demo b { font-family: var(--f-mono); font-weight: 500; color: #1c2127; }
.demo .dg { display: inline-flex; align-items: center; gap: 4px; }
.demo .dg > span { color: #5f6770; }
.demo a { padding: 4px 8px; border-radius: 4px; border: 1px solid #d6dbe0; color: #1c2127; text-decoration: none; white-space: nowrap; }
.demo a:hover { border-color: #24467f; color: #24467f; }
.demo a.is-on { background: #24467f; border-color: #24467f; color: #fff; }
.demo a.is-na { color: #8a939c; border-style: dashed; }
.demo .x { border: 0; background: none; cursor: pointer; color: #5f6770; font-size: 16px; padding: 0 4px; }
body.ph .demo { left: 50%; transform: translateX(-50%); bottom: 70px; max-width: 370px; }