/* TaskFlow V2 — tach tu index.html 14/08/2026. Deploy: server.mjs + index.html + app.css */
/* ============================ RESET & TOKENS ============================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
:root{
  --bg:#f5f6f8; --bg-2:#eceef2; --surface:#ffffff; --surface-2:#f8f9fb;
  --border:#e4e7ec; --border-2:#d6dae1;
  --text:#1b2130; --text-2:#5a6373; --muted:#8b94a3;
  --accent:#5b5bf0; --accent-2:#7a7af5; --accent-soft:#ecebfe; --accent-ink:#3f3fd6;
  --shadow-sm:0 1px 2px rgba(20,25,40,.06);
  --shadow:0 4px 14px rgba(20,25,40,.08);
  --shadow-lg:0 18px 50px rgba(20,25,40,.18);
  --radius:12px; --radius-sm:9px; --radius-lg:18px;
  --green:#18a957; --green-soft:#e3f6ea;
  --blue:#2f77ff; --blue-soft:#e6efff;
  --amber:#e6900a; --amber-soft:#fdf1dc;
  --red:#e23d3d; --red-soft:#fce6e6;
  --purple:#9b4dff; --purple-soft:#f1e7ff;
  --slate:#64748b; --slate-soft:#eef1f5;
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,'Noto Sans',Arial,sans-serif;
  /* ---- V2: thang do dung chung — moi so moi PHAI lay tu day, khong go so tay ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --radius-pill:999px;
  /* z-index co ten — het canh so 9999 chay dua */
  --z-side:40; --z-top:50; --z-drop:60; --z-modal:80; --z-toast:90; --z-cmdk:100;
  /* khung layout V2 */
  --topbar-h:56px; --side-w:248px; --side-w-min:64px;
}
:root[data-theme="dark"]{
  --bg:#0e1118; --bg-2:#0a0d13; --surface:#171b24; --surface-2:#1d222d;
  --border:#272d3a; --border-2:#333b4a;
  --text:#e7eaf1; --text-2:#a9b2c2; --muted:#727d90;
  --accent:#7b7bf7; --accent-2:#9494fa; --accent-soft:#22243b; --accent-ink:#b7b7fb;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 6px 20px rgba(0,0,0,.4);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  --green:#2fbf6d; --green-soft:#12331f;
  --blue:#4f8bff; --blue-soft:#122036;
  --amber:#eaa22a; --amber-soft:#332711;
  --red:#f26363; --red-soft:#361717;
  --purple:#b072ff; --purple-soft:#26183a;
  --slate:#8b98ac; --slate-soft:#1f2430;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--text)}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700}

/* ============================ LAYOUT ============================ */
/* 100dvh: tren iOS `100vh` tinh theo chieu cao KHI thanh dia chi an, nen o che do thuong
   phan day bi thanh cong cu che mat va layout giat moi lan cuon. Giu 100vh lam ban du phong
   cho trinh duyet cu — dong sau de len khi may hieu dvh. */
#app{display:grid;grid-template-columns:var(--side-w) 1fr;height:100vh;height:100dvh;width:100vw;transition:grid-template-columns .18s ease}
#sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
#topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--border);background:var(--surface);position:relative;z-index:var(--z-top)}
#content{flex:1;overflow:auto;padding:24px 26px 60px}

/* ---------- Sidebar ---------- */
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#a05bf0);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;box-shadow:0 4px 12px rgba(91,91,240,.4)}
.brand b{font-size:16.5px;letter-spacing:-.2px}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.3px}
.nav{padding:6px 12px;overflow:auto;flex:1;min-height:0}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:700;padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--text-2);font-weight:600;cursor:pointer;margin-bottom:2px;transition:.12s;user-select:none;font-size:13.5px}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink)}
.nav-item .ic{width:19px;height:19px;flex:0 0 19px;display:flex;align-items:center;justify-content:center}
.nav-item .count{margin-left:auto;background:var(--bg-2);color:var(--text-2);font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px}
.nav-item.active .count{background:var(--accent);color:#fff}
.side-foot{padding:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.side-foot .who{min-width:0}
.side-foot .who b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who span{font-size:11px;color:var(--muted)}
.cmdk-ov{position:fixed;inset:0;background:rgba(12,15,28,.5);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:2000}
.cmdk-ov.open{display:flex}
.cmdk{width:min(560px,92vw);background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.cmdk-in input{flex:1;border:0;background:transparent;outline:0;color:var(--text);font-size:15px;font-family:inherit}
.cmdk-res{max-height:340px;overflow:auto;padding:8px}
.cmdk-gl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px;font-weight:700}
.cmdk-it{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--text)}
.cmdk-it .ic{width:17px;height:17px;flex:none;opacity:.8}
.cmdk-it.hi{background:var(--accent-soft);color:var(--accent-ink)}
.cmdk-it .rk{margin-left:auto;font-size:11px;color:var(--muted)}
.kbd-hint{font-size:10.5px;color:var(--muted);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-weight:600}
.delta{font-family:var(--mono,monospace);font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.delta.up{background:var(--green-soft);color:var(--green)}
.delta.down{background:var(--red-soft);color:var(--red)}
.fin-strip{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
/* min-width:0 là BẮT BUỘC: ô lưới mặc định min-width:auto nên bảng lương/hợp đồng bên trong panel
   kéo cả cột giãn ra, media query 820px thu về một cột cũng vô ích — cả trang trôi ngang. */
.hr360{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
.hr360>*{min-width:0}
.hr-dir{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;max-height:72vh;overflow-y:auto}
.hr-dir-search{padding:10px 12px;border-bottom:1px solid var(--border)}
.hr-dir-search input{width:100%;border:1px solid var(--border);background:var(--bg-2);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--text);outline:0}
.hr-dir-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-left:3px solid transparent}
.hr-dir-item:hover{background:var(--surface-2)}
.hr-dir-item.on{background:var(--accent-soft);border-left-color:var(--accent)}
.hr-tabs2{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}
/* Bàn Hành chính — lưới 2 cột. `min-width:0` là BẮT BUỘC: ô lưới mặc định min-width:auto nên
   một bảng rộng bên trong sẽ kéo cả cột giãn ra, media query thu cột lại cũng vô ích. */
/* 🔴 Sac thai huy hieu cua Ban Hanh chinh. Khong khai thi 18 cho goi b-ok/b-warn/... deu ra
   huy hieu KHONG MAU — 5 trang thai tai san trong y het nhau, mat hoan toan tin hieu mau. */
/* 🔴 `.btn.hc` là nút hành động chính của Bàn Hành chính (màu hổ phách, phân biệt với nút
   .primary màu chàm của toàn hệ). Dùng 7 chỗ mà quên khai một lần thì cả 7 nút tụt về nút
   thường — mất sạch tín hiệu "đây là việc của màn này", và không có lỗi nào báo. */
.btn.hc{background:var(--amber);border-color:var(--amber);color:#fff;box-shadow:var(--shadow-sm)}
.btn.hc:hover{filter:brightness(1.06);background:var(--amber);border-color:var(--amber)}
.b-ok{background:var(--green-soft);color:var(--green)}
.b-warn{background:var(--amber-soft);color:var(--amber)}
.b-dan{background:var(--red-soft);color:var(--red)}
.b-info{background:var(--blue-soft);color:var(--blue)}
.b-mut{background:var(--slate-soft);color:var(--text-2)}
.b-pur{background:var(--purple-soft);color:var(--purple)}
.mb8{margin-bottom:8px}
.hcvp-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hcvp-2col>*{min-width:0}
.hcvp-side{display:grid;grid-template-columns:1fr 340px;gap:14px}
.hcvp-side>*{min-width:0}
@media(max-width:1024px){.hcvp-2col{grid-template-columns:1fr}}
@media(max-width:1024px){.hcvp-side{grid-template-columns:1fr}}
.hr-tab2{padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border:0;border-bottom:2px solid transparent;background:none;font-family:inherit;margin-bottom:-1px}
.hr-tab2:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:4px}
.hr-tab2:hover{color:var(--text)}
.cnt2{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;background:var(--red);color:#fff;border-radius:99px;padding:1px 6px;line-height:1.5}
.tnum{font-variant-numeric:tabular-nums}
/* .mono — dùng ở bảng hợp đồng/mã số thuế nhưng CHƯA TỪNG được khai, nên rơi về phông tỉ lệ và
   các cột số/ngày không thẳng hàng. Lớp chưa khai không báo lỗi ở đâu cả, đây là loại lỗi đã
   lặp nhiều đợt trong dự án — quét lại bằng lệnh ghi trong bản bàn giao trước khi thêm lớp mới. */
.mono{font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;font-variant-numeric:tabular-nums}
.kt-cust-row:hover{background:var(--hover,rgba(0,0,0,.03))}
@media(max-width:1024px){.kt-desk{grid-template-columns:1fr !important}}
.fw400{font-weight:400}
.m0{margin:0}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.sh-cell{height:30px;padding:2px 7px;font-size:12.5px}
.sh-tbl th{font-size:11px;white-space:nowrap}
.sh-tbl td{padding:3px 4px;vertical-align:middle}
/* th da khai .tar/.tac nhung .tbl th{text-align:left} de bep => tieu de cot so bi lech
   khoi con so ben duoi. Tra lai dung y cua lop (26/08). */
.tbl th.tar{text-align:right}
.tbl th.tac{text-align:center}
/* Bang KPI Giao nhan: moi cot mot be rong, o nhap rong bang cot nen mep phai cua so nhap
   thang hang voi so cua dong tu tinh. */
.gn-tbl th:first-child,.gn-tbl td:first-child{width:30%;min-width:210px;text-align:left}
.gn-tbl th:not(:first-child),.gn-tbl td:not(:first-child){min-width:132px;text-align:right}
/* O NHAP co vien 1px + padding trong 7px nen chu so tut vao 8px so voi o thuong. Cho o
   thuong padding-right 12px, o co input 4px => chu so hai loai dong THANG MOT MEP. */
/* Phai la `.tbl.gn-tbl` moi de duoc `.tbl td{padding:12px 14px}` o duoi; va o nhap phai ghi
   ro padding-right:7px vi `.inp{padding:0 12px}` da de bep `.sh-cell{padding:2px 7px}`.
   4px (o) + 1px (vien) + 7px (trong o) = 12px = padding cua o tu tinh. */
/* O TIEN go tay trong bang thuong (khong phai bang KPI Giao nhan): o rong bang cot va
   6px (o) + 1px (vien) + 7px (trong o) = 14px = padding-right cua `.tbl td`, nen chu so cua
   o nhap dung thang hang voi chu so cua o tu tinh ben duoi/ben tren. */
.tbl td.money-cell{text-align:right;padding-right:6px}
.tbl td.money-cell .inp{display:block;width:100%;min-width:88px;padding-right:7px;font-variant-numeric:tabular-nums}
.tbl.gn-tbl th,.tbl.gn-tbl td{padding-right:12px}
.gn-tbl td:has(.inp){padding-right:4px}
.gn-tbl td .inp{display:block;width:100%;padding-right:7px;font-variant-numeric:tabular-nums}
.gn-tbl td.gn-pct .inp{max-width:110px;margin-left:auto}
.sh-hot{background:color-mix(in srgb,var(--red) 9%,transparent)}
/* BM03 · Nhật ký công việc (tab "Nhật ký công việc" màn QL Sale & SX). Khai ĐỦ tại đây — mọi
   lớp .sh-wl-* / .st-* dùng trong shTabWorklog đều phải có mặt trong khối này, đúng bài học
   "lớp CSS chưa khai" đã lặp nhiều đợt. Màu lấy từ biến sẵn có, không thêm biến mới. */
.sh-wl-g{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.sh-wl-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;text-align:left;padding:10px 14px;border:0;background:var(--surface-2);color:inherit;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sh-wl-sum:hover{background:var(--bg-2)}
.sh-wl-sum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sh-wl-car{width:10px;font-size:11px;color:var(--muted)}
.sh-wl-cnt{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:1px 8px}
.sh-wl-rev{font-size:10px;font-weight:700;border-radius:99px;padding:1px 8px}
.sh-wl-rev.y{background:var(--green-soft);color:var(--green)}
.sh-wl-rev.n{background:var(--bg-2);color:var(--muted)}
/* Nhan cot "Nguon" (26/08): phan biet dong MAY tu ghi voi dong nguoi go tay. */
/* PHAI viet .tag.sh-wl-auto (0,2,0): luat `.tag{}` nam SAU trong tep, cung do dac tinh (0,1,0)
   thi no thang — do getComputedStyle moi thay, doc luat khong thay. Bai hoc lap nhieu dot. */
.tag.sh-wl-auto{background:var(--blue-soft);color:var(--blue);font-size:10px;font-weight:700;white-space:nowrap}
/* Dai doi chieu bang 1 <-> bang 2, va nhan "thieu don" (26/08). Truoc do lech hai bang
   hoan toan IM LANG — nguoi dung chi phat hien bang cach dem tay. */
.sh-recon{background:var(--amber-soft);border:1px solid var(--amber);border-radius:9px;padding:7px 11px;margin-top:8px;font-size:12px;line-height:1.7}
.tag.sh-noord{background:var(--red-soft);color:var(--red);font-size:10px;font-weight:700;white-space:nowrap}
/* Goi y @tag: nhan cho nguoi CHUA tham gia viec — tag vao la MOI ho vao (26/08). */
.cmt-sug-new{font-size:10px;font-weight:700;color:var(--amber);background:var(--amber-soft);border-radius:99px;padding:1px 7px;white-space:nowrap}
.sh-wl-n{display:inline-block;min-width:17px;margin-left:5px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.sh-wl-body{padding:10px 14px 14px}
.sh-wl-add{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end;padding:8px 10px;margin-bottom:8px;border:1px dashed var(--border-2);border-radius:10px;background:var(--surface-2)}
/* Bốn màu trạng thái theo yêu cầu: Hoàn thành xanh lá · Chờ phản hồi vàng · Đang làm hồ sơ
   xanh dương · Hủy/Từ chối xám-đỏ (nền đỏ nhạt + chữ xám). Dùng color-mix y như .sh-hot. */
.sh-wl-r.st-done{background:color-mix(in srgb,var(--green) 10%,transparent)}
.sh-wl-r.st-wait{background:color-mix(in srgb,var(--amber) 13%,transparent)}
.sh-wl-r.st-doing{background:color-mix(in srgb,var(--blue) 10%,transparent)}
.sh-wl-r.st-cancel{background:color-mix(in srgb,var(--red) 8%,transparent)}
.sh-wl-r.st-cancel td{color:var(--muted)}
/* BM01 — tô màu dòng đúng theo chú thích trong file của TP Sale: 'Đã chốt' = xanh dương toàn
   dòng; ngày "Không phát sinh" = xám. Dùng color-mix trên biến màu có sẵn nên nền tự đổi theo
   GIAO DIỆN SÁNG/TỐI, chữ vẫn là var(--text) trên nền pha loãng ~12% nên đọc được ở cả hai.
   CỐ Ý không đặt nền đặc: nền xanh đặc + chữ tối là không đọc nổi ở giao diện sáng, mà đổi chữ
   sang trắng thì lại hỏng ở giao diện tối. */
.sh-won{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.sh-won td{color:var(--text)}
.sh-nodeal{background:color-mix(in srgb,var(--muted) 18%,transparent)}
.sh-nodeal td{color:var(--muted);font-style:italic}
/* Ô bắt buộc còn để trống — dùng cho "Tên người cung cấp" khi nguồn là Nguồn nội bộ / Môi giới.
   Viết .inp.sh-req chứ KHÔNG phải .sh-req: .inp khai báo sau khối này và dùng thuộc tính rút gọn
   `border:`, một lớp đơn đặt trước sẽ bị nó ghi đè và ô không bao giờ đổi màu. */
.inp.sh-req{border-color:var(--amber)}
/* Tab "Công nợ" (màn QL Sale & SX). Khai ĐỦ tại đây — mọi lớp .sh-dbt-* dùng trong shTabDebt /
   hộp thoại "Nhập từ PMKT" đều phải có mặt trong khối này, đúng bài học "lớp CSS chưa khai" đã
   lặp nhiều đợt. Chỉ dùng biến màu sẵn có, không thêm biến mới, không nạp thư viện nào. */
/* Màn "Cẩm nang" — mọi lớp .gd-* dùng trong viewGuide()/gdMd() phải có mặt ở đây, đúng bài
   học "lớp CSS chưa khai" đã lặp nhiều đợt. Chỉ dùng biến màu sẵn có. */
.gd-wrap{display:grid;grid-template-columns:270px 1fr;gap:14px;align-items:start}
@media(max-width:1024px){.gd-wrap{grid-template-columns:1fr}}
.gd-side{position:sticky;top:8px}
.gd-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:13px;line-height:1.35}
.gd-item:hover{background:var(--surface-2)}
.gd-item.on{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent);font-weight:650}
.gd-item small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.gd-grp{padding:8px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gd-body{font-size:14px;line-height:1.65}
.gd-body h1{font-size:22px;font-weight:750;margin:0 0 4px}
.gd-body h2{font-size:17px;font-weight:700;margin:22px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.gd-body h3{font-size:14.5px;font-weight:700;margin:16px 0 6px}
.gd-body p{margin:0 0 10px}
.gd-body ul,.gd-body ol{margin:0 0 10px;padding-left:22px}
.gd-body li{margin:3px 0}
.gd-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.gd-body pre{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;overflow-x:auto;margin:0 0 12px}
.gd-body pre code{background:none;border:0;padding:0;font-size:12px;line-height:1.5}
.gd-body blockquote{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--amber);background:var(--surface-2);border-radius:0 9px 9px 0}
.gd-body blockquote p:last-child{margin:0}
.gd-body hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.gd-tblw{overflow-x:auto;margin:0 0 12px}
.gd-body table{border-collapse:collapse;width:100%;min-width:420px;font-size:13px}
.gd-body th,.gd-body td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.gd-body th{background:var(--surface-2);font-weight:700}
.gd-mark{background:var(--amber-soft,rgba(245,158,11,.28));border-radius:3px}
.gd-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
@media print{.gd-side,#sidebar,#topbar,.gd-noprint{display:none!important}.gd-wrap{display:block}}
.sh-dbt-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sh-dbt-acct{display:inline-block;min-width:44px;text-align:center;font-weight:700;font-size:11.5px;border:1px solid var(--border);border-radius:6px;padding:1px 7px;background:var(--surface-2)}
.sh-dbt-grp{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.sh-dbt-grp-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;background:var(--surface-2);font-size:13px;font-weight:600}
.sh-dbt-sum{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.sh-dbt-src{font-size:10px;font-weight:700;border-radius:99px;padding:1px 7px}
.sh-dbt-src.pmkt{background:var(--green-soft);color:var(--green)}
.sh-dbt-src.tay{background:var(--bg-2);color:var(--muted)}
.sh-dbt-late{color:var(--red);font-weight:700}
.sh-dbt-kq{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.sh-dbt-paste{width:100%;min-height:118px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);resize:vertical}
/* .sh-dbt-map chỉ là MÓC querySelector cho ô ghép cột trong hộp thoại nhập — vẫn khai ở đây để
   không ai phải đoán nó là lớp chết hay lớp quên khai (quy tắc quét lớp CSS chưa khai). */
.sh-dbt-map{min-width:0}
/* Dải chip lọc theo mảng chuyên môn ở màn Sale. Cố ý KHÔNG mượn .hr-tab2: đây là bộ lọc nội
   dung chứ không phải chuyển tab — trông giống hệt tab sẽ khiến người dùng tưởng mất tab. */
.sh-skillbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.sh-skillbar-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.sh-skill{padding:5px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--muted)}
.sh-skill:hover{color:var(--text);border-color:var(--accent)}
.sh-skill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sh-skill.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* Khung hai cot cua tab "Kenh". PHAI dung minmax(0,…): voi `1.55fr 1fr` tran, kich thuoc toi
   thieu cua o luoi la min-content, ma trong o co bang — bang keo o rong ra qua khung. Do o mai
   375px: khung 314px nhung o con rong 427-554px (Ads te nhat), tuc la ca tab Kenh tran ngang
   tren dien thoai. Duoi 900px xep chong mot cot. */
.mk-2col{display:grid;gap:14px;align-items:start;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.mk-2col-rev{display:grid;gap:14px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
@media(max-width:1024px){.mk-2col,.mk-2col-rev{grid-template-columns:minmax(0,1fr)}}
.mk-kan{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}
.mk-col{background:var(--surface-2);border-radius:12px;padding:10px}
.mk-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.mk-card:hover{border-color:var(--accent)}
.mk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mk-day{border:1px solid var(--border);border-radius:8px;min-height:74px;padding:4px;font-size:11px;position:relative}
.mk-day .dn{font-weight:700;color:var(--muted)}
.mk-chip{display:block;border-radius:5px;padding:1px 5px;margin-top:2px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#fff}
.mk-add{position:absolute;top:2px;right:4px;opacity:.35;cursor:pointer;font-weight:800}
/* Pheu Marketing <-> Sale: cuon ngang tren dien thoai thay vi bop chu con khong doc duoc. */
.mk-fun{display:grid;grid-template-columns:repeat(7,minmax(96px,1fr));gap:6px;overflow-x:auto;padding-bottom:4px}
.mk-fs{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 8px;min-width:96px;display:flex;flex-direction:column;gap:3px}
.mk-fs .fn{font-size:11px;color:var(--text-2);font-weight:600;line-height:1.25;min-height:2.4em}
.mk-fs .fc{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.mk-fs .fv{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mk-fs .fb{height:4px;border-radius:3px;background:var(--accent);opacity:.85}
.mk-fs.wait{border-style:dashed}
/* Chuoi tien: chi/lead/chuyen Sale/goi/chot/doanh thu */
.mk-chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.mk-cl{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px}
.mk-cl .cl{font-size:11px;color:var(--muted)}
.mk-cl .cv{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.mk-cl .cr{font-size:11px;color:var(--text-2)}
.mk-cl.end{border-color:var(--green)}
.mk-cl.end .cv{color:var(--green)}
/* Thanh ty le ly do khong chot */
.mk-rr{display:grid;grid-template-columns:1fr 130px 40px;gap:9px;align-items:center;margin-top:7px}
.mk-rb{height:9px;border-radius:5px;background:var(--slate)}
.mk-rb.hot{background:var(--red)}
/* Hang cho lead tho */
.mk-q{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-top:8px}
.mk-q.dup{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent)}
@media(max-width:640px){ .mk-fun{grid-template-columns:repeat(7,120px)} }
.mk-day:hover .mk-add{opacity:1}
.hr-tab2.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
/* Dot 6B: dong khach dang duoc chon de chia viec */
tr.kt-picked{background:var(--accent-soft,rgba(31,111,92,.10))}
tr.kt-picked:hover{background:var(--accent-soft,rgba(31,111,92,.14))}
@media(max-width:1024px){.two-col{grid-template-columns:1fr !important}}
.ring360{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;flex:none}
.ring360 .rin{width:64px;height:64px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--mono,monospace);font-weight:700;font-size:16px;flex-direction:column;line-height:1}
@media(max-width:1024px){.hr360{grid-template-columns:1fr}}

/* ---------- Topbar ---------- */
.search{flex:1;max-width:420px;position:relative}
.search input{width:100%;height:38px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:0 12px 0 38px;outline:none;transition:.15s}
.search input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.top-title{font-size:17px;font-weight:700;margin-right:auto}
.top-title small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:.13s}
.icon-btn:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:13.5px;transition:.13s;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--border-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn.primary:hover{background:var(--accent-ink);filter:brightness(1.02)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--red);border-color:var(--red-soft)}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:8px}
.btn.icon{padding:0;width:38px;justify-content:center}
.btn:disabled{opacity:.55;cursor:not-allowed}
.notif-dot{position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface)}

/* ---------- Chips / badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;line-height:1.4;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--slate-soft);color:var(--text-2)}
/* .chip dung 43 cho trong ma (trang thai phieu ban giao, ho so, vuong mac, cong no...) nhung
   CHUA TUNG duoc khai — moi cho deu dat mau nen bang style inline roi trong cho lop nay lo
   padding/bo goc, nen tu truoc toi nay chung hien ra la chu tran khong vien. Dung lop loi
   ".btn.hc dung 7 cho ma chua khai" da gap 02/08. Khai o day cho ca app dung chung. */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:6px;line-height:1.5;white-space:nowrap;background:var(--slate-soft);color:var(--text-2)}
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:700;flex:0 0 auto;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.avatar.sm{width:22px;height:22px;font-size:10px}
.avatar.lg{width:40px;height:40px;font-size:15px}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:16px}
.stat{padding:18px}
.stat .lbl{font-size:12.5px;color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:8px}
.stat .val{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:6px}
.stat .sub{font-size:12px;color:var(--muted);margin-top:2px}
.stat .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.section-title{font-size:15px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px}
/* .page-head dung 4 cho (Ho so San xuat, 3 man Giao nhan) nhung CHUA TUNG duoc khai — cung
   dung lop loi voi ".btn.hc" / ".fs10" / ".chip". Hau qua: hang tieu de tro ve block nen
   nut/badge ben phai roi xuong dong rieng, con <h2> an theo co mac dinh trinh duyet (24px)
   to hon moi tieu de khac trong app (19-20px). Khai o day: hang co tieu de trai - hanh dong phai. */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-head>*{min-width:0}
.page-head h2{font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.3}
.muted{color:var(--muted)}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{opacity:.5;margin-bottom:10px}

/* ---------- Kanban ---------- */
.board{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;padding-bottom:12px;min-height:calc(100vh - 190px)}
.col{flex:0 0 300px;width:300px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;max-height:calc(100vh - 175px)}
.col-head{display:flex;align-items:center;gap:9px;padding:13px 14px 9px;font-weight:700;font-size:13.5px}
.col-head .n{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700;background:var(--surface);padding:1px 9px;border-radius:20px}
.col-body{padding:4px 10px 10px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:9px;min-height:60px}
.col-body.drag-over{background:var(--accent-soft);border-radius:10px;outline:2px dashed var(--accent);outline-offset:-4px}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.12s;position:relative}
.tcard:hover{border-color:var(--border-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.tcard.dragging{opacity:.45;transform:rotate(1.5deg)}
.tcard .ttl{font-weight:600;font-size:13.5px;line-height:1.4;margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tcard .meta{display:flex;align-items:center;gap:12px;margin-top:9px;color:var(--muted);font-size:11.5px}
.tcard .meta span{display:inline-flex;align-items:center;gap:4px}
.pbar{height:5px;background:var(--bg-2);border-radius:10px;overflow:hidden;margin-top:9px}
.pbar>i{display:block;height:100%;background:var(--accent);border-radius:10px;transition:.3s}
/* Thanh tỷ lệ đúng hạn (bảng KPI cuối tháng): hai đoạn xanh/đỏ nằm ngang trong cùng một rãnh.
   Vẽ bằng CSS thuần vì toàn app gói trong MỘT file, không được nạp thư viện biểu đồ ngoài.
   Phải tách khỏi .pbar: .pbar>i chiếm trọn rãnh và chỉ có một đoạn, không xếp cạnh nhau được. */
.ot-bar{display:flex;height:8px;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.ot-bar>span{display:block;height:100%}
.ot-bar>span.ok{background:var(--green)}
.ot-bar>span.late{background:var(--red)}
.due-chip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.due-over{background:var(--red-soft);color:var(--red)}
.due-soon{background:var(--amber-soft);color:var(--amber)}
.due-ok{background:var(--slate-soft);color:var(--text-2)}

/* ---------- Table (list view) ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.lg-th:hover{color:var(--text)}
.lg-inl{width:100%;min-width:90px;height:30px;border:1px solid transparent;background:transparent;border-radius:7px;padding:0 7px;font-size:13px;color:var(--text);font-weight:500;outline:none;appearance:none;transition:.12s}
.lg-inl:hover{border-color:var(--border);background:var(--surface-2)}
.lg-inl:focus{border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent)}
select.lg-inl{cursor:pointer;padding-right:16px}
.lg-num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td:has(.lg-inl){padding:5px 8px}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:.1s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .cbx{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* Bảng XẾP CHỒNG trên màn hẹp — dùng cho bảng có NÚT HÀNH ĐỘNG ở cột cuối.
   Bảng Phiếu đề xuất có 8 cột, cột nút nằm CUỐI, cột đầu ép min-width 260px: trên điện thoại
   375px phải cuộn ngang hết bảng mới thấy nút Duyệt/Từ chối — trong khi "duyệt nhanh ở mọi
   nơi, không phải về công ty" là đúng thứ CEO yêu cầu. Mỗi dòng thành một thẻ, nhãn cột lấy
   từ data-l nên KHÔNG phải viết lại markup lần thứ hai (tránh hai bản rồi lệch nhau).
   min-width:0 phải có !important vì nó chọi với style nội tuyến trên chính ô đó. */
@media(max-width:640px){
  /* Phải hạ CẢ table lẫn tbody xuống display:block. Chỉ hạ tr/td thì phần tử <table> vẫn là
     display:table và tự co giãn theo nội dung rộng nhất, nên thẻ dòng bị đẩy ra ngoài khung
     (nút Duyệt nằm ở x=411 trên màn 375px — vẫn phải cuộn ngang mới bấm được, đúng cái lỗi
     đang định sửa). */
  .tbl-stack{display:block;width:100%;max-width:100%}
  .tbl-stack tbody{display:block;width:100%}
  .tbl-stack thead{display:none}
  .tbl-stack tbody tr{display:block;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface)}
  .tbl-stack tbody tr:hover{background:var(--surface)}
  .tbl-stack tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:none;padding:4px 0;min-width:0!important;max-width:none!important}
  .tbl-stack tbody td::before{content:attr(data-l);color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;flex:none}
  .tbl-stack tbody td:first-child{display:block}
  .tbl-stack tbody td:first-child::before{display:none}
  .tbl-stack tbody td:empty{display:none}
  .tbl-stack tbody td:last-child{padding-top:9px;justify-content:flex-end}
  .tbl-stack tbody td:last-child::before{display:none}
  .tbl-stack tbody td:last-child .btn{flex:1 1 0;justify-content:center}
}

/* ---------- Calendar ---------- */
.cal{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{padding:10px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border)}
.cal-cell{min-height:104px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px;cursor:pointer;transition:.1s;overflow:hidden}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:var(--surface-2)}
.cal-cell.other{background:var(--surface-2);opacity:.5}
.cal-cell.today .dn{background:var(--accent);color:#fff}
.cal-cell .dn{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:7px;font-size:12.5px;font-weight:700;margin-bottom:4px}
.cal-ev{font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
/* --- Lịch Ngày·Tuần·Tháng: MỌI lớp dưới đây phải khai ở đây, dùng lớp chưa khai là lỗi lặp lại nhiều đợt --- */
.calx-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.calx-title{font-size:16px;font-weight:800;min-width:172px;text-align:center;text-transform:capitalize}
.calx-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-bottom:10px}
.calx-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* Màn hẹp (điện thoại): lưới Tháng/Tuần KHÔNG co thành cột 30px mà CUỘN NGANG trong khung này. */
.calx-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.calx-item{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;line-height:1.35;padding:2px 6px;margin-bottom:3px;border-radius:5px;border-left:3px solid var(--muted);background:var(--surface-2);color:var(--text);cursor:pointer;overflow:hidden}
.calx-item:hover{background:var(--bg-2)}
.calx-item.done{opacity:.6;text-decoration:line-through}
.calx-item .cx{flex:none;width:7px;height:7px;border-radius:50%}
.calx-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calx-more{font-size:11px;font-weight:600;color:var(--muted);padding-left:3px;cursor:pointer}
.calx-more:hover{color:var(--accent)}
.calx-empty{color:var(--muted);font-size:12.5px;padding:18px 4px}
.calx-daylist{padding:12px;min-height:180px}
.calx-daylist .calx-item{font-size:13px;padding:9px 11px;margin-bottom:6px}
/* Khay "viec chua dat han chot" (26/08). Truoc do viec khong co dueDate bien mat khoi lich
   MA KHONG CO DAU HIEU NAO — nguoi dung tuong lich chi hien viec da hoan thanh. */
.calx-nodue{background:var(--amber-soft);border:1px solid var(--amber);border-radius:12px;padding:9px 13px;margin-bottom:12px;font-size:12.5px;line-height:1.9}
.calx-nd{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:1px 10px;margin:0 4px;cursor:pointer;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.calx-nd:hover{border-color:var(--accent);color:var(--accent)}
.calx-bands{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 13px;margin-bottom:12px}
.calx-band{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12px}
.calx-band .nm{flex:none;width:140px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.calx-track{position:relative;flex:1;height:14px;border-radius:7px;background:var(--surface-2)}
.calx-track i{position:absolute;top:0;bottom:0;min-width:5px;border-radius:7px;cursor:pointer}
.cal-grid.calx-tall .cal-cell{min-height:252px}
@media(max-width:1024px){
  .calx-scroll .cal{min-width:740px}
  .calx-title{min-width:112px;font-size:14px}
  .calx-band .nm{width:96px}
}

/* ---------- Timeline dự án (biểu đồ cột ngang / Gantt) ----------
   Vẽ bằng CSS thuần, KHÔNG thư viện ngoài. Bề rộng cột tên để trong biến --gt-name vì vạch
   "hôm nay" định vị bằng calc() dựa trên chính biến đó — đổi bề rộng ở màn hẹp là vạch tự
   chạy theo, không phải sửa hai chỗ rồi lệch nhau. */
.gt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.gt{--gt-name:184px;min-width:760px;padding:12px 14px 14px}
.gt-head{display:grid;grid-template-columns:var(--gt-name) minmax(0,1fr);align-items:end;margin-bottom:8px}
/* Ô góc trên-trái phải dính theo cột tên, nếu không lúc cuộn ngang nhãn tháng chui ra dưới nó. */
.gt-corner{position:sticky;left:0;z-index:2;background:var(--surface)}
.gt-months{display:flex;height:20px;min-width:0;overflow:hidden}
.gt-mon{flex:0 0 auto;box-sizing:border-box;font-size:11px;font-weight:700;color:var(--muted);border-left:1px solid var(--border);padding-left:5px;overflow:hidden;white-space:nowrap}
.gt-body{position:relative;padding-bottom:18px}
.gt-row{display:grid;grid-template-columns:var(--gt-name) minmax(0,1fr);align-items:center;padding:5px 0}
.gt-row:hover{background:var(--bg-2)}
.gt-name{position:sticky;left:0;z-index:2;background:var(--surface);padding-right:12px;min-width:0}
.gt-row:hover .gt-name{background:var(--bg-2)}
.gt-name b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.gt-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-track{position:relative;height:24px;border-radius:8px;background:var(--surface-2);min-width:0}
.gt-bar{position:absolute;top:1px;bottom:1px;min-width:10px;border-radius:8px;border:1px solid;overflow:hidden;display:flex;align-items:center;cursor:pointer}
/* Bóng mờ trong lòng thanh = tỉ lệ % việc đã xong. Để .55 cho chữ % vẫn đọc được đè lên. */
.gt-fill{position:absolute;left:0;top:0;bottom:0;opacity:.55}
.gt-pct{position:relative;z-index:1;font-size:11px;font-weight:800;padding:0 7px;color:var(--text);white-space:nowrap;text-shadow:0 0 3px var(--surface),0 0 3px var(--surface)}
/* Màu theo TRẠNG THÁI (đặt sau .gt-bar/.gt-key để đè được border của hai lớp đó).
   Dùng chung cho thanh và cho ô màu ở chú giải nên không gắn với .gt-bar. */
.gt-s-todo{background:var(--slate-soft);border-color:var(--slate)}
.gt-s-todo .gt-fill{background:var(--slate)}
.gt-s-doing{background:var(--blue-soft);border-color:var(--blue)}
.gt-s-doing .gt-fill{background:var(--blue)}
.gt-s-done{background:var(--green-soft);border-color:var(--green)}
.gt-s-done .gt-fill{background:var(--green)}
/* QUÁ HẠN: viền đỏ DÀY + nét đứt, nhìn phát biết ngay chứ không phải soi khác biệt màu. */
.gt-s-over{background:var(--red-soft);border-color:var(--red);border-style:dashed;border-width:2px}
.gt-s-over .gt-fill{background:var(--red)}
/* Vạch HÔM NAY chạy dọc qua toàn biểu đồ. z-index 1 (thấp hơn .gt-name 2) để khi cuộn ngang
   thì cột tên dính bên trái che vạch lại, chứ không có vạch đỏ vắt ngang tên dự án. */
.gt-now{position:absolute;top:0;bottom:18px;width:2px;background:var(--red);z-index:1;pointer-events:none}
.gt-now::after{content:'Hôm nay';position:absolute;bottom:-15px;left:-19px;font-size:10px;font-weight:800;color:var(--red);white-space:nowrap}
.gt-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12px;color:var(--text-2);margin-bottom:10px}
.gt-key{position:relative;display:inline-block;width:22px;height:12px;border-radius:5px;border:1px solid;overflow:hidden;vertical-align:-2px;margin-right:5px}
.gt-tag{display:inline-block;padding:0 6px;border-radius:999px;font-size:10px;font-weight:800;background:var(--amber-soft);color:var(--amber);margin-left:6px}
.gt-note{padding:10px 13px;margin-bottom:10px;border:1px solid var(--amber);border-radius:var(--radius-sm);background:var(--amber-soft);font-size:12.5px}
.gt-empty{padding:26px 6px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
@media(max-width:1024px){ .gt{--gt-name:124px;min-width:660px} }

/* ---------- Filters bar ---------- */
.filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
/* Thẻ đếm "12/45 việc" trên dải lọc — báo cho người xem biết họ đang nhìn MỘT PHẦN dữ liệu,
   tránh cảnh nhớ nhầm là công việc bị mất. Khai lớp ở đây vì repo cấm dùng lớp chưa khai báo. */
.fcount{display:inline-flex;align-items:center;height:36px;padding:0 11px;border-radius:9px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:12.5px;white-space:nowrap}
.sel{height:36px;border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:0 30px 0 11px;font-weight:600;font-size:13px;color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b94a3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px}
.seg button{border:none;background:transparent;padding:6px 13px;border-radius:7px;font-weight:600;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,18,28,.5);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;opacity:0;animation:fade .16s forwards;overflow:auto}
@keyframes fade{to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:720px;transform:translateY(8px);animation:pop .18s forwards;margin:auto}
.modal.wide{max-width:920px}
.modal.narrow{max-width:460px}
@keyframes pop{to{transform:translateY(0)}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:16px}
.modal-body{padding:20px;max-height:70vh;overflow:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.field{margin-bottom:15px}
.field>label{display:block;font-size:12.5px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.inp{width:100%;height:40px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;padding:0 12px;outline:none;transition:.15s}
textarea.inp{height:auto;min-height:88px;padding:10px 12px;resize:vertical;line-height:1.55}
.inp:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
/* .rep-f dung 3 cho trong modal nop bao cao. Truoc het no la moc querySelectorAll('.rep-f')
   de gom gia tri khi nop, nhung dat chung ten "report field" thi 3 o phai nhin nhu mot bo:
   input/textarea (.inp) cao 40px con select (.sel) cao 36px nen bang truong so le nhau.
   Khai toi thieu: tu day du rong, select bang chieu cao o nhap. */
.rep-f{width:100%}
select.rep-f{height:40px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ---------- Task detail ---------- */
.td-grid{display:grid;grid-template-columns:1fr 260px;gap:22px}
.td-side .prop{margin-bottom:14px}
.td-side .prop label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;display:block;margin-bottom:6px}
.check-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;transition:.1s}
.check-item:hover{background:var(--surface-2)}
.check-item input{width:17px;height:17px;accent-color:var(--green);cursor:pointer;flex:0 0 auto}
.check-item.done label,.check-item.done .ck-ed{text-decoration:line-through;color:var(--muted)}
.check-item label{flex:1;cursor:pointer}
/* O sua noi dung mot buoc checklist (26/08). Phai co do dac tinh (0,2,0) de thang
   `.check-item input{width:17px}` o tren — neu khong o nhap bi bop con 17px. */
/* Tay cam keo-tha doi thu tu buoc (26/08). Chi tay cam moi keo duoc — ca dong ma keo duoc thi
   boi den chu trong o sua la keo nham. */
.check-item .ck-grip{cursor:grab;color:var(--muted);flex:0 0 auto;user-select:none;font-weight:800;letter-spacing:-2px;line-height:1;opacity:0;transition:.1s}
.check-item:hover .ck-grip,.check-item .ck-grip:focus{opacity:1}
.check-item .ck-grip:active{cursor:grabbing}
@media (hover:none){.check-item .ck-grip{opacity:.55}}
.check-item .ck-ed{flex:1 1 auto;width:auto;height:auto;padding:2px 6px;border:1px solid transparent;background:transparent;font:inherit;color:inherit;border-radius:6px;cursor:text}
.check-item:hover .ck-ed{border-color:var(--border)}
.check-item .ck-ed:focus{border-color:var(--accent);background:var(--surface);box-shadow:none}
.comment{display:flex;gap:10px;margin-bottom:14px}
.comment .bubble{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;flex:1}
.comment .bubble .who{font-weight:700;font-size:12.5px}
.comment .bubble .when{color:var(--muted);font-size:11px;font-weight:500;margin-left:6px}
.comment .bubble .cmt-head{display:flex;align-items:center;gap:2px}
.comment .bubble .cmt-text{margin-top:4px;font-size:13px;line-height:1.55;word-break:break-word}
.comment .bubble .cmt-del{width:24px;height:24px;margin-left:auto;opacity:.5}
.comment .bubble .cmt-del:hover{opacity:1;color:var(--red)}
.cmt-men{background:var(--blue-soft);color:var(--blue);font-weight:700;border-radius:5px;padding:0 3px}
.cmt-box{position:relative;margin-top:8px}
.cmt-input{width:100%;min-height:62px;height:auto;resize:vertical;line-height:1.5;padding:8px 10px;font-size:13px}
.cmt-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
/* Bảng gợi ý neo TRÊN ô nhập: modal chi tiết việc cuộn dọc, thả xuống dưới là bị mép modal cắt. */
.cmt-sug{position:absolute;left:0;right:0;bottom:100%;margin-bottom:4px;z-index:40;max-height:280px;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.18);padding:4px}
.cmt-sug[hidden]{display:none}
.cmt-sug-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px}
.cmt-sug-item.on,.cmt-sug-item:hover{background:var(--surface-2)}
.cmt-sug-empty{padding:8px;font-size:12.5px;color:var(--muted)}
/* Dính đầu bảng khi cuộn: danh bạ nay là cả công ty, người dùng phải luôn thấy "x/y người"
   để biết bảng còn cuộn được — cắt cứng ở 6 dòng mà không nói gì chính là lỗi vừa sửa. */
.cmt-sug-head{position:sticky;top:-4px;background:var(--surface);padding:6px 8px 5px;margin:-4px -4px 2px;
  border-bottom:1px solid var(--border);font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.attach{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);margin-bottom:7px}

/* ---------- AI panel ---------- */
#ai-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:55;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1)}
#ai-panel.open{transform:translateX(0)}
.ai-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--border)}
.ai-head .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#7a5bf0,#c15bf0);display:flex;align-items:center;justify-content:center}
.ai-head b{font-size:14.5px}
.ai-head small{display:block;color:var(--muted);font-size:11px;font-weight:600}
.ai-body{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.ai-msg{max-width:90%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.ai-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ai-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px}
.ai-msg.bot code{background:var(--bg-2);padding:1px 5px;border-radius:4px;font-size:12.5px}
.ai-msg.bot pre{background:var(--bg-2);padding:10px;border-radius:8px;overflow:auto;font-size:12px;margin:8px 0}
.ai-msg.bot h1,.ai-msg.bot h2,.ai-msg.bot h3{font-size:14.5px;margin:8px 0 4px}
.ai-msg.bot ul,.ai-msg.bot ol{margin:6px 0;padding-left:20px}
.ai-msg.bot p{margin:6px 0}
.ai-typing{display:flex;gap:4px;align-self:flex-start;padding:12px 14px}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ai-suggest{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 10px}
.ai-suggest button{font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2)}
.ai-suggest button:hover{border-color:var(--accent);color:var(--accent)}
.ai-foot{padding:12px 16px;border-top:1px solid var(--border)}
.ai-input{display:flex;gap:8px;align-items:flex-end;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:8px 8px 8px 12px}
.ai-input textarea{flex:1;border:none;background:transparent;outline:none;resize:none;max-height:120px;font-size:13.5px;line-height:1.5;color:var(--text)}
.ai-send{width:36px;height:36px;flex:0 0 36px;border:none;border-radius:10px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.ai-send:disabled{opacity:.5}

/* ---------- AI cards inside content ---------- */
.ai-tool{border:1px solid var(--border);border-radius:14px;padding:18px;background:linear-gradient(180deg,var(--surface),var(--surface))}
.ai-tool .hd{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.ai-tool .hd .ic{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.gradient-border{position:relative;border-radius:16px;padding:1.5px;background:linear-gradient(135deg,var(--accent),#c15bf0)}
.gradient-border>div{background:var(--surface);border-radius:15px}

/* ---------- Toast ---------- */
#toast-root{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:9px;align-items:center}
.toast{background:var(--text);color:var(--surface);padding:11px 18px;border-radius:11px;font-weight:600;font-size:13.5px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;animation:slideup .25s}
.toast.ok{background:var(--green)}.toast.err{background:var(--red)}.toast.info{background:var(--accent)}
.toast.ok,.toast.err,.toast.info{color:#fff}
@keyframes slideup{from{opacity:0;transform:translateY(12px)}}

/* ---------- misc ---------- */
.progress-ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--bg-2) 0);display:flex;align-items:center;justify-content:center}
.progress-ring>span{width:48px;height:48px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.donut{width:150px;height:150px;border-radius:50%;position:relative}
.donut>.hole{position:absolute;inset:26px;background:var(--surface);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.legend{display:flex;flex-direction:column;gap:9px}
.legend .li{display:flex;align-items:center;gap:9px;font-size:13px}
.legend .li b{margin-left:auto}
.proj-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.proj-row:last-child{border-bottom:none}
.hpill{width:11px;height:11px;border-radius:4px;flex:0 0 11px}
.kbd{font-size:11px;background:var(--bg-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-weight:700;color:var(--text-2)}
.divider{height:1px;background:var(--border);margin:18px 0}
.switch{position:relative;width:42px;height:24px;flex:0 0 42px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--border-2);border-radius:20px;transition:.2s}
.switch .sl:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.sl{background:var(--accent)}
.switch input:checked+.sl:before{transform:translateX(18px)}
.hidden{display:none!important}
/* ---------- Utilities (gom từ inline-style lặp — đợt 1) ---------- */
.row-btw{display:flex;align-items:center;justify-content:space-between}
.wrap-g{flex-wrap:wrap;gap:10px}
.mb16{margin-bottom:16px}
.pad20{padding:20px}
.pad18{padding:18px}
/* ---------- Login ---------- */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 600px at 20% -10%,var(--accent-soft),var(--bg) 55%)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:400px;padding:28px}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.login-brand .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#a05bf0);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 4px 12px rgba(91,91,240,.4)}
.login-brand b{font-size:17px}.login-brand small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.3px}
.login-err{background:var(--red-soft);color:var(--red);font-size:13px;font-weight:600;padding:10px 12px;border-radius:9px;margin-bottom:14px}
.login-hint{margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.6;text-align:center;border-top:1px solid var(--border);padding-top:14px}
.sheet-workspace{border:1px solid var(--border);background:var(--surface);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.sheet-toolbar{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.sheet-toolbar .inp{height:32px;min-width:180px;flex:1}.sheet-tool{min-width:32px;height:32px;padding:0 9px}.sheet-tabs{display:flex;gap:2px;padding:6px 8px 0;border-top:1px solid var(--border);background:var(--surface-2);overflow:auto}.sheet-tab{border:0;border-bottom:2px solid transparent;background:transparent;padding:8px 12px;color:var(--muted);white-space:nowrap;cursor:pointer}.sheet-tab.active{color:var(--text);border-bottom-color:var(--blue);font-weight:700}
.sheet-grid-wrap{overflow:auto;max-height:calc(100vh - 290px);min-height:480px;background:var(--surface)}.sheet-grid{border-collapse:separate;border-spacing:0;font-size:13px;table-layout:fixed}.sheet-grid th,.sheet-grid td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);height:29px;min-width:110px;max-width:220px;padding:0;box-sizing:border-box}.sheet-grid th{background:var(--surface-2);color:var(--muted);font-weight:600;text-align:center;position:sticky;z-index:2;top:0}.sheet-grid .row-head{min-width:46px;width:46px;position:sticky;left:0;z-index:3}.sheet-grid .corner{z-index:4}.sheet-cell{display:block;min-height:28px;padding:6px 7px;outline:0;white-space:pre;overflow:hidden;text-overflow:ellipsis}.sheet-cell:focus,.sheet-cell.selected{box-shadow:inset 0 0 0 2px var(--blue);background:var(--blue-soft)}.sheet-status{font-size:12px;color:var(--muted);padding:6px 10px;white-space:nowrap}.sheet-empty{padding:26px;color:var(--muted);text-align:center}
.role-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.3px}

@media(max-width:1024px){.td-grid{grid-template-columns:1fr}.td-side{order:-1}}
@media(max-width:1024px){
  #app{grid-template-columns:1fr}
  #sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:70;transform:translateX(-100%);transition:.22s}
  #sidebar.open{transform:translateX(0)}
  .menu-btn{display:flex!important}
  #scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:65}
}
.menu-btn{display:none}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);display:inline-block;flex:0 0 auto;transition:background .3s}
.sync-dot.online{background:var(--green)}
.sync-dot.offline{background:var(--red);animation:syncpulse 1.2s infinite}
.sync-dot.connecting{background:var(--amber);animation:syncpulse 1.2s infinite}
@keyframes syncpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* --- Responsive KPI & layout (P0) --- */
@media(max-width:1024px){
  .grid:has(>.stat){grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
  .filters{flex-wrap:wrap}
  .filters .sel{flex:1 1 44%}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr!important;gap:12px}
  .grid:has(>.stat){grid-template-columns:repeat(2,1fr)!important}
  .board{grid-template-columns:1fr!important;overflow-x:visible}
  .top-title{display:none}
  .search{min-width:0}
  .lc-grid{gap:4px}.lc-cell{min-height:64px}
  .roster-tbl td,.roster-tbl th{min-width:78px}
}
/* ---- Lịch nghỉ team ---- */
.lc-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.lc-head>div{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:4px 0}
.lc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.lc-cell{background:var(--surface);border:1px solid var(--border);border-radius:9px;min-height:88px;padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.lc-cell.lc-empty{background:transparent;border:none}
.lc-cell.lc-off{background:var(--surface-2);opacity:.7}
.lc-cell.lc-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.lc-day{font-size:12px;font-weight:700;color:var(--text-2)}
.lc-pill{font-size:11px;line-height:1.35;padding:2px 6px;border-radius:5px;background:var(--surface-2);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- Ca làm việc (roster) ---- */
.roster-wrap{overflow:auto}
.roster-tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.roster-tbl th,.roster-tbl td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:6px 8px;text-align:center;white-space:nowrap}
.roster-tbl th:first-child,.roster-tbl td:first-child{text-align:left;position:sticky;left:0;background:var(--surface);z-index:1;min-width:150px}
.roster-tbl thead th{background:var(--surface-2);position:sticky;top:0;z-index:2}
.roster-tbl thead th:first-child{z-index:3}
.ro-off{color:var(--muted)}
.ro-cell{cursor:pointer;border-radius:6px;padding:3px 6px;font-weight:600;font-size:12px;display:inline-block;min-width:34px}
.ro-cell:hover{outline:2px solid var(--accent)}
/* ---- drill-down ---- */
.card.stat.clickable{cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}
.card.stat.clickable:hover{transform:translateY(-2px);box-shadow:0 6px 18px -8px rgba(20,24,40,.28)}
@keyframes ceoFlash{0%{box-shadow:0 0 0 0 var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
.ceo-flash{animation:ceoFlash .9s ease-out}
/* ---- sơ đồ tổ chức ---- */
.cin-grid{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:stretch}
@media(max-width:1024px){.cin-grid{grid-template-columns:1fr}}
/* Topbar mobile: an chu tren nut (giu icon) + cho phep co lai de khong keo trang rong ra */
@media(max-width:640px){
  #topbar{gap:6px;padding:0 10px}
  #topbar .btn span{display:none}
  #topbar .btn{padding:8px 10px}
  #topbar .top-title{display:none}
  #topbar .search{min-width:0;flex:1}
}
.org-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.org-col{flex:0 0 220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.org-dep{font-size:13px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:2px}
.org-lead{background:var(--accent-soft);border-radius:9px;padding:6px}
.org-person{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:8px}
.org-person:hover{background:var(--surface-2)}
.org-person .avatar{flex:none}
.succ-ok{color:var(--green)}.succ-risk{color:var(--red)}
/* ---- Bảng vinh danh BLITZ (màn 'blitz') ---- */
.bl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bl-draft{font-size:12px;font-weight:700;color:var(--amber);background:var(--amber-soft);border-radius:999px;padding:3px 10px}
.bl-podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.bl-pod{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface);text-align:center}
.bl-pod.gold{border-color:#d4a017;background:linear-gradient(180deg,rgba(212,160,23,.15),transparent)}
.bl-pod.silver{border-color:#9aa3ad;background:linear-gradient(180deg,rgba(154,163,173,.15),transparent)}
.bl-pod.bronze{border-color:#b06f35;background:linear-gradient(180deg,rgba(176,111,53,.15),transparent)}
.bl-medal{font-size:30px;line-height:1}
.bl-pod-t{font-size:14px;font-weight:800;margin-top:2px}
.bl-pod-min{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.bl-pod-p{display:flex;align-items:center;gap:8px;text-align:left;padding:6px 8px;border-radius:9px;background:var(--surface-2);margin-top:6px}
.bl-pod-name{font-weight:700;font-size:13px}
.bl-pod-sub{font-size:11.5px;color:var(--muted)}
.bl-pod-score{margin-left:auto;font-weight:800;font-size:16px}
.bl-pod-empty{font-size:12px;color:var(--muted);padding:10px 0}
.bl-tier{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;color:#fff}
.bl-tier.gold{background:#d4a017}
.bl-tier.silver{background:#8b949e}
.bl-tier.bronze{background:#b06f35}
.bl-tier.none{background:var(--surface-2);color:var(--muted)}
.bl-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;min-width:74px}
.bl-bar>i{display:block;height:100%;background:var(--accent)}
.bl-note{font-size:12px;color:var(--muted);line-height:1.7}
/* ---- KPI tự đánh giá (màn 'selfkpi') ---- */
.sk-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sk-head.tight{margin:12px 0 0}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.sk-fld{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface-2)}
.sk-fld>label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}
.sk-num{width:100%;height:40px;font-size:18px;font-weight:800;text-align:center}
.sk-hint{font-size:11px;color:var(--muted);line-height:1.55;margin-top:6px}
.sk-hint.rev{color:var(--amber);font-weight:600}
.sk-val{display:inline-block;min-width:50px;text-align:center;font-size:12.5px;font-weight:800;border-radius:999px;padding:2px 9px}
.sk-val.ok{background:var(--green-soft);color:var(--green)}
.sk-val.warn{background:var(--amber-soft);color:var(--amber)}
.sk-val.bad{background:var(--red-soft);color:var(--red)}
.sk-val.none{background:var(--surface-2);color:var(--muted)}
.sk-pend{font-size:12px;font-weight:700;color:var(--red);background:var(--red-soft);border-radius:999px;padding:3px 10px}
.sk-ok{font-size:12px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:999px;padding:3px 10px}
.sk-lock{font-size:11.5px;font-weight:700;color:var(--green);margin-left:8px}
.sk-rev{width:78px;height:32px;text-align:center}
.sk-rev-note{width:100%;height:32px}
.sk-note{font-size:12px;color:var(--muted);line-height:1.7}
/* ---- HR hub tabs ---- */
.hr-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:-2px 0 16px;border-bottom:1px solid var(--border)}
.hr-tab{font-size:.86rem;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:8px 8px 0 0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.hr-tab:hover{color:var(--text)}
.hr-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* ---------- Utilities (gom từ inline-style lặp — đợt 2) ---------- */
.f1{flex:1}
.f1min{flex:1;min-width:0}
.w100{width:100%}
.m0{margin:0}
.mt8{margin-top:8px}
.mr8{margin-right:8px}
.tar{text-align:right}
.tac{text-align:center}
.fw600{font-weight:600}
.fw400{font-weight:400}
.fs10{font-size:10px}
.fs11{font-size:11px}
.fs115{font-size:11.5px}
.fs12{font-size:12px}
.fs125{font-size:12.5px}
.fs13{font-size:13px}
.fs20{font-size:20px}
.ov-auto{overflow:auto}
.c-red{color:var(--red)}
.c-amber{color:var(--amber)}
.c-green{color:var(--green)}
.t-green{background:var(--green-soft);color:var(--green)}
/* ---------- Utilities (gom từ inline-style lặp — đợt 3) ---------- */
.pad16{padding:16px}
.mt16{margin-top:16px}
.flex{display:flex}
.g6{gap:6px}
.g8{gap:8px}
.g10{gap:10px}
.fwrap{flex-wrap:wrap}
.items-center{align-items:center}
.ml8{margin-left:8px}
.ml-auto{margin-left:auto}
.ovx-auto{overflow-x:auto}
.bg-amber{background:var(--amber)}
/* ---------- Biểu đồ cột công việc theo nhân viên × trạng thái (màn Phân công & Tải việc) ----------
   VÌ SAO vẽ tay bằng CSS: cả ứng dụng nằm gọn trong MỘT file index.html, không được nạp thư viện
   biểu đồ ngoài (không CDN). Thanh xếp chồng chỉ là 3 thẻ <i> nằm trong một track flex. */
.wkc{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(230px,3fr) 46px;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border)}
.wkc:last-child{border-bottom:none}
.wkc-who{display:flex;align-items:center;gap:9px;min-width:0}
.wkc-who b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Track có nền mờ để hàng 0 việc vẫn nhìn thấy — "có người mà không có việc" cũng là thông tin
   CEO cần thấy, không được để hàng đó biến mất thành khoảng trắng. */
.wkc-track{display:flex;height:20px;border-radius:6px;background:var(--bg-2);overflow:hidden;min-width:0}
.wkc-seg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;font-size:10px;font-weight:700;line-height:1;color:#fff;transition:width .25s}
.wkc-seg.s1{background:var(--slate)}
.wkc-seg.s2{background:var(--blue)}
.wkc-seg.s3{background:var(--green)}
.wkc-tot{text-align:right;font-family:var(--mono,monospace);font-weight:700;font-size:12.5px}
.wkc-lgd{display:flex;flex-wrap:wrap;gap:16px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-2)}
.wkc-lgd i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* Màn hẹp: cuộn ngang trong khối riêng, KHÔNG để cả trang trôi ngang. tabindex trên .wkc-wrap để
   người dùng bàn phím cuộn được bằng phím mũi tên; :focus-visible vẽ viền cho biết đang đứng đâu. */
.wkc-wrap{overflow-x:auto}
.wkc-in{min-width:520px}
.wkc-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wkc-none{padding:18px 16px;color:var(--muted);font-size:13px}
/* ---------- Buồng lái CEO — Pha 1 (sức khỏe DN · tài chính thật) ---------- */
.ceo-hero{display:grid;grid-template-columns:auto 1.35fr 1fr;gap:22px;align-items:center;position:relative;overflow:hidden}
.ceo-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--green),var(--accent))}
.h-ring{--p:0;width:116px;height:116px;border-radius:50%;flex:none;background:conic-gradient(var(--rc,var(--green)) calc(var(--p)*1%),var(--bg-2) 0);display:grid;place-items:center}
.h-ring>span{width:88px;height:88px;border-radius:50%;background:var(--surface);display:grid;place-items:center;line-height:1;text-align:center}
.h-ring b{font-size:32px;font-weight:800;font-family:var(--mono,monospace)}
.h-ring small{color:var(--muted);font-size:10.5px;margin-top:3px}
.h-sub{display:flex;align-items:center;gap:11px;font-size:13px;margin:8px 0}
.h-sub .nm{width:78px;flex:none;font-weight:600}
.h-sub .vv{width:30px;text-align:right;font-weight:800;font-family:var(--mono,monospace)}
.delta.flat{background:var(--slate-soft);color:var(--text-2)}
.pnl{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;margin-top:12px}
.pnl .step{flex:1;min-width:112px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.pnl .step .k{font-size:11px;color:var(--muted);font-weight:600}
.pnl .step .v{font-size:16px;font-weight:800;font-family:var(--mono,monospace);margin-top:3px}
.pnl .op{display:flex;align-items:center;color:var(--muted);font-weight:700;font-size:16px}
.pnl .step.res{background:linear-gradient(180deg,var(--green-soft),var(--surface-2));border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.fin-trend{display:flex;align-items:flex-end;gap:6px;height:66px;margin-top:6px}
.ft-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ft-bars{display:flex;align-items:flex-end;gap:2px;height:54px}
.ft-bars i{width:6px;border-radius:2px 2px 0 0;display:block}
.ft-m{font-size:9.5px;color:var(--muted);white-space:nowrap}
.rway-gauge{flex:1;min-width:150px;height:12px;border-radius:20px;background:var(--bg-2);overflow:hidden}
.rway-gauge>i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--amber))}
@media(max-width:1024px){.ceo-hero{grid-template-columns:1fr}}
/* Dòng đối chiếu hai nguồn doanh thu trong CEO Center. Ba sắc thái: lệch thiếu (warn),
   lệch thừa (info), khớp (ok). Khai ở đây vì lớp dùng-mà-chưa-khai không báo lỗi, chỉ
   âm thầm rơi về mặc định trình duyệt — lỗi đã lặp nhiều đợt trong dự án này. */
.rec-note{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  margin-top:12px;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.55;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.rec-note>div{flex:1;min-width:0}
.rec-note .btn{flex:none}
.rec-note.warn{border-color:var(--amber);background:var(--amber-soft)}
.rec-note.info{border-color:var(--blue);background:var(--blue-soft)}
.rec-note.ok{border-color:var(--green);background:var(--green-soft)}
@media(max-width:640px){.rec-note{flex-direction:column}.rec-note .btn{align-self:stretch;justify-content:center}}
.ceo-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:18px}
.ceo-tab{appearance:none;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);padding:10px 15px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ceo-tab:hover{color:var(--text)}
.ceo-tab.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.ceo-tab .tdot{width:6px;height:6px;border-radius:50%;background:var(--new,#0e9f6e)}
.ceo-sec[hidden]{display:none}
/* ---------- Khong gian ca nhan: dai ky Hom nay / Tuan nay / Thang nay ---------- */
.dp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 8px}
.dp-tab{appearance:none;font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);transition:.15s}
.dp-tab:hover{color:var(--text)}
.dp-tab.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.dp-n{font-size:11px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-grid;place-items:center;background:var(--bg-2);color:var(--text-2)}
.dp-tab.on .dp-n{background:var(--accent);color:#fff}
.dp-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}
.dp-sum b{font-size:13.5px;color:var(--text)}
.dp-add{display:flex;gap:8px;align-items:center;margin:2px 0 4px}
.dp-add .inp{height:36px}
.dp-grp{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.dp-grp.late{color:var(--red)}
/* ---------- Giao nhận hồ sơ ---------- */
.gn-seq{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:750;background:var(--bg-2);color:var(--text-2)}
.gn-seq.sm{width:22px;height:22px;font-size:11.5px}
.gn-seq.done{background:var(--green-soft);color:var(--green)}
.gn-seq.failed{background:var(--red-soft);color:var(--red)}
.gn-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--slate)}
.gn-dot.new{background:var(--amber)}
.gn-dot.assigned{background:var(--blue)}
.gn-dot.doing{background:var(--blue)}
.gn-dot.done{background:var(--green)}
.gn-dot.failed{background:var(--red)}
.gn-av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:750}
.gn-av.none{background:var(--red)}
.gn-row:hover,.gn-stop:hover{background:var(--surface-2)}
.gn-row.gn-drag,.gn-stop.gn-drag{opacity:.4}
.gn-stop.gn-over{box-shadow:0 -2px 0 var(--accent) inset}
.gn-trip.gn-drop{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* ================================================================
   V2 — TIỆN ÍCH & THÀNH PHẦN BỔ SUNG (14/08/2026)
   Quy ước: chỉ THÊM lớp mới, không khai lại lớp cũ đang chạy.
   Khoảng cách/chữ lấy từ thang --s* / --fs-*, không gõ số tay.
   ================================================================ */
/* --- xếp hàng --- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.wrap{flex-wrap:wrap}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.g4{gap:4px}.g12{gap:12px}.g16{gap:16px}
.mt2{margin-top:2px}.mt4{margin-top:4px}.mt6{margin-top:6px}.mt24{margin-top:var(--s5)}
.mb2{margin-bottom:2px}.mb4{margin-bottom:4px}.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}
.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}.mb24{margin-bottom:var(--s5)}
/* --- thanh công cụ trên bảng/danh sách --- */
.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.toolbar .sp{flex:1}
/* --- khung xương chờ tải: thay chữ "Đang tải…" nhảy giật --- */
.skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--radius-sm);min-height:14px}
.skeleton::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  animation:skel 1.2s infinite}
.skeleton.lg{min-height:22px}
.skeleton.block{min-height:96px;border-radius:var(--radius)}
@keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* --- biến thể bảng --- */
.tbl.zebra tbody tr:nth-child(even){background:var(--surface-2)}
.tbl.dense th,.tbl.dense td{padding:5px 8px}
.tbl.sticky thead th{position:sticky;top:0;background:var(--surface);z-index:1;box-shadow:0 1px 0 var(--border)}
/* --- tiêu điểm bàn phím: nhìn thấy rõ, chỉ hiện khi đi bằng phím --- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
/* --- tôn trọng người tắt hiệu ứng --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ================================================================
   V2 — KHUNG LAYOUT: sidebar thu gọn · lọc menu · ghim
   Chỉ là trình bày: mọi data-nav/data-action giữ nguyên.
   ================================================================ */
