/* ==========================================================================
   Sổ Nguồn Thu KV XIV (tenant duongthanhnha) — shared stylesheet for every mockup.
   One file: tokens + every component. Plain CSS, no framework, no remote asset.

   Identity (from docs/duongthanhnha/PRODUCT.md):
   - Office paper, black text, blue signing ink. Vietnamese official documents are
     typed black and signed in blue ink; the brand colour is that ink ("mực xanh").
   - Red seal ink ("son") appears in exactly one meaning: a month that is closed
     (Đã chốt) is stamped, like a document with the agency seal.
   - Hand edits (Sửa tay) are written in violet ink ("mực tím"), the office pen.
   - Every other colour is a status signal and always travels with a word.
   - The month index tabs (like a ledger's edge tabs) and the document sheets that
     preview the official Excel forms (Times New Roman, quốc hiệu, signatures) are
     the two signature elements; everything else stays quiet.
   Layout responds to its container (.app), so the same markup renders the
   1440x900 office frame and the 390x844 phone frame.
   ========================================================================== */

@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; }

/* ---------- Tokens ---------- */
:root {
  /* Neutrals, tinted toward the ink hue (255) */
  --bg: oklch(0.968 0.006 255);          /* desk: page background under content */
  --surface: oklch(1 0 0);               /* paper: panels, sheets, header band */
  --surface-2: oklch(0.982 0.004 255);   /* table heads, panel feet */
  --sunk: oklch(0.948 0.008 255);        /* group rows, disabled fields, hover */
  --line: oklch(0.905 0.008 255);        /* row separators */
  --line-2: oklch(0.845 0.012 255);      /* panel and frame borders */
  --rule: oklch(0.6 0.016 255);          /* structural rules, input borders (>= 3:1 on paper) */
  --ink: oklch(0.235 0.022 258);         /* text */
  --ink-2: oklch(0.37 0.02 258);         /* secondary text */
  --ink-3: oklch(0.47 0.018 258);        /* meta text (>= 4.5:1 on --bg) */
  --doc-ink: oklch(0.17 0.01 258);       /* text on document sheets */

  /* Brand: mực xanh (blue signing ink) */
  --brand: oklch(0.44 0.135 264);
  --brand-strong: oklch(0.36 0.13 264);
  --brand-soft: oklch(0.955 0.018 264);
  --brand-tint: oklch(0.905 0.042 264);

  /* Status inks (always paired with a word) */
  --seal: oklch(0.52 0.165 33);          /* Đã chốt — red seal ink */
  --seal-soft: oklch(0.963 0.02 33);
  --seal-line: oklch(0.8 0.08 33);
  --hand: oklch(0.47 0.16 302);          /* Sửa tay — violet pen */
  --hand-soft: oklch(0.962 0.022 302);
  --hand-line: oklch(0.82 0.07 302);
  --warn: oklch(0.5 0.105 68);           /* Chưa phân loại, Chưa ghép, Lệch tiền */
  --warn-soft: oklch(0.966 0.04 86);
  --warn-line: oklch(0.82 0.09 80);
  --info: oklch(0.465 0.075 212);        /* Tên chưa biết, Lạc chi nhánh */
  --info-soft: oklch(0.962 0.018 212);
  --info-line: oklch(0.82 0.05 212);
  --ok: oklch(0.47 0.105 152);           /* Đã nhập, Đã ghép */
  --ok-soft: oklch(0.962 0.03 152);
  --ok-line: oklch(0.82 0.07 152);
  --danger: oklch(0.505 0.185 22);       /* errors that block an action */
  --danger-soft: oklch(0.962 0.022 22);
  --danger-line: oklch(0.8 0.09 22);

  /* Type */
  --font-ui: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-doc: "Times New Roman", Tinos, "Liberation Serif", "Noto Serif", serif;
  --fs-13: 13px;   /* tags, tab status, footnotes */
  --fs-14: 14px;   /* labels, table heads, meta */
  --fs-15: 15px;   /* body and table cells (PRODUCT: body >= 15px) */
  --fs-17: 17px;   /* section titles */
  --fs-20: 20px;   /* dialog titles, phone page title */
  --fs-24: 24px;   /* page title */
  --fs-28: 28px;   /* queue counts, figures */
  --lh: 1.5;
  --lh-tight: 1.25;

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

  /* Radius: controls < panels < overlays */
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px oklch(0.25 0.03 258 / 0.06);
  --sh-paper: 0 1px 1px oklch(0.25 0.03 258 / 0.05), 0 10px 28px -10px oklch(0.25 0.03 258 / 0.18);
  --sh-pop: 0 18px 44px -12px oklch(0.2 0.04 258 / 0.3), 0 2px 6px oklch(0.2 0.04 258 / 0.08);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);

  /* Layers */
  --z-sticky: 10; --z-side: 20; --z-scrim: 40; --z-drawer: 50; --z-dialog: 60; --z-toast: 70; --z-demo: 90;

  /* Shell */
  --side-w: 260px;
  --pad-x: 32px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-15); line-height: var(--lh);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-24); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-17); }
