/* ═══════════════════════════════════════════════════════════════
   Creative Center — bàn duyệt creative · Dmobin Studio

   Nguyên tắc: TO, THOÁNG, GẤP LẠI ĐƯỢC.
   Số lớn đọc từ xa · creative là thứ sáng nhất · mọi khối đều thu gọn
   được · giải thích nằm sau dấu "?" chứ không trải ra trang.

   Thuật ngữ ngành giữ nguyên tiếng Anh (Impression, Click, Install,
   CTR, IPM, CVR, eCPI, benchmark) — dịch ra chỉ làm khó hiểu thêm.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Font sạch kiểu SaaS (dcenter): tiêu đề & số lớn dùng sans thường, không dùng Bahnschrift co hẹp */
  --display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Noto Sans","Roboto",sans-serif;
  --mono:"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  --bg:#0D1014; --panel:#151920; --raised:#1C212A; --sunken:#090C10;
  --line:#232A33; --line2:#39424E;
  --ink:#EDF0F4; --ink2:#9AA5B4; --ink3:#68747F;
  --accent:#FF7A45; --accent-bg:#2B1A11; --accent-line:#7E4023;
  --win:#3ECF8E; --win-bg:#102A1E;
  --mid:#8A94A6; --mid-bg:#1C212A;
  --lose:#F2555A; --lose-bg:#2B1417;
  --na:#4A5462; --na-bg:#151920;
  --gold:#F2B544; --gold-bg:#2C2211; --gold-line:#7C5D1F;
  --c1:#7C9CFF; --c1b:#1A2138;   /* blue  */
  --c2:#C08CFF; --c2b:#241B38;   /* purple*/
  --c3:#FFB454; --c3b:#2C2210;   /* amber */
  --h-teal:#37B6C4;
  --hm-blue:#5B7FFF; --hm-green:#33C489; --hm-teal:#2EB8C6; --hm-amber:#FFB454; --hm-grey:#7E8A98;
  --sh:0 14px 38px -20px rgba(0,0,0,.92);
  --r:16px;
}
:root[data-theme="light"]{
  --bg:#F5F6F8; --panel:#FFFFFF; --raised:#F7F8FA; --sunken:#ECEFF3;
  --line:#E8EBF0; --line2:#D3D9E1;
  --ink:#0F1319; --ink2:#586573; --ink3:#8794A2;
  --accent:#D4511C; --accent-bg:#FDEDE4; --accent-line:#F0C4AC;
  --win:#0D7A4E; --win-bg:#DFF3E9;
  --mid:#6A7787; --mid-bg:#ECEFF3;
  --lose:#C22F39; --lose-bg:#FBE6E7;
  --na:#96A2AF; --na-bg:#EDF0F3;
  --gold:#8F6410; --gold-bg:#FBF0D8; --gold-line:#E0C27E;
  --c1:#3B5BDB; --c1b:#E7ECFF;
  --c2:#7C4DDB; --c2b:#F1E9FF;
  --c3:#C77D0E; --c3b:#FBEFD6;
  --h-teal:#0E8A98;
  --hm-blue:#3F6BE0; --hm-green:#1FA968; --hm-teal:#0C97A8; --hm-amber:#E0900C; --hm-grey:#A9B3BF;
  --sh:0 1px 2px rgba(15,19,25,.04), 0 12px 28px -22px rgba(15,19,25,.42);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F5F6F8; --panel:#FFFFFF; --raised:#F7F8FA; --sunken:#ECEFF3;
    --line:#E8EBF0; --line2:#D3D9E1;
    --ink:#0F1319; --ink2:#586573; --ink3:#8794A2;
    --accent:#D4511C; --accent-bg:#FDEDE4; --accent-line:#F0C4AC;
    --win:#0D7A4E; --win-bg:#DFF3E9;
    --mid:#6A7787; --mid-bg:#ECEFF3;
    --lose:#C22F39; --lose-bg:#FBE6E7;
    --na:#96A2AF; --na-bg:#EDF0F3;
    --gold:#8F6410; --gold-bg:#FBF0D8; --gold-line:#E0C27E;
    --c1:#3B5BDB; --c1b:#E7ECFF;
    --c2:#7C4DDB; --c2b:#F1E9FF;
    --c3:#C77D0E; --c3b:#FBEFD6;
    --sh:0 1px 2px rgba(15,19,25,.04), 0 12px 28px -22px rgba(15,19,25,.42);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:15px/1.55 var(--sans); -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; letter-spacing:.015em}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
