/* Khung chung web Bao gia noi that, GIAO DIEN V2 (lane uxkhung2, 05/10/2026), thanh ben sang phang dinh mep
   trai, vung lam viec phang. Bo thiet ke 21/10/2026 (nhanh giaodien): MAU, chu, khoang, chuyen dong doc tu
   tokens-mau.css (hop dong bien, ba chu de 1, 2, 3 chon bang <html data-chu-de>); tep nay chi tinh bi danh
   va ve thanh phan PHANG (nut, o nhap, bang, nhan, thong bao). Doi chu de = doi tokens-mau.css, khong sua
   tep nay. Khong dung color-mix(): moi sac phu (nhat, dam, vien) la mau TINH tinh san trong tokens-mau.css
   (scripts/sac_phu.py), nen chay chac tren Chromium cu cua may phong. Chi nen sang, khong che do toi.
   Tep nay gom: token (bi danh), nen, khung (thanh ben, vung lam viec), chuyen canh, thanh phan dung chung.
   CSS rieng tung man o static/man-<man>.css (trang con dat `{% set man = "<man>" %}`). Trang cu chua dung
   lai giu <main class="trang"> (static/trang-cu.css). Luat cho lane man: docs/quyet-dinh/giao-dien-khung-v2.md.
   Phong chu (Inter, Source Sans 3, IBM Plex Sans, woff2 bien thien, OFL) khai bao o tokens-mau.css. */

/* ================================================================ token (bi danh cua tokens-mau.css)
   Ten bien cua app (--ink, --accent, --surface...) chi la BI DANH tinh tu bien chu de (--chu, --chinh,
   --be-mat...) va sac phu tinh san (--line, --row-hover...) khai bao o tokens-mau.css, nap truoc tep nay.
   man-*.css khong ghi hex. */
:root {
  /* chu: chinh, phu dam, phu (>= 4.5:1 tren nen trang), mo (so dong, chu khong quan trong) */
  --ink: var(--chu); --muted: var(--chu-phu);
  /* mat bang kieu Excel: o trang, duong luoi, dau cot, cot so dong (--ink-2, --faint, --surface-3, --line,
     --line-strong, --hdr-top, --rowno, --row-hover la sac phu tinh san o tokens-mau.css) */
  --surface: var(--be-mat); --surface-2: var(--be-mat-2); --group-row: var(--be-mat-2);
  /* do CHI cho chan va nguy hiem; cam cho can xem; xanh la cho xong, da luu */
  --danger: var(--nguy); --danger-soft: var(--nguy-nhat); --danger-grad: var(--nguy);
  --warn: var(--canh-bao); --warn-soft: var(--canh-bao-nhat);
  --ok: var(--dat); --ok-soft: var(--dat-nhat); --ok-grad: var(--dat);
  --on-fill: var(--tren-chinh);           /* chu tren nen dac (do, cam, xanh la) */
  /* nut PHANG (phuong an 1): mat dac, khong vien, khong bong; ten bien --btn-* giu cho man cu */
  --btn-bg: var(--be-mat-2); --btn-line: transparent; --btn-line-dn: transparent;
  --btn-shadow: none; --btn-shadow-hover: none; --btn-shadow-down: none;
  --shadow-card: var(--bong-1);
  --shadow-pop: var(--bong-2);
  /* BONG, ba tang duy nhat: nam (--shadow-card = --bong-1: the, khung bang, thong bao), noi (--shadow-pop = --bong-2: hop thoai, menu,
     bang nho, the nhac len khi re chuot), duoi dau bang khi cuon (--shadow-cuon). Khong ghi rgba rieng trong man-*.css. */
  --shadow-cuon: 0 8px 10px -8px var(--bong-dinh);
  /* thanh ben phang, sang: mat trang, vien phai mong */
  --ray-w: 200px;
  --ray-bg: var(--be-mat);
  --ray-ink: var(--chu-phu); --ray-ink-hover: var(--chu); --ray-ink-on: var(--chinh-dam);
  --toast-bg: var(--chu);
  /* chu */
  --font: var(--phong-chu);
  --font-num: var(--phong-so);
  /* CO CHU: bon nac cua hop dong (12, 14, 16, 20) cong 13 va 17 cho giao dien nghiep vu, co dinh; 3xs, 2xs, nhan (11, 12, 12; uidoc 06/11: nang tu 10, 11 vi chu mang nghia khong duoi 11 px) cho huy hieu, phim tat, dau cot; so lon: 24 (o tong), 22 (the Tong hop) */
  --fs-so: 24px; --fs-so-the: 22px;
  --fs-3xs: 11px; --fs-2xs: 12px; --fs-nhan: 12px; --fs-xs: var(--co-nho); --fs-sm: 13px; --fs-md: var(--co-vua); --fs-lg: var(--co-lon); --fs-xl: 17px; --fs-2xl: var(--co-tieu-de);
  /* DO DAM, bon nac: thuong (van ban), vua (nut, muc menu), dam (nhan, dau cot, tieu de the), dam nhat (so nhan, huy hieu) */
  --fw-thuong: 400; --fw-vua: 500; --fw-dam: 600; --fw-dam-nhat: 700;
  /* CHIEU CAO DONG, ba nac: tieu de / so lon / dau cot 1.2, dong gon trong bang va o (nhan, loi, tooltip) 1.3, van ban doc 1.45. Chu 1 dong trong huy hieu giu 1 */
  --lh-tieu-de: 1.2; --lh-dong: 1.3; --lh-van: 1.45;
  /* tieu de trang: MOT kieu cho moi man (h1 cua .khung-trang, .dau-hs, trang cu, .tieu-de-trang) */
  --fs-h1: var(--fs-2xl); --fw-h1: 600;
  /* khoang cach */
  --s1: var(--k1); --s2: var(--k2); --s3: var(--k3); --s4: var(--k4); --s5: var(--k5); --s6: var(--k6);
  /* bo goc: nhan nho, dieu khien, khung va the */
  --r-sm: var(--bo-goc-nho); --r-ctl: var(--bo-goc); --r-box: var(--bo-goc-lon);
  /* chieu cao: nut va o nhap, dong bang kieu Excel. --h-top = 0: khong con thanh tren */
  --h-top: 0px; --h-ctl: 36px; --h-ctl-nho: 28px; --h-chip: 30px; --h-row: 28px;
  --ease: var(--cong-ra);
  --t-nhanh: var(--tg-nhanh); --t-canh: var(--tg-vua);
  /* lop chong */
  --z-sticky: 10; --z-pop: 30; --z-overlay: 40; --z-dialog: 50; --z-toast: 60;
  /* man ngang (uiland 02/11/2026): le trang co dan theo be rong (Utopia, clamp), khung doc toi da 1680px de o 1920
     khong bo trong ben phai; o 1366 le thu ve 20px. Moi man cuon (.khung-trang, main.trang, .tc, .nop-man, .rong) dung chung. */
  --rong-trang: 1680px; --le-trang: clamp(20px, 2.2vw, 40px);

  /* ---- bi danh CU: chi de CSS cu trong man-*.css va trang-cu.css chay dung tren token moi.
     Lane man KHONG dung ten nao duoi day; viet lai man thi xoa phan cu. */
  --paper: var(--bg); --paper-deep: var(--surface-3); --panel: var(--surface); --panel-alt: var(--surface-2);
  --ink-soft: var(--muted); --ink-faint: var(--faint); --rule: var(--line); --rule-strong: var(--line-strong);
  --rust: var(--danger); --rust-fill: var(--danger); --rust-soft: var(--danger-soft);
  --gold: var(--warn-line); --gold-fill: var(--warn); --gold-soft: var(--warn-soft);
  --green: var(--ok-line); --green-fill: var(--ok); --green-soft: var(--ok-soft);
  --steel: var(--accent-line); --steel-fill: var(--accent); --steel-soft: var(--accent-soft);
  --nhan: var(--accent); --nhan-soft: var(--accent-soft); --nhan-ink: var(--accent-ink);
  --focus-ring: var(--focus); --grid: var(--line); --head: var(--surface-2); --group-bg: var(--surface-3);
  --need-bg: var(--danger-soft); --need-line: var(--danger); --need-ink: var(--danger); --need-pill: var(--danger-soft);
  --ask-pill: var(--accent-soft); --ask-ink: var(--accent); --done: var(--ok);
  --red: var(--danger); --red-bg: var(--danger-soft); --warn-bg: var(--warn-soft);
  --blue-bg: var(--accent-soft); --blue-ink: var(--accent);
  --font-mono: var(--font-num);
  color-scheme: light;
}

/* ================================================================ bieu tuong nhung (mask CSS)
   Lucide 1.60.0 (ISC), net 2 px, nhung san thanh data: URI de nhan, o loi, thong bao co bieu tuong ma khong
   sua template: dung `-webkit-mask: var(--ic-...) center / contain no-repeat` (mau lay theo currentColor).
   --ic-xuong la mui ten xo xuong cua select, to mau xam co dinh vi dung background-image. */