h3 { font-size: var(--fs-15); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.small { font-size: var(--fs-14); }
.code { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; font-weight: 600; }
.void { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-3); }
.hand-ink { color: var(--hand); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack:not(.tbl) > * + * { margin-top: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.grid-21 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }

/* ---------- Icons (inline SVG sprite) ---------- */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i-sm { width: 15px; height: 15px; vertical-align: -2px; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; stroke-width: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 40px; padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink); font-size: var(--fs-15); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.btn:hover { background: var(--sunk); color: var(--ink); }
.btn:active { background: var(--line); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--sunk); border-color: var(--line-2); color: var(--ink-3); cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-strong); }
.btn-seal { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn-seal:hover { background: oklch(0.46 0.16 33); color: #fff; }
.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: oklch(0.45 0.18 22); color: #fff; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--sunk); }
.btn-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--brand); text-decoration: underline; }
.btn-link:hover { background: none; color: var(--brand-strong); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--fs-14); }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); }
.req::after { content: " *"; color: var(--danger); }
.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-15);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.textarea { min-height: 84px; resize: vertical; line-height: var(--lh); }
.select { appearance: none; padding-right: 36px; 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='%233b4553' 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 12px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px oklch(0.6 0.13 264 / 0.25); }
.input:disabled, .select:disabled, .input[readonly] { background: var(--sunk); color: var(--ink-2); border-color: var(--line-2); cursor: not-allowed; }
.input.is-invalid, .select.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
.input.num { text-align: right; }
.hint { font-size: var(--fs-14); color: var(--ink-3); }
.err { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-14); font-weight: 600; color: var(--danger); }
.err .i { margin-top: 2px; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--brand); }
.search { position: relative; }
.search .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 38px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.form-grid .span-2 { grid-column: 1 / -1; }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sunk); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.seg a, .seg button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-1); background: none; color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; text-decoration: none; cursor: pointer; }
.seg a:hover, .seg button:hover { color: var(--ink); }
.seg [aria-current="page"], .seg [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* Radio choice rows (import type) */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choice { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); cursor: pointer; }
.choice input { grid-row: span 2; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); }
.choice b { font-size: var(--fs-15); }
.choice span { font-size: var(--fs-14); color: var(--ink-3); }
.choice:hover { border-color: var(--rule); }
.choice.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }

/* ---------- App shell ---------- */
.app { container: app / inline-size; min-height: 100vh; }
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--surface) calc(var(--side-w) - 1px), var(--line-2) calc(var(--side-w) - 1px) var(--side-w), transparent var(--side-w)); }
.shell-top { background: none; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line-2); z-index: var(--z-side); }
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-1); background: var(--brand); color: #fff; font-family: var(--font-doc); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 0 3px oklch(1 0 0 / 0.55); }
.brand-name { display: block; font-size: var(--fs-17); font-weight: 700; line-height: 1.2; }
.brand-sub { display: block; font-size: var(--fs-13); color: var(--ink-3); line-height: 1.3; }
.nav { flex: 1; padding: 4px 12px 16px; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-label { padding: 0 12px 6px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-3); }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; margin: 1px 0; border-radius: var(--r-2); color: var(--ink-2); font-weight: 500; text-decoration: none; }
.nav a .i { color: var(--ink-3); }
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand-tint); }
.nav a[aria-current="page"] .i { color: var(--brand); }
.nav .count { margin-left: auto; min-width: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-size: var(--fs-13); font-weight: 700; text-align: center; line-height: 20px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-top: 1px solid var(--line); }
.side-user .who { min-width: 0; flex: 1; }
.side-user b { display: block; font-size: var(--fs-15); line-height: 1.25; }
.side-user span { display: block; font-size: var(--fs-13); color: var(--ink-3); }
.av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font-size: var(--fs-13); font-weight: 700; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { background: var(--surface); border-bottom: 1px solid var(--line-2); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); padding: 24px var(--pad-x) 16px; }
.page-head .crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--fs-14); color: var(--ink-3); text-decoration: none; }
.page-head .crumb:hover { color: var(--brand); }
.page-sub { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-3); font-size: var(--fs-15); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); padding-top: 2px; }
.content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: 24px var(--pad-x) 56px; align-content: start; }
.content-narrow { max-width: 880px; }

/* Phone app bar + menu (hidden on wide containers) */
.ph-bar { display: none; }
.ph-menu:not([open]) > .ph-sheet { display: none; }
.ph-tabs { display: none; }

