/* OpenCADs — SÀN SỰ KIỆN (4 màn: events · event · events-country · events-models).
   Chuyển thể từ bộ thiết kế arena-* CEO gửi 2026-08-27. Chỉ dùng token của
   tokens.css — không đặt màu mới ở đây. Các lớp trùng tên với ui.css đã đổi
   tên có tiền tố a- (abox, acols, achip…) để hai bộ không giẫm nhau.

   Màu cam theo hiến pháp: tối đa 6 khoảnh một màn. Bản gốc dùng cam ở số bước,
   nhãn, phần trăm… — các chỗ trang trí đó đã chuyển về mực xám; cam chỉ còn ở
   nút hành động chính, huy hiệu "đang nóng", và khối quỹ. */

/* ══ THANH SÀN + DÒNG GHI NHẬN ═══════════════════════════════════════════ */
.abar{display:flex;align-items:center;gap:14px;padding:14px 0 0}
/* Một hàng duy nhất trên đầu sàn (CEO 27/08): dòng tin trái · Đăng vấn đề phải */
.atick{display:flex;align-items:center;gap:14px;margin-top:14px;padding:8px 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.atick .btn{flex:none;margin-left:auto}
.atick .lb{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap}
.tkline{flex:1;min-width:0;text-align:left;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s ease,transform .3s ease}
.tkline.swap{opacity:0;transform:translateY(6px)}
.tkline b{font-weight:600;color:var(--ink)}
@media (max-width:640px){ .ameta{display:none} }
@media (prefers-reduced-motion:reduce){ .tkline{transition:none} }

/* ══ NÚT / HUY HIỆU DÙNG CHUNG ═══════════════════════════════════════════ */
.apill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 10px;font-family:var(--ui);font-weight:500;font-size:11.5px;color:var(--ink-2);background:var(--paper)}
.apill.hot{border-color:var(--cam-vien);color:var(--orange);background:var(--cream)}
.achip{border:1px solid var(--line-dam);background:var(--paper);border-radius:var(--r-pill);padding:6px 13px;
  font-family:var(--ui);font-weight:500;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.achip:hover{border-color:var(--ink);color:var(--ink)}
.achip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.asel{appearance:none;border:1px solid var(--line-dam);background:var(--paper);border-radius:9px;height:36px;
  padding:0 26px 0 12px;font:500 12.5px var(--ui);color:var(--ink)}
.ain{width:100%;border:1px solid var(--line-dam);border-radius:9px;background:var(--paper);
  font:400 13.5px var(--body);color:var(--ink);padding:10px 12px}
.ain:focus{outline:none;border-color:var(--ink)}
textarea.ain{min-height:84px;resize:vertical;font-family:var(--body)}

/* ══ BỐ CỤC HAI CỘT + HỘP ════════════════════════════════════════════════ */
.acols{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:26px;align-items:start;padding-top:20px}
/* Cột ẩn của grid ăn theo max-content của con — một dòng mono dài là cả cột
   phình quá 318px và tràn trang. Khoá cột về minmax(0,1fr) và con về min-width:0. */
.arail{position:sticky;top:96px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.acols>*,.arail>*{min-width:0}
.abox{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);padding:16px;min-width:0}
.abox h3{font-family:var(--ui);font-size:13.5px;font-weight:600;margin:0}
.abh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.sec2{padding:34px 0 0}
.sec2 h2{font-size:17.5px;font-weight:600;margin:0}
.sec2 .sd{font-size:12.5px;color:var(--ink-2);margin:4px 0 14px}
.tfoot{display:flex;justify-content:space-between;gap:12px;padding:13px 2px;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);flex-wrap:wrap}
.alines .li{display:flex;justify-content:space-between;gap:12px;padding:7.5px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.alines .li:last-child{border:0}
.alines .li .r{font-family:var(--mono);color:var(--ink);text-align:right;min-width:0;overflow-wrap:anywhere}
.aempty{border:1px dashed var(--line-dam);border-radius:var(--r-l);padding:34px;text-align:center}
.aempty h3{font-size:15px;margin:0}
.aempty p{color:var(--ink-2);font-size:13px;margin:6px auto 14px;max-width:420px}

/* ══ MÀN SÀN — hero + bảng số toàn sàn ═══════════════════════════════════ */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:end;padding:30px 0 8px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-3)}
.hero h1{font-size:31px;font-weight:600;line-height:1.16;letter-spacing:-.022em;margin:12px 0 10px;
  max-width:640px;text-wrap:balance}