button{font:inherit; cursor:pointer; color:inherit}
code{font-family:var(--mono); font-size:.9em}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2); border-radius:7px; border:3px solid var(--bg)}

/* ── thanh trên ──────────────────────────────────────── */
.top{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:26px;
  padding:0 24px; height:58px; background:var(--panel); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; font:600 17px var(--display); letter-spacing:.02em}
.mk{width:26px; height:26px; border-radius:8px; position:relative;
  background:linear-gradient(150deg,var(--accent),#B33C15)}
.mk::after{content:""; position:absolute; inset:8px 8px auto auto; width:6px; height:6px;
  border-radius:50%; background:#fff; opacity:.92}
.nav{display:flex; gap:2px; flex:1; overflow-x:auto}
.nav button{padding:8px 16px; border:0; border-radius:10px; background:none; color:var(--ink2);
  font-size:15px; font-weight:550; white-space:nowrap; transition:background .12s,color .12s}
.nav button:hover{background:var(--raised); color:var(--ink)}
.nav button.on{background:var(--accent-bg); color:var(--accent); font-weight:650}
.icon{width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink2); font-size:16px; line-height:1}
.icon:hover{border-color:var(--accent); color:var(--accent)}

/* ── thanh lọc ───────────────────────────────────────── */
.bar{position:sticky; top:58px; z-index:35; display:flex; align-items:center; gap:9px;
  flex-wrap:wrap; padding:11px 24px; background:var(--bg); border-bottom:1px solid var(--line)}
.bar .spacer{flex:1}
.tools{display:flex; align-items:center; gap:9px}
.pill{display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:11px;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); font-size:14px;
  transition:border-color .12s,color .12s}
.pill:hover,.pill.on{border-color:var(--accent); color:var(--accent)}
.pill.date{font-family:var(--mono)}
.pill.date::before{content:"🗓"; font-family:var(--sans); opacity:.85}
.pill small{font-family:var(--sans); color:var(--ink3); font-size:12.5px}
.pill.on small{color:inherit; opacity:.8}
.pill b{background:var(--accent); color:#fff; border-radius:10px; padding:0 7px; font-size:12px}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip-f{display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 12px; border-radius:20px;
  background:var(--accent-bg); border:1px solid var(--accent-line); color:var(--accent); font-size:13px}
.chip-f i{font-style:normal; opacity:.7; font-size:11.5px}
.chip-f button{border:0; background:none; color:inherit; padding:0 3px; font-size:14px; line-height:1; opacity:.75}
.chip-f button:hover{opacity:1}

.fpanel{position:sticky; top:110px; z-index:34; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px;
  padding:14px 24px 16px; background:var(--panel); border-bottom:1px solid var(--line)}
.fpanel[hidden]{display:none}
.fld{display:grid; gap:5px}
.fld label{color:var(--ink3); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:650}
select,input,.btn{font:14px var(--sans); padding:9px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); width:100%}
.btn{width:auto}
select:hover,input:hover,.btn:hover{border-color:var(--line2)}
select.on,input.on{border-color:var(--accent); color:var(--accent)}
.btn.pri{background:var(--accent-bg); border-color:var(--accent-line); color:var(--accent); font-weight:650}
.seg{display:inline-flex; border:1px solid var(--line2); border-radius:11px; overflow:hidden}
.seg button{padding:9px 16px; border:0; background:var(--panel); color:var(--ink2); font-size:14px}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--accent-bg); color:var(--accent); font-weight:650}
.seg button:hover:not(.on){color:var(--ink)}
.capbar{margin-bottom:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
@media(max-width:620px){ .capbar .seg{width:100%; overflow-x:auto} }

/* ── bộ chọn ngày ────────────────────────────────────── */
.picker{position:fixed; z-index:60; display:flex; background:var(--panel);
  border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden}
.picker[hidden]{display:none}
.pk-pre{width:160px; border-right:1px solid var(--line); padding:9px; display:flex;
  flex-direction:column; gap:2px; background:var(--raised)}
.pk-pre button{text-align:left; padding:9px 13px; border:0; border-radius:9px; background:none;
  color:var(--ink2); font-size:14px}
.pk-pre button:hover{background:var(--panel); color:var(--ink)}
.pk-pre button.on{background:var(--accent-bg); color:var(--accent); font-weight:650}
.pk-cal{padding:13px 16px 11px}
.pk-nav{display:flex; align-items:center; gap:4px; padding:0 2px 10px}
.pk-nav button{width:28px; height:28px; border:0; border-radius:8px; background:none;
  color:var(--ink3); font-size:14px}
.pk-nav button:hover{background:var(--raised); color:var(--accent)}
.pk-nav span{flex:1; text-align:center; font:600 15px var(--display); letter-spacing:.03em}
.pk-months{display:flex; gap:24px}
.mon{width:230px}
.mon h4{margin:0 0 6px; text-align:center; font:600 13px var(--display); color:var(--ink2); letter-spacing:.05em}
.mon .dow,.mon .days{display:grid; grid-template-columns:repeat(7,1fr)}
.mon .dow span{text-align:center; font-size:11px; color:var(--ink3); padding:4px 0; font-weight:650}
.mon .days button{height:31px; border:0; background:none; color:var(--ink); font:13px var(--mono)}
.mon .days button.out{color:var(--ink3); opacity:.4}
.mon .days button.off{color:var(--ink3); opacity:.25; cursor:not-allowed}
.mon .days button:hover:not(.off){background:var(--raised)}
.mon .days button.in{background:var(--accent-bg)}
.mon .days button.e{background:var(--accent); color:#fff; font-weight:650}
.mon .days button.e.s{border-radius:8px 0 0 8px}
.mon .days button.e.t{border-radius:0 8px 8px 0}
.mon .days button.e.s.t{border-radius:8px}
.pk-foot{display:flex; align-items:center; gap:10px; padding-top:11px; margin-top:9px;
  border-top:1px solid var(--line); color:var(--ink3); font-size:12.5px}
.pk-foot span{flex:1}

/* ── trang ───────────────────────────────────────────── */
main{max-width:1580px; margin:0 auto; padding:24px 24px 80px; display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr)}
main > *{min-width:0}
.two{display:grid; grid-template-columns:1fr 1fr; gap:20px; min-width:0}
.two > *{min-width:0}
@media(max-width:1000px){ .two{grid-template-columns:1fr} }

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh)}
.card > header{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--line)}
.card.shut > header{border-bottom:0}
.card > header h2{font-size:17px}
.card > header .right{margin-left:auto; display:flex; gap:9px; align-items:center}
.card .pad{padding:20px}
.card.shut > *:not(header){display:none}
.fold{width:26px; height:26px; border:0; border-radius:8px; background:none; color:var(--ink3);
  font-size:11px; line-height:1; transition:transform .16s, color .12s; flex:none}
