/* UBA Monitor dashboard
 *
 * Token màu: sáng là gốc, [data-theme="dark"] ghi đè (js/theme-init.js chọn lúc
 * mở trang). JS đọc lại các token cho biểu đồ (xem TH trong js/core.js), nên
 * màu dữ liệu --blue/--green/--red/--amber phải là hex 6 số: JS nối thêm alpha
 * kiểu '#rrggbb22'.
 */
:root {
  color-scheme:light;
  --bg:#f4f6fa; --side:#ffffff; --card:#ffffff; --card2:#f8fafc; --inset:#f1f5f9;
  --border:#e2e8f0; --border2:#cbd5e1; --hover:#f1f5f9; --grid:#e9eef5;
  --text:#0f172a; --muted:#475569; --faint:#64748b;
  --blue:#2563eb; --blue-soft:rgba(37,99,235,.10); --blue-hover:#1d4ed8; --on-blue:#ffffff;
  --red:#dc2626; --red-soft:rgba(220,38,38,.09); --red-ink:#b91c1c;
  --green:#15803d; --green-soft:rgba(21,128,61,.10);
  --amber:#b45309; --amber-soft:rgba(217,119,6,.11); --amber-ink:#92400e; --amber-line:rgba(217,119,6,.35);
  --violet:#6d28d9; --violet-soft:rgba(109,40,217,.10);
  --orange:#c2410c;
  /* Nhóm số đơn (buyers.js): xám = chưa đặt, rồi một sắc xanh nhạt → đậm
     theo số đơn. validate_palette.js --ordinal: PASS (sáng và tối). */
  --g0:#a7b0bd; --g1:#86b6ef; --g2:#3f86e0; --g3:#1c5cab;
  --g0-ink:#0f172a; --g1-ink:#0f172a; --g2-ink:#0f172a; --g3-ink:#ffffff;
  --tip:#ffffff; --tip-border:#cbd5e1;
  --overlay:rgba(15,23,42,.45);
  /* Độ nổi: một thang dùng chung cho card, thanh lọc, popup */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.07);
  --shadow-lg:0 20px 50px rgba(15,23,42,.18);
  /* Lớp chồng: nội dung < thanh lọc < mbar < menu ngăn kéo < popup < đăng nhập < tooltip */
  --z-filters:4; --z-mbar:6; --z-scrim:8; --z-drawer:9; --z-modal:10; --z-login:20; --z-tip:30;
  --radius:12px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --font:'Fira Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0b1120; --side:#0d1526; --card:#121b2d; --card2:#0f1829; --inset:#0a1222;
  --border:#1f2a40; --border2:#2b3953; --hover:#18233a; --grid:#1f2a40;
  --text:#e6ebf5; --muted:#94a3b8; --faint:#8190a8;
  --blue:#5b9dff; --blue-soft:rgba(91,157,255,.14); --blue-hover:#7fb2ff; --on-blue:#0b1120;
  --red:#f87171; --red-soft:rgba(248,113,113,.14); --red-ink:#fca5a5;
  --green:#4ade80; --green-soft:rgba(74,222,128,.13);
  --amber:#fbbf24; --amber-soft:rgba(251,191,36,.13); --amber-ink:#fde68a; --amber-line:rgba(251,191,36,.35);
  --violet:#a78bfa; --violet-soft:rgba(167,139,250,.14);
  --orange:#ec835a;
  /* Nền tối: xanh SÁNG dần theo số đơn (nhiều = nổi hơn trên nền tối). */
  --g0:#4a5466; --g1:#2f6fc4; --g2:#5598e7; --g3:#a9cdf7;
  --g0-ink:#e6ebf5; --g1-ink:#ffffff; --g2-ink:#0b1120; --g3-ink:#0b1120;
  --tip:#0a1222; --tip-border:#2b3953;
  --overlay:rgba(3,7,18,.7);
  --shadow-sm:none;
  --shadow-md:0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:0 24px 70px rgba(0,0,0,.55);
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; }
body { background:var(--bg); color:var(--text); font:14px/1.5 var(--font);
       -webkit-font-smoothing:antialiased; font-feature-settings:'tnum' 1; touch-action:manipulation; }
