/* OpenCADs — thành phần dùng chung. Trang riêng chỉ được thêm CSS cho phần đặc thù của nó. */

*{box-sizing:border-box}
[hidden]{display:none!important}   /* hidden phải thắng cả display viết inline */
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ui);letter-spacing:-.02em;margin:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);letter-spacing:-.02em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- đầu trang ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:var(--wrap);margin:0 auto;padding:14px var(--pad)}
.hdr.home .bar{padding-bottom:0}
/* ★ THANH TRÊN LÀ LƯỚI BA Ô `1fr auto 1fr` — thêm một con trực tiếp thứ tư là
   mọi thứ TRƯỢT SANG MỘT Ô: logo văng ra mép phải, avatar rơi xuống dòng mới,
   thanh cao gấp đôi. Nên nút quay lại đi CHUNG Ô với logo, không đứng riêng. */
.lgrp{display:flex;align-items:center;gap:8px;min-width:0}
.lgrp .logo{min-width:0}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.02em}
.tabs{display:flex;gap:26px;justify-self:center}
.tab{font-family:var(--ui);font-size:14px;color:var(--ink-2);padding:6px 0 12px;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"],.tab[aria-selected="true"]{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.util{display:flex;align-items:center;gap:6px;justify-self:end}
.ghost{padding:9px 12px;border-radius:var(--r-pill);font-family:var(--ui);font-size:13px;white-space:nowrap}
.ghost:hover{background:var(--wash)}
.icon-btn{width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center}
.icon-btn:hover{background:var(--wash)}
.ava{width:34px;height:34px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:12px;flex:0 0 auto}
.ava.lg{width:46px;height:46px;font-size:16px}
.acct{position:relative}
.acctmenu{position:absolute;right:0;top:calc(100% + 10px);width:268px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:8px;z-index:80;
  animation:drop .18s cubic-bezier(.32,.72,0,1)}
.acctmenu .ah{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acctmenu .ah b{display:block;font-family:var(--ui);font-size:13.5px}
.acctmenu .ah span span{display:block;color:var(--ink-2);font-size:12px;margin-top:1px}
.acctmenu a{display:block;padding:9px 10px;border-radius:var(--r-s);font-family:var(--ui);font-size:13.5px}
.acctmenu a span{display:block;font-family:var(--body);font-weight:400;color:var(--ink-2);font-size:11.5px;margin-top:1px}
.acctmenu a:hover{background:var(--wash)}
.acctmenu a:last-child{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}

/* ---------- thanh tìm ---------- */
.searchwrap{display:flex;justify-content:center;padding:6px var(--pad) 18px}
.search{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;align-items:center;width:min(760px,100%);
  border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow-card);background:var(--paper);padding:6px 6px 6px 0}
.search .fld{padding:8px 20px;position:relative;border-radius:var(--r-pill);text-align:left}
.search .fld+.fld::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
.search .fld:hover{background:var(--wash)}
.search .fld b{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600}
.search .fld span{display:block;color:var(--ink-3);font-size:13px;margin-top:1px}
.go{width:44px;height:44px;border-radius:var(--r-pill);background:var(--orange);display:grid;place-items:center;margin-left:4px;transition:filter .18s,transform .18s}
.go:hover{filter:brightness(1.06);transform:scale(1.03)}
.minisearch{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 8px 7px 16px;font-size:13px;box-shadow:0 1px 2px rgba(10,10,12,.04);justify-self:center}
.minisearch .sep{width:1px;height:16px;background:var(--line)}
.minisearch .go{width:28px;height:28px;margin:0}


/* ---------- thanh tìm: to ở đầu trang, co lại thành viên thuốc khi cuộn ----------
   Không dùng display:none ở đâu cả. Thanh to thu nhỏ và mờ đi đúng lúc viên thuốc
   nở ra từ chỗ nó vừa đứng, nên mắt đọc thành một chuyển động liền mạch. --------- */
.hdr{--sh:86px;transition:box-shadow .3s ease}
.hdr.shrunk{box-shadow:0 1px 0 rgba(10,10,12,.05),0 8px 24px -24px rgba(10,10,12,.7)}
.hdr .bar{padding-bottom:12px}

.hdr .searchwrap{height:var(--sh);display:flex;justify-content:center;align-items:flex-start;
  padding:2px var(--pad) 0;overflow:hidden;transition:height .34s cubic-bezier(.32,.72,0,1)}
.hdr.dropping .searchwrap{overflow:visible}
.hdr.shrunk{--sh:0px}

.search{transform-origin:50% 0;will-change:transform,opacity;
  transition:transform .34s cubic-bezier(.32,.72,0,1),opacity .2s ease}
.hdr.shrunk .search{transform:scale(.56) translateY(-30px);opacity:0;pointer-events:none}

/* tabs và viên thuốc chồng lên nhau ở ô giữa, đổi chỗ cho nhau bằng mờ dần */
.center{position:relative;display:grid;justify-self:center;align-items:center;min-height:38px}
.center>*{grid-area:1/1}
.tabs{transition:opacity .2s ease,transform .34s cubic-bezier(.32,.72,0,1)}
.hdr.shrunk .tabs{opacity:0;transform:translateY(-10px);pointer-events:none}
.minisearch{opacity:0;transform:scale(1.42) translateY(30px);transform-origin:50% 50%;
  pointer-events:none;white-space:nowrap;will-change:transform,opacity;
  transition:opacity .22s ease,transform .38s cubic-bezier(.32,.72,0,1),box-shadow .2s ease}
.hdr.shrunk .minisearch{opacity:1;transform:none;pointer-events:auto}
.minisearch:hover{box-shadow:0 2px 10px -4px rgba(10,10,12,.28)}

.search .fld.open{background:var(--paper);box-shadow:0 4px 18px -10px rgba(10,10,12,.55)}
.sdrop{position:absolute;top:calc(100% + 12px);width:min(440px,92vw);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-pop);
  padding:10px;z-index:70;max-height:min(420px,60vh);overflow:auto;scrollbar-width:thin;
  animation:drop .22s cubic-bezier(.32,.72,0,1)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.sdrop h4{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:8px 12px 6px;margin:0}
.sdrop button{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;width:100%;
  padding:10px 12px;border-radius:var(--r-m);text-align:left}
.sdrop button:hover,.sdrop button:focus-visible{background:var(--wash)}
.sdrop .ico{width:44px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-2);letter-spacing:-.03em}
.sdrop .txt{min-width:0}
.sdrop .st{display:block;font-family:var(--ui);font-size:13.5px;font-weight:500}
.sdrop .ss{display:block;color:var(--ink-2);font-size:12.5px;margin-top:1px}
.sdrop .val{font-family:var(--mono);font-size:12px;white-space:nowrap;text-align:right;color:var(--ink-2)}
.sdrop .val.up{color:var(--ink)}
.sdrop .val.down{color:var(--orange)}
.sdrop .note{color:var(--ink-2);font-size:12px;padding:4px 12px 10px;margin:0;border-bottom:1px solid var(--line)}
.sdrop .q{position:sticky;top:-10px;z-index:2;background:var(--paper);padding:2px 2px 8px;margin:-2px -2px 0}
.sdrop .q .box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-m);
  padding:0 12px;height:44px;background:var(--paper)}
.sdrop .q .box:focus-within{border-color:var(--ink)}
.sdrop .q input{flex:1;border:0;outline:none;background:none;font-size:14px;min-width:0}
.sdrop .q input::placeholder{color:var(--ink-3)}
.sdrop .q kbd{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:5px;padding:2px 5px}
.sdrop button.sel{background:var(--wash)}
.sdrop mark{background:none;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sdrop .tag{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.04em}
.sdrop .none{padding:18px 12px 10px;color:var(--ink-2);font-size:13px}
.sdrop .none b{display:block;color:var(--ink);font-family:var(--ui);font-size:13.5px;margin-bottom:4px}
/* Nút mở bảng tất cả mảng chuyên môn — đặt cuối danh sách gợi ý. */
.xtcwrap{padding:6px 12px 12px;border-top:1px solid var(--line);margin-top:6px}
.xtc{width:auto;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);background:none;
  padding:0;text-decoration:underline;text-underline-offset:3px}
.xtc:hover{color:var(--orange)}
.osheet .xtcwrap{padding-left:0;padding-right:0}

/* ══ ② TẤT CẢ MẢNG CHUYÊN MÔN ══════════════════════════════════════════════
   Hai nhóm khách khác hẳn nhau dùng chung một cây: nhà dân lọc theo "công trình
   của tôi", chủ đầu tư FDI lọc theo NƯỚC vì mỗi nước soi một bộ tiêu chuẩn. */
.mangall{position:fixed;inset:0;z-index:130;background:var(--paper);overflow-y:auto;
  animation:sheetLen .24s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion: reduce){ .mangall{animation:none} }
.mangall .mtop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  max-width:1180px;margin:0 auto;padding:26px var(--pad) 0}
.mangall h2{font-family:var(--ui);font-size:26px;font-weight:600;letter-spacing:-.02em}
.mangall .mtop p{margin:8px 0 0;max-width:620px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.mangall .dong{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-2);display:grid;place-items:center;font-size:15px}
.mangall .mloc{max-width:1180px;margin:0 auto;padding:18px var(--pad) 0}
.mangall .g{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;min-width:0}
.mangall .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 auto;width:132px}
.mangall .ch{width:auto;border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--paper);
  white-space:nowrap}
.mangall .ch.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.mangall .tcn{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--wash);font-size:12.5px;color:var(--ink-2);line-height:1.6}
.mangall .tcn b{color:var(--ink);font-family:var(--ui)}
/* Dòng chảy nhiều cột chứ không phải lưới: lưới căn theo HÀNG nên nhóm 2 mục
   phải cao bằng nhóm 5 mục, để lại khoảng trống lớn giữa các nhóm. Cột chảy thì
   nhóm nào hết là nhóm sau lấp ngay. */
.mangall .mbody{max-width:1180px;margin:0 auto;padding:8px var(--pad) 60px;
  column-count:3;column-gap:34px}
.mangall .nh{padding-top:26px;min-width:0;break-inside:avoid}
.mangall .nh h3{font-family:var(--ui);font-size:15px;font-weight:600;display:flex;align-items:baseline;
  gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mangall .dm{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.mangall .ms{display:flex;flex-direction:column}
.mangall .mg{width:100%;text-align:left;padding:10px 8px;border-radius:10px;min-width:0}
.mangall .mg:hover{background:var(--wash)}
.mangall .mg .a{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.mangall .mg .b{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1080px){ .mangall .mbody{column-count:2} }
@media (max-width:700px){
  .mangall .mbody{column-count:1}
  .mangall .lb{width:100%}
  .mangall h2{font-size:22px}
}

/* ══ Ô TÌM TRÊN ĐIỆN THOẠI — tấm toàn màn, ba bước xếp chồng ════════════════
   Học cách Airbnb bày: người dùng thấy CẢ BA bước cùng lúc, bước đang làm nở ra,
   hai bước kia thu thành một dòng bấm được, và nút Tìm nằm cố định ở đáy cho
   ngón cái. Bảng thả xuống cũ chỉ cao 420px — mỗi lần tìm là một lần vuốt qua
   vuốt lại, và không có chỗ nào đặt nút Tìm.

   Khác Airbnb một chỗ có chủ ý: ô gợi ý của ta để HÌNH KẾT QUẢ vẽ bằng SVG chứ
   không phải biểu tượng trang trí — người trong nghề nhìn mặt bằng sprinkler là
   biết ngay đó là thứ gì, nhanh hơn đọc chữ. */
html.oc-khoa,html.oc-khoa body{overflow:hidden}
.osheet{position:fixed;inset:0;z-index:120;background:var(--wash);display:flex;flex-direction:column;
  animation:sheetLen .26s cubic-bezier(.32,.72,0,1)}
@keyframes sheetLen{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .osheet{animation:none} }
.osheet .top{display:flex;align-items:center;gap:10px;padding:10px 12px}
.osheet .tbs{flex:1;min-width:0;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none}
.osheet .tbs::-webkit-scrollbar{display:none}
.osheet .tb{flex:0 0 auto;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink-3);
  padding:6px 0;background:none;white-space:nowrap;border-bottom:2px solid transparent}
.osheet .tb.on{color:var(--ink);border-bottom-color:var(--ink)}
.osheet .dong{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);font-size:14px;color:var(--ink-2);display:grid;place-items:center}
.osheet .body{flex:1;overflow-y:auto;padding:6px 12px 12px;display:flex;flex-direction:column;gap:10px}
.osheet .ost{border-radius:16px;background:var(--paper);border:1px solid var(--line);width:100%;text-align:left}
.osheet .ost.thu{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;flex:0 0 auto}
.osheet .ost.thu .nh{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-2)}
.osheet .ost.thu .gt{font-size:13.5px;color:var(--ink-3);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.osheet .ost.thu .gt.co{color:var(--ink);font-family:var(--ui);font-weight:600}
.osheet .ost.mo{display:flex;flex-direction:column;min-height:0;padding:18px 16px 8px;
  box-shadow:0 8px 28px -18px rgba(10,10,12,.5)}
.osheet .ost.mo .hd{font-family:var(--ui);font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.osheet .ip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:0 14px;height:50px;flex:0 0 auto}
.osheet .ip:focus-within{border-color:var(--ink)}
.osheet .ip input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:15px;font-family:var(--body)}
.osheet .ds{overflow-y:auto;margin:12px -6px 0;padding:0 6px 6px;min-height:0}
.osheet h5{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin:14px 0 6px}
.osheet h5:first-child{margin-top:2px}
.osheet .sg.trong-hinh{grid-template-columns:1fr auto}
.osheet .sg{display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center;width:100%;
  text-align:left;padding:9px 6px;border-radius:12px;min-width:0}
.osheet .sg:hover,.osheet .sg:focus-visible{background:var(--wash)}
.osheet .sg>*{min-width:0}
.osheet .tl{width:48px;height:44px;border-radius:11px;background:var(--wash);border:1px solid var(--line);
  overflow:hidden;display:block}
.osheet .tl svg{display:block;width:100%;height:100%}
.osheet .tx .a{display:block;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osheet .tx .b{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osheet .loai{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.osheet .loc{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.osheet .lc{width:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:var(--ink-2);background:var(--paper);white-space:nowrap}
.osheet .lc.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.osheet .lc b{font-family:var(--mono);font-size:11px;font-weight:500;opacity:.62}
.osheet .trong{padding:14px 6px;color:var(--ink-2);font-size:13px;line-height:1.6}
.osheet .trong b{display:block;color:var(--ink);font-family:var(--ui);font-size:14px;margin-bottom:4px}
.osheet mark{background:none;color:var(--ink);font-weight:700}
.osheet .bot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper);
  border-top:1px solid var(--line)}
.osheet .xoa{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);background:none;
  text-decoration:underline;text-underline-offset:3px}
.osheet .tim{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;
  border-radius:12px;padding:13px 26px;font-family:var(--ui);font-size:15px;font-weight:600}
.osheet .tim:active{transform:scale(.98)}

/* ── Ô tìm kiếm: lọc theo loại + gom nhóm ────────────────────────────────────
   Sản phẩm bán bốn loại hàng khác hẳn nhau. Người dùng thường đã biết mình cần
   "một cái tool" hay "một người làm hộ" TRƯỚC khi nghĩ ra từ khoá — nên hàng
   lọc theo loại đứng ngay trên kết quả, không giấu sau một nút nào. */
.sdrop .loc{display:flex;gap:6px;flex-wrap:wrap;padding:6px 12px 10px}
.sdrop .lc{width:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:var(--ink-2);background:var(--paper);white-space:nowrap}
.sdrop .lc:hover{border-color:var(--ink-3);color:var(--ink)}
.sdrop .lc.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.sdrop .lc b{font-family:var(--mono);font-size:11px;font-weight:500;opacity:.62}
.sdrop h4 .dem{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:7px;
  letter-spacing:0;text-transform:none}
.sdrop .them{display:block;width:100%;text-align:left;padding:7px 12px 11px;font-size:12.5px;
  color:var(--ink-2);font-family:var(--ui);font-weight:600}
.sdrop .them:hover{color:var(--orange)}
/* Chip loại nằm NGAY SAU tên, không phải một ô vuông riêng bên trái: đọc theo
   dòng là biết ngay "cái này là ứng dụng hay là người", không phải liếc sang cột. */
.sdrop .loai{display:inline-block;margin-left:8px;font-family:var(--ui);font-size:9.5px;
  font-weight:600;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:1px 7px;vertical-align:2px}
.sdrop button.sel .loai{border-color:var(--ink-3)}
.sdrop.wide{width:min(560px,94vw);max-height:min(72vh,560px)}
@media (max-width:880px){
  /* Trên điện thoại cho bảng cao gần hết màn: thấy nhiều kết quả hơn là thứ
     duy nhất làm việc tìm nhanh lên ở khổ hẹp. */
  .sdrop.wide{max-height:78vh}
  .sdrop .loc{padding:6px 10px 10px}
}

.sdrop.plain button{grid-template-columns:1fr auto}
.scrim{position:fixed;inset:0;background:rgba(10,10,12,.16);z-index:30;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-m);
  font-family:var(--ui);font-weight:600;font-size:14.5px;transition:filter .18s,background .18s}