:root {
  --ic-cham: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
  --ic-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M4.929 4.929 19.07 19.071'/%3E%3C/svg%3E");
  --ic-canh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ic-canh-tron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --ic-tich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  --ic-quay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4'/%3E%3Cpath d='m16.2 7.8 2.9-2.9'/%3E%3Cpath d='M18 12h4'/%3E%3Cpath d='m16.2 16.2 2.9 2.9'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='m4.9 19.1 2.9-2.9'/%3E%3Cpath d='M2 12h4'/%3E%3Cpath d='m4.9 4.9 2.9 2.9'/%3E%3C/svg%3E");
  --ic-tep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/svg%3E");
  --ic-nhieu-gia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E");
  --ic-gia-tam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/svg%3E");
  --ic-chua-chac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ic-mo-hinh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
  --ic-dung-lai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  --ic-loi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16h.01'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E");
  --ic-thong-tin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ic-dau-tich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-dong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --ic-xuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596273' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ================================================================ token cua khung (bo cuc phang)
   --accent: chu lien ket, vien dang chon (>= 4.5:1 tren trang); --accent-grad: mat nut chinh (phang:
   mot mau dac); --sel: dong dang chon. Thanh ben dinh mep trai, vung lam viec phang tren nen. */
:root {
  --canvas: var(--nen); --canvas-art: none; --bg: var(--nen);
  --accent: var(--chinh); --accent-hover: var(--chinh-dam); --accent-deep: var(--chinh-dam); --accent-soft: var(--chinh-nhat);
  --accent-ink: var(--tren-chinh);
  --accent-grad: var(--chinh);
  --sel: var(--chinh-nhat); --sel-bar: var(--chinh);
  --focus: var(--vong-focus);
  --ray-margin: 0px; --ray-radius: 0px;
  --ray-shadow: inset -1px 0 0 var(--vien);
  --vung-margin: 0px; --vung-radius: 0px; --vung-shadow: none;
}

/* ================================================================ nen */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh-van); color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh;
}
/* mang mau nen (C): lop co dinh sau moi thu, khong ve lai khi cuon */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--canvas-art); pointer-events: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* <small> trần: trình duyệt cho 83% cỡ cha (11,7 px dưới chữ 14 px, 10,8 px dưới chữ 13 px); đặt sàn ở cỡ nhỏ của chủ đề (12 px) */
small { font-size: var(--fs-xs); }
[hidden] { display: none !important; }
/* VIEN BAN PHIM, MOT kieu cho moi thanh phan: outline 2 px mau nhan, cach 2 px (--fv-off); hop co the bi cat o mep thi lui vao
   trong (--fv-trong). Chi hien khi bam phim (:focus-visible), bam chuot khong hien. Dung --fv-*, khong tu ve vong bang box-shadow. */
:root { --fv-w: 2px; --fv-off: 2px; --fv-trong: -2px; }
:focus-visible { outline: var(--fv-w) solid var(--accent); outline-offset: var(--fv-off); }
::selection { background: var(--sel); }
.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--so-tinh-nang); white-space: nowrap; }
.sonum, [data-so] { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--so-tinh-nang); }
[data-so] { text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chua-gia { color: var(--muted); font-style: italic; font-family: var(--font); font-weight: var(--fw-thuong); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
kbd {
  font-family: var(--font-num); font-size: var(--fs-2xs); font-weight: var(--fw-dam); line-height: 1; padding: 2px 5px; border-radius: 4px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); box-shadow: 0 1px 0 var(--line-strong);
}
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================ chuyen canh
   Chuyen trang cung goc: trinh duyet tu cross-fade (Edge, Chrome tu ban 126). Thanh ben dung yen
   (nhom rieng, khong hieu ung); noi dung moi truot len 4px khi la chuyen trang that (type chuyen-trang),
   manh htmx (globalViewTransitions trong base.html) chi cross-fade. Bam xuyen lop chuyen canh duoc. */
@view-transition { navigation: auto; types: chuyen-trang; }
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: var(--t-canh); animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-canh); animation-timing-function: var(--ease); }
html:active-view-transition-type(chuyen-trang)::view-transition-old(root) { animation: vt-ra var(--tg-nhanh) var(--cong-vao) both; }
html:active-view-transition-type(chuyen-trang)::view-transition-new(root) { animation: vt-vao var(--tg-vua) var(--cong-ra) calc(var(--tg-nhanh) / 2) both; }
::view-transition-group(thanh-ben), ::view-transition-old(thanh-ben), ::view-transition-new(thanh-ben) { animation: none; }
::view-transition-old(thanh-ben) { display: none; }
@keyframes vt-ra { to { opacity: 0; } }
@keyframes vt-vao { from { opacity: 0; transform: translateY(4px); } }

/* ================================================================ khung: thanh ben + vung lam viec
   body.khung-thuong (mac dinh): trang cuon ca trang, thanh ben dinh theo man hinh.
   body.khung-ung-dung: vua dung man hinh, vung lam viec tu chia (Soat, Tong hop...). */