body.modal-open { overflow:hidden; }
code { font-family:var(--mono); font-size:12px; background:var(--inset); border:1px solid var(--border); padding:1px 5px; border-radius:5px; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:10px; border:2px solid var(--bg); }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.ico { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
svg use { pointer-events:none; }

/* Skip link: ẩn tới khi được focus bằng Tab */
.skip { position:fixed; left:12px; top:-60px; z-index:calc(var(--z-login) + 1); transition:top .15s; }
.skip:focus { top:12px; }

/* ---- Khung: sidebar + nội dung ---- */
.app { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; min-height:100dvh; }
.side { position:sticky; top:0; height:100vh; height:100dvh; background:var(--side); border-right:1px solid var(--border);
        display:flex; flex-direction:column; padding:18px 12px 14px; gap:16px; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:2px 8px 4px; }
.brand .logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
               background:linear-gradient(135deg,#3b82f6,#6d4dff); box-shadow:0 6px 16px rgba(59,130,246,.28); }
.brand .logo svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.brand b { display:block; font-size:14.5px; font-weight:700; letter-spacing:.1px; }
.brand small { color:var(--muted); font-size:12px; }
.side .side-close { display:none; margin-left:auto; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav button { position:relative; display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
              color:var(--muted); padding:8px 10px; border-radius:8px; font:500 13.5px var(--font); cursor:pointer; min-height:36px; }
.nav button svg { width:17px; height:17px; flex:none; opacity:.85; }
.nav button:hover { background:var(--hover); color:var(--text); }
.nav button.active { background:var(--blue-soft); color:var(--blue); font-weight:600; }
.nav button.active::before { content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--blue); }
.nav button.active svg { opacity:1; }
.navsec { color:var(--faint); font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; padding:14px 10px 6px; }
.navsec:first-child { padding-top:2px; }
.subnav { display:flex; flex-direction:column; gap:1px; margin:2px 0 6px 19px; padding-left:10px; border-left:1px solid var(--border); }
.subnav button { font-size:13px; padding:6px 10px; gap:8px; min-height:32px; }
.subnav button.active::before { display:none; }
.subnav button .dot { width:6px; height:6px; border-radius:50%; background:var(--border2); flex:none; }
.subnav button.active .dot { background:var(--blue); }
.side-foot { margin-top:auto; border-top:1px solid var(--border); padding:12px 6px 0; display:flex; flex-direction:column; gap:10px; }
.who { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12.5px; min-width:0; }
.who #who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center;
          font-weight:700; font-size:12px; flex:none; text-transform:uppercase; }
.avatar:empty { display:none; }
.foot-actions { display:flex; gap:8px; }
.foot-actions button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:13px; padding:6px 8px; }
.foot-actions button[hidden] { display:none; }
.themeBtn { flex:none !important; width:36px; padding:6px !important; }
.themeBtn .i-sun { display:none; } :root[data-theme="dark"] .themeBtn .i-sun { display:block; } :root[data-theme="dark"] .themeBtn .i-moon { display:none; }
/* Đăng xuất là thao tác "phá": tách màu khỏi nút thường (destructive-nav-separation) */
#logoutBtn:hover { border-color:var(--red); color:var(--red); background:var(--red-soft); }

/* Thanh trên cùng + nền mờ cho menu ngăn kéo: chỉ dùng ở màn hẹp */
.mbar { display:none; }
.scrim { position:fixed; inset:0; background:var(--overlay); z-index:var(--z-scrim); animation:fade .18s var(--ease-out); }
.scrim[hidden] { display:none; }

.main { min-width:0; padding:22px 28px 48px; outline:none; }
/* Màn siêu rộng: nội dung không dãn quá 1600px cho dễ đọc bảng (container-width) */
.main > * { max-width:1600px; margin-left:auto; margin-right:auto; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.eyebrow { color:var(--blue); font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; margin-bottom:2px; }
.eyebrow:empty { display:none; }
.topbar h1 { font-size:24px; font-weight:700; letter-spacing:-.4px; line-height:1.25; }
.topbar .desc { color:var(--muted); font-size:13.5px; margin-top:2px; }
.status { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12.5px; white-space:nowrap;
          background:var(--card); border:1px solid var(--border); padding:5px 11px; border-radius:99px; box-shadow:var(--shadow-sm); }
.status::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.status.loading::before { background:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); animation:pulse 1s infinite; }
.status.bad { color:var(--red); } .status.bad::before { background:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.status:empty { visibility:hidden; }
@keyframes pulse { 50% { opacity:.3; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fade { from { opacity:0; } }
@keyframes rise { from { opacity:0; transform:translateY(6px); } }

/* Vào trang mới: hiện dần + trồi nhẹ, để thấy nội dung đã đổi */
.page.enter { animation:rise .22s var(--ease-out); }

/* ---- Điều khiển ---- */
select,input,button { background:var(--card); color:var(--text); border:1px solid var(--border2); border-radius:8px;
                      padding:7px 10px; font:13px var(--font); outline:none; min-height:34px;
                      transition:border-color .15s, background-color .15s, box-shadow .15s, color .15s; }
select { padding-right:28px; appearance:none; cursor:pointer;
         background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2394a3b8' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
         background-repeat:no-repeat; background-position:right 10px center; }
select:hover, input:hover { border-color:var(--faint); }
select:focus,input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
input::placeholder { color:var(--faint); }
input[type="checkbox"] { accent-color:var(--blue); width:16px; height:16px; min-height:0; vertical-align:-3px; margin-right:7px; padding:0; box-shadow:none; cursor:pointer; }
button { cursor:pointer; font-weight:500; } button:hover { border-color:var(--blue); background:var(--hover); }
button:active:not(:disabled) { transform:scale(.98); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--blue); color:var(--on-blue); font-weight:600; border-color:var(--blue); box-shadow:0 1px 2px rgba(37,99,235,.25); }
button.primary:hover { background:var(--blue-hover); border-color:var(--blue-hover); }
button.ghost { background:none; border-color:transparent; }
button.ghost:hover { background:var(--hover); border-color:var(--border); }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
/* Nút đang chạy: icon xoay, khoá bấm (loading-buttons) */
button.busy { cursor:progress; opacity:.8; }
button.busy .ico { animation:spin .8s linear infinite; }
label { color:var(--muted); font-size:13px; cursor:pointer; user-select:none; }
label.check { display:inline-flex; align-items:center; white-space:nowrap; }

/* Ô nhập có nhãn nhìn thấy được (input-labels) */
.field { display:flex; flex-direction:column; gap:5px; min-width:0; cursor:default; }
.field > span { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.2px; }
.field input, .field select { width:100%; }
.helper { color:var(--faint); font-size:12px; line-height:1.5; }

/* Thanh lọc dính trên cùng khi cuộn: đổi khoảng thời gian không phải kéo lên lại. */
.filters { position:sticky; top:10px; z-index:var(--z-filters); display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; padding:8px;
           background:color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
           border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); }
.filters .spacer { flex:1; }
.filters [data-filter="range"] { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filters > label { padding:0 4px; }
.withico { position:relative; display:inline-flex; }
.withico > .ico { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.withico > select { padding-left:32px; }
.dates { display:inline-flex; gap:6px; align-items:center; color:var(--muted); }
.dates[hidden] { display:none; }
[data-filter][hidden] { display:none; }

/* ---- Card KPI ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; position:relative; box-shadow:var(--shadow-sm);
        display:flex; flex-direction:column; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.card:hover { box-shadow:var(--shadow-md); }
.panel .card { background:var(--card2); box-shadow:none; }
.card .label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.card .value { font-size:26px; font-weight:700; letter-spacing:-.5px; line-height:1.15; }
.card .sub { color:var(--muted); font-size:12.5px; margin-top:4px; }
.card .spark { margin:10px -16px -14px; height:30px; }
.card .spark:empty { display:none; }
.card .spark svg { display:block; width:100%; height:30px; }
/* Chip icon cạnh nhãn KPI */
.cic { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none; }
.cic svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cic.blue { background:var(--blue-soft); color:var(--blue); } .cic.red { background:var(--red-soft); color:var(--red); }
.cic.green { background:var(--green-soft); color:var(--green); } .cic.amber { background:var(--amber-soft); color:var(--amber); }
.cic.violet { background:var(--violet-soft); color:var(--violet); }

/* ---- Panel ---- */
.panel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); }
.page > .panel, .page > .grid2 { margin-bottom:16px; }
.panel h2 { font-size:15px; font-weight:600; color:var(--text); margin-bottom:12px; line-height:1.4; }
.panel h2 .hint { font-size:12.5px; }
/* Lỗi riêng của từng panel (panelGuard): nhãn vàng cạnh tiêu đề + nút Thử lại, trống thì ẩn. */
.panel h2 span[id$="Msg"]:not(:empty), .pagemsg:not(:empty) { display:inline-flex; align-items:center; gap:8px; margin-left:8px; padding:2px 4px 2px 10px;
    border-radius:99px; font-size:12.5px; font-weight:500; background:var(--amber-soft); color:var(--amber); vertical-align:1px; }
.pagemsg:not(:empty) { margin:0 0 12px; }
.retry { min-height:0; padding:1px 10px; font-size:12px; border-radius:99px; border-color:var(--amber-line); background:var(--card); color:var(--amber-ink); }
.panelhead { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.panelhead h2 { margin-bottom:0; }
.panelhead .ctrls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px; }
.grid2.even { grid-template-columns:1fr 1fr; margin-bottom:0; }
canvas { max-height:280px; }
.pnote { color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:12px; }
.pnote:empty { display:none; }

/* ---- Biểu đồ: khung, trạng thái tải/trống, bảng số đi kèm ---- */
.chartbox { position:relative; height:290px; }
.chartwrap { position:relative; }
.chartbox.loading, .chartwrap.loading { min-height:160px; border-radius:10px;
    background:linear-gradient(90deg,transparent 0,var(--hover) 50%,transparent 100%); background-size:200% 100%; animation:sk 1.2s infinite; }
.chartbox.is-empty::after, .chartwrap.is-empty::after { content:attr(data-empty); position:absolute; inset:0; display:grid; place-items:center;
    color:var(--muted); font-size:13px; background:color-mix(in srgb, var(--card) 70%, transparent); border-radius:10px; }
details.ctab { margin-top:8px; }
details.ctab > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted); font-size:12.5px;
    padding:3px 8px; border-radius:6px; list-style:none; }