.brand{position:relative}
.brand .brand-txt{min-width:0}
.side-min-btn{width:26px;height:26px;border-radius:8px;margin-left:auto;flex:0 0 26px}
.side-min-btn svg{transition:transform .18s ease}
.nav-filter{padding:2px 12px 6px}
.nav-filter input{width:100%;height:32px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--fs-sm);outline:none;color:var(--text)}
.nav-filter input:focus{border-color:var(--accent);background:var(--surface)}
/* nút ghim: chỉ ló khi rê chuột vào mục — không nhiễu mắt */
.nav-item{position:relative}
.nav-item .pin{margin-left:auto;opacity:0;font-size:13px;line-height:1;padding:2px 4px;border-radius:6px;color:var(--muted);transition:opacity .12s}
.nav-item .count~.pin{margin-left:4px}
.nav-item:hover .pin{opacity:.75}
.nav-item .pin:hover{color:var(--amber);background:var(--surface-2)}
.nav-item .pin.on{opacity:.9;color:var(--amber)}
.nav-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- chế độ thu gọn: chỉ trên máy tính; dưới 1024 sidebar là ngăn kéo, thu gọn vô nghĩa --- */
@media (min-width:1025px){
  #app.side-min{grid-template-columns:var(--side-w-min) 1fr}
  #app.side-min .brand{justify-content:center;padding:18px 6px 10px}
  #app.side-min .brand-txt,#app.side-min .nav-filter,#app.side-min .nav-label,
  #app.side-min .nav-txt,#app.side-min .side-foot .who,#app.side-min .nav-item .pin{display:none}
  #app.side-min .side-min-btn{position:static;margin:0}
  #app.side-min .side-min-btn svg{transform:rotate(180deg)}
  #app.side-min .nav{padding:6px}
  #app.side-min .nav-item{justify-content:center;gap:0;padding:11px 0}
  /* đếm chưa đọc co thành chấm — con số to choán hết cột 64px */
  #app.side-min .nav-item .count{position:absolute;top:4px;right:8px;width:8px;height:8px;padding:0;border-radius:50%;
    background:var(--red);color:transparent;overflow:hidden;margin:0}
  #app.side-min .side-foot{justify-content:center;padding:10px 4px}
  #app.side-min .side-foot .icon-btn{display:none}
}
@media (max-width:1024px){ .side-min-btn{display:none} }
.pointer{cursor:pointer}

