/* ==========================================================================
   Sổ KPI (tenant tranxuanchien) — bảng mẫu giao diện dùng chung
   Nguồn nhận diện: docs/tranxuanchien/PRODUCT.md
   - Kỷ luật, minh bạch, công bằng, gọn.
   - Màu lấy từ ngôn ngữ an toàn mỏ: xanh cứu hộ (ISO 7010, biển "cấp cứu"),
     cam phản quang (dấu "đã sửa"), vàng an toàn (băng "Nhập thay"),
     mực than đá trên nền khoáng lạnh. Không đỏ-vàng cổng thông tin.
   - Chữ: Barlow (grotesk kiểu biển báo DIN) cho giao diện, Barlow Semi
     Condensed cho số và đầu cột, Times New Roman cho đầu phiếu như văn bản
     hành chính (thể thức Nghị định 30/2020).
   Mọi trang mẫu S*.html đều nối tệp này. Không tải gì từ mạng.
   ========================================================================== */

/* ---------- Phông chữ (tệp cục bộ trong ./fonts) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-sc-500-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-sc-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-sc-600-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-sc-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-sc-700-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-sc-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Mực và nền */
  --than: #1b252b;          /* mực than đá: chữ chính */
  --than-2: #3b4850;        /* chữ phụ */
  --than-3: #5a676e;        /* chữ mờ, vẫn ≥ 4,5:1 trên --da */
  --da: #eceeed;            /* nền khoáng lạnh */
  --giay: #ffffff;          /* mặt phiếu, bảng */
  --giay-2: #f6f7f6;        /* đầu bảng, chân panel */
  --giay-lom: #e2e6e4;      /* vùng lõm, thanh trống */
  --ke: #d2d8d5;            /* đường kẻ bảng */
  --ke-dam: #9ea9a4;        /* viền ô nhập, kẻ đậm (≥ 3:1 với nền trắng... dùng cho viền) */

  /* Xanh cứu hộ — hành động chính, bước hiện tại, cột chấm chính thức */
  --cuu: #0a6b4b;
  --cuu-dam: #07553b;
  --cuu-vien: #a6d0bb;
  --cuu-nhat: #e2f0e9;
  --cuu-50: #f1f8f4;

  /* Cam phản quang — dấu "đã sửa", "bị trả lại" */
  --vach: #c2410c;
  --vach-vien: #f0bd9c;
  --vach-nhat: #fdece0;

  /* Vàng an toàn — băng "Nhập thay" */
  --vang: #f4c21b;
  --vang-muc: #5e4400;
  --vang-vien: #e6cf7c;
  --vang-nhat: #fff5d4;

  /* Tín hiệu trạng thái (luôn đi kèm chữ/ký hiệu) */
  --lam: #245677;   --lam-vien: #b7cfe0;  --lam-nhat: #e3edf4;   /* Đã giao */
  --hoac: #855000;  --hoac-vien: #e8c98a; --hoac-nhat: #fbf0d8;  /* Chờ đánh giá, xếp loại B */
  --do: #b42318;    --do-vien: #efb6ae;   --do-nhat: #fbe7e4;    /* lỗi, quá hạn, xếp loại C */

  /* Chữ */
  --f-ui: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-hep: "Barlow Semi Condensed", "Barlow", "Arial Narrow", "Segoe UI", sans-serif;
  --f-van-ban: "Times New Roman", Tinos, "Noto Serif", "Liberation Serif", serif;
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-md: 15px;      /* chữ thân tối thiểu 15 px (PRODUCT → Accessibility) */
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 24px;
  --t-3xl: 30px;
  --t-4xl: 40px;

  /* Khoảng cách (bậc 4 px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Bo góc theo cấp bậc: nhãn < nút/ô < panel < thẻ điện thoại */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;

  /* Bóng: phẳng, chỉ hộp thoại mới nổi */
  --bong-1: 0 1px 2px rgba(27, 37, 43, 0.06);
  --bong-2: 0 16px 40px rgba(27, 37, 43, 0.22), 0 2px 8px rgba(27, 37, 43, 0.10);
  --bong-day: 0 -6px 18px rgba(27, 37, 43, 0.08);

  /* Viền nhấn bàn phím: viền mực (đủ tương phản) + quầng vàng an toàn */
  --focus-ring: 0 0 0 2px var(--giay), 0 0 0 4px var(--than), 0 0 0 7px rgba(244, 194, 27, 0.65);

  --rail-w: 248px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   2. Nền tảng
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--than);
  background: var(--da);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--cuu-dam); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cuu); }
button { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--than); color: #fff; border-radius: var(--r-2); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }

/* Icon nét */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -3px; }
.i-sm { width: 15px; height: 15px; vertical-align: -2px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 32px; height: 32px; stroke-width: 1.6; }

/* Tiện ích chữ và số */
.so, .num { font-family: var(--f-hep); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r { text-align: right; }
.c { text-align: center; }
.muted { color: var(--than-3); }
.phu { color: var(--than-2); }
.dam { font-weight: 700; }
.vua { font-weight: 600; }
.nho { font-size: var(--t-sm); }
.rat-nho { font-size: var(--t-xs); }
.nowrap { white-space: nowrap; }
.ma { font-family: var(--f-hep); font-weight: 600; color: var(--than-2); letter-spacing: .01em; white-space: nowrap; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-top { display: flex; align-items: flex-start; gap: 12px; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-lg > * + * { margin-top: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-main-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.grid-side-main { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.sep { height: 1px; background: var(--ke); margin: 16px 0; border: 0; }

/* ==========================================================================
   3. Khung máy tính (1440×900) — thanh dọc sáng, không nền tối
   ========================================================================== */
body.dk { min-width: 1264px; }
.dk-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

.rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--giay); border-right: 1px solid var(--ke); }
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; color: var(--than); text-decoration: none; }
.rail-brand:hover { color: var(--than); }
.brand-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-2); background: var(--cuu); color: #fff; }
.brand-mark .i { width: 22px; height: 22px; stroke-width: 2; }
.rail-brand strong { display: block; font-size: 19px; font-weight: 700; line-height: 1.1; }
.rail-brand small { display: block; font-size: 12.5px; color: var(--than-3); line-height: 1.2; margin-top: 2px; }

.rail-ky { display: block; margin: 2px 14px 6px; padding: 10px 12px 10px 13px; border: 1px solid var(--ke); border-left: 3px solid var(--cuu); border-radius: var(--r-2); background: var(--giay-2); color: var(--than); text-decoration: none; }
.rail-ky:hover { border-color: var(--ke-dam); border-left-color: var(--cuu); color: var(--than); }
.rail-ky .k-nhan { display: block; font-size: 12.5px; color: var(--than-3); }
.rail-ky .k-ten { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; }
.rail-ky .k-han { display: block; font-size: 13px; color: var(--than-2); }
.rail-ky.is-chot { border-left-color: var(--than); }

.nav { flex: 1; padding: 4px 10px 16px; }
.nav-group { margin-top: 14px; }
.nav-label { display: block; padding: 0 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--than-3); }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; margin: 1px 0; border-radius: var(--r-2); color: var(--than-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a .i { color: var(--than-3); }
.nav a:hover { background: var(--giay-2); color: var(--than); }
.nav a[aria-current="page"] { background: var(--cuu-50); color: var(--cuu-dam); font-weight: 600; }
.nav a[aria-current="page"] .i { color: var(--cuu); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; background: var(--cuu); border-radius: 0 2px 2px 0; }
.nav .dem { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-1); background: var(--hoac-nhat); color: var(--hoac); border: 1px solid var(--hoac-vien); font-size: 12px; font-weight: 700; font-family: var(--f-hep); }

.rail-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px 16px; border-top: 1px solid var(--ke); }
.rail-user .who { flex: 1; min-width: 0; }
.rail-user strong { display: block; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-user small { display: block; font-size: 12.5px; color: var(--than-3); line-height: 1.3; }
.avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--giay-lom); color: var(--than-2); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-2); background: none; color: var(--than-2); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--giay-2); color: var(--than); }

.main { min-width: 0; padding: 22px 32px 56px; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.pg-head .grow > * + * { margin-top: 2px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--than-3); }
.crumbs a { color: var(--than-3); text-decoration: none; }
.crumbs a:hover { color: var(--cuu-dam); text-decoration: underline; }
.crumbs .i { width: 13px; height: 13px; }
.pg-head h1 { font-size: var(--t-2xl); }
.pg-sub { color: var(--than-2); font-size: 15px; }
.pg-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; max-width: 68%; justify-content: flex-end; gap: 8px; align-items: center; }