/* ---------- Month index (ledger edge tabs) ---------- */
.months { display: flex; align-items: flex-end; gap: 4px; padding: 0 var(--pad-x); margin-bottom: -1px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.months .yr { display: flex; align-items: center; gap: 6px; margin-right: 8px; padding-bottom: 10px; flex: none; }
.months .yr .select { min-height: 36px; width: auto; font-weight: 600; }
.mt { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; height: 54px; padding: 6px 6px 7px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0; color: var(--ink-3); text-decoration: none; }
.mt b { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.mt .st { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); line-height: 1.2; white-space: nowrap; }
.mt:hover { background: var(--sunk); color: var(--ink-2); }
.mt[aria-current="page"] { background: var(--bg); border-color: var(--line-2); color: var(--ink-2); }
.mt[aria-current="page"] b { color: var(--ink); font-weight: 700; }
.mt .st-chot { color: var(--seal); font-weight: 600; }
.mt .st-thieu { color: var(--warn); font-weight: 600; }
.mt .st-none { color: var(--ink-3); }
.mt.is-empty b { color: var(--ink-3); font-weight: 500; }
.gl { width: 11px; height: 11px; flex: none; }
.gl-chot { border: 2px solid var(--seal); border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--surface), inset 0 0 0 4px var(--seal); }
.gl-lap { border: 1.5px dashed var(--ink-3); border-radius: 50%; }
.gl-thieu { border: 2px solid var(--warn); border-radius: 50%; background: var(--warn-soft); }

/* ---------- Bands ---------- */
.band { display: flex; align-items: center; gap: var(--s-3); padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); font-size: var(--fs-15); }
.band .grow { min-width: 0; }
.band-lock { background: var(--seal-soft); border-color: var(--seal-line); }
.band-lock .i { color: var(--seal); }
.band-draft { border-style: dashed; border-color: var(--rule); }
.band-draft .i { color: var(--ink-3); }

/* ---------- Seal (Đã chốt) ---------- */
.seal { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 14px 5px; border: 2px solid var(--seal); border-radius: var(--r-1); outline: 1px solid var(--seal); outline-offset: 2px; color: var(--seal); font-family: var(--font-doc); line-height: 1.15; transform: rotate(-4deg); background: oklch(1 0 0 / 0.6); }
.seal b { font-size: 16px; letter-spacing: 0.08em; }
.seal span { font-size: 12.5px; letter-spacing: 0.02em; }

/* ---------- Tags (status words) ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.tag .i { width: 13px; height: 13px; vertical-align: 0; }
.t-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.t-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.t-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.t-hand { background: var(--hand-soft); border-color: var(--hand-line); color: var(--hand); }
.t-seal { background: var(--seal-soft); border-color: var(--seal-line); color: var(--seal); }
.t-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.t-void { background: var(--sunk); border-color: var(--line-2); color: var(--ink-2); }
.t-draft { background: var(--surface); border-style: dashed; border-color: var(--rule); color: var(--ink-2); }
.t-brand { background: var(--brand-soft); border-color: var(--brand-tint); color: var(--brand-strong); }

/* ---------- Notes / alerts (full border, tinted, never a side stripe) ---------- */
.note { display: flex; align-items: flex-start; gap: var(--s-3); padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); color: var(--ink); }
.note > .i { margin-top: 2px; }
.note .grow > * + * { margin-top: 4px; }
.note-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.note-warn > .i { color: var(--warn); }
.note-info { background: var(--info-soft); border-color: var(--info-line); }
.note-info > .i { color: var(--info); }
.note-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.note-ok > .i { color: var(--ok); }
.note-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.note-danger > .i { color: var(--danger); }
.note-seal { background: var(--seal-soft); border-color: var(--seal-line); }
.note-seal > .i { color: var(--seal); }
.note-hand { background: var(--hand-soft); border-color: var(--hand-line); }
.note-hand > .i { color: var(--hand); }

/* ---------- Sections and panels ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.sec-head p { margin-top: 2px; font-size: var(--fs-14); color: var(--ink-3); }
.panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--sh-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 16px; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-2) var(--r-2); font-size: var(--fs-14); color: var(--ink-3); }

/* Key-value list */
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.kv dt { color: var(--ink-3); font-size: var(--fs-14); padding-top: 1px; }
.kv dd { margin: 0; }