/* ================================================================
   V2 — ĐIỆN THOẠI (≤640px)
   Bảng → thẻ · modal → tấm trượt đáy · vùng bấm 44px · tab cuộn ngang
   ================================================================ */
@media (max-width:640px){
  /* --- BẢNG → THẺ: .tbl-cards do enhanceTables() gắn (≤8 cột thật).
     Đủ cột — nhãn lấy từ data-label, không mất dữ liệu. Bảng rộng hơn giữ vuốt ngang. --- */
  .tbl-cards{min-width:0!important}
  .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody{display:block}
  .tbl-cards tbody tr{display:block;border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface);margin-bottom:var(--s2);padding:var(--s2) var(--s3);box-shadow:var(--shadow-sm)}
  .tbl-cards tbody td{display:flex;align-items:baseline;gap:var(--s3);border:0;padding:4px 0;text-align:left}
  .tbl-cards tbody td:empty{display:none}
  .tbl-cards tbody td[data-label]::before{content:attr(data-label);flex:0 0 38%;max-width:38%;
    font-size:var(--fs-xs);font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  .tbl-cards tbody td.tar,.tbl-cards tbody td.tac{text-align:left}
  /* Bang KPI Giao nhan o che do THE: o nhap khong duoc width:100% (nhan cot da chiem 38%
     ben trai nen o tran ra ngoai the) — cho no an dung phan con lai. */
  .tbl-cards.gn-tbl td .inp{width:auto!important;flex:1 1 auto;min-width:0}
  /* Cung ly do: style="width:100%" ghi thang tren the nen phai !important moi de duoc. */
  .tbl-cards td.money-cell .inp{width:auto!important;flex:1 1 auto;min-width:0}
  .tbl-cards.gn-tbl th:not(:first-child),.tbl-cards.gn-tbl td:not(:first-child){min-width:0}
  .tbl-cards.gn-tbl td.gn-pct .inp{max-width:none;margin-left:0}
  .tbl-cards tfoot{display:block;border-top:2px solid var(--border);margin-top:var(--s2)}
  .tbl-cards tfoot tr{display:flex;flex-wrap:wrap;gap:var(--s2)}
  /* --- MODAL → tấm trượt từ đáy: một tay với tới, thói quen app di động --- */
  .overlay{align-items:flex-end;padding:0}
  .modal{max-width:100%!important;border-radius:16px 16px 0 0;margin:0;max-height:92dvh;
    animation:sheetup .22s forwards}
  .modal-body{max-height:calc(92dvh - 130px)}
  /* --- vùng bấm tối thiểu 44px (chỉ phóng KHUNG bấm, chữ giữ nguyên cỡ) --- */
  .btn,.icon-btn{min-height:44px}
  .btn.sm{min-height:38px}
  .nav-item{padding:12px}
  input.inp,select.sel{min-height:42px}
  /* --- dải tab cuộn ngang một hàng, khỏi gãy dòng chiếm nửa màn --- */
  .hr-tabs2{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hr-tabs2::-webkit-scrollbar{display:none}
  .hr-tab2{white-space:nowrap;flex:0 0 auto}
  /* nội dung sát mép hơn — 24px lề hai bên trên màn 375px là phí 13% chiều ngang */
  #content{padding:14px 12px 80px}
}
@keyframes sheetup{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
/* V2 — luật bổ khuyết cho lớp ngữ nghĩa cũ (đợt rà lớp chưa khai) */
.pd-row:hover{background:var(--surface-2)}          /* hàng hồ sơ SX bấm được — phải có phản hồi rê chuột */
.chk-row{border-radius:8px}
.chk-row:hover{background:var(--surface-2)}
.dchip{display:inline-flex;align-items:center;gap:6px}
.tl-list>*+*{border-top:1px dashed var(--border)}
/* Ô "Đã dùng" ở bảng Quỹ phép năm — bấm ra chi tiết ngày nghỉ (CEO 15/08) */
.lv-used{cursor:pointer;border-bottom:1px dashed var(--accent);color:var(--accent)}
.lv-used:hover{background:var(--accent-soft);border-radius:4px}

/* ================= QUY TRÌNH SẢN XUẤT (qt) =================================
   Chỉ dùng token màu ĐÃ KHAI: --border --surface --surface-2 --text --muted --accent
   --accent-soft --accent-ink --green --amber --red. KHÔNG dùng --line/--card/--soft/--bg2
   (mười token đó đang được var() khắp nơi mà chưa hề định nghĩa — chép là chép luôn viền
   vô hình). Hai mốc màn hình duy nhất: 640 và 1024, đúng quy ước đợt V2.
   ========================================================================== */

/* --- ma trận 4 trục: bảng chọn quy trình --- */
.qt-mx{width:100%;border-collapse:separate;border-spacing:4px;min-width:560px}
.qt-mx th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:4px 6px;text-align:left;white-space:nowrap}
.qt-mx th.qt-rh{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text);
  text-align:right;width:150px}