/* ==========================================================================
   4. Khung điện thoại (390×844)
   ========================================================================== */
body.ph { font-size: 16px; background: var(--da); }
.ph-shell { min-height: 100vh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; }
.ph-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 6px 0 16px; background: var(--giay); border-bottom: 1px solid var(--ke); }
.ph-top.has-back { padding-left: 4px; }
.ph-top h1 { flex: 1; min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-top .sub { display: block; font-size: 13px; font-weight: 500; color: var(--than-3); line-height: 1.2; }
.ph-top .title { flex: 1; min-width: 0; }
.ph-top .title h1 { flex: none; }
.ph-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--than); text-decoration: none; }
.ph-brand .brand-mark { width: 30px; height: 30px; }
.ph-brand .brand-mark .i { width: 19px; height: 19px; }
.ph-brand strong { font-size: 18px; }
.tap { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border: 0; background: none; border-radius: var(--r-2); color: var(--than); text-decoration: none; cursor: pointer; }
.tap:hover { background: var(--giay-2); color: var(--than); }
.ph-main { flex: 1; padding: 16px 16px 104px; }
.ph-main.has-action { padding-bottom: 132px; }
.ph-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 480px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--giay); border-top: 1px solid var(--ke); padding-bottom: env(safe-area-inset-bottom); }
.ph-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; padding: 6px 2px; color: var(--than-3); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.ph-tabs a .i { width: 22px; height: 22px; }
.ph-tabs a[aria-current="page"] { color: var(--cuu-dam); }
.ph-tabs a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cuu); }
.ph-tabs .dem { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--hoac); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--f-hep); }
.ph-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-width: 480px; margin: 0 auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--giay); border-top: 1px solid var(--ke); box-shadow: var(--bong-day); }
.ph-action .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--than-2); }
.ph-action .btn + .btn { margin-top: 8px; }
.ph-sec { margin-top: 22px; }
.ph-sec:first-child { margin-top: 0; }
.ph-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ph-sec-head h2 { font-size: 17px; }
.ph-sec-head a { font-size: 15px; font-weight: 600; }
/* Vùng chạm trên điện thoại: tối thiểu 44px */
.ph .ph-brand { min-height: 44px; }
.ph .ph-sec-head { align-items: center; }
.ph .ph-sec-head a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.ph .seg a, .ph .seg button { min-height: 44px; }
.ph a.tep { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.ph .tep-chip { min-height: 46px; }
.ph .tep-chip .x { width: 44px; height: 44px; }

/* Ngăn menu trên điện thoại */
.ph-menu { position: fixed; inset: 0; z-index: 60; display: none; }
.ph-menu.is-open { display: block; }
.ph-menu .scrim-x { position: absolute; inset: 0; background: rgba(27, 37, 43, .45); }
.ph-menu .sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--giay); box-shadow: var(--bong-2); overflow-y: auto; display: flex; flex-direction: column; }
.ph-menu .sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 8px 14px 16px; border-bottom: 1px solid var(--ke); }
.ph-menu .nav a { min-height: 46px; font-size: 16px; }

/* ==========================================================================
   5. Nút, ô nhập
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ke-dam); border-radius: var(--r-2); background: var(--giay); color: var(--than); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.btn:hover { background: var(--giay-2); border-color: var(--than-3); color: var(--than); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cuu); border-color: var(--cuu-dam); color: #fff; }
.btn-primary:hover { background: var(--cuu-dam); border-color: var(--cuu-dam); color: #fff; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--than-2); }
.btn-quiet:hover { background: var(--giay-lom); border-color: transparent; }
.btn-danger { color: var(--do); border-color: var(--do-vien); background: var(--giay); }
.btn-danger:hover { background: var(--do-nhat); border-color: var(--do); color: var(--do); }
.btn-danger-solid { background: var(--do); border-color: #8f1b12; color: #fff; }
.btn-danger-solid:hover { background: #8f1b12; color: #fff; }
.btn-return { color: var(--vach); border-color: var(--vach-vien); }
.btn-return:hover { background: var(--vach-nhat); border-color: var(--vach); color: var(--vach); }
.btn-ink { background: var(--than); border-color: var(--than); color: #fff; }
.btn-ink:hover { background: #0f171c; color: #fff; }
.btn-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--cuu-dam); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { background: none; color: var(--cuu); }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: 14px; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--giay-lom); border-color: var(--ke); color: var(--than-3); cursor: not-allowed; transform: none; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 14px; font-weight: 600; color: var(--than-2); }
.req::after { content: " *"; color: var(--do); }
.input, .select, .textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ke-dam); border-radius: var(--r-2); background: var(--giay); color: var(--than); font: inherit; font-size: 15px; line-height: 1.35; }
.textarea { min-height: 76px; resize: vertical; }
.textarea[rows="2"] { min-height: 0; field-sizing: content; } /* ô chữ dài trong bảng: cao theo nội dung */
.select { appearance: none; padding-right: 34px; 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='%233b4850' 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 11px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--than-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--than); box-shadow: var(--focus-ring); }
.input::placeholder, .textarea::placeholder { color: #8a9590; }
.input[readonly], .input:disabled, .select:disabled, .textarea:disabled { background: var(--giay-2); color: var(--than-2); border-color: var(--ke); cursor: not-allowed; }
.input.so { text-align: right; font-family: var(--f-hep); font-weight: 600; font-size: 16px; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--do); background: #fffaf9; }
.hint { font-size: 13.5px; color: var(--than-3); }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 500; color: var(--do); }
.field-error .i { margin-top: 2px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-addon { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--ke-dam); border-left: 0; border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--giay-2); color: var(--than-2); font-size: 14px; white-space: nowrap; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cuu); flex: none; }
.check small { display: block; color: var(--than-3); font-size: 13.5px; }
.search { position: relative; }
.search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--than-3); pointer-events: none; }
.search .input { padding-left: 36px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
body.ph .input, body.ph .select, body.ph .textarea { min-height: 48px; font-size: 16px; }
body.ph .btn { min-height: 44px; }
body.ph .btn-lg { min-height: 52px; }

/* Nút chọn phân đoạn */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--giay-lom); border-radius: var(--r-2); }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: none; color: var(--than-2); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.seg a:hover, .seg button:hover { color: var(--than); }
.seg [aria-current="page"], .seg [aria-pressed="true"], .seg .is-on { background: var(--giay); color: var(--than); box-shadow: 0 1px 2px rgba(27,37,43,.14); }

/* Bộ lọc */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 16px; background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-3); }
.filters .field { min-width: 170px; }
.filters .field.wide { flex: 1; min-width: 240px; }
.filters .field > label { font-size: 13px; }

/* ==========================================================================
   6. Panel, bảng
   ========================================================================== */
.panel { background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-3); box-shadow: var(--bong-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--ke); }
.panel-head h2 { font-size: var(--t-lg); }
.panel-head .sub { font-size: 13.5px; color: var(--than-3); font-weight: 500; }
.panel-body { padding: 16px; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--ke); background: var(--giay-2); border-radius: 0 0 var(--r-3) var(--r-3); font-size: 14px; color: var(--than-2); }
.panel-flush > .panel-body { padding: 0; }

