:root{
  --green:#16a34a; --green-d:#15803d; --green-l:#22c55e;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --bg:#f3f5fa; --card:#ffffff;
  --navy:#1e3a8a; --navy2:#23408f; --navy3:#2c4fae; --th:#2d4fa8;
  --blue:#2563eb; --amber:#f59e0b; --red:#dc2626; --purple:#7c3aed;
  --yel:#fdf6d3; --yel2:#fffbe8; --lav:#efe9fd; --mint:#eaf7ef;
  --radius:12px; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Be Vietnam Pro',system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:13px}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
b{font-weight:700}

/* ---------- LOGIN ---------- */
.login-wrap{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#16306f,#2c4fae)}
.login-card{width:340px;background:#fff;border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-logo{text-align:center}
.login-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:8px;font-weight:600}
.login-card input{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;outline:none}
.login-card input:focus{border-color:var(--navy3)}
.login-card button{padding:11px;background:var(--navy);color:#fff;border:0;border-radius:10px;font-weight:600;font-size:15px}
.login-err{color:var(--red);font-size:13px;text-align:center;min-height:16px}
.login-hint{text-align:center;color:#94a3b8;font-size:12px}

/* ---------- SHELL ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:14px 18px 40px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,#1b3478 0%,#2547a0 60%,#2c56b8 100%);color:#fff;border-radius:14px;padding:16px 20px;
  box-shadow:0 6px 18px rgba(30,58,138,.28);border-bottom:3px solid #f2b705}
.hero-l{display:flex;align-items:center;gap:16px}
.tha-logo{background:#fff;color:#1e3a8a;font-weight:900;font-size:34px;letter-spacing:-1px;padding:8px 18px;border-radius:12px;line-height:1}
.tha-logo span{color:#f2b705}
.tha-logo.sm{display:inline-block;font-size:28px;border:2px solid #e2e8f0}
.hero-title{font-size:20px;font-weight:800;letter-spacing:.01em}
.hero-ic{background:#3b82f6;border-radius:6px;padding:0 4px;font-size:15px}
.hero-sub{font-size:12px;opacity:.85;margin:2px 0 6px}
.hero-ds{font-size:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hero-host{opacity:.75}
.ds-switch{display:inline-flex;gap:6px}
.ds-switch button{border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:700}
.ds-switch button.active{background:#fff;color:var(--navy)}
.hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.hero-meta{font-size:11.5px;opacity:.9}
.user-menu{position:relative;margin-bottom:4px}
.user-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:20px;padding:6px 14px;font-size:13px}
.role-badge{background:#cbd5e1;color:#1e293b;border-radius:10px;font-size:10px;padding:1px 7px;font-weight:700;margin-left:4px}
.user-drop{position:absolute;right:0;top:110%;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);min-width:190px;z-index:50;overflow:hidden;text-align:left}
.user-drop a{display:block;padding:10px 14px;color:#1e293b;text-decoration:none;font-size:13px}
.user-drop a:hover{background:#f1f5f9}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 12px}
.tabs a{display:flex;align-items:center;gap:6px;padding:10px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;color:#1e293b;text-decoration:none;font-size:14px;font-weight:600;box-shadow:var(--shadow)}
.tabs a:hover{border-color:var(--navy3)}
.tabs a.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 4px 12px rgba(30,58,138,.3)}

.content{min-height:300px}
.loading{color:var(--muted);padding:40px;text-align:center}

/* ---------- Filter rows ---------- */
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.frow label{font-size:13px;font-weight:600;color:#334155;display:flex;align-items:center;gap:6px}
.sel{font:inherit;font-size:13px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#1e293b;min-width:130px;cursor:pointer}
.btn-y{background:#f6c343;color:#3f2d00;border:1px solid #e0a800;border-radius:8px;padding:7px 14px;font-weight:700;font-size:13px}
.btn-y:hover{filter:brightness(.97)}
.btn-b{background:var(--navy3);color:#fff;border:0;border-radius:7px;padding:7px 14px;font-weight:700;font-size:13px}
.btn-o{background:#fff;color:#15803d;border:1px solid #86efac;border-radius:8px;padding:5px 12px;font-weight:700;font-size:12px}
.filterbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.filterbar:empty{display:none}
.fb-lbl{font-size:13px;font-weight:600;color:#374151;margin-right:2px}
.fb-btn{font:inherit;font-size:13px;padding:5px 12px;border:1px solid #cbd5e1;background:#fff;border-radius:7px;cursor:pointer;color:#374151}
.fb-btn:hover{background:#f3f4f6}
.fb-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.fb-btn.go{background:#f6c343;color:#3f2d00;border-color:#e0a800;font-weight:600}
.fb-btn.danger{background:#dc2626;color:#fff;border-color:#dc2626;font-weight:600}
.fb-custom{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.fb-custom input[type=date]{padding:4px 6px;border:1px solid #cbd5e1;border-radius:6px}
.fb-custom.hidden{display:none}
.fb-spacer{flex:1}
.fb-src{font-size:13px;color:#374151;white-space:nowrap}
.fb-sel{font:inherit;font-size:13px;padding:5px 8px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#374151;max-width:240px;cursor:pointer}

/* ---------- Banners / panels ---------- */
.banner{background:#fff7ed;border:1px solid #fdba74;border-left:4px solid #f59e0b;border-radius:10px;padding:10px 14px;font-size:12.5px;color:#7c2d12;line-height:1.5;margin-bottom:12px}
.banner.blue{background:#eff6ff;border-color:#93c5fd;border-left-color:var(--navy3);color:#1e3a8a}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.panel-pad{padding:14px 16px}
.panel-head{background:linear-gradient(90deg,#1e3a8a,#2c4fae);color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px;letter-spacing:.02em}
.panel-head small{font-weight:600;font-size:12px;opacity:.9;letter-spacing:0}
.panel-sub{padding:8px 16px;font-size:12px;color:#475569;border-bottom:1px solid var(--line);background:#f8fafc}
.h-title{font-size:15px;font-weight:800;color:#1e293b;display:flex;align-items:center;gap:8px;margin:0 0 4px}
.h-desc{font-size:12px;color:var(--muted);margin-bottom:10px}
.sec-row{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;gap:10px}
.sec-row .h-title{margin:0}
.hint{font-size:12px;color:#64748b;margin:6px 2px 0}

/* ---------- Generic cards / grid (dash360...) ---------- */
.grid{display:grid;gap:12px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g5,.g4,.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:14px;color:#1e293b}
.sect-title{font-size:14px;font-weight:800;color:#1e293b;margin:18px 2px 10px}

/* KPI (vien mau ben trai nhu vendor) */
.kpi{position:relative;overflow:hidden;padding-left:18px}
.kpi .lbl{font-size:12px;color:#475569;font-weight:600}
.kpi .val{font-size:22px;font-weight:800;margin-top:4px;letter-spacing:-.01em}
.kpi .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.kpi .tag{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.kpi .tag.g{background:#dcfce7;color:#166534}.kpi .tag.r{background:#fee2e2;color:#991b1b}
.kpi .accent{position:absolute;left:0;top:0;bottom:0;width:4px}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.pill.g{background:#dcfce7;color:#166534}.pill.r{background:#fee2e2;color:#991b1b}.pill.b{background:#e0f2fe;color:#075985}.pill.a{background:#fef3c7;color:#92400e}

/* ---------- Tables (header xanh navy) ---------- */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid #edf0f5;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--th);color:#fff;font-weight:700;font-size:12px;position:sticky;top:0;z-index:1;border-right:1px solid rgba(255,255,255,.12)}
tbody tr:hover td{filter:brightness(.98)}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.panel .tbl-wrap{border:0;border-radius:0}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--muted)}
tr.tot td{background:var(--yel);font-weight:800;border-top:2px solid #e9c86b}
tr.grp td{background:var(--mint);font-weight:800;color:#065f46}
tr.sub td{background:var(--yel2)}
td.lk,th.lk{background:var(--lav)!important;color:#4c1d95}
thead th.lk{background:#6d4fd8!important;color:#fff!important}
.c-green{color:#15803d;font-weight:700}.c-blue{color:#1d4ed8;font-weight:700}.c-red{color:#b91c1c;font-weight:700}
.c-purple{color:#6d28d9;font-weight:700}.c-amber{color:#b45309;font-weight:700}.c-orange{color:#c2410c;font-weight:700}
.ok{color:#15803d;font-weight:700}

/* cohort */
.cohort th:first-child{background:#1e3a8a}
.cohort th.tot-col{background:#16a34a}
.cohort td{font-size:12px}
.cohort td.rowlbl{background:var(--mint);color:#065f46;font-weight:800;text-align:center;vertical-align:middle;min-width:84px;border-right:1px solid #cfe9da}
.cohort td.kind{color:#64748b;font-size:11px;text-align:left;padding-left:6px}
.cohort td.tcol{background:var(--yel);font-weight:800}
.cohort tr.r-kh td{color:#15803d}
.cohort tr.r-ds td{color:#1d4ed8;background:#fbfcff}
.cohort tr.r-ds td.tcol{background:var(--yel)}
.cohort tr.h1 td{background:var(--yel2);color:#92400e;font-weight:700}
.cohort tr.h2 td{background:#fffdf3;color:#92400e;font-weight:700}
.cohort tr.h3 td{background:#e0f2fe;color:#075985;font-weight:800}
.cohort tr.h4 td{background:#ede9fe;color:#5b21b6;font-weight:800}
.cohort tr.h1 td:first-child,.cohort tr.h2 td:first-child,.cohort tr.h3 td:first-child,.cohort tr.h4 td:first-child{text-align:left}
.cohort tr.r-ds{border-bottom:2px solid #e5e7eb}

/* target */
.pct-in{width:54px;text-align:center;border:1px solid #cbd5e1;border-radius:5px;padding:3px;font:inherit;background:#f1f5f9}
.pct-in:not([readonly]){background:#fff;border-color:var(--navy3)}
.tgt-tbl td:first-child{color:#15803d;font-weight:700}
.tgt-tbl td.mean{text-align:left;color:#64748b}
.tgt-tbl td.pc{text-align:right;width:260px}
.prog{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;width:100%}
.prog .bar{width:50px;height:6px;border-radius:4px;background:#e5e7eb;overflow:hidden}
.prog .bar i{display:block;height:100%;background:#dc2626}
.prog.mid .bar i{background:#f59e0b}.prog.hi .bar i{background:#16a34a}
.kbox{border:1px solid var(--line);border-left:4px solid #16a34a;border-radius:8px;padding:8px 12px;background:#fff}
.kbox .l{font-size:12px;color:#475569}.kbox .v{font-size:20px;font-weight:800}
.tree{cursor:pointer}
.tree::before{content:"▸ ";color:#64748b}
.tree.open::before{content:"▾ "}
tr.child td{background:#fafbff;font-size:12px}
tr.child td:first-child{padding-left:28px}

/* call */
.call-sum tr.grp td{background:#d1fae5}
.call-sum tr.sub td{background:#fef9e3}
.call-sum tr.sub td:first-child{padding-left:22px;color:#92400e}
.call-sum tr.tot td{background:#dbeafe;border-top:0}
.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0}
.chips .cl{font-size:12.5px;font-weight:700;color:#334155;min-width:90px}
.chip{border:1px solid #16a34a;background:#fff;color:#166534;border-radius:8px;padding:4px 12px;font-size:12px;font-weight:700}
.chip:hover{background:#f0fdf4}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .n{opacity:.7;font-weight:600;margin-left:3px}
.stage{display:inline-block;border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700;background:#ede9fe;color:#6d28d9}
.stage.s1{background:#dcfce7;color:#166534}.stage.s2{background:#e0f2fe;color:#075985}.stage.s3{background:#fef3c7;color:#92400e}.stage.s4{background:#fee2e2;color:#991b1b}
.st-need{color:#b91c1c;font-weight:700}.st-done{color:#15803d;font-weight:700}
a.crm{color:#1d4ed8;font-weight:700;text-decoration:none}
a.crm:hover{text-decoration:underline}
.detail td,.detail th{text-align:left}
.detail td.num{text-align:right}

/* misc */
.funnel{display:flex;flex-direction:column;gap:8px}
.fn-row{display:flex;align-items:center;gap:10px}
.fn-bar{height:32px;border-radius:8px;display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:700;font-size:13px;min-width:80px}
.fn-lbl{width:120px;font-size:13px;color:#334155;font-weight:600}
.chart-box{position:relative;height:280px}
.excel-btn{border:1px solid var(--green);background:#f0fdf4;color:var(--green-d);padding:6px 12px;border-radius:8px;font-weight:700;font-size:12.5px}
.excel-btn:hover{background:var(--green);color:#fff}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.note{font-size:12px;color:var(--muted);margin-top:8px}

/* settings */
.cfg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;margin-bottom:14px}
.cfg-grid label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:#4b5563;gap:4px}
.cfg-grid input:not([type=checkbox]){padding:7px 10px;border:1px solid #cbd5e1;border-radius:7px;font:inherit}
.cfg-grid label.cb{flex-direction:row;align-items:center;gap:6px}
.cfg-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cfg-msg{font-size:13px;margin-left:6px}
@media(max-width:720px){.cfg-grid{grid-template-columns:1fr}.hero-r{align-items:flex-start;text-align:left}}

/* modal */
.modal-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:#fff;border-radius:14px;padding:22px 24px;max-width:420px;width:90%;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal-title{font-size:17px;font-weight:700;color:#b91c1c;margin-bottom:8px}
.modal-msg{font-size:14px;color:#374151;line-height:1.5;margin-bottom:18px}
.modal-acts{display:flex;justify-content:flex-end;gap:10px}

/* ===== Layout 2026-10-13: sidebar trai + full man hinh ===== */
.app:not(.hidden){display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
.wrap{max-width:none;margin:0;padding:14px 20px 40px;min-width:0}
.side{background:#fff;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.side-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--line);font-weight:800;font-size:18px;color:var(--navy)}
.side-brand img{width:40px;height:40px;object-fit:contain}
.side-menu{display:flex;flex-direction:column;gap:4px;padding:10px}
.side-menu .grp{font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.06em;padding:12px 10px 4px}
.side-menu a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#1e293b;text-decoration:none;font-size:14px;font-weight:600}
.side-menu a:hover{background:#eef2ff}
.side-menu a.active{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(30,58,138,.3)}
.tha-logo img{height:44px;width:auto;display:block}
.tha-logo{padding:4px 8px}
.mg-logo-lg{height:90px;width:auto}
.hero{margin-bottom:12px}
@media (max-width:900px){.app:not(.hidden){grid-template-columns:1fr}.side{position:static;height:auto}.side-menu{flex-direction:row;flex-wrap:wrap}.side-menu .grp{display:none}}

/* ===== Dashboard 360 kieu thagroup ===== */
.grid.g5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.d-goal{display:flex;gap:20px;justify-content:space-between;background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:18px 22px;margin-bottom:6px;flex-wrap:wrap}
.dg-l{flex:1;min-width:280px}.dg-ttl{font-weight:800;font-size:15px}
.dg-big{font-size:34px;font-weight:800;margin-top:6px}.dg-big small{font-size:16px;opacity:.8;font-weight:600}
.dg-sub{font-size:12.5px;opacity:.9}
.dg-bar{position:relative;height:16px;background:rgba(255,255,255,.18);border-radius:9px;margin:12px 0 4px}
.dg-bar span{display:block;height:100%;background:#facc15;border-radius:9px}
.dg-bar i{position:absolute;top:-4px;bottom:-4px;width:3px;background:#fff;border-radius:2px}
.dg-note{font-size:11px;opacity:.75}
.dg-box{background:#fff;color:#1e293b;border-radius:10px;padding:10px 14px;margin-top:10px;font-size:13px;line-height:1.8}
.dg-r{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px}
.dg-pct{font-size:44px;font-weight:900;color:#facc15}
.dg-tag{background:#f59e0b;color:#fff;border-radius:8px;padding:4px 10px;font-weight:700;font-size:13px}.dg-tag.ok{background:#16a34a}
.dg-days{font-size:12px;opacity:.85}
.d-k .lbl{font-weight:700}.d-k .val{font-size:26px;font-weight:800}
.d-k.k-chot{border-top:4px solid #16a34a}.d-k.k-xn{border-top:4px solid #2563eb}.d-k.k-tc{border-top:4px solid #f59e0b}.d-k.k-tl{border-top:4px solid #8b5cf6}.d-k.k-aov{border-top:4px solid #ea580c}.d-k.k-nhan{border-top:4px solid #c2410c}
.d-k.k-chot .val{color:#16a34a}.d-k.k-xn .val{color:#2563eb}.d-k.k-tc .val{color:#b45309}.d-k.k-tl .val{color:#7c3aed}.d-k.k-aov .val{color:#c2410c}
.d-tbl th{background:var(--navy);color:#fff}
.d-tbl tr.tot td{font-weight:800;background:#f1f5f9}
.d-bar{height:10px;background:#eef2f7;border-radius:6px;overflow:hidden}.d-bar span{display:block;height:100%;background:#2563eb;border-radius:6px}
.c-red{color:#dc2626}.c-green{color:#16a34a}.c-blue{color:#2563eb}
.d-sum{padding:4px 2px 10px;font-size:14px}
.d-tbl td:not(.num),.d-tbl th:not(.num){text-align:left}

/* --- D360: ghi chu, so sanh the, drill-down giao hang --- */
.d-note{font-size:12px;color:var(--mut,#64748b);background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;padding:8px 12px;margin:8px 0;line-height:1.5}
.d-note.warn{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.clickable{cursor:pointer}
.d-k .hint{font-size:11px;color:#94a3b8;margin-top:4px}
.cmp-box{margin-top:8px;border-top:1px solid #e2e8f0;padding-top:6px;font-size:12px}
.cmp-row{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin:2px 0}
.cmp-row span{flex:1 1 100%;color:#64748b}
.cmp-row i{font-style:normal;font-weight:600}.cmp-row i.up{color:#16a34a}.cmp-row i.dn{color:#dc2626}
.ds-row a{color:#2563eb;text-decoration:underline dotted}
.ds-row:hover td{background:#eff6ff}
.ds-sub td{background:#f8fafc;font-size:12px;color:#475569}

/* --- Phan tich KH (live) --- */
.grid.g6{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.cus-cards .d-k.sel{outline:2px solid #2563eb;background:#eff6ff}
.d-tbl.freq td.lbl{font-weight:600;white-space:nowrap}
.d-tbl.freq td small{color:#64748b;font-weight:400}
.d-tbl th.sortable{cursor:pointer;user-select:none}
.tag-none{color:#64748b}.tag-l1{color:#16a34a;font-weight:600}.tag-l2{color:#2563eb;font-weight:600}.tag-l3{color:#9333ea;font-weight:600}.tag-ln{color:#dc2626;font-weight:700}

.chk{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px}
.fb-sel:disabled,.sel:disabled{opacity:.75;cursor:not-allowed}