details.ctab > summary::-webkit-details-marker { display:none; }
details.ctab > summary:hover { background:var(--hover); color:var(--text); }
details.ctab[open] > summary { margin-bottom:6px; color:var(--text); }
.ctab-body { max-height:260px; overflow:auto; }

/* ---- Bảng ---- */
.tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px;
     background:var(--card2); position:sticky; top:0; z-index:1; }
th[title] .thbtn > :not(.ico), th[title]:not(:has(.thbtn)) { text-decoration:underline dotted var(--faint); text-underline-offset:3px; }
/* Cột số canh phải để so hàng đơn vị (number-tabular) */
th.num, td.num { text-align:right; }
th.num .thbtn { flex-direction:row-reverse; }
/* Tiêu đề bấm được để sắp xếp (sortable-table) */
.thbtn { all:unset; display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; border-radius:4px; }
.thbtn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.thbtn:hover { color:var(--text); }
.thbtn .sorti { width:12px; height:12px; opacity:.35; transition:opacity .15s, transform .15s; }
.thbtn:hover .sorti { opacity:.8; }
th[aria-sort="ascending"] .sorti, th[aria-sort="descending"] .sorti { opacity:1; color:var(--blue); }
th[aria-sort="ascending"] { color:var(--text); } th[aria-sort="descending"] { color:var(--text); }
th[aria-sort="descending"] .sorti { transform:scaleY(-1); }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background-color .12s; }
tbody tr:hover { background:var(--hover); }
tbody tr[tabindex]:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
td.path { max-width:360px; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono); font-size:12.5px; }
tr.clickable, tr[onclick] { cursor:pointer; }
.err { color:var(--red); } .ok { color:var(--green); }

/* Màu kèm icon (color-not-only): đỏ = cảnh báo, xanh = đạt */
.flag { display:inline-flex; align-items:center; gap:5px; }
td.flag { display:table-cell; }
.flag::before { content:''; display:inline-block; width:13px; height:13px; flex:none; background:currentColor; vertical-align:-2px; margin-right:4px;
  -webkit-mask:var(--flag-icon) center/contain no-repeat; mask:var(--flag-icon) center/contain no-repeat; }
