/* ================= GIAO DIỆN TỐI: ghi đè các lớp Tailwind + màu nội tuyến ================= */
  /* ---- Dashboard (kiểu Shadcn / SaaS): thẻ, KPI, biểu đồ tròn / cột / thanh ---- */
  .dsh{--c-work:#2a78d6;--c-train:#6250d6;--c-leave:#eda100;--c-tc:#eb6834;--c-ok:#1baf7a;--c-bad:#e34948;--k1:#2a78d6;--k2:#eb6834;--k3:#1baf7a;--k4:#eda100;--k5:#e87ba4;--k6:#008300;--k7:#6250d6;--k8:#e34948;--grid:rgba(100,116,139,.18)}
  html[data-theme=dark] .dsh{--c-work:#3987e5;--c-train:#9085e9;--c-leave:#c98500;--c-tc:#d95926;--c-ok:#199e70;--c-bad:#e66767;--k1:#3987e5;--k2:#d95926;--k3:#199e70;--k4:#c98500;--k5:#d55181;--k6:#2f9e2f;--k7:#9085e9;--k8:#e66767;--grid:rgba(148,163,184,.16)}
  .dsh .card{background:var(--surface);border:1px solid var(--bd);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
  .dsh .hero{background:linear-gradient(120deg,#0f766e 0%,#0e7490 55%,#1d4ed8 100%);color:#fff;border-radius:16px;padding:16px 18px;position:relative;overflow:hidden}
  .dsh .hero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
  .dsh .hero h2{font-size:18px;font-weight:800;letter-spacing:-.01em} .dsh .hero p{font-size:12px;opacity:.85}
  .dsh .hero .seg{background:rgba(255,255,255,.16)} .dsh .hero .seg button{color:rgba(255,255,255,.85)} .dsh .hero .seg button.on{background:#fff;color:#0f172a}
  .dsh .hero input,.dsh .hero .nb{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:8px} .dsh .hero input{color-scheme:dark}
  .dsh .seg{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px} .dsh .seg button{padding:5px 13px;font-size:12px;font-weight:700;border-radius:7px;color:var(--muted)}
  .dsh .seg button.on{background:var(--surface);color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.15)}
  .dsh .kpi{padding:14px 16px;position:relative;overflow:hidden} .dsh .kpi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px}
  .dsh .kpi .l{font-size:12px;font-weight:600;color:var(--muted)} .dsh .kpi .v{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:8px} .dsh .kpi .s{font-size:11px;color:var(--muted);margin-top:2px}
  .dsh .kpi svg.sp{position:absolute;right:10px;bottom:10px;opacity:.9}
  .dsh .ch{padding:14px 16px 0} .dsh .ch h3{font-size:14px;font-weight:700} .dsh .ch p{font-size:12px;color:var(--muted);margin-top:1px} .dsh .cb{padding:12px 16px 16px}
  .dsh .lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-right:12px} .dsh .lg i{width:9px;height:9px;border-radius:3px;display:inline-block}
  .dsh .bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden} .dsh .bar>i{display:block;height:100%;border-radius:99px}
  .dsh .stk{display:flex;gap:2px;height:12px;border-radius:99px;overflow:hidden;background:var(--surface-3)} .dsh .stk>i{display:block;height:100%}
  .dsh .badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--bd)}
  .dsh .b-ok{color:#047857;background:#d1fae5;border-color:#a7f3d0} .dsh .b-late{color:#b45309;background:#fef3c7;border-color:#fde68a} .dsh .b-bad{color:#b91c1c;background:#fee2e2;border-color:#fecaca} .dsh .b-nil{color:#475569;background:#e2e8f0;border-color:#cbd5e1} .dsh .b-done{color:#4338ca;background:#e0e7ff;border-color:#c7d2fe}
  html[data-theme=dark] .dsh .b-ok{color:#6ee7b7;background:#064e3b;border-color:#065f46} html[data-theme=dark] .dsh .b-late{color:#fcd34d;background:#78350f;border-color:#92400e} html[data-theme=dark] .dsh .b-bad{color:#fca5a5;background:#7f1d1d;border-color:#991b1b} html[data-theme=dark] .dsh .b-nil{color:#cbd5e1;background:#334155;border-color:#475569} html[data-theme=dark] .dsh .b-done{color:#a5b4fc;background:#312e81;border-color:#3730a3}
  .dsh .plot{position:relative;height:190px;background:repeating-linear-gradient(to top,var(--grid) 0,var(--grid) 1px,transparent 1px,transparent 25%);border-bottom:1px solid var(--bd)}
  .dsh .cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px;padding:0 2px}
  .dsh .col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default} .dsh .col>div{width:100%;max-width:30px;display:flex;flex-direction:column-reverse;gap:2px;transition:filter .15s}
  .dsh .col>div>i{display:block;width:100%;min-height:0} .dsh .col>div>i:last-child{border-radius:4px 4px 0 0} .dsh .col:hover>div{filter:brightness(1.12)}
  .dsh .axl{display:flex;gap:3px;padding:4px 2px 0} .dsh .axl>span{flex:1;min-width:0;text-align:center;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden}
  .dsh .yl{position:absolute;left:0;font-size:10px;color:var(--muted);background:var(--surface);padding:0 3px;transform:translateY(-50%)}
  .dsh .sqc{padding:12px 14px;display:flex;gap:12px;align-items:center} .dsh .sqc .nm{font-weight:800;font-size:13px} .dsh .sqc .st{font-size:11px;color:var(--muted)}
  .dsh .row-h{display:grid;grid-template-columns:92px 1fr 56px;gap:10px;align-items:center;font-size:12px;margin-bottom:9px}
  .dsh .gt{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;margin-bottom:8px;font-size:12px}
  .dsh .gtt{position:relative;height:18px;border-radius:6px;background:var(--surface-3)} .dsh .gtt .b{position:absolute;top:0;bottom:0;border-radius:6px;overflow:hidden;opacity:.5} .dsh .gtt .f{position:absolute;top:0;bottom:0;border-radius:6px}
  .dsh .gtt .td{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--c-bad);z-index:2}
  .dsh .wpbar{position:relative;height:16px;border-radius:99px;background:var(--surface-3);overflow:visible}
  .dsh .wpbar .f{position:absolute;left:0;top:0;bottom:0;border-radius:99px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:10.5px;font-weight:800;min-width:30px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 1px 6px rgba(0,0,0,.12);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px)}
  .dsh .wpbar .m{position:absolute;top:-5px;bottom:-5px;width:2px;background:#64748b;border-radius:2px} .dsh .wpbar .m::after{content:"";position:absolute;top:-4px;left:-4px;border:5px solid transparent;border-top-color:#64748b;border-bottom:0}
  .dsh .mini{background:var(--surface-2);border-radius:10px;padding:8px 10px} .dsh .mini b{display:block;font-size:15px;font-weight:800} .dsh .mini span{font-size:10.5px;color:var(--muted)}
  #dTip{position:fixed;z-index:80;pointer-events:none;background:#0f172a;color:#f8fafc;font-size:12px;padding:6px 9px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.3);max-width:260px;display:none;white-space:pre-line}
  @media(max-width:640px){.dsh .gt{grid-template-columns:96px 1fr}.dsh .row-h{grid-template-columns:70px 1fr 44px}.dsh .kpi .v{font-size:24px}}
  html[data-theme=dark] .text-slate-800{color:#f1f5f9}
  html[data-theme=dark] .text-slate-700,html[data-theme=dark] .hover\:text-slate-700:hover{color:#e2e8f0}
  html[data-theme=dark] .text-slate-600{color:#cbd5e1}
  html[data-theme=dark] .text-slate-500{color:#a3b1c6}
  html[data-theme=dark] .text-slate-400{color:#8190a8}
  html[data-theme=dark] .text-slate-300{color:#52627f}
  html[data-theme=dark] .hover\:text-slate-800:hover{color:#f1f5f9}
  html[data-theme=dark] .bg-white{background-color:var(--surface)}
  html[data-theme=dark] .bg-white\/90{background-color:rgba(11,18,32,.9)}
  html[data-theme=dark] .bg-white\/30{background-color:rgba(255,255,255,.08)}
  html[data-theme=dark] .bg-slate-50{background-color:var(--surface-2)}
  html[data-theme=dark] .bg-slate-100{background-color:var(--surface-3)}
  html[data-theme=dark] .bg-slate-200{background-color:#2f3f5e}
  html[data-theme=dark] .hover\:bg-white:hover,html[data-theme=dark] .hover\:bg-slate-50:hover,html[data-theme=dark] .hover\:bg-slate-50\/70:hover{background-color:var(--surface-3)}
  html[data-theme=dark] .hover\:bg-slate-100:hover{background-color:#2f3f5e}
  html[data-theme=dark] .\!bg-slate-50{background-color:var(--surface-2)!important}
  html[data-theme=dark] .\!bg-slate-100{background-color:var(--surface-3)!important}
  html[data-theme=dark] .\!bg-emerald-50{background-color:rgba(16,185,129,.16)!important}
  html[data-theme=dark] .divide-slate-100>:not([hidden])~:not([hidden]){border-color:var(--bd-2)}
  html[data-theme=dark] .border-slate-200{border-color:var(--bd-2)}
  html[data-theme=dark] .border-slate-300{border-color:var(--bd-3)}
  /* màu nhấn: nền nhạt → nền mờ, chữ đậm → chữ sáng */
  html[data-theme=dark] .bg-emerald-50,html[data-theme=dark] .hover\:bg-emerald-50:hover{background-color:rgba(16,185,129,.16)}
  html[data-theme=dark] .bg-red-50,html[data-theme=dark] .hover\:bg-red-50:hover{background-color:rgba(239,68,68,.16)}
  html[data-theme=dark] .bg-amber-50{background-color:rgba(245,158,11,.16)}
  html[data-theme=dark] .bg-amber-100,html[data-theme=dark] .hover\:bg-amber-100:hover{background-color:rgba(245,158,11,.26)}
  html[data-theme=dark] .bg-violet-50{background-color:rgba(139,92,246,.18)}
  html[data-theme=dark] .bg-violet-100,html[data-theme=dark] .hover\:bg-violet-100:hover{background-color:rgba(139,92,246,.28)}
  html[data-theme=dark] .bg-sky-50{background-color:rgba(14,165,233,.16)}
  html[data-theme=dark] .bg-sky-100{background-color:rgba(14,165,233,.24)}
  html[data-theme=dark] .bg-yellow-200{background-color:rgba(250,204,21,.2);color:#fde68a}
  html[data-theme=dark] .border-yellow-400{border-color:rgba(250,204,21,.5)}
  html[data-theme=dark] .\!bg-yellow-200{background-color:rgba(250,204,21,.2)!important;color:#fde68a}
  html[data-theme=dark] .\!border-yellow-400{border-color:rgba(250,204,21,.5)!important}
  html[data-theme=dark] .text-emerald-600{color:#34d399}
  html[data-theme=dark] .text-emerald-700,html[data-theme=dark] .text-emerald-800{color:#6ee7b7}
  html[data-theme=dark] .text-red-500,html[data-theme=dark] .text-red-600,html[data-theme=dark] .hover\:text-red-600:hover{color:#f87171}
  html[data-theme=dark] .text-red-700{color:#fca5a5}
  html[data-theme=dark] .text-amber-600,html[data-theme=dark] .text-amber-700,html[data-theme=dark] .text-amber-800{color:#fbbf24}
  html[data-theme=dark] .text-violet-600,html[data-theme=dark] .text-violet-700{color:#c4b5fd}
  html[data-theme=dark] .text-sky-600,html[data-theme=dark] .text-sky-800{color:#7dd3fc}
  html[data-theme=dark] .border-red-200{border-color:rgba(248,113,113,.4)}
  html[data-theme=dark] .border-amber-200,html[data-theme=dark] .border-amber-300{border-color:rgba(251,191,36,.4)}
  html[data-theme=dark] .border-emerald-200,html[data-theme=dark] .border-emerald-300{border-color:rgba(52,211,153,.4)}
  html[data-theme=dark] .border-violet-200,html[data-theme=dark] .border-violet-300{border-color:rgba(167,139,250,.4)}
  html[data-theme=dark] .border-sky-200{border-color:rgba(56,189,248,.4)}
  /* ô dùng màu nội tuyến (ngày nghỉ N, ngoài thời gian biệt phái) */
  html[data-theme=dark] [style*="background:#e2e8f0"]{background:#2f3f5e!important}
  html[data-theme=dark] [style*="repeating-linear-gradient(45deg,#f8fafc"]{background:repeating-linear-gradient(45deg,#1b2740,#1b2740 4px,#2f3f5e 4px,#2f3f5e 8px)!important}
  html[data-theme=dark] .we{background:#18233a}
  html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#3a4b6b;border-radius:8px} html[data-theme=dark] ::-webkit-scrollbar-track{background:transparent}
  /* Độ rộng các cột roster */
  .zt .c-name { min-width:220px!important; }
  .zt .c-name .inp { width:210px!important; }

  .zt .c-id,
  .zt .c-ph { min-width:150px!important; }

  .zt .c-id .inp,
  .zt .c-ph .inp {
    width:140px!important;
    min-width:140px!important;
    box-sizing:border-box!important;
    font-family:Consolas,"Courier New",monospace!important;
    font-variant-numeric:tabular-nums;
    font-size:12px!important;
    font-weight:400!important;
    line-height:1.4!important;
  }