/* Ruled figure strip (one bordered strip, cells divided by rules) */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.strip > div { padding: 12px 16px; }
.strip > div + div { border-left: 1px solid var(--line); }
.strip dt, .strip .k { font-size: var(--fs-14); color: var(--ink-3); }
.strip dd, .strip .v { margin: 2px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.strip .v small { font-size: var(--fs-14); font-weight: 500; color: var(--ink-3); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--sh-1); }
.tbl-wrap.flush { border: 0; border-radius: 0; box-shadow: none; }
.tbl-wrap.tall { max-height: 640px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-15); }
.tbl th, .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; line-height: 1.3; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tbl thead tr.th2 th { top: 38px; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl th.c, .tbl td.c { text-align: center; }
.tbl tbody tr:hover td { background: oklch(0.975 0.01 264); }
.tbl tr.is-sel td { background: var(--brand-soft); }
.tbl tr.grp td { background: var(--sunk); font-weight: 700; color: var(--ink); }
.tbl tr.sub td { background: var(--surface-2); font-weight: 600; }
.tbl tr.tot td { font-weight: 700; background: var(--surface); border-top: 1px solid var(--ink-2); border-bottom: 3px double var(--ink-2); }
.tbl tr.dim td { color: var(--ink-3); }
.tbl tr.void td { color: var(--ink-3); }
.tbl tr.void td.num { text-decoration: line-through; }
.tbl td.wrap { white-space: normal; min-width: 280px; }
.tbl .ell { display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl td .sub-line { display: block; font-size: var(--fs-13); color: var(--ink-3); }
.tbl td > .cv { display: contents; }
.tbl-compact th, .tbl-compact td { padding: 7px 10px; }
.tbl .chk { width: 44px; text-align: center; }
.tbl .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); vertical-align: middle; }
.tbl .act { width: 1%; white-space: nowrap; text-align: right; }
a.amt { color: inherit; text-decoration: underline dotted var(--rule); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.amt:hover { color: var(--brand); text-decoration: underline solid var(--brand); }
.tbl tr.rowlink { cursor: pointer; }
.stick { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.stick-2 { position: sticky; left: var(--c1, 112px); z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--rule); }
.tbl thead th.stick, .tbl thead th.stick-2 { z-index: 3; background: var(--surface-2); }
.tbl tr.sub td.stick, .tbl tr.sub td.stick-2 { background: var(--surface-2); }
.tbl tr.grp td.stick, .tbl tr.grp td.stick-2 { background: var(--sunk); }
.tbl .vbar { border-left: 1px solid var(--line-2); }

/* Ledger matrix (sổ thu theo ngày) */
.matrix th, .matrix td { padding: 7px 10px; }
.matrix thead th { text-align: center; }
.matrix thead th.stick, .matrix thead th.stick-2 { text-align: left; }
.matrix tbody td.day { font-weight: 700; vertical-align: top; }
.matrix tr.daytot td { font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.matrix tr.monthtot td { font-weight: 700; background: var(--brand-soft); }
.matrix tr.monthtot td.stick, .matrix tr.monthtot td.stick-2 { background: var(--brand-soft); }
.matrix tr.daytot td.stick, .matrix tr.daytot td.stick-2 { background: var(--surface-2); }
.matrix td.zero { color: var(--line-2); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink-3); background: var(--surface); border-radius: 0 0 var(--r-2) var(--r-2); }
.pager .row { gap: 4px; }
.pager .pg { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: var(--r-1); color: var(--ink-2); text-decoration: none; font-weight: 600; }
.pager .pg[aria-current="page"] { background: var(--brand); color: #fff; }
.pager .pg:hover:not([aria-current]) { background: var(--sunk); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--ink-3); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.tabs .count { min-width: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-2); font-size: var(--fs-13); font-weight: 700; text-align: center; line-height: 20px; }
.tabs .count.c-warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.tabs .count.c-info { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }
.top .tabs { padding: 0 var(--pad-x); border-bottom: 0; }

/* ---------- Filters + bulk bar ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.filters .field { min-width: 170px; }
.filters .field.wide { flex: 1; min-width: 240px; }
.filters .chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding-top: 4px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px 0 10px; border: 1px solid var(--brand-tint); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--fs-14); font-weight: 600; }
.fchip a { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--brand-strong); }
.fchip a:hover { background: var(--brand-tint); }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: 10px 16px; border: 1px solid var(--brand-tint); border-radius: var(--r-2); background: var(--brand-soft); }
.bulk .select { width: auto; min-width: 240px; }
.sum-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); }
.sum-line b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* ---------- Queue list (Việc còn lại) and import list ---------- */
.qlist { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--sh-1); }
.qlist li + li { border-top: 1px solid var(--line); }
.qitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; color: var(--ink); text-decoration: none; }
a.qitem:hover { background: var(--brand-soft); color: var(--ink); }
.qitem .n { font-size: var(--fs-28); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; text-align: right; }
.qitem .n.is-warn { color: var(--warn); }
.qitem .n.is-info { color: var(--info); }
.qitem .n.is-zero { color: var(--ink-3); font-weight: 500; }
.qitem .t b { display: block; font-weight: 600; }
.qitem .t span { display: block; font-size: var(--fs-14); color: var(--ink-3); }
.qitem .go { color: var(--ink-3); }
.imp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; }
.imp .ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-2); background: var(--sunk); color: var(--ink-2); }
.imp .ico.is-ok { background: var(--ok-soft); color: var(--ok); }
.imp .ico.is-miss { background: var(--surface); border: 1px dashed var(--rule); color: var(--ink-3); }
.imp b { display: block; font-weight: 600; }
.imp span { display: block; font-size: var(--fs-14); color: var(--ink-3); }