.fold:hover{color:var(--accent); background:var(--raised)}
.card.shut .fold{transform:rotate(-90deg)}
.hint{color:var(--ink3); font-size:13px}
.badge{font-size:12.5px; padding:3px 11px; border-radius:20px; font-weight:650}
.badge.win{background:var(--win-bg); color:var(--win)}
.badge.lose{background:var(--lose-bg); color:var(--lose)}

.tip{width:19px; height:19px; border-radius:50%; border:1px solid var(--line2); color:var(--ink3);
  font-size:11px; display:inline-grid; place-items:center; position:relative; cursor:help; flex:none}
.tip:hover,.tip:focus{border-color:var(--accent); color:var(--accent)}
.tip em{display:none; position:absolute; left:-6px; top:26px; z-index:45; width:min(400px,72vw);
  background:var(--raised); border:1px solid var(--line2); border-radius:11px; padding:13px 15px;
  font:normal 13.5px/1.65 var(--sans); color:var(--ink2); box-shadow:var(--sh); text-align:left}
.tip:hover em,.tip:focus em{display:block}

/* ── số lớn ──────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.stat{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--sh); padding:20px 22px; min-height:120px; transition:transform .13s, box-shadow .13s}
.stat:hover{transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.stat .lb{color:var(--ink3); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:650; padding-right:52px}
.stat .vl{font:600 38px/1 var(--display); font-variant-numeric:tabular-nums; margin-top:12px}
.stat .sb{color:var(--ink3); font-size:12.5px; margin-top:10px}
.stat.win .vl{color:var(--win)} .stat.lose .vl{color:var(--lose)} .stat.acc .vl{color:var(--accent)}
.stat-ic{position:absolute; top:18px; right:18px; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center}
.stat-ic svg{width:23px; height:23px}
.t-blue{background:var(--c1b); color:var(--c1)}
.t-purple{background:var(--c2b); color:var(--c2)}
.t-amber,.t-acc{background:var(--c3b); color:var(--c3)}
.t-win{background:var(--win-bg); color:var(--win)}
.t-lose{background:var(--lose-bg); color:var(--lose)}

.funnel{display:grid; grid-template-columns:repeat(3,1fr)}
.fst{padding:18px 20px; border-right:1px solid var(--line)}
.fst:last-child{border-right:0}
.fst .lb{color:var(--ink3); font-size:12px; text-transform:uppercase; letter-spacing:.07em; font-weight:650}
.fst .vl{font:600 32px/1.05 var(--display); font-variant-numeric:tabular-nums; margin-top:8px}
.fst .rt{margin-top:5px; font:14px var(--mono); color:var(--accent)}

/* donut kết quả chấm */
.vwrap{display:flex; align-items:center; gap:38px; flex-wrap:wrap}
.donut{flex:none}
.donut .dnum{font:600 30px var(--display); fill:var(--win); font-variant-numeric:tabular-nums}
.donut .dlb{font:650 12px var(--sans); fill:var(--ink3); letter-spacing:.12em}
.vside{flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px}
.vlg-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line)}
.vlg-row:last-child{border-bottom:0}
.vlg-dot{width:12px; height:12px; border-radius:4px; flex:none}
.vlg-k{flex:1; font:600 15px var(--sans); color:var(--ink2)}
.vlg-n{font:600 20px var(--display); font-variant-numeric:tabular-nums; min-width:52px; text-align:right}
.vlg-p{color:var(--ink3); font:14px var(--mono); min-width:44px; text-align:right}