.khung-app { display: flex; align-items: flex-start; min-height: 100vh; min-height: 100dvh; }
body.khung-ung-dung { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.khung-ung-dung > .khung-app { flex: 1; min-height: 0; align-items: stretch; }

/* Thanh ben thu gon duoc (bo thiet ke dieu-huong/pa-1): mo 200 px co chu, thu 56 px chi con bieu tuong.
   <html data-ben="mo|thu"> do script dau trang dat (base.html), nut cuoi thanh ben va phim [ doi (giao-dien.js). */
html[data-ben="thu"] { --ray-w: 56px; }
.thanh-ben {
  flex: none; width: var(--ray-w); height: calc(100vh - 2 * var(--ray-margin)); height: calc(100dvh - 2 * var(--ray-margin)); position: sticky; top: var(--ray-margin);
  margin: var(--ray-margin) 0 var(--ray-margin) var(--ray-margin); border-radius: var(--ray-radius);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 8px;
  color: var(--ray-ink); background: var(--ray-bg); box-shadow: var(--ray-shadow);
  overflow: hidden auto; scrollbar-width: none; z-index: var(--z-sticky); view-transition-name: thanh-ben;
  transition: width var(--tg-vua) var(--cong-ra);
}
.thanh-ben::-webkit-scrollbar { display: none; }
.thanh-ben .logo {
  flex: none; align-self: flex-start; width: 40px; height: 40px; border-radius: var(--bo-goc-lon); display: grid; place-items: center; margin: 0 0 12px 2px;
  font: var(--fw-dam-nhat) 14px var(--font-num); letter-spacing: .02em; color: var(--tren-chinh); text-decoration: none;
  background: var(--chinh);
  transition: background-color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.thanh-ben .logo:hover { color: var(--tren-chinh); background: var(--chinh-dam); }
.thanh-ben .logo:active { transform: var(--lun); }
.thanh-ben .muc {
  flex: none; position: relative; padding: 9px 10px; border-radius: var(--bo-goc-lon); color: inherit; text-decoration: none;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left;
  font-size: var(--fs-md); font-weight: var(--fw-vua); line-height: var(--lh-tieu-de);
  transition: background-color var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.thanh-ben .muc:not(.tat):active { transform: var(--lun-rong); }
.thanh-ben .muc br { display: none; }
.thanh-ben .muc .ic { width: 20px; height: 20px; stroke-width: 1.8; transition: color var(--t-nhanh) var(--ease); }
.thanh-ben .muc:hover { background: var(--be-mat-2); color: var(--ray-ink-hover); }
/* cho "Dang mo" giu san khi chua mo ho so nao: mo, khong bam duoc, thanh ben khong nhay */
.thanh-ben .muc.tat { opacity: .45; cursor: default; }
.thanh-ben .muc.tat:hover { background: none; color: inherit; }
/* muc dang mo: nen nhat cua mau chinh, chu dam, vach doc o mep thanh ben (khong bong, khong phat sang) */
.thanh-ben .muc.on { color: var(--ray-ink-on); background: var(--chinh-nhat); font-weight: var(--fw-dam); }
.thanh-ben .muc.on .ic { color: var(--chinh); }
.thanh-ben .muc.on::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0;
  background: var(--chinh);
}
.thanh-ben .day { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; }
/* o "May dang doc" (manh /khung/viec-may): chi hien khi co viec nen dang chay */
.thanh-ben .viec-may {
  flex: none; margin-top: 6px; padding: 8px 10px; border-radius: var(--bo-goc-lon); color: var(--ray-ink-hover); text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--fs-sm); line-height: var(--lh-tieu-de); text-align: left;
  background: var(--chinh-nhat); transition: background-color var(--t-nhanh) var(--ease);
}
.thanh-ben .viec-may:hover { background: var(--viec-may-hover); color: var(--ray-ink-on); }
.thanh-ben .viec-may .ic { width: 22px; height: 22px; color: var(--chinh); animation: nhip 1.6s var(--ease) infinite; }
.thanh-ben .viec-may .nh { width: 100%; min-width: 0; }
.thanh-ben .viec-may b { display: block; font-weight: var(--fw-dam); color: var(--ray-ink-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-ben .viec-may .sonum { color: var(--ray-ink); }
.mini-bar { flex: none; width: 56px; height: 4px; border-radius: 2px; background: var(--vien); overflow: hidden; }
.mini-bar i { display: block; height: 100%; width: 100%; background: var(--chinh); transform-origin: left; transition: transform var(--tg-cham) var(--ease); }
/* doi kieu giao dien: ba nut, mo thi co ten chu de, thu thi chi con so; nut dang dung noi len thanh the trang */
.doi-kieu { display: flex; flex-direction: column; align-items: stretch; gap: 5px; font-size: var(--fs-sm); color: var(--ray-ink); padding: 0 2px; }
.doi-kieu > span { padding-left: 8px; }
.doi-kieu .cap { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: var(--bo-goc-lon); background: var(--be-mat-2); }
.doi-kieu button {
  position: relative; width: 100%; height: 30px; border: 0; border-radius: var(--bo-goc); background: transparent; color: var(--ray-ink); cursor: pointer;
  font: var(--fw-vua) var(--fs-sm) var(--font); display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 8px; text-align: left;
  transition: background-color var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.doi-kieu button:active { transform: var(--lun-rong); }
.doi-kieu button b { width: 14px; text-align: center; font-weight: var(--fw-dam); font-family: var(--font-num); }
.doi-kieu .ten-cd { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* vach mau nho duoi so: mau chinh cua chu de, de nhan ra chu de nao truoc khi bam */
.doi-kieu button::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--mau); opacity: .55; }
.doi-kieu [data-kieu="1"] { --mau: #2851c4; }
.doi-kieu [data-kieu="2"] { --mau: #1b5b66; }
.doi-kieu [data-kieu="3"] { --mau: #10389a; }
.doi-kieu button:hover { color: var(--ray-ink-hover); }
.doi-kieu button[aria-pressed="true"] { color: var(--ray-ink-hover); background: var(--be-mat); box-shadow: var(--bong-1); font-weight: var(--fw-dam); }
.doi-kieu button[aria-pressed="true"]::after { opacity: 1; }
/* nut thu gon / mo rong o cuoi thanh ben */
.thanh-ben .thu-gon {
  flex: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--bo-goc-lon);
  background: transparent; color: var(--ray-ink); cursor: pointer; font: var(--fw-vua) var(--fs-md) var(--font); text-align: left; position: relative;
  transition: background-color var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.thanh-ben .thu-gon:hover { background: var(--be-mat-2); color: var(--ray-ink-hover); }
.thanh-ben .thu-gon:active { transform: var(--lun-rong); }
.thanh-ben .thu-gon .ic { width: 20px; height: 20px; transition: transform var(--tg-vua) var(--cong-ra); }
.thanh-ben .thu-gon .chu { flex: 1; min-width: 0; }
.thanh-ben .thu-gon kbd {
  flex: none; min-width: 20px; padding: 1px 5px; border: 1px solid var(--vien); border-radius: var(--bo-goc-nho); background: var(--be-mat);
  font: var(--fw-dam) var(--fs-sm) var(--font-num); text-align: center; color: var(--ray-ink);
}
/* THU GON (>= 761 px): chi con bieu tuong, ten muc hien o goi y (data-tip) khi re chuot hoac Tab vao; ten van doc
   duoc bang trinh doc man hinh (chu chi bi cat khoi mat, khong bi bo). */
@media (min-width: 761px) {
  html[data-ben="thu"] .thanh-ben { padding: 12px 6px; overflow: visible; z-index: var(--z-pop); }
  html[data-ben="thu"] .thanh-ben .logo { align-self: center; margin-left: 0; }
  html[data-ben="thu"] .thanh-ben .muc, html[data-ben="thu"] .thanh-ben .thu-gon { justify-content: center; padding: 10px 0; }
  html[data-ben="thu"] .thanh-ben .muc > span, html[data-ben="thu"] .thanh-ben .thu-gon .chu, html[data-ben="thu"] .thanh-ben .thu-gon kbd,
  html[data-ben="thu"] .doi-kieu > span, html[data-ben="thu"] .doi-kieu .ten-cd {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html[data-ben="thu"] .thanh-ben .muc.on::before { left: -6px; }
  html[data-ben="thu"] .thanh-ben .thu-gon .ic { transform: rotate(180deg); }
  html[data-ben="thu"] .thanh-ben .viec-may { padding: 8px 0; align-items: center; }
  html[data-ben="thu"] .thanh-ben .viec-may .nh, html[data-ben="thu"] .thanh-ben .viec-may .sonum { display: none; }
  html[data-ben="thu"] .thanh-ben .viec-may .mini-bar { width: 32px; }
  html[data-ben="thu"] .doi-kieu { padding: 0; }
  html[data-ben="thu"] .doi-kieu button { justify-content: center; padding: 0; }
  html[data-ben="thu"] .doi-kieu button b { width: auto; }
  html[data-ben="thu"] .thanh-ben .muc::after, html[data-ben="thu"] .thanh-ben .thu-gon::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; z-index: var(--z-pop); transform: translate(-4px, -50%);
    padding: 5px var(--k3); border-radius: var(--bo-goc); background: var(--chu); color: var(--be-mat); font-size: var(--co-nho); font-weight: var(--fw-dam);
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity var(--tg-nhanh) var(--cong-ra), transform var(--tg-nhanh) var(--cong-ra);
  }
  html[data-ben="thu"] .thanh-ben .muc:hover::after, html[data-ben="thu"] .thanh-ben .muc:focus-visible::after,
  html[data-ben="thu"] .thanh-ben .thu-gon:hover::after, html[data-ben="thu"] .thanh-ben .thu-gon:focus-visible::after {
    opacity: 1; transform: translate(0, -50%); transition-delay: 250ms;
  }
  html[data-ben="thu"] .thanh-ben .muc:focus-visible::after, html[data-ben="thu"] .thanh-ben .thu-gon:focus-visible::after { transition-delay: 0ms; }
}

/* vung lam viec: A phang tren nen; C tam noi bo goc co bong */
.vung {
  flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column;
  min-height: calc(100vh - 2 * var(--vung-margin)); min-height: calc(100dvh - 2 * var(--vung-margin));
  margin: var(--vung-margin) var(--vung-margin) var(--vung-margin) calc(var(--vung-margin) * 5 / 6);
  border-radius: var(--vung-radius); background: var(--bg); box-shadow: var(--vung-shadow); overflow: clip;
}
body.khung-ung-dung .vung { min-height: 0; overflow: hidden; }

/* trang cuon thuong cua man moi: <main class="khung-trang"> (block main_class) */
/* bo rong cho trang doc nhung CANH TRAI (soat dep L1a): chuyen man khong nhay vi tri tieu de */
.khung-trang { width: 100%; max-width: 1280px; margin: 0; padding: 20px 28px 40px; }
/* man ngang (uiland 02/11/2026): tu 1500px tro len bo tran 1280/1400 de khung doc dung het be rong (toi da --rong-trang),
   le co dan theo man. Tien to :root dua do uu tien len tren .khung-trang.rong/.tc/.nop-man cua man-*.css nap sau.
   Duoi 1500px (1366x768) giu nguyen khung cu. */
@media (min-width: 1500px) {
  :root .khung-trang, :root .khung-trang.rong, :root .khung-trang.tc, :root .khung-trang.nop-man, :root main.trang {
    max-width: var(--rong-trang); padding-inline: var(--le-trang);
  }
}
/* tieu de trang: mot co, mot do dam cho moi man (soat dep V2); man nao can h1 ngoai .khung-trang
   va .dau-hs thi gan lop .tieu-de-trang, KHONG tu dat co chu rieng */
.tieu-de-trang, .khung-trang h1, .dau-hs h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: -.01em; line-height: var(--lh-tieu-de); margin: 0; }
.khung-trang h2 { margin: 0; }
.khung-trang p { margin: 0; }
/* dau trang: tieu de trai, mot nut chinh phai */
.dau-trang { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.dau-trang .tom { color: var(--muted); }
.dau-trang > .btn:last-child { margin-left: auto; }
/* duong dan (soat dep V3): MOT thanh phan cho moi man, dat ngay tren tieu de trang.
   <nav class="duong-dan" aria-label="Đường dẫn"><ol><li><a href="/kho">Kho giá vốn</a></li>
   <li aria-current="page">Nhập bảng giá</li></ol></nav> (macro duong_dan trong _khung.html).
   Dau "›" xam do CSS ve; muc cuoi la trang dang xem, chu dam, khong la lien ket.
   .duong-dan-ve: kieu cu go dau "›" bang tay, cung mat chu cho toi khi man dung lai. */
.duong-dan, .duong-dan-ve { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 4px; line-height: var(--lh-dong); }
.duong-dan ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.duong-dan li { display: inline-flex; align-items: center; min-width: 0; }
.duong-dan li + li::before { content: "›"; margin: 0 7px; color: var(--faint); }
.duong-dan a, .duong-dan-ve a { color: var(--muted); text-decoration: none; }
.duong-dan a:hover, .duong-dan-ve a:hover { color: var(--accent); text-decoration: underline; }
.duong-dan [aria-current="page"] { color: var(--ink-2); font-weight: var(--fw-vua); }

/* ================================================================ nut PHANG (phuong an 1, bo thiet ke 21/10)
   .btn mat phu dac (--btn-bg), khong vien, khong bong; .btn.chinh mat mau chinh (moi man MOT); .btn.nguy
   do nhat, do dac khi re chuot (luat "do dac V5b" duoc thay 29/10 theo mau pa-1).
   Re chuot doi sang sac dam hon, nhan thu nho con 98 phan tram. Dang gui (htmx) thi chu mo, vong quay hien
   sau 220 ms (gui nhanh hon thi khong nhay). Ten lop giu nhu khung v1 de moi man tu an kieu moi. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--k2); height: var(--h-ctl);
  padding: 0 var(--k4); margin: 0; white-space: nowrap; border-radius: var(--r-ctl); cursor: pointer; text-decoration: none;
  line-height: 1; font-weight: var(--fw-dam); font-size: var(--fs-md); color: var(--chu); --spin: var(--chu-phu);
  border: 1px solid var(--btn-line); background: var(--btn-bg); box-shadow: var(--btn-shadow); user-select: none;
  transition: background-color var(--tg-nhanh) var(--cong-ra), color var(--tg-nhanh) var(--cong-ra), border-color var(--tg-nhanh) var(--cong-ra), transform var(--tg-nhanh) var(--cong-ra), box-shadow var(--tg-nhanh) var(--cong-ra);
}
.btn .ic { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover { color: var(--chu); background: var(--vien); }
.btn:active { transform: var(--lun); background: var(--btn-an); }
.btn.rong:active { transform: var(--lun-rong); }
.btn.chinh { --spin: var(--tren-chinh); color: var(--accent-ink); background: var(--accent-grad); }
.btn.chinh:hover { color: var(--accent-ink); background: var(--chinh-dam); }
.btn.chinh:active { background: var(--chinh-an); }
/* nguy: nen do nhat, chu do; CHI do dac khi re chuot hay nhan (bo thiet ke nut-bam/pa-1, operator chot 29/10).
   Moi nut Xoa, Ngung dung, Go dot dung kieu nay, ke ca nut xac nhan cuoi trong hop thoai; .vien giu lam bi danh cu. */
.btn.nguy { color: var(--danger); background: var(--danger-soft); --spin: var(--danger); }
.btn.nguy:hover { color: var(--on-fill); background: var(--danger); }
.btn.nguy:active { color: var(--on-fill); background: var(--danger); }
.btn.lon { height: 40px; padding: 0 var(--k5); }
.btn.nho { height: var(--h-ctl-nho); padding: 0 var(--k3); gap: var(--k1); font-size: var(--fs-xs); border-radius: var(--bo-goc); }
.btn.nho .ic { width: 14px; height: 14px; }
.btn.rong { width: 100%; }
/* nut dong (x) o khung chi tiet Kho, Vat lieu va hop thoai: lun cung kieu nut */
.dong-x { transition: color var(--t-nhanh) var(--ease), border-color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease); }
.dong-x:active { transform: var(--lun); }
/* nut CHU (khong nen, chu mau chinh): thao tac phu nhu Hoan tac, Bo qua lan nay; nut chi co bieu tuong
   (.chi-ico) phai co nhan an cho trinh doc man hinh (.sr) hoac aria-label. */
.btn.chu { background: transparent; color: var(--accent); }
.btn.chu:hover { background: var(--accent-soft); color: var(--accent); }
.btn.chu:active { background: var(--accent-soft); color: var(--accent-hover); }
.btn.chi-ico { width: var(--h-ctl); padding: 0; }
.btn.nho.chi-ico { width: var(--h-ctl-nho); padding: 0; }
.so-dem {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--tren-chinh); color: var(--chinh); font: var(--fw-dam-nhat) var(--fs-xs) var(--font-num);
}
/* tat: dat SAU cac bien the de thang tat ca */
.btn[disabled], .btn.khoa, .btn[disabled]:hover, .btn.khoa:hover, .btn[disabled]:active, .btn.khoa:active {
  color: var(--chu-phu); background: var(--be-mat-2); border-color: transparent; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn .xoay, .xoay {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: xoay .7s linear infinite; flex: none;
}
.btn.dang { cursor: progress; }
/* dang gui: htmx gan .htmx-request len phan tu gui (nut co hx-post, hay form co nut gui). Chu va bieu tuong
   mo di (giu be rong nut), vong quay hien o giua sau 220 ms. */
.btn.htmx-request, form.htmx-request .btn[type="submit"] {
  pointer-events: none; cursor: progress; color: transparent;
  transition: color 0s linear 220ms, background-color var(--tg-nhanh) var(--cong-ra);
}
.btn.htmx-request::after, form.htmx-request .btn[type="submit"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; opacity: 0;
  border: 2px solid var(--spin); border-right-color: transparent;
  animation: xoay .8s linear infinite, hien-vong 0s linear 220ms forwards;
}
.btn.htmx-request kbd, form.htmx-request .btn[type="submit"] kbd { opacity: 0; }
.btn kbd { background: rgba(255, 255, 255, .25); border-color: transparent; box-shadow: none; color: inherit; }
/* phím tắt trên nút đặc: nền đậm hơn nút (đã có sắc phụ khi bấm), chữ trắng >= 4,5:1 (trước đây 3,95:1 trên nền trắng 25%) */
.btn.chinh kbd { background: var(--chinh-an); }
.btn.nguy kbd { background: var(--nguy-an); }
.btn:not(.chinh):not(.nguy) kbd { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1px 0 var(--line-strong); color: var(--ink-2); }
@keyframes xoay { to { transform: rotate(360deg); } }
@keyframes hien-vong { to { opacity: 1; } }
/* lien ket dang nut: thao tac phu, thao tac hiem dung (ngung dung, go dot) */
.lk {
  background: none; border: 0; padding: 0; margin: 0; color: var(--accent); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; font-weight: var(--fw-vua); font-size: inherit;
}
.lk:hover { color: var(--accent-hover); }
.lk.nguy { color: var(--danger); }
.lk.nguy:hover { color: var(--danger-hover); }
.lk.mo { color: var(--muted); }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ================================================================ o nhap: lom nhe vao mat */
.o {
  height: var(--h-ctl); padding: 0 var(--k3); border: 1px solid var(--vien-o); border-radius: var(--r-ctl); background: var(--surface);
  min-width: 0; color: var(--ink);
  transition: border-color var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease), background-color var(--t-nhanh) var(--ease);
}
textarea.o { height: auto; min-height: 76px; padding: var(--k2) var(--k3); resize: vertical; line-height: var(--lh-van); }
.o:hover { border-color: var(--chu-phu); }
.o:focus-visible { border-color: var(--sel-bar); }
.o::placeholder { color: var(--cho-o); opacity: 1; }
/* vien o nhap dung --vien-o (dat 3:1 voi nen trang), KHONG dung --vien (chi la duong ke trang tri, 1,4:1) */
.o.loi-o, .o[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.o[disabled] { background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; box-shadow: none; }
.o[readonly] { background: var(--nen); border-style: dashed; cursor: default; }
select.o {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: var(--ic-xuong); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
/* khoi so kem don vi: o so va ĐVT dung lien, don vi la chu khong sua duoc (<div class="ghep"><input class="o num"><span class="dvt">m²</span></div>) */
.ghep { display: flex; min-width: 0; }
.ghep > .o { flex: 1; min-width: 0; border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.ghep > .o:focus { position: relative; z-index: 1; }
.ghep > .dvt {
  display: flex; align-items: center; padding: 0 var(--k3); border: 1px solid var(--vien-o); border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  background: var(--surface-2); color: var(--muted); font-weight: var(--fw-dam); white-space: nowrap;
}
.truong { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.truong > span:first-child, .truong > label:first-child { font-size: var(--fs-xs); color: var(--chu-phu); font-weight: var(--fw-dam); }
.truong .goi-y { font-size: var(--fs-xs); color: var(--muted); }
/* cau loi ngay duoi o: bieu tuong canh bao + chu do dam (viec nao sai, sua the nao nam trong chinh cau) */
.bao-loi { display: flex; gap: 4px; align-items: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-dam); line-height: var(--lh-dong); color: var(--danger); }
.bao-loi::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; background: currentColor; -webkit-mask: var(--ic-canh-tron) center / contain no-repeat; mask: var(--ic-canh-tron) center / contain no-repeat; }
input[type=checkbox], input[type=radio] { accent-color: var(--sel-bar); width: 16px; height: 16px; }

/* ================================================================ nhan trang thai
   Vien thuoc nen nhat (bo thiet ke 21/10, nhan/pa-1): cao 22 px, bieu tuong Lucide dung truoc chu, chu dam tren
   nen nhat cung tong; KHONG to ca dong. Mau: chan do, can cam, xong xanh la, chay xanh thong tin, ghi xam.
   .dac (nen dac) chi cho dong dang chon. */
.nhan, .cham-tt, .gia-nhieu {
  --m: var(--chu-phu); --n: var(--be-mat-2); --ic: var(--ic-cham);
  display: inline-flex; align-items: center; gap: var(--k1); height: 22px; padding: 0 var(--k2) 0 var(--k1); border-radius: 999px;
  background: var(--n); color: var(--m);
  font-size: var(--fs-xs); font-weight: var(--fw-dam); white-space: nowrap; line-height: 1; vertical-align: middle;
}
.nhan::before, .cham-tt::before, .gia-nhieu::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.nhan.chan, .cham-tt.chan { --m: var(--nguy); --n: var(--nguy-nhat); --ic: var(--ic-ban); }
.nhan.can, .cham-tt.can { --m: var(--canh-bao); --n: var(--canh-bao-nhat); --ic: var(--ic-canh); }
.nhan.xong, .cham-tt.xong { --m: var(--dat); --n: var(--dat-nhat); --ic: var(--ic-tich); }
.gia-nhieu { --m: var(--thong-tin); --n: var(--thong-tin-nhat); --ic: var(--ic-nhieu-gia); }
.nhan.canh, .cham-tt.canh { --m: var(--canh-bao); --n: var(--canh-bao-nhat); --ic: var(--ic-canh); }
.nhan.tin, .cham-tt.tin { --m: var(--thong-tin); --n: var(--thong-tin-nhat); --ic: var(--ic-thong-tin); }
.nhan.chinh, .cham-tt.chinh { --m: var(--chinh-dam); --n: var(--chinh-nhat); --ic: var(--ic-tich); }
.nhan.chay, .cham-tt.chay { --m: var(--thong-tin); --n: var(--thong-tin-nhat); --ic: var(--ic-quay); }
.nhan.chay::before, .cham-tt.chay::before { animation: xoay 1.4s linear infinite; }
.nhan.ghi { --ic: var(--ic-tep); }
.nhan.dac { --m: var(--on-fill); }
.nhan.dac.chan { --n: var(--danger); }
.nhan.dac.can { --n: var(--warn); }
.nhan.dac.ghi { --n: var(--muted); }
.nhan.dac.xong { --n: var(--ok); }
.nhan.dac.chay { --n: var(--accent); --m: var(--accent-ink); }
/* so dem dang chan (dau man, thanh trang thai): chu do dam, khong nen */
.so-chan { color: var(--danger); font-weight: var(--fw-dam); font-family: var(--font-num); }

/* trang thai luu: Dang luu / Da luu / Luu loi */
.luu { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-vua); white-space: nowrap; color: var(--ok); }
.luu .cham { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; animation: cham-hien var(--tg-vua) var(--cong-nay); }
.luu.dang { color: var(--accent); }
.luu.dang .cham { background: var(--sel-bar); animation: nhip 1s var(--ease) infinite; }
.luu.loi { color: var(--danger); }
.luu.loi .cham { background: var(--danger); }
@keyframes nhip { 50% { opacity: .35; } }
@keyframes cham-hien { from { transform: scale(.4); opacity: 0; } }

/* ================================================================ thong bao loi thuong
   <div class="bao loi"><span class="bieu">!</span><div>chuyen gi xay ra, bam gi de sua</div></div> */
.bao {
  display: flex; gap: 10px; padding: 10px 14px; border-radius: 0 0 var(--r-ctl) var(--r-ctl); border: 0; border-top: 3px solid var(--chu-phu);
  font-size: var(--fs-md); line-height: var(--lh-van); background: var(--surface-2); color: var(--ink-2);
}
.bao > div { min-width: 0; }
.bao .bieu {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-dam-nhat);
  color: var(--on-fill); background: var(--muted); margin-top: 1px;
}
.bao.loi { background: var(--danger-soft); border-top-color: var(--danger); }
.bao.loi .bieu { background: var(--danger); }
.bao.can { background: var(--warn-soft); border-top-color: var(--warn); }
.bao.can .bieu { background: var(--warn); }
.bao.xong { background: var(--ok-soft); border-top-color: var(--ok); }
.bao.xong .bieu { background: var(--ok-grad); }
.bao.tin { background: var(--thong-tin-nhat); border-top-color: var(--thong-tin); }
.bao.tin .bieu { background: var(--thong-tin); }
.bao b { font-weight: var(--fw-dam); color: var(--ink); }
.bao p { margin: 0; }
.bao .viec { margin-top: 6px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* khoi gon (trong khung phai, dai tren bang): vach 3 px o mep TRAI de khong an chieu cao khung */
.bao.gon { padding: 7px 12px; font-size: var(--fs-sm); align-items: center; border-top: 0; border-left: 3px solid var(--chu-phu); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.bao.gon.loi { border-left-color: var(--danger); }
.bao.gon.can { border-left-color: var(--warn); }
.bao.gon.xong { border-left-color: var(--ok); }
.bao.gon.tin { border-left-color: var(--thong-tin); }
.bao.gon .bieu { margin-top: 0; }

/* ================================================================ the (khoi) */
.khoi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px 16px; min-width: 0;
  box-shadow: var(--shadow-card);
}
.khoi > h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.khoi > h2 .phu { font-weight: var(--fw-thuong); font-size: var(--fs-sm); color: var(--muted); }

/* ================================================================ bang kieu Excel
   luoi ngang doc mong, dau cot dinh khi cuon, dong 28px, cot so them lop .num (chu so tabular, can phai).
   Tuy chon: td.so-dong (cot so dong xam nhu Excel), thead tr.cot (dong chu cot A B C), tr.nhom (dong nhom). */
table.b { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); font-size: var(--fs-sm); }
table.b th {
  position: sticky; top: 0; z-index: 2; height: 30px; padding: 0 8px; text-align: left; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); font-weight: var(--fw-dam); font-size: var(--fs-nhan);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong);
}
table.b th.num { text-align: right; }
table.b td {
  padding: 0 8px; height: var(--h-row); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle;
  transition: background-color var(--tg-nhanh) var(--cong-ra);
}
table.b th:last-child, table.b td:last-child { border-right: 0; }
table.b tbody tr:hover td { background: var(--row-hover); }
table.b tr.chon td, table.b tbody tr.chon:hover td { background: var(--sel); }
table.b tr.nhom td { background: var(--group-row); font-weight: var(--fw-dam); font-size: var(--fs-nhan); color: var(--ink-2); }
table.b tr.tong td { font-weight: var(--fw-dam-nhat); border-bottom: 0; border-top: 1px solid var(--line-strong); background: var(--surface-2); }
table.b td.so-dong, table.b th.so-dong { width: 40px; padding: 0 4px; text-align: center; background: var(--rowno); color: var(--muted); font: var(--fw-thuong) var(--fs-nhan) var(--font-num); }
table.b tr.chon td.so-dong { background: var(--sel-bar); color: var(--tren-chinh); font-weight: var(--fw-dam); }
table.b thead tr.cot td { height: 20px; padding: 0; text-align: center; background: var(--surface-2); color: var(--muted); font: var(--fw-vua) var(--fs-2xs) var(--font-num); border-bottom: 1px solid var(--line-strong); }
table.b .don-vi { font-weight: var(--fw-thuong); color: var(--muted); }
.khung-bang { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-box); overflow: auto; box-shadow: var(--bong-1); }
.trong-kq { padding: 40px 24px; text-align: center; color: var(--muted); }

/* trang trong / trang loi (soat dep V15): bieu tuong tron, tieu de, mot cau loi thuong, nut chinh.
   Canh trai theo le trang nhu moi man (khong canh giua, khong nhay theo do dai cau). */
.trang-trong {
  display: flex; gap: 18px; align-items: flex-start; max-width: 640px; padding: var(--k5);
  background: var(--surface); border: 1px dashed var(--vien-o); border-radius: var(--r-box);
}
.trang-trong .bieu-lon {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.trang-trong .bieu-lon .ic { width: 26px; height: 26px; }
.trang-trong .bieu-lon.loi { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.trang-trong h1 { margin: 2px 0 6px; }
.trang-trong p { margin: 0; color: var(--ink-2); font-size: var(--fs-lg); line-height: var(--lh-van); max-width: 60ch; }
.trang-trong .hang-nut { margin-top: 18px; }

/* tab trang tinh kieu Excel o day vung bang: tab dang mo trang, dinh vao bang phia tren */
.tab-trang {
  flex: none; display: flex; align-items: flex-start; gap: 2px; height: 34px; padding: 0 6px; overflow-x: auto; overflow-y: hidden;
  background: var(--surface-2); border-top: 1px solid var(--line-strong); font-size: var(--fs-nhan); scrollbar-width: thin;
}
.tab-trang .tab {
  flex: none; height: 28px; margin-top: -1px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--ink-2); text-decoration: none; border: 1px solid transparent; border-top: 0; border-radius: 0 0 7px 7px;
  transition: background-color var(--t-nhanh) var(--ease);
}
.tab-trang a.tab:hover { background: var(--surface-3); color: var(--ink); }
.tab-trang .tab.on {
  background: var(--surface); color: var(--accent); font-weight: var(--fw-dam); border-color: var(--line-strong);
  box-shadow: inset 0 -2px 0 var(--sel-bar);
}

/* ================================================================ dau ho so va thanh buoc
   (Soat, Tong hop): ten ho so, dong meta, trang thai luu, 4 buoc o ben phai */
.dau-hs {
  flex: none; display: flex; align-items: center; gap: 24px; padding: 12px 18px 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.dau-hs .ten { min-width: 0; }
.dau-hs h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau-hs .meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
/* thanh buoc ngang (dieu-huong/pa-1): vong tich xanh la xong, vong xanh lam co so la dang o, vong rong la chua toi;
   duong noi giua hai buoc xanh la khi buoc truoc da xong. Moi buoc nay la chu, chua la lien ket. */
.buoc { margin-left: auto; display: flex; align-items: center; gap: 0; flex: none; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.buoc .b1 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--muted); white-space: nowrap; }
.buoc .so {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: var(--fw-dam-nhat) var(--fs-sm) var(--font-num);
  border: 2px solid var(--line-strong); color: var(--muted); background: var(--surface);
}
.buoc .b1.xong { color: var(--ink-2); }
.buoc .b1.xong .so { background: var(--ok-grad); border-color: var(--ok); color: var(--on-fill); }
.buoc .b1.dang { color: var(--accent-deep); font-weight: var(--fw-dam-nhat); }
.buoc .b1.dang .so { background: var(--accent-grad); border-color: var(--accent-deep); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.buoc .b1 small { font-size: var(--fs-sm); font-weight: var(--fw-dam-nhat); color: var(--warn); }
.buoc .noi { width: 20px; height: 2px; margin: 0 8px; border-radius: 2px; background: var(--line-strong); }
.buoc .b1.xong + .noi { background: var(--ok); }

/* thanh trang thai o day man ung dung, nhu Excel */
.thanh-tt {
  flex: none; display: flex; align-items: center; gap: 18px; height: 28px; padding: 0 14px; font-size: var(--fs-nhan); color: var(--muted);
  background: var(--surface); border-top: 1px solid var(--line); white-space: nowrap;
}
.thanh-tt b { color: var(--ink); font-family: var(--font-num); font-weight: var(--fw-dam); }
.thanh-tt .phai { margin-left: auto; }

/* ================================================================ chon nhanh (bo loc) va tab chu
   .seg: ranh lom, nut dang chon noi len */
.seg { display: inline-flex; gap: var(--k2); flex: none; }
.seg button {
  display: inline-flex; align-items: center; gap: var(--k2); border: 0; background: var(--surface-2); height: var(--h-chip); padding: 0 var(--k3); margin: 0; cursor: pointer; white-space: nowrap;
  color: var(--ink); border-radius: 999px; font-size: var(--fs-md); font-weight: var(--fw-dam);
  transition: background-color var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease);
}
.seg button:hover { background: var(--chip-hover); }
.seg button:active { transform: var(--lun); background: var(--chip-an); }
/* chip loc dang chon: vien thuoc xanh dac, chu trang */
.seg button.on, .seg button[aria-pressed="true"] { background: var(--chinh); color: var(--tren-chinh); }
.seg button.on:hover, .seg button[aria-pressed="true"]:hover { background: var(--chinh-dam); }
.seg button b { font-weight: var(--fw-dam-nhat); font-family: var(--font-num); }
.seg button[disabled] { color: var(--chu-phu); opacity: .55; cursor: not-allowed; transform: none; }
.seg button[disabled]:hover { background: var(--surface-2); }
.the-tab { display: flex; gap: 2px; border-bottom: 1px solid var(--line-strong); margin-bottom: 12px; overflow-x: auto; }
.the-tab > a, .the-tab > button {
  border: 0; background: none; padding: 8px 12px; font-weight: var(--fw-vua); color: var(--ink-2); cursor: pointer; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.the-tab > .on { color: var(--accent); border-bottom-color: var(--sel-bar); font-weight: var(--fw-dam); }
.the-tab b { font-family: var(--font-num); font-weight: var(--fw-vua); color: var(--muted); margin-left: 4px; }

/* ================================================================ hop thoai va thong bao noi
   hop thoai dung <dialog> goc (showModal), chi cho viec hoi ly do hay xac nhan co du lieu */
dialog {
  border: 0; border-radius: var(--bo-goc-lon); padding: 0; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop); width: min(520px, calc(100vw - 32px));
}
dialog::backdrop { background: var(--backdrop); }
dialog .dl-dau { padding: 20px 24px 4px; }
dialog h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); margin: 0; }
dialog .dl-than { padding: 8px 24px 4px; display: flex; flex-direction: column; gap: 12px; }
dialog .dl-chan { padding: 14px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; }
/* vao 200 ms noi len 8 px va phong .96 den 1; ra 120 ms nhanh hon (Chromium 117+, may cu chi mat luot ra) */
dialog[open] { animation: hien var(--tg-vua) var(--cong-ra); }
dialog[open]::backdrop { animation: hien-nen var(--tg-vua) var(--cong-ra); }
@keyframes hien { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes hien-nen { from { opacity: 0; } }
@supports (transition-behavior: allow-discrete) {
  dialog { transition: opacity var(--tg-nhanh) var(--cong-vao), transform var(--tg-nhanh) var(--cong-vao), overlay var(--tg-nhanh) allow-discrete, display var(--tg-nhanh) allow-discrete; }
  dialog:not([open]) { opacity: 0; transform: translateY(8px) scale(.96); }
  dialog::backdrop { transition: opacity var(--tg-nhanh) var(--cong-vao), overlay var(--tg-nhanh) allow-discrete, display var(--tg-nhanh) allow-discrete; }
  dialog:not([open])::backdrop { opacity: 0; }
}

/* thong bao noi: DAI tren dau vung lam viec (bo thiet ke thong-bao/pa-2). Khong che o so nao cua bang vi dai
   nam tren cung; tu an (loi o lai den khi bam dong, xem thong-bao.js). Giu ten .toast + .hien + .loi de cac man
   dang goi (kho.js, vat-lieu.js, soat.js, so-khuon.js) khong phai doi. */
.toast {
  position: fixed; top: 0; left: var(--ray-w); right: 0; z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--k3); flex-wrap: wrap;
  padding: var(--k2) var(--k5) var(--k2) var(--k4); border-left: 4px solid var(--ok); border-bottom: 1px solid var(--line);
  background: var(--ok-soft); color: var(--ink); font-size: var(--fs-md); font-weight: var(--fw-dam);
  box-shadow: var(--bong-1); opacity: 0; transform: translateY(calc(-1 * var(--k3))); pointer-events: none; visibility: hidden;
  transition: opacity var(--tg-nhanh) var(--cong-vao), transform var(--tg-nhanh) var(--cong-vao), visibility 0s linear var(--tg-nhanh);
}
.toast::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--ok);
  -webkit-mask: var(--ic-tich) center / contain no-repeat; mask: var(--ic-tich) center / contain no-repeat;
}
.toast.hien {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity var(--tg-vua) var(--cong-ra), transform var(--tg-vua) var(--cong-ra), visibility 0s;
}
.toast.loi { background: var(--danger-soft); border-left-color: var(--danger); }
.toast.loi::before { background: var(--danger); -webkit-mask-image: var(--ic-loi); mask-image: var(--ic-loi); }
.toast .lk { color: var(--accent); margin-left: var(--k2); font-weight: var(--fw-dam); text-decoration: none; }
.toast .lk:hover { text-decoration: underline; }
.toast kbd { margin-left: 2px; }
/* ngay tren man hep thanh ben nam ngang tren dau: dai phu het be ngang */
@media (max-width: 760px) { .toast { left: 0; } }