.btn.primary{background:var(--orange);color:var(--paper)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.line{border:1px solid var(--ink)}
.btn.line:hover{background:var(--wash)}
.btn.sm{height:36px;padding:0 13px;font-size:13px;border-radius:var(--r-s)}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:default;filter:none}

/* ---------- hàng thẻ cuộn ngang ---------- */
.rowhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}
.rowhead h2{font-size:21px;font-weight:600;display:flex;align-items:center;gap:8px}
.rowhead .sub{margin:5px 0 0;color:var(--ink-2);font-size:13.5px}
.railnav{display:flex;gap:8px;padding-top:4px}
.railnav button{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r-pill);display:grid;place-items:center}
.railnav button:hover{border-color:var(--ink);background:var(--wash)}
.railnav button[disabled]{opacity:.32;cursor:default}
.rail{display:grid;grid-auto-flow:column;gap:var(--gap);overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;grid-auto-columns:calc((100% - 6*var(--gap))/7)}
.rail::-webkit-scrollbar{display:none}
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px var(--gap)}

/* ---------- thẻ ---------- */
.card{scroll-snap-align:start;display:block;text-align:left;width:100%}
.thumb{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
.thumb svg{display:block;width:100%;height:100%}
.card:hover .thumb{border-color:rgba(0,0,0,.14)}
.badge{position:absolute;top:10px;left:10px;background:var(--paper);border-radius:var(--r-pill);padding:5px 9px;
  font-family:var(--ui);font-size:11px;font-weight:500;box-shadow:0 1px 4px rgba(10,10,12,.12)}
.save{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center}
.save[aria-pressed="true"] svg{fill:var(--orange);stroke:var(--orange)}
.hoverbtn{position:absolute;left:10px;right:10px;bottom:10px;height:34px;border-radius:9px;background:var(--ink);color:var(--paper);
  font-family:var(--ui);font-size:12.5px;font-weight:500;display:grid;place-items:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.card:hover .hoverbtn,.card:focus-within .hoverbtn{opacity:1;transform:none}
.meta{padding:10px 2px 0}
.t1{font-family:var(--ui);font-size:13.5px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.t2{color:var(--ink-2);font-size:12.5px;margin-top:2px}
.t3{font-family:var(--mono);font-size:12px;margin-top:5px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.t3 .u{color:var(--ink-2)}
.sig{font-family:var(--ui);font-size:11.5px;font-weight:500;margin-top:6px;display:inline-flex;align-items:center;gap:5px}
.sig .dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--ink-3)}
.sig.buy{color:var(--orange)} .sig.buy .dot{background:var(--orange)}
.osx{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:5px}

/* ---------- đợt gom ---------- */
.pools{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pool{border:1px solid var(--line);border-radius:var(--r-l);padding:16px;position:relative;overflow:hidden;
  display:flex;flex-direction:column}          /* cột dọc để khu gửi luôn tụt xuống đáy, mọi thẻ thẳng hàng */
.pool:hover{border-color:#D8D6D2}
.pool .top{display:flex;gap:12px;align-items:flex-start}
.pool .art{width:58px;height:58px;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:0 0 auto}
.pool .art svg{display:block;width:100%;height:100%}
.pool .top>span:last-child{min-width:0}
.pool .nm{display:block;font-family:var(--ui);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pool .ncc{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.pool .vol{font-family:var(--mono);font-size:16px;margin-top:12px;display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap;row-gap:2px}
.pool .vol .goal{flex:1 1 100%;min-width:0;font-size:11.5px;line-height:1.35;color:var(--ink-3);
  font-family:var(--body);letter-spacing:0}
.pool .vol .goal{color:var(--ink-3);font-size:12px}
.pool .bar{height:5px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;margin:8px 0 4px}
.pool .bar i{display:block;height:100%;background:var(--ink);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.pool.hit .bar i{background:var(--orange)}
.pool .row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-2)}
.pool .tier{font-family:var(--ui);font-weight:600;font-size:13px;color:var(--ink)}
.pool.hit .tier{color:var(--orange)}
.pool .foot{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pool .cd{font-family:var(--mono);font-size:12px}
.pool .bump{margin-left:auto;order:2;font-family:var(--mono);font-size:11.5px;color:var(--orange);
  opacity:0;transform:translateY(4px);white-space:nowrap}
.pool .bump.on{animation:bump 2.4s ease forwards}
@keyframes bump{12%{opacity:1;transform:none}70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

.ticker{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.ticker header{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ticker header .live{width:7px;height:7px;border-radius:var(--r-pill);background:var(--orange);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker header b{font-family:var(--ui);font-size:13px}
.ticker ul{list-style:none;margin:0;padding:0;max-height:268px;overflow:auto;scrollbar-width:thin}
.ticker li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px}
.ticker li:last-child{border-bottom:0}
.ticker li.new{animation:slide .5s ease}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ticker li .w{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.ticker li .t{color:var(--ink-3);font-size:11.5px;font-family:var(--mono)}
@media (max-width:1180px){.pools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){.pools{grid-template-columns:1fr}}

/* ---------- dải chỉ số giá nguyên liệu ---------- */
.mkt{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.mkt .it{flex:1;min-width:0;padding:12px 16px;border-right:1px solid var(--line)}
.mkt .it:last-child{border-right:0}
.mkt .n{color:var(--ink-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt .r{display:flex;align-items:baseline;gap:8px;margin-top:3px}
.mkt .v{font-family:var(--mono);font-size:15px;letter-spacing:-.02em;transition:color .4s ease}
.mkt .v.flash{color:var(--orange)}
.mkt .d{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.mkt .d.up{color:var(--orange)}
.mkt svg{display:block;margin-top:6px;width:100%;height:20px}

/* ---------- đợt sắp đóng ---------- */
.urg{border:1px solid var(--ink);border-radius:var(--r-l);padding:18px 20px;display:grid;
  grid-template-columns:1fr auto;gap:16px 24px;align-items:center}
.urg .lb{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.urg h2{font-size:19px;font-weight:600;margin:4px 0 6px}
.urg .need{font-size:14px}
.urg .need b{font-family:var(--mono);font-weight:500}
.urg .clock{font-family:var(--mono);font-size:26px;letter-spacing:-.04em;text-align:right;line-height:1.1}
.urg .clock small{display:block;font-family:var(--body);font-size:11.5px;color:var(--ink-2);letter-spacing:0;margin-top:4px}
.urg .bar{grid-column:1/-1;height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.urg .bar i{display:block;height:100%;background:var(--orange);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.urg .cta{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ---------- thẻ đợt: thêm biến động và trạng thái sắp chạm ---------- */
.pool .spark{display:block;width:100%;height:22px;margin-top:10px}
.pool .near{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-size:11.5px;
  font-weight:600;color:var(--orange);margin-top:8px}
.pool .near .dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--orange);animation:pulse 1.6s infinite}
.pool.warm{border-color:var(--orange)}
.ticker li.big{background:var(--cream)}

/* ---------- những con số OpenCADs đã gom được ---------- */
.imp2{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.imp2 .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:18px 20px 0}
.imp2 .hd h2{font-size:18px;font-weight:600}
.imp2 .hd p{color:var(--ink-2);font-size:12.5px;margin:4px 0 0;max-width:560px}
.imp2 .big{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:16px 0 0}
.imp2 .big>div{padding:12px 20px;border-right:1px solid var(--line)}
.imp2 .big>div:last-child{border-right:0}
.imp2 .big .k{color:var(--ink-2);font-size:12px}
.imp2 .big .v{font-family:var(--mono);font-size:26px;letter-spacing:-.04em;margin-top:3px}
.imp2 .big .u{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-left:4px;letter-spacing:0}
.imp2 .big .d{color:var(--ink-3);font-size:11.5px;margin-top:3px}
.imp2 .vols{border-top:1px solid var(--line);margin-top:14px;padding:16px 20px 6px}
.imp2 .vols h3{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.imp2 .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px}
.imp2 .vg{display:block;color:inherit}
.imp2 .vg .n{font-size:12.5px;color:var(--ink-2)}
.imp2 .vg .q{font-family:var(--mono);font-size:19px;letter-spacing:-.03em;margin-top:2px}
.imp2 .vg .q small{font-size:11.5px;color:var(--ink-2);margin-left:4px;letter-spacing:0}
.imp2 .vg .bar2{height:3px;background:var(--line);border-radius:var(--r-pill);margin:7px 0 5px;overflow:hidden}
.imp2 .vg .bar2 i{display:block;height:100%;background:var(--ink)}
.imp2 .vg:hover .bar2 i{background:var(--orange)}
.imp2 .vg .e{color:var(--ink-3);font-size:11.5px}
.imp2 .sup{border-top:1px solid var(--line);padding:16px 20px;background:var(--wash);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.imp2 .sup .k{color:var(--ink-2);font-size:12px}
.imp2 .sup .v{font-family:var(--mono);font-size:18px;letter-spacing:-.03em;margin-top:2px}
.imp2 .sup .d{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.imp2 .ft2{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:12px;
  justify-content:space-between;flex-wrap:wrap;color:var(--ink-2);font-size:11.5px}
.impstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.impstrip>div{padding:14px 18px;border-right:1px solid var(--line)}
.impstrip>div:last-child{border-right:0}
.impstrip .k{color:var(--ink-2);font-size:11.5px}
.impstrip .v{font-family:var(--mono);font-size:20px;letter-spacing:-.03em;margin-top:2px}
.impstrip .v small{font-size:11.5px;color:var(--ink-2);letter-spacing:0;margin-left:3px}
@media (max-width:1000px){.imp2 .big,.imp2 .sup,.impstrip{grid-template-columns:repeat(2,1fr)}
  .imp2 .vgrid{grid-template-columns:repeat(2,1fr)}
  .imp2 .big>div:nth-child(2){border-right:0}}
@media (max-width:700px){.imp2 .vgrid{grid-template-columns:1fr}}

/* ---------- hạn mức dùng tool ---------- */
.lim{display:grid;gap:22px}
.lim .row2{display:grid;grid-template-columns:190px 1fr auto;gap:18px;align-items:center}
.lim .nm2{font-family:var(--ui);font-weight:600;font-size:14px}
.lim .sub2{color:var(--ink-2);font-size:12px;margin-top:2px}
.lim .track3{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.lim .track3 i{display:block;height:100%;background:var(--ink);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.lim .track3 i.warn2{background:var(--orange)}
.lim .pc{font-family:var(--mono);font-size:14px;white-space:nowrap;text-align:right;min-width:96px}
.lim .pc small{display:block;color:var(--ink-3);font-size:11px}
.fc{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--orange);border-radius:var(--r-m);
  padding:14px 16px;font-size:13.5px}
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.plan{border:1px solid var(--line);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column}
.plan.on{border-color:var(--ink)}
.plan .pn{font-family:var(--ui);font-weight:600;font-size:15px}
.plan .pp{font-family:var(--mono);font-size:19px;letter-spacing:-.03em;margin-top:8px}
.plan .pp small{font-size:11.5px;color:var(--ink-2);letter-spacing:0}
.plan .pq{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:4px}
.plan ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;font-size:12.5px;color:var(--ink-2)}
.plan li{display:grid;grid-template-columns:12px 1fr;gap:8px}
.plan li b{font-family:var(--mono);font-weight:400;color:var(--ink-3)}
.plan .pb{margin-top:auto;padding-top:16px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px;gap:2px}
.seg button{padding:5px 13px;border-radius:99px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.acctmenu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-s);
  font-family:var(--ui);font-size:13.5px}
.acctmenu button span{display:block;font-family:var(--body);font-weight:400;color:var(--ink-2);font-size:11.5px;margin-top:1px}
.acctmenu button:hover{background:var(--wash)}

/* hộp chọn ngôn ngữ */
.lgm{position:fixed;inset:0;background:rgba(10,10,12,.28);z-index:90;display:grid;place-items:center;
  padding:24px;animation:fade .18s ease}
.lgm-box{background:var(--paper);border-radius:var(--r-l);width:min(760px,100%);max-height:86vh;overflow:auto;
  box-shadow:var(--shadow-pop);animation:drop .22s cubic-bezier(.32,.72,0,1)}
.lgm-hd{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 6px}
.lgm-hd h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.lgm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 16px 8px}
.lgm-i{text-align:left;padding:11px 13px;border-radius:var(--r-m);border:1px solid transparent}
.lgm-i:hover{background:var(--wash)}
.lgm-i.on{background:var(--cream);border-color:var(--orange)}
.lgm-i .ln{display:block;font-family:var(--ui);font-size:14px;font-weight:500}
.lgm-i .le{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.lgm-ft{color:var(--ink-2);font-size:12.5px;margin:0;padding:10px 24px 22px;border-top:1px solid var(--line)}
@media (max-width:880px){.lgm-grid{grid-template-columns:1fr}}
@media (max-width:1180px){.plans{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.plans{grid-template-columns:1fr}.lim .row2{grid-template-columns:1fr;gap:8px}
  .lim .pc{text-align:left}}

/* ---------- hồ sơ năng lực ---------- */
.phero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;padding:26px 0 22px;border-bottom:1px solid var(--line)}
.phero .av2{width:96px;height:96px;border-radius:22px;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:34px;letter-spacing:-.03em}
.phero h1{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.phero .role{color:var(--ink-2);font-size:14.5px;margin-top:5px}
.phero .intro{font-size:14.5px;margin:12px 0 0;max-width:640px}
.phero .vf{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.vchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;
  padding:5px 11px;font-family:var(--ui);font-size:11.5px;font-weight:500}
.vchip i{width:5px;height:5px;border-radius:99px;background:var(--ink);display:inline-block}
.vchip.warm i{background:var(--orange)}
.phero .actions{display:grid;gap:8px;justify-items:stretch;min-width:190px}
.phero .link{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:2px}

.pstats{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;margin:22px 0 0}
.pstats>div{padding:14px 16px;border-right:1px solid var(--line)}
.pstats>div:last-child{border-right:0}
.pstats .k{color:var(--ink-2);font-size:11.5px;line-height:1.35}
.pstats .v{font-family:var(--mono);font-size:20px;letter-spacing:-.03em;margin-top:3px}
.pstats .v small{font-size:11.5px;color:var(--ink-2);letter-spacing:0;margin-left:3px}

/* lưới video kiểu bảng ghim */
.pinbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 14px}
.reels{columns:4;column-gap:var(--gap)}
.reel{break-inside:avoid;margin-bottom:var(--gap);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;background:var(--paper);position:relative;display:block;color:inherit;
  transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s ease,border-color .15s}
.reel:hover{transform:translateY(-3px);box-shadow:0 10px 30px -22px rgba(10,10,12,.85);border-color:#D8D6D2}
.reel .cov{position:relative;overflow:hidden}
.reel .cov svg{display:block;width:100%;height:100%}
.reel .plat{position:absolute;top:9px;left:9px;background:var(--paper);border-radius:99px;padding:3px 9px;
  font-family:var(--ui);font-size:10.5px;font-weight:600}
.reel .dur{position:absolute;bottom:9px;right:9px;background:rgba(10,10,12,.82);color:#fff;border-radius:6px;
  padding:2px 7px;font-family:var(--mono);font-size:10.5px}
.reel .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .18s}
.reel:hover .play{opacity:1}
.reel .play i{width:44px;height:44px;border-radius:99px;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 6px 20px -8px rgba(10,10,12,.5)}
.reel .play i::after{content:"";border-left:12px solid var(--orange);border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:3px}
.reel .rb{padding:12px 13px 13px}
.reel .rt{font-family:var(--ui);font-size:13.5px;font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel .rm{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:6px}
.reel .rtag{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--orange);margin-top:6px}
.reel.drag{opacity:.4;border-style:dashed}
.reel .grip{position:absolute;top:9px;right:9px;background:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:3px 8px;font-family:var(--mono);font-size:10.5px;display:none;cursor:grab}
.reels.sorting .grip{display:block}
.reels.sorting .reel{cursor:grab}

/* tiện ích ghim */
.ext{border:1px dashed var(--line);border-radius:var(--r-l);padding:18px 20px;display:grid;
  grid-template-columns:1fr auto;gap:18px;align-items:center}
.ext h3{font-family:var(--ui);font-size:14.5px;font-weight:600}
.ext ol{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:13px;display:grid;gap:4px}
.pinform{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:14px}
.pinprev{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-m);padding:12px}
.pinprev .th{border:1px solid var(--line);border-radius:9px;overflow:hidden}
@media (max-width:1180px){.reels{columns:3}.pstats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.reels{columns:2}.phero{grid-template-columns:1fr;gap:16px}
  .phero .actions{min-width:0}.pstats{grid-template-columns:repeat(2,1fr)}.ext{grid-template-columns:1fr}}

/* ---------- danh mục gom theo bộ môn ---------- */
.catg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.catcol{border:1px solid var(--line);border-radius:var(--r-l);padding:16px 16px 8px;display:flex;flex-direction:column}
.catcol h3{font-family:var(--ui);font-size:14px;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--line)}
.catrow{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:inherit}
.catcol .catrow:last-child{border-bottom:0}
.catrow:hover .cn{text-decoration:underline}
.catrow .cn{font-family:var(--ui);font-size:13.5px;font-weight:500;display:flex;gap:8px;align-items:baseline;justify-content:space-between}
.catrow .cs{color:var(--ink-2);font-size:12px;margin-top:3px;line-height:1.4}
.catrow .cf{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catrow .live{font-family:var(--mono);font-size:10.5px;color:var(--orange);white-space:nowrap}
.catrow .waitn{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.catwait{display:flex;gap:8px;align-items:center;margin-top:7px}
.catwait .bar3{flex:1;height:3px;background:var(--line);border-radius:99px;overflow:hidden}
.catwait .bar3 i{display:block;height:100%;background:var(--ink-3)}
.catwait button{font-family:var(--ui);font-size:11px;font-weight:500;border:1px solid var(--line);
  border-radius:7px;padding:3px 9px;white-space:nowrap}
.catwait button:hover{border-color:var(--ink)}
.catwait button.done{border-color:var(--orange);color:var(--orange)}
@media (max-width:1180px){.catg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.catg{grid-template-columns:1fr}}

/* ---------- bốn chặng giao hàng, dùng ở cả trang đặt hàng lẫn trang theo dõi ---------- */
.legs{display:grid;gap:0}
.leg{display:grid;grid-template-columns:26px 1fr auto;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);align-items:start}
.leg:last-child{border-bottom:0}
.leg .dot2{width:12px;height:12px;border-radius:99px;border:1.5px solid var(--ink-3);
  margin-top:4px;justify-self:center}
.leg.done .dot2{background:var(--ink);border-color:var(--ink)}
.leg.now .dot2{background:var(--orange);border-color:var(--orange)}
.leg .t2{font-family:var(--ui);font-weight:600;font-size:14px}
.leg .d2{color:var(--ink-2);font-size:13px;margin-top:2px}
.leg .r2{color:var(--ink-3);font-size:12px;margin-top:4px}
.leg .v2{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap}
.newscount{display:block}
@media (max-width:880px){.leg{grid-template-columns:26px 1fr}.leg .v2{grid-column:2;text-align:left}}

/* ---------- trung tâm quản lý và theo dõi lô hàng ---------- */
.sumbar{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.sumbar>a{padding:14px 18px;border-right:1px solid var(--line);color:inherit;display:block}
.sumbar>a:last-child{border-right:0}
.sumbar>a:hover{background:var(--wash)}
.sumbar .k{color:var(--ink-2);font-size:11.5px}
.sumbar .v{font-family:var(--mono);font-size:22px;letter-spacing:-.03em;margin-top:2px}
.sumbar .d{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.sumbar a.hot .v{color:var(--orange)}

.rowcard{display:grid;grid-template-columns:1fr auto;gap:10px 20px;padding:18px 0;border-bottom:1px solid var(--line)}
.rowcard .h{font-family:var(--ui);font-weight:600;font-size:14.5px}
.rowcard .m2{color:var(--ink-2);font-size:13px;margin-top:3px}
.rowcard .k2{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.rowcard .side{text-align:right;display:grid;gap:6px;justify-items:end}
.rowcard .st2{font-family:var(--ui);font-size:12px;font-weight:600}
.rowcard .st2.wait{color:var(--orange)}
.trackbar{display:flex;gap:4px;margin-top:10px;max-width:420px}
.trackbar span{flex:1;height:4px;border-radius:9px;background:var(--line)}
.trackbar span.on{background:var(--ink)}
.trackbar span.now{background:var(--orange)}
.tracklb{display:flex;gap:4px;max-width:420px;margin-top:5px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.tracklb span{flex:1}

/* trang theo dõi */
.trk{border:1px solid var(--line);border-radius:var(--r-l);padding:20px}
.trk .big2{font-family:var(--ui);font-size:20px;font-weight:600;letter-spacing:-.02em}
.trk .eta{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-top:4px}
.trk.late{border-color:var(--orange)}
.trk .warn{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border-radius:var(--r-m);
  padding:12px 14px;margin-top:14px;font-size:13px}
.evt{display:grid;grid-template-columns:96px 18px 1fr;gap:14px;padding:0}
.evt .when2{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right;padding-top:12px}
.evt .rail2{position:relative;display:flex;justify-content:center}
.evt .rail2::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.evt .rail2 i{position:relative;width:9px;height:9px;border-radius:99px;background:var(--paper);
  border:1.5px solid var(--ink-3);margin-top:16px}
.evt:first-child .rail2 i{background:var(--orange);border-color:var(--orange)}
.evt:first-child .rail2::before{top:16px}
.evt:last-child .rail2::before{bottom:calc(100% - 20px)}
.evt .body2{padding:12px 0 14px;border-bottom:1px solid var(--line)}
.evt:last-child .body2{border-bottom:0}
.evt .place{font-family:var(--ui);font-weight:600;font-size:13.5px}
.evt .what{color:var(--ink-2);font-size:13px;margin-top:2px}
.evt .doc{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin-top:7px}
.evt .doc:hover{border-color:var(--ink);color:var(--ink)}
.packs{display:grid;gap:0}
.packs .pk{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.packs .pk:last-child{border-bottom:0}
@media (max-width:900px){.sumbar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.rowcard{grid-template-columns:1fr}.rowcard .side{justify-items:start;text-align:left}
  .evt{grid-template-columns:70px 18px 1fr;gap:10px}}

/* ---------- chiến dịch nhãn hàng ---------- */
.camps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.camp{border:1px solid var(--line);border-radius:var(--r-l);padding:16px;position:relative;
  display:flex;flex-direction:column}          /* nút luôn ở đáy, thẻ nào cũng thẳng hàng */
.camp:hover{border-color:#D8D6D2}
.camp .top{display:flex;gap:12px;align-items:flex-start;color:inherit}
.camp .art{width:52px;height:52px;border:1px solid var(--line);border-radius:11px;overflow:hidden;flex:0 0 auto}
.camp .art svg{display:block;width:100%;height:100%}
.camp .tx{min-width:0;flex:1}
.camp .bd{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--ui);font-weight:600;font-size:14.5px;letter-spacing:-.01em;margin-top:2px;
  line-height:1.35;min-height:39px}            /* đúng hai dòng, tên dài ngắn không đẩy thẻ */
.camp .tg{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--mono);font-size:11px;color:var(--orange);margin-top:6px;min-width:0;
  line-height:1.5;word-break:break-word}
/* Hàng hashtag cắt một dòng thì ở cột hẹp chỉ còn thấy nửa cái tag đầu — vô nghĩa.
   Cho hai dòng rồi mới cắt: đủ để đọc trọn 2–3 tag, vẫn không đẩy thẻ cao lên mãi. */
.camp .top:hover .nm{text-decoration:underline}
.camp .vol{font-family:var(--mono);font-size:16px;margin-top:14px;display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap;row-gap:2px}
.camp .vol .goal{flex:1 1 100%;min-width:0;color:var(--ink-3);font-size:11.5px;line-height:1.35;
  font-family:var(--body);letter-spacing:0}
.camp .bar{height:5px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;margin:8px 0 4px}
.camp .bar i{display:block;height:100%;background:var(--ink);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.camp .row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-2);
  margin-top:6px;align-items:baseline}
.camp .row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp .tier{font-family:var(--ui);font-weight:600;font-size:12.5px;color:var(--ink)}
.camp .bump{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--orange);opacity:0;transform:translateY(4px);white-space:nowrap}
.camp .bump.on{animation:bump 2.4s ease forwards}

/* bảng xếp hạng và video nóng */
.lb{width:100%;border-collapse:collapse}
.lb th{font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  text-align:left;font-weight:600;padding:0 10px 10px;border-bottom:1px solid var(--line)}
.lb td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:13.5px}
.lb .rk{font-family:var(--mono);font-size:13px;color:var(--ink-2);width:34px}
.lb tr.top3 .rk{color:var(--orange);font-weight:500}
.lb .who2{display:flex;gap:10px;align-items:center}
.lb .who2 .av{width:30px;height:30px;border-radius:8px;background:var(--wash);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-2)}
.lb .pt{font-family:var(--mono);text-align:right;white-space:nowrap}
.lb .mo{font-family:var(--mono);text-align:right;white-space:nowrap;font-weight:500}
.lb tr.me td{background:var(--cream)}
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.vid .fr{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;position:relative}
.vid .fr svg{display:block;width:100%}
.vid .pl{position:absolute;left:10px;top:10px;background:var(--paper);border-radius:var(--r-pill);
  padding:3px 8px;font-family:var(--mono);font-size:10.5px}
.vid .t{font-family:var(--ui);font-size:13px;font-weight:500;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid .m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:3px}
.hash{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px dashed var(--line);
  border-radius:var(--r-m);padding:14px 16px}
.hash code{font-family:var(--mono);font-size:15px;background:var(--wash);border-radius:7px;padding:5px 10px}
.pts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pts div{border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px}
.pts .k{color:var(--ink-2);font-size:12px}
.pts .v{font-family:var(--mono);font-size:18px;margin-top:2px}
@media (max-width:1180px){.fcols{grid-template-columns:repeat(3,1fr)}
  .camps{grid-template-columns:repeat(2,1fr)}.vids{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){.camps{grid-template-columns:1fr}.vids{grid-template-columns:1fr}.pts{grid-template-columns:repeat(2,1fr)}}

/* ---------- tin thị trường có đường truyền tới giá ---------- */
.news{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.nw{border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;display:block;color:inherit}
.nw:hover{border-color:#D8D6D2}
.nw .eb{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:11.5px;font-family:var(--mono)}
.nw .eb .dot{width:5px;height:5px;border-radius:var(--r-pill);background:var(--ink-3)}
.nw h3{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:-.01em;margin:8px 0 12px;
  line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px}
.nw .chain{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nw .chain .st{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font-size:12.5px;color:var(--ink-2)}
.nw .chain .st b{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-weight:400;padding-top:1px}
.nw .chain .st:last-child{color:var(--ink)}
.nw .ft{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:12px}
.nw .imp{font-family:var(--ui);font-size:15px;font-weight:600}
.nw .imp.up{color:var(--orange)}
.nw .lag{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.nw .cf2{margin-left:auto;text-align:right}
.nw .cf2 .k{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.nw .cf2 .b{width:64px;height:3px;background:var(--line);border-radius:var(--r-pill);margin-top:4px;overflow:hidden}
.nw .cf2 .b i{display:block;height:100%;background:var(--ink-2)}
.newshead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.newstabs{margin:2px 0 12px}
.newsnote{color:var(--ink-2);font-size:12.5px;margin:0 0 16px;max-width:780px}
.nw .eb .ok{font-family:var(--ui);font-size:10px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:99px;padding:1px 7px}
.nw .eb .wait{font-family:var(--ui);font-size:10px;font-weight:600;color:var(--orange);
  border:1px solid var(--orange);border-radius:99px;padding:1px 7px}
.nw.vn .chain .st{grid-template-columns:62px 1fr}
.nw.vn .chain .st b{font-family:var(--ui);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.nw.vn .chain .st:last-child{color:var(--ink-2)}
.vnpost{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:1px dashed var(--line);
  border-radius:var(--r-m);padding:14px 16px;margin:0 0 16px}
.vnform{flex:1 1 100%;display:grid;gap:14px;padding-top:14px;border-top:1px solid var(--line);margin-top:2px}
.vnfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nw{padding:0;overflow:hidden}
.nw.open{border-color:var(--ink)}
.nwtop{display:block;width:100%;text-align:left;padding:16px 18px}
.nw .fresh{font-family:var(--ui);font-size:10px;font-weight:600;color:var(--orange);
  border:1px solid var(--orange);border-radius:99px;padding:1px 7px;letter-spacing:.02em}
.nw .eb{flex-wrap:wrap}
.nw .more{padding:0 18px 16px;display:grid;gap:12px}
.nw .mrow{display:grid;grid-template-columns:150px 1fr;gap:14px;font-size:13px;align-items:start}
.nw .mrow b{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.05em;padding-top:1px}
.nw .mrow span{color:var(--ink)}
.nw .mact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.scan{margin:16px 0 0}
.morewrap{text-align:center;padding:18px 0 4px}
.scanrow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;margin-bottom:6px}
@media (max-width:880px){.nw .mrow{grid-template-columns:1fr;gap:4px}}
@media (max-width:880px){.news{grid-template-columns:1fr}}

/* ---------- gửi nhanh ngay trên thẻ ---------- */
.pool .top{display:flex;gap:12px;align-items:flex-start;color:inherit}
.pool .top:hover .nm{text-decoration:underline}
.qk{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.qk .amts{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.amt{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-family:var(--mono);font-size:11.5px;
  transition:border-color .15s,background .15s}
.amt:hover{border-color:var(--ink)}
.amt.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ô nhập số lượng + gửi + từ file: một hàng, nút cam nhỏ và cố định chỗ */
.sendrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.qtybox{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-s);
  padding:0 10px;min-width:0;background:var(--paper);transition:border-color .15s}
.qtybox:focus-within{border-color:var(--ink)}
.qty2{flex:1;min-width:0;width:100%;border:0;outline:none;background:none;height:36px;
  font-family:var(--mono);font-size:13px;text-align:right}
.qtybox .un{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);padding-left:6px;white-space:nowrap}
.sendrow .btn{white-space:nowrap}
.needline{color:var(--ink-3);font-size:11.5px;margin-top:8px;line-height:1.35;min-height:31px}
.needline.hit{color:var(--orange)}

/* chia file nhiều vật tư vào các đợt */
.splitzone{border:1px dashed var(--line);border-radius:var(--r-l);padding:18px 20px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.splitzone:hover{border-color:var(--ink-3)}
.splitbox{border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;margin-top:14px}
.sphead{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sphead b{font-family:var(--ui);font-size:14px}
.sphead .muted{font-size:12.5px}
.splist{display:grid}
.sprow{display:grid;grid-template-columns:1fr auto 1.2fr auto;gap:14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.sprow .n{font-family:var(--mono);font-size:12.5px}
.sprow .p2{color:var(--ink-2);font-size:12.5px}
.spft{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:12px}
@media (max-width:700px){.sprow{grid-template-columns:1fr auto;gap:4px 10px}
  .sprow .p2{grid-column:1/-1}}

/* hàng lọc: thời gian, chủng loại, lọc nâng cao */
.filterbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.filterbar .ptabs{flex:1;min-width:0}
.adv{border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;margin:12px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.adv .f label{font-size:12px}
.adv .in{height:38px}
.advfoot{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
@media (max-width:900px){.adv{grid-template-columns:repeat(2,1fr)}}
.cf{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cf .cft{font-family:var(--ui);font-weight:600;font-size:13.5px}
.tick{transition:color .35s ease}
.tick.up{color:var(--orange)}

/* ---------- chiến dịch nóng nhất ---------- */
.hot{border:1px solid var(--ink);border-radius:var(--r-l);overflow:hidden}
.hot .hd{display:flex;gap:14px;align-items:flex-start;padding:20px 22px 0}
.hot .hd .art{width:52px;height:52px;border:1px solid var(--line);border-radius:11px;overflow:hidden;flex:0 0 auto}
.hot .hd .art svg{display:block;width:100%;height:100%}
.hot .lb{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.hot h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:3px 0 2px}
.hot .body{display:grid;grid-template-columns:1fr 300px;gap:24px;padding:16px 22px 22px}
.hot .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 0 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.hot .nums .k{color:var(--ink-2);font-size:11.5px}
.hot .nums .v{font-family:var(--mono);font-size:19px;letter-spacing:-.03em;margin-top:2px}
.hot svg.big{display:block;width:100%;height:180px}
.hot .rng{display:flex;gap:4px;justify-content:flex-end;margin-bottom:4px}
.hot .rng button{font-family:var(--mono);font-size:11px;color:var(--ink-2);padding:3px 8px;border-radius:6px}
.hot .rng button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hot .buy{border:1px solid var(--line);border-radius:var(--r-m);padding:16px;align-self:start}
.hot .buy h3{font-family:var(--ui);font-size:14px;font-weight:600;margin-bottom:10px}
@media (max-width:1000px){.hot .body{grid-template-columns:1fr}.hot .nums{grid-template-columns:repeat(2,1fr)}}

/* ---------- trang chi tiết đợt gom ---------- */
.pd{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;padding-top:22px}
.pd .head{display:flex;gap:16px;align-items:flex-start}
.pd .head .art{width:56px;height:56px;border:1px solid var(--line);border-radius:12px;overflow:hidden;flex:0 0 auto}
.pd .head .art svg{display:block;width:100%;height:100%}
.pd h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
.pd .sub{color:var(--ink-2);font-size:13.5px;margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.pd .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 4px}
.pd .price .p{font-family:var(--mono);font-size:30px;letter-spacing:-.04em}
.pd .price .t{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--orange)}
.pd .price .c{color:var(--ink-2);font-size:13px}

.chart{border:1px solid var(--line);border-radius:var(--r-l);padding:16px 16px 10px;margin-top:16px}
.chart .rng{display:flex;gap:4px;justify-content:flex-end;margin-bottom:6px}
.chart .rng button{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);padding:4px 9px;border-radius:7px}
.chart .rng button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chart svg{display:block;width:100%;height:230px}
.chart .lg{display:flex;gap:18px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line);margin-top:8px;
  color:var(--ink-2);font-size:12px}
.chart .lg i{display:inline-block;width:16px;height:0;border-top:2px solid var(--ink);margin-right:6px;vertical-align:middle}
.chart .lg i.d{border-top-style:dashed;border-color:var(--ink-3)}
.chart .lg i.o{border-color:var(--orange)}

.ladder td:first-child{font-family:var(--ui);font-weight:600;font-size:13.5px}
.ladder tr.now td{background:var(--cream)}
.ladder .odds{font-family:var(--mono);font-size:12.5px}
.ladder .obar{height:4px;background:var(--line);border-radius:var(--r-pill);margin-top:5px;overflow:hidden;width:120px}
.ladder .obar i{display:block;height:100%;background:var(--ink)}
.ladder tr.now .obar i{background:var(--orange)}

.who{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.who .av{width:36px;height:36px;border-radius:9px;background:var(--wash);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.who .n{font-family:var(--ui);font-size:13.5px;font-weight:500}
.who .m{color:var(--ink-2);font-size:12.5px;margin-top:1px}
.who .q{font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap}
.who .q small{display:block;color:var(--ink-3);font-size:11px}
.who.me{background:var(--cream);border-radius:10px;padding:13px 12px;border-bottom:0;margin:4px 0}
.mask{border:1px dashed var(--line);border-radius:var(--r-m);padding:14px 16px;color:var(--ink-2);font-size:12.5px;margin:16px 0 4px}
details.faq{border-bottom:1px solid var(--line);padding:14px 0}
details.faq summary{font-family:var(--ui);font-weight:500;font-size:14px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--ink-3);font-family:var(--mono)}
details.faq[open] summary::after{content:"−"}
details.faq p{color:var(--ink-2);font-size:13.5px;margin:10px 0 0}
@media (max-width:1000px){.pd{grid-template-columns:1fr}}

/* ---------- nhãn nhỏ ---------- */
.pill{border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 9px;font-family:var(--ui);font-size:11.5px;font-weight:500;display:inline-block}
.pill.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-family:var(--mono);font-size:11.5px}
.chip.on{border-color:var(--ink)}

/* ---------- bố cục hai cột có thẻ dính ---------- */
.cols{display:grid;grid-template-columns:1fr 372px;gap:80px;align-items:start;padding-top:30px}
.cols.filters{grid-template-columns:248px 1fr;gap:40px}
.block{padding:26px 0;border-bottom:1px solid var(--line)}
.block:first-child{padding-top:0}
.block:last-child{border-bottom:0}
.block h2{font-size:19px;font-weight:600;margin-bottom:12px}
.sticky{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow-pop)}

/* ---------- danh sách khóa/giá trị ---------- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}
.spec{display:flex;gap:12px;align-items:baseline}
.spec .k{color:var(--ink-2);font-size:13px;flex:0 0 104px}
.spec .v{font-family:var(--mono);font-size:12.5px}
.lines{display:grid;gap:9px}
.li{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.li .r{font-family:var(--mono);font-size:12.5px}
.li.tot{border-top:1px solid var(--line);padding-top:11px;font-family:var(--ui);font-weight:600}
.stat .sv{font-family:var(--mono);font-size:17px}
.stat .sk{color:var(--ink-2);font-size:12px;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ---------- bảng giá vật tư ---------- */
.ptable{width:100%;border-collapse:collapse}
.ptable th{font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);text-align:left;font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.ptable td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable tr.on td{background:var(--cream)}
.ptable .name{font-family:var(--mono);font-size:12.5px}
.ptable .price{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.ptable .price .u{color:var(--ink-2)}
.ptable .best{color:var(--orange);font-family:var(--ui);font-size:11px;font-weight:600;margin-left:6px}
.qty{width:72px;height:34px;border:1px solid var(--line);border-radius:var(--r-s);padding:0 8px;font-family:var(--mono);font-size:12.5px;text-align:right}
.qty:focus{border-color:var(--ink);outline:none}
.linetot{font-family:var(--mono);font-size:12.5px;white-space:nowrap;text-align:right}
.specrow td{padding:0 12px 12px;border-bottom:1px solid var(--line)}
.specrow .chips{padding-top:2px}
.expand{color:var(--ink-2);font-size:12px;text-decoration:underline}

/* ---------- biểu mẫu ---------- */
.fields{display:grid;gap:16px}
.f label{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;margin-bottom:6px}
.f .in{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--r-m);padding:0 13px;background:var(--paper)}
.f textarea.in{height:auto;padding:12px 13px;min-height:96px;resize:vertical}
.f .in:focus{border-color:var(--ink);outline:none}
.f .hint{color:var(--ink-2);font-size:12px;margin-top:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.opt:last-child{border-bottom:0}
.opt:hover{background:var(--wash)}
.opt input{margin:3px 0 0;accent-color:var(--orange)}
.opt .ot{font-family:var(--ui);font-weight:600;font-size:13.5px}
.opt .od{color:var(--ink-2);font-size:12.5px}
.opt .op{margin-left:auto;font-family:var(--mono);font-size:12.5px;text-align:right;white-space:nowrap}
.opt.sel{box-shadow:inset 0 0 0 1.5px var(--ink)}
.optbox{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.drop{border:1px dashed var(--ink-3);border-radius:var(--r-m);background:var(--paper);padding:22px;text-align:center}
.filechip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:7px 10px;font-family:var(--mono);font-size:12px;margin-top:10px}
.box{border:1px solid var(--line);border-radius:var(--r-l);padding:20px}
.box.wash{background:var(--wash)}

/* ---------- mốc ký quỹ ---------- */
.miles{display:grid;gap:0}
.mile{display:grid;grid-template-columns:26px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.mile:last-child{border-bottom:0}
.mdot{width:12px;height:12px;border-radius:var(--r-pill);border:1.5px solid var(--ink-3);margin-top:4px;justify-self:center}
.mile.done .mdot{background:var(--ink);border-color:var(--ink)}
.mile.now .mdot{background:var(--orange);border-color:var(--orange)}
.mile .mt{font-family:var(--ui);font-weight:600;font-size:14px}
.mile .md{color:var(--ink-2);font-size:13px;margin-top:2px}
.mile .mv{font-family:var(--mono);font-size:12.5px;white-space:nowrap;text-align:right}

/* ---------- tiến trình, kết quả ---------- */
.prog{height:4px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s linear}
.track{height:3px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.track i{display:block;height:100%;background:var(--ink)}

/* ---------- trạng thái rỗng ---------- */
.empty{text-align:center;padding:56px 20px;border:1px dashed var(--line);border-radius:var(--r-l)}
.empty h3{font-size:16px;margin-bottom:6px}
.empty p{color:var(--ink-2);margin:0 0 16px}

/* ---------- dải cảm hứng và chân trang ---------- */
.band{background:var(--wash);border-top:1px solid var(--line);margin-top:44px;padding:44px 0 8px}
.band h2{font-size:20px;font-weight:600;margin-bottom:16px}
.ptabs{display:flex;gap:26px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.grid-links{display:grid;grid-template-columns:repeat(7,1fr);gap:26px 20px;padding:26px 0 34px}
.grid-links .g1{font-family:var(--ui);font-size:13.5px;font-weight:500}
.grid-links .g2{color:var(--ink-2);font-size:12.5px;margin-top:1px}
.grid-links a:hover .g1{text-decoration:underline}
.ft{background:var(--wash);padding:8px 0 40px}
.fcols{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;border-top:1px solid var(--line);padding-top:28px}
.fcols a.soon{color:var(--ink-3)}
.flaw{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.flaw button{font-family:var(--body);font-size:12.5px;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line)}
.flaw button:hover{color:var(--ink)}
.fnote{font-family:var(--mono);font-size:11px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:99px;padding:2px 9px}

/* menu tài khoản: thêm vạch ngăn, phím tắt và nhãn Mới */
.acctmenu .asep{height:1px;background:var(--line);margin:6px 4px}
.acctmenu kbd{float:right;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:5px;padding:0 5px}
.acctmenu a em{font-style:normal;float:right;font-family:var(--ui);font-size:10px;font-weight:600;
  color:var(--orange);border:1px solid var(--orange);border-radius:99px;padding:0 7px}
.acctmenu button span{float:right;font-family:var(--body);font-weight:400;color:var(--ink-3);font-size:11.5px;margin:0}

/* hộp cài đặt */
.setm{position:fixed;inset:0;background:rgba(10,10,12,.28);z-index:95;display:grid;place-items:center;
  padding:24px;animation:fade .18s ease}
.setbox{background:var(--paper);border-radius:var(--r-l);width:min(940px,100%);height:min(660px,88vh);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-pop);
  animation:drop .22s cubic-bezier(.32,.72,0,1)}
.sethd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.sethd b{font-family:var(--ui);font-size:16px}
.setwrap{display:grid;grid-template-columns:236px 1fr;flex:1;min-height:0}
.setnav{border-right:1px solid var(--line);padding:14px 10px;overflow:auto}
.setsec{font-family:var(--ui);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);padding:12px 10px 6px}
.setnav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;
  border-radius:var(--r-s);font-family:var(--ui);font-size:13.5px;color:var(--ink-2)}
.setnav button svg{flex:0 0 auto;opacity:.75}
.setnav button.on svg{opacity:1}
.setnav button:hover{background:var(--wash);color:var(--ink)}
.setnav button.on{background:var(--wash);color:var(--ink);font-weight:600}
.planbox{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--ink);border-radius:var(--r-m);padding:16px 18px;margin-bottom:22px}
.planbox b{font-family:var(--ui);font-size:15px;font-weight:600;display:block}
.planbox>div>span{display:block;color:var(--ink-2);font-size:12.5px;margin-top:3px;max-width:520px}
.setbody{padding:22px 26px;overflow:auto}
.setbody h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.setnote{color:var(--ink-2);font-size:13px;margin:0 0 18px;max-width:620px}
.setg{margin-bottom:24px}
.setg h4{font-family:var(--ui);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:6px}
.setrow{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--line);color:inherit}
.setrow:last-child{border-bottom:0}
a.setrow:hover .mono{color:var(--orange)}
.setrow b{font-family:var(--ui);font-size:13.5px;font-weight:500;display:block}
.setrow span span{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.setrow .mono{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.setfoot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.setfoot .mono{font-size:11.5px;color:var(--ink-3)}
.fcols h3{font-size:13.5px;font-weight:600;margin-bottom:12px}
.fcols a{display:block;color:var(--ink-2);font-size:13px;padding:5px 0}
.fcols a:hover{color:var(--ink);text-decoration:underline}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:28px;padding-top:20px;color:var(--ink-2);font-size:12.5px}

/* ---------- thanh hành động dính đáy trên mobile ---------- */
/* Nút quay lại — chỉ trang chi tiết, chỉ điện thoại. Đặt trước logo đúng chỗ
   ngón cái với tới, và là đường lùi thay cho thanh menu đã bỏ. */
.qlai{display:none;flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  place-items:center;margin-right:2px}
.qlai{position:relative}
/* Vòng tròn giữ 34px cho thanh trên gọn, nhưng vùng chạm nới ra 44px theo chuẩn
   — ngón cái không bấm trúng vòng tròn nhỏ. */
.qlai::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.qlai:hover{background:var(--wash);border-color:var(--ink-3)}

.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:1px solid var(--line);align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(10,10,12,.06)}
.mobar .mp{flex:1;min-width:0}
.mobar>.btn{flex:0 0 auto}
.mobar .mp b{font-family:var(--ui);font-size:15px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobar .mp span{display:block;color:var(--ink-2);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:59;background:var(--paper);border-top:1px solid var(--line)}
.mobnav ul{display:flex;margin:0;padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px));list-style:none}
.mobnav li{flex:1;text-align:center}
.mobnav a{font-family:var(--ui);font-size:10.5px;color:var(--ink-2);display:block}
.mobnav a[aria-current="page"]{color:var(--ink);font-weight:600}
.mobnav .d{display:block;width:5px;height:5px;border-radius:var(--r-pill);background:var(--line);margin:0 auto 5px}
.mobnav a[aria-current="page"] .d{background:var(--orange)}

/* ══ HAI CÁI BẪY BỐ CỤC — chữa một lần ở đây, đừng chữa lại ở từng màn ══════
   Cả hai đều im lặng: không lỗi, không cảnh báo, chỉ là trang tự nhiên cuộn ngang.
   Trong một ngày dựng màn tôi mắc lại BỐN lần, nên đặt luật ở gốc.

   ① Ô lưới và ô flex mặc định là `min-width:auto` — chúng KHÔNG chịu co nhỏ hơn
      nội dung dài nhất bên trong. Một hàng chip `nowrap`, một ô bảng dài, một
      chuỗi mã băm là đủ nong cả trang ra. `min-width:0` trả lại quyền co, và
      KHÔNG đổi gì về mặt nhìn khi còn chỗ rộng.

   ② `text-overflow:ellipsis` KHÔNG có tác dụng lên phần tử inline. Viết luật cắt
      đuôi lên một <span> hay <a> là viết vào chỗ trống — chữ vẫn tràn nguyên.

   Màn mới tự định nghĩa lưới riêng thì dùng hai lớp tiện ích `.fit` và `.ell`
   bên dưới, đừng chép lại luật. */
.cols>*,.camps>*,.grid-cards>*,.two>*,.vids>*,.specs>*,.stats>*,.plans>*,
.g3>*,.g4>*,.g6>*,.pts>*,.fcols>*,.grid-links>*,.pd>*,.ext>*{min-width:0}
.camp,.box,.block{min-width:0}

/* `.fit` — ô lưới/flex chịu co. `.ell` — một dòng, cắt đuôi ba chấm (tự thành
   khối, nên dùng được cho cả <span> và <a>). `.ell2` — hai dòng rồi cắt. */
.fit{min-width:0}
.ell{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ell2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}

/* ══ THẺ HÀNH ĐỘNG BÊN PHẢI: DÍNH LẠI RỒI NHẢ RA ═══════════════════════════
   `.sticky` vốn đã khai `position:sticky` nhưng KHÔNG dính một pixel nào. Lý do
   nằm ở lưới cha: `align-items:start` làm ô `aside` chỉ cao bằng nội dung của
   chính nó, mà `position:sticky` chỉ trượt được TRONG khối chứa nó. Ô cao đúng
   bằng thẻ thì quãng đường trượt bằng 0 — khai sticky mà không có tác dụng, và
   không có lỗi nào báo.

   Cho riêng ô bên phải giãn hết chiều cao hàng; cột trái vẫn `start` như cũ. */
.cols>aside,.pd>aside{align-self:stretch;min-width:0}

/* Mốc dính = đáy header + 16. Đặt qua biến để một chỗ đổi là mọi màn theo. */
:root{--dinh-top:90px}
.sticky{position:sticky;top:var(--dinh-top);
  transition:box-shadow .25s ease;will-change:transform}
/* Thẻ CAO HƠN chỗ trống thì dính đỉnh sẽ cắt mất đáy — phần đặt nút bấm nằm ở
   đáy, tức là cắt mất đúng thứ người ta cần. `ocs-sticky.js` xử phần đó bằng
   cách để thẻ trôi theo cuộn tới khi đáy nó chạm đáy khung nhìn rồi mới ghim.
   Lớp này chỉ để tắt hoạt ảnh khi người dùng đã tắt hiệu ứng. */
@media (prefers-reduced-motion: reduce){ .sticky{transition:none} }

/* ══ ẨN THANH KHI CUỘN XUỐNG, HIỆN LẠI KHI CUỘN LÊN ═══════════════════════
   Trên điện thoại, header và thanh dưới chiếm gần 110px — một phần năm màn hình
   chỉ để đứng đó. Người đang đọc thì trả chỗ đó cho nội dung; người vừa vuốt
   ngược lên là đang tìm đường đi, nên trả thanh về ngay lập tức.

   Dịch bằng `transform` chứ không đổi `height` hay `display`: transform chạy trên
   luồng hợp thành, không bắt trình duyệt tính lại bố cục, nên không giật và không
   làm nội dung nhảy chỗ.

   Ba chốt an toàn:
   · gần đỉnh trang thì LUÔN hiện — không ai muốn phải vuốt ngược để thấy tìm kiếm;
   · đang mở sheet, popup hay bảng chọn thì không đụng vào;
   · `prefers-reduced-motion` thì bỏ hoạt ảnh, vẫn ẩn hiện nhưng cắt ngay. */
/* ★ CHỈ MOBILE. Trên desktop, header đã có sẵn hiệu ứng riêng: thanh tìm to thu
   lại thành viên thuốc khi cuộn. Chồng thêm một phép dịch `transform` lên trên
   là hai hiệu ứng tranh nhau — và vì phép thu làm ĐỔI CHIỀU CAO header, vị trí
   cuộn bị đẩy ngược lại, sinh ra đúng cái giật ở khung tìm kiếm. Desktop giữ
   nguyên như cũ, không đụng một dòng nào. */
@media (max-width:880px){
  .hdr{transition:transform .26s cubic-bezier(.32,.72,0,1),box-shadow .3s ease;will-change:transform}
  .mobnav,.mobar{transition:transform .26s cubic-bezier(.32,.72,0,1);will-change:transform}
  html.oc-an .hdr{transform:translateY(-100%)}
  html.oc-an .mobnav{transform:translateY(100%)}
  /* Thanh menu trốn khi cuộn xuống để nhường chỗ đọc. Thanh HÀNH ĐỘNG thì không:
     nó là việc người ta tới trang này để làm, giấu đi là bắt họ cuộn ngược tìm lại. */
  html.oc-an .mobar{transform:none}
}
/* Trong lúc kéo đổi cỡ cửa sổ thì tắt hoạt ảnh: thanh đang trượt theo con trỏ
   nhìn như trang bị lag, dù thực ra không. */
html.oc-resize .hdr,html.oc-resize .mobnav,html.oc-resize .mobar,
html.oc-resize .sheet,html.oc-resize .minisearch,html.oc-resize .search{transition:none!important}
@media (prefers-reduced-motion: reduce){
  .hdr,.mobnav,.mobar{transition:none}
}

/* ══ DẢI CHỈ SỐ Ở KHỔ HẸP — co thì đọc được, không phải co thì vừa khung ═════
   `.mkt` là 5 ô chia đều. Ở 390px mỗi ô còn ~46px, nhãn cắt còn ba ký tự:
   "Đồn…", "Ch…", "Nh…". Trang KHÔNG tràn ngang nên máy đo cũ báo đạt — nhưng
   không ai đọc được, tức là tệ hơn cả tràn.
   Chữa đúng cách: cho DẢI cuộn ngang, giữ mỗi ô đủ rộng để đọc. Người dùng vuốt
   để xem tiếp, đúng thói quen đã có ở các hàng thẻ khác. */
@media (max-width:760px){
  .mkt{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none}
  .mkt::-webkit-scrollbar{display:none}
  .mkt .it{flex:0 0 46%;scroll-snap-align:start;min-width:0}
  .mkt .n{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
}
@media (max-width:420px){ .mkt .it{flex:0 0 62%} }

/* ---------- đáp ứng ---------- */
@media (max-width:1440px){.rail{grid-auto-columns:calc((100% - 5*var(--gap))/6)}.grid-links{grid-template-columns:repeat(6,1fr)}}
@media (max-width:1180px){.rail{grid-auto-columns:calc((100% - 4*var(--gap))/5)}.grid-links{grid-template-columns:repeat(4,1fr)}
  .cols{grid-template-columns:1fr 330px;gap:44px}.grid-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:920px){.rail{grid-auto-columns:calc((100% - 2*var(--gap))/3)}.grid-links{grid-template-columns:repeat(3,1fr)}
  .tabs{gap:18px}.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){
  .hdr .bar{grid-template-columns:1fr auto;row-gap:10px}
  .center{grid-column:1/-1;justify-self:stretch;order:3}
  .tabs{overflow-x:auto;width:100%;scrollbar-width:none;justify-content:flex-start}
  .tabs::-webkit-scrollbar{display:none}
  /* Viên thuốc tìm kiếm có `white-space:nowrap`, bề rộng nội tại ~578px. Ở 390px nó
     nong cả lưới đầu trang ra 509px ⇒ TOÀN TRANG cuộn ngang — kể cả khi nó đang
     `opacity:0` (vẫn chiếm ô lưới). Khống chế bề rộng và cắt đuôi ba chấm. */
  .center{min-width:0}
  .minisearch{justify-self:stretch;min-width:0;max-width:100%;overflow:hidden}
  .minisearch>span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* ★ Ở 390px, ô thu gọn nhồi cả ba nhãn thì câu CHÍNH chỉ còn 83px — đọc ra
     "Cần hỏi về…" rồi hết, tức là ô tìm không còn nói được nó tìm gì. Hai nhãn
     phụ chỉ có ích khi còn chỗ; hết chỗ thì bỏ chúng đi để câu chính đọc được.
     Bấm vào vẫn mở đủ ba bước như cũ. */
  @media (max-width:560px){
    .minisearch>.sep,.minisearch>.dim{display:none}
    .minisearch>span:first-child{flex:1}
  }
  /* Và bỏ `scale(1.42)` của trạng thái ẩn: hộp SAU biến đổi mới là thứ tính vào
     vùng cuộn, nên 358px × 1,42 = 508px vẫn kéo trang ngang dù phần tử đang
     `opacity:0`. Ở khổ hẹp giữ đúng phần trôi lên — vừa mượt, vừa không tràn. */
  .minisearch{transform:translateY(30px)}
  .hdr.shrunk .minisearch{transform:none}
  .ptable td,.ptable th{min-width:0;overflow-wrap:anywhere}
  /* Bốn lưới còn cột CỨNG chưa được hạ xuống một cột ở khổ điện thoại: cột 340px
     cộng cột 1fr là đã vượt 390px trước khi có chữ nào. */
  .pd{grid-template-columns:1fr;gap:22px}
  .hot .body{grid-template-columns:1fr;padding:16px}
  .lim .row2{grid-template-columns:1fr;gap:8px}
  .nw .mrow{grid-template-columns:1fr;gap:4px}
  .nw.vn .chain .st{grid-template-columns:56px 1fr}
  .pd>*,.pd aside>*,.pd .sticky>*{min-width:0}
  /* Bảng xếp hạng có `white-space:nowrap`: ở khổ hẹp cho CHÍNH BẢNG cuộn ngang,
     thay vì để nó kéo cả trang. Số liệu vẫn đọc được, trang thì không lệch. */
  .lb{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Ô chọn lấy bề rộng theo dòng lựa chọn DÀI NHẤT (ở đây 399px). Trong một hàng
     flex, `max-width:100%` không cứu được vì hàng đã nở theo nó rồi — phải cho
     flex-basis 0 để nó chịu co. */
  select.in,input.in,textarea.in{max-width:100%;min-width:0;flex:1 1 0}
  .chart svg,.art svg,figure svg{max-width:100%}
  .minisearch .dim{flex-shrink:0}
  .minisearch .go{flex-shrink:0}
  .ghost{display:none}
  .search{grid-template-columns:1fr auto}
  .search .fld:nth-child(2),.search .fld:nth-child(3){display:none}
  .rail{grid-auto-columns:60%}
  .grid-cards,.two,.specs{grid-template-columns:1fr}
  .fcols{grid-template-columns:repeat(2,1fr)}
  .setwrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .setnav{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto}
  .setsec{display:none}.setnav button{white-space:nowrap;width:auto}
  .cols,.cols.filters{grid-template-columns:1fr;gap:0}
  .sticky{position:static;box-shadow:none;margin:24px 0 100px}
  .grid-links{grid-template-columns:repeat(2,1fr)}
  .rowhead h2{font-size:18px}
  .railnav{display:none}
  .mobar,.mobnav{display:flex}
  .mobnav{display:block}
  html.oc-ctabar .mobnav{display:none}          /* chắn hai lớp: shell cũng không dựng */
  .qlai{display:grid}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  html.oc-ctabar body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .ptable thead{display:none}
  .ptable tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
  .ptable td{border:0;padding:0}
  .ptable .name{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ==========================================================================
   TẦNG CO GIÃN — mọi lưới, bảng, hộp và thanh dính đều đi qua đây.
   Bốn khổ: máy trạm ≥1180 · máy tính nhỏ 980 · máy bảng 760 · điện thoại 520.
   Lưới dùng chung g2 g3 g4 g6 để trang không phải tự viết grid rồi quên điểm ngắt.
   ========================================================================== */
.g2,.g3,.g4,.g6{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.g-tight{gap:10px}
.g-wide{gap:26px 40px}

@media (max-width:1180px){
  .g6{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .impstrip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .cols aside .sticky{position:static}        /* thanh dính hết ý nghĩa khi đã xuống một cột */
  .pd{grid-template-columns:1fr}
  .pd aside .sticky{position:static}
}
@media (max-width:760px){
  .g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .g-wide{gap:20px}
  /* bảng dài thì cho cuộn ngang trong khung của nó, không đẩy vỡ cả trang */
  .ptable,.lb{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .ptable td.name,.lb td{white-space:normal}
  /* hộp thoại chiếm nguyên màn hình, đúng cách ứng dụng di động làm */
  .setm,.lgm{padding:0}
  .setbox,.lgm-box{width:100%;height:100%;max-height:100%;border-radius:0}
  .chart svg,.hot svg.big{height:180px}
  .wrap{padding-left:18px;padding-right:18px}
}
@media (max-width:520px){
  .wrap{padding-left:14px;padding-right:14px}
  h1{font-size:clamp(20px,6vw,24px)}
  .pstats,.impstrip,.sumbar,.imp2 .big,.imp2 .sup,.pts{grid-template-columns:1fr 1fr}
  .imp2 .vgrid{grid-template-columns:1fr}
  .hot .nums{grid-template-columns:1fr 1fr}
  .sendrow{grid-template-columns:1fr auto}
  .btn.full,.btn{min-height:44px}            /* ngón tay cần vùng bấm ít nhất 44px */
  .amt,.chip,.tab{min-height:36px;display:inline-flex;align-items:center}
  .evt{grid-template-columns:56px 14px 1fr;gap:8px}
  .who{grid-template-columns:32px 1fr;gap:10px}
  .who .q{grid-column:2;text-align:left}
  .sprow{grid-template-columns:1fr}
  .setrow{flex-direction:column;align-items:flex-start;gap:4px}
  .setrow .mono{white-space:normal}
}
/* ảnh và hình vẽ không bao giờ được tràn khung */
img,svg,video,canvas{max-width:100%}
/* chữ dài không dấu cách, ví dụ mã đơn hay đường dẫn, phải xuống dòng được */
.mono,code{overflow-wrap:anywhere}

/* Nhãn dữ liệu minh hoạ — cả trang chạy bằng assets/data.js, chưa nối máy chủ. */


/* ══ KHU SỰ KIỆN ══════════════════════════════════════════════════════════════
   Sự kiện đi ngược chiều chợ: không phải "có sẵn hàng, ai cần thì mua" mà "có
   người cần, ai làm được thì làm". Nên thẻ ở đây nặng về BÀI TOÁN và HẠN, chứ
   không phải giá và điểm sao như thẻ hàng hoá.
   Cam chỉ dùng cho: nút hành động · quỹ thưởng · mũi tên tăng. Hết. */

/* ── Dải số tổng ───────────────────────────────────────────────────────────── */
.skstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:22px 0 0}
.skstat{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--paper);min-width:0}
.skstat .k{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skstat .v{font-family:var(--mono);font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skstat .s{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
@media (max-width:1080px){ .skstats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .skstats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── Hàng lọc ──────────────────────────────────────────────────────────────── */
.skbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 16px;flex-wrap:wrap}
.skbar .chips{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.skbar .chips::-webkit-scrollbar{display:none}
.skbar .chip{white-space:nowrap}
.skbar .chip b{margin-left:7px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-3)}
.skbar .chip.on b{color:inherit;opacity:.7}
.skorder{font-size:13px;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px}
.skorder .in{height:36px;width:auto;border-radius:8px}

/* ── Thẻ sự kiện ───────────────────────────────────────────────────────────── */
.skcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;
  background:var(--paper);overflow:hidden;min-width:0;transition:border-color .18s,transform .18s}
.skcard:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.skthumb{position:relative;aspect-ratio:16/10;background:var(--wash);overflow:hidden}
.skthumb svg{width:100%;height:100%;display:block}
.sknhom{position:absolute;left:10px;top:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px 10px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink)}
.sknong{position:absolute;right:10px;top:10px;background:var(--ink);color:var(--paper);
  border-radius:var(--r-pill);padding:4px 10px;font-family:var(--ui);font-size:11px;font-weight:600}
.skbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.skten{font-family:var(--ui);font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.skmo{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.skbody .l{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px}
.skquy b{font-family:var(--mono);font-size:18px;letter-spacing:-.03em;color:var(--ink)}
/* Số tiền KHÔNG tô cam. Mỗi thẻ đã có một nút cam rồi; thêm một con số cam
   nữa là hai điểm cam cạnh nhau, mắt hết biết đâu là chỗ bấm. */
.skmuc{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.skmeta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.skmeta b{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* MỘT DÒNG, không cho xuống hàng: cho xuống hàng thì thẻ nào số dài sẽ cao hơn
   thẻ khác 24px, và cả hàng lưới bị kéo theo — nhìn ra như lỗi dựng trang. */
.skview{border-top:1px solid var(--line);padding-top:11px;display:flex;align-items:center;gap:7px;
  flex-wrap:nowrap;min-width:0;white-space:nowrap}
.skview b{font-size:13.5px;color:var(--ink)}
.skview .eye{flex:0 0 auto;color:var(--ink-3)}
/* Chữ cho trình đọc màn hình: bỏ nhãn nhìn thấy được nhưng KHÔNG bỏ nghĩa —
   người dùng trình đọc chỉ nghe thấy một con số trơ thì không hiểu nó là gì. */
.skview .vs{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skview .vd{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.up{color:#1B8A4B;font-size:11.5px}
.sktag{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3);min-width:0}
.sktag .tg{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skjoin{margin-top:2px;text-align:center}

/* ── Cột phải ──────────────────────────────────────────────────────────────── */
.skbox{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:16px;margin-bottom:16px}
.skbox.nb{margin-bottom:14px}
.skbh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.skbh h3{font-family:var(--ui);font-size:13px;font-weight:600;margin:0}
.skrank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.skr{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:8px 0;min-width:0}
.skr+.skr{border-top:1px solid var(--line)}
.skr .hg{font-size:12.5px;color:var(--ink-3);text-align:center}
.skr .tx{min-width:0}
.skr .a{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skr .b{display:block;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skr .n{font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
.skr .n i{display:block;font-style:normal;font-size:11px}
.sknote{margin:10px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.sklink{display:inline-block;margin-top:10px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.sklink:hover{color:var(--orange)}
.skhash{display:flex;flex-direction:column}
.skh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;min-width:0}
.skh+.skh{border-top:1px solid var(--line)}
.skh .tg{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skh .n{font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
.skh .n i{display:block;font-style:normal;font-size:11px}
.skrule{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px}
.skrule li{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.skrule b{color:var(--ink);font-family:var(--ui)}

/* ── Bảng người tham gia ───────────────────────────────────────────────────── */
.secpad{margin-top:34px}
.tblwrap{overflow-x:auto;scrollbar-width:thin}
.sktbl{width:100%;border-collapse:collapse;min-width:720px}
.sktbl th{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-3);text-align:left;
  padding:0 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.sktbl th.r,.sktbl td.r{text-align:right}
.sktbl td{padding:12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);vertical-align:middle}
.sktbl td b{display:block;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.sktbl td .sub{display:block;font-size:11.5px;color:var(--ink-3)}
.sktbl .bar{display:inline-block;width:74px;height:5px;border-radius:var(--r-pill);background:var(--line);
  overflow:hidden;vertical-align:middle;margin-right:8px}
.sktbl .bar i{display:block;height:100%;background:var(--ink)}
.sktbl .pc{font-size:11.5px;color:var(--ink-3)}

/* ── Bốn bước vận hành ─────────────────────────────────────────────────────── */
.skflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.skstep{display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.skstep .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:11.5px}
.skstep .t{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.skstep .d{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:4px}
@media (max-width:980px){ .skflow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .skflow{grid-template-columns:1fr} }

/* ── Trang chi tiết ────────────────────────────────────────────────────────── */
.bcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:22px 0 14px;font-size:12.5px;color:var(--ink-3)}
.bcrumb a{color:var(--ink-2)}
.bcrumb a:hover{color:var(--ink)}
.chips2{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips2 span{border-radius:var(--r-pill);padding:5px 12px;font-family:var(--ui);font-size:12px;font-weight:600}
.chips2 .c1{background:var(--wash);color:var(--ink-2)}
.chips2 .c2{background:rgba(255,92,0,.1);color:var(--orange)}
.skcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 30px}
.skctatag{display:flex;flex-direction:column;gap:2px;font-size:12px;min-width:0}
.skctatag b{font-size:13px;color:var(--ink)}
.card2{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:20px;margin-bottom:16px}
.card2>h2{font-family:var(--ui);font-size:15px;font-weight:600;margin:0 0 14px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){ .g2,.g3{grid-template-columns:1fr} }
.kbox{border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0;background:var(--paper)}
.kbox h4{font-family:var(--ui);font-size:12.5px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.kbox p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.kbox ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.kbox li{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.kbox .hd{margin-bottom:10px}
.kbox .hd b{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink);display:block}
.kbox .sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.kbox .ln{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);margin-top:7px;flex-wrap:wrap}
.kbox .ln .l{color:var(--ink-3);flex:1;min-width:0}
.kbox .bar{display:inline-block;width:70px;height:5px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.kbox .bar i{display:block;height:100%;background:var(--ink)}
.kbox .dd{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.kbox .dd span{border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:10.5px;color:var(--ink-2)}
.kbox.vd .tg{font-size:11px;color:var(--ink-3);margin-bottom:8px}
.kbox.vd .t{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.skmile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .skmile{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px){ .skmile{grid-template-columns:1fr} }
.skm{display:flex;gap:11px;min-width:0}
.skm .n{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-size:11px}
.skm .t{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.skm .d{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.ct{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--wash);margin-bottom:12px}
.ct .l{display:block;font-size:11px;color:var(--ink-3);margin-bottom:5px}
.ct b{font-size:12.5px;color:var(--ink);line-height:1.5}
.skli{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.skli li{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.skli b{color:var(--ink);font-family:var(--ui)}
.skchia{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.skchia li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:12.5px;color:var(--ink-2)}
.skchia b{color:var(--ink)}
.skchia .bar{grid-column:1/-1;height:5px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.skchia .bar i{display:block;height:100%;background:var(--ink)}
.skdl{margin:0;display:flex;flex-direction:column}
.skdl>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;min-width:0}
.skdl>div+div{border-top:1px solid var(--line)}
.skdl dt{font-size:12.5px;color:var(--ink-3);flex:0 0 auto}
.skdl dd{margin:0;font-size:12px;color:var(--ink);text-align:right;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skfaq details{border-top:1px solid var(--line);padding:9px 0}
.skfaq details:first-child{border-top:0;padding-top:0}
.skfaq summary{cursor:pointer;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);list-style:none}
.skfaq summary::-webkit-details-marker{display:none}
.skfaq summary::after{content:"+";float:right;color:var(--ink-3)}
.skfaq details[open] summary::after{content:"−"}
.skfaq p{margin:8px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.6}


/* ══ SỰ KIỆN — MỞ ĐẦU, THƯỞNG, CÁC BƯỚC ══════════════════════════════════════
   Ba thứ người ta cần biết trong ba giây: làm gì · được gì · trước lúc nào.
   Nên ba khối này đứng trên cùng và cỡ chữ lớn hơn hẳn phần còn lại. */
.skhero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:center;
  border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--paper);margin-bottom:14px}
.skhl{min-width:0}
.skhl h1{font-family:var(--ui);font-size:30px;font-weight:600;letter-spacing:-.025em;
  line-height:1.22;margin:12px 0 0;max-width:22ch}
.skhl p{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.65;max-width:60ch}
.skhdate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:var(--ink-2)}
.skhdate .sep{width:1px;height:12px;background:var(--line)}
.skhcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.skhart{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.skhart svg{width:100%;height:100%;display:block}
.chips2 .c3{background:var(--wash);color:var(--ink-2)}
@media (max-width:900px){
  .skhero{grid-template-columns:1fr;gap:20px;padding:20px}
  .skhart{order:-1;aspect-ratio:16/9}
  .skhl h1{font-size:24px}
}

/* Ba phiếu thưởng — con số phải đọc được từ xa, chữ giải thích ở dưới. */
.skpay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.skp{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--paper);min-width:0}
.skp.p1{border-color:var(--orange);background:rgba(255,92,0,.045)}
.skp .k{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.06em}
.skp .v{font-family:var(--mono);font-size:26px;letter-spacing:-.04em;color:var(--ink);margin-top:8px;
  line-height:1.1;overflow-wrap:anywhere}
.skp.p1 .v{color:var(--orange)}
.skp .v i{font-style:normal;font-size:14px;color:var(--ink-3);letter-spacing:0}
.skp.p1 .v i{color:var(--orange);opacity:.75}
.skp .d{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:9px}
.skpaynote{margin:10px 0 0;font-size:12px;color:var(--ink-3);line-height:1.55}
@media (max-width:820px){ .skpay{grid-template-columns:1fr} }

/* Ba bước — đánh số bằng chữ "Bước n", không phải chấm tròn: người đọc lướt
   thấy ngay đây là trình tự phải làm, không phải danh sách gạch đầu dòng. */
.skbuoc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.skb{border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0;background:var(--paper)}
.skb .n{display:inline-block;font-size:11px;color:var(--ink-3);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:8px}
.skb .t{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink)}
.skb .d{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:6px}
@media (max-width:820px){ .skbuoc{grid-template-columns:1fr} }

/* Mức thưởng trên thẻ ở trang danh sách */
.skrate{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.skrate b{font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.skrate span{font-size:12px;color:var(--ink-3)}
.skrate .pl{width:100%;font-size:11.5px;color:var(--ink-2)}


/* ══ SỰ KIỆN — HAI GIAI ĐOẠN VÀ BẢNG TOOL ĐƯỢC DÙNG ══════════════════════════
   Sự kiện không dừng ở chỗ trao giải. Vẽ cả hai bước và đánh dấu bước đang chạy
   để người đọc thấy nó sẽ đi tới đâu. */
.skpha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.skph{border:1px solid var(--line);border-radius:14px;padding:15px 18px;min-width:0;background:var(--paper)}
.skph.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--orange)}
.skph .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.skph .t{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);margin-top:6px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.skph .dg{font-family:var(--ui);font-size:10.5px;font-weight:600;color:var(--orange);
  background:rgba(255,92,0,.1);border-radius:var(--r-pill);padding:2px 8px}
.skph .d{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:5px}
@media (max-width:760px){ .skpha{grid-template-columns:1fr} }

/* Bảng tool được dùng: đo KẾT QUẢ (lượt chạy thật), khác bảng lượt xem video. */
.skdung{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sdg{display:grid;grid-template-columns:22px 1fr auto auto;gap:12px;align-items:center;padding:11px 0;min-width:0}
.sdg+.sdg{border-top:1px solid var(--line)}
.sdg .hg{font-family:var(--mono);font-size:13px;color:var(--ink-3);text-align:center}
.sdg.win .hg{color:var(--orange);font-weight:700}
.sdg .tx{min-width:0}
.sdg .a{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdg .b{display:block;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdg .n{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap}

/* Chip giai đoạn trên thẻ ở trang danh sách */
.skpc{position:absolute;right:10px;top:10px;background:var(--ink);color:var(--paper);
  border-radius:var(--r-pill);padding:4px 10px;font-family:var(--ui);font-size:11px;font-weight:600;
  max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ══ CHƯƠNG TRÌNH GIẢI LÀM TOOL ══════════════════════════════════════════════
   Trang thể lệ: nhiều chữ, ít số. Nên nhịp đọc quan trọng hơn màu — cam chỉ dùng
   cho nút và cho đúng MỘT con số then chốt (30% người giới thiệu). */
.mh{font-family:var(--ui);font-size:13px;font-weight:600;margin:0 0 12px;color:var(--ink)}
.sktbl.bb td{vertical-align:top;line-height:1.6}
.sktbl.bb td:first-child{width:19%}
.sktbl.bb td:nth-child(2){width:29%;color:var(--ink-2)}
.sktbl.bb b{display:inline;font-family:var(--ui)}
.sktbl.bb td:first-child b{display:block;font-size:13.5px}

/* Khối "luật" — chỗ nói vì sao thể lệ phải như thế. Nền nhạt, không viền cam:
   nó là lời giải thích, không phải nút bấm. */
.lut{margin:16px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--wash);font-size:13px;color:var(--ink-2);line-height:1.65}
.lut b{color:var(--ink);font-family:var(--ui)}
.lut.sm{font-size:12.5px;margin-top:12px}

.ngv{display:flex;flex-direction:column;gap:10px}
.ng{display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0}
.ng .n{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:11px}
.ng .t{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.ng .d{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.skchia .dd{grid-column:1/-1;font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:-2px}

/* Bốn bậc quà — bậc cuối viền đậm vì nó là bậc có ràng buộc pháp lý, người đọc
   phải dừng lại ở đó chứ không lướt qua. */
.qua{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qb{border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0;background:var(--paper)}
.qb.cao{border-color:var(--ink)}
.qb .bn{font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.qb .bt{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);margin-top:6px}
.qb ul{margin:11px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:7px}
.qb li{font-size:12.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:1000px){ .qua{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .qua{grid-template-columns:1fr} }

.canhbao{margin-top:14px;border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:12px;padding:15px 18px;background:var(--paper)}
.canhbao>b{display:block;font-family:var(--ui);font-size:13.5px;color:var(--ink);margin-bottom:7px}
.canhbao p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.canhbao b{color:var(--ink);font-family:var(--ui)}

/* Ba phần ăn chia — con số phải đọc được từ xa vì đây là thứ người ta nhớ. */
.chiaba{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cb{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--paper);min-width:0}
.cb.nb{border-color:var(--orange);background:rgba(255,92,0,.045)}
.cb .k{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.06em}
.cb .v{font-size:34px;letter-spacing:-.045em;color:var(--ink);margin-top:6px;line-height:1}
.cb.nb .v{color:var(--orange)}
.cb .d{font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.55}
@media (max-width:720px){ .chiaba{grid-template-columns:1fr} }

.skpaynote.big{margin-top:30px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--wash);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.skpaynote.big b{color:var(--ink);font-family:var(--ui)}


/* ══ QUỸ CHUNG + QUÀ ═════════════════════════════════════════════════════════
   Thanh bốn nguồn: bốn sắc độ của cùng một màu mực, KHÔNG bốn màu khác nhau —
   bốn nguồn là bốn phần của một quỹ, không phải bốn thứ đối nhau. */
.quytop{display:flex;flex-direction:column;gap:12px}
.qt .l{display:block;font-size:11.5px;color:var(--ink-3)}
.qt b{font-family:var(--mono);font-size:28px;letter-spacing:-.04em;color:var(--ink);display:block;margin-top:4px}
.qt .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.quybar{display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--line)}
.quybar span{display:block;height:100%}
.quybar .s1,.qn .dot.s1{background:var(--ink)}
.quybar .s2,.qn .dot.s2{background:#4A4A50}
.quybar .s3,.qn .dot.s3{background:#8A8A90}
.quybar .s4,.qn .dot.s4{background:#C3C3C8}
.quyng{display:flex;flex-direction:column}
.qn{display:grid;grid-template-columns:9px 1fr auto;gap:11px;align-items:start;padding:10px 0;min-width:0}
.qn+.qn{border-top:1px solid var(--line)}
.qn .dot{width:9px;height:9px;border-radius:50%;margin-top:5px}
.qn .tx{min-width:0}
.qn .t{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.qn .d{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.qn b{font-size:13px;color:var(--ink);white-space:nowrap}

/* Bậc quà trên trang sự kiện: có nút, nên thẻ cao hơn và nút dính đáy. */
#quaBac .qb{display:flex;flex-direction:column}
#quaBac .qb ul{flex:1}
#quaBac .qbtn{margin-top:14px}
#quaBac .qb.da{border-color:var(--ink);background:var(--wash)}

.qlog{display:flex;flex-direction:column}
.ql{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;min-width:0}
.ql+.ql{border-top:1px solid var(--line)}
.ql .bc{font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 8px;white-space:nowrap}
.ql .tx{min-width:0}
.ql .a{display:block;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql .b{display:block;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql b{font-size:13px;color:var(--ink);white-space:nowrap}
.skpaynote a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}


/* ══ TIẾP THỊ LIÊN KẾT ═══════════════════════════════════════════════════════ */
.mabox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ml{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper);min-width:0}
.ml .l{display:block;font-size:11.5px;color:var(--ink-3)}
.ml b{display:block;font-family:var(--mono);font-size:24px;letter-spacing:-.03em;color:var(--ink);margin-top:6px}
.ml .s{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:7px}
.ml code{display:block;margin-top:8px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--wash);font-size:12px;color:var(--ink);overflow-x:auto;white-space:nowrap}
.ml .btn{margin-top:10px}
@media (max-width:720px){ .mabox{grid-template-columns:1fr} }

.tinh{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--paper)}
.tinh .tr+.tr{margin-top:16px}
.tinh label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--ink-2);margin-bottom:8px}
.tinh label b{font-size:15px;color:var(--ink)}
.tinh input[type=range]{width:100%;accent-color:var(--orange)}
.kq{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.kr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;min-width:0}
.kr+.kr{border-top:1px solid var(--line)}
.kr .l{font-size:13px;color:var(--ink-2)}
.kr b{font-family:var(--mono);font-size:15px;color:var(--ink);white-space:nowrap}
.kr.to .l{color:var(--ink);font-family:var(--ui);font-weight:600}
.kr.to b{font-size:22px;letter-spacing:-.03em;color:var(--orange)}


/* ══ QUỸ TỪ QUÀ → TRẢ CHO LƯỢT XEM ═══════════════════════════════════════════
   Hai đầu đặt cạnh nhau với một mũi tên ở giữa: người tặng quà phải thấy tiền
   của mình đi đâu ngay trong một cái nhìn, không phải đọc ba đoạn mới hiểu. */
.quy2{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--wash)}
.quy2 .qv{min-width:0}
.quy2 .l{display:block;font-size:11.5px;color:var(--ink-3)}
.quy2 b{display:block;font-family:var(--mono);font-size:24px;letter-spacing:-.04em;color:var(--ink);
  margin-top:5px;overflow-wrap:anywhere}
.quy2 .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.quy2 .mui{font-size:20px;color:var(--ink-3)}
@media (max-width:640px){ .quy2{grid-template-columns:1fr;gap:12px} .quy2 .mui{transform:rotate(90deg)} }

.qdem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qd{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;min-width:0}
.qd .ic{display:grid;place-items:center;color:var(--ink-2)}
.qd .tx{min-width:0}
.qd .a{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qd .b{display:block;font-size:11px;color:var(--ink-3)}
.qd b{font-size:13px;color:var(--ink);white-space:nowrap}
@media (max-width:900px){ .qdem{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .qdem{grid-template-columns:1fr} }

.htag{display:block;margin:8px 0 10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--wash);font-size:13px;color:var(--ink);overflow-x:auto;white-space:nowrap}

/* ══ TẶNG QUÀ NHANH — cột phải ═══════════════════════════════════════════════
   Một chạm là xong, không qua bước trung gian nào. Đó là toàn bộ lý do cơ chế
   này chạy được; thêm một hộp thoại xác nhận vào giữa là giết nó. */
.tqm{margin:0 0 12px;font-size:12px;color:var(--ink-2);line-height:1.55}
.tqg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tq{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  border:1px solid var(--line);border-radius:12px;padding:11px 8px;background:var(--paper);min-width:0}
.tq:hover{border-color:var(--ink);background:var(--wash)}
.tq .ic{display:grid;place-items:center;color:var(--ink)}
.tq .n{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--ink);text-align:center;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tq .p{font-size:10.5px;color:var(--ink-3)}
.tq .dem{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--orange);color:#fff;font-size:10.5px;
  display:grid;place-items:center}
.tqkq{margin-top:12px}
.tqt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;
  font-size:12.5px;color:var(--ink-2)}
.tqt+.tqt{border-top:1px solid var(--line)}
.tqt b{font-size:14px;color:var(--ink)}
.tqt.sm b{font-size:12.5px;color:var(--ink-2)}
.tqkq .btn{margin-top:10px}
.dsbox .sknote{margin-top:10px}
.dsbox .tqm b{color:var(--ink);font-family:var(--ui)}


/* ══ CHI TIẾT SỰ KIỆN — BỐN MODULE ═══════════════════════════════════════════
   ① băng chiến dịch · ② nội dung · ③ bảng xếp hạng · ④ danh sách video
   Mỗi module có một tiêu đề nói THẲNG nó trả lời câu hỏi nào. Không đánh số:
   bốn module không phải một trình tự phải đi theo, đánh số là bịa ra thứ tự. */

/* ── ① BĂNG CHIẾN DỊCH ────────────────────────────────────────────────────── */
.evb{border:1px solid var(--line);border-radius:20px;background:var(--paper);
  overflow:hidden;margin-top:14px;box-shadow:var(--shadow-card)}
.evbt{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:center;
  padding:26px 28px}
.evbl{min-width:0}
.evbl h1{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.18;margin:12px 0 0;
  text-wrap:balance}
.evbl>p{margin:10px 0 0;color:var(--ink-2);font-size:14px;line-height:1.65;max-width:62ch}
.evbd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:var(--ink-3)}
.evbd .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.evbcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.evbr{min-width:0}
.evbr svg{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}

/* Dải số của băng. Quỹ đứng đầu vì nó là con số DUY NHẤT trên trang tự lớn lên
   khi có người tặng quà — đặt nó chỗ khuất thì cơ chế quà mất hết ý nghĩa. */
.evstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);background:var(--wash)}
.evstat>div{padding:15px 28px;min-width:0}
.evstat>div+div{border-left:1px solid var(--line)}
.evstat .l{display:block;font-size:11.5px;color:var(--ink-3)}
.evstat b{display:block;font-family:var(--mono);font-size:19px;letter-spacing:-.03em;
  color:var(--ink);margin-top:5px;overflow-wrap:anywhere}
.evstat .s{display:block;font-size:11px;color:var(--ink-3);margin-top:3px}
.evstat .q{background:var(--cream)}
.qbump{animation:qbump .55s cubic-bezier(.2,.9,.3,1)}
@keyframes qbump{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.qbump{animation:none}}

@media (max-width:1000px){ .evbt{grid-template-columns:1fr;gap:18px;padding:22px}
  .evbr{max-width:none}
  /* Hình là NỀN ngữ cảnh, không phải nội dung phải đọc. Trên điện thoại nó từng
     chiếm gần một màn hình; ép về dải ngang thì vẫn nhìn ra kết quả tool trả về
     mà không ăn mất chỗ của phần cần đọc. */
  .evbr svg{aspect-ratio:16/7;object-fit:cover}
  .evstat>div{padding:14px 22px} }
@media (max-width:640px){ .evbl h1{font-size:23px}
  .evstat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .evstat>div{padding:13px 16px}
  .evstat>div:nth-child(2n){border-left:1px solid var(--line)}
  .evstat>div:nth-child(n+3){border-top:1px solid var(--line)}
  .evstat>div:nth-child(2n+1){border-left:0}
  .evstat b{font-size:16px} .evbt{padding:18px 16px} }

/* ── MODULE ───────────────────────────────────────────────────────────────── */
.evmod{border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:22px;margin-top:16px}
.evmh{margin-bottom:16px}
.evmh h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
.evmh p{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6;max-width:70ch}
.evsub{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);
  margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.evsub .h{font-family:var(--body);font-weight:400;font-size:11.5px;color:var(--ink-3)}
.evmod>.evsub:first-of-type{margin-top:0;padding-top:0;border-top:0}
@media (max-width:640px){ .evmod{padding:16px} .evmh h2{font-size:17px} }

/* ── ③ BẢNG XẾP HẠNG ──────────────────────────────────────────────────────── */
/* ★ Đã gỡ một khối `.seg` TRÙNG TÊN mà tôi thêm hôm 26/08 cho bản chi tiết sự
   kiện (bản đó đã bị bản arena thay). Nó đè lên `.seg` gốc ở dòng ~473 — thành
   phần đang dùng thật ở app-analytics · reviews-all · usage — làm ba màn đó âm
   thầm đổi nền và khoảng đệm. Dùng lại `.seg` gốc với aria-pressed. */
.lbnote{margin:0 0 14px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.lb{list-style:none;margin:0;padding:0}
.lbr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 0}
.lbr+.lbr{border-top:1px solid var(--line)}
.lbr .hg{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);text-align:center;
  line-height:24px;border-radius:7px}
.lbr.top .hg{background:var(--ink);color:var(--paper)}
.lbr .tx{min-width:0}
.lbr .a{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbr .b{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbr .bar{display:block;height:4px;border-radius:var(--r-pill);background:var(--line);
  overflow:hidden;margin-top:7px}
.lbr .bar i{display:block;height:100%;background:var(--ink-3)}
.lbr.top .bar i{background:var(--ink)}
.lbr .n{text-align:right;min-width:0}
.lbr .n b{display:block;font-family:var(--mono);font-size:14.5px;color:var(--ink);
  letter-spacing:-.02em}
.lbr .n span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
@media (max-width:520px){ .lbr{grid-template-columns:26px minmax(0,1fr) auto;gap:10px}
  .lbr .n b{font-size:13px} }

/* Trạng thái khoá: bảng lượt dùng chỉ có nghĩa khi tool đã lên chợ. Nói rõ vì
   sao chưa có, thay vì bày một cái bảng rỗng trông như hỏng. */
.lbkhoa{border:1px dashed var(--line);border-radius:12px;padding:20px;text-align:center}
.lbkhoa b{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.lbkhoa p{margin:7px auto 0;font-size:12.5px;color:var(--ink-2);line-height:1.6;max-width:52ch}

/* ── ④ DANH SÁCH VIDEO ────────────────────────────────────────────────────── */
.vbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--wash);
  margin-bottom:6px}
.vbar p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55;min-width:0}
.vlist{list-style:none;margin:0;padding:0}
.vr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0}
.vr+.vr{border-top:1px solid var(--line)}
.vr .a{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.vr .b{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.vr .tg{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr .xn{min-width:0}
.vr .xem{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.vr .xem b{font-family:var(--mono);font-size:14.5px;color:var(--ink);letter-spacing:-.02em}
.vr .xem svg{flex:none;color:var(--ink-3)}
.vr .kv{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;text-align:right;
  white-space:nowrap}
@media (max-width:520px){ .vr{grid-template-columns:1fr;gap:8px}
  .vr .xem{justify-content:flex-start} .vr .kv{text-align:left} }

/* ── CỘT PHẢI · GÓI ĐẶT TRƯỚC ─────────────────────────────────────────────── */
.pkdau{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:11px;
  background:var(--wash);margin-bottom:12px}
.pkdau .hg{font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--paper);
  border-radius:6px;padding:2px 7px;flex:none}
.pkdau .tx{min-width:0}
.pkdau .a{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);
  line-height:1.35}
.pkdau .b{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.pkg{display:flex;flex-direction:column;gap:8px}
.pk{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-align:left;
  background:var(--paper);width:100%}
.pk:hover{border-color:var(--ink-3)}
.pk.on{border-color:var(--ink);background:var(--wash)}
.pk .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line)}
.pk.on .rd{border:5px solid var(--ink)}
.pk .a{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.pk .b{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.pk .u{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap}
.pkgia{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--ink-2)}
.pkgia b{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.pkbtn{margin-top:11px}

/* ── CỘT PHẢI · GỬI QUÀ ───────────────────────────────────────────────────── */
.qbox .quyn{display:block;font-family:var(--mono);font-size:22px;letter-spacing:-.04em;
  color:var(--ink);margin-top:4px}
.qbox .quys{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.qbox .quyd{display:block;font-size:11.5px;color:var(--ink);margin-top:7px;
  background:var(--cream);border-radius:8px;padding:7px 9px;line-height:1.5}
.qgan{list-style:none;margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line)}
.qgan li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:6px 0;font-size:11.5px;color:var(--ink-2)}
.qgan .ic{display:grid;place-items:center;color:var(--ink-3)}
.qgan .a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qgan b{font-family:var(--mono);font-size:11.5px;color:var(--ink);white-space:nowrap}

/* ── BẢNG CHỌN QUÀ ────────────────────────────────────────────────────────── */
.qm{position:fixed;inset:0;background:rgba(10,10,12,.34);z-index:95;display:grid;
  place-items:center;padding:20px}
.qm[hidden]{display:none}
.qm-box{background:var(--paper);border-radius:var(--r-l);width:min(640px,100%);
  max-height:88vh;overflow:auto;box-shadow:var(--shadow-pop);display:flex;flex-direction:column}
.qm-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:22px 24px 6px}
.qm-hd h2{font-family:var(--ui);font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0}
.qm-hd p{margin:7px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.qm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:16px 24px 4px}
.qmi{position:relative;border:1px solid var(--line);border-radius:12px;padding:26px 8px 10px;
  display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--paper);
  min-width:0}
.qmi:hover{border-color:var(--ink);background:var(--wash)}
.qmi.on{border-color:var(--ink);background:var(--wash)}
.qmi .ic{display:grid;place-items:center;color:var(--ink)}
.qmi .n{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--ink);text-align:center;
  line-height:1.3;max-width:100%}
.qmi .p{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.qmw{position:relative;min-width:0}
.qmw .qmi{width:100%}
.qmw .dem{position:absolute;top:6px;right:6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-family:var(--mono);
  font-size:10.5px;display:grid;place-items:center}
.qmtru{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:13px;
  line-height:1;display:grid;place-items:center}
.qmtru:hover{border-color:var(--ink)}
.qm-ft{border-top:1px solid var(--line);padding:16px 24px 20px;margin-top:14px}
.qmt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0;
  font-size:12.5px;color:var(--ink-2)}
.qmt b{font-family:var(--mono);font-size:15px;color:var(--ink);letter-spacing:-.02em}
.qmt.sm b{font-size:12.5px;color:var(--ink-2)}
.qm-act{display:flex;gap:9px;margin-top:14px}
.qm-act .btn{flex:1;justify-content:center}
.qm-ft .sknote{margin-top:11px}
@media (max-width:640px){
  .qm{padding:0;place-items:stretch}
  .qm-box{width:100%;max-height:100%;height:100%;border-radius:0}
  .qm-grid{grid-template-columns:repeat(3,minmax(0,1fr));flex:1 1 auto;align-content:start}
  .qm-ft{position:sticky;bottom:0;background:var(--paper)}
}

/* ── BÁO ĐÃ GỬI ───────────────────────────────────────────────────────────── */
.qtoast{position:fixed;left:50%;bottom:26px;z-index:99;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--paper);border-radius:12px;padding:12px 16px;
  box-shadow:var(--shadow-pop);font-size:12.5px;line-height:1.5;
  transform:translateX(-50%) translateY(12px);opacity:0;
  transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.qtoast b{font-family:var(--mono);color:var(--paper)}
.qtoast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:880px){ .qtoast{bottom:calc(64px + env(safe-area-inset-bottom,0px))} }
@media (prefers-reduced-motion:reduce){ .qtoast{transition:none} }
body.oc-lock{overflow:hidden}


/* ══ HÀNG THẺ MỞ ═════════════════════════════════════════════════════════════
   Mỗi thẻ là MỘT câu hỏi và MỘT con số trả lời gọn. Bấm mới mở phần dài. Trang
   nhờ vậy đọc hết trong một màn, mà không mất một chữ nội dung nào. */
.omucs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.omuc{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;text-align:left;background:var(--paper);min-width:0;
  transition:transform .18s cubic-bezier(.32,.72,0,1),border-color .18s}
.omuc:hover{border-color:var(--ink);transform:translateY(-2px)}
.omuc .k{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35}
.omuc .v{font-family:var(--mono);font-size:15px;letter-spacing:-.03em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omuc .m{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);margin-top:auto}
.omuc .m i{font-style:normal;transition:transform .18s}
.omuc:hover .m i{transform:translateX(3px)}
@media (max-width:1080px){ .omucs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .omucs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .omuc{padding:12px} .omuc .v{font-size:13.5px} }
@media (prefers-reduced-motion:reduce){ .omuc,.omuc .m i{transition:none} }

/* ══ NGĂN TRƯỢT CHI TIẾT ═════════════════════════════════════════════════════
   Máy tính: trượt vào từ mép phải. Điện thoại: trồi lên từ đáy, có thanh kéo.
   Cả hai đều để lộ trang nền phía sau — người đọc không mất chỗ mình đang đứng. */
.dsh{position:fixed;inset:0;z-index:120;display:flex;justify-content:flex-end}
.dsh[hidden]{display:none}
.dsh .nen{position:absolute;inset:0;background:rgba(10,10,12,.3);animation:dshNen .24s ease}
@keyframes dshNen{from{opacity:0}to{opacity:1}}
.dsh .hop{position:relative;width:min(580px,100%);height:100%;background:var(--paper);
  display:flex;flex-direction:column;box-shadow:var(--shadow-pop);
  animation:dshVao .3s cubic-bezier(.32,.72,0,1)}
@keyframes dshVao{from{transform:translateX(28px);opacity:.55}to{transform:none;opacity:1}}
.dsh .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 14px;border-bottom:1px solid var(--line);flex:none}
.dsh .hd h2{font-family:var(--ui);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
.dsh .hd p{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.dsh .body{flex:1;overflow-y:auto;padding:18px 24px 10px;transition:opacity .16s ease}
.dsh .body.mo{opacity:0}
.dsh .body>*+*{margin-top:14px}
.dsh .ft{flex:none;border-top:1px solid var(--line);padding:12px 24px 16px}
.dsh .ftl{display:block;font-size:11px;color:var(--ink-3);margin-bottom:8px}
.dsh .chips{display:flex;gap:6px;flex-wrap:wrap}
.dsh .chip{border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;
  font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2);background:var(--paper)}
.dsh .chip:hover{border-color:var(--ink);color:var(--ink)}
.dsh .keo{display:none}
@media (max-width:760px){
  .dsh{align-items:flex-end;justify-content:stretch}
  .dsh .hop{width:100%;height:min(90vh,100%);border-radius:20px 20px 0 0;
    animation:dshLen .3s cubic-bezier(.32,.72,0,1)}
  @keyframes dshLen{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
  .dsh .keo{display:block;width:38px;height:4px;border-radius:99px;background:var(--line);
    margin:9px auto 0;flex:none}
  .dsh .hd{padding:12px 18px 12px} .dsh .body{padding:16px 18px 8px} .dsh .ft{padding:10px 18px 14px}
}
@media (prefers-reduced-motion:reduce){
  .dsh .hop,.dsh .nen{animation:none} .dsh .body{transition:none}
}

/* ══ DÒNG "XEM ĐỦ" ═══════════════════════════════════════════════════════════ */
.xemdu{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin-top:4px;padding:12px 2px 0;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.xemdu span{font-family:var(--body);font-weight:400;font-size:11.5px;color:var(--ink-3)}
.xemdu:hover{color:var(--orange)}

/* ══ THẺ HÀNH ĐỘNG CỘT PHẢI ══════════════════════════════════════════════════
   Gộp ba ô rời thành MỘT thẻ: quỹ · gửi quà · đặt trước. Ba ô rời khiến người
   đọc phải quyết định ba lần; một thẻ thì chỉ còn hai nút. */
.acard{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:18px;
  box-shadow:var(--shadow-card)}
.acard .ql{display:block;font-size:11.5px;color:var(--ink-3)}
.acard .qn{display:block;font-family:var(--mono);font-size:26px;letter-spacing:-.04em;color:var(--ink);
  margin-top:4px;overflow-wrap:anywhere}
.acard .qs{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.acard .qd{display:block;font-size:11.5px;color:var(--ink);margin-top:9px;background:var(--cream);
  border-radius:9px;padding:8px 10px;line-height:1.5}
.acard .btn{margin-top:12px}
.acard hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.acard .dau{display:flex;align-items:center;gap:9px;min-width:0}
.acard .dau .hg{font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--paper);
  border-radius:6px;padding:2px 7px;flex:none}
.acard .dau .tx{min-width:0}
.acard .dau .a{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);
  line-height:1.35}
.acard .dau .b{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.gchip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:11px}
.gc{border:1px solid var(--line);border-radius:11px;padding:9px 6px;text-align:center;
  background:var(--paper);min-width:0}
.gc:hover{border-color:var(--ink-3)}
.gc.on{border-color:var(--ink);background:var(--wash)}
.gc b{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.gc span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px}
.acard .bt{display:block;margin-top:12px;font-family:var(--ui);font-size:12px;font-weight:600;
  color:var(--ink-2)}
.acard .bt:hover{color:var(--ink)}


/* ══ RAIL TRƯỢT NGANG TRÊN ĐIỆN THOẠI ════════════════════════════════════════
   Ba thẻ xếp dọc toàn chiều rộng tốn 1.132px — hơn hai màn hình chỉ để bày ba
   liên kết. Cho trượt ngang thì vẫn xem được cả ba mà tốn đúng một thẻ. */
@media (max-width:760px){
  /* KHÔNG dùng lề âm để tràn ra sát mép: lề âm phải khớp đúng padding của khung
     cha, mà khung cha đổi padding theo khổ — lệch một chỗ là cả trang tràn ngang.
     Máy đo bắt được đúng lỗi này ở cả index.html lẫn event.html. Giữ rail trong
     khung thì không có cách nào tràn. */
  .secpad .grid-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0;padding:2px 0 10px;scrollbar-width:none}
  .secpad .grid-cards::-webkit-scrollbar{display:none}
  .secpad .grid-cards>*{flex:0 0 78%;scroll-snap-align:start}
}

/* Câu phủ dữ liệu mô phỏng: CEO 27/08 bỏ dải trắng riêng, câu gộp vào hàng bản
   quyền — vẫn phủ toàn bộ số liệu mô phỏng của khu Sự kiện mà không chiếm chỗ. */
.fbot .demo{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:3px}


/* ══ CỬA HÀNG THEO THỊ TRƯỜNG ════════════════════════════════════════════════
   Kiểu App Store: nút chọn cửa hàng nằm ở chân trang, bảng chọn mở giữa màn.
   Mã nước để font mono hai chữ thay cho cờ — trang này cấm emoji, mà mã nước
   cũng là thứ người trong nghề đọc quen hơn. */
.ttfoot{display:flex;justify-content:flex-start;padding:18px 0 0;border-top:1px solid var(--line);margin-top:26px}
.ttbtn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-dam);
  border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;color:var(--ink-2);background:var(--paper)}
.ttbtn:hover{border-color:var(--ink);color:var(--ink)}
.ttbtn b{font-family:var(--ui);font-weight:600;color:var(--ink)}
.ttbtn .ma{font-size:11px;letter-spacing:.04em;color:var(--ink);background:var(--wash);
  border-radius:6px;padding:2px 7px}
.ttbtn .doi{font-family:var(--ui);font-weight:600;font-size:12px;color:var(--orange)}

/* Dải mời đổi cửa hàng — chỉ hiện khi thị trường do máy đoán. */
.ttbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--cream);
  border-bottom:1px solid var(--cam-vien);padding:9px var(--pad);font-size:12.5px;color:var(--ink-2)}
.ttbar b{font-family:var(--ui);font-weight:600;color:var(--ink)}
.ttbar .btn{flex:none}
.ttbar-x{margin-left:auto;width:28px;height:28px;border-radius:50%;color:var(--ink-3);flex:none}
.ttbar-x:hover{background:var(--paper);color:var(--ink)}
@media (max-width:640px){ .ttbar{font-size:12px;gap:8px} .ttbar-x{margin-left:0} }

.ttm{position:fixed;inset:0;z-index:96;background:rgba(10,10,12,.34);display:grid;place-items:center;padding:20px}
.ttm-box{background:var(--paper);border-radius:var(--r-l);width:min(560px,100%);max-height:86vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}
.ttm-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 22px 14px;border-bottom:1px solid var(--line);flex:none}
.ttm-hd h2{font-family:var(--ui);font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0}
.ttm-hd p{margin:7px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.ttm-hd b{color:var(--ink)}
.ttm-bd{padding:12px 14px;overflow-y:auto;display:grid;gap:4px}
.ttm-nh{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);
  padding:12px 8px 5px}
.tti{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  border:1px solid transparent;border-radius:12px;padding:10px 11px;text-align:left;width:100%}
.tti:hover{background:var(--wash)}
.tti.on{border-color:var(--ink);background:var(--wash)}
.tti .ma{font-size:11px;letter-spacing:.04em;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:7px;padding:3px 8px;flex:none}
.tti .tx{min-width:0}
.tti .a{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.tti .b{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tti .n{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ttm-ft{border-top:1px solid var(--line);padding:12px 22px 16px;font-size:11.5px;color:var(--ink-3);flex:none}
.ttm-ft b{font-family:var(--ui);color:var(--ink-2)}
@media (max-width:640px){
  .ttm{padding:0;place-items:stretch}
  .ttm-box{width:100%;height:100%;max-height:100%;border-radius:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   DA 2.0 «App Store» — CEO chốt 27/08, theo design-system bản 2.0.
   Trắng · Đen · Cam. Bốn quy tắc: nền trắng tuyệt đối (bề mặt phụ duy nhất
   là --wash) · chữ đen ba mức mực · cam là hành động (mỗi khung nhìn một
   điểm cam chính) · hairline thay bóng (bóng chỉ cho lớp nổi).
   Khối này GHI ĐÈ phần trên bằng thứ tự cascade — đừng sửa ngược lên trên.
   ══════════════════════════════════════════════════════════════════════════ */

::selection{background:var(--cream);color:var(--orange-600)}
h1{font-weight:800;letter-spacing:-.03em}
h2{font-weight:750}

/* Thanh trên: trắng mờ + blur — nội dung trượt dưới thanh, đúng chất App Store */
.hdr{background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}

/* Nút = viên thuốc. Chạm co 96% (nhịp «nhanh» 160ms). */
.btn{border-radius:var(--r-pill);font-weight:650;
  transition:transform var(--t-fast),filter var(--t-fast),background var(--t-fast)}
.btn:active{transform:scale(.96)}
.btn.sm{border-radius:var(--r-pill)}
.btn.primary:active{background:var(--orange-600);filter:none}
/* Nút phụ = xám nền phụ, không viền — viền ink là ngôn ngữ cũ */
.btn.line{border-color:transparent;background:var(--wash)}
.btn.line:hover{background:#EDEDEF}

/* Phân đoạn: máng xám, nút chọn nổi TRẮNG với bóng sh-1 (kiểu iOS) */
.seg{background:var(--wash);border-color:transparent;border-radius:var(--r-s);padding:2.5px}
.seg button{border-radius:8px;font-weight:600;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}

/* Chip chọn = mực đặc chữ trắng */
.chip{border-radius:var(--r-pill);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.go{transition:transform var(--t-fast),filter var(--t-fast)}
.go:active{transform:scale(.92)}

/* Thanh dưới điện thoại: viên thuốc NỔI giữa màn, trắng mờ + blur, icon + nhãn.
   Base cũ là dải bám mép — đè cả vị trí lẫn hình dạng ở đây. */
.mobnav{left:50%;right:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);max-width:calc(100vw - 24px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-2)}
.mobnav ul{padding:7px;gap:2px}
.mobnav li{flex:none}
.mobnav a{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 13px;border-radius:var(--r-pill);font-size:10px;font-weight:650;color:var(--ink-3);
  transition:color var(--t-fast)}
.mobnav a svg{width:21px;height:21px}
.mobnav a[aria-current="page"]{color:var(--orange-600)}
.mobnav .d{display:none}
/* Trượt ẩn khi cuộn xuống: base giờ có translateX nên phải ghép cả hai trục */
html.oc-an .mobnav{transform:translate(-50%,calc(100% + 20px))}
@media (max-width:390px){.mobnav a{padding:7px 9px}.mobnav a span{display:none}.mobnav a svg{width:23px;height:23px}}

/* Cát mờ — thẻ hiện dần khi vào khung nhìn. CHỈ khi người dùng còn cho chuyển
   động; lớp .rv do shell.js gắn nên trang không JS không bao giờ bị ẩn. */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;filter:blur(12px);transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.2,.8,.2,1),filter .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;filter:blur(0);transform:none}
}
@media (max-width:880px){
  /* Viên thuốc nổi cách đáy 14px nên cần lối thoát cao hơn dải bám mép cũ */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* Hộp mua: tên gói và mô tả là HAI DÒNG — để inline thì dính thành
   «Trả theo lượtXin lượt mỗi lần bấm chạy» (lỗi soi ra khi đổi da 2.0). */
.opt>span:not(.op){flex:1;min-width:0}
.opt .ot,.opt .od{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   DA 3.0 «Liền mạch» — CEO 27/08 (redesign design-system, bản 3.0).
   Ba thứ mới, toàn site: ① chuyển cảnh liền trang (View Transition — thanh
   trên và thanh dưới ĐỨNG YÊN qua 57 trang, nội dung lướt 260ms) · ② vật lý
   thẻ (nhấc 3px + bóng nở + hình phóng 4%, ba tốc độ lệch pha) · ③ lò xo
   cho phần tử NHỎ (công tắc, toast) — không cho bố cục.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--spring:cubic-bezier(.34,1.45,.4,1)}

/* ① Chuyển cảnh liền trang — progressive: trình duyệt cũ bỏ qua, không hại */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition-old(root){animation-duration:.2s}
::view-transition-new(root){animation-duration:.26s}
/* Vỏ được ghim — không mờ đi cùng nội dung */
.hdr{view-transition-name:oc-hdr}
.mobnav{view-transition-name:oc-mobnav}

/* ② Vật lý thẻ — chỉ transform/opacity, giữ 60fps */
.card{transition:transform var(--t-base)}
.thumb{transition:border-color var(--t-fast),box-shadow var(--t-base)}
.thumb svg{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .card:hover{transform:translateY(-3px)}
  .card:hover .thumb{box-shadow:var(--sh-2)}
  .card:hover .thumb svg{transform:scale(1.04)}
}
.card:active{transform:scale(.985)}

/* ③ Lò xo phần tử nhỏ */
.seg button{transition:background var(--t-fast),color var(--t-fast),box-shadow .32s var(--spring)}

/* ── Hộp hỏi xác nhận + thông báo nổi (hệ 3.0) — OC.hoi / OC.toast ────────── */
.ochoi{position:fixed;inset:0;z-index:130;background:rgba(10,10,12,.45);display:grid;place-items:center;
  padding:20px;opacity:0;transition:opacity var(--t-base)}
.ochoi.on{opacity:1}
.ochoi .box{width:min(430px,100%);background:var(--paper);border-radius:var(--r-l);box-shadow:var(--sh-3);
  padding:22px;transform:translateY(14px) scale(.97);transition:transform .32s var(--spring)}
.ochoi.on .box{transform:none}
.ochoi h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.ochoi .box>p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ochoi .hang{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.ochoi .otu{width:100%;border:1.5px solid var(--line-dam);border-radius:var(--r-s);padding:10px 12px;
  font:inherit;margin:0 0 14px;background:var(--paper)}
.ochoi .otu:focus{outline:none;border-color:var(--orange)}
.ochoi .chonro{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.ochoi .chonro button{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 12px;font-size:13.5px;text-align:left;transition:border-color var(--t-fast),background var(--t-fast)}
.ochoi .chonro button:hover{background:var(--wash)}
.ochoi .chonro button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.octoast{position:fixed;left:50%;bottom:104px;z-index:140;transform:translate(-50%,16px) scale(.97);
  background:rgba(10,10,12,.92);color:#fff;font-size:13.5px;font-weight:600;padding:11px 20px;
  border-radius:var(--r-pill);box-shadow:var(--sh-3);opacity:0;pointer-events:none;max-width:min(92vw,480px);
  transition:opacity var(--t-base),transform .32s var(--spring);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.octoast.on{opacity:1;transform:translate(-50%,0)}