.tbl-wrap { overflow: auto; }
.tbl-wrap.khung { max-height: 620px; }
table.bang { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.bang th, .bang td { padding: 9px 12px; border-bottom: 1px solid var(--ke); text-align: left; vertical-align: middle; }
.bang thead th { position: sticky; top: 0; z-index: 3; background: var(--giay-2); border-bottom: 1px solid var(--ke-dam); font-family: var(--f-hep); font-size: 14px; font-weight: 600; color: var(--than-2); white-space: nowrap; line-height: 1.25; }
.bang thead tr + tr th { top: 37px; }
.bang tbody tr:hover > td { background: var(--cuu-50); }
.bang tbody tr:last-child > td { border-bottom: 0; }
.bang td.so, .bang th.so { text-align: right; }
.bang td.so { font-family: var(--f-hep); font-weight: 600; font-size: 15.5px; }
.bang td.c, .bang th.c { text-align: center; }
.bang tr.nhom > td { background: var(--giay-lom); color: var(--than); font-weight: 700; font-size: 14.5px; padding-top: 7px; padding-bottom: 7px; }
.bang tr.nhom:hover > td { background: var(--giay-lom); }
.bang tr.con > td:first-child { padding-left: 28px; }
.bang tr.tong > td { border-top: 2px solid var(--than); background: var(--giay-2); font-weight: 700; }
.bang tr.is-selected > td { background: var(--cuu-50); }
.bang tr.is-muted > td { color: var(--than-3); }
.bang tr.is-error > td { background: #fffaf9; }
.bang .ghim { position: sticky; left: 0; z-index: 2; background: var(--giay); }
.bang .ghim-2 { position: sticky; z-index: 2; background: var(--giay); box-shadow: 1px 0 0 var(--ke-dam); }
.bang thead .ghim, .bang thead .ghim-2 { z-index: 4; background: var(--giay-2); }
.bang tbody tr:hover > .ghim, .bang tbody tr:hover > .ghim-2 { background: var(--cuu-50); }
.bang tr.nhom > .ghim, .bang tr.nhom > .ghim-2 { background: var(--giay-lom); }
.bang a.diem-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--than-3); }
.bang a.diem-link:hover { color: var(--cuu-dam); border-bottom: 1px solid var(--cuu); }
.bang .ten a { color: var(--than); font-weight: 600; text-decoration: none; }
.bang .ten a:hover { color: var(--cuu-dam); text-decoration: underline; }
.bang .ten small { display: block; font-size: 13px; color: var(--than-3); font-weight: 500; }
.bang .hanh-dong { display: flex; justify-content: flex-end; gap: 6px; }
.bang-sm th, .bang-sm td { padding: 7px 10px; }
/* Bảng năm: điểm tháng + chữ xếp loại nhỏ */
.bang-nam th.thg, .bang-nam td.thg { padding-left: 3px; padding-right: 6px; white-space: nowrap; }
.bang-nam td.thg { font-size: 14.5px; }
.bang-nam th.thg.trong, .bang-nam td.thg.trong { min-width: 36px; color: var(--than-3); }
.bang-nam th.tu-file { background: #e6e9e7; }
.bang-nam td.chua-chot { font-style: italic; color: var(--than-2); }
.xl-nho { display: inline-block; min-width: 19px; margin-left: 3px; padding: 0 2px; border-radius: 2px; font-family: var(--f-hep); font-weight: 700; font-size: 11.5px; line-height: 17px; text-align: center; font-style: normal; vertical-align: 1px; }
.xl-nho.ap { background: var(--cuu-dam); color: #fff; }
.xl-nho.a { color: var(--cuu-dam); }
.xl-nho.b { background: var(--hoac-nhat); color: var(--hoac); }
.xl-nho.c { background: var(--do-nhat); color: var(--do); }
.bang .chk { width: 44px; }
.bang .chk input { width: 18px; height: 18px; accent-color: var(--cuu); }

.empty { padding: 40px 24px; text-align: center; color: var(--than-2); }
.empty .i-xl { margin: 0 auto 10px; color: var(--ke-dam); }
.empty strong { display: block; font-size: var(--t-lg); color: var(--than); margin-bottom: 4px; }

.dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.dl dt { color: var(--than-3); font-size: 14px; }
.dl dd { margin: 0; font-weight: 600; }

.tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--ke-dam); overflow-x: auto; overflow-y: hidden; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--than-2); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--than); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--than); border-bottom-color: var(--cuu); }
.tabs .dem { min-width: 22px; padding: 0 6px; border-radius: var(--r-1); background: var(--giay-lom); color: var(--than-2); font-size: 12.5px; font-family: var(--f-hep); font-weight: 700; text-align: center; }

/* ==========================================================================
   7. Trạng thái phiếu, xếp loại, dấu "đã sửa", "Tự động cập nhật"
   ========================================================================== */
.tt { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 6px; border: 1px solid; border-radius: var(--r-1); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.tt .i { width: 14px; height: 14px; stroke-width: 2; vertical-align: 0; }
.tt-nhap { color: var(--than-2); background: var(--giay); border-color: var(--ke-dam); border-style: dashed; }
.tt-giao { color: var(--lam); background: var(--lam-nhat); border-color: var(--lam-vien); }
.tt-cho { color: var(--hoac); background: var(--hoac-nhat); border-color: var(--hoac-vien); }
.tt-xong { color: var(--cuu-dam); background: var(--cuu-nhat); border-color: var(--cuu-vien); }
.tt-chot { color: #fff; background: var(--than); border-color: var(--than); }
.tt-tra { color: var(--vach); background: var(--vach-nhat); border-color: var(--vach-vien); }
.tt-qua-han { color: var(--do); background: var(--do-nhat); border-color: var(--do-vien); }
.tt-khong { color: var(--than-2); background: var(--giay-lom); border-color: var(--ke); }
.tt-file { color: var(--than-2); background: var(--giay-2); border-color: var(--ke); }
.tt-nhap-thay { color: var(--vang-muc); background: var(--vang-nhat); border-color: var(--vang-vien); }
.tt-muon { color: var(--do); background: var(--giay); border-color: var(--do-vien); }
.tt-lg { height: 30px; padding: 0 11px 0 9px; font-size: 14.5px; }
.tt-lg .i { width: 16px; height: 16px; }

/* Xếp loại: chữ cái luôn là tín hiệu chính, màu chỉ phụ */
.xl { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border: 1px solid; border-radius: var(--r-1); font-family: var(--f-hep); font-size: 15px; font-weight: 700; line-height: 1; vertical-align: middle; }
.xl-ap { color: #fff; background: var(--cuu-dam); border-color: var(--cuu-dam); }
.xl-a { color: var(--cuu-dam); background: var(--cuu-nhat); border-color: var(--cuu-vien); }
.xl-b { color: var(--hoac); background: var(--hoac-nhat); border-color: var(--hoac-vien); }
.xl-c { color: var(--do); background: var(--do-nhat); border-color: var(--do-vien); }
.xl-trong { color: var(--than-3); background: var(--giay); border-color: var(--ke); border-style: dashed; font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; }

/* Dấu xếp loại lớn ở cuối phiếu: ô vuông chữ cái + nhãn đúng chữ của file */
.xl-dau { display: inline-flex; align-items: center; gap: 12px; padding: 5px 14px 5px 5px; border: 2px solid var(--cuu-dam); border-radius: var(--r-2); background: var(--giay); color: var(--cuu-dam); }
.xl-dau .chu { min-width: 44px; height: 44px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-1); background: var(--cuu-dam); color: #fff; font-family: var(--f-hep); font-size: 28px; font-weight: 700; line-height: 1; }
.xl-dau .nhan { display: block; color: var(--than); font-size: 16px; font-weight: 700; line-height: 1.2; }
.xl-dau .phu-de { display: block; color: var(--than-3); font-size: 13px; font-weight: 500; }
.xl-dau.b { border-color: var(--hoac); } .xl-dau.b .chu { background: var(--hoac); }
.xl-dau.c { border-color: var(--do); } .xl-dau.c .chu { background: var(--do); }
.xl-dau.trong { border-style: dashed; border-color: var(--ke-dam); } .xl-dau.trong .chu { background: var(--giay-lom); color: var(--than-3); font-size: 18px; }

/* Ô cấp trên sửa khác tự đánh giá */
.da-sua { position: relative; color: var(--vach) !important; }
.da-sua::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent var(--vach) transparent transparent; }
.tag-sua { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; height: 20px; border-radius: var(--r-1); background: var(--vach-nhat); border: 1px solid var(--vach-vien); color: var(--vach); font-family: var(--f-ui); font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1; vertical-align: middle; }
.tag-sua .i { width: 12px; height: 12px; stroke-width: 2.2; vertical-align: 0; }
button.tag-sua { cursor: pointer; }
.dong-y { color: var(--than-3); }

/* Tiêu chí lấy số từ dữ liệu chung */
.tu-dong { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 5px; border-radius: var(--r-1); background: var(--lam-nhat); border: 1px solid var(--lam-vien); color: var(--lam); font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1; vertical-align: middle; }
.tu-dong .i { width: 13px; height: 13px; stroke-width: 2.2; vertical-align: 0; }

/* Chú thích "đã sửa" mở ra cạnh ô */
.chu-thich { width: 300px; padding: 12px 14px; background: var(--giay); border: 1px solid var(--vach-vien); border-top: 3px solid var(--vach); border-radius: var(--r-2); box-shadow: var(--bong-2); font-size: 14px; color: var(--than); text-align: left; font-family: var(--f-ui); font-weight: 400; white-space: normal; }
.chu-thich h4 { font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--vach); }
.chu-thich .ly-do { margin-top: 6px; font-size: 15px; font-weight: 600; }
.chu-thich .meta { margin-top: 6px; color: var(--than-3); font-size: 13px; }
.chu-thich .so-sanh { display: flex; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ke); font-size: 13.5px; }
.chu-thich .so-sanh b { font-family: var(--f-hep); font-size: 16px; }