/* dai LOI MANG o lai (thong-bao.js): nam TRONG luong tren cung vung lam viec, dinh khi cuon, tu ngat ket noi den
   khi bam Dong. Toi da hai dai cung luc. */
.khung-tb { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-direction: column; flex: none; }
.khung-tb:empty { display: none; }
.tb {
  display: flex; gap: var(--k3); align-items: center; flex-wrap: wrap; padding: var(--k2) var(--k4);
  border-bottom: 1px solid var(--line); border-left: 4px solid var(--thong-tin); background: var(--thong-tin-nhat); box-shadow: var(--bong-1);
  animation: tb-xuong var(--tg-vua) var(--cong-ra);
}
.tb.loi { border-left-color: var(--danger); background: var(--danger-soft); }
.tb::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--thong-tin); -webkit-mask: var(--ic-thong-tin) center / contain no-repeat; mask: var(--ic-thong-tin) center / contain no-repeat; }
.tb.loi::before { background: var(--danger); -webkit-mask-image: var(--ic-loi); mask-image: var(--ic-loi); }
.tb .noi { flex: 1 1 320px; min-width: 0; display: flex; gap: var(--k2); align-items: baseline; flex-wrap: wrap; }
.tb .noi b { font-weight: var(--fw-dam-nhat); }
.tb .noi span { color: var(--muted); font-size: var(--fs-sm); }
.tb.thoat { animation: tb-len var(--tg-nhanh) var(--cong-vao) forwards; }
.tb .tb-x { background: none; border: 0; padding: 2px; border-radius: var(--bo-goc-nho); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease); }
.tb .tb-x:active { transform: var(--lun); }
.tb .tb-x::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic-dong) center / contain no-repeat; mask: var(--ic-dong) center / contain no-repeat; }
.tb .tb-x:hover { color: var(--ink); }
@keyframes tb-xuong { from { opacity: 0; transform: translateY(calc(-1 * var(--k3))); } }
@keyframes tb-len { to { opacity: 0; transform: translateY(calc(-1 * var(--k3))); } }