.qt-cell{width:100%;display:block;text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);
  padding:8px 10px;min-height:58px;transition:.12s}
.qt-cell:hover{border-color:var(--accent);transform:translateY(-1px)}
.qt-cell.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);
  background:var(--accent-soft)}
.qt-cell b{display:block;font-size:14px;font-weight:700}
.qt-cell span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.qt-cell.qt-none{border-style:dashed;border-color:var(--red);background:var(--surface-2);
  cursor:not-allowed}
.qt-cell.qt-none b{color:var(--red);font-size:12.5px}

/* --- thanh bước --- */
.qt-spine{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.qt-step{flex:1 1 100px;min-width:96px;font:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-top-width:3px;border-radius:8px;
  background:var(--surface);padding:7px 9px;transition:.12s}
.qt-step:hover{border-color:var(--muted)}
.qt-step.on{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--muted)}
.qt-step.done{opacity:.72}
.qt-step .qt-si{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.qt-step .qt-sl{display:block;font-size:12.5px;font-weight:650;line-height:1.25;margin-top:2px}
.qt-step .qt-sd{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.qt-lane-own{border-top-color:var(--accent)}
.qt-lane-gn{border-top-color:var(--amber)}

/* --- dòng việc trong bước --- */
.qt-item{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:8px}
.qt-item+.qt-item{border-top:1px solid var(--border)}
.qt-item:hover{background:var(--surface-2)}
.qt-item input[type=checkbox]{width:17px;height:17px;accent-color:var(--green);
  cursor:pointer;flex:0 0 auto;margin-top:2px}
.qt-item.done .qt-it{text-decoration:line-through;color:var(--muted)}
.qt-it{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.qt-tpl{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:6px;vertical-align:middle}
.qt-tplb{font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:1px 7px;
  border:1px solid var(--border);border-radius:5px;background:var(--surface-2);color:var(--muted)}
.qt-tplb:hover{border-color:var(--accent);color:var(--accent-ink)}

/* --- nhánh nhà cung cấp --- */
.qt-vt{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 6px 36px}
.qt-vtb{font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;padding:4px 11px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--muted)}
.qt-vtb.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.qt-vb{font-size:13px;color:var(--muted);border-left:2px solid var(--accent);
  padding:5px 0 5px 11px;margin:0 0 6px 36px}

/* --- khung nhánh khách chưa chốt / không chốt --- */
.qt-branch{border:1px dashed var(--amber);border-radius:9px;padding:11px 13px;
  background:var(--surface-2);margin-top:12px}
.qt-branch.qt-lost{border-color:var(--red)}
.qt-branch h5{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--amber)}
.qt-branch.qt-lost h5{color:var(--red)}

/* --- nhóm trong danh sách --- */
.qt-grp{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 6px}
.qt-grp.qt-late{color:var(--red)}
.qt-grp.qt-soon{color:var(--amber)}
.qt-bar{width:3px;align-self:stretch;border-radius:2px;flex:none;background:var(--accent)}
.qt-bar.qt-gn{background:var(--amber)}

/* --- kho mẫu --- */
.qt-msgs{display:flex;flex-wrap:wrap;gap:5px;max-height:220px;overflow-y:auto}
.qt-mb{font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:3px 9px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--muted);
  font-variant-numeric:tabular-nums}
