/* theBlindBox Audience — theo brand guideline eMailBase: Warm Amber & Cream Canvas, Inter, Lucide icons */
:root{
  --amber:#D97706;--amber-700:#B45309;--amber-800:#92400E;--amber-100:#FEF3C7;--amber-tint:rgba(217,119,6,.08);
  --brand-ink:#3D2314;--ink:#152033;--ink-soft:#45556C;--muted:#64748B;
  --bg:#FFFAF0;--panel:#FFFFFF;--mist:#F7F8FB;--line:#EBDCCC;--line-soft:#F1E7DA;--track:#F4EEE6;
  --c-wifi:#0891B2;--c-seller:#D97706;--c-koc:#7C3AED;--c-none:#E2E8F0;
  --ok:#16A34A;--bad:#DC2626;--bad-bg:#FEE2E2;--shadow:0 1px 2px rgba(61,35,20,.05),0 8px 24px -12px rgba(61,35,20,.12);
  --strong:#2A180E;--radius:16px;--top-h:62px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --amber:#FBBF24;--amber-700:#FBBF24;--amber-800:#FDE68A;--amber-100:rgba(251,191,36,.14);--amber-tint:rgba(251,191,36,.10);
  --brand-ink:#F8FAFC;--ink:#E2E8F0;--ink-soft:#CBD5E1;--muted:#94A3B8;
  --bg:#0F172A;--panel:#1E293B;--mist:#172033;--line:#334155;--line-soft:#273449;--track:#263244;
  --c-wifi:#22D3EE;--c-seller:#FBBF24;--c-koc:#A78BFA;--c-none:#475569;
  --ok:#4ADE80;--bad:#F87171;--bad-bg:rgba(248,113,113,.12);--shadow:0 1px 2px rgba(0,0,0,.3);--strong:#F8FAFC;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
b,strong{color:var(--strong);font-weight:700}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:16px;padding-block:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wm{font-weight:800;font-size:19px;letter-spacing:-.025em;color:var(--brand-ink);white-space:nowrap;display:flex;align-items:baseline;gap:10px}
.wm .a{color:var(--amber)}
.wm small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted)}
.wm.big{font-size:30px}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:none;color:var(--ink-soft);font:600 13px var(--font);
  padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{background:var(--amber-tint);color:var(--amber-800)}
.tab[aria-selected="true"]{background:var(--amber-100);color:var(--amber-800);border-color:var(--amber)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.d-wifi{background:var(--c-wifi)}.d-seller{background:var(--c-seller)}.d-koc{background:var(--c-koc)}
.who{display:flex;align-items:center;gap:8px;margin:0}
.who-n{font-size:12.5px;font-weight:600;color:var(--muted)}

/* ---------- Page ---------- */
main{max-width:1320px;margin:0 auto;padding-block:24px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.view{display:flex;flex-direction:column;gap:18px}
.body{display:flex;flex-direction:column;gap:18px;transition:opacity .2s}
.body.busy{opacity:.55;pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-700)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.2)}
h1,h2{font-size:clamp(23px,3.2vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--brand-ink);margin:6px 0 8px;text-wrap:balance}
.lead{color:var(--ink-soft);font-size:15px;max-width:760px;margin:0}
h3{font-size:15px;font-weight:700;color:var(--brand-ink);margin:0}
.note{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.foot{font-size:12px;color:var(--muted);text-align:center;margin:28px 0 0}
.code{background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
.setup{max-width:680px}
.import-f{margin:0}
.setup code{background:var(--mist);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12.5px}

/* ---------- KPI ---------- */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .l{font-size:12px;font-weight:600;color:var(--muted)}
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--brand-ink);line-height:1.2;overflow-wrap:anywhere}
.kpi .s{font-size:12px;color:var(--ink-soft)}
.kpi.hero{background:var(--amber-100);border-color:var(--amber)}
.kpi.hero .v{color:var(--amber-800)}