/* ================================================================ viec nen cua mot ho so
   (manh job_banner.html, /hoso/{ma}/v{n}/viec-nen): cau tom tat, cac buoc may, nut Chay lai */
.viec-nen { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.viec-nen p { margin: 0; }
.viec-nen .loi { color: var(--danger); font-weight: var(--fw-dam); }
.viec-nen .thanh-cong { color: var(--ok); font-weight: var(--fw-dam); }
.viec-nen .thong-bao { color: var(--ink-2); }
.danh-sach-pha { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.danh-sach-pha .pha { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.danh-sach-pha .pha::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.danh-sach-pha .pha-xong { color: var(--ink-2); }
.danh-sach-pha .pha-xong::before { background: var(--ok); border-color: var(--ok); }
.danh-sach-pha .pha-dang_chay { color: var(--accent); font-weight: var(--fw-dam); }
.danh-sach-pha .pha-dang_chay::before { background: var(--sel-bar); border-color: var(--sel-bar); animation: nhip 1s infinite; }
.danh-sach-pha .pha-loi { color: var(--danger); font-weight: var(--fw-dam); }
.danh-sach-pha .pha-loi::before { background: var(--danger); border-color: var(--danger); }
.viec-nen form { margin: 0; }
.viec-nen .do-phu summary { cursor: pointer; color: var(--ink-2); }
.viec-nen .do-phu-bang { margin: 6px 0; }
.viec-nen .do-phu-bang td.num { text-align: right; font-family: var(--font-num); }

/* ================================================================ man hep: thanh ben thanh dai ngang tren dau */
@media (max-width: 760px) {
  .khung-app { flex-direction: column; align-items: stretch; }
  .thanh-ben {
    width: auto; height: auto; margin: 0; border-radius: 0; top: 0; flex-direction: row; align-items: center;
    padding: 6px 8px; gap: 2px; overflow: auto hidden;
  }
  .thanh-ben::after { display: none; }
  .thanh-ben .logo { width: 36px; height: 36px; margin: 0 6px 0 0; }
  .thanh-ben .muc { width: auto; min-width: 64px; padding: 6px 8px; font-size: var(--fs-2xs); flex-direction: column; justify-content: center; text-align: center; gap: 4px; }
  .thanh-ben .muc br { display: initial; }
  .thanh-ben .muc .ic { width: 22px; height: 22px; }
  .thanh-ben .thu-gon, .doi-kieu > span, .doi-kieu .ten-cd { display: none; }
  .doi-kieu { padding: 0; }
  .doi-kieu .cap { flex-direction: row; }
  .doi-kieu button { width: 28px; justify-content: center; padding: 0; }
  .doi-kieu button b { width: auto; }
  .thanh-ben .muc.on::before { left: 14px; right: 14px; top: auto; bottom: -6px; width: auto; height: 3px; }
  .thanh-ben .viec-may { margin: 0; }
  .thanh-ben .day { margin: 0 0 0 auto; padding: 0 0 0 8px; flex-direction: row; }
  .vung { margin: 0; border-radius: 0; min-height: 0; }
  .khung-trang { padding: 14px 16px 32px; }
  .dau-hs { flex-wrap: wrap; gap: 8px; }
  .buoc { margin-left: 0; overflow-x: auto; max-width: 100%; }
}
@media print {
  .thanh-ben, .top { display: none !important; }
  body { background: #FFFFFF; }
  body::before { display: none; }
  .khung-app { display: block; min-height: 0; }
  .vung { margin: 0; border-radius: 0; box-shadow: none; background: #FFFFFF; min-height: 0; overflow: visible; }
}
/* ban in tu chua (Tong hop /tong-hop/in): khong thanh ben, khong khung noi */
body.trang-in .vung { margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
/* Giam chuyen dong (bo thiet ke chuyen-dong): bo truot, co gian, vong lap va dem so (animation dung het, chi con
   hinh cuoi); GIU mo va doi mau toi da 120 ms de van bao duoc trang thai. transition-property rut ve cac thuoc
   tinh mau/mo nen transform, grid-template-rows... chuyen ngay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 120ms !important; transition-delay: 0s !important;
    transition-property: opacity, background-color, color, border-color, box-shadow, fill, stroke, visibility !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Mã cũ trước ngày đổi mã hai tầng (19/10/2026): gõ mã cũ vẫn tìm ra, dòng ghi "mã cũ ..." nhỏ cạnh mã hiện hành. */
.ma-cu { display: inline-block; margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-thuong); font-family: var(--font-num); white-space: nowrap; }

/* ================================================================ thanh phan chung co chuyen dong (lane uinut 29/10/2026)
   Bay phan tu cua thu vien Motion Prompt (MIT License (c) 2026 Shohei Ohtaki), cat tu Canvas sang CSS va
   static/thanh-phan.js; giu duong di va nhip, thoi gian lay tu token chu de (--tg-*, --cong-*), cung hoa chuyen
   dong "Vua phai" (chuyen-dong/pa-2). Chi doi transform, opacity, mau. Moi chuyen dong la goi y trang thai:
   gach chan truot = dang o the nao, tick moc len = dang bat, gach chan moc tu trai = link bam duoc, bong dau
   bang = da cuon khoi dau. Tat chuyen dong: khoi @media cuoi muc nay (con lai chi doi mau tuc thi). */

/* Motion Prompt #057 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#057
   Tabs: gach chan 4 px (o day 2 px) truot sang the moi, doi cho va do rong cung luc, 0,25 s (o day --tg-vua);
   noi dung moi hien dan va nhich len 8 px sau mot nhip. JS (thanh-phan.js) dat --gach-x, --gach-r theo the dang chon. */
.the-tab { position: relative; }
.the-tab[data-truot] > .on, .the-tab[data-truot] > [aria-selected="true"], .the-tab[data-truot] > [aria-current="page"] { border-bottom-color: transparent; }
.the-tab > .gach-truot {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--gach-r, 0); background: var(--sel-bar);
  transform: translateX(var(--gach-x, 0)); pointer-events: none; opacity: 0;
}
.the-tab[data-truot] > .gach-truot { opacity: 1; }
.the-tab[data-truot].da-do > .gach-truot { transition: transform var(--tg-vua) var(--cong-ra), width var(--tg-vua) var(--cong-ra); }
[role="tabpanel"] { animation: tp-vao-the var(--tg-vua) var(--cong-ra); }
[role="tabpanel"][hidden] { animation: none; }
@keyframes tp-vao-the { from { opacity: 0; transform: translateY(8px); } }

/* Motion Prompt #060 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#060
   Segmented control: nen xam, vien chon (xanh dac, chu trang) truot sang nut moi 0,25 s (o day --tg-vua). Dung cho
   bo loc mot-trong-ba o man Soat; JS dat --chon-x, --chon-r. Khong co JS thi nut tu to xanh nhu chip (.seg). */
.seg[data-truot] { --seg-dem: calc(var(--k1) - 1px); position: relative; gap: 0; padding: var(--seg-dem); border-radius: 999px; background: var(--surface-2); }
.seg[data-truot] > button { position: relative; z-index: 1; background: transparent; height: calc(var(--h-chip) - 2 * var(--seg-dem)); }
.seg[data-truot] > button:hover { background: transparent; color: var(--ink); }
.seg[data-truot] > button.on, .seg[data-truot] > button[aria-pressed="true"] { background: transparent; color: var(--tren-chinh); }
.seg[data-truot] > button:active { background: transparent; }
.seg[data-truot] > .nen-chon {
  position: absolute; z-index: 0; left: 0; top: var(--seg-dem); bottom: var(--seg-dem); width: var(--chon-r, 0); border-radius: 999px;
  background: var(--chinh); transform: translateX(var(--chon-x, 0)); pointer-events: none;
}
.seg[data-truot].da-do > .nen-chon { transition: transform var(--tg-vua) var(--cong-ra), width var(--tg-vua) var(--cong-ra); }

/* Motion Prompt #061 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#061
   Filter chips: khi bat, chip rong ra 18 px (14 px tick + khoang) va tick moc len, 0,15 s (o day --tg-nhanh).
   Tick la ::before cua nut (mask Lucide), mac dinh rong 0 va co lai bang bien do khoang cach. */
.seg:not([data-truot]) > button::before {
  content: ""; flex: none; width: 0; height: 14px; margin-right: calc(-1 * var(--k2)); opacity: 0; background: currentColor;
  -webkit-mask: var(--ic-dau-tich) center / contain no-repeat; mask: var(--ic-dau-tich) center / contain no-repeat;
  transition: width var(--tg-nhanh) var(--cong-ra), margin-right var(--tg-nhanh) var(--cong-ra), opacity var(--tg-nhanh) var(--cong-ra);
}
.seg:not([data-truot]) > button.on::before, .seg:not([data-truot]) > button[aria-pressed="true"]::before { width: 14px; margin-right: 0; opacity: 1; }

/* Motion Prompt #052 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#052
   Accordion: noi dung mo ra day cac dong duoi xuong 0,32 s (o day --tg-cham), mui ten xoay 180 do; dong lai nguoc lai.
   <details> dung ::details-content (Chromium 131+, co @supports, may cu thi mo tuc thi). Nhanh cay Kho an bang
   [hidden]: hien dan va nhich xuong 6 px (khong tween chieu cao duoc vi display: none). */
:root { interpolate-size: allow-keywords; }
@supports selector(::details-content) {
  details:not(.khong-truot)::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size var(--tg-cham) var(--cong-ra), opacity var(--tg-cham) var(--cong-ra), content-visibility var(--tg-cham) allow-discrete;
  }
  details[open]:not(.khong-truot)::details-content { block-size: auto; opacity: 1; }
}
details > summary .mui, details > summary .mui-cay { transition: transform var(--tg-vua) var(--cong-ra); }
.cay-con:not([hidden]) { animation: tp-xuong var(--tg-vua) var(--cong-ra); }
@keyframes tp-xuong { from { opacity: 0; transform: translateY(-6px); } }

/* Motion Prompt #159 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#159
   Inline validation: dang go dang sai thi viền do + nen do rat nhat + cau ngan ngay duoi o (--tg-nhanh, --cong-ra); go
   dung thi viền xanh la, tick xanh moc len o cuoi o (--tg-vua, --cong-nay), cau "Dung dinh dang" hien. JS dat
   aria-invalid va .dung tren o co data-kiem; cau loi cua may chu (.bao-loi khong co data-kiem-loi) khong bi dong. */
.o[data-kiem] { transition: border-color var(--tg-nhanh) var(--cong-ra), box-shadow var(--tg-nhanh) var(--cong-ra), background-color var(--tg-nhanh) var(--cong-ra); }
.o[data-kiem][aria-invalid="true"] { background-color: var(--danger-soft); }
.o[data-kiem].dung { border-color: var(--ok); padding-right: 36px; box-shadow: inset 0 0 0 1px var(--ok); }
.o-bao { position: relative; display: block; }
/* o trong o-bao (thanh-phan.js) dai bang cot cua truong; khong thi lay do rong mac dinh cua o nhap, tran sang cot ben canh (hdsd0611 06/11/2026) */
.o-bao > .o { width: 100%; }
.o-bao > .dau-dung {
  position: absolute; right: var(--k3); top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--ok); color: var(--on-fill); pointer-events: none; opacity: 0; transform: scale(.5);
  transition: opacity var(--tg-vua) var(--cong-ra), transform var(--tg-vua) var(--cong-nay);
}
.o-bao > .dau-dung::before {
  content: ""; position: absolute; inset: 3px; background: currentColor;
  -webkit-mask: var(--ic-dau-tich) center / contain no-repeat; mask: var(--ic-dau-tich) center / contain no-repeat;
}
.o-bao > .o.dung ~ .dau-dung { opacity: 1; transform: none; }
.bao-ok { display: flex; gap: var(--k1); align-items: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-dam); line-height: var(--lh-dong); color: var(--ok); }
.bao-loi[data-kiem-loi], .bao-ok[data-kiem-loi] { animation: tp-xuong var(--tg-nhanh) var(--cong-ra); }
.bao-loi[data-kiem-loi][hidden], .bao-ok[data-kiem-loi][hidden] { display: none; }

/* Motion Prompt #086 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#086
   Underline animation: re chuot hay focus vao lien ket chu thi gach chan dam moc tu trai sang phai 0,3 s (mau goc; o day
   --tg-nhanh, --cong-ra); roi di thi co ve ben phai. Gach mong 1 px van nam san de lien ket luon nhin ra duoc. */
a:not([class]), a.lk, button.lk, .duong-dan a {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--accent-line), var(--accent-line));
  background-repeat: no-repeat; background-position: 100% 100%, 0 100%; background-size: 0 2px, 100% 1px; padding-bottom: 1px;
  transition: background-size var(--tg-nhanh) var(--cong-ra);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a:not([class]):hover, a:not([class]):focus-visible, a.lk:hover, a.lk:focus-visible, button.lk:hover, button.lk:focus-visible, .duong-dan a:hover, .duong-dan a:focus-visible {
  background-position: 0 100%, 0 100%; background-size: 100% 2px, 100% 1px;
}
.duong-dan a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; }
.duong-dan a:hover, .duong-dan a:focus-visible { background-size: 100% 1px; }
/* Ba liên kết chữ nhỏ (Mở tệp gốc, Sổ khuôn bảng khối lượng, Bộ hệ số) cao 18 đến 20 px: nâng vùng bấm lên >= 24 px
   (WCAG 2.5.8) bằng padding dọc, margin âm bù lại nên dòng chứa chúng không đổi chiều cao, không đổi chữ. */