/* Chốt tháng checklist */
.checks li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.checks li + li { border-top: 1px dashed var(--line); }
.checks .i { margin-top: 3px; }
.checks .is-ok .i { color: var(--ok); }
.checks .is-warn .i { color: var(--warn); }
.checks .is-block .i { color: var(--danger); }

/* ---------- Steps (import is a real sequence) ---------- */
.steps { display: flex; align-items: center; gap: 0; counter-reset: st; }
.steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-weight: 600; }
.steps li + li::before { content: ""; width: 48px; height: 1px; margin: 0 14px; background: var(--rule); }
.steps .dot { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); font-size: var(--fs-14); color: var(--ink-2); }
.steps .is-cur { color: var(--ink); }
.steps .is-cur .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps .is-done { color: var(--ink-2); }
.steps .is-done .dot { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }

/* Dropzone */
.drop { display: grid; justify-items: center; gap: 10px; padding: 36px 24px; border: 2px dashed var(--rule); border-radius: var(--r-3); background: var(--surface); text-align: center; }
.drop .i-xl { color: var(--brand); }
.drop b { font-size: var(--fs-17); }
.drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.filebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); }
.filebar .ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-2); background: var(--ok-soft); color: var(--ok); }

/* Progress */
.progress { height: 10px; border-radius: 5px; background: var(--sunk); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 5px; transition: width .25s ease-out; }
.batches li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; }
.batches li + li { border-top: 1px solid var(--line); }

/* Split view (queue list + detail pane) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s-5); align-items: start; }
.pane { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--sh-1); }
.pane-head { padding: 16px; border-bottom: 1px solid var(--line); }
.pane-body { padding: 16px; display: grid; gap: var(--s-4); }
.pane-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-2) var(--r-2); }
.quote { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface-2); font-size: var(--fs-14); color: var(--ink-2); }
.quote mark { background: var(--brand-tint); color: var(--brand-strong); border-radius: 2px; padding: 0 2px; }
.pick { display: grid; gap: 6px; }
.pick label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-1); cursor: pointer; }
.pick label:hover { border-color: var(--rule); }
.pick label.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.pick .meta { margin-left: auto; font-size: var(--fs-13); color: var(--ink-3); }

/* History list */
.hist li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.hist li + li { border-top: 1px solid var(--line); }
.hist time { font-size: var(--fs-14); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.diff-old { color: var(--ink-3); text-decoration: line-through; }
.diff-new { color: var(--hand); font-weight: 600; }

/* ---------- Overlays ---------- */
.scrim { position: fixed; inset: 0; background: oklch(0.2 0.03 258 / 0.42); z-index: var(--z-scrim); }
.dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(580px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow: auto; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--sh-pop); z-index: var(--z-dialog); }
.dialog-head { padding: 20px 24px 8px; }
.dialog-head h2 { font-size: var(--fs-20); }
.dialog-body { padding: 8px 24px 20px; display: grid; gap: var(--s-4); }
.dialog-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2); padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-3) var(--r-3); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100%); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--sh-pop); z-index: var(--z-drawer); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: 18px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--fs-20); }
.drawer-body { flex: 1; overflow: auto; padding: 20px 24px; display: grid; gap: var(--s-5); align-content: start; }
.drawer-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-2); background: var(--ink); color: #fff; font-weight: 600; box-shadow: var(--sh-pop); z-index: var(--z-toast); }
.toast .i { color: oklch(0.82 0.12 152); }