.hero p{color:var(--ink-2);max-width:560px;margin:0 0 18px;font-size:14.5px;line-height:1.6}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.hpanel{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);
  padding:15px 16px;box-shadow:var(--shadow-card)}
.hpanel .hh{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.hpanel .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.hpanel .row:last-child{border:0;padding-bottom:2px}
.hpanel .row b{font-family:var(--mono);font-weight:500;color:var(--ink);font-size:14px;white-space:nowrap}

/* ══ THANH LỌC DÍNH ══════════════════════════════════════════════════════ */
.fbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);
  margin:14px 0 0;padding:10px 0;display:flex;gap:10px;align-items:center;scroll-margin-top:64px}
.fbar .chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px;min-width:0}
.fbar .chips::-webkit-scrollbar{display:none}
.fbar .sels{display:flex;gap:8px;flex:none}
@media (max-width:640px){ .fbar .sels .asel:nth-child(2){display:none} }

/* ══ THẺ SỰ KIỆN ═════════════════════════════════════════════════════════ */
.egrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.ec{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);padding:16px;
  display:flex;flex-direction:column;cursor:pointer;min-width:0;
  transition:border-color .16s,transform .18s cubic-bezier(.22,.72,.24,1),box-shadow .18s}
.ec:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.ec .hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ec .hd .st{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.ec .hd .st.close{color:var(--ink-3)}
.ec h3{font-size:16px;font-weight:600;line-height:1.32;margin:11px 0 5px;letter-spacing:-.012em}
.ec .ameta2{font-size:12px;color:var(--ink-2)}
.prz{margin:13px 0 0;padding:11px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prz .a{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.prz .v{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.01em}
.prz .l{font-size:11px;color:var(--ink-3);text-align:right}
.pb{height:3px;background:var(--wash);border-radius:2px;margin-top:9px;overflow:hidden}
.pb i{display:block;height:100%;background:var(--ink);border-radius:2px;transition:width .5s ease}
.prz .pl{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);margin-top:5px}
.st3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.st3>div{font-size:11px;color:var(--ink-2)}
.st3 b{display:block;font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink);margin-top:2px}
.ec .aft{margin-top:auto}
.ec.done h3,.ec.done .prz .v{color:var(--ink-2)}
.ec:hover .aft .btn.line{border-color:var(--orange);color:var(--orange)}

/* ══ XẾP HẠNG ════════════════════════════════════════════════════════════ */
.rk{display:grid;grid-template-columns:20px 30px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.rk:last-child{border:0}
.rk .no{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.rk .av{width:30px;height:30px;border-radius:9px;background:var(--wash);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:10px;color:var(--ink-2)}
.rk .nm{font-family:var(--ui);font-weight:600;font-size:12.5px;line-height:1.25;display:block}
.rk .sub{font-size:11px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .val{text-align:right;font-family:var(--mono);font-size:12.5px}
.rk .val small{display:block;font-size:10px;color:var(--ink-3)}

/* ══ BỐN BƯỚC + THEO NƯỚC ════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;background:var(--line)}
.steps>div{background:var(--paper);padding:16px;display:grid;gap:6px;grid-auto-rows:min-content}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.steps b{font-family:var(--ui);font-weight:600;font-size:13.5px}
.steps p{margin:0;font-size:12px;color:var(--ink-2);line-height:1.55}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cc{border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);padding:13px 14px;
  min-width:0;transition:border-color .15s,transform .16s ease}
.cc:hover{border-color:var(--ink);transform:translateY(-1px)}
.cc b{font-family:var(--ui);font-weight:600;font-size:13px;display:flex;justify-content:space-between;
  gap:8px;align-items:baseline}
.cc b i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-2)}
.cc span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:3px}

/* ══ DÒNG MỞ NHANH (amini) ═══════════════════════════════════════════════ */
.amini{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--paper);padding:11px 14px;text-align:left;width:100%;min-width:0}
.amini:hover{border-color:var(--ink);background:var(--wash)}
.amini .mt{font-family:var(--ui);font-weight:600;font-size:13px;display:block}
.amini .md{font-size:11.5px;color:var(--ink-2);display:block;margin-top:2px}
.amini .mo{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}

/* ══ BẢNG ════════════════════════════════════════════════════════════════ */
.atb{width:100%;border-collapse:collapse;font-size:12.5px}
.atb th{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.07em;color:var(--ink-3);
  text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-dam);text-transform:uppercase}
.atb td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.atb tr:last-child td{border:0}
.atb .num{text-align:right;font-family:var(--mono)}
.atb .nm{font-family:var(--ui);font-weight:600;font-size:12.5px}
.atb .cl{font-size:11px;color:var(--ink-3)}
.atb .ht{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.atb tr.me td{background:var(--cream)}

/* ══ MÀN CHI TIẾT — băng + số ════════════════════════════════════════════ */
.aban{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);padding:20px 22px;
  margin-top:12px;box-shadow:var(--shadow-card)}
.aban .pr{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.aban .tag{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.aban h1{font-size:23px;font-weight:600;margin:10px 0 3px;letter-spacing:-.018em;text-wrap:balance}
.aban .sub{font-size:13px;color:var(--ink-2)}
.bstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin-top:16px}
.bstats>div{background:var(--paper);padding:10px 13px;min-width:0}
.bstats .k{font-size:10.5px;color:var(--ink-3)}
.bstats .v{font-family:var(--mono);font-size:16.5px;font-weight:500;margin-top:3px}
.bstats .v small{font-size:10.5px;color:var(--ink-3);font-weight:400;margin-left:4px}
.lead{font-size:14.5px;line-height:1.62;max-width:700px;color:var(--ink);margin:16px 0 0}
.disc{display:grid;gap:8px;margin-top:14px}

/* ══ VIDEO — bản ghi hashtag, KHÔNG có nút play (chưa có video thật) ═════ */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.avc{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--paper);min-width:0}
.vfr{position:relative;aspect-ratio:16/9;background:var(--wash)}
.vfr svg{position:absolute;inset:0;width:100%;height:100%}
.vfr .pf{position:absolute;left:8px;top:8px;font-family:var(--mono);font-size:9.5px;background:var(--paper);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink-2)}
.vb{padding:10px 12px}
.vb .t{font-family:var(--ui);font-weight:600;font-size:12.5px;line-height:1.35}
.vb .m{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.vb .w{font-size:11px;color:var(--ink-3);margin-top:1px}

/* ══ QUỸ + QUÀ ═══════════════════════════════════════════════════════════ */
.fund{border:1px solid var(--cam-vien);border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--cream),var(--paper) 55%);padding:16px}
.fund .lb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.fund .fv{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;margin-top:6px;
  transition:transform .2s ease;overflow-wrap:anywhere}