.flag.err { --flag-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.flag.ok { --flag-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.card .value.flag::before { width:20px; height:20px; margin-right:2px; }

/* Empty state trong bảng / panel */
.emptyrow td { padding:0; }
.emptyrow:hover { background:none; }
.empty-state { display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 16px; text-align:center; white-space:normal; color:var(--muted); font-size:12.5px; }
.empty-state .ico { width:26px; height:26px; color:var(--faint); margin-bottom:4px; stroke-width:1.6; }
.empty-state b { color:var(--text); font-size:13.5px; font-weight:600; }

/* Skeleton lúc tải lần đầu */
.skrow td { padding:12px; }
.skbar, .value.sk { display:block; border-radius:6px;
  background:linear-gradient(90deg,var(--inset) 0,var(--hover) 50%,var(--inset) 100%); background-size:200% 100%; animation:sk 1.2s infinite; }
.skbar { height:12px; }
.value.sk { color:transparent !important; width:60%; }
.value.sk.flag::before { display:none; }

.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; line-height:1.6; }
.badge.ok { background:var(--green-soft); color:var(--green); }
.badge.err { background:var(--red-soft); color:var(--red-ink); }
.badge.warn { background:var(--amber-soft); color:var(--amber); }

/* ---- Popup chi tiết ---- */
#detail { display:none; position:fixed; inset:0; background:var(--overlay); z-index:var(--z-modal); backdrop-filter:blur(4px); padding:4vh 16px; animation:fade .18s var(--ease-out); }
#detail .box { background:var(--card); border:1px solid var(--border2); border-radius:16px; max-width:980px; margin:0 auto;
               max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); animation:rise .22s var(--ease-out); }
#detail .head { position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--border); padding:14px 20px;
                display:flex; align-items:center; gap:10px; z-index:2; }
#detail .head .m { font-weight:700; font-size:15px; }
#detail .head .p { color:var(--muted); font-size:13px; font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
#detail .head button { display:inline-flex; align-items:center; gap:6px; flex:none; }
#detail .body { padding:18px 20px 22px; }
#detail .body .tablewrap { margin-bottom:6px; }
#detail pre { background:var(--inset); border:1px solid var(--border); padding:12px 14px; border-radius:10px; overflow-x:auto;
              font:12px/1.6 var(--mono); margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-bottom:18px; }
.kv .item { background:var(--inset); border:1px solid var(--border); border-radius:10px; padding:9px 12px; }
.kv .k { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
.kv .v { font-size:13px; overflow-wrap:anywhere; }
.section { margin-bottom:16px; }
.section .st { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.section .st h3 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.copybtn { font-size:12px; padding:4px 12px; border-radius:7px; min-height:30px; }
.copybtn.copied { background:var(--green-soft); color:var(--green); border-color:var(--green); }
.searchrow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }

/* Form tra cứu log */
.searchgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px 14px; align-items:end; margin-bottom:16px;
              padding:14px; background:var(--card2); border:1px solid var(--border); border-radius:10px; }
.searchgrid .actions { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
.searchgrid .helper { grid-column:1 / -1; }

/* Khối xuất crash thô */
.exportrow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:16px 0 14px; padding:12px 14px;
             background:var(--card2); border:1px dashed var(--border2); border-radius:10px; }
.exportrow-t { display:flex; align-items:center; gap:10px; margin-right:auto; min-width:200px; align-self:center; }
.exportrow-t > .ico { width:18px; height:18px; color:var(--blue); }
.exportrow-t b { display:block; font-size:13px; font-weight:600; }
.exportrow .field { width:200px; }
.exportrow #exHint { align-self:center; }

.fempty { color:var(--muted); font-size:13px; padding:24px 12px; text-align:center; border:1px dashed var(--border); border-radius:10px; }

.page[hidden] { display:none; }

/* ---- Đăng nhập ---- */
#login { position:fixed; inset:0; z-index:var(--z-login); display:flex; align-items:center; justify-content:center; padding:16px;
         background:radial-gradient(900px 480px at 50% -10%, var(--blue-soft), transparent 60%),
                    radial-gradient(600px 400px at 90% 110%, var(--violet-soft), transparent 60%), var(--bg); }
#login[hidden] { display:none; }  /* display:flex ở trên thắng [hidden] mặc định */
#login .box { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:32px 30px 24px; width:100%; max-width:390px;
              box-shadow:var(--shadow-lg); animation:rise .3s var(--ease-out); }
#login .brand { padding:0; margin-bottom:24px; }
#login h2 { font-size:20px; margin-bottom:6px; letter-spacing:-.2px; }
#login .hint { color:var(--muted); font-size:13px; line-height:1.55; margin-bottom:16px; }
#login .field { margin-bottom:12px; }
#login input { width:100%; padding:11px 13px; font-size:16px; }
#login #lCode { text-align:center; letter-spacing:12px; font:600 22px var(--mono); }
#login button { width:100%; padding:11px; margin-bottom:8px; font-size:14px; min-height:44px; }
#login button.link { background:none; border:none; color:var(--muted); font-size:13px; padding:4px; min-height:32px; }
#login button.link:hover { color:var(--text); }
#login .msg { font-size:13px; min-height:18px; line-height:1.5; }
#login .msg.bad { color:var(--red); } #login .msg.good { color:var(--green); }

/* ---- Hub tính năng ---- */
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.fcard { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 18px 14px; cursor:pointer; box-shadow:var(--shadow-sm);
         display:flex; flex-direction:column; gap:14px; transition:border-color .15s, transform .2s var(--ease-out), box-shadow .2s; }