/* ---------- Source cards ---------- */
.srcs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.src{font:inherit;text-align:left;color:inherit;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,box-shadow .15s}
.src:hover,.src:focus-visible{border-color:var(--sc);box-shadow:var(--shadow)}
.src-h{display:flex;align-items:center;gap:10px}
.src-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent)}
.src-h .t{font-weight:700;color:var(--brand-ink);font-size:15px}
.src-h .go{margin-left:auto;color:var(--muted);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.src-h .go .ico{width:13px;height:13px}
.src .big{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--brand-ink)}
.src .big span{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:6px}
.meters{display:grid;gap:7px}
.meter{display:grid;grid-template-columns:72px 1fr 46px;gap:10px;align-items:center;font-size:12px;color:var(--ink-soft)}
.meter .tr{height:6px;border-radius:6px;background:var(--track);overflow:hidden}
.meter .tr i{display:block;height:100%;background:var(--sc);border-radius:6px}
.meter .p{text-align:right;font-weight:600;color:var(--ink)}

/* ---------- Cards & charts ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card.wide{grid-column:1/-1}
.card-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
.hb{display:grid;gap:6px}
.hb-r{display:grid;grid-template-columns:minmax(90px,150px) 1fr 64px;gap:10px;align-items:center;font-size:12.5px;border-radius:8px;padding:3px 4px;margin:0 -4px}
.hb-r.click{cursor:pointer}
.hb-r.click:hover{background:var(--amber-tint)}
.hb-r.on{background:var(--amber-100)}
.hb-r.dim{opacity:.45}
.hb-l{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t{height:14px;display:flex;border-radius:4px;overflow:hidden;background:var(--track)}
.hb-t i{display:block;height:100%}
.hb-v{text-align:right;font-weight:600;color:var(--ink)}
.cols{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:18px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0;border-radius:8px}
.col.click{cursor:pointer}
.col.click:hover .col-b{filter:brightness(1.08)}
.col.dim{opacity:.4}
.col-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--line)}
.col-b{display:block;width:100%;max-width:32px;border-radius:4px 4px 0 0;min-height:1px}
.col-l{font-size:11.5px;color:var(--muted);white-space:nowrap}
.col-v{font-size:11px;font-weight:600;color:var(--ink-soft)}
.st{display:grid;gap:10px}
.st-r{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;font-size:12.5px}
.st-r>span{font-weight:600;color:var(--ink)}
.st-t{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--track)}
.st-t i{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;font-style:normal;color:#fff;overflow:hidden;white-space:nowrap}
.mx-wrap{overflow-x:auto}
.mx{width:100%;border-collapse:collapse;font-size:12.5px;min-width:420px}
.mx th{text-align:left;font-weight:600;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.mx td{padding:8px;border-bottom:1px solid var(--line-soft)}
.mx td.c{width:26%}
.cell{display:flex;align-items:center;gap:8px}
.cell .tr{flex:1;height:6px;border-radius:6px;background:var(--track);overflow:hidden}
.cell .tr i{display:block;height:100%;border-radius:6px}
.cell b{min-width:38px;text-align:right;font-weight:600}
.ov{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.ov>div{border:1px dashed var(--line);border-radius:12px;padding:12px}
.ov .v{font-size:20px;font-weight:800;color:var(--brand-ink)}
.ov .l{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.ov .l i{width:8px;height:8px;border-radius:50%}

/* ---------- Filters ---------- */
.filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 8px);z-index:10;box-shadow:var(--shadow)}
.fopts{display:contents}
.sbox{flex:1 1 260px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--bg);min-width:0}
.sbox:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-tint)}
.sbox .ico{color:var(--muted)}
.sbox input{flex:1;border:0;background:none;outline:none;font:500 15px var(--font);color:var(--ink);padding:10px 0;min-width:0}
select,.chip{font:500 13px var(--font);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--amber-100);border-color:var(--amber);color:var(--amber-800)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 13px var(--font);border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--amber);color:var(--amber-800)}
.btn.ghost{border-color:transparent;background:none}
.btn.pri{background:var(--amber);border-color:var(--amber);color:#fff;font-size:14px;padding:12px 16px}
.btn.pri:hover{background:var(--amber-700);color:#fff}
.btn.block{width:100%}
.ftoggle{display:none}
.ftoggle b{background:var(--amber);color:#fff;border-radius:999px;font-size:11px;min-width:18px;padding:0 5px;line-height:18px}
.count{font-size:12.5px;color:var(--ink-soft);margin-left:auto;white-space:nowrap}
.count b{color:var(--amber-800)}
.count.err{color:var(--bad)}

/* ---------- Table ---------- */
.tbl-wrap{overflow:auto;max-height:640px;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
table.rec{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:980px}
.rec th{position:sticky;top:0;background:var(--mist);text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.rec td{padding:8px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;color:var(--ink);vertical-align:middle}
.rec tr:hover td{background:var(--amber-tint)}
.rec td.n{text-align:right}
.rec .mut{color:var(--muted)}
.who-c{display:flex;align-items:center;gap:10px;min-width:210px}
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--track);flex-shrink:0}
.who-c .nm{font-weight:600;color:var(--brand-ink);line-height:1.25}
.who-c a{color:var(--amber-700);text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-size:12px}
.who-c a:hover{text-decoration:underline}
.who-c a .ico{width:12px;height:12px}
.cp{font:inherit;color:inherit;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.cp:hover{background:var(--amber-100)}
.cp .ico{width:13px;height:13px;color:var(--muted)}
.rv{font:inherit;color:var(--ink-soft);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:3px 8px 3px 3px;margin:-3px -8px -3px -3px}
.rv:hover{background:var(--amber-tint);color:var(--amber-800)}
.rv-t{letter-spacing:.02em}
.rv-ic{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:var(--amber-100);color:var(--amber-700);flex-shrink:0}
.rv-ic .ico{width:14px;height:14px}
.rv-ic.on{background:var(--amber);color:#fff}
.ct{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.ct-v{color:var(--brand-ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
a.ct-v{white-space:nowrap}
a.ct-v:hover{color:var(--amber-700);text-decoration:underline}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,transparent)}
.tbl-f{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted);white-space:normal}

.tip{position:fixed;z-index:50;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:8px 10px;font-size:12px;color:var(--ink);max-width:240px}
.tip .h{color:var(--muted);font-weight:600;margin-bottom:2px}
.tip .r{display:flex;align-items:center;gap:6px}
.tip .r i{width:8px;height:8px;border-radius:2px}
.tip .r b{margin-left:auto;padding-left:10px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--brand-ink);color:var(--bg);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;z-index:60}

/* ---------- Login ---------- */
.login-body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  background:radial-gradient(900px 420px at 10% -10%,rgba(217,119,6,.16),transparent 60%),radial-gradient(800px 420px at 100% 0%,rgba(8,145,178,.12),transparent 60%),var(--bg)}
.login{width:100%;max-width:420px;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.login-card form{display:flex;flex-direction:column;gap:14px}
.login-sub{margin:-6px 0 4px;color:var(--ink-soft)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.fld input{font:500 16px var(--font);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none}
.fld input:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-tint)}
.alert{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600}
.login-foot{text-align:center;font-size:12px;color:var(--muted)}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  :root{--top-h:104px}
  .top-in{flex-wrap:wrap;gap:8px 12px}
  .tabs{order:3;flex-basis:100%;margin:0 -4px}
  .who{margin-left:auto}
  .hide-sm{display:none}
  main{padding-block:16px 40px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 14px}
  .kpi.hero{grid-column:1/-1}
  .kpi .v{font-size:22px}
  .card{padding:16px}
  .hb-r{grid-template-columns:96px 1fr 50px;gap:8px}
  .filters{position:static;padding:10px}
  .sbox{flex-basis:0}
  .ftoggle{display:inline-flex}
  .fopts{display:none;width:100%;gap:8px;grid-template-columns:1fr 1fr}
  .fopts.open{display:grid}
  .fopts select,.fopts .chip,.fopts .btn{width:100%}
  .count{margin-left:0;width:100%;white-space:normal}
  .filters[data-scope="overview"] .btn span{display:none}
  /* bảng thành dạng thẻ */
  .tbl-wrap{max-height:none;border:0;border-radius:0;overflow:visible}
  table.rec{min-width:0}
  .rec thead{display:none}
  .rec,.rec tbody,.rec tr,.rec td{display:block;width:100%}
  .rec tr{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
  .rec tr:hover td{background:none}
  .rec td{border:0;padding:0;white-space:normal;overflow-wrap:anywhere;font-size:13px}
  .rec td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .rec td.full{grid-column:1/-1}
  .rec td.n{text-align:left}
  .rec td.hide-m{display:none}
  .rec td.empty{grid-column:1/-1}
  .who-c{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}