.qt-mb:hover{border-color:var(--muted);color:var(--text)}
.qt-mb.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.qt-mb.qt-empty{border-style:dashed;opacity:.6}
.qt-body{white-space:pre-wrap;font-size:13.5px;line-height:1.6;border-left:3px solid var(--accent);
  padding:8px 0 8px 13px;margin-top:8px}
.qt-var{font-size:11.5px;padding:1px 5px;border-radius:4px;background:var(--surface-2);
  border:1px solid var(--red);color:var(--red)}

/* --- dải cảnh báo --- */
.qt-warn{border:1px solid var(--amber);border-left-width:4px;border-radius:9px;
  padding:9px 13px;background:var(--surface-2);margin-bottom:10px;font-size:12.5px}
.qt-warn.qt-bad{border-color:var(--red)}

@media (max-width:640px){
  .qt-mx{min-width:0}
  .qt-mx th.qt-rh{width:auto;font-size:11.5px}
  .qt-step{flex:1 1 100%}
  .qt-vt,.qt-vb{margin-left:0}
}

/* ================================================================================
   ĐỢT APP DI ĐỘNG (21/08/2026) — vùng an toàn · thanh tab đáy · dải nhắc · thông báo
   Chỉ dùng token đã khai. Hai mốc màn hình duy nhất: 640 và 1024 (quy ước V2).
   ================================================================================ */