.fcard:hover, .fcard:focus-visible { border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.fcard .top { display:flex; gap:12px; align-items:flex-start; }
.ficon { width:40px; height:40px; border-radius:11px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:none; }
.ficon svg { width:19px; height:19px; }
.fcard h3 { font-size:15px; font-weight:600; margin-bottom:3px; }
.fcard .d { color:var(--muted); font-size:12.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.farows { display:flex; flex-direction:column; gap:8px; }
.farow { display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:12px; align-items:center; background:var(--card2);
         border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.appchip { font-size:12px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.4px; display:block; margin-bottom:3px; }
.farow .rate { font-size:20px; font-weight:700; letter-spacing:-.3px; line-height:1.1; }
.farow .rate small { font-size:12px; font-weight:600; margin-left:6px; letter-spacing:0; }
.farow .vol { color:var(--muted); font-size:12px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.farow svg { width:104px; height:34px; display:block; }
.fcard .goal { margin-top:auto; color:var(--faint); font-size:12px; border-top:1px dashed var(--border); padding-top:10px; }
.fcard .goal b { color:var(--muted); font-weight:500; }
.up { color:var(--green); } .down { color:var(--red); } .flat { color:var(--muted); }

/* ---- Chi tiết tính năng ---- */
.crumb { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; margin-bottom:14px; }
.crumb a { color:var(--muted); text-decoration:none; border-radius:4px; } .crumb a:hover { color:var(--blue); text-decoration:underline; }
.fhero { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.fhero .l { display:flex; gap:14px; align-items:center; min-width:0; }
.fhero .ficon { width:48px; height:48px; border-radius:13px; } .fhero .ficon svg { width:23px; height:23px; }
.fhero h2 { font-size:22px; font-weight:700; letter-spacing:-.3px; margin-bottom:2px; }
.fhero p { color:var(--muted); font-size:13.5px; }
.fhero-r { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.seg { display:inline-flex; background:var(--inset); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
.seg button { border:none; background:none; padding:6px 13px; border-radius:7px; font-size:13px; color:var(--muted); min-height:30px; }
.seg button:hover { background:var(--card); color:var(--text); }
.seg button.on { background:var(--card); color:var(--blue); font-weight:600; box-shadow:0 1px 3px rgba(15,23,42,.12), 0 0 0 1px var(--border); }
.note { display:flex; gap:10px; background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber-ink);
        border-radius:10px; padding:10px 14px; font-size:13px; line-height:1.55; margin-bottom:16px; }
.note svg { flex:none; width:16px; height:16px; margin-top:2px; color:var(--amber); }
.fdgrid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; margin-bottom:16px; }
.fdgrid.even { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.fdgrid > .panel { margin:0; }
#featDetail > .panel { margin-bottom:16px; }
.ptable td, .ptable th { padding:10px 10px; }
.ptable th { white-space:normal; line-height:1.3; }
.ptable tbody tr { cursor:pointer; }
.ptable tbody tr.sel { background:var(--blue-soft); }
.ptable tbody tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--blue); }
.ptable .pl { font-weight:600; white-space:normal; min-width:130px; }
.ptable .pl small { display:block; color:var(--faint); font-weight:400; font-size:12px; }
.bar { position:relative; height:6px; border-radius:6px; background:var(--inset); overflow:hidden; min-width:56px; margin-top:5px; }
.bar > i { position:absolute; inset:0 auto 0 0; border-radius:6px; background:var(--blue); }
.bar.g > i { background:var(--green); } .bar.r > i { background:var(--red); } .bar.a > i { background:var(--amber); }
td.num .bar { margin-left:auto; }
.subh { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; margin:4px 0 10px; }
.empty { color:var(--muted); font-size:13px; padding:14px 0; }
.fsk { background:linear-gradient(90deg,var(--card) 0,var(--hover) 50%,var(--card) 100%); background-size:200% 100%;
       animation:sk 1.2s infinite; border-radius:14px; height:190px; border:1px solid var(--border); }
@keyframes sk { to { background-position:-200% 0; } }

/* ---- Biểu đồ trang tính năng ---- */
.vtip { position:fixed; z-index:var(--z-tip); pointer-events:none; background:var(--tip); border:1px solid var(--tip-border); border-radius:8px;
        padding:8px 10px; font-size:12.5px; line-height:1.5; color:var(--text); box-shadow:var(--shadow-lg); max-width:280px; }
.vtip[hidden] { display:none; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:16px; }
.kpi { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); }
.kpi .label { color:var(--muted); font-size:13px; margin-bottom:4px; }
.kpi .value { font-size:26px; font-weight:700; letter-spacing:-.4px; line-height:1.15; }
.kpi .sub { color:var(--muted); font-size:12.5px; margin-top:5px; }
.kpi .sub b { color:var(--text); font-weight:600; }
.kpi-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; }
.kpi-ic svg { width:21px; height:21px; }
.kpi-ic.blue { background:var(--blue-soft); color:var(--blue); } .kpi-ic.green { background:var(--green-soft); color:var(--green); }
.kpi-ic.red { background:var(--red-soft); color:var(--red); } .kpi-ic.amber { background:var(--amber-soft); color:var(--amber); }
.hint { color:var(--muted); font-size:12.5px; font-weight:400; }
.foot { color:var(--muted); font-size:12.5px; margin-top:10px; line-height:1.55; }
.vfunnel { display:flex; flex-direction:column; }
.vf-row, .vf-conn { display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr) 52px; gap:10px; align-items:center; }
.vf-row { height:38px; }
.vf-conn { height:24px; }
.vf-lbl { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vf-lbl b { font-weight:500; }
.vf-area { position:relative; height:100%; }
.vf-bar { position:absolute; left:50%; top:3px; bottom:3px; transform:translateX(-50%); border-radius:4px; display:grid; place-items:center;
          font-weight:700; font-size:13px; cursor:default; outline:none; transition:filter .12s; }
.vf-bar:hover, .vf-bar:focus { filter:brightness(1.12); }
.vf-bar:focus-visible { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--blue); }
.vf-out { position:absolute; top:50%; transform:translateY(-50%); font-size:12.5px; font-weight:600; white-space:nowrap; }
.vf-trap { position:absolute; inset:0; background:rgba(59,130,246,.10); }
.vf-drop { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:12px; color:var(--muted); white-space:nowrap; }
.vf-drop.bad { color:var(--red-ink); }
.vf-pct { font-size:12.5px; color:var(--muted); text-align:right; }
.sharelegend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; color:var(--muted); font-size:12.5px; }
.sharelegend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.sharelegend i.round { border-radius:50%; }
.sharelegend i.diamond { border-radius:1px; transform:rotate(45deg) scale(.85); }
.sharelegend i.soft { opacity:.38; }
.sharelegend b { color:var(--text); font-weight:600; margin-left:2px; }
/* Dashboard "Các luồng thực hiện": 4 biểu đồ nhỏ cùng một bảng màu theo luồng */
.pdash { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pcard { background:var(--card2); border:1px solid var(--border); border-radius:12px; padding:14px 14px 10px; min-width:0; }
.pcard h3 { font-size:13.5px; font-weight:600; margin-bottom:2px; }
.pcard .hint { display:block; margin-bottom:10px; }
.pcard .chartbox { height:auto; }
.donutwrap { display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:center; }
.donutwrap .chartbox { height:180px; }
.donutleg { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.donutleg div { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:8px; align-items:center; cursor:pointer; border-radius:6px; padding:4px 6px; }
.donutleg div:hover, .donutleg div.sel { background:var(--hover); }
.donutleg div.sel span { font-weight:600; }
.donutleg i { width:10px; height:10px; border-radius:3px; }
.donutleg b { font-weight:600; } .donutleg small { color:var(--muted); font-weight:400; margin-left:6px; }
/* Thời gian ở từng màn: dot + range */
.stchart { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.strow { display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr) 56px; gap:12px; align-items:center; min-height:40px; outline:none; border-radius:8px; padding:0 6px; }
.strow:not(.axis):hover, .strow:not(.axis):focus { background:var(--hover); }
.strow:focus-visible { box-shadow:inset 0 0 0 2px var(--blue); }
.stlbl { font-size:13px; display:flex; gap:8px; align-items:center; min-width:0; }
.stlbl span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sttag { flex:none; font-size:12px; font-weight:600; padding:0 7px; border-radius:20px; border:1px solid; }
.sttag.slow { color:var(--orange); border-color:color-mix(in srgb, var(--orange) 45%, transparent); background:color-mix(in srgb, var(--orange) 10%, transparent); }
.sttag.fast { color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:var(--green-soft); }
.sttrack { position:relative; height:22px; background:linear-gradient(var(--border),var(--border)) 0 50%/100% 1px no-repeat; }
.sttrack i { position:absolute; top:50%; transform:translateY(-50%); }
.sttrack .band { height:12px; border-radius:6px; background:rgba(57,135,229,.38); }
.sttrack .whisk { height:2px; background:#5598e7; opacity:.7; }
.sttrack .dot { width:13px; height:13px; margin-left:-6.5px; border-radius:50%; background:#3987e5; box-shadow:0 0 0 2px var(--card); }
.stval { font-weight:600; font-size:13px; text-align:right; }
.strow.axis { min-height:22px; } .strow.axis .sttrack { background:none; height:16px; }
.strow.axis span { position:absolute; transform:translateX(-50%); font-size:12px; color:var(--muted); white-space:nowrap; }
.stlegend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; color:var(--muted); font-size:12.5px; }
.stlegend i { display:inline-block; vertical-align:middle; margin-right:6px; }
.stlegend .dot { width:10px; height:10px; border-radius:50%; background:#3987e5; }
.stlegend .band { width:18px; height:8px; border-radius:4px; background:rgba(57,135,229,.38); }
.stlegend .whisk { width:18px; height:2px; background:#5598e7; }
/* Số đơn theo ngày */
.odkpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:4px 0 14px; }
.odkpis > div { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.odkpis .label { color:var(--muted); font-size:12.5px; } .odkpis .value { font-size:22px; font-weight:700; margin-top:2px; }
.odkpis .sub { color:var(--muted); font-size:12px; margin-top:2px; }
details.ptab { margin-top:14px; } details.ptab summary { cursor:pointer; color:var(--muted); font-size:13px; }
details.ptab[open] summary { margin-bottom:8px; }
.sw { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:8px; vertical-align:0; }

/* ---- Màn hẹp: menu thành ngăn kéo trượt từ trái, có nút mở trên thanh mbar ---- */
/* ---- Người dùng rớt ở đâu, đi đâu (dropoff.js) ---- */
.muted { color:var(--muted); }
td small, td .muted + small { display:block; font-size:12px; margin-top:2px; }
td.wrap { white-space:normal; min-width:180px; }
.usearch { display:flex; gap:6px; } .usearch input { width:200px; } .usearch button { display:inline-flex; align-items:center; gap:6px; }
.dlegend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:-4px 0 12px; color:var(--muted); font-size:12.5px; }
.dlegend i, .kdot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; flex:none; }
.dsteps { display:flex; flex-direction:column; gap:8px; }
.dstep { border:1px solid var(--border); border-radius:10px; padding:11px 14px; cursor:pointer; background:var(--card2); transition:border-color .15s, background .15s; }
.dstep:hover { border-color:var(--blue); background:var(--hover); }
.dstep:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.dhead { display:flex; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; align-items:baseline; }
.dname { display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; }
.dname .arrow { color:var(--faint); } .dname .muted { font-size:12.5px; }
.dno { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:700; flex:none; }
.dnum { font-size:12.5px; color:var(--muted); } .dnum b { color:var(--text); font-size:14px; }
.dbar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--inset); margin:9px 0 8px; min-width:60px; }
.dbar i { display:block; height:100%; } .dbar i + i { box-shadow:inset 2px 0 0 var(--card2); }
.dtop { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:var(--muted); align-items:center; }
.dtop b { color:var(--text); font-weight:600; }
.dmore { margin-left:auto; color:var(--blue); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.dmore .ico { width:14px; height:14px; transform:rotate(-90deg); }
.vf-link { background:none; border:none; padding:2px 6px; min-height:0; border-radius:6px; text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; }
.vf-link:hover { background:var(--hover); color:var(--text); }
.vf-bar.vf-click { cursor:pointer; }
#detail .section .st { gap:10px; flex-wrap:wrap; }
#detail .section .st .hint { color:var(--faint); font-size:12px; }
#detail .ctrls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#detail .ctrls input { width:180px; } #detail .ctrls button { display:inline-flex; align-items:center; gap:6px; }
#detail tbody tr[tabindex] { cursor:pointer; } #detail tbody tr[tabindex]:hover { background:var(--hover); }
#detail tbody tr.sel { background:var(--blue-soft); } #detail tbody tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--blue); }
#detail .head .m + .p { flex:1; }
.fchip { display:inline-flex; align-items:center; gap:2px; background:var(--blue-soft); color:var(--blue); border-radius:99px; padding:1px 2px 1px 10px; font-size:12.5px; font-weight:600; }
.fchip button { min-height:0; padding:2px 4px; border-radius:99px; color:inherit; } .fchip .ico { width:13px; height:13px; }
.kchip { display:inline-flex; align-items:center; margin:0 0 0 10px; font-size:12px; color:var(--muted); }
.kchip .kdot { margin-right:4px; }
td.seq { font-size:12.5px; line-height:1.7; max-width:420px; }
.sq { color:var(--faint); margin:0 5px; }
td.res .badge { white-space:nowrap; }
.ukpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ukpis .value.err { color:var(--red); }
/* ---- Khách đặt bao nhiêu đơn (buyers.js) ---- */
.bkpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.bkpis > div, .bkpis > button { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; text-align:left; font:inherit; color:inherit; }
.bkpis .label { color:var(--muted); font-size:12.5px; }
.bkpis .value { font-size:24px; font-weight:700; letter-spacing:-.3px; margin-top:2px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.bkpis .sub { color:var(--muted); font-size:12px; margin-top:4px; line-height:1.45; } .bkpis .sub b { color:var(--text); }
.pctchip { font-size:12.5px; font-weight:600; color:var(--muted); background:var(--inset); border:1px solid var(--border); border-radius:99px; padding:0 8px; letter-spacing:0; }
.bk-zero { cursor:pointer; border-left:4px solid var(--g0) !important; transition:border-color .15s, background .15s; }
.bk-zero:hover { background:var(--hover) !important; border-color:var(--blue) !important; border-left-color:var(--g0) !important; }
.bk-zero .go { color:var(--blue); font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:2px; }
.bk-zero .go .ico { width:13px; height:13px; transform:rotate(-90deg); }
.bgrid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; }
.bcard { border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--card2); min-width:0; }
.bcard h3 { font-size:13.5px; font-weight:600; } .bcard > .hint { display:block; color:var(--faint); font-size:12px; margin-top:1px; }
.hist { display:flex; align-items:stretch; gap:8px; height:240px; margin:14px 0 6px; padding-top:4px; border-bottom:1px solid var(--border2); }
.hcol { all:unset; box-sizing:border-box; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; cursor:pointer; border-radius:6px 6px 0 0; position:relative; padding-bottom:0; }
.hcol:hover { background:var(--hover); } .hcol:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.hv { display:flex; flex-direction:column; align-items:center; line-height:1.2; margin-bottom:4px; font-size:12.5px; }
.hv b { font-weight:700; } .hv small { color:var(--muted); font-size:11px; }
.hb { display:block; width:72%; max-width:46px; background:var(--g2); border-radius:4px 4px 0 0; transition:filter .15s; }
.hcol.zero .hb { background:var(--g0); }
.hcol:hover .hb { filter:brightness(1.1); }
.hx { position:absolute; top:100%; margin-top:6px; font-size:12.5px; font-weight:600; display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.hx small { font-weight:400; color:var(--faint); font-size:11px; }
.bcard .ptab { margin-top:42px; }
.glegend { display:flex; flex-wrap:wrap; gap:4px 14px; margin:12px 0 10px; color:var(--muted); font-size:12.5px; }
.glegend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.g0 { background:var(--g0); color:var(--g0-ink); } .g1 { background:var(--g1); color:var(--g1-ink); }
.g2 { background:var(--g2); color:var(--g2-ink); } .g3 { background:var(--g3); color:var(--g3-ink); }
.cmp { display:flex; flex-direction:column; gap:4px; }
.crow { all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(56px,22%) minmax(0,1fr) 52px; gap:10px; align-items:center; padding:5px 6px; border-radius:7px; cursor:pointer; font-size:12.5px; }
.crow:hover { background:var(--hover); } .crow:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.ck { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.cbar { display:flex; gap:2px; height:22px; }
.cbar i { display:grid; place-items:center; min-width:3px; font-style:normal; font-size:11px; font-weight:600; overflow:hidden; }
.cbar i:first-child { border-radius:4px 0 0 4px; } .cbar i:last-child { border-radius:0 4px 4px 0; } .cbar i:only-child { border-radius:4px; }
/* Ghi chú "cách tính": gập lại, mở khi cần - không để đoạn văn dài che số liệu */
details.howto { margin-top:12px; color:var(--muted); font-size:12.5px; line-height:1.6; }
details.howto summary { cursor:pointer; color:var(--faint); font-weight:600; width:max-content; border-radius:4px; list-style:none; display:inline-flex; align-items:center; gap:6px; }
details.howto summary::-webkit-details-marker { display:none; }
details.howto summary::before { content:'ⓘ'; font-weight:400; }
details.howto summary:hover { color:var(--text); }
details.howto[open] summary { margin-bottom:4px; }
.fphint { color:var(--faint); font-size:12px; margin-top:10px; } .fphint b { color:var(--muted); font-weight:600; }
button.more { margin-top:8px; font-size:12.5px; color:var(--blue); padding:4px 10px; min-height:0; }
.loading { opacity:.45; pointer-events:none; transition:opacity .15s; }
.note.slim { margin:10px 0 0; padding:8px 12px; font-size:12.5px; }
.note.slim .ico { width:15px; height:15px; flex:none; margin-top:2px; color:var(--amber); }
/* ---- Nguồn vào app (sources.js) ---- */
#page-sources .odkpis { margin-top:0; }
.odkpis .value.sm { font-size:17px; display:flex; align-items:center; gap:2px; line-height:1.3; }
h3.subh { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 8px; }
#page-sources td small { display:block; }
@media (max-width:980px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .mbar { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:var(--z-mbar); height:56px; padding:0 8px;
          background:color-mix(in srgb, var(--side) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
          border-bottom:1px solid var(--border); }
  .mbar .brand { padding:0; flex:1; }
  .mbar .brand .logo { width:30px; height:30px; border-radius:9px; }
  .mbar .iconbtn { width:44px; height:44px; padding:0; }
  .mbar .iconbtn .ico { width:20px; height:20px; }
  .side { position:fixed; left:0; top:0; bottom:0; z-index:var(--z-drawer); width:min(300px, 86vw); height:auto;
          transform:translateX(-102%); transition:transform .25s var(--ease-out); box-shadow:var(--shadow-lg); visibility:hidden; }
  body.nav-open .side { transform:none; visibility:visible; }
  body.nav-open { overflow:hidden; }
  .side .side-close { display:inline-flex; width:44px; height:44px; padding:0; }
  .nav button { min-height:44px; }
  .nav button.active::before { display:none; }
  .main { padding:16px 16px 32px; }
  .filters { position:static; box-shadow:var(--shadow-sm); }
  .grid2, .grid2.even { grid-template-columns:1fr; }
  .fdgrid, .fdgrid.even, .pdash, .bgrid { grid-template-columns:minmax(0,1fr); }
  .odkpis { gap:8px; } .odkpis .value { font-size:17px; } .strow { grid-template-columns:minmax(0,34%) minmax(0,1fr) 48px; gap:8px; }
  /* màn hẹp: nhãn chậm/nhanh xuống dòng dưới tên màn, trục chỉ giữ 3 mốc */
  .stlbl { flex-direction:column; align-items:flex-start; gap:2px; } .stlbl span:first-child { max-width:100%; }
  .strow { padding:4px 6px; } .strow.axis span:nth-child(2), .strow.axis span:nth-child(4) { display:none; }
  .donutwrap { grid-template-columns:minmax(0,1fr); justify-items:center; } .donutwrap .chartbox { height:160px; width:160px; }
  .donutleg { width:100%; }
  .vf-row, .vf-conn { grid-template-columns:minmax(0,38%) minmax(0,1fr) 44px; }
  /* Ô nhập 16px: nhỏ hơn thì Safari iOS tự phóng to cả trang khi bấm vào (readable-font-size) */
  select, input:not([type="checkbox"]) { font-size:16px; }
  .exportrow .field { width:auto; flex:1 1 180px; }
}
@media (max-width:560px) {
  .topbar { flex-direction:column; align-items:flex-start; gap:8px; }
  .topbar h1 { font-size:21px; }
  .filters > span, .filters select { flex:1 1 140px; } .filters select, .withico { width:100%; }
  .filters > label { flex:1; }
  .dates { width:100%; } .dates input { flex:1; min-width:0; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .card { padding:12px 14px; } .card .spark { margin:8px -14px -12px; }
  .card .value { font-size:22px; }
  .card .label { letter-spacing:.2px; }
  .fgrid { grid-template-columns:minmax(0,1fr); }
  .farow { grid-template-columns:minmax(0,1fr) 84px; }
  .farow svg { width:84px; }
  .panel { padding:14px; }
  .searchgrid { grid-template-columns:minmax(0,1fr); }
  .exportrow-t { min-width:0; width:100%; }
  .usearch { width:100%; } .usearch input { flex:1; width:auto; min-width:0; }
  .dmore { margin-left:0; }
  .ukpis { grid-template-columns:minmax(0,1fr); }
  #detail .ctrls input { flex:1; width:auto; }
  #detail .kv { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bkpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .bkpis .value { font-size:19px; }
  .hist { gap:3px; height:200px; } .hv small { display:none; }
  #page-sources .odkpis { grid-template-columns:minmax(0,1fr); }
}
/* Màn cảm ứng: vùng bấm tối thiểu 44px. */
@media (pointer:coarse) {
  select, input:not([type="checkbox"]), button:not(.thbtn):not(.retry) { min-height:44px; }
  .thbtn { padding:6px 0; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}