/* ==========================================================================
   8. Bước của phiếu (một trình tự thật nên có số thứ tự)
   ========================================================================== */
.buoc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: buoc; background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-3); overflow: hidden; }
.buoc li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-right: 1px solid var(--ke); color: var(--than-3); font-size: 14.5px; font-weight: 500; line-height: 1.2; }
.buoc li:last-child { border-right: 0; }
.buoc li::before { counter-increment: buoc; content: counter(buoc); flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ke-dam); background: var(--giay); color: var(--than-3); font-family: var(--f-hep); font-size: 13px; font-weight: 700; }
.buoc li small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--than-3); }
.buoc li.xong { color: var(--than-2); }
.buoc li.xong::before { content: "✓"; background: var(--cuu); border-color: var(--cuu); color: #fff; font-family: var(--f-ui); }
.buoc li[aria-current="step"] { background: var(--cuu-50); color: var(--than); font-weight: 700; box-shadow: inset 0 -3px 0 var(--cuu); }
.buoc li[aria-current="step"]::before { border-color: var(--cuu); border-width: 2px; color: var(--cuu-dam); }
.buoc li.tra { background: var(--vach-nhat); box-shadow: inset 0 -3px 0 var(--vach); }

/* Bản thu gọn cho điện thoại */
.buoc-gon { display: flex; flex-direction: column; gap: 8px; }
.buoc-gon .vach-buoc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.buoc-gon .vach-buoc span { height: 6px; border-radius: 1px; background: var(--giay-lom); }
.buoc-gon .vach-buoc span.xong { background: var(--cuu-vien); }
.buoc-gon .vach-buoc span.hien { background: var(--cuu); }
.buoc-gon .nhan-buoc { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14.5px; }
.buoc-gon .nhan-buoc b { font-weight: 700; }

/* ==========================================================================
   9. Thanh trọng số (đủ 100 % mới giao được)
   ========================================================================== */
.ts { display: flex; align-items: center; gap: 18px; padding: 12px 16px; background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-3); }
.ts .ts-nhan { font-size: 14px; font-weight: 600; color: var(--than-2); white-space: nowrap; }
.ts-khung { position: relative; flex: 1; min-width: 0; }
.ts-bar { display: flex; height: 30px; border-radius: var(--r-1); overflow: hidden; background: var(--giay-lom); box-shadow: inset 0 0 0 1px var(--ke); }
.ts-bar span { display: grid; place-items: center; min-width: 0; overflow: hidden; border-right: 2px solid var(--giay); background: #cfe6da; color: var(--cuu-dam); font-family: var(--f-hep); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ts-bar span:nth-child(even) { background: #b8dac8; }
.ts-bar span:last-child { border-right: 0; }
.ts-bar span.thua { background: repeating-linear-gradient(135deg, var(--do-nhat) 0 6px, #f4c7c0 6px 12px); color: var(--do); }
.ts-moc { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--than); }
.ts-moc::after { content: "100"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-family: var(--f-hep); font-size: 11.5px; font-weight: 700; color: var(--than-2); }
.ts-tong { display: flex; align-items: center; gap: 6px; font-family: var(--f-hep); font-size: 22px; font-weight: 700; white-space: nowrap; }
.ts-tong.ok { color: var(--cuu-dam); }
.ts-tong.sai { color: var(--do); }
.ts-tong small { font-family: var(--f-ui); font-size: 13.5px; font-weight: 600; }

/* ==========================================================================
   10. Phiếu KPI — trung tâm của sản phẩm
   ========================================================================== */
.phieu { background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-3); box-shadow: var(--bong-1); }
.phieu-dau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; padding: 22px 28px 16px; border-bottom: 1px solid var(--ke); font-family: var(--f-van-ban); color: #111; }
.co-quan { text-align: center; font-size: 14.5px; line-height: 1.35; text-transform: uppercase; }
.co-quan b { display: block; font-weight: 700; }
.co-quan::after { content: ""; display: block; width: 120px; margin: 7px auto 0; border-top: 1px solid #111; }
.tieu-de-phieu { text-align: center; }
.tieu-de-phieu h2 { font-family: var(--f-van-ban); font-size: 19px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }
.tieu-de-phieu .dv { display: block; font-size: 15.5px; font-weight: 700; text-transform: uppercase; }
.tieu-de-phieu .thang { display: block; margin-top: 2px; font-size: 15.5px; font-style: italic; }
.ban-nhap-dau { display: inline-block; margin-top: 6px; padding: 1px 10px; border: 1.5px solid #111; font-family: var(--f-van-ban); font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.phieu-nguoi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 30px; padding: 11px 28px; background: var(--giay-2); border-bottom: 1px solid var(--ke); font-size: 15px; }
.phieu-nguoi .muc { display: flex; gap: 6px; align-items: baseline; }
.phieu-nguoi .muc span { color: var(--than-3); }
.phieu-nguoi .muc b { font-weight: 700; }
.phieu-body { padding: 16px 20px 20px; }

/* Bảng tiêu chí: hai lượt chấm đặt cạnh nhau, cột cấp trên là kết quả chính thức */
table.bang-tc { width: 100%; border-collapse: collapse; font-size: 15px; }
.bang-tc th, .bang-tc td { border: 1px solid var(--ke); padding: 8px 10px; vertical-align: top; }
.bang-tc thead th { background: var(--giay-2); font-family: var(--f-hep); font-size: 13.5px; font-weight: 600; color: var(--than-2); text-align: center; vertical-align: middle; line-height: 1.2; }
.bang-tc thead th.tu { background: #eef0ef; color: var(--than); font-size: 14px; }
.bang-tc thead th.ct { background: var(--cuu-nhat); color: var(--cuu-dam); font-size: 14px; }
.bang-tc thead th.ct .chinh-thuc { display: block; font-family: var(--f-ui); font-size: 11.5px; font-weight: 600; color: var(--cuu); margin-top: 1px; }
.bang-tc .vach-trai { border-left: 2px solid var(--than-2) !important; }
.bang-tc td.ct { background: var(--cuu-50); }
.bang-tc td.so { text-align: right; font-family: var(--f-hep); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.bang-tc td.tt-col { text-align: center; font-family: var(--f-hep); font-weight: 700; color: var(--than-2); width: 44px; }
.bang-tc .tc-ten { font-weight: 600; line-height: 1.35; }
.bang-tc .pp { display: flex; gap: 6px; align-items: flex-start; margin-top: 5px; font-size: 13.5px; color: var(--than-3); line-height: 1.35; }
.bang-tc .pp .i { width: 14px; height: 14px; margin-top: 1px; color: var(--than-3); }
.bang-tc .ghi-chu-dong { margin-top: 5px; font-size: 13.5px; color: var(--than-2); }
.bang-tc .chua { color: var(--than-3); font-family: var(--f-ui); font-weight: 500; font-size: 13.5px; text-align: center; }
.bang-tc tr.tc-row { cursor: default; }
.bang-tc tr.tc-row.is-open > td { background: #fbfcfb; }
.bang-tc tr.tc-row.is-open > td.ct { background: var(--cuu-50); }
.tc-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin-top: 6px; padding: 0 8px 0 4px; border: 1px solid var(--ke); border-radius: var(--r-2); background: var(--giay); color: var(--cuu-dam); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.tc-toggle:hover { border-color: var(--cuu); background: var(--cuu-50); }
.tc-toggle .i { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.is-open .tc-toggle .i { transform: rotate(90deg); }
.bang-tc tfoot td, .bang-tc tfoot th { background: var(--giay); }
.bang-tc tfoot th { text-align: right; font-family: var(--f-ui); font-weight: 700; font-size: 14.5px; color: var(--than); }
.bang-tc tfoot tr.kq-tong th, .bang-tc tfoot tr.kq-tong td { border-top: 2px solid var(--than); font-size: 16px; }
.bang-tc tfoot tr.tong-diem th, .bang-tc tfoot tr.tong-diem td { background: var(--giay-2); font-size: 17px; }
.bang-tc tfoot tr.tong-diem td.ct { background: var(--cuu-nhat); }
.bang-tc tfoot .ly-do-nho { display: block; font-family: var(--f-ui); font-size: 12.5px; font-weight: 500; color: var(--than-2); text-align: left; white-space: normal; margin-top: 3px; }
.bang-tc .o-so { width: 74px; min-height: 34px; padding: 4px 8px; text-align: right; font-family: var(--f-hep); font-weight: 600; font-size: 15.5px; border: 1px solid var(--ke-dam); border-radius: var(--r-2); background: var(--giay); color: var(--than); }
.bang-tc .o-so::placeholder { color: #8a9590; font-weight: 500; }
.bang-tc .o-so.is-invalid { border-color: var(--do); background: #fffaf9; }
.bang-tc .o-so:focus { border-color: var(--than); box-shadow: var(--focus-ring); }

/* Bảng chi tiết công việc (sheet CT) mở dưới tiêu chí */
.cv-wrap { padding: 4px 0 6px; }
.cv-wrap > td { padding: 0 !important; background: #f8faf9 !important; }
.cv-inner { margin: 0 10px 10px 54px; border: 1px solid var(--ke); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); background: var(--giay); }
.cv-inner .cv-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--giay-2); border-bottom: 1px solid var(--ke); font-size: 13.5px; color: var(--than-2); }
.cv-inner .cv-dau b { color: var(--than); }
table.bang-cv { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bang-cv th, .bang-cv td { padding: 7px 8px; border-bottom: 1px solid var(--ke); border-right: 1px solid #e8ecea; vertical-align: top; text-align: left; }
.bang-cv th:last-child, .bang-cv td:last-child { border-right: 0; }
.bang-cv thead th { background: var(--giay); font-family: var(--f-hep); font-size: 13px; font-weight: 600; color: var(--than-3); white-space: nowrap; vertical-align: bottom; }
.bang-cv td.so, .bang-cv th.so { text-align: right; }
.bang-cv td.so { font-family: var(--f-hep); font-weight: 600; font-size: 15px; }
.bang-cv td.wk { width: 46px; text-align: center; font-family: var(--f-hep); font-weight: 600; }
.bang-cv td.wk.trong { color: #9aa49f; font-weight: 500; }
.bang-cv td.ct { background: var(--cuu-50); }
.bang-cv .can-cu { color: var(--than-2); font-size: 13.5px; }
.bang-cv .tep { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 12.5px; color: var(--lam); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bang-cv tr:last-child td { border-bottom: 0; }
.bang-cv tr.them td { background: var(--giay-2); }

/* Khối kết quả và Bảng xếp loại cạnh nhau */
.phieu-ket { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; margin-top: 16px; align-items: start; }
.bang-xl { width: 100%; border-collapse: collapse; font-size: 14px; }
.bang-xl caption { text-align: left; font-weight: 700; font-size: 14px; padding-bottom: 6px; }
.bang-xl th, .bang-xl td { border: 1px solid var(--ke); padding: 5px 9px; text-align: left; }
.bang-xl th { background: var(--giay-2); font-family: var(--f-hep); font-weight: 600; font-size: 13px; color: var(--than-2); }
.bang-xl td.so { text-align: right; font-family: var(--f-hep); font-weight: 600; }
.bang-xl tr.hien td { background: var(--cuu-50); font-weight: 600; }
.phieu-chu-ky { display: flex; justify-content: space-between; gap: 16px; padding: 14px 28px 18px; border-top: 1px solid var(--ke); font-size: 14px; color: var(--than-2); }

/* Băng ngữ cảnh trên phiếu và trên mọi màn của kỳ */
.bang-ky { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-2); font-size: 15px; }
.bang-ky .grow { min-width: 0; }
.bang-ky.chot { background: var(--than); color: #fff; }
.bang-ky.chot a { color: #fff; }
.bang-ky.tam { background: var(--giay); border: 1px dashed var(--hoac); color: #5a3700; }
.bang-nhap-thay { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 30px; border-radius: var(--r-2); background: var(--vang-nhat); border: 1px solid var(--vang-vien); color: var(--vang-muc); font-size: 15px; position: relative; overflow: hidden; }
.bang-nhap-thay::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: repeating-linear-gradient(-45deg, var(--vang) 0 7px, var(--than) 7px 14px); }
.bang-nhap-thay b { color: var(--than); }

/* ==========================================================================
   11. Báo (thông điệp)
   ========================================================================== */
.bao { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid; border-radius: var(--r-2); font-size: 15px; line-height: 1.45; }
.bao > .i { margin-top: 2px; }
.bao .grow > * + * { margin-top: 4px; }
.bao strong { font-weight: 700; }
.bao-info { background: var(--lam-nhat); border-color: var(--lam-vien); color: #143c55; }
.bao-canh { background: var(--hoac-nhat); border-color: var(--hoac-vien); color: #4f3100; }
.bao-loi { background: var(--do-nhat); border-color: var(--do-vien); color: #6f150e; }
.bao-ok { background: var(--cuu-nhat); border-color: var(--cuu-vien); color: #0a4630; }
.bao-tra { background: var(--vach-nhat); border-color: var(--vach-vien); color: #6b2205; }
.bao-trung { background: var(--giay); border-color: var(--ke); color: var(--than-2); }
.bao .btn { margin-left: auto; }

/* ==========================================================================
   12. Thẻ điện thoại, ghi KQ tuần
   ========================================================================== */
.the { display: block; background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-4); padding: 14px 16px; color: var(--than); text-decoration: none; }
a.the:hover { border-color: var(--ke-dam); color: var(--than); }
.the + .the { margin-top: 10px; }
.the-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.the-dau h3 { font-size: 17px; line-height: 1.3; }
.the .dong { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--ke); font-size: 15px; }
.the .dong:first-of-type { border-top: 0; }
.the .dong span { color: var(--than-2); }
.the .dong b { font-family: var(--f-hep); font-weight: 700; font-size: 17px; }
.the-nhan { border-left: 4px solid var(--cuu); }
.the-nhan.tra { border-left-color: var(--vach); }
.the-nhan.cho { border-left-color: var(--hoac); }
.the-nhan.lam { border-left-color: var(--lam); }
.the-muc { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; }
.the-muc .so-lon { font-family: var(--f-hep); font-size: 24px; font-weight: 700; min-width: 32px; text-align: center; }

.viec-chinh { padding: 16px; border-radius: var(--r-4); background: var(--giay); border: 1px solid var(--ke); border-top: 4px solid var(--cuu); }
.viec-chinh h2 { font-size: 19px; }
.viec-chinh .con-lai { margin-top: 10px; display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.viec-chinh .con-lai b { font-weight: 700; }

/* Bộ chọn tuần T1–T5 */
.tuan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tuan a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px; padding: 4px 2px; border: 1px solid var(--ke); border-radius: var(--r-2); background: var(--giay); color: var(--than-2); text-decoration: none; line-height: 1.15; }
.tuan a b { font-size: 15px; font-weight: 700; color: var(--than); }
.tuan a small { font-size: 12px; color: var(--than-3); font-family: var(--f-hep); font-weight: 600; }
.tuan a .mk { font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.tuan a .mk.ok { color: var(--cuu-dam); }
.tuan a .mk.trong { color: var(--than-3); }
.tuan a[aria-current="page"] { border-color: var(--cuu); border-width: 2px; background: var(--cuu-50); }
.tuan a[aria-current="page"] b { color: var(--cuu-dam); }

.tc-nhom { margin-top: 20px; }
.tc-nhom:first-child { margin-top: 0; }
.tc-nhom-dau { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.tc-nhom-dau .stt { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-1); background: var(--than); color: #fff; font-family: var(--f-hep); font-size: 14px; font-weight: 700; transform: translateY(-1px); }
.tc-nhom-dau h2 { font-size: 16px; line-height: 1.3; flex: 1; }
.tc-nhom-dau .ts-chip { flex: none; font-family: var(--f-hep); font-weight: 700; font-size: 14px; color: var(--than-2); }
.tc-nhom .pp-dong { margin: -2px 0 8px 34px; font-size: 13.5px; color: var(--than-3); }

.cv-the { background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-4); padding: 12px 14px 10px; }
.cv-the + .cv-the { margin-top: 8px; }
.cv-the.is-done { border-color: var(--cuu-vien); }
.cv-the.is-loi { border-color: var(--vach-vien); }
.cv-the h3 { font-size: 16px; line-height: 1.3; }
.cv-the .can-cu { margin-top: 3px; font-size: 14px; color: var(--than-2); }
.cv-the .muc-tieu { margin-top: 2px; font-size: 14px; color: var(--than-3); }
.kq-hang { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.kq-o { display: flex; flex-direction: column; gap: 3px; width: 96px; flex: none; }
.kq-o label { font-size: 13px; font-weight: 600; color: var(--than-2); }
.kq-o input { width: 100%; height: 52px; padding: 0 12px; border: 1.5px solid var(--ke-dam); border-radius: var(--r-2); background: var(--giay); font-family: var(--f-hep); font-size: 24px; font-weight: 700; text-align: center; color: var(--than); }
.kq-o input::placeholder { color: #a3ada8; font-weight: 500; font-size: 20px; }
.kq-o input:focus { border-color: var(--than); box-shadow: var(--focus-ring); }
.kq-o input.is-invalid { border-color: var(--do); background: #fffaf9; }
.btn-khong-loi { flex: 1; align-self: flex-end; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--cuu-vien); border-radius: var(--r-2); background: var(--giay); color: var(--cuu-dam); font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-khong-loi:hover { background: var(--cuu-50); border-color: var(--cuu); }
.btn-khong-loi[aria-pressed="true"] { background: var(--cuu-nhat); border-color: var(--cuu); }
.ghi-loi { margin-top: 10px; }
.tep-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tep-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px 0 10px; border: 1px solid var(--ke); border-radius: var(--r-2); background: var(--giay-2); font-size: 14px; color: var(--than-2); }
.tep-chip .x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--than-3); border-radius: var(--r-1); cursor: pointer; }
.btn-tep { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px dashed var(--ke-dam); border-radius: var(--r-2); background: var(--giay); color: var(--than-2); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.cv-the .tong-thang { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ke); font-size: 14px; color: var(--than-2); }
.cv-the .tong-thang b { font-family: var(--f-hep); font-size: 16px; color: var(--than); }

.tu-dong-the { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px dashed var(--lam-vien); border-radius: var(--r-4); background: var(--giay); }
.tu-dong-the .i-lg { color: var(--lam); }
.tu-dong-the b.so { font-size: 22px; }

/* Tóm tắt tiêu chí trên điện thoại (phiếu dạng thẻ) */
.tc-the { background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-4); overflow: hidden; }
.tc-the + .tc-the { margin-top: 10px; }
.tc-the > summary { list-style: none; display: block; padding: 14px 16px 12px; cursor: pointer; }
.tc-the > summary::-webkit-details-marker { display: none; }
.tc-the .tc-hang1 { display: flex; align-items: flex-start; gap: 10px; }
.tc-the .tc-hang1 .stt { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-1); background: var(--than); color: #fff; font-family: var(--f-hep); font-weight: 700; font-size: 14px; }
.tc-the .tc-hang1 h3 { flex: 1; font-size: 16px; line-height: 1.3; }
.tc-the .tc-hang1 .chev { flex: none; color: var(--than-3); transition: transform .15s var(--ease); }
.tc-the[open] .tc-hang1 .chev { transform: rotate(90deg); }
.tc-the .tc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0 36px; font-size: 13.5px; color: var(--than-3); }
.tc-the .tc-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0 36px; border: 1px solid var(--ke); border-radius: var(--r-2); overflow: hidden; }
.tc-the .tc-so > div { padding: 6px 8px; border-right: 1px solid var(--ke); }
.tc-the .tc-so > div:last-child { border-right: 0; }
.tc-the .tc-so span { display: block; font-size: 12.5px; color: var(--than-3); }
.tc-the .tc-so b { display: block; font-family: var(--f-hep); font-size: 18px; font-weight: 700; }
.tc-the .tc-so.ct { border-color: var(--cuu-vien); background: var(--cuu-50); }
.tc-the .tc-so-nhan { margin: 10px 0 -6px 36px; font-size: 12.5px; font-weight: 700; color: var(--than-2); }
.tc-the .tc-so-nhan.ct { color: var(--cuu-dam); }
.tc-the .tc-body { padding: 0 16px 14px 52px; border-top: 1px solid var(--ke); background: #fafbfa; }
.cv-dong { padding: 10px 0; border-bottom: 1px solid var(--ke); }
.cv-dong:last-child { border-bottom: 0; }
.cv-dong h4 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.cv-dong .tuan-so { display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; margin-top: 6px; border: 1px solid var(--ke); border-radius: var(--r-2); overflow: hidden; background: var(--giay); }
.cv-dong .tuan-so > div { padding: 3px 0; text-align: center; border-right: 1px solid var(--ke); font-family: var(--f-hep); font-weight: 700; font-size: 15px; }
.cv-dong .tuan-so > div:last-child { border-right: 0; background: var(--giay-2); }
.cv-dong .tuan-so small { display: block; font-family: var(--f-ui); font-weight: 600; font-size: 11px; color: var(--than-3); }
.cv-dong .tuan-so .trong { color: #a1aaa6; font-weight: 500; }

.tong-gon { display: grid; grid-template-columns: 1fr auto auto; gap: 0; background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-4); overflow: hidden; }
.tong-gon > div { padding: 9px 14px; border-bottom: 1px solid var(--ke); font-size: 15px; }
.tong-gon .h { background: var(--giay-2); font-family: var(--f-hep); font-weight: 600; font-size: 13.5px; color: var(--than-2); }
.tong-gon .so-c { text-align: right; font-family: var(--f-hep); font-weight: 700; font-size: 17px; min-width: 76px; }
.tong-gon .ct { background: var(--cuu-50); }
.tong-gon .h.ct { background: var(--cuu-nhat); color: var(--cuu-dam); }
.tong-gon .cuoi { border-bottom: 0; border-top: 2px solid var(--than); font-weight: 700; font-size: 17px; }

/* ==========================================================================
   13. Tiến độ kỳ và thống kê (không dashboard trang trí)
   ========================================================================== */
.td-bar { display: flex; height: 18px; min-width: 160px; border-radius: var(--r-1); overflow: hidden; background: var(--giay-lom); }
.td-bar span { display: block; height: 100%; border-right: 1px solid var(--giay); }
.td-bar span:last-child { border-right: 0; }
.td-bar .nhap { background: repeating-linear-gradient(135deg, #d9dedb 0 4px, #c7cecb 4px 8px); }
.td-bar .giao { background: #8fb3cc; }
.td-bar .cho { background: #e2b65e; }
.td-bar .xong { background: var(--cuu); }
.td-bar .khong { background: #a9b2ae; }
.td-chu { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--than-2); }
.td-chu .k { display: inline-flex; align-items: center; gap: 6px; }
.td-chu .k::before { content: ""; width: 12px; height: 12px; border-radius: 1px; background: var(--k, #ccc); }
.td-chu .k.nhap { --k: #c7cecb; } .td-chu .k.giao { --k: #8fb3cc; } .td-chu .k.cho { --k: #e2b65e; } .td-chu .k.xong { --k: var(--cuu); } .td-chu .k.khong { --k: #a9b2ae; }
a.o-dem { display: inline-block; min-width: 36px; padding: 2px 6px; border-radius: var(--r-1); color: var(--than); font-family: var(--f-hep); font-weight: 700; font-size: 16px; text-decoration: none; text-align: right; }
a.o-dem:hover { background: var(--cuu-nhat); color: var(--cuu-dam); text-decoration: underline; }
a.o-dem.is-on { background: var(--than); color: #fff; }
.o-dem.khong-co { color: #a1aaa6; font-weight: 500; }

.xl-bar { display: flex; height: 26px; min-width: 260px; border-radius: var(--r-1); overflow: hidden; background: var(--giay-lom); }
.xl-bar span { display: grid; place-items: center; height: 100%; overflow: hidden; border-right: 2px solid var(--giay); font-family: var(--f-hep); font-weight: 700; font-size: 13px; white-space: nowrap; }
.xl-bar span:last-child { border-right: 0; }
.xl-bar .ap { background: var(--cuu-dam); color: #fff; }
.xl-bar .a { background: #a9d4bd; color: var(--cuu-dam); }
.xl-bar .b { background: #f0cf8c; color: #5a3700; }
.xl-bar .c { background: #eaa79e; color: #6f150e; }

/* Số liệu tóm tắt dạng dòng, không thẻ to */
.so-dong { display: flex; flex-wrap: wrap; gap: 0; background: var(--giay); border: 1px solid var(--ke); border-radius: var(--r-3); }
.so-dong > div { flex: 1 1 0; min-width: 140px; padding: 12px 16px; border-right: 1px solid var(--ke); }
.so-dong > div:last-child { border-right: 0; }
.so-dong span { display: block; font-size: 13.5px; color: var(--than-3); }
.so-dong b { display: block; font-family: var(--f-hep); font-size: 24px; font-weight: 700; line-height: 1.2; }
.so-dong a { color: inherit; text-decoration: none; }
.so-dong a:hover b { color: var(--cuu-dam); text-decoration: underline; }
.so-dong small { display: block; font-size: 13px; color: var(--than-2); }

/* Danh sách việc cần làm (Việc của tôi) */
.viec-list { list-style: none; margin: 0; padding: 0; }
.viec-list li + li { border-top: 1px solid var(--ke); }
.viec-list li > a, .viec-list .v { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; color: var(--than); text-decoration: none; }
.viec-list li > a:hover { background: var(--cuu-50); color: var(--than); }
.viec-list .so-viec { flex: none; min-width: 40px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--r-2); font-family: var(--f-hep); font-weight: 700; font-size: 19px; background: var(--giay-lom); color: var(--than); }
.viec-list .so-viec.cho { background: var(--hoac-nhat); color: var(--hoac); }
.viec-list .so-viec.nhap { background: var(--giay); border: 1.5px dashed var(--ke-dam); color: var(--than-2); }
.viec-list .so-viec.do { background: var(--do-nhat); color: var(--do); }
.viec-list .so-viec.ok { background: var(--cuu-nhat); color: var(--cuu-dam); }
.viec-list .noi-dung { flex: 1; min-width: 0; }
.viec-list .noi-dung b { display: block; font-weight: 600; font-size: 15.5px; }
.viec-list .noi-dung small { display: block; color: var(--than-3); font-size: 13.5px; }
.viec-list .i.chev { color: var(--than-3); }

/* ==========================================================================
   14. Cây đơn vị
   ========================================================================== */
.cay-hang { display: grid; grid-template-columns: minmax(0, 1fr) 96px 92px 120px 132px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--ke); }
.cay-hang:hover { background: var(--cuu-50); }
.cay-hang.dau { min-height: 38px; background: var(--giay-2); font-family: var(--f-hep); font-size: 14px; font-weight: 600; color: var(--than-2); border-bottom-color: var(--ke-dam); }
.cay-hang.dau:hover { background: var(--giay-2); }
.cay-ten { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cay-ten .le { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--than-3); }
.cay-ten b { font-weight: 600; }
.cay-ten small { color: var(--than-3); font-size: 13.5px; }
.cay-hang.c1 .cay-ten { padding-left: 22px; }
.cay-hang.c2 .cay-ten { padding-left: 52px; position: relative; }
.cay-hang.c2 .cay-ten::before { content: ""; position: absolute; left: 34px; top: -14px; bottom: 50%; width: 12px; border-left: 1px solid var(--ke-dam); border-bottom: 1px solid var(--ke-dam); }
.cay-hang.goc { background: var(--giay-2); }
.cay-hang.is-selected { background: var(--cuu-50); box-shadow: inset 3px 0 0 var(--cuu); }
.cay-hang.ngung { color: var(--than-3); }
.len-xuong { display: inline-flex; gap: 4px; }

/* ==========================================================================
   15. Hộp thoại, ngăn kéo
   ========================================================================== */
dialog.hop { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--giay); color: var(--than); box-shadow: var(--bong-2); overflow: auto; }
dialog.hop.rong { width: min(720px, calc(100vw - 32px)); }
dialog.hop::backdrop { background: rgba(27, 37, 43, .48); }
dialog.hop[open].tinh { position: fixed; inset: 0; margin: auto; z-index: 110; }
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(27, 37, 43, .48); }
.hop-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.hop-dau h2 { font-size: 19px; }
.hop-dau p { margin-top: 4px; color: var(--than-2); font-size: 14.5px; }
.hop-than { padding: 8px 20px 18px; }
.hop-chan { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ke); background: var(--giay-2); }
body.ph dialog.hop { width: calc(100vw - 24px); }
body.ph .hop-chan { flex-direction: column-reverse; }
body.ph .hop-chan .btn { width: 100%; min-height: 48px; }

.ngan { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--giay); border-left: 1px solid var(--ke-dam); box-shadow: var(--bong-2); }
.ngan-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--ke); }
.ngan-dau h2 { font-size: 19px; }
.ngan-than { flex: 1; overflow: auto; padding: 20px 22px; }
.ngan-chan { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--ke); background: var(--giay-2); }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--r-2); background: var(--than); color: #fff; font-weight: 500; box-shadow: var(--bong-2); }
.toast .i { color: #8fd8b2; }
body.ph .toast { bottom: 84px; }

/* Lịch sử phiếu (dòng thời gian) */
.ls { list-style: none; margin: 0; padding: 0; position: relative; }
.ls li { position: relative; padding: 0 0 16px 26px; }
.ls li::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: -8px; width: 2px; background: var(--ke); }
.ls li:last-child::before { display: none; }
.ls li::after { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--giay); border: 2px solid var(--ke-dam); }
.ls li.ok::after { border-color: var(--cuu); background: var(--cuu); }
.ls li.tra::after { border-color: var(--vach); background: var(--vach-nhat); }
.ls li.sua::after { border-color: var(--vach); }
.ls li.thay::after { border-color: var(--vang-muc); background: var(--vang); }
.ls .ls-dau { font-weight: 600; font-size: 15px; }
.ls .ls-meta { font-size: 13.5px; color: var(--than-3); }
.ls .ls-ly-do { margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--ke); background: var(--giay-2); font-size: 14px; color: var(--than-2); }
.ls li.tra .ls-ly-do { border-left-color: var(--vach); }

/* Nhật ký: giá trị cũ → mới */
.cu-moi { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-hep); font-weight: 600; font-size: 15px; white-space: nowrap; }
.cu-moi .cu { color: var(--than-3); text-decoration: line-through; text-decoration-color: rgba(90,103,110,.6); }
.cu-moi .moi { color: var(--than); }
.cu-moi .i { width: 14px; height: 14px; color: var(--than-3); }

/* Nhập Excel */
.buoc-nhap { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: bn; }
.buoc-nhap li { display: flex; align-items: center; gap: 8px; padding: 0 22px 0 0; font-size: 15px; color: var(--than-3); font-weight: 500; }
.buoc-nhap li::before { counter-increment: bn; content: counter(bn); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ke-dam); font-family: var(--f-hep); font-weight: 700; font-size: 13px; }
.buoc-nhap li + li { padding-left: 22px; border-left: 1px solid var(--ke); }
.buoc-nhap li.xong { color: var(--than-2); }
.buoc-nhap li.xong::before { content: "✓"; background: var(--cuu); border-color: var(--cuu); color: #fff; }
.buoc-nhap li[aria-current="step"] { color: var(--than); font-weight: 700; }
.buoc-nhap li[aria-current="step"]::before { border-color: var(--cuu); color: var(--cuu-dam); border-width: 2px; }
.tep-tai { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ke); border-radius: var(--r-3); background: var(--giay); }
.tep-tai .bieu { width: 40px; height: 48px; flex: none; display: grid; place-items: end center; padding-bottom: 6px; border: 1.5px solid var(--cuu); border-radius: 3px 10px 3px 3px; color: var(--cuu-dam); font-family: var(--f-hep); font-size: 11px; font-weight: 700; }
.vung-tai { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px; border: 1.5px dashed var(--ke-dam); border-radius: var(--r-3); background: var(--giay); text-align: center; color: var(--than-2); }
.kq-nhap { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.kq-nhap.moi { color: var(--cuu-dam); } .kq-nhap.co { color: var(--than-3); } .kq-nhap.loi { color: var(--do); } .kq-nhap.canh { color: var(--hoac); }
.vi-tri { font-family: var(--f-hep); font-weight: 600; font-size: 13.5px; color: var(--than-2); white-space: nowrap; }

/* Thang đo */
.pp-sinh { padding: 12px 14px; border: 1px solid var(--ke); border-left: 3px solid var(--than); border-radius: var(--r-2); background: var(--giay-2); font-family: var(--f-hep); font-size: 17px; font-weight: 600; line-height: 1.45; }
.thu-kq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.thu-kq .ra { font-family: var(--f-hep); font-size: 22px; font-weight: 700; color: var(--cuu-dam); }
.bac-bang .o-so { width: 88px; }
.bac-bang .o-so, .o-so-chung { min-height: 36px; padding: 4px 8px; text-align: right; font-family: var(--f-hep); font-weight: 600; font-size: 15.5px; border: 1px solid var(--ke-dam); border-radius: var(--r-2); background: var(--giay); color: var(--than); }
.o-so-chung { width: 100px; }
.o-so-chung::placeholder { color: #8a9590; font-weight: 500; }
.o-so-chung.is-invalid { border-color: var(--do); background: #fffaf9; }
.o-so-chung:focus { border-color: var(--than); box-shadow: var(--focus-ring); }
.o-so-chung[readonly] { background: var(--giay-2); border-color: var(--ke); color: var(--than-2); cursor: default; }

/* Đầu phiếu xem trước trong Cài đặt */
.xem-truoc { padding: 18px; border: 1px solid var(--ke); border-radius: var(--r-2); background: var(--giay); font-family: var(--f-van-ban); }

/* ==========================================================================
   16. Trang đăng nhập và trang lỗi
   ========================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 520px; }
.auth-trai { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 56px; background: var(--giay); border-right: 1px solid var(--ke); }
.auth-phieu { max-width: 560px; }
.auth-phai { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 28px; }
.auth-help { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ke); font-size: 14.5px; color: var(--than-2); }
.pw { position: relative; }
.pw .input { padding-right: 48px; }
.pw button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--than-3); cursor: pointer; border-radius: var(--r-2); }
.mau-phieu { border: 1px solid var(--ke); border-radius: var(--r-3); overflow: hidden; background: var(--giay); box-shadow: var(--bong-1); }
.mau-phieu table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mau-phieu th, .mau-phieu td { border: 1px solid var(--ke); padding: 6px 8px; }
.mau-phieu th { font-family: var(--f-hep); font-weight: 600; font-size: 13px; background: var(--giay-2); color: var(--than-2); }

.ph-auth { min-height: 100vh; display: flex; flex-direction: column; padding: 28px 20px 24px; background: var(--giay); }
.ph-auth .ph-brand { flex: none; margin-bottom: 36px; }

.loi-trang { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.loi-khung { width: min(560px, 100%); padding: 32px 32px 28px; background: var(--giay); border: 1px solid var(--ke); border-top: 4px solid var(--than); border-radius: var(--r-3); box-shadow: var(--bong-1); }
.loi-khung .ma-loi { font-family: var(--f-hep); font-size: 14px; font-weight: 600; color: var(--than-3); }
.loi-khung h1 { margin-top: 8px; font-size: 26px; }
.loi-khung p { margin-top: 8px; color: var(--than-2); font-size: 16px; }
.loi-khung .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ==========================================================================
   17. In phiếu A4 ngang
   ========================================================================== */
body.in-a4 { background: #c9cfcc; min-width: 0; }
.in-thanh { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--than); color: #fff; }
.in-thanh .grow { font-size: 14.5px; }
.in-thanh .btn { min-height: 36px; }
.a4 { width: 297mm; min-height: 210mm; margin: 20px auto; padding: 10mm 12mm; background: #fff; color: #000; box-shadow: 0 4px 18px rgba(0,0,0,.18); font-family: var(--f-van-ban); font-size: 11.5pt; line-height: 1.3; }
.a4 + .a4 { margin-top: 16px; }
.a4 .a4-dau { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10mm; }
.a4 .a4-dau .co-quan { font-size: 11pt; }
.a4 .a4-dau .co-quan::after { border-top-color: #000; }
.a4 h1 { font-family: var(--f-van-ban); text-align: center; font-size: 14pt; text-transform: uppercase; }
.a4 .tt-nguoi { display: flex; gap: 12mm; margin: 4mm 0 3mm; font-size: 11.5pt; }
.a4 table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.a4 th, .a4 td { border: 0.6pt solid #000; padding: 1.6mm 2mm; vertical-align: top; }
.a4 th { font-weight: 700; text-align: center; vertical-align: middle; background: #f0f0f0; }
.a4 td.so { text-align: right; white-space: nowrap; }
.a4 td.c { text-align: center; }
.a4 .ky { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6mm; text-align: center; font-size: 11pt; }
.a4 .ky b { display: block; }
.a4 .ky i { display: block; font-size: 10pt; }
.a4 .chan { margin-top: 3mm; font-size: 9.5pt; font-style: italic; }
@page { size: A4 landscape; margin: 0; }
@media print {
  body.in-a4 { background: #fff; }
  .in-thanh, .demo { display: none !important; }
  .a4 { margin: 0; box-shadow: none; page-break-after: always; }
}

/* ==========================================================================
   18. Thanh "Mockup" — công cụ trình diễn, không thuộc sản phẩm
   (gắn data-mockup-tool để visual QA che đi)
   ========================================================================== */
.demo { position: fixed; right: 0; top: 38%; z-index: 500; font-family: var(--f-ui); font-size: 14px; }
.demo-handle { display: block; writing-mode: vertical-rl; padding: 10px 4px; border: 0; border-radius: 6px 0 0 6px; background: #3a2b55; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer; box-shadow: var(--bong-2); }
.demo-panel { position: fixed; right: 34px; top: 12px; bottom: 12px; width: 340px; overflow-y: auto; padding: 14px; border-radius: 8px; background: #2b2140; color: #ece8f5; box-shadow: var(--bong-2); }
.demo-panel a { color: #fff; }
.demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #4a3d66; }
.demo-head strong { font-size: 15px; }
.demo-head span { display: block; font-size: 12px; color: #b9b0cc; }
.demo-sec { margin-top: 12px; }
.demo-sec h2 { font-size: 12.5px; font-weight: 700; color: #b9b0cc; margin-bottom: 6px; }
.demo-seg { display: flex; gap: 4px; }
.demo-seg a, .demo-seg span { flex: 1; padding: 7px 8px; border-radius: 4px; background: #3d3156; text-align: center; text-decoration: none; font-weight: 600; font-size: 13.5px; }
.demo-seg span[aria-current] { background: #f4c21b; color: #2b2140; }
.demo-list { list-style: none; margin: 0; padding: 0; }
.demo-list li + li { margin-top: 3px; }
.demo-list a, .demo-list span { display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; font-size: 13.5px; font-weight: 600; background: #34294b; }
.demo-list span[aria-current] { background: #f4c21b; color: #2b2140; }
.demo-list small { display: block; font-weight: 400; font-size: 12px; color: #c8c0d9; }
.demo-list span[aria-current] small { color: #4a3d1a; }
.demo-steps { margin: 0; padding: 0 0 0 20px; }
.demo-steps li { margin-top: 4px; font-size: 13px; color: #c8c0d9; }
.demo-steps li.is-here { color: #f4c21b; }
.demo-steps a { text-decoration: none; }
.demo-steps a:hover { text-decoration: underline; }
.demo-steps b { color: #fff; font-weight: 700; }
.demo-note { margin-top: 6px; font-size: 12px; color: #b9b0cc; }

/* Mục lục mockup */
.muc-luc { max-width: 1180px; margin: 0 auto; padding: 32px 32px 64px; }
.muc-luc h1 { font-size: 30px; }
.muc-luc .nhom-ml { margin-top: 26px; }
.muc-luc .nhom-ml h2 { font-size: 18px; padding-bottom: 6px; border-bottom: 2px solid var(--than); }
.muc-luc table { width: 100%; border-collapse: collapse; margin-top: 4px; background: var(--giay); }
.muc-luc td, .muc-luc th { padding: 8px 10px; border-bottom: 1px solid var(--ke); text-align: left; font-size: 14.5px; vertical-align: top; }
.muc-luc th { font-family: var(--f-hep); font-weight: 600; color: var(--than-2); background: var(--giay-2); }
.khung-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-1); font-size: 12.5px; font-weight: 600; border: 1px solid var(--ke); background: var(--giay-2); color: var(--than-2); white-space: nowrap; }

/* Màn máy tính hẹp (1280–1420): vùng chính là container, cột phụ xếp xuống dưới thay vì ép bảng; bảng rộng cuộn trong thẻ, không tràn ra ngoài. */
body.dk .main { container-type: inline-size; }
@container (max-width: 1120px) {
  .grid-main-side { grid-template-columns: minmax(0, 1fr) !important; }
}
.panel-body:has(> table), .phieu-body:has(> table) { overflow-x: auto; }
/* Bảng rộng cuộn ngang: tên người không bị bóp thành 3 dòng, cột Thao tác ghim bên phải để nút luôn bấm được. */
.bang td.ten { min-width: 160px; }
.bang .tep { white-space: nowrap; }
.bang td.ten > a, .bang td.ten > b, .bang td.ten > strong { white-space: nowrap; }
.bang th.r:last-child, .bang td.r:last-child { position: sticky; right: 0; z-index: 2; background: var(--giay); box-shadow: -10px 0 8px -8px rgba(20, 30, 36, .14); }
.bang thead th.r:last-child { z-index: 4; background: var(--giay-2); }
.bang tbody tr:hover > td.r:last-child { background: var(--cuu-50); }
.bang.bang-gon th, .bang.bang-gon td { padding-left: 8px; padding-right: 8px; }
.bang.bang-gon thead th { white-space: normal; }
.bang.bang-cham thead th.so { min-width: 66px; }
.bang.bang-nk td.ten { min-width: 0; }
.bang.bang-nk td.ten > a { white-space: normal; }
.bang.bang-nk td:last-child .tt { height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 1.25; }
.tc-toggle { white-space: nowrap; }
.rail-user strong { white-space: normal; overflow-wrap: anywhere; }

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