/* --- Vùng an toàn: iPhone có tai thỏ / vạch Home. Đi kèm viewport-fit=cover ở index.html.
   Không có mấy dòng này thì nội dung chui xuống dưới vạch Home khi chạy toàn màn hình. --- */
/* Chạy toàn màn hình trên iPhone: không chừa tai thỏ thì thanh trên chui lên dưới đồng hồ
   và sóng. env() = 0 trên máy tính nên mấy dòng này vô hại ở đó. */
#topbar{padding-left:calc(22px + env(safe-area-inset-left));padding-right:calc(22px + env(safe-area-inset-right));
  padding-top:env(safe-area-inset-top);
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  flex-basis:calc(var(--topbar-h) + env(safe-area-inset-top))}
#sidebar{padding-bottom:env(safe-area-inset-bottom)}

/* --- Cảm giác app, không phải web --- */
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
#sidebar,#topbar,#tabbar,.nav-item,.btn,.icon-btn,.tabb{-webkit-user-select:none;user-select:none}
.btn,.icon-btn,.tabb,.nav-item,[data-nav],[data-action]{touch-action:manipulation}

/* --- THANH TAB ĐÁY (chỉ ≤640px; renderTabbar() sinh nội dung) --- */
#tabbar{display:none}
.tabb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 2px;background:none;border:0;font:inherit;color:var(--muted);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tabb.on{color:var(--accent)}
.tabb-ic{position:relative;display:flex;align-items:center;justify-content:center;height:22px}
.tabb-ic svg{width:20px;height:20px}
.tabb-l{font-size:10.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabb-dot{position:absolute;top:-4px;left:12px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center;line-height:1}

/* --- Dải nhắc cài app / bật thông báo (đầu trang, đóng được 7 ngày) ---
   NẰM TRONG LUỒNG (đầu <main>, trên #topbar). Trước đây để position:fixed top:0 nên nó phủ
   lên thanh trên, che mất nút ☰ và ô tìm kiếm suốt cho tới khi người dùng bấm ✕. */
#mobile-banners{flex:0 0 auto}
#mobile-banners:empty{display:none}
.mbar{display:flex;align-items:center;gap:10px;
  padding:calc(9px + env(safe-area-inset-top)) 12px 9px;background:var(--accent);color:#fff;
  font-size:13px;line-height:1.35}
/* Có dải nhắc thì CHÍNH NÓ đội phần tai thỏ, thanh trên trả về chiều cao thường —
   nếu không hai lớp cùng chừa một lần là thừa một khoảng trắng to. */
main:has(#mobile-banners:not(:empty)) #topbar{padding-top:0;
  height:var(--topbar-h);flex-basis:var(--topbar-h)}
.mbar-warn{background:var(--amber)}
.mbar-t{flex:1;min-width:0}
.mbar .btn{flex:0 0 auto;background:#fff;color:var(--accent);border:0;min-height:34px}
.mbar-warn .btn{color:var(--amber)}
.mbar-x{flex:0 0 auto;width:30px;height:30px;min-height:30px;color:#fff;background:none;border:0;opacity:.85}
.mbar-x:hover{opacity:1;background:rgba(255,255,255,.16)}

/* --- Thẻ cài đặt thông báo (màn Cá nhân của tôi) + bảng theo dõi (màn Cài đặt) --- */
.pn-ok{color:var(--green);font-weight:600;font-size:13.5px}
.pn-warn{border:1px solid var(--amber);border-left-width:4px;border-radius:9px;padding:9px 13px;
  background:var(--surface-2);font-size:13px;line-height:1.5}
.pn-no{display:inline-block;font-size:11px;font-weight:700;color:var(--red)}
.pn-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pn-lb{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.pn-q{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pn-t{width:104px;min-width:104px}
.ins-steps{margin:0;padding-left:22px;font-size:13.5px;line-height:1.7}
.ins-steps li{margin-bottom:6px}

@media (max-width:640px){
  /* Thanh tab đáy thay cho việc phải mở ngăn kéo mỗi lần đổi màn. */
  /* Rỗng thì ẩn hẳn: màn đăng nhập chưa có nav, để nguyên là hiện một vạch viền 1px lơ lửng
     ở đáy màn hình. */
  #tabbar:empty{display:none}
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-top);
    background:var(--surface);border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
  /* Chừa chỗ cho thanh tab, nếu không nút cuối danh sách nằm dưới nó và không bấm được. */
  #content{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  #topbar{padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
  /* Tấm trượt đáy phải nằm TRÊN thanh tab và chừa vạch Home. */
  .modal{padding-bottom:env(safe-area-inset-bottom)}
  /* iOS phóng to màn hình khi chạm ô nhập có cỡ chữ <16px, phóng xong KHÔNG thu lại.
     Ép 16px chỉ trên điện thoại; máy tính giữ nguyên 14px. */
  input.inp,select.sel,textarea.inp,input[type=text],input[type=number],input[type=email],
  input[type=password],input[type=date],input[type=month],input[type=time],input[type=search],
  textarea,select{font-size:16px}
  .pn-row{gap:10px}
  .pn-q{width:100%}
}

/* --- Dải mất kết nối (mọi vai thấy, không chỉ quản lý) --- */
.mbar-off{background:var(--red)}
.mbar-off .btn{color:var(--red)}

/* --- Nút "Xem thêm" khi bảng dài bị cắt trang trên điện thoại --- */
.tbl-more{display:none}
@media (max-width:640px){
  .tbl-more{display:flex;width:100%;justify-content:center;margin:2px 0 14px}
  /* Đầu trang trên 375px đang phải chứa 7 nút — bỏ nhãn chữ, giữ icon, trả chỗ cho ô tìm kiếm.
     title/aria-label do enhanceTables() gắn nên trình đọc màn hình vẫn đọc được tên nút. */
  #topbar .btn>span{display:none}
  #topbar .btn{padding:0 11px}
  #topbar{gap:7px}
}

/* --- Vạch tiến trình khi đang gọi máy chủ (thay cho màn trắng im lặng) --- */
#busy-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:calc(var(--z-top) + 2);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:busyslide 1.05s infinite linear;
  pointer-events:none}
@keyframes busyslide{0%{background-position:-40% 0}100%{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){#busy-bar{animation:none;background:var(--accent);opacity:.5}}

/* --- Cửa vào cố định "Cài app về máy" trong menu (dải nhắc đóng được 7 ngày nên phải luôn
   còn một chỗ để bấm) --- */
.nav-inst{cursor:pointer}
.nav-inst:hover{background:var(--surface-2)}
.ins-ic{display:inline-block}

/* ==== Chuẩn hoá QL Sale & SX 24/08/2026 — ô tiền + lọc/sắp mọi cột ==== */
.sh-money{font-variant-numeric:tabular-nums}
.sh-money-err{border-color:var(--red)!important;background:var(--red-soft)!important}
.sh-colf td{padding:3px 4px;background:var(--surface-2);border-bottom:1px solid var(--border-2)}
.sh-colf .inp,.sh-colf .sel{height:26px;font-size:11px;padding:2px 6px;min-width:56px;width:100%;color:var(--muted)}
.sh-colf .sh-colf-on{border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.sh-fbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);margin:8px 0 2px}
.sh-fchip{display:inline-flex;gap:6px;align-items:center;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);cursor:pointer;font-family:inherit}
.sh-fchip:hover{background:var(--accent);color:#fff}
th.sh-sth{cursor:pointer;user-select:none;white-space:nowrap}
th.sh-sth:hover{color:var(--text)}
th.sh-sth.on{color:var(--accent-ink)}
/* Sổ đơn hàng của NV. Nhận hóa đơn — dòng chưa ghi nhận nổi lên để không sót đơn nào */
.sh-unrec{background:color-mix(in srgb,var(--amber) 10%,transparent)}
.sh-unrec td{color:var(--text)}