/* ── delta tăng/giảm trên stat card ──────────────────── */
.stat .sb.sub{color:var(--ink3)}
.delta{display:inline-flex; align-items:center; gap:5px; font:650 13px var(--sans)}
.delta em{font-style:normal; font-weight:400; font-size:11.5px; color:var(--ink3)}
.delta.up{color:var(--win)} .delta.down{color:var(--lose)} .delta.flat{color:var(--ink3)}

/* ── biểu đồ cột xu hướng ────────────────────────────── */
/* biểu đồ cột: vừa khung (KHÔNG scroll), lưới trục Y, số trên đầu cột khi ít cột */
.trendc{position:relative; height:250px; padding:24px 16px 24px 54px; overflow:hidden}
.plot{position:absolute; left:54px; right:16px; top:24px; bottom:24px}
.gline{position:absolute; left:0; right:0; height:0; border-top:1px dashed var(--line); pointer-events:none}
.gline.base{border-top-style:solid; border-top-color:var(--line2)}
.gline > span{position:absolute; right:calc(100% + 9px); top:-0.62em; font:11px var(--mono);
  color:var(--ink3); white-space:nowrap; font-variant-numeric:tabular-nums}
.bars2{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:7px}
.barcol{flex:0 1 54px; min-width:0; height:100%; position:relative; display:flex;
  flex-direction:column; justify-content:flex-end; align-items:center; outline:none; cursor:default}