/* ---------- Empty / error blocks ---------- */
.empty { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
.empty .ring { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--sunk); color: var(--ink-3); }
.empty h2 { font-size: var(--fs-17); }
.empty p { max-width: 52ch; color: var(--ink-3); }
.empty .row-wrap { justify-content: center; margin-top: 6px; }
.blk-err { display: flex; align-items: center; gap: var(--s-3); padding: 16px; border: 1px solid var(--danger-line); border-radius: var(--r-2); background: var(--danger-soft); }
.blk-err > .i { color: var(--danger); }
.firstrun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); text-align: left; }
.firstrun li { padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.firstrun li + li { border-left: 1px solid var(--line); }
.firstrun .k { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: var(--fs-14); }

/* ---------- Document sheet (preview of the official Excel form) ---------- */
.sheet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sheet-scroll { overflow-x: auto; padding: 4px 4px 12px; }
.sheet { position: relative; min-width: 980px; max-width: 1140px; margin: 0 auto; padding: 40px 52px 52px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-paper); color: var(--doc-ink); font-family: var(--font-doc); font-size: 15px; line-height: 1.4; font-feature-settings: "lnum" 1; }
.sheet-hd { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center; font-size: 14px; }
.sheet-hd .org { font-weight: 700; text-transform: uppercase; }
.sheet-hd .qh { font-weight: 700; text-transform: uppercase; }
.sheet-hd .rule { display: block; width: 120px; height: 0; margin: 4px auto 0; border-top: 1px solid var(--doc-ink); }
.sheet-hd .motto { font-weight: 700; font-size: 15px; }
.sheet-title { margin-top: 26px; text-align: center; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.sheet-period { margin-top: 4px; text-align: center; font-style: italic; }
.sheet-meta { margin-top: 14px; }
.sheet-tbl { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14.5px; }
.sheet-tbl th, .sheet-tbl td { padding: 6px 8px; border: 1px solid oklch(0.32 0.012 258); vertical-align: middle; }
.sheet-tbl th { font-weight: 700; text-align: center; background: oklch(0.975 0.004 255); }
.sheet-tbl tr.colno td { font-style: italic; text-align: center; font-size: 13px; padding: 3px 6px; }
.sheet-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-tbl td.c { text-align: center; }
.sheet-tbl tr.tot td { font-weight: 700; }
.sheet-tbl tr.round td { font-weight: 700; font-style: italic; }
.sheet-tbl tr.dim td { color: oklch(0.45 0.015 258); }
.sheet-tbl a.amt { text-decoration-color: oklch(0.6 0.02 258); }
.sheet-note { margin-top: 10px; font-style: italic; font-size: 14px; }
.sheet-sign { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; text-align: center; }
.sheet-sign .date { grid-column: 2; font-style: italic; margin-bottom: 4px; }
.sheet-sign b { display: block; text-transform: uppercase; }
.sheet-sign i { display: block; font-size: 13.5px; }
.sheet-sign .name { display: block; margin-top: 64px; font-weight: 700; }
.sheet .seal { position: absolute; top: 118px; right: 48px; }
.sheet-draft { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); padding: 2px 10px; border: 1px dashed var(--rule); border-radius: var(--r-1); background: var(--surface); }
.ranges { display: inline; }
.ranges .more { font-family: var(--font-ui); font-size: var(--fs-13); font-weight: 600; }

/* ---------- Spreadsheet frame (S26: layout of the exported .xlsx) ---------- */
.xl { overflow: auto; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--sh-1); }
.xl table { border-collapse: collapse; font-family: var(--font-doc); font-size: 13px; color: var(--doc-ink); }
.xl th.h, .xl td.h { background: var(--sunk); color: var(--ink-3); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; text-align: center; border: 1px solid var(--line-2); padding: 2px 6px; min-width: 34px; }
.xl td { border: 1px solid var(--line); padding: 3px 6px; height: 22px; white-space: nowrap; }
.xl td.b { border: 1px solid oklch(0.35 0.012 258); }
.xl td.bold { font-weight: 700; }
.xl td.cen { text-align: center; }
.xl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.xl td.it { font-style: italic; }
.xl td.up { text-transform: uppercase; }
.xl td.fill { background: oklch(0.975 0.004 255); }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: var(--fs-14); }
.legend li { display: flex; gap: 8px; align-items: baseline; }
.legend b { min-width: 76px; }

/* ---------- Sign-in ---------- */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 520px; }
.signin-aside { display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; background: var(--surface); border-right: 1px solid var(--line-2); }
.signin-aside .ledger { max-width: 560px; }
.signin-aside h1 { font-size: 32px; letter-spacing: -0.015em; margin-top: 28px; }
.signin-aside p { margin-top: 12px; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-17); }
.signin-aside .lines { margin-top: 32px; display: grid; gap: 0; max-width: 520px; border-top: 1px solid var(--rule); }
.signin-aside .lines li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.signin-aside .lines .i { color: var(--brand); margin-top: 3px; }
.signin-form { display: grid; align-content: center; padding: 48px; }
.signin-form .box { width: 100%; max-width: 380px; margin: 0 auto; display: grid; gap: var(--s-5); }
.signin-form h2 { font-size: var(--fs-24); }
.signin-foot { font-size: var(--fs-14); color: var(--ink-3); }

/* ---------- Full-page states (no access, error, not found) ---------- */
.state-page { min-height: 70vh; display: grid; place-items: center; padding: 48px 24px; }
.state-page .box { max-width: 560px; display: grid; justify-items: start; gap: 14px; }
.state-page .code-word { font-family: var(--font-doc); font-size: 15px; color: var(--ink-3); }
.state-page h1 { font-size: 28px; }
.state-page p { color: var(--ink-2); font-size: var(--fs-17); }