.fund .fv.bump{transform:scale(1.045)}
.fund .fl{font-size:11.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.fund .pb i{background:var(--orange)}
.gf{margin-top:11px;display:grid;gap:5px;grid-template-columns:minmax(0,1fr)}
.gf>*{min-width:0}
.gl{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--ink-2);
  padding:5px 8px;border-radius:7px;background:var(--paper);border:1px solid var(--line)}
.gl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}
.gl.new{animation:gin .4s ease}
@keyframes gin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .gl.new{animation:none} .fund .fv{transition:none} }

/* ══ ƯỚC TÍNH ════════════════════════════════════════════════════════════ */
.est input[type=range]{width:100%;accent-color:var(--orange);margin:10px 0 4px}
.est .out{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.est .out>div{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--wash);min-width:0}
.est .out .k{font-size:10.5px;color:var(--ink-3)}
.est .out .v{font-family:var(--mono);font-size:15px;font-weight:500;margin-top:2px}
.est .note{font-size:11px;color:var(--ink-3);margin-top:9px;line-height:1.5}

/* ══ THANH HÀNH ĐỘNG ĐIỆN THOẠI ══════════════════════════════════════════ */
.ambar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;align-items:center;
  background:var(--paper);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.ambar .fz{font-family:var(--mono);font-size:15px;font-weight:500}
