/* ═══════════ block 1 ═══════════ */
/* v1.7.40 — bỏ webfont tự host (Be Vietnam Pro + JetBrains Mono).
Dashboard dùng font hệ điều hành, giống font giao diện Chrome:
Windows → Segoe UI · macOS → SF Pro · Android → Roboto.
Không cần thư mục fonts/ trên hosting nữa.
Quay lại: khôi phục styles.css bản v1.7.39 và upload lại fonts/ */
/* ═══════════ block 2 ═══════════ */
:root{
--bg:#0a0d0c;--bg-2:#0e1211;--surface:#131816;--surface-2:#181e1c;--surface-3:#1e2523;
--border:rgba(150,180,168,.10);--border-strong:rgba(150,180,168,.20);
--green:#2fc98b;--green-soft:#6fdcb0;--green-deep:#0e8f63;
--orange:#e97a3d;--amber:#e6b04a;--red:#e66a6a;--blue:#5ba8e8;--violet:#917fe0;
--text:#e9efec;--text-dim:#9db1a8;--text-faint:#6b7d74;--text-strong:#ffffff;
--shadow:0 18px 50px -20px rgba(0,0,0,.7);--r:18px;
}
/* ===== Giao diện SÁNG (toggle ở header, lưu lựa chọn trong máy) ===== */
html[data-theme="light"]{
--bg:#f3f6f5;--bg-2:#edf1ef;--surface:#ffffff;--surface-2:#f0f4f2;--surface-3:#e6edea;
--border:rgba(15,70,50,.12);--border-strong:rgba(15,70,50,.24);
--green:#0e8f63;--green-soft:#0fb87e;--green-deep:#087a53;
--orange:#e0610a;--amber:#bb8104;--red:#dc3535;--blue:#1d7fd1;--violet:#7a55ee;
--text:#152019;--text-dim:#48604f;--text-faint:#7b9183;--text-strong:#10211a;
--shadow:0 14px 36px -18px rgba(20,60,45,.25);
}
html[data-theme="light"] .bg-layers::before{background:
radial-gradient(1000px 700px at 0% -5%,rgba(12,156,107,.07),transparent 60%),
radial-gradient(900px 700px at 100% 0%,rgba(224,97,10,.05),transparent 55%),
linear-gradient(180deg,#f3f6f5,#eef2f0 50%,#f1f5f3)}
html[data-theme="light"] .bg-layers::after{background-image:
linear-gradient(rgba(15,70,50,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,70,50,.05) 1px,transparent 1px)}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(244,248,246,.7))}
html[data-theme="light"] .sb-brand h1{color:#152019}
html[data-theme="light"] .nav-item.active{color:#fff}
html[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,249,248,.82))}
html[data-theme="light"] .dp-presets button.on,html[data-theme="light"] .tp-mode.daily,
html[data-theme="light"] .btn-primary,html[data-theme="light"] .doc-src-tag{color:#fff}
/* ===== In / xuất PDF: nền trắng, chỉ in trang đang xem, ẩn điều khiển ===== */
@media print{
#loginGate{display:none !important}
.sidebar,.tb-filters,#themeBtn,#printBtn,#verTag,.statusbar,#statusBar{display:none !important}
body,.bg-layers::before,.bg-layers::after{background:#fff !important}
.app{display:block}
main{padding:0 !important}
.panel{break-inside:avoid;box-shadow:none !important}
#logFoot .log-tong > td{position:static !important;box-shadow:none !important;
border-top:1px solid #999 !important}
.page{gap:12px}
a[href]::after{content:""}
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px}::-webkit-scrollbar-track{background:transparent}
.bg-layers{position:fixed;inset:0;z-index:-2;pointer-events:none}
.bg-layers::before{content:"";position:absolute;inset:0;background:
radial-gradient(1000px 700px at 0% -5%,rgba(47,201,139,.09),transparent 60%),
radial-gradient(900px 700px at 100% 0%,rgba(233,122,61,.06),transparent 55%),
linear-gradient(180deg,#0a0d0c,#0c0f0e 50%,#090c0b)}
.bg-layers::after{content:"";position:absolute;inset:0;opacity:.5;background-image:
linear-gradient(rgba(150,180,168,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,168,.03) 1px,transparent 1px);
background-size:46px 46px;mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 40%,transparent 100%)}
.app{display:flex;min-height:100vh}
.sidebar{width:236px;flex-shrink:0;border-right:1px solid var(--border);background:linear-gradient(180deg,rgba(9,14,12,.7),rgba(7,11,10,.5));backdrop-filter:blur(10px);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:17px 16px 15px;border-bottom:1px solid var(--border)}
.brand-logo{display:block;width:100%;max-width:190px;height:auto;filter:drop-shadow(0 3px 12px rgba(47,201,139,.20))}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--green),var(--green-deep) 45%,var(--orange) 130%);display:grid;place-items:center;flex-shrink:0;box-shadow:0 8px 20px -6px rgba(47,201,139,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.logo svg{width:24px;height:24px}
.sb-brand h1{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.28rem;letter-spacing:.05em;line-height:1;color:var(--text-strong)}
.sb-brand h1 .pw{color:var(--green)}
.sb-brand p{font-size:.66rem;color:var(--green);margin-top:4px;font-weight:600}
.nav{padding:14px 12px;display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.nav-lab{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);padding:8px 12px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:var(--text-dim);font-size:.88rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.16s;text-align:left;background:none;font-family:inherit;width:100%}
.nav-item svg{width:19px;height:19px;flex-shrink:0;opacity:.8}
.nav-item:hover{color:var(--text);background:var(--surface-2)}
.nav-item.active{color:#04140e;background:linear-gradient(135deg,var(--green-deep),var(--green));font-weight:600;box-shadow:0 6px 16px -6px rgba(47,201,139,.6)}
.nav-item.active svg{opacity:1}
.sb-foot{padding:14px 16px;border-top:1px solid var(--border);font-size:.68rem;color:var(--text-faint);line-height:1.7}
.sb-foot b{color:var(--text-dim)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,2.5vw,30px);background:linear-gradient(180deg,rgba(8,13,11,.92),rgba(8,13,11,.72));backdrop-filter:blur(16px);border-bottom:1px solid var(--border);flex-wrap:wrap}
.tb-title .eyebrow{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.tb-title h2{font-size:1.32rem;font-weight:700;color:var(--text-strong);letter-spacing:-.01em;margin-top:2px}
.tb-util{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}.tb-util .pill{font-size:.72rem;padding:6px 11px}.tb-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex-basis:100%;width:100%;order:3;margin-top:11px;padding-top:11px;border-top:1px solid var(--border)}
.pill.datepick{padding:4px 8px;gap:8px}
.dp-presets{display:flex;gap:3px}
.dp-presets button{font-family:inherit;font-size:.72rem;font-weight:600;color:var(--text-dim);background:transparent;border:1px solid var(--border);padding:5px 9px;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap}
.dp-presets button:hover{color:var(--text);border-color:var(--border-strong)}
.dp-presets button.on{color:#04140e;background:linear-gradient(135deg,var(--green-deep),var(--green));border-color:transparent}
.dq-chip{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:.76rem;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);padding:5px 11px;border-radius:999px;transition:.14s;user-select:none;white-space:nowrap}
.dq-chip:hover{color:var(--text);border-color:var(--border-strong)}
.dq-chip.on{color:#04140e;background:linear-gradient(135deg,var(--green-deep),var(--green));border-color:transparent}
.dq-chip b{color:inherit;font-weight:800}
.dp-div{width:1px;height:18px;background:var(--border-strong)}
.pill.datepick .dp-arrow{color:var(--text-faint);font-size:.8rem}
.pill.datepick select{background:transparent;border:none;color:var(--text);font-family:inherit;font-weight:600;font-size:.8rem;padding:5px 20px 5px 8px;border-radius:8px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 4px center}
.pill.datepick select:hover{background-color:var(--surface-3)}
.pill.datepick select:disabled{opacity:.4;cursor:default;background-image:none;padding-right:8px}
.pill.datepick input[type=date],.cmp-period input[type=date]{background:var(--surface-3);border:1px solid var(--border);color:var(--text);font-family:inherit;font-weight:600;font-size:.8rem;padding:4px 8px;border-radius:8px;outline:none;color-scheme:dark;cursor:pointer}
.pill.datepick input[type=date]:hover,.cmp-period input[type=date]:hover{border-color:var(--border-strong)}
.pill.datepick input[type=date]:focus,.cmp-period input[type=date]:focus{border-color:var(--green-deep)}
.pill.timepick{padding:4px 8px;gap:3px}
.pill.timepick select{background:var(--surface-3);border:1px solid var(--border);color:var(--text);font-family:inherit;font-weight:600;font-size:.8rem;padding:4px 18px 4px 7px;border-radius:8px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 3px center}
.pill.timepick select:hover{border-color:var(--border-strong)}
.pill.timepick select:focus{border-color:var(--green-deep)}
.pill.timepick .tp-colon{color:var(--text-dim);font-weight:700;margin:0 1px}
.tp-clear{background:transparent;border:none;color:var(--text-faint);cursor:pointer;font-size:.82rem;line-height:1;padding:3px 5px;border-radius:6px}
.tp-clear:hover{color:var(--text);background:var(--surface-3)}
.tp-mode{font-family:inherit;font-size:.72rem;font-weight:600;color:var(--text-dim);background:transparent;border:1px solid var(--border);padding:5px 8px;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap}
.tp-mode:hover{color:var(--text);border-color:var(--border-strong)}
.tp-mode.daily{color:#04140e;background:linear-gradient(135deg,var(--green-deep),var(--green));border-color:transparent}
@media(max-width:720px){.dp-presets button{padding:5px 7px}.pill.datepick{flex-wrap:wrap}}
.doc-src-lab{font-size:.82rem;color:var(--text-dim);font-weight:500;margin:4px 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ek-copy{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:.73rem;font-weight:600;padding:5px 11px;border-radius:8px;border:1px solid var(--green);background:rgba(47,201,139,.1);color:var(--green);cursor:pointer;transition:.15s}
.ek-copy:hover{background:rgba(47,201,139,.2)}
.doc-note{margin-top:18px;background:rgba(47,201,139,.05);border:1px solid rgba(47,201,139,.22);border-left:3px solid var(--green);border-radius:10px;padding:13px 16px;font-size:.78rem;color:var(--text-dim);line-height:1.7}
.doc-note b{color:var(--text)}
.doc-note .tag{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.7rem;background:var(--surface-3);color:var(--green);padding:1px 7px;border-radius:6px;white-space:nowrap}
.doc-src-tag{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#04140e;background:var(--green);padding:3px 8px;border-radius:6px}
.doc-src-tag.alt{background:var(--blue)}
.combo-legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.combo-legend span,.chart-toggle{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-dim);font-weight:500;white-space:nowrap}
.combo-legend i{width:12px;height:12px;display:inline-block;flex:none}
.combo-legend i.bar{background:var(--green);border-radius:3px}
.combo-legend i.dot{background:var(--amber);border-radius:50%}
.combo-legend i.line{width:18px;height:0;border-top:2px solid var(--violet);border-radius:0;background:transparent}
.chart-toggle{font-family:inherit;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);padding:5px 10px;cursor:pointer;transition:.14s}
.chart-toggle:hover{color:var(--text);border-color:var(--border-strong)}
.chart-toggle.on{color:var(--text);border-color:color-mix(in srgb,var(--green) 34%,var(--border));background:color-mix(in srgb,var(--green) 8%,var(--surface-2))}
.chart-toggle:not(.on){opacity:.5}
.chart-toggle:not(.on) i{filter:grayscale(1);opacity:.7}
.pill{display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);font-size:.76rem;color:var(--text-dim);font-weight:500;white-space:nowrap}
.pill svg{width:14px;height:14px;color:var(--green);opacity:.85}
.pill b{color:var(--text);font-weight:600}
.pill.data{border-color:rgba(47,201,139,.28);background:rgba(47,201,139,.06)}
.pill.data b{color:var(--green)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:.16s}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#04140e;box-shadow:0 6px 16px -6px rgba(47,201,139,.6)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{background:var(--surface-2);border-color:var(--border);color:var(--text-dim)}
.btn-ghost:hover{color:var(--text);border-color:var(--border-strong)}
main{padding:24px clamp(16px,2.5vw,30px) 50px;max-width:1480px;width:100%;margin:0 auto}
.page{display:none;flex-direction:column;gap:20px;animation:fade .4s}
.page.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.banner{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:14px;background:linear-gradient(135deg,rgba(230,176,74,.08),rgba(233,122,61,.04));border:1px solid rgba(230,176,74,.2);font-size:.84rem;color:var(--text-dim)}
.banner svg{width:18px;height:18px;color:var(--amber);flex-shrink:0}
.banner b{color:var(--text)}
.banner .x{margin-left:auto;cursor:pointer;color:var(--text-faint);font-size:1.1rem;line-height:1;padding:0 4px}
.panel{background:linear-gradient(165deg,var(--surface),var(--bg-2));border:1px solid var(--border);border-radius:var(--r);padding:22px;position:relative;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ph-l{display:flex;align-items:center;gap:11px}
.ph-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--surface-3);border:1px solid var(--border);color:var(--green)}
.ph-ico svg{width:18px;height:18px}
.panel-head h3{font-size:1.02rem;font-weight:700;color:var(--text-strong);letter-spacing:-.01em}
.ph-sub{font-size:.74rem;color:var(--text-faint);margin-top:1px;font-weight:500}
.ph-badge{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.68rem;color:var(--text-dim);padding:4px 9px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
#kpi-sessions,#kpi-chargers{grid-template-columns:repeat(3,1fr)}
.kpi{background:linear-gradient(160deg,var(--surface),var(--bg-2));border:1px solid color-mix(in srgb,var(--frame,var(--accent,var(--green))) 38%,var(--border));border-left:4px solid var(--frame,var(--accent,var(--green)));border-radius:var(--r);padding:17px 18px;position:relative;overflow:hidden;animation:rise .55s both;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--frame,var(--accent,var(--green))) 8%,transparent)}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--frame,var(--accent,var(--green))),transparent 86%);opacity:.95}
.kpi::after{content:"";position:absolute;right:-34px;top:-34px;width:124px;height:124px;border-radius:50%;background:radial-gradient(circle,var(--frame,var(--accent,var(--green))),transparent 70%);opacity:.06}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kpi:hover{border-color:color-mix(in srgb,var(--frame,var(--accent,var(--green))) 58%,var(--border-strong));transform:translateY(-3px);transition:.25s;box-shadow:0 12px 26px -24px var(--frame,var(--accent,var(--green))),inset 0 0 0 1px color-mix(in srgb,var(--frame,var(--accent,var(--green))) 14%,transparent)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.kpi-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--frame,var(--accent,var(--green))) 14%,transparent);color:var(--frame,var(--accent,var(--green)))}
.kpi-ico svg{width:19px;height:19px}
.kpi-trend{display:flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;padding:4px 8px;border-radius:7px}
.kpi-trend svg{width:11px;height:11px}
.trend-up{color:var(--green);background:rgba(47,201,139,.1)}
.trend-down{color:var(--red);background:rgba(230,106,106,.1)}
.trend-flat{color:var(--text-dim);background:var(--surface-3)}
.kpi-label{font-size:.77rem;color:var(--text-dim);font-weight:500;margin-bottom:6px}
.kpi-value{display:flex;align-items:baseline;gap:5px}
.kpi-num{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:2.05rem;color:var(--text-strong);line-height:1}
.kpi-unit{font-size:.82rem;color:var(--text-dim);font-weight:600}
.kpi-sub{font-size:.73rem;color:var(--text-faint);margin-top:8px}
.mini-bar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:10px}
.mini-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--frame,var(--accent,var(--green))),var(--green-soft));width:0;transition:width 1s cubic-bezier(.2,.8,.25,1) .25s}
.row-2-1{display:grid;grid-template-columns:1.85fr 1fr;gap:18px}
.row-1-1{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sec{display:flex;align-items:center;gap:12px;margin:8px 2px -8px;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);user-select:none}
.sec::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--green);opacity:.75;flex-shrink:0}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-strong),transparent)}
.cmp-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:18px}
.cmp-period{display:flex;align-items:center;gap:8px}
.cmp-period select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 9px;font-family:inherit;font-size:.84rem}
.cmp-arrow{color:var(--text-faint)}
.cmp-tag{font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.04em}
.cmp-tag.a{background:rgba(47,201,139,.16);color:var(--green)}
.cmp-tag.b{background:rgba(135,152,224,.16);color:#8798e0}
.cmp-vs{font-weight:800;color:var(--text-faint);font-size:.8rem}
.cmp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.cmp-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px}
.cmp-card .cl{font-size:.8rem;color:var(--text-dim);margin-bottom:9px}
.cmp-card .cvs{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cmp-card .va{font-size:1.32rem;font-weight:700;color:var(--green)}
.cmp-card .vb{font-size:1.05rem;font-weight:600;color:#8798e0}
.cmp-card .dl{margin-top:8px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px}
.cmp-card .up{background:rgba(47,201,139,.14);color:var(--green)}
.cmp-card .down{background:rgba(255,120,120,.14);color:#ff8a8a}
.cbar-row{display:grid;grid-template-columns:118px 1fr 118px 96px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border)}
.cbar-row:last-child{border-bottom:none}
.cbar-l{font-size:.78rem;color:var(--text-dim);font-weight:600}
.cbar{height:11px;background:var(--surface-3);border-radius:6px;overflow:hidden;margin:2.5px 0}
.cbar i{display:block;height:100%;border-radius:6px}
.cbar i.a{background:linear-gradient(90deg,#16a36e,#2fc98b)}
.cbar i.b{background:linear-gradient(90deg,#5f7ddb,#8798e0)}
.cbar-v{display:flex;flex-direction:column;gap:1px;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.72rem;text-align:right}
.cbar-v .va{color:var(--green);font-weight:700}
.cbar-v .vb{color:#8798e0;font-weight:600}
.cbar-d{text-align:right}
.cbar-d .dl{font-size:.74rem;font-weight:700;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;white-space:nowrap}
.cbar-d .up{background:rgba(47,201,139,.14);color:var(--green)}
.cbar-d .down{background:rgba(255,120,120,.14);color:#ff8a8a}
.cbar-d .flat{background:var(--surface-3);color:var(--text-faint)}
@media(max-width:640px){.cbar-row{grid-template-columns:92px 1fr 96px 78px;gap:7px}.cbar-l{font-size:.7rem}}
.cmp-card .flat{background:var(--surface-2);color:var(--text-faint)}
@media(max-width:980px){.cmp-kpis{grid-template-columns:repeat(2,1fr)}}
.pill-eval{padding:2px 9px;border-radius:6px;font-size:.74rem;font-weight:600}
.pe-ok{background:rgba(47,201,139,.14);color:var(--green)}
.pe-watch{background:rgba(230,176,74,.16);color:var(--amber)}
.pe-warn{background:rgba(255,120,120,.16);color:#ff8a8a}
.pe-na{background:var(--surface-2);color:var(--text-faint)}
.chart-wrap{position:relative;height:300px}
.chart-wrap.sm{height:250px}
.stat-list{display:flex;flex-direction:column;margin-top:8px}
.stat-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--border)}
.stat-row:last-child{border-bottom:none}
.stat-row .sl{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--text-dim);font-weight:500}
.swatch{width:11px;height:11px;border-radius:4px;flex-shrink:0}
.stat-row .sv{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.04rem;color:var(--text)}
.stat-row .sv small{font-size:.71rem;color:var(--text-faint);font-weight:500;margin-left:4px}
.table-scroll{overflow:auto;max-height:440px;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:560px}
thead th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-weight:600;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;padding:10px 12px;border-bottom:1px solid var(--border);z-index:1}
thead th.num,thead th.mono{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
tbody td{padding:11px 12px;border-bottom:1px solid rgba(150,180,168,.05);color:var(--text-dim);vertical-align:middle;white-space:nowrap}
tbody tr:hover{background:rgba(47,201,139,.025)}
.mono{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-weight:500;color:var(--text);font-size:.8rem}
.route-tag{display:inline-block;font-size:.71rem;font-weight:600;color:var(--blue);background:rgba(91,168,232,.1);padding:2px 9px;border-radius:6px}
.soc-cell{display:flex;align-items:center;gap:9px;min-width:118px}
.soc-cell .track{flex:1;height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.soc-cell .track i{display:block;height:100%;border-radius:4px}
.soc-cell b{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:.9rem;width:34px;text-align:right}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.73rem;font-weight:600;padding:4px 10px;border-radius:7px}
.badge .d{width:7px;height:7px;border-radius:50%}
.b-charging{color:var(--green);background:rgba(47,201,139,.1)}
.b-running{color:var(--blue);background:rgba(91,168,232,.1)}
.b-ready{color:var(--text-dim);background:var(--surface-3)}
.b-maint{color:var(--amber);background:rgba(230,176,74,.1)}
.b-fault{color:var(--red);background:rgba(230,106,106,.1)}
.barcell{display:flex;align-items:center;gap:9px;min-width:130px}
.barcell .track{flex:1;height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.barcell .track i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--green-soft))}
.num{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;color:var(--text)}
.charger-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.charger{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:14px;border-left:3px solid var(--st);transition:.2s}
.charger:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface-3)}
.ch-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ch-id{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-weight:600;font-size:.9rem;color:var(--text-strong)}
.ch-pow{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:.8rem;color:var(--text-dim);background:var(--surface-3);padding:2px 8px;border-radius:6px}
.ch-status{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;color:var(--st);margin-bottom:11px}
.ch-status .d{width:8px;height:8px;border-radius:50%;background:var(--st)}
.ch-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ch-stat{background:var(--bg);border-radius:8px;padding:8px 9px}
.ch-stat.rev{grid-column:1/-1}
.ch-stat .l{font-size:.64rem;color:var(--text-faint);margin-bottom:2px}
.ch-stat .v{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.02rem;color:var(--text)}
.ch-up{margin-top:9px}
.ch-up .lab{display:flex;justify-content:space-between;font-size:.66rem;color:var(--text-faint);margin-bottom:4px}
.ch-up .lab b{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;color:var(--st);font-size:.78rem}
.ch-up .track{height:5px;border-radius:4px;background:var(--bg);overflow:hidden}
.ch-up .track i{display:block;height:100%;border-radius:4px;background:var(--st)}
.dropzone{border:2px dashed var(--border-strong);border-radius:18px;padding:42px 24px;text-align:center;background:var(--surface);transition:.2s;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--green);background:rgba(47,201,139,.04)}
.dropzone .di{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;background:rgba(47,201,139,.1);color:var(--green)}
.dropzone .di svg{width:32px;height:32px}
.dropzone h3{font-size:1.12rem;color:var(--text-strong);font-weight:700;margin-bottom:6px}
.dropzone p{font-size:.85rem;color:var(--text-dim);margin-bottom:18px}
.dropzone .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.upload-status{margin-top:16px;padding:14px 18px;border-radius:13px;font-size:.85rem;display:none;align-items:center;gap:11px}
.upload-status svg{width:18px;height:18px;flex-shrink:0}
.upload-status.ok{display:flex;background:rgba(47,201,139,.08);border:1px solid rgba(47,201,139,.25);color:var(--green-soft)}
.upload-status.err{display:flex;background:rgba(230,106,106,.08);border:1px solid rgba(230,106,106,.25);color:#ff9a9a}
/* ===== Khoá TOÀN TRANG nhập dữ liệu (chỉ người có mật khẩu mới vào/đẩy/xoá được) ===== */
.page-lock{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
padding:56px 28px;border-radius:var(--r);cursor:pointer;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
/* khi trang data bị khoá: ẩn mọi panel, chỉ hiện thẻ khoá */
.page[data-page="data"].locked > .panel{display:none}
.page[data-page="data"].locked > .page-lock{display:flex}
.page[data-page="data"].locked > .unlock-bar{display:none}
.page-lock .pl-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(230,176,74,.12);color:var(--amber)}
.page-lock .pl-ic svg{width:34px;height:34px}
.page-lock h3{font-size:1.25rem;color:var(--text-strong);font-weight:700}
.page-lock p{font-size:.88rem;color:var(--text-dim);max-width:440px;line-height:1.65}
.page-lock .pl-cta{margin-top:6px;font-size:.92rem;font-weight:600;color:#04140d;background:var(--green-deep);border:1px solid transparent;padding:12px 26px;border-radius:12px;cursor:pointer;transition:.15s}
.page-lock .pl-cta:hover{background:var(--green)}
.unlock-bar{display:none;align-items:center;gap:10px;margin-bottom:18px;padding:11px 15px;border-radius:12px;font-size:.84rem;
background:rgba(47,201,139,.07);border:1px solid rgba(47,201,139,.22);color:var(--green-soft)}
.unlock-bar.on{display:flex}
.unlock-bar svg{width:16px;height:16px;flex-shrink:0}
.unlock-bar .ub-sp{flex:1}
.unlock-bar button{font:inherit;font-weight:600;cursor:pointer;color:var(--text-dim);background:transparent;border:1px solid var(--border-strong);padding:6px 12px;border-radius:9px}
.unlock-bar button:hover{color:var(--text);border-color:var(--green)}
/* modal nhập mật khẩu */
.pass-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,6,5,.66);backdrop-filter:blur(4px)}
.pass-modal.on{display:flex}
/* ===== CỔNG ĐĂNG NHẬP TOÀN MÀN HÌNH (chặn toàn bộ nội dung trước khi đăng nhập) ===== */
#loginGate{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg);background-image:radial-gradient(900px 500px at 70% -10%,rgba(47,201,139,.09),transparent 60%),radial-gradient(700px 420px at 10% 110%,rgba(91,168,232,.07),transparent 60%)}
#loginGate.off{display:none}
body.gated{overflow:hidden}
.gate-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border-strong);border-radius:20px;box-shadow:var(--shadow);padding:28px 26px;text-align:center}
.gate-card .g-ic{width:54px;height:54px;border-radius:15px;margin:0 auto 14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(47,201,139,.16),rgba(47,201,139,.05));border:1px solid rgba(47,201,139,.35);color:var(--green)}
.gate-card .g-ic svg{width:26px;height:26px}
.gate-card h1{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:.04em;color:var(--text-strong);margin-bottom:3px}
.gate-card .g-sub{font-size:.8rem;color:var(--text-dim);margin-bottom:18px;line-height:1.55}
.gate-card input{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:11px;color:var(--text-strong);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:.9rem;padding:11px 13px;outline:none;margin-bottom:10px;text-align:left}
.gate-card input:focus{border-color:var(--green)}
.gate-err{display:none;font-size:.78rem;color:#ff8a8a;background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.3);border-radius:9px;padding:8px 11px;margin-bottom:10px;text-align:left;line-height:1.5}
.gate-err.on{display:block}
.gate-btn{width:100%;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:.9rem;font-weight:700;padding:11px 0;border-radius:11px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--green),#14b87d);color:#04140e;transition:.15s}
.gate-btn:hover{filter:brightness(1.08)}
.gate-btn:disabled{opacity:.6;cursor:wait}
.gate-btn.ghost{background:transparent;border:1px solid var(--border-strong);color:var(--text-dim);font-weight:600;margin-top:9px}
.gate-btn.ghost:hover{border-color:var(--green);color:var(--green);filter:none}
.gate-note{font-size:.71rem;color:var(--text-faint);margin-top:15px;line-height:1.6}
#gateChecking,#gateBlocked{display:none}
#loginGate.checking #gateChecking{display:block}
#loginGate.checking #gateForm,#loginGate.checking #gateBlocked{display:none}
#loginGate.blocked #gateBlocked{display:block}
#loginGate.blocked #gateForm,#loginGate.blocked #gateChecking{display:none}
.pass-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border-strong);border-radius:18px;box-shadow:var(--shadow);padding:24px}
.pass-card .pc-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:rgba(47,201,139,.1);color:var(--green)}
.pass-card .pc-ic svg{width:26px;height:26px}
.pass-card h3{font-size:1.1rem;color:var(--text-strong);font-weight:700;margin-bottom:5px}
.pass-card p{font-size:.82rem;color:var(--text-dim);margin-bottom:16px;line-height:1.6}
.pass-card input{width:100%;font:inherit;font-size:.95rem;letter-spacing:.04em;color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:11px;padding:12px 14px;outline:none;transition:.15s}
.pass-card input:focus{border-color:var(--green);background:var(--surface-3)}
.pass-card .pc-err{display:none;color:#ff9a9a;font-size:.78rem;margin-top:8px}
.pass-card .pc-err.on{display:block}
.pass-card .pc-row{display:flex;gap:10px;margin-top:18px}
.pass-card .pc-row button{flex:1;font:inherit;font-weight:600;cursor:pointer;padding:11px;border-radius:11px;border:1px solid var(--border-strong);transition:.15s}
.pass-card .pc-cancel{background:transparent;color:var(--text-dim)}
.pass-card .pc-cancel:hover{color:var(--text)}
.pass-card .pc-ok{background:var(--green-deep);border-color:transparent;color:#04140d}
.pass-card .pc-ok:hover{background:var(--green)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.doc{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:18px}
.doc h4{font-size:.92rem;color:var(--text-strong);font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.doc h4 .tag{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.66rem;background:var(--surface-3);color:var(--green);padding:2px 7px;border-radius:6px}
.doc .dd{font-size:.74rem;color:var(--text-faint);margin-bottom:12px}
.doc ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.doc li{font-size:.78rem;color:var(--text-dim);display:flex;gap:8px;align-items:baseline}
.doc li b{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.74rem;color:var(--text);background:var(--bg);padding:1px 7px;border-radius:5px;white-space:nowrap}
.doc li .req{color:var(--green);font-size:.8rem}.doc li .opt{color:var(--text-faint);font-size:.8rem}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pv{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px}
.pv .pl{font-size:.71rem;color:var(--text-faint);margin-bottom:6px}
.pv .pvv{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.5rem;color:var(--text-strong);line-height:1}
.pv .pvv span{font-size:.74rem;color:var(--text-dim);font-weight:600}
.hist{display:flex;flex-direction:column;gap:9px}
.hist-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border)}
.hist-row .hi{width:32px;height:32px;border-radius:9px;background:rgba(47,201,139,.1);color:var(--green);display:grid;place-items:center;flex-shrink:0}
.hist-row .hi svg{width:16px;height:16px}
.hist-row .ht{flex:1;min-width:0}
.hist-row .hn{font-size:.83rem;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.hist-row .hm{font-size:.71rem;color:var(--text-faint);font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;margin-top:2px}
.hist-row .hr{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;color:var(--green);font-size:1rem;text-align:right}
.hist-row .hr small{display:block;font-size:.66rem;color:var(--text-faint);font-weight:500;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.empty{text-align:center;color:var(--text-faint);font-size:.84rem;padding:24px}
.pill.sel{padding:4px 8px 4px 13px}.pill-lab{font-size:.7rem;font-weight:600;color:var(--text-dim);opacity:.7;white-space:nowrap}.pill.sel select{max-width:136px;text-overflow:ellipsis}.pill.custpick{padding:4px 8px;gap:8px}.cust-ent{display:flex;align-items:center;gap:6px}.cust-ent.on .pill-lab{color:var(--green);opacity:1}@media(max-width:640px){.pill.sel select{max-width:96px}}
.pill.sel select{background:transparent;border:none;color:var(--text);font-family:inherit;font-weight:600;font-size:.82rem;padding:5px 22px 5px 6px;border-radius:8px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 4px center}
.pill.sel select option{background:var(--surface);color:var(--text)}
.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:15px}
.station-card{background:var(--surface-2);border:1px solid var(--border);border-radius:15px;padding:17px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.station-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--green))}
.station-card:hover{transform:translateY(-3px);border-color:var(--ac,var(--green));background:var(--surface-3)}
.station-card.cur{border-color:var(--ac,var(--green));box-shadow:0 0 0 1px var(--ac,var(--green)),0 14px 30px -16px rgba(0,0,0,.6)}
.sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.sc-name{font-size:1.02rem;font-weight:700;color:var(--text-strong);line-height:1.2}
.sc-loc{font-size:.72rem;color:var(--text-faint);margin-top:3px;display:flex;align-items:center;gap:5px}
.sc-loc svg{width:12px;height:12px;flex-shrink:0}
.sc-on{font-size:.68rem;font-weight:600;padding:4px 9px;border-radius:7px;white-space:nowrap;color:var(--ac,var(--green));background:color-mix(in srgb,var(--ac,var(--green)) 14%,transparent)}
.sc-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
.sc-stat{background:var(--bg);border-radius:9px;padding:9px 10px}
.sc-stat .l{font-size:.65rem;color:var(--text-faint);margin-bottom:3px}
.sc-stat .v{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.12rem;color:var(--text);line-height:1}
.sc-stat .v span{font-size:.66rem;color:var(--text-dim);font-weight:600}
.sc-up .lab{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-faint);margin-bottom:5px}
.sc-up .lab b{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;color:var(--ac,var(--green));font-size:.82rem}
.sc-up .track{height:6px;border-radius:4px;background:var(--bg);overflow:hidden}
.sc-up .track i{display:block;height:100%;border-radius:4px;background:var(--ac,var(--green))}
.sc-foot{margin-top:13px;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--ac,var(--green))}
.sc-foot svg{width:15px;height:15px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface-3);border:1px solid var(--green);color:var(--green-soft);padding:13px 22px;border-radius:13px;font-size:.86rem;font-weight:500;box-shadow:0 16px 40px -12px rgba(0,0,0,.7);z-index:100;opacity:0;transition:.35s;display:flex;align-items:center;gap:10px}
.toast svg{width:18px;height:18px}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media(max-width:1180px){.kpi-grid{grid-template-columns:repeat(2,1fr)}#kpi-sessions,#kpi-chargers{grid-template-columns:repeat(2,1fr)}.row-2-1,.row-1-1{grid-template-columns:1fr}}
@media(max-width:920px){
.app{flex-direction:column}
.sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}
.sb-brand{border-bottom:none;border-right:1px solid var(--border);padding:14px 16px;flex-shrink:0}
.sb-brand p{display:none}
.brand-logo{width:auto;max-width:140px;max-height:30px}
.nav{flex-direction:row;padding:10px;flex:1;gap:6px;min-height:auto;overflow-y:visible}.nav-lab,.sb-foot{display:none}
.nav-item{white-space:nowrap;padding:9px 12px}.nav-item span.t{display:none}
.nav-item svg{width:20px;height:20px}.nav-item.active span.t{display:inline}
}
.ch-station{font-size:.66rem;color:var(--text-faint);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:500;margin:-2px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.ch-station svg{width:11px;height:11px;opacity:.8;flex-shrink:0}
.assum{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);font-size:.72rem;line-height:1.7;color:var(--text-faint);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.assum b{color:var(--text-dim);font-weight:600;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.7rem}
/* ===== Phân tích & Xu hướng ===== */
.tr-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-tag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:500;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);padding:7px 12px;border-radius:10px;white-space:nowrap}
.log-pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.log-pager button{font-family:inherit;font-size:.8rem;font-weight:600;min-width:34px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);cursor:pointer;transition:.15s}
.log-pager button:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}
.log-pager button.cur{background:linear-gradient(140deg,var(--green),var(--green-deep));color:#04140e;border-color:transparent;cursor:default}
.log-pager button:disabled{opacity:.4;cursor:not-allowed}
.log-pager .ell{color:var(--text-faint);padding:0 4px;font-weight:600}
.tr-tag svg{width:14px;height:14px;color:var(--green);opacity:.9;flex-shrink:0}
.tr-tag b{color:var(--text);font-weight:700;margin-left:1px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.seg button{font-family:inherit;font-size:.77rem;font-weight:600;color:var(--text-dim);background:none;border:none;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{color:#04140e;background:linear-gradient(135deg,var(--green-deep),var(--green));box-shadow:0 5px 13px -6px rgba(47,201,139,.65)}
.tr-sel{font-family:inherit;font-size:.77rem;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:7px 11px;cursor:pointer;outline:none}
.tr-sel:hover{border-color:var(--border-strong)}
.heat-scroll{overflow-x:auto;padding-bottom:6px;margin-top:2px}
.heat{display:grid;grid-template-columns:116px repeat(24,minmax(24px,1fr)) 50px;gap:3px;min-width:780px}
.heat.charger-heat{grid-template-columns:154px repeat(24,minmax(28px,1fr)) 62px;min-width:980px}
.heat .hh{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.58rem;color:var(--text-faint);text-align:center;padding:1px 0 3px;font-weight:500}
.heat .hcorner,.heat .htb{font-size:.62rem;color:var(--text-faint);display:flex;align-items:flex-end;justify-content:center;font-weight:600;padding-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.heat .hcorner{justify-content:flex-start}
.heat .rlab{font-size:.78rem;color:var(--text-dim);font-weight:600;display:flex;align-items:center;white-space:nowrap;padding-right:8px;overflow:hidden;text-overflow:ellipsis}
.heat .rlab.stack{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.15}
.heat .rlab.stack b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:.76rem;font-weight:700}
.heat .rlab.stack small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--text-faint);font-size:.58rem;font-weight:600}
.heat .cell{height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.59rem;font-weight:600;color:#04140e;transition:transform .1s,box-shadow .1s;border:1px solid transparent}
.heat .cell:hover{transform:scale(1.14);border-color:rgba(255,255,255,.3);position:relative;z-index:3;box-shadow:0 6px 16px -4px rgba(0,0,0,.65)}
.heat .cell.z{background:rgba(150,180,168,.04);color:var(--text-faint);font-weight:400}
.heat .tb{font-weight:700;border:1px solid var(--border-strong);background:var(--surface-3);color:var(--text);font-size:.62rem}
.heat-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:15px;font-size:.72rem;color:var(--text-dim);align-items:center}
.heat-legend .lg{display:flex;align-items:center;gap:7px}
.heat-legend .sw{width:15px;height:15px;border-radius:4px;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}
.heat-legend .lgcap{font-size:.7rem;color:var(--text-faint);font-weight:600;margin-right:2px}
.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.insight{display:flex;gap:13px;padding:15px 16px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--ic,var(--green))}
.insight .ii{width:31px;height:31px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-3);color:var(--ic,var(--green))}
.insight .ii svg{width:17px;height:17px}
.insight .it{font-size:.87rem;font-weight:700;color:var(--text-strong);margin-bottom:3px;letter-spacing:-.01em}
.insight .ib{font-size:.79rem;color:var(--text-dim);line-height:1.55}
.insight .ib b{color:var(--green-soft);font-weight:700}
.peak-list .barcell{min-width:96px}
@media(max-width:1180px){.insight-grid{grid-template-columns:1fr}}
/* ===================== RESPONSIVE MOBILE (≤680px): đầu trang gọn, KPI 2 cột ===================== */
@media(max-width:680px){
.topbar{padding:9px 12px;gap:8px}
.eyebrow{font-size:.55rem;letter-spacing:.14em;margin-bottom:2px}
.tb-title h2{font-size:1.16rem}
.tb-util{gap:6px;row-gap:6px}.tb-filters{gap:6px;row-gap:6px;margin-top:8px;padding-top:8px}
.pill{padding:6px 9px;font-size:.69rem;gap:6px;border-radius:9px}
.pill svg{width:13px;height:13px}
.pill select{font-size:.72rem}
.dp-presets button{padding:4px 8px;font-size:.64rem}
.pill input[type=date]{font-size:.69rem;width:116px;min-width:0;padding:2px}
/* app.js ẩn input và vẽ nút .xdt-trig thay thế — rule trên là code chết, bù ở đây */
.pill.datepick .xdt-trig{font-size:.69rem;padding:3px 6px;gap:4px}
.page{gap:12px}
.panel{padding:14px 13px;border-radius:13px}
.panel-head{margin-bottom:10px;gap:9px}
.ph-ico{width:30px;height:30px}.ph-ico svg{width:15px;height:15px}
.panel-head h3{font-size:.88rem}
.kpi{padding:11px 12px;border-radius:12px}
.kpi-top{margin-bottom:6px}
.kpi-ico{width:26px;height:26px;border-radius:8px}.kpi-ico svg{width:14px;height:14px}
.kpi-label{font-size:.64rem;margin-bottom:3px}
.kpi-num{font-size:1.4rem}
.kpi-unit{font-size:.64rem}
.kpi-sub{font-size:.6rem;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-wrap{height:230px}.chart-wrap.sm{height:200px}
.table-scroll{overflow-x:auto;margin:0 -13px;padding:0 13px}
.table-scroll table{font-size:.74rem}
.table-scroll th{font-size:.6rem}
.table-scroll td,.table-scroll th{padding:8px 9px}
}
@media(max-width:560px){
.combo-legend{width:100%;margin-top:6px}
.kpi-grid{grid-template-columns:repeat(2,1fr);gap:9px}
#kpi-sessions,#kpi-chargers{grid-template-columns:repeat(2,1fr);gap:9px}
}
/* ═══════════ block 3 ═══════════ */
/* ===== V2: trình bày chuyên nghiệp, rõ ràng ===== */
:root{--r:14px;--shadow:0 10px 28px -20px rgba(0,0,0,.5)}
html[data-theme="light"]{--shadow:0 10px 24px -20px rgba(20,60,45,.25)}
a{color:var(--green)}a:hover{color:var(--green-soft)}
.bg-layers::before{background:linear-gradient(180deg,var(--bg),var(--bg-2)) !important}
.bg-layers::after{opacity:.25}
/* Sidebar & điều hướng */
.sidebar{background:var(--bg-2)}
html[data-theme="light"] .sidebar{background:#fbfdfc}
.nav-item{border-radius:10px}
.nav-item.active{background:var(--green-deep);color:#fff;box-shadow:none}
html[data-theme="light"] .nav-item.active{background:var(--green-deep);color:#fff}
.sb-brand h1{letter-spacing:.02em}
/* Topbar */
.tb-title .eyebrow{color:var(--text-faint);letter-spacing:.18em;font-size:.66rem}
.tb-title h2{font-size:1.42rem;letter-spacing:-.015em}
/* Panel phẳng, gọn gàng */
.panel{background:var(--surface);box-shadow:var(--shadow)}
.panel-head h3{font-size:1rem}
.ph-ico{border-radius:8px}
/* KPI: con số là nhân vật chính */
.kpi{background:var(--surface);box-shadow:none;border-left-width:3px}
.kpi::before,.kpi::after{display:none}
.kpi:hover{transform:none;box-shadow:var(--shadow)}
.kpi-num{font-size:1.84rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.kpi-label{font-size:.75rem}
/* Nhãn mục */
.sec{letter-spacing:.22em;font-size:.72rem}
.sec::before{width:14px}
/* Bảng số liệu */
thead th{font-size:.65rem;letter-spacing:.08em}
.num,.mono,.stat-row .sv,.pv .pvv,.hist-row .hr,.cbar-v{font-variant-numeric:tabular-nums lining-nums}
.stat-row .sv{font-size:.98rem}
/* Nút & trạng thái chọn: nền xanh đậm chữ trắng, bỏ gradient */
.btn-primary{background:var(--green-deep);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--green);color:#06130d;transform:none;filter:none}
.dp-presets button.on,.dq-chip.on,.seg button.on,.tp-mode.daily,.log-pager button.cur{background:var(--green-deep);color:#fff;box-shadow:none}
html[data-theme="light"] .dp-presets button.on,html[data-theme="light"] .tp-mode.daily,html[data-theme="light"] .btn-primary{color:#fff}
.gate-btn{background:var(--green-deep);color:#fff}
.gate-btn:hover{background:var(--green);color:#06130d;filter:none}
.pass-card .pc-ok{color:#fff}.pass-card .pc-ok:hover{color:#06130d}
.page-lock .pl-cta{color:#fff}.page-lock .pl-cta:hover{color:#06130d}
/* Thẻ trạm / trụ */
.station-card,.charger{border-radius:13px}
.station-card:hover{transform:translateY(-2px)}
.toast{box-shadow:0 14px 34px -16px rgba(0,0,0,.6)}
/* ═══════════ block 4 ═══════════ */
#vLoad{position:fixed;inset:0;z-index:100000;background:#0a0d0c;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease}#vLoad.off{opacity:0;pointer-events:none}.vl-box{text-align:center;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}.vl-logo{font-weight:800;letter-spacing:.14em;color:#2fc98b;font-size:1.02rem}.vl-sub{color:#8aa79b;font-size:.78rem;margin-top:7px}.vl-spin{width:26px;height:26px;border:3px solid rgba(47,201,139,.22);border-top-color:#2fc98b;border-radius:50%;margin:15px auto 0;animation:vlr .9s linear infinite}@keyframes vlr{to{transform:rotate(360deg)}}
/* ═══════════ block 5 ═══════════ */
.dp2{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
@media(max-width:1100px){.dp2{grid-template-columns:1fr}}
details.panel>summary{list-style:none;cursor:pointer;user-select:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary .panel-head{margin-bottom:0}
details.panel[open]>summary .panel-head{margin-bottom:14px}
.fold-cv{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:transform .18s ease}
details[open] .fold-cv{transform:rotate(180deg)}
details.panel>summary:hover .fold-cv{color:var(--text)}
/* ═══════════ block 6 ═══════════ */
/* ═══════════ Bộ chọn ngày & giờ tùy chỉnh (xdt) ═══════════ */
.xdt-hide{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}
.xdt-trig{display:inline-flex;align-items:center;gap:6px;background:var(--surface-3);border:1px solid var(--border);color:var(--text);font-family:inherit;font-weight:600;font-size:.78rem;padding:4px 10px;border-radius:8px;cursor:pointer;outline:none;transition:border-color .14s,background .14s;white-space:nowrap;line-height:1.4}
.xdt-trig:hover{border-color:var(--border-strong)}
.xdt-trig:focus-visible,.xdt-trig.open{border-color:var(--green-deep);box-shadow:0 0 0 2px rgba(47,201,139,.15)}
.xdt-trig .xdt-ph{color:var(--text-faint);font-weight:500}
@media(max-width:720px){.xdt-trig{font-size:.7rem;padding:3px 8px}}
.xdt-pop{position:fixed;z-index:10500;background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow);padding:12px;user-select:none;max-width:calc(100vw - 16px);opacity:0;transform:translateY(-4px) scale(.985);transition:opacity .13s ease,transform .13s ease}
.xdt-pop.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.xdt-pop{transition:none}}
.xdt-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.xdt-nav{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);cursor:pointer;transition:.14s;padding:0}
.xdt-nav:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
.xdt-nav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.xdt-title{flex:1;text-align:center;background:transparent;border:none;font-family:inherit;font-size:.84rem;font-weight:700;color:var(--text);cursor:pointer;padding:5px 8px;border-radius:8px;transition:.14s}
.xdt-title:hover{background:var(--surface-2)}
.xdt-dow,.xdt-grid{display:grid;grid-template-columns:repeat(7,36px);gap:2px}
.xdt-dow{margin-bottom:2px}
.xdt-dow span{height:20px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--text-faint)}
.xdt-dow span:last-child{color:var(--orange);opacity:.75}
.xdt-day{position:relative;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:9px;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer;transition:background .12s;padding:0}
.xdt-day.out{color:var(--text-faint);font-weight:500}
.xdt-day:not(:disabled):hover{background:var(--surface-3)}
.xdt-day:disabled{opacity:.22;cursor:default}
.xdt-day.today{box-shadow:inset 0 0 0 1px var(--border-strong)}
.xdt-day.in{background:rgba(47,201,139,.13)}
html[data-theme="light"] .xdt-day.in{background:rgba(14,143,99,.12)}
.xdt-day.sel{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#04140e;font-weight:800;box-shadow:none}
html[data-theme="light"] .xdt-day.sel{color:#fff}
.xdt-day .d{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--green)}
.xdt-day.sel .d{background:rgba(4,20,14,.55)}
html[data-theme="light"] .xdt-day.sel .d{background:rgba(255,255,255,.85)}
.xdt-yrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.xdt-yval{font-size:.9rem;font-weight:800;color:var(--text);min-width:58px;text-align:center}
.xdt-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:264px}
.xdt-mon{height:42px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:.76rem;font-weight:600;color:var(--text-dim);cursor:pointer;transition:.14s;padding:0}
.xdt-mon:not(:disabled):hover{color:var(--text);border-color:var(--border-strong)}
.xdt-mon:disabled{opacity:.28;cursor:default}
.xdt-mon.sel{background:linear-gradient(135deg,var(--green-deep),var(--green));border-color:transparent;color:#04140e;font-weight:800}
html[data-theme="light"] .xdt-mon.sel{color:#fff}
.xdt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
.xdt-clear{font-family:inherit;font-size:.7rem;font-weight:600;color:var(--text-dim);background:transparent;border:1px solid var(--border);padding:4px 10px;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap}
.xdt-clear:hover{color:var(--text);border-color:var(--border-strong)}
.xdt-hint{font-size:.66rem;color:var(--text-faint);font-weight:500;text-align:right}
.xdt-hint b{color:var(--green);font-weight:700}
.xdt-leg{display:flex;align-items:center;gap:5px;font-size:.62rem;color:var(--text-faint);margin-top:7px}
.xdt-leg .d{width:4px;height:4px;border-radius:50%;background:var(--green)}
/* ── bộ chọn giờ ── */
.xdt-tp{display:flex;align-items:stretch;gap:11px}
.xdt-tgrp{display:flex;flex-direction:column}
.xdt-tlabel{font-size:.6rem;font-weight:800;letter-spacing:.12em;color:var(--text-faint);text-transform:uppercase;margin-bottom:6px;text-align:center}
.xdt-tlists{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:4px}
.xdt-tlist{position:relative;height:172px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;display:flex;flex-direction:column;gap:2px}
.xdt-tlist::-webkit-scrollbar{width:5px}
.xdt-tlist::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.xdt-tlist.dis{opacity:.3;pointer-events:none}
.xdt-ti{flex:none;width:46px;height:27px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:7px;font-family:inherit;font-size:.76rem;font-weight:600;color:var(--text-dim);cursor:pointer;transition:background .1s;padding:0}
.xdt-ti:hover{background:var(--surface-3);color:var(--text)}
.xdt-ti.sel{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#04140e;font-weight:800}
html[data-theme="light"] .xdt-ti.sel{color:#fff}
.xdt-tdiv{width:1px;background:var(--border);align-self:stretch;margin-top:16px}
.xdt-tbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.xdt-allday{font-family:inherit;font-size:.72rem;font-weight:600;color:var(--text-dim);background:transparent;border:1px solid var(--border);padding:5px 11px;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap}
.xdt-allday:hover{color:var(--text);border-color:var(--border-strong)}
.xdt-allday.on{color:#04140e;background:linear-gradient(135deg,var(--green-deep),var(--green));border-color:transparent}
html[data-theme="light"] .xdt-allday.on{color:#fff}
.xdt-tcolh{font-size:.56rem;font-weight:700;letter-spacing:.08em;color:var(--text-faint);text-align:center;text-transform:uppercase;margin-bottom:3px}
/* ═══════════ v1.7.29 — bộ lọc khách hàng gộp ═══════════ */
.pill.custpick select{max-width:210px}
.pill.sel select optgroup{background:var(--surface);color:var(--text-dim);font-style:normal;font-weight:700;font-size:.7rem}
.pill.sel select optgroup option{color:var(--text);font-weight:500}
/* nhóm Ngày–Giờ luôn kề nhau trên cùng hàng */
.dtwrap{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
/* nén hàng lọc để đủ 1 dòng trên laptop */
.tb-filters{gap:8px}
.pill.datepick{gap:6px}
.dp-presets button{padding:4px 7px;font-size:.7rem}
.pill.datepick input[type=date]{padding:4px 6px;font-size:.76rem}
.pill.timepick select{padding:4px 6px;background-image:none}
.pill.timepick .tp-mode{padding:4px 7px;font-size:.7rem}
@media(max-width:1500px){
.tb-filters .pill>svg{display:none}
.pill.sel{padding-left:9px}
.pill.custpick select{max-width:170px}
}
@media(max-width:1400px){
.tb-filters{gap:6px}
.dp-presets button{padding:4px 5px}
.pill.timepick .tp-mode{padding:4px 6px}
.pill.custpick select{max-width:150px}
}
@media(max-width:1080px){.dtwrap{flex-wrap:wrap}}
@media(max-width:640px){.pill.custpick select{max-width:132px}}
/* v1.7.30 — empty state trang Phân tích */
#trEmpty{display:none;text-align:center;color:var(--text-dim);background:var(--surface);border:1px dashed var(--border-strong);border-radius:14px;padding:42px 20px}
#trEmpty .tre-t{font-weight:700;font-size:1rem;color:var(--text)}
#trEmpty .tre-s{margin-top:6px;font-size:.84rem;color:var(--text-faint)}
.page[data-page="trends"].no-data>*{display:none!important}
.page[data-page="trends"].no-data>#trEmpty{display:block!important}
/* ═══════════ v1.7.31 — Nhật ký sự cố & bảo trì ═══════════ */
.bt-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill.bt-search{padding:4px 11px;gap:7px}
.pill.bt-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:.78rem;font-weight:500;width:180px;padding:4px 0}
.pill.bt-search input::placeholder{color:var(--text-faint)}
.bt-note{font-size:.73rem;color:var(--text-faint);margin-top:11px}
.bt-hr{height:1px;background:var(--border);margin:17px 0}
.chip{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.chip.c-green{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent);border-color:color-mix(in srgb,var(--green) 32%,transparent)}
.chip.c-amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.chip.c-red{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent);border-color:color-mix(in srgb,var(--red) 32%,transparent)}
.chip.c-blue{color:var(--blue);background:color-mix(in srgb,var(--blue) 13%,transparent);border-color:color-mix(in srgb,var(--blue) 32%,transparent)}
.chip.c-dim{color:var(--text-faint);background:var(--surface-3);border-color:var(--border)}
.page[data-page="baotri"] td.wrap{white-space:normal;min-width:250px;max-width:420px;color:var(--text)}
.page[data-page="baotri"] td.wrap .cause{display:block;color:var(--text-faint);font-size:.74rem;margin-top:3px}
.page[data-page="baotri"] #btBody tr{cursor:pointer}
.page[data-page="baotri"] #btBody tr:hover td{background:var(--surface-2)}
th.bt-sort{cursor:pointer;user-select:none}
th.bt-sort:hover{color:var(--text)}
th.bt-sort .ar{opacity:.4;font-size:.6rem}
th.bt-sort.on{color:var(--green)}
th.bt-sort.on .ar{opacity:1}
.dist{display:flex;flex-direction:column;gap:11px}
.dist-row{display:grid;grid-template-columns:132px 1fr 62px;align-items:center;gap:11px;font-size:.79rem}
.dist-row .lb{color:var(--text-dim);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dist-row .tr{height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.dist-row .tr i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-deep),var(--green))}
.dist-row .tr i.w-amber{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 55%,transparent),var(--amber))}
.dist-row .tr i.w-red{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 55%,transparent),var(--red))}
.dist-row .vl{text-align:right;font-weight:700;color:var(--text)}
.dist-row .vl small{color:var(--text-faint);font-weight:500;font-size:.7rem}
.frm{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.frm .f{display:flex;flex-direction:column;gap:5px;min-width:0}
.frm .f.span2{grid-column:span 2}
.frm .f.span4{grid-column:span 4}
.frm label{font-size:.71rem;font-weight:600;color:var(--text-faint);letter-spacing:.03em}
.frm label .req{color:var(--red)}
.frm input,.frm select,.frm textarea{background:var(--surface-3);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.82rem;font-weight:500;padding:9px 11px;border-radius:10px;outline:none;width:100%}
.frm textarea{resize:vertical;min-height:64px;line-height:1.5}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--green-deep)}
.frm-foot{display:flex;align-items:center;gap:11px;margin-top:16px;flex-wrap:wrap}
.frm-foot .hint{font-size:.75rem;color:var(--text-faint)}
.det{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:15px 17px;display:none;flex-direction:column;gap:9px;margin-top:14px}
.det.on{display:flex}
.det h4{font-size:.9rem;color:var(--text);margin:0 0 2px}
.det-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.det-g div span{display:block;font-size:.69rem;color:var(--text-faint);font-weight:600;letter-spacing:.03em;margin-bottom:2px}
.det-g div b{font-size:.82rem;color:var(--text);font-weight:600}
.det .x{align-self:flex-end;cursor:pointer;font-size:.75rem;color:var(--text-faint)}
@media(max-width:1100px){.frm{grid-template-columns:repeat(2,1fr)}.frm .f.span4{grid-column:span 2}}
@media(max-width:620px){.frm{grid-template-columns:1fr}.frm .f.span2,.frm .f.span4{grid-column:span 1}
.dist-row{grid-template-columns:104px 1fr 54px}
.pill.bt-search input{width:120px}}
/* v1.7.33 — kỳ ngày riêng của trang Nhật ký sự cố */
.bt-tools .pill.datepick.bt-dp{padding:4px 10px;gap:5px}
.bt-tools .pill.datepick.bt-dp input[type=date]{font-size:.74rem;padding:3px 4px}
.bt-presets button{padding:5px 8px;font-size:.7rem}
@media(max-width:900px){.bt-presets{width:100%}}
/* v1.7.34 — đổi trạng thái / sửa / xoá ghi nhận */
.det-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px;padding-top:13px;border-top:1px solid var(--border)}
.det-act label{font-size:.71rem;font-weight:600;color:var(--text-faint);letter-spacing:.03em}
.det-act select{background:var(--surface-3);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.8rem;font-weight:500;padding:7px 10px;border-radius:9px;outline:none}
.det-act select:focus{border-color:var(--green-deep)}
.det-act .btn{padding:7px 13px;font-size:.78rem}
.det-act .btn.dang{color:var(--red);border-color:color-mix(in srgb,var(--red) 34%,transparent)}
.det-act .btn.dang:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.det-act .da-hint{font-size:.76rem;color:var(--text-faint)}
.det-act.ro{color:var(--text-faint);font-size:.78rem;display:block}
#btFormWrap.dang-sua{border-left:3px solid var(--amber);padding-left:15px;margin-left:-18px}
/* ═══════ v1.7.35 — badge đếm trên sidebar + panel Thông báo Telegram ═══════ */
.badge-n{margin-left:auto;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.65rem;font-weight:700;line-height:1.35;color:var(--green);background:rgba(47,201,139,.12);border:1px solid rgba(47,201,139,.38);padding:2px 7px;border-radius:999px;flex-shrink:0}
.badge-n:empty{display:none}
#navBtCount{color:var(--amber);background:rgba(230,176,74,.13);border-color:rgba(230,176,74,.42)}
.nav-item.active .badge-n,.nav-item.active #navBtCount{color:#04140e;background:rgba(4,20,14,.16);border-color:rgba(4,20,14,.28)}
@media (max-width:1080px){.nav-item .badge-n{display:none}.nav-item.active .badge-n:not(:empty){display:inline-block}}
.tg-actions{display:flex;align-items:center;flex-wrap:wrap;gap:11px;padding:13px 2px 2px}
.tg-lab{font-size:.7rem;font-weight:700;color:var(--text-faint);letter-spacing:.12em;text-transform:uppercase}
.tg-auto{display:inline-flex;align-items:center;gap:8px;font-size:.79rem;color:var(--text-dim);cursor:pointer;user-select:none;line-height:1.5}
.tg-auto b{color:var(--text)}
.tg-auto input{width:15px;height:15px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
.tg-preview{margin-top:13px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.78rem;line-height:1.8;color:var(--text);white-space:pre-wrap;word-break:break-word;max-height:430px;overflow:auto}
#tgHint{font-size:.75rem;line-height:1.6}
#tgHint .tg-chatpick{display:inline-block;margin:2px 4px 2px 0;padding:3px 9px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;font-family:inherit;font-size:.74rem;font-weight:600}
#tgHint .tg-chatpick:hover{border-color:var(--green);color:var(--green)}
/* v1.7.36 — ô nhập nhiều Chat ID */
#tgChat{width:100%;min-height:44px;resize:vertical;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace;font-size:.78rem;line-height:1.5;padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
#tgChat:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(47,201,139,.15)}
#tgChat::placeholder{color:var(--text-faint);font-size:.72rem}
.tg-chatpick.on{background:var(--green-deep);border-color:var(--green);color:#04140e;font-weight:700}
.tg-pickstat{display:block;margin-top:6px;font-size:.72rem;color:var(--text-dim);font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'SF Mono',Menlo,monospace}
/* ═══════════ block 9 — v1.7.41 ═══════════ */
/* 5 quy tắc trong @media(max-width:680px) ở đầu file (dòng ~477) chưa bao giờ
chạy: các quy tắc cấp cao nhất đứng SAU trong file đè lên chúng. Cùng độ
ưu tiên thì thứ tự nguồn thắng — media query KHÔNG cộng thêm độ ưu tiên.
.tb-title h2 bị dòng 527 (1.42rem) đè
.panel-head h3 bị dòng 530 (1rem) đè
.kpi-num bị dòng 536 (1.84rem) đè ← gây tràn thẻ KPI trên điện thoại
.kpi-label bị dòng 537 (.75rem) đè
.dp-presets button bị dòng 655 (.7rem) đè
Khai báo lại ở CUỐI file để thứ tự nguồn thắng. Chỉ đặt lại font-size —
mọi thuộc tính khác (weight 800, letter-spacing, tabular-nums, padding)
vẫn kế thừa như cũ. Màn hình desktop không thay đổi gì. */
@media(max-width:680px){
.tb-title h2{font-size:1.16rem}
.panel-head h3{font-size:.88rem}
.kpi-label{font-size:.64rem}
.kpi-num{font-size:1.4rem}
.dp-presets button{font-size:.64rem}
}
/* ═══════════ block 10 — v1.7.42 ═══════════ */
/* .topbar (dòng 83) là position:sticky;top:0 — hợp lý trên desktop vì nó chỉ
là một dải ngang hẹp bên phải sidebar. Nhưng từ ≤920px .app chuyển sang
flex-direction:column, sidebar thành thanh ngang phía trên, và .topbar phải
ôm cả 3 khối xếp chồng: .tb-title + .tb-util + .tb-filters (flex-basis:100%).
Trên điện thoại nó cao ~300px trong khi viewport chỉ ~750px → dính lại là
che mất gần nửa màn hình khi cuộn.
Bỏ dính từ ≤920px — đúng ngưỡng layout đổi sang cột. Desktop không đổi. */
@media(max-width:920px){
.topbar{position:static}
}
/* ═══════════ block 11 — v1.7.45 ═══════════ */
/* Panel "Xoá dữ liệu theo khoảng ngày" trên trang Dữ liệu. */
.xk-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:0 16px 14px}
.xk-lb{display:flex;flex-direction:column;gap:5px;font-size:.72rem;color:var(--text-faint)}
.xk-lb input{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
padding:8px 10px;color:var(--text);font-family:inherit;font-size:.82rem;color-scheme:dark light}
.btn.btn-danger{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.4);color:#ff9a9a}
.btn.btn-danger:hover:not(:disabled){background:rgba(255,90,90,.2)}
.btn.btn-danger:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:680px){ .xk-row{padding:0 12px 12px} .xk-lb{flex:1 1 44%} }
/* ═══════════ block 12 — v1.7.46 ═══════════ */
/* Nút "Lưu lên Supabase" trong panel xoá khoảng ngày — chỉ bật sau khi xoá. */
#xkSave:disabled{opacity:.45;cursor:not-allowed}
.xk-row .upload-status{flex:1 1 100%}
/* ═══════════ block 13 — v1.7.50 ═══════════ */
/* Dòng trạm đang được lọc trong bảng xếp hạng trang Trạm sạc.
Bảng cố ý giữ đủ trạm để so sánh chéo, nên phải đánh dấu rõ dòng đang chọn. */
tr.st-row-sel > td{background:rgba(47,201,139,.09);font-weight:600}
tr.st-row-sel > td:first-child{box-shadow:inset 3px 0 0 var(--green)}
tr.st-row-sel .route-tag{outline:1px solid currentColor;outline-offset:1px}
/* ═══════════ block 14 — v1.7.51 ═══════════ */
/* Hai ô lọc Trạm và Khách hàng.
Ba việc: (a) danh sách xổ xuống là do hệ điều hành vẽ, chỉ `color-scheme`
mới đổi được nền của nó — thiếu dòng này thì trên Windows nó ra hộp TRẮNG
giữa giao diện tối; (b) trạng thái "đang lọc" trước đây không có màu gì,
nay sáng xanh giống nút Toàn kỳ / 7 ngày cho đồng bộ; (c) bỏ max-width
cứng để tên trạm dài không bị cắt giữa từ trên điện thoại. */
/* (a) danh sách xổ xuống theo đúng chủ đề đang dùng */
.pill.sel select{color-scheme:dark}
[data-theme="light"] .pill.sel select{color-scheme:light}
/* nền/chữ của từng dòng trong danh sách */
.pill.sel select option,
.pill.sel select optgroup{background:var(--surface);color:var(--text)}
/* (b) trạng thái nghỉ · rê chuột · đang lọc */
.pill.sel{transition:background .16s ease,border-color .16s ease}
.pill.sel:hover{background:var(--surface-3);border-color:var(--border-strong)}
.pill.sel.on{background:rgba(47,201,139,.10);border-color:rgba(47,201,139,.38)}
.pill.sel.on > svg{color:var(--green);opacity:1}
.pill.sel.on select{color:var(--text-strong)}
.pill.sel.on .pill-lab{color:var(--green);opacity:1}
/* mũi tên xổ xuống chuyển xanh khi đang lọc */
.pill.sel.on select{background-image:url("data:image/svg+xml;utf8,")}
/* bàn phím: vòng nét phải thấy rõ */
.pill.sel select:focus-visible{outline:2px solid rgba(47,201,139,.55);outline-offset:2px;border-radius:8px}
/* (c) không cắt chữ giữa từ — để pill co giãn theo chỗ trống */
.pill.sel{min-width:0}
.pill.sel select{max-width:none;width:auto}
@media(max-width:920px){
.tb-filters .pill.sel{flex:1 1 auto;min-width:0}
.pill.sel select{max-width:100%;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){ .pill.sel{transition:none} }
/* ═══════════ block 15 — v1.7.52 ═══════════ */
/* Bốn hộp còn lại trên thanh lọc, chỉnh cho khớp hai ô Trạm/Khách hàng ở block 14.
Quan trọng nhất vẫn là `color-scheme`: thiếu nó thì danh sách giờ/phút và
bảng chọn ngày do hệ điều hành vẽ sẽ bung ra nền TRẮNG giữa giao diện tối. */
/* (a) danh sách xổ xuống + bảng lịch theo đúng chủ đề */
.timepick select,
.pill.datepick input[type=date],
.cmp-period input[type=date],
.bt-tools .pill.datepick input[type=date]{color-scheme:dark}
[data-theme="light"] .timepick select,
[data-theme="light"] .pill.datepick input[type=date],
[data-theme="light"] .cmp-period input[type=date],
[data-theme="light"] .bt-tools .pill.datepick input[type=date]{color-scheme:light}
.timepick select option{background:var(--surface);color:var(--text)}
/* (b) trạng thái "đang lọc" — cùng ngôn ngữ với .pill.sel.on */
.pill.datepick,.pill.timepick{transition:background .16s ease,border-color .16s ease}
.pill.datepick:hover,.pill.timepick:hover{border-color:var(--border-strong)}
.pill.datepick.on,.pill.timepick.on{background:rgba(47,201,139,.10);border-color:rgba(47,201,139,.38)}
.pill.datepick.on > svg,.pill.timepick.on > svg{color:var(--green);opacity:1}
.pill.datepick.on input[type=date],
.pill.timepick.on select{border-color:rgba(47,201,139,.30);color:var(--text-strong)}
/* (c) bàn phím: vòng nét thấy rõ, thống nhất với block 14 */
.timepick select:focus-visible,
.pill.datepick input[type=date]:focus-visible,
.dp-presets button:focus-visible,
.tp-mode:focus-visible,
.tp-clear:focus-visible{outline:2px solid rgba(47,201,139,.55);outline-offset:2px}
/* (d) nút ✕ bỏ lọc giờ — trước đây không có phản hồi khi rê chuột */
.tp-clear{transition:color .16s ease,background .16s ease;border-radius:7px}
.tp-clear:hover{color:var(--red);background:rgba(230,106,106,.12)}
@media(prefers-reduced-motion:reduce){
.pill.datepick,.pill.timepick,.tp-clear{transition:none}
}
/* ═══════════ block 16 — v1.7.53 ═══════════ */
/* Danh sách xổ tự vẽ.