.tbar{position:relative; width:100%; min-height:2px; border-radius:4px 4px 0 0; transition:filter .12s}
.barcol:hover .tbar,.barcol:focus .tbar{filter:brightness(1.1) saturate(1.08)}
.barnum{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:5px;
  font:600 10.5px/1 var(--mono); color:var(--ink2); white-space:nowrap; font-variant-numeric:tabular-nums}
/* nhiều cột: số ẩn, rê/chạm vào cột mới hiện (đè lên nền, đọc rõ) */
.barnum.hov{opacity:0; transition:opacity .1s; padding:2px 5px; border-radius:6px;
  background:var(--panel); box-shadow:0 2px 8px -3px rgba(0,0,0,.5); z-index:5}
.barcol:hover .barnum.hov,.barcol:focus .barnum.hov{opacity:1}
.barx{position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:6px;
  font:10.5px/1 var(--mono); color:var(--ink3); white-space:nowrap}

/* ── thanh ngang: task theo loại ─────────────────────── */
.hbars{display:flex; flex-direction:column; gap:15px}
.hb{display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:14px}
.hb-l{font:600 14px var(--sans); color:var(--ink2)}
.hb-track{position:relative; height:16px; background:var(--sunken); border-radius:8px; overflow:hidden}
.hb-track i{position:absolute; left:0; top:0; height:100%; border-radius:8px}
.hb-tot{background:var(--c1)}
.hb-v{font:600 17px var(--display); font-variant-numeric:tabular-nums; min-width:40px; text-align:right}

/* ── heatmap: người × loại ───────────────────────────── */
table.heat td.hm,table.heat td.hm0{text-align:center; font:600 13px var(--mono); border-radius:6px}
table.heat td.hm0{color:var(--ink3)}
table.heat th{text-align:center} table.heat th.l,table.heat td.l{text-align:left}

/* ── vinh danh gọn: 3 card ngang ─────────────────────── */
.honor-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){ .honor-row{grid-template-columns:1fr} }
.hcard{display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel); transition:border-color .13s, transform .13s}
.hcard:hover{transform:translateY(-2px)}
.hcard.gold{border-color:var(--gold-line); background:linear-gradient(120deg,var(--gold-bg),transparent 70%)}
.hcard.gold:hover{border-color:var(--gold)}
.hcard.silver:hover,.hcard.bronze:hover{border-color:var(--accent)}
.hmedal{font-size:26px; flex:none}
.hthumb{width:46px; height:62px; flex:none; border-radius:9px; overflow:hidden; background:var(--sunken);
  display:grid; place-items:center}