.ambar .fz small{display:block;font-size:9.5px;color:var(--ink-3);font-weight:400;letter-spacing:.05em}
.ambar .btn{flex:1}
@media (max-width:880px){ .ambar{display:flex} }

/* ══ HỘP TRƯỢT (sheet) ═══════════════════════════════════════════════════ */
.shbk{position:fixed;inset:0;z-index:90;background:rgba(10,10,12,.34);opacity:0;transition:opacity .22s ease}
.shbk.on{opacity:1}
.sh{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;
  width:min(560px,calc(100vw - 28px));max-height:84vh;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-pop);
  transition:opacity .24s ease,transform .24s ease}
.sh.wide{width:min(880px,calc(100vw - 28px))}
.sh.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sh .hd{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);flex:none}
.sh .hd h3{font-family:var(--ui);font-size:15px;font-weight:600;margin:0}
.sh .hd .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.sh .x{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.sh .x:hover{background:var(--wash);color:var(--ink)}
.sh .bd{padding:16px 18px 20px;overflow-y:auto;overscroll-behavior:contain}
.sh .bd h4{font-family:var(--ui);font-size:12.5px;font-weight:600;margin:16px 0 8px}
.sh .bd h4:first-child{margin-top:0}
.sh .bd p{margin:0 0 8px;font-size:13px;color:var(--ink-2);line-height:1.6}
@media (max-width:620px){
  .sh{left:0;right:0;bottom:0;top:auto;width:100%;max-height:88vh;transform:translateY(30px);
    border-radius:18px 18px 0 0}
  .sh.on{transform:none}
  .sh::before{content:"";display:block;width:38px;height:4px;border-radius:3px;background:var(--line-dam);
    margin:9px auto 0;flex:none}
}
@media (prefers-reduced-motion:reduce){ .sh,.shbk{transition:none} }

/* ── các mảnh trong sheet ── */
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.gi{border:1px solid var(--line);border-radius:var(--r-m);padding:12px 8px;text-align:center;display:grid;
  gap:4px;justify-items:center;min-width:0}
.gi:hover{border-color:var(--ink)}
.gi.on{border-color:var(--orange);background:var(--cream)}
.gi .ic{display:grid;place-items:center;color:var(--ink)}
.gi b{font-family:var(--ui);font-weight:600;font-size:12px;line-height:1.3}
.gi span{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.aqty{display:flex;align-items:center;gap:10px;margin-top:13px}
.aqty button{width:32px;height:32px;border:1px solid var(--line-dam);border-radius:8px;font-size:15px}
.aqty button:hover{border-color:var(--ink)}
.aqty .qv{font-family:var(--mono);min-width:22px;text-align:center}
.pkrow{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-m);padding:11px 13px;margin-bottom:8px}
.pkrow:hover{border-color:var(--ink)}
.pkrow.on{border-color:var(--orange);background:var(--cream)}
.pkrow .kn{font-family:var(--ui);font-weight:600;font-size:13px;display:block}
.pkrow .kd{font-size:11.5px;color:var(--ink-2);display:block;margin-top:2px}
.pkrow .kp{font-family:var(--mono);font-size:13px;white-space:nowrap;text-align:right}
.pkrow .kp s{display:block;color:var(--ink-3);font-size:10.5px}
.okbox{border:1px solid var(--line);background:var(--wash);border-radius:var(--r-m);padding:13px}
.okbox b{font-family:var(--ui);font-size:13px}
.okbox .d{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.55}
.ahash{font-family:var(--mono);font-size:22px;color:var(--orange);letter-spacing:-.01em;overflow-wrap:anywhere}
.ck{display:grid;gap:7px;margin-top:12px}
.ck>div{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.ck i{font-style:normal;font-family:var(--mono);color:var(--ink)}
.wdots{display:flex;gap:6px}
.wdots i{width:22px;height:3px;border-radius:2px;background:var(--line)}
.wdots i.on{background:var(--orange)}
.wchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fx{font-family:var(--mono);font-size:13px;border:1px solid var(--line);border-radius:9px;
  background:var(--wash);padding:10px 13px}
.fx b{color:var(--ink);font-weight:600}
.srow{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;gap:10px;align-items:center;
  padding:6px 0;font-size:12.5px}
.srow .sb{height:5px;background:var(--wash);border-radius:3px;overflow:hidden}
.srow .sb i{display:block;height:100%;background:var(--ink);border-radius:3px}
.srow .sv{font-family:var(--mono);text-align:right}
.frow{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-m);padding:10px 13px;margin-bottom:8px}
.frow .fn{font-family:var(--ui);font-weight:600;font-size:12.5px;display:block}
.frow .fs{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:8px;font-weight:400}
.frow .fd{font-size:11.5px;color:var(--ink-2);display:block;margin-top:2px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:99;opacity:0;
  background:var(--ink);color:var(--paper);font:500 12.5px var(--ui);border-radius:10px;padding:10px 16px;
  transition:opacity .22s ease,transform .22s ease;pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:880px){ .toast{bottom:calc(70px + env(safe-area-inset-bottom,0px))} }

/* ══ MÀN THEO NƯỚC ═══════════════════════════════════════════════════════ */
.chero{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);padding:22px;
  margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  box-shadow:var(--shadow-card)}
