/* Dashboard Sales OS v2 — layout flow mockup (đi kèm dashboard-v2.js) */
#tab-dashboard .dv2{ --ink:#18181B; --cobalt:#2563EB; --amber:#F59E0B; --teal:#3FC9BA; --red:#DC2626; --lime:#E8EC13;
  --bg:#F1F1F3; --card:#fff; --line:#ECECEE; --muted:#6B6B72; --soft:#A1A1AA;
  font-family:'Be Vietnam Pro','Figtree','Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink);
}
#tab-dashboard .dv2 *{ font-variant-numeric:tabular-nums; box-sizing:border-box; }
.dv2-card{ background:var(--card); border-radius:16px; box-shadow:0 2px 18px rgba(20,20,25,.05); padding:20px; margin-bottom:16px; }
.dv2-head{ display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; }
.dv2-head h1{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin:0; }
.dv2-crumb{ font-size:12px; color:var(--soft); font-weight:600; }
.dv2-stat{ font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:99px; margin-left:auto; }
.dv2-stat.ok{ background:#E4F8F5; color:#0E9F90; } .dv2-stat.bad{ background:#FEE2E2; color:var(--red); }

.dv2-hero-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:1000px){ .dv2-hero-grid{ grid-template-columns:1fr; } }
.dv2-hero{ margin:0; }
.dv2-lbl{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.dv2-big{ font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:12px 0; }
.dv2-trow{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.dv2-pill{ display:inline-flex; align-items:center; gap:4px; border-radius:99px; font-size:12.5px; font-weight:700; padding:4px 11px; }
.p-red{ background:#FEE2E2; color:var(--red); } .p-teal{ background:#E4F8F5; color:#0E9F90; } .p-ink{ background:#ECECEE; color:var(--ink); }
.dv2-tgt{ margin:14px 0 10px; }
.dv2-track{ position:relative; height:14px; background:#F4F4F5; border-radius:99px; }
.dv2-behind{ position:absolute; top:0; bottom:0; background:#FCE0E2; }
.dv2-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--cobalt); border-radius:99px; }
.dv2-mark{ position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--lime); box-shadow:0 0 0 1px rgba(0,0,0,.22); border-radius:2px; z-index:2; }
.dv2-trow2{ display:flex; justify-content:space-between; font-size:11px; color:var(--soft); font-weight:600; margin-top:8px; }
.dv2-trow2 .mid{ color:var(--muted); }
.dv2-meta{ font-size:12.5px; color:var(--muted); font-weight:500; }
.dv2-tiles{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; }
.dv2-tile{ background:var(--card); border-radius:16px; box-shadow:0 2px 18px rgba(20,20,25,.05); padding:14px 16px; display:flex; align-items:center; gap:12px; }
.dv2-tile .sd{ width:8px; height:38px; border-radius:5px; flex-shrink:0; }
.dv2-tile .sv{ font-size:16px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.dv2-tile .sk{ font-size:11px; color:var(--muted); font-weight:600; margin-top:3px; }

.dv2-ct{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.dv2-ct h3{ font-size:15px; font-weight:800; letter-spacing:-.01em; margin:0; }
.dv2-leg{ display:flex; gap:14px; margin-left:auto; }
.dv2-leg span{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:600; }
.dv2-leg i{ width:10px; height:10px; border-radius:3px; }
.dv2-sub{ font-size:11.5px; color:var(--soft); font-weight:500; margin-bottom:8px; }
.dv2-2col{ display:grid; grid-template-columns:1.2fr 1fr; gap:16px; }
@media(max-width:1000px){ .dv2-2col{ grid-template-columns:1fr; } }
.dv2-2col .dv2-card{ margin:0; }

.dv2-rk{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.dv2-rkrow{ display:grid; grid-template-columns:84px 1fr 46px 120px; align-items:center; gap:10px; }
.dv2-rkp{ text-align:right; font-size:12px; font-weight:700; color:var(--muted); }
.dv2-rkn{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.dv2-rkw{ height:28px; background:#F4F4F5; border-radius:8px; overflow:hidden; }
.dv2-rkb{ height:100%; border-radius:8px; display:flex; align-items:center; padding:0 9px; font-size:11.5px; font-weight:700; }
.dv2-rkv{ text-align:right; font-size:12.5px; font-weight:700; white-space:nowrap; }
.dv2-crown{ width:18px; height:18px; border-radius:99px; background:var(--lime); display:inline-grid; place-items:center; font-size:10px; box-shadow:0 0 0 2px #fff; }

.dv2-reg{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }
.dv2-regrow{ display:grid; grid-template-columns:90px 1fr 110px; align-items:center; gap:12px; }
.dv2-rn{ font-size:13px; font-weight:700; }
.dv2-rtrack{ position:relative; height:26px; background:#F4F4F5; border-radius:8px; overflow:hidden; }
.dv2-afill{ position:absolute; left:0; top:0; bottom:0; background:var(--cobalt); border-radius:8px; }
.dv2-rtgt{ position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--lime); box-shadow:0 0 0 1px rgba(0,0,0,.2); border-radius:2px; }
.dv2-rm{ text-align:right; font-size:12px; font-weight:600; color:var(--muted); }
.dv2-rm b{ color:var(--ink); font-size:13px; }
.dv2-empty{ text-align:center; padding:22px; color:var(--soft); font-size:13px; font-weight:500; }
.dv2-todo .dv2-empty{ color:var(--muted); }
/* filter chọn tháng */
.dv2-mbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:var(--card); border-radius:16px; box-shadow:0 2px 18px rgba(20,20,25,.05); padding:10px 16px; margin-bottom:16px; }
.dv2-flbl{ font-size:11.5px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.03em; margin-right:4px; }
#dv2-mchips{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.dv2-mchip{ height:28px; min-width:40px; padding:0 11px; border-radius:99px; border:1px solid #E4E4E7; background:var(--card); color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.12s; }
.dv2-mchip:hover{ background:#F4F4F5; }
.dv2-mchip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dv2-fbtn{ height:28px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-family:inherit; font-weight:600; font-size:12px; padding:0 10px; cursor:pointer; }
.dv2-fbtn:hover{ background:#F4F4F5; color:var(--ink); }
/* tooltip dotted chart */
.dv2-dtip{ position:fixed; pointer-events:none; background:#1E1B3A; color:#fff; font-size:12px; font-weight:600;
  padding:9px 12px; border-radius:10px; opacity:0; transition:.08s; transform:translate(-50%,-118%); white-space:nowrap;
  z-index:99; box-shadow:0 6px 20px rgba(0,0,0,.28); line-height:1.55; }
/* Phạm vi / Nhân viên (pill tabs) */
.dv2-ptabs{ display:inline-flex; gap:4px; background:#F4F4F5; border-radius:99px; padding:3px; flex-wrap:wrap; }
.dv2-pt{ padding:5px 12px; border-radius:99px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; }
.dv2-pt:hover{ color:var(--ink); }
.dv2-pt.on{ background:#fff; color:var(--cobalt); box-shadow:0 1px 3px rgba(20,20,25,.1); }
/* Bảng KPI */
.dv2-kvtoggle{ display:inline-flex; background:#F4F4F5; border-radius:99px; padding:3px; gap:2px; margin-left:auto; }
.dv2-kvtoggle b{ padding:5px 14px; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.dv2-kvtoggle b.on{ background:var(--ink); color:#fff; }
.dv2-kpit{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.dv2-kpit th{ text-align:right; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dv2-kpit th.nm{ text-align:left; }
.dv2-kpit td{ padding:10px; border-bottom:1px solid var(--line); }
.dv2-kpit td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dv2-kpit td.nm{ font-weight:700; }
.dv2-kpit tbody tr:hover{ background:#FAFAFB; }
.dv2-kpit tbody tr:last-child td{ border-bottom:none; }
.dv2-kpct{ display:inline-block; min-width:42px; text-align:center; padding:2px 8px; border-radius:99px; font-weight:700; font-size:12px; }
.dv2-kpct.ok{ background:#E4F8F5; color:#0E9F90; } .dv2-kpct.bad{ background:#FEE2E2; color:#DC2626; }