.kp-tieu h2 > a.small, .chan-trang > a, .thanh-tt > button.lk { padding-block: 4px; margin-block: -4px; }
/* hai liên kết có sẵn padding-bottom 1px (gạch chân động ở trên) mất 1px đó khi ghi đè: bù bằng margin dưới -3px */
.chan-trang > a, .thanh-tt > button.lk { margin-bottom: -3px; }

/* Motion Prompt #075 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#075
   Sticky header: dau bang da dinh o man Soat, Kho, Tong hop (position: sticky); khi cuon khoi dinh thi hien bong 12 px
   duoi dau bang (--tg-nhanh) de biet dong dang troi duoi. JS gan [data-cuon] len khung cuon, nguong 2 px (mau lien tuc
   theo 24 px cuon la cach lam cua mau; o day bat tat de tiet kiem ve lai). */
table thead th { transition: box-shadow var(--tg-nhanh) var(--cong-ra); }
[data-cuon] table thead th { box-shadow: var(--shadow-cuon); }

@media (prefers-reduced-motion: reduce) {
  .the-tab[data-truot].da-do > .gach-truot, .seg[data-truot].da-do > .nen-chon { transition: none; }
  [role="tabpanel"], .cay-con:not([hidden]), .bao-loi[data-kiem-loi], .bao-ok[data-kiem-loi] { animation: none; }
  details::details-content, .seg:not([data-truot]) > button::before, .o-bao > .dau-dung, a:not([class]), a.lk, button.lk, .duong-dan a,
  table thead th { transition: none; }
}