/* ---------- Nhân viên shell (top tabs on desktop, bottom tabs on phone) ---------- */
.shell-top { display: block; }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-6); padding: 0 var(--pad-x); min-height: 64px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.topbar .brand { padding: 0; }
.topbar nav { display: flex; gap: 4px; align-self: stretch; }
.topbar nav a { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--ink-3); font-weight: 600; text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.topbar .me { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wrap-center { max-width: 980px; width: 100%; margin: 0 auto; }
.daycards { display: grid; gap: var(--s-2); }
.daycard { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 12px 16px; display: grid; gap: 6px; }
.daycard .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.daycard .hd b { font-size: var(--fs-17); }
.daycard dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: var(--fs-15); }
.daycard dt { color: var(--ink-3); }
.daycard dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bigfig { display: grid; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.bigfig .k { font-size: var(--fs-14); color: var(--ink-3); }
.bigfig .v { font-size: var(--fs-28); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bigfig .rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: var(--fs-15); }
.bigfig .rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bigfig .rows dt { color: var(--ink-2); }

/* ---------- Mockup-only demo control (not part of the app) ---------- */
.mk-demo { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-demo); font-family: var(--font-ui); font-size: var(--fs-13); }
.mk-demo summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; box-shadow: var(--sh-pop); margin-left: auto; }
.mk-demo summary::-webkit-details-marker { display: none; }
.mk-demo[open] summary { margin-bottom: 8px; }
.mk-demo .mk-panel { width: 300px; padding: 12px; border-radius: var(--r-3); background: var(--ink); color: oklch(0.9 0.01 258); box-shadow: var(--sh-pop); display: grid; gap: 10px; }
.mk-demo .mk-row { display: grid; gap: 4px; }
.mk-demo .mk-row > span { color: oklch(0.78 0.015 258); }
.mk-demo .mk-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-demo .mk-opts a { padding: 4px 10px; border-radius: var(--r-1); border: 1px solid oklch(0.45 0.02 258); color: #fff; text-decoration: none; font-weight: 600; }
.mk-demo .mk-opts a[aria-current="true"] { background: var(--brand-tint); color: var(--brand-strong); border-color: var(--brand-tint); }
.mk-demo .mk-opts a:hover { border-color: #fff; }
.mk-demo .mk-meta { color: oklch(0.78 0.015 258); line-height: 1.4; }
.vqa .mk-demo { display: none; }
.mk-index { max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px; }
.mk-index h1 { font-size: 28px; }
.mk-index .tbl td { vertical-align: top; }
.mk-index .tbl a { font-weight: 600; }
.mk-index .files { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* ==========================================================================
   Container breakpoints — the same markup composes for tablet and phone
   ========================================================================== */
@container app (max-width: 1180px) {
  .shell { --side-w: 228px; }
  .split { grid-template-columns: minmax(0, 1fr) 380px; }
  .grid-21 { grid-template-columns: minmax(0, 1fr); }
}

@container app (max-width: 760px) {
  .shell { display: block; background: none; }
  .side { display: none; }
  .ph-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 16px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
  .ph-bar .brand-mark { width: 32px; height: 32px; font-size: 12.5px; }
  .ph-bar .ttl { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-17); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-menu > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-2); cursor: pointer; color: var(--ink-2); }
  .ph-menu > summary::-webkit-details-marker { display: none; }
  .ph-menu > summary:hover { background: var(--sunk); }
  .ph-menu[open] > .ph-sheet { position: fixed; inset: 56px 0 0 0; z-index: var(--z-drawer); overflow: auto; background: var(--surface); border-top: 1px solid var(--line-2); }
  .ph-menu .nav { padding: 12px; }
  .ph-menu .nav a { min-height: 48px; font-size: var(--fs-17); }
  .ph-menu .side-user { border-top: 1px solid var(--line); }
  .shell { --pad-x: 16px; }
  .page-head { flex-direction: column; gap: var(--s-3); padding: 16px 16px 12px; }
  .page-head h1 { font-size: var(--fs-20); }
  .page-actions { justify-content: flex-start; width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .months { padding: 0 16px; gap: 2px; scrollbar-width: none; }
  .months .yr { display: none; }
  .mt { min-width: 60px; height: 50px; padding: 5px 6px 6px; }
  .content { padding: 16px 16px 40px; gap: var(--s-5); }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .input, .select { min-height: 44px; }
  .tabs a { min-height: 48px; padding: 0 12px; }
  .top .tabs { padding: 0 8px; }
  .grid-2, .grid-21, .form-grid, .choices { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
  .filters { padding: 12px; }
  .filters .field, .filters .field.wide { min-width: 0; flex: 1 1 100%; }
  .bulk .select { min-width: 0; flex: 1 1 100%; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div + div { border-left: 0; }
  .strip > div:nth-child(even) { border-left: 1px solid var(--line); }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .pane { position: static; }
  .steps { flex-wrap: wrap; row-gap: 8px; }
  .steps li + li::before { width: 16px; margin: 0 8px; }
  .steps li:not(.is-cur) .lbl { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hist li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .firstrun { grid-template-columns: minmax(0, 1fr); }
  .firstrun li + li { border-left: 0; border-top: 1px solid var(--line); }
  .dialog { width: calc(100% - 24px); }
  .dialog-head, .dialog-body, .dialog-foot { padding-left: 16px; padding-right: 16px; }
  .dialog-foot .btn { flex: 1 1 auto; }
  .drawer { top: 48px; width: 100%; border-left: 0; border-radius: var(--r-3) var(--r-3) 0 0; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 16px; padding-right: 16px; }
  .drawer-foot .btn { flex: 1 1 auto; }
  .sheet-bar { align-items: stretch; }
  .sheet-scroll { margin: 0 -16px; padding: 0 16px 12px; }
  .sheet { min-width: 760px; padding: 24px 24px 32px; }
  .sheet .seal { top: 104px; right: 16px; transform: rotate(-4deg) scale(0.85); }
  .pager { flex-direction: column; align-items: stretch; }
  .pager .pg { min-width: 44px; min-height: 44px; }
  .pager .row { flex-wrap: wrap; justify-content: center; }
  .seg a, .seg button { min-height: 44px; }
  .crumb, .sec-head a:not(.btn), .panel-head a:not(.btn), .panel-foot a:not(.btn), .bulk a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .fchip a { position: relative; }
  .fchip a::after { content: ""; position: absolute; inset: -12px; }
  .tbl .ell { max-width: 220px; }

  /* Tables marked .stack become one block per row on phones */
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: 100%; }
  .tbl.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tbl.stack td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tbl.stack td::before { content: attr(data-label); color: var(--ink-3); font-size: var(--fs-14); text-align: left; font-weight: 500; }
  .tbl.stack td:first-child { font-weight: 700; font-size: var(--fs-17); text-align: left; padding-bottom: 6px; }
  .tbl.stack td:first-child::before { content: none; }
  .tbl.stack td.chk::before, .tbl.stack td[data-label=""]::before { content: none; }
  .tbl.stack td.chk { justify-content: flex-start; }
  .tbl.stack tr.tot { border-top: 1px solid var(--ink-2); border-bottom: 3px double var(--ink-2); }
  .tbl.stack tr.tot td { border: 0; }
  .tbl.stack tr.grp, .tbl.stack tr.sub { background: var(--surface-2); }
  .tbl.stack tbody tr:hover td { background: none; }
  .tbl.stack .tag { white-space: normal; }
  .tbl.stack td::before { flex: 0 0 auto; max-width: 50%; }
  .tbl.stack td > .cv { display: block; min-width: 0; text-align: right; }
  .tbl.stack td:first-child > .cv, .tbl.stack td.chk > .cv { text-align: left; }
  .tbl.stack td:has(> .cv > .dash:only-child) { display: none; }
  .row-wrap > .field { flex: 1 1 100%; }
  .row-wrap > .field .select { width: 100%; }
  .tbl.stack tr.is-sel { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand-tint); }
  .tbl.stack tr.is-sel td { background: none; }
  .filters .select, .filters .input { width: 100%; }
  .note { flex-wrap: wrap; }
  .note > .grow { flex-basis: calc(100% - 36px); }
  .note > .grow ~ * { margin-left: 30px; }

  /* Signin */
  .signin { grid-template-columns: minmax(0, 1fr); }
  .signin-aside { padding: 24px 20px 20px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .signin-aside h1 { font-size: 24px; margin-top: 16px; }
  .signin-aside p { font-size: var(--fs-15); }
  .signin-aside .lines, .signin-aside .foot-note { display: none; }
  .signin-form { padding: 24px 20px 40px; align-content: start; }

  /* Nhân viên: bottom tabs */
  .topbar { min-height: 56px; padding: 0 16px; }
  .topbar nav { display: none; }
  .topbar .me .who { display: none; }
  .ph-tabs { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom); }
  .ph-tabs a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 60px; color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; text-decoration: none; }
  .ph-tabs a .i { width: 22px; height: 22px; }
  .ph-tabs a[aria-current="page"] { color: var(--brand-strong); box-shadow: inset 0 3px 0 var(--brand); }
  .state-page h1 { font-size: 22px; }
}

/* The demo control sits outside .app, so it follows the browser width, not the container */
@media (max-width: 559px) {
  .mk-demo { bottom: 76px; right: 10px; }
  .mk-demo .mk-panel { width: min(300px, calc(100vw - 20px)); }
}

/* Phone frame preview: on a wide browser a phone file shows a 390x844 device */
@media (min-width: 560px) {
  body.ph { background: oklch(0.32 0.02 258); padding: 28px 0 40px; }
  body.ph .app { width: 390px; height: 844px; min-height: 0; margin: 0 auto; overflow: auto; border-radius: 22px; background: var(--bg); box-shadow: 0 0 0 10px oklch(0.18 0.015 258), 0 30px 60px -20px oklch(0 0 0 / 0.6); transform: translateZ(0); scrollbar-width: none; }
  body.ph .app::-webkit-scrollbar { display: none; }
  body.ph .side { height: auto; }
  body.ph .mk-demo { position: fixed; right: 24px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}