/* Báo cáo Tuyển dụng V20 — kế thừa ngôn ngữ thị giác của report-v19.html.
   MÀU THEO MEASURE là nguồn duy nhất ở :root. Bản JS song sinh là hằng MC trong app.js;
   SVG không đọc được var(--...) qua thuộc tính fill/stroke nên buộc phải nhân đôi.
   app.js có guard so hai bên lúc khởi động — lệch là log lỗi, đúng lỗi V19 từng dính.

   MÀU THEO NHÓM (duyệt 2026-08-20): mỗi nhóm nghiệp vụ một tông, các measure trong nhóm
   phân biệt bằng đậm/nhạt. Nhóm Kỳ chọn = XANH LÁ (m1/m2/r2b/m3) · nhóm Tồn đọng & dự báo
   3T = CAM (m4/m5/r5b/m6/r6b/m7) · nhóm Hiện tại = XANH DƯƠNG (m8) · Nguồn = TÍM. */
:root{
  --green:#0f8a3c; --green-d:#0b6e2f; --green-l:#e7f4ec;
  --ink:#1f2430; --muted:#6b7280; --line:#e6e8ec; --bg:#eef1f4; --card:#fff;
  --warn:#c0392b; --amber:#d98c00;

  --m1:#5b9c76; --m2:#0f8a3c; --r2b:#0a6b2f; --m2c:#2f8a5a; --r2d:#1f7a4a; --m3:#0d9488;
  --m4:#d98c00; --m5:#b8770a; --r5b:#b45309; --m6:#9a5f06; --r6b:#7c4a05; --m7:#e3a94f;
  --m8:#2563eb; --nguon:#7c3aed;

  /* nền nhạt của nhóm cho cột bảng / khung nhóm KPI */
  --ga-bg:#eef6f1; --gb-bg:#fdf4e4; --gc-bg:#eaf1fd; --gd-bg:#f3edfc;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:13px}
svg text{font-family:inherit}
code{background:#eef1f4;padding:1px 5px;border-radius:4px;font-size:11.5px}

/* ---------- header ---------- */
header{height:54px;padding:0 16px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(90deg,#0b6e2f 0%,#0f8a3c 55%,#12a046 100%);color:#fff}
header h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:9px}
header h1:before{content:"▦";display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:7px;background:rgba(255,255,255,.18);font-size:15px}
header .vbadge{font-size:11px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:10px}
header .meta{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px}
header .gen{opacity:.95}
.hbtn{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;
  border-radius:8px;padding:5px 10px;font:600 12px inherit;cursor:pointer}
.hbtn:hover{background:rgba(255,255,255,.26)}
.source-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:16px;
  font-size:12px;font-weight:700;letter-spacing:.4px;background:#e7f4ec;color:#0b6e2f;border:1px solid #9ad3ae}
.source-badge:before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;
  border-radius:50%;background:#0f8a3c;animation:livepulse 1.4s infinite}
.source-badge.is-loading{background:#fdf3e3;border-color:#f0d9ae;color:#9a6300}
.source-badge.is-loading:before{background:#d98c00}
.source-badge.stale{background:#fdecea;border-color:#f5c6cb;color:#9b2c22}
.source-badge.stale:before{background:#c0392b;animation:none}
@keyframes livepulse{50%{opacity:.25}}

#alert{margin:10px 12px 0;padding:10px 14px;border-radius:9px;font-size:12.5px;line-height:1.55;
  background:#fdecea;color:#7b241c;border:1px solid #f5c6cb}
#alert b{color:#611a15}

/* ---------- shell ---------- */
.app{display:flex;align-items:stretch;min-height:calc(100vh - 54px)}
nav.side{position:sticky;top:0;width:236px;flex:none;height:calc(100vh - 54px);overflow-y:auto;
  padding:12px 0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
nav.side .grp{padding:0 14px 5px;color:#9ca3af;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 14px;border:0;background:transparent;
  color:#4b5563;text-align:left;font:500 13px inherit;cursor:pointer}
.nav-item .ic{width:18px;text-align:center;opacity:.75}
.nav-item:hover{background:#f3f6f8}
.nav-item.on{background:var(--green-l);color:var(--green-d);box-shadow:inset 3px 0 0 var(--green);font-weight:700}
.nav-item.on .ic{opacity:1}
.nav-item:focus-visible,.hbtn:focus-visible,.slicer-toggle:focus-visible,.clear-filter:focus-visible,
.filter-chip:focus-visible,.kpi-info:focus-visible,.sort-button:focus-visible,.dlg-close:focus-visible,
.staff-toggle button:focus-visible,.rk-band:focus-visible{outline:3px solid rgba(15,138,60,.28);outline-offset:2px}
.side-foot{margin-top:auto;padding:10px 14px 0;border-top:1px solid #f1f3f5;color:#9ca3af;font-size:10.5px;line-height:1.6}
main{flex:1;min-width:0;padding:10px 14px 44px}

/* ---------- slicer ---------- */
.slicer{padding:10px 14px 14px}
.mnav{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.mnav button{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:14px;line-height:1}
.mnav button:hover{background:#f0f2f4}
.mnav span{flex:1;text-align:center}
.wbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:6px;padding:3px;background:#f3f5f7;border-radius:9px}
.wbtns .w{padding:5px 0;border:0;border-radius:6px;text-align:center;background:transparent;
  color:var(--muted);font:600 11px inherit;cursor:pointer}
.wbtns .w:hover{background:#e8eef0}
.wbtns .w.wp{color:var(--amber)}
.wbtns .w.on{background:var(--green);color:#fff}
.wnote{margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.5}
.slice-divider{display:flex;align-items:center;gap:6px;margin:11px 0 2px;color:#c6cbd2;
  font-size:10px;text-transform:uppercase;letter-spacing:1px}
.slice-divider:before,.slice-divider:after{content:"";height:1px;flex:1;background:#f1f3f5}
.slicer label{display:flex;flex-direction:column;margin-top:7px;color:var(--muted);font-size:10px;gap:3px}
.slicer select,.slicer input{width:100%;padding:6px 9px;border:1px solid #d8dce2;border-radius:8px;font:12px inherit;background:#fff;color:#1f2937}
.slicer select:focus,.slicer input:focus{outline:1.5px solid var(--green);border-color:var(--green)}
.filter-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;font-size:10.5px}
.filter-chip{padding:3px 8px;border:1px solid #e0e4e9;border-radius:11px;background:#f3f5f7;color:#4b5563}
.filter-chip.time{background:var(--green-l);border-color:#c3e3cf;color:var(--green-d)}
.filter-chip.removable{display:inline-flex;align-items:center;gap:5px;font:10.5px inherit;cursor:pointer}
.filter-chip.removable:hover{border-color:#b7c0ca;background:#fff}
.chip-x{font-size:13px;line-height:1;color:#64748b}
.stale-chip{background:#fdecea;border-color:#f5c6cb;color:#9b2c22}
.clear-filter{margin-top:7px;border:0;background:transparent;padding:3px 0;color:var(--muted);
  text-decoration:underline;font:11px inherit;cursor:pointer}
.slicer-toggle{display:none}

/* ---------- content ---------- */
.view-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;color:var(--muted);font-size:12px}
.view-title h2{margin:0;color:#111827;font-size:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:10px}
.card h2{font-size:13.5px;margin:0 0 3px}
.card .sub{font-size:11.5px;color:var(--muted);margin:0 0 8px;line-height:1.5}
.card-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px;align-items:start}
/* min-width:0 — grid item mặc định min-width:auto sẽ kéo min-content của SVG chart ra ngoài viewport */
.card-grid-2 .card{margin-bottom:0;min-width:0}
.table-card{padding:0;overflow:hidden}
.crumb{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid #eef1f4;font-size:13px}
.drill-hint{margin-left:auto;color:#9ca3af;font-size:11px;text-align:right;min-width:0}
.overview-intro{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:2px 2px 8px}
.overview-intro .eyebrow{color:var(--green-d);font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}
.overview-intro h3{margin:3px 0 0;font-size:16px;line-height:1.3;color:#18212f}
.period-pill{flex:none;padding:6px 10px;border:1px solid #c7dfd0;border-radius:999px;background:var(--green-l);
  color:var(--green-d);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- KPI theo nhóm ---------- */
.kpi-groups{display:grid;grid-template-columns:4fr 1fr;gap:8px;margin-bottom:10px}
.kpi-group{border:1px solid var(--line);border-radius:12px;padding:7px 8px 8px;background:var(--gr-bg,#fff)}
.kpi-group.full{grid-column:1 / -1}
.kpi-group-h{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--gr-ink,#4b5563);padding:0 4px 6px}
.kpi-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:8px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 11px 9px;
  position:relative;overflow:hidden;box-shadow:0 4px 14px rgba(31,36,48,.05)}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bar,var(--m1))}
.kpi.forecast{border-style:dashed}
.kpi-top{display:flex;align-items:start;justify-content:space-between;gap:8px}
.kpi .n{font-size:24px;font-weight:680;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
/* Mọi TỶ LỆ % đều là viên thuốc nền đặc, chữ trắng — dấu hiệu thị giác riêng, không lẫn
   với số tuyệt đối (chữ màu, nền trắng). Áp cho cả thẻ % đứng riêng lẫn tỷ lệ đi kèm. */
.kpi .n.pctv{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;
  color:#fff;font-weight:800;letter-spacing:-.2px;box-shadow:0 3px 9px rgba(31,36,48,.22)}
.kpi-ratio{display:flex;align-items:center;gap:8px;margin-top:7px}
.kpi-ratio .rv{flex:none;display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  background:var(--rc);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 7px rgba(31,36,48,.2)}
.kpi-ratio .rl{font-size:10px;font-weight:650;color:#526071;line-height:1.3}
.kpi .l{font-size:11.5px;font-weight:700;color:#354052;margin-top:5px;line-height:1.35;white-space:normal;
  /* Tên chỉ số là NGUYÊN VĂN bảng đã duyệt nên có dòng rất dài: cắt còn 4 dòng để lưới thẻ
     không bị một thẻ kéo cao bất thường. Tên đủ vẫn có ở tooltip, aria-label và popup. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.kpi .scope{font-size:10px;font-weight:700;color:#94a0af;margin-top:5px;text-transform:uppercase;letter-spacing:.35px}
.kpi .s{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.kpi-info{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid #dce2e8;border-radius:50%;
  background:#f8fafc;color:#64748b;font:700 11.5px Georgia,serif;cursor:help}
.kpi-detail{margin-top:6px;padding:7px 8px;border:1px solid #dbe4ec;border-radius:8px;background:#f8fafc;
  color:#445164;font-size:10.5px;line-height:1.45}
.kpi-badge{display:inline-flex;margin-top:6px;padding:3px 7px;border-radius:999px;background:#fff2e9;border:1px solid #fed7bd;
  color:#a3440a;font-size:10px;font-weight:800}
.kpi-support{margin-top:6px;padding-top:6px;border-top:1px solid #eef1f4;color:#526071;font-size:10.5px;font-weight:650}

/* ---------- charts / tables ---------- */
.chart-scroll{overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.chart-scroll svg{display:block;max-width:none}
.chart-bar:focus{outline:3px solid rgba(15,138,60,.38);outline-offset:2px;filter:brightness(.92)}
.trend-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:#4b5563}
.trend-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
table{width:100%;border-collapse:collapse;font-size:12.5px}
caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
th,td{padding:6px 10px;border-bottom:1px solid #f1f3f5;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{position:sticky;top:0;z-index:1;background:#f7f9fa;color:#475569;font-weight:600;font-size:11px}
/* nhóm cột theo màu nhóm — nền nhạt để mắt bám được cụm cột cùng nghiệp vụ trên bảng rộng */
td.col-ga,th.col-ga{background:var(--ga-bg);box-shadow:inset 1px 0 0 #d9e9df}
td.col-gb,th.col-gb{background:var(--gb-bg);box-shadow:inset 1px 0 0 #efdec0}
td.col-gc,th.col-gc{background:var(--gc-bg);box-shadow:inset 1px 0 0 #cfdff8}
td.col-gd,th.col-gd{background:var(--gd-bg);box-shadow:inset 1px 0 0 #e2d5f5}
tr.grp-row th{position:static;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  text-align:center;padding:4px 8px;border-bottom:2px solid var(--line)}
tr.grp-row th.col-ga{color:var(--r2b)}
tr.grp-row th.col-gb{color:var(--r5b)}
tr.grp-row th.col-gc{color:var(--m8)}
.sort-button{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;min-height:26px;padding:2px 0;
  border:0;background:transparent;color:inherit;text-align:inherit;font:inherit;font-weight:700;cursor:pointer;white-space:normal}
th:first-child .sort-button{justify-content:flex-start}
.sort-mark{flex:none;color:#9aa4b2;font-size:12px}
th[aria-sort="ascending"] .sort-mark,th[aria-sort="descending"] .sort-mark{color:var(--green-d)}
.tblwrap{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.card .tblwrap{border-radius:9px}
.table-card .tblwrap{border:0;border-radius:0}
tbody tr:nth-child(even){background:#fbfcfc}
tr.total td{font-weight:700;border-top:2px solid var(--line);background:#fafbfc;position:sticky;bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.good{color:var(--green);font-weight:700}.bad{color:var(--warn);font-weight:700}
.amber{color:var(--amber);font-weight:700}.muted{color:var(--muted)}
.na{color:#c6cbd2}
.partial{color:var(--amber);font-weight:700}

/* ---------- booking không đạt ---------- */
/* các khối vCOO nằm TRONG card tiêu đề (đỡ rời rạc), nên không cần margin dưới */
/* tối đa 2 khối vCOO mỗi hàng (user 2026-08-24) — auto-fit cũ nhét 3-4 khối làm bảng bên trong chật */
.uf-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.card .empty{margin-bottom:0}
.uf-block{border:1px solid hsl(var(--h),38%,84%);border-radius:11px;overflow:hidden;background:#fff}
.uf-head{background:hsl(var(--h),46%,90%);border-left:5px solid hsl(var(--h),52%,54%);padding:8px 12px}
.uf-name{font-weight:700;font-size:13.5px;color:#0f2233}
.uf-sum{display:block;font-weight:600;font-size:11.5px;color:#3f5064;margin-top:3px;white-space:nowrap}
.uf-pct{display:inline-block;padding:1px 9px;border-radius:999px;background:hsl(var(--h),52%,42%);color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.uf-slicer{display:flex;align-items:center;gap:6px;padding:6px 11px;background:#fbfcfd;border-bottom:1px solid #eef1f4}
.uf-sl-lb{font-size:11px;font-weight:600;color:var(--muted)}
.uf-gd-sel{flex:1;min-width:0;border:1px solid #d7dde3;background:#fff;color:#374151;border-radius:7px;padding:4px 8px;font:11.5px inherit;cursor:pointer}
/* user chốt 2026-08-24 (lượt 2): GIỮ giới hạn chiều cao — khối dài cuộn dọc bên trong */
.uf-wrap{max-height:360px;overflow:auto}
/* trang khoá 1 vCOO (link /vcoo/) hoặc số khối lẻ: khối đơn độc chiếm trọn hàng, không chừa nửa trắng */
.uf-block:only-child{grid-column:1/-1}
.uf-wrap table{font-size:12px}
/* header ĐƯỢC xuống dòng: khối 2-cột chỉ rộng ~480px, nowrap cũ ép bảng cuộn ngang ~640px */
.uf-wrap th{padding:6px 5px;font-size:10.5px;white-space:normal;vertical-align:middle}
.uf-wrap td{padding:5px 5px}
.proj-group td{background:#f6f8fa!important;font-weight:700;font-size:11.5px;color:#334155}
.mx-toggle{all:unset;cursor:pointer;font:inherit;font-weight:700;color:inherit;white-space:nowrap}
.bk-group td{background:#fbfcfd!important;font-weight:600;color:#475569}
.mx-toggle:hover{text-decoration:underline}
.mx-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
/* trong khối vCOO: dòng MÃ DỰ ÁN nhuộm theo màu khối, dòng MÃ BOOKING thụt lề + màu riêng */
.uf-block .proj-group td{background:hsl(var(--h),46%,92%)!important;color:hsl(var(--h),55%,26%)}
.uf-wrap td.bk-code{padding-left:20px;font-weight:600;color:#475569;font-variant-numeric:tabular-nums}

/* ---------- phễu ---------- */
.funnel{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.funnel-step{height:38px;margin:auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 15px;border-radius:10px;color:#fff;font-size:12.5px;font-weight:700;
  min-width:180px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.funnel-drop{text-align:center;font-size:10.5px;color:var(--muted);line-height:15px}
.funnel-drop b{color:var(--warn)}
.funnel-note{margin-top:9px;padding:8px 11px;background:#fdf3e3;border:1px solid #f0d9ae;
  border-radius:8px;font-size:11px;line-height:1.6;color:#7a5100}
.funnel-note b{color:#9a6300}

/* ---------- top dự án + drilldown booking ---------- */
/* 2 cột trên màn rộng cho đỡ một dải bar dài; bảng drilldown luôn tràn hết bề ngang */
.top-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
.top-project{display:grid;grid-template-columns:88px minmax(30px,1fr) 118px 14px;align-items:center;gap:8px;font-size:12px;
  border:0;background:transparent;padding:3px 4px;border-radius:8px;cursor:pointer;text-align:left;font-family:inherit;color:inherit;min-width:0}
.bottom-drill{grid-column:1 / -1}
.top-project:hover{background:#f5f8f6}
.top-project .track{display:block;height:14px;border-radius:3px;background:#f3f5f7;overflow:hidden}
.top-project .fill{display:block;height:100%;border-radius:3px;background:var(--m2)}
.top-project .value{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.top-project .value b{color:var(--ink)}
.top-project .caret{color:var(--green-d);font-size:10px;transition:transform .15s}
.top-project[aria-expanded="true"] .caret{transform:rotate(90deg)}
.bottom-drill{margin:2px 0 8px;border:1px solid var(--line);border-radius:9px;overflow:auto;max-height:320px}
.bottom-drill table{font-size:11.5px}
.bottom-drill th{font-size:10.5px}

/* ---------- tab PTD/NVTD ---------- */
.staff-head{display:flex;align-items:start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.staff-toggle{display:inline-flex;gap:3px;padding:3px;background:#f3f5f7;border-radius:8px}
.staff-toggle button{border:0;background:transparent;border-radius:6px;padding:4px 12px;color:#4b5563;
  font:600 11.5px inherit;cursor:pointer}
.staff-toggle button.on{background:var(--green);color:#fff}
.pareto-pick{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.pareto-pick select{border:1px solid #d7dde3;background:#fff;color:#374151;border-radius:7px;padding:4px 8px;font:12px inherit;cursor:pointer}
.rk-band{cursor:pointer}
svg.rk.dimmed .rk-ent{opacity:.14}
svg.rk.dimmed .rk-ent.hot{opacity:1}
.staff-main{cursor:pointer}
.staff-main .nv-caret{display:inline-block;margin-right:6px;transition:transform .15s;color:var(--green-d);font-size:10px}
.staff-main.open .nv-caret{transform:rotate(90deg)}
.staff-proj{cursor:pointer}
.staff-proj td:first-child{padding-left:26px}
.staff-proj .nv-caret{display:inline-block;margin-right:6px;transition:transform .15s;color:#8a94a3;font-size:9px}
.staff-proj.open .nv-caret{transform:rotate(90deg)}
.staff-bk td:first-child{padding-left:48px;color:#5b6672}
.staff-bk td{background:#fbfcfd}

/* ---------- quality / states ---------- */
.quality-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.quality-card{display:flex;align-items:center;gap:11px;padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px}
.quality-card .qnum{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:#9ca3af}
.quality-card .qlabel{font-size:12px;font-weight:600;color:#4b5563}
.quality-card .qsub{font-size:10.5px;color:#9ca3af;margin-top:2px;line-height:1.4}
.quality-card.alert{background:#fff8ec;border-color:#f0d9ae}
.quality-card.alert .qnum{color:var(--amber)}
.quality-card.alert .qlabel{color:#7a5100}
.empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:13px;
  background:#fff;border:1px dashed #d8dce2;border-radius:12px;margin-bottom:10px}
#loading{position:fixed;right:20px;bottom:20px;padding:8px 14px;border-radius:20px;
  background:rgba(31,36,48,.9);color:#fff;font-size:12px;font-weight:600;z-index:50}

/* ---------- từ điển (modal) ---------- */
#glossaryDlg,#kpiDlg{width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 48px);border:1px solid var(--line);
  border-radius:14px;padding:0;color:var(--ink);font-size:13px;font-family:inherit}
#glossaryDlg::backdrop,#kpiDlg::backdrop{background:rgba(15,23,32,.45)}

/* ---------- popup thẻ KPI → bar chart theo mã dự án ---------- */
.kpi[role="button"]{cursor:pointer;transition:box-shadow .12s,transform .12s}
.kpi[role="button"]:hover{box-shadow:0 6px 18px rgba(31,36,48,.12);transform:translateY(-1px)}
.kpi[role="button"]:focus-visible{outline:3px solid rgba(15,138,60,.38);outline-offset:2px}
#kpiDlg{width:min(720px,calc(100vw - 32px))}
.kd-body{padding:12px 16px 14px}
.kd-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.kd-val{font-size:28px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.05}
.kd-val.pctv{display:inline-flex;padding:4px 14px;border-radius:999px;color:#fff;font-weight:800;
  box-shadow:0 3px 9px rgba(31,36,48,.22)}
.kd-scope{font-size:10.5px;font-weight:700;color:#94a0af;text-transform:uppercase;letter-spacing:.35px}
.kd-ratio{font-size:12px;font-weight:650;color:#526071;margin-top:2px}
.kd-detail{margin:0 0 10px;padding:8px 10px;border:1px solid #dbe4ec;border-radius:8px;background:#f8fafc;
  color:#445164;font-size:12px;line-height:1.5}
.kd-bars{display:grid;gap:3px;max-height:min(52vh,520px);overflow:auto;padding-right:4px}
.kd-row{display:grid;grid-template-columns:minmax(96px,160px) minmax(40px,1fr) 120px;align-items:center;gap:10px;
  font-size:12px;padding:1px 2px;border-radius:4px}
.kd-row:hover{background:#f5f8f6}
.kd-name{font-weight:650;color:#354052;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-row .track{display:block;height:15px;border-radius:3px;background:#f3f5f7;overflow:hidden}
.kd-row .fill{display:block;height:100%;border-radius:3px}
.kd-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.kd-num b{color:var(--ink)}
.kd-foot{margin-top:9px;padding-top:8px;border-top:1px solid #eef1f4;font-size:11px;color:var(--muted);line-height:1.5}
.dlg-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;background:#fff;border-bottom:1px solid var(--line);font-size:14px;z-index:2}
.dlg-close{border:1px solid #d8dce2;background:#fff;border-radius:8px;width:28px;height:28px;
  font-size:16px;line-height:1;color:#4b5563;cursor:pointer}
.dlg-close:hover{background:#f0f2f4}
#v-glossary{padding:12px 16px 16px}
.gwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:9px;margin-bottom:12px}
.gcard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--bar,var(--m1));border-radius:12px;padding:10px 13px}
.gname{font-size:13.5px;font-weight:800;margin-bottom:4px;line-height:1.35}
.gshort{font-size:10.5px;font-weight:700;color:#7b8794;margin-bottom:5px}
.gmean{font-size:12.5px;line-height:1.55;color:#374151}
.gex{font-size:11.5px;color:#4b5563;margin-top:7px;background:#f6f8fa;border-radius:7px;padding:6px 9px;line-height:1.5}
.gsec{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:10px}
.gsec h3{font-size:13.5px;margin:0 0 6px}
.gsec p{margin:6px 0;font-size:12.5px;line-height:1.6;color:#374151}
.gsec .k{display:inline-block;min-width:150px;font-weight:700;color:var(--ink)}
.ghd{font-size:14.5px;font-weight:800;margin:10px 2px 8px}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .kpi-groups{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-group .kpi-grid{--cols:2}
  .card-grid-2{grid-template-columns:1fr}
}
@media(max-width:900px){
  .app{flex-direction:column}
  nav.side{position:static;width:100%;height:auto;overflow:visible;padding:8px 10px;flex-direction:row;flex-wrap:wrap;
    border-right:0;border-bottom:1px solid var(--line);gap:3px}
  nav.side>.grp:first-child{display:none}
  .nav-item{width:auto;flex:0 0 auto;padding:8px 11px;border-radius:8px}
  .nav-item.on{box-shadow:inset 0 -3px 0 var(--green)}
  .side-foot{display:none}
  main{padding:12px 12px 44px}
  header .gen{display:none}
  .uf-blocks{grid-template-columns:1fr}
  .top-projects{grid-template-columns:1fr}
  .slicer-toggle{display:block;flex:1 0 100%;width:100%;margin:5px 0 0;border:1px solid #d8dce2;
    border-radius:8px;background:#fff;padding:8px;text-align:left;color:#374151;font:600 12px inherit;cursor:pointer}
  nav.side .slicer{display:none;flex:1 0 100%;padding:10px 4px 8px}
  nav.side.filters-open .slicer{display:block}
}
@media(max-width:640px){
  header{height:auto;min-height:54px;padding:9px 12px;align-items:flex-start;flex-wrap:wrap}
  header h1{font-size:15px}
  header .meta{width:100%;margin-left:0;justify-content:space-between;flex-wrap:wrap}
  .source-badge{padding:5px 10px;font-size:10.5px}
  .hbtn{padding:5px 9px}
  main{padding:10px 10px 40px}
  .kpi-grid{grid-template-columns:1fr;gap:7px}
  .kpi-group .kpi-grid{--cols:1}
  .overview-intro{align-items:flex-start;flex-direction:column;gap:8px}
  .overview-intro h3{font-size:15px}
  .period-pill{white-space:normal}
  .view-title{align-items:flex-start;flex-direction:column;gap:3px}
  .nav-item{font-size:12px;padding:7px 9px}
  th,td{padding:6px 8px}
  .top-project{grid-template-columns:76px minmax(30px,1fr) 104px 14px}
}