/* Man Nop: man xac nhan cach xep tep khi keo ca thu muc (nop.js, POST /hoso/nop/xep-thu-muc). Khoi nay nam CUOI tep. */
.xep-trang-thai { margin: 0 0 var(--k3, 12px); padding: 8px 12px; border-left: 3px solid var(--chu-phu); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink); }
.xep-trang-thai.loi { border-left-color: var(--danger); background: var(--danger-soft); }
.xep-trang-thai[hidden], .xac-nhan[hidden] { display: none; }
.xac-nhan { margin: 0 0 var(--k4, 16px); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.xac-nhan h2 { margin: 0 0 8px; font-size: var(--fs-lg); }
.xac-nhan h2:focus { outline: var(--fv-w) solid var(--accent); outline-offset: var(--fv-off); }
.xn-tom { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); }
.xn-o { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); min-width: 0; }
.xn-o legend { padding: 0 6px; font-weight: var(--fw-dam); }
.xn-dem { font-weight: var(--fw-thuong); color: var(--muted); }
.xn-hoi { margin: 0 0 6px; padding: 6px 10px; border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: var(--fs-sm); }
.xn-trong { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.xn-ds, .xn-ds-bo, .ds-bao { margin: 0; padding: 0; list-style: none; }
.ds-bao { padding-left: 18px; list-style: disc; }
.xn-hang { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.xn-hang input { margin-top: 3px; flex: none; }
.xn-tt { min-width: 0; display: flex; flex-direction: column; }
.xn-tt b { font-weight: var(--fw-dam); overflow-wrap: anywhere; }
.xn-tt small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.xn-xem > summary, .xn-bo-qua > summary, .xn-nhom-bo > summary { cursor: pointer; font-size: var(--fs-sm); padding: 2px 0; }
.xn-bo-qua { margin: 0 0 10px; }
.xn-nhom-bo { margin-left: 14px; }
.xn-ds-bo { max-height: 220px; overflow: auto; font-size: var(--fs-xs); color: var(--muted); }
.xn-ds-bo li { padding: 1px 0; overflow-wrap: anywhere; }
.xac-nhan .viec { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.xn-tay { display: grid; gap: 8px; margin: 10px 0; }
.xn-tay-o { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.xn-tay-o label { min-width: 150px; font-weight: var(--fw-dam); }
.xn-tay-o input { max-width: 100%; font-size: var(--fs-sm); }

/* SO: mọi chỗ dùng --font-num để hiện số đều dùng chữ số bằng bề rộng (tabular) nên cột và thẻ tổng không nhảy khi giá trị đổi.
   Đặt cuối app.css để thắng các rule dùng viết tắt `font:` (viết tắt đặt lại font-variant-numeric). */
.so-chan, .so-dem, .buoc .so, .ma-cu, .seg button b, .the-tab b, .thanh-tt b, .doi-kieu button b, .thanh-ben .thu-gon kbd,
table.b td.so-dong, table.b th.so-dong, table.b thead tr.cot td, .viec-nen .do-phu-bang td.num,
.dk-so span b, .tt-so b, .tt-cum .ma, .tt-cum .gia, .tt-roi .ma, .uu-so b, .uu-dong .gia, .uu-dong .tien,
.cay .ma-n, .cay .dem, .vl-cay .dem, .kl-so b, .kl-doan b, .cot-map span i, .kiem-dem,
table.bang td.c-dong, table.bang td.c-stt, table.bang td.c-kho, .ma-g, .gv-g, .calc td:last-child, .dem,
.th-tien-chu, .the .gt, .he-so-luoi b, .cap-nhat b, main.trang .ma {
  font-variant-numeric: tabular-nums lining-nums;
}