.hthumb img,.hthumb video{width:100%; height:100%; object-fit:contain; display:block}
.hthumb .none{color:var(--ink3); font-size:11px}
.hmeta{min-width:0; display:flex; flex-direction:column; gap:5px}
.hname{font:600 18px var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hnums{font-size:12.5px; color:var(--ink3)}
.hnums b{color:var(--ink2); font-family:var(--mono)}
/* danh sách hạng sau — nhẹ, không nổi bật */
.hrest{margin-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column}
.hrr{display:flex; align-items:center; gap:14px; padding:9px 6px; border:0; border-bottom:1px solid var(--line);
  background:none; text-align:left; width:100%}
.hrr:last-child{border-bottom:0}
.hrr:hover{background:var(--raised)}
.hrr-rk{width:24px; text-align:center; font:650 13px var(--mono); color:var(--ink3); flex:none}
.hrr-nm{flex:1; min-width:0; font:600 14px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hrr-nums{font:13px var(--sans); color:var(--ink3); white-space:nowrap}
.hrr-nums .w{font-family:var(--mono); color:var(--win); font-weight:650}
.hrr.zero .hrr-nm{color:var(--ink3)}
.hrr.zero .hrr-nums .w{color:var(--ink3)}

/* ── bảng ────────────────────────────────────────────── */
.tw{overflow:auto; max-height:min(74vh,900px); border-radius:0 0 var(--r) var(--r)}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:14px}
th,td{padding:10px 14px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th.l,td.l{text-align:left}
thead th{position:sticky; top:0; z-index:3; background:var(--raised); color:var(--ink3);
  font:650 12px/1.3 var(--sans); letter-spacing:.05em; text-transform:uppercase;
  padding:12px 14px; border-bottom:1px solid var(--line2)}
thead th.so{cursor:pointer; user-select:none}
thead th.so:hover{color:var(--accent)}
thead th i{color:var(--accent); font-size:10px; font-style:normal; margin-left:4px}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--raised)}
td.n{font-family:var(--sans); font-size:13.5px; font-variant-numeric:tabular-nums; letter-spacing:0}
td.dim,.dim{color:var(--ink3)}
/* ô heatmap: chữ full-contrast + đậm để đọc rõ trên nền màu; bo nhẹ cho gọn */
table.heatcol td[data-heat]{color:var(--ink); font-weight:600}
table.heatcol tbody tr:hover td[data-heat]{filter:brightness(1.08)}
.b{font-weight:650}
tfoot td{position:sticky; bottom:0; background:var(--raised); font:650 13px var(--mono);
  border-top:1px solid var(--line2); border-bottom:0; color:var(--ink2)}
td.px{padding:5px 10px; width:52px}
.tn{width:40px; height:56px; border-radius:7px; overflow:hidden; background:var(--sunken);
  display:grid; place-items:center}
.tn img,.tn video{width:100%; height:100%; object-fit:contain; display:block}
.tn .none{color:var(--ink3); font-size:10px}

.vd{display:inline-flex; align-items:center; gap:7px; padding:3px 11px; border-radius:20px;
  font:650 13px var(--mono)}
.vd::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.vd-WIN{background:var(--win-bg); color:var(--win)}
.vd-MID{background:var(--mid-bg); color:var(--mid)}
.vd-LOSE{background:var(--lose-bg); color:var(--lose)}
.vd-NO_SAMPLE,.vd-NO_PEER{background:var(--na-bg); color:var(--na)}
.chip{display:inline-block; padding:2px 9px; border-radius:7px; background:var(--raised);
  color:var(--ink2); font-size:12.5px; border:1px solid var(--line)}

.idxc{display:inline-flex; align-items:center; gap:10px}
.idxb{position:relative; width:84px; height:18px; background:var(--sunken); border-radius:5px;
  overflow:hidden; flex:none}
.idxb .z{position:absolute; top:0; bottom:0; left:33.3%; width:1px; background:var(--line2)}
.idxb .f{position:absolute; top:3px; bottom:3px; border-radius:3px}
.idxv{font:650 14px var(--mono); min-width:42px; text-align:right}

.hbar{display:inline-flex; width:132px; height:12px; background:var(--sunken);
  border-radius:6px; overflow:hidden; vertical-align:-1px; margin-right:9px}
.hbar i{display:block; height:100%}
.wbar{display:inline-block; width:120px; height:10px; background:var(--sunken); border-radius:5px;
  overflow:hidden; margin-right:10px; vertical-align:0}
.wbar i{display:block; height:100%; background:var(--gold); border-radius:5px}
td.rk1{color:var(--gold); font-weight:650}
td.rk2{color:#B7C0CB; font-weight:650}
td.rk3{color:#C98B4F; font-weight:650}

/* ── lưới creative ───────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:18px}
.cc{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel);
  display:flex; flex-direction:column; text-align:left; padding:0;
  transition:border-color .13s, transform .13s}
.cc:hover{border-color:var(--accent); transform:translateY(-3px)}
.thumb{aspect-ratio:9/16; background:var(--sunken); position:relative; overflow:hidden;
  display:grid; place-items:center}
.thumb img,.thumb video{width:100%; height:100%; object-fit:contain; display:block}
/* nền mờ lấp khoảng trống khi ảnh vuông/ngang (không cắt ảnh, vẫn kín khung) */
.thumb .fill{position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(18px) brightness(.6); transform:scale(1.15); z-index:0}
.thumb img,.thumb video{position:relative; z-index:1}
.thumb .none{color:var(--ink3); font-size:12px; text-align:center; padding:0 12px}
.itag{position:absolute; left:8px; top:8px; z-index:2; background:rgba(6,9,13,.82); font:650 14px var(--mono);
  padding:3px 9px; border-radius:7px; backdrop-filter:blur(4px)}
.ply{position:absolute; right:8px; top:8px; z-index:2; background:var(--accent); color:#fff;
  font:650 11px var(--sans); padding:3px 8px; border-radius:7px; letter-spacing:.04em}
.cc .meta{padding:12px 13px 14px; display:grid; gap:5px}
.cc .cd{font:650 14px var(--mono)}
.cc .rw{display:flex; justify-content:space-between; gap:10px; color:var(--ink3); font-size:12.5px}


/* ── leaderboard gọn (Tổng quan) ─────────────────────── */
.lb{display:flex; flex-direction:column}
.lbr{display:flex; align-items:center; gap:14px; padding:13px 20px; border:0; border-top:1px solid var(--line);
  background:none; text-align:left; width:100%; transition:background .12s}
.lbr:first-child{border-top:0}
.lbr:hover{background:var(--raised)}
.lb-rank{width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:var(--sunken); color:var(--ink3); font:650 13px var(--mono)}
.lb-rank.top{background:none; font-size:19px}
.lb-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.lb-name{font:600 15px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-seg{display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--sunken); max-width:280px}
.lb-seg i{display:block; height:100%}
.lb-big{flex:none; text-align:right; min-width:70px}
.lb-big b{display:block; font:600 24px/1 var(--display); font-variant-numeric:tabular-nums; color:var(--ink)}
.lb.win-metric .lb-big b{color:var(--win)}
.lbr-lose{border-left:3px solid var(--lose-bg)}
.lbr-lose .lb-rank{background:var(--lose-bg); color:var(--lose)}
.lbr-lose .lb-big b{color:var(--lose)}
.lb-big small{color:var(--ink3); font-size:11px; white-space:nowrap}

/* ── playable trong modal ───────────────────────────── */
.mv .media iframe.play{background:#000; width:100%; height:100%; display:block; border:0}

/* ── playable trong modal ───────────────────────────── */
.plystage{display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px; width:100%; background:#04070A}
.plystage{position:relative}
.plytoast{position:absolute; left:50%; bottom:64px; transform:translate(-50%,10px);
  background:var(--accent); color:#fff; font:600 13px var(--sans); padding:10px 16px;
  border-radius:11px; box-shadow:0 8px 24px -8px rgba(0,0,0,.6); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:6; max-width:92%}
.plytoast b{font-weight:800}
.plytoast.on{opacity:1; transform:translate(-50%,0)}

.plytog{display:inline-flex; border:1px solid var(--line2); border-radius:9px; overflow:hidden}
.plytog button{border:0; background:var(--panel); color:var(--ink2); font:13px var(--sans); padding:7px 15px}
.plytog button+button{border-left:1px solid var(--line2)}
.plytog button.on{background:var(--accent-bg); color:var(--accent); font-weight:650}
.plytog .plyre{border-left:1px solid var(--line2); color:var(--ink2)}
.plytog .plyre:hover{color:var(--accent)}
/* Ngang: van 2 cot — playable trai (cot rong ~640 cho iframe 600), so lieu phai */
.mv.solo{grid-template-columns:minmax(0,640px) minmax(0,480px)}
/* playable khong bi keo cao theo info -> canh giua, bo khoang den du */
.mv.solo .media{align-self:center; border-radius:14px; margin:10px 0}
/* nen so lieu cho popup Ngang gon lai gan bang Doc */
.mv.solo .mrow{padding:6px 0}
.mv.solo .msec{margin-top:11px}
.mv.solo .bigidx{margin-bottom:12px; padding:13px 16px}
.mv.solo .info{padding:18px 24px}
@media(max-width:1060px){ .mv.solo{grid-template-columns:1fr}   /* man hep -> 1 cot, so lieu xuong duoi */
  .mv.solo .media{align-self:stretch; margin:0}
  .mv.solo .info{border-top:1px solid var(--line)} }
.mv .media iframe.play{background:#000; border:0; border-radius:12px; box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.plyfull{color:var(--ink2); font-size:13px; border:1px solid var(--line2); border-radius:9px;
  padding:7px 14px; text-decoration:none}
.plyfull:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

/* ── cửa sổ chi tiết ─────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:70; background:rgba(4,7,11,.86); display:grid;
  place-items:center; padding:24px; backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.mbox:has(.mv.solo){max-width:min(96vw,1160px)}
.mbox{background:var(--panel); border:1px solid var(--line2); border-radius:16px;
  max-width:min(1120px,96vw); max-height:93vh; overflow:auto; position:relative}
.mx{position:absolute; right:12px; top:11px; z-index:5; border:0; background:rgba(6,9,13,.7);
  color:#fff; width:34px; height:34px; border-radius:50%; font-size:21px; line-height:1}
.mx:hover{background:var(--lose)}
.mv{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr)}
@media(max-width:860px){ .mv{grid-template-columns:1fr} }
.mv .media{background:#04070A; display:grid; place-items:center; min-height:320px; position:relative}
.mv .media video,.mv .media img{max-width:100%; max-height:78vh; display:block}
.mv .media iframe{border:0; width:100%; display:block}
.mv .media iframe.vid{aspect-ratio:16/9}
.mv .media iframe.play{background:#000}
.mv .info{padding:24px 26px}
.mhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.mhead h3{font:650 22px var(--mono); letter-spacing:0}
.nm{color:var(--ink3); font-size:13px; margin:7px 0 18px}
.bigidx{display:flex; align-items:center; gap:18px; border:1px solid; border-radius:12px;
  padding:16px 18px; margin-bottom:18px; background:var(--raised)}
.bigidx b{font:600 46px/1 var(--display); font-variant-numeric:tabular-nums}
.bigidx span{color:var(--ink2); font-size:14px; line-height:1.45}
.mgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 26px}
.mv.solo .mgrid .wide{grid-column:1/-1}   /* landscape 2 cot: dong ngay dai span full cho khoi wrap */
@media(max-width:520px){ .mgrid{grid-template-columns:1fr} }
.mrow{display:flex; justify-content:space-between; gap:16px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:14px}
.mrow span{color:var(--ink2)}
.mrow b{font:13.5px var(--mono); font-variant-numeric:tabular-nums}
.msec{grid-column:1/-1; margin-top:16px; padding-bottom:4px; color:var(--ink3);
  font:650 11.5px var(--sans); letter-spacing:.1em; text-transform:uppercase}

.note{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--raised);
  padding:13px 16px; border-radius:0 11px 11px 0; font-size:14px; color:var(--ink2); line-height:1.6;
  margin-top:18px}
.note b{color:var(--ink)}
.empty{padding:56px 24px; text-align:center; color:var(--ink3); font-size:15px}
.center{text-align:center}

@media(max-width:760px){
  .top{padding:0 16px; gap:14px} main{padding:18px 16px 60px}
  .bar,.fpanel{padding-left:16px; padding-right:16px}
  .picker{left:8px!important; right:8px; flex-direction:column}
  .pk-pre{width:auto; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line)}
  .pk-months{flex-direction:column} .mon{width:auto}
  .ch-name{font-size:34px}
}
@media(prefers-reduced-motion:reduce){ *{transition:none!important} }