.chero h1{font-size:24px;font-weight:600;margin:6px 0 4px}
.chero .sub{font-size:12.5px;color:var(--ink-2)}
.chero .big{text-align:right}
.chero .big .n{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.02em}
.chero .big .l{font-size:11px;color:var(--ink-3)}
.secgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.secbtn{border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);padding:11px 13px;
  text-align:left;min-width:0}
.secbtn b{display:block;font-family:var(--ui);font-weight:600;font-size:12.5px}
.secbtn span{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.secbtn:hover{border-color:var(--ink)}
.secbtn.on{background:var(--ink);border-color:var(--ink)}
.secbtn.on b{color:var(--paper)}
.secbtn.on span{color:var(--ink-3)}
.er{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--paper);padding:15px 16px;margin-bottom:11px;cursor:pointer;
  transition:border-color .15s,transform .16s ease}
.er:hover{border-color:var(--ink);transform:translateY(-1px)}
.er .sec{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.er h3{font-size:15px;font-weight:600;margin:5px 0 3px;line-height:1.3}
.er .sz{font-size:12px;color:var(--ink-2)}
.er .nums{display:flex;gap:16px;margin-top:9px;font-size:11.5px;color:var(--ink-2);flex-wrap:wrap}
.er .nums b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.er .side{border-left:1px solid var(--line);padding-left:16px;display:grid;gap:6px;align-content:start}
.er .side .z{font-family:var(--mono);font-size:16px;font-weight:500}
.er .side .z small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400;margin-top:1px}
.er .side .stt{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.er:hover .btn.line{border-color:var(--orange);color:var(--orange)}

/* ══ MÀN MÔ HÌNH (nội bộ) ════════════════════════════════════════════════ */
.intban{border:1px solid var(--cam-vien);background:var(--cream);border-radius:var(--r-m);padding:9px 14px;
  font-size:12px;color:var(--ink-2);display:flex;gap:9px;align-items:center;margin-top:14px;line-height:1.5}
.intban b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--orange);flex:none}
.knobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
.knob label{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-2);
  margin-bottom:5px}
.knob label b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}
.knob input[type=range]{width:100%;accent-color:var(--orange)}
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mod{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);padding:17px;
  display:flex;flex-direction:column;min-width:0}
.mod.best{border-color:var(--ink);box-shadow:var(--shadow-card)}
.mod .tg{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.05em}
.mod.best .tg{color:var(--orange)}
.mod h3{font-size:15.5px;margin:5px 0 6px}
.mod .sub{color:var(--ink-2);font-size:12.5px;min-height:52px;line-height:1.55}
.mod .kr{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2)}
.mod .kr b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}
.mod .kr.big b{font-family:var(--ui);font-weight:600;font-size:15px}
.mod .kr.big b.neg{color:var(--orange)}
.mod ul{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:6px;font-size:12px;color:var(--ink-2)}
.mod li{display:grid;grid-template-columns:13px 1fr;gap:8px;line-height:1.5}
.mod li i{font-style:normal;font-family:var(--mono);color:var(--ink)}
.mod .ft{margin-top:auto;padding-top:13px}
.cmp td:first-child{font-family:var(--ui);font-weight:500}
.cmp .win{font-weight:600;color:var(--ink)}
.g3a{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .acols{grid-template-columns:1fr}
  .arail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr}
  .hpanel{display:none}
}
@media (max-width:820px){
  .egrid,.secgrid,.g3a,.mods,.knobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arail{grid-template-columns:1fr}
  .er{grid-template-columns:1fr}
  .er .side{border-left:0;border-top:1px solid var(--line);padding:12px 0 0}
}
@media (max-width:560px){
  .egrid,.secgrid,.mods,.knobs,.g3a,.vgrid,.ggrid{grid-template-columns:1fr}
  .hero h1{font-size:25px}
  .chero{grid-template-columns:1fr}
  .chero .big{text-align:left}
  .steps,.cgrid{grid-template-columns:1fr}
}


/* ══ GIONG-HET — CEO 2026-08-27 (lần 2): "giống hệt các trang này" ═══════════
   Khôi phục nguyên bản các điểm nhấn sống của bộ thiết kế mà bản trước đã tiết
   chế: chấm nhịp, nhãn TRỰC TIẾP cam, % tăng trưởng cam, số bước cam, huy hiệu
   nền tảng/thời lượng trên thẻ video. Trần 6 khoảnh cam KHÔNG áp cho khu này
   theo quyết định của CEO — ghi tại CLAUDE.md khu sự kiện. */
.dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:ocpulse 2.2s infinite}
@keyframes ocpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,0,.35)}55%{box-shadow:0 0 0 5px rgba(255,92,0,0)}}
.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-2);white-space:nowrap;margin-left:auto}
@media (max-width:640px){ .live{display:none} }
.atick .lb{color:var(--orange)}
.tkline .ago{color:var(--ink-3);font-family:var(--mono);font-size:10.5px;margin-left:8px}
.apill.hot i{width:5px;height:5px;border-radius:50%;background:var(--orange);animation:ocpulse 2s infinite}
.ec .hd .st.soon{color:var(--orange)}
.pb.o i{background:var(--orange)}
.rk .val small{color:var(--orange)}
.steps .n{color:var(--orange)}
.cc b i{color:var(--orange)}
.eyebrow{color:var(--orange);display:flex;align-items:center;gap:8px}
.hpanel .row b small{color:var(--orange);font-family:var(--mono);font-size:10.5px;margin-left:6px;font-weight:400}
.fund .lb{color:var(--orange)}
.gl b{color:var(--orange)}
.fx b{color:var(--orange);font-weight:500}
.ck i{color:var(--orange)}
.mod li.m i{color:var(--orange)}
.er .side .stt.o{color:var(--orange)}
.gi .em{font-size:21px;line-height:1}
.vfr .du{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:10px;
  background:var(--ink);color:var(--paper);border-radius:5px;padding:2px 6px}
.avc{cursor:pointer;transition:border-color .15s,transform .16s ease}
.avc:hover{border-color:var(--ink);transform:translateY(-2px)}
.crumb2{font-size:12.5px;color:var(--ink-2);padding:16px 0 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crumb2 a{color:var(--ink-2);border-bottom:1px solid transparent}
.crumb2 a:hover{color:var(--ink);border-color:var(--ink-3)}
.crumb2 .sep{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){ .dot,.apill.hot i{animation:none} }

/* Biến thể cuộn cho hàng nút dài (7 cửa hàng). Đặt riêng thay vì sửa `.seg`
   dùng chung — sửa lớp chung là ba màn khác bị vạ lây, đã mắc một lần. */
.seg.cuon{max-width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.seg.cuon::-webkit-scrollbar{display:none}
.seg.cuon button{flex:0 0 auto;white-space:nowrap}