:root{
  --bg:#FBFAF7; --surface:#FFFFFF; --surface2:#F3F1EA; --surface3:#EAE7DC;
  --ink:#221F19; --ink2:#443F35; --muted:#6C6559; --line:#E4E0D6; --line2:#D3CDBF;
  --accent:#2A5C8A; --accent-soft:#E6EDF5;
  --pos:#2E7D5B; --pos-soft:#E4F0EA; --neg:#B5432F; --neg-soft:#F8E8E4;
  --warn:#A8791B; --warn-soft:#F7EEDA;
  --shadow:0 1px 2px rgba(34,31,25,.05),0 4px 14px rgba(34,31,25,.05);
  --r:10px;
  --f-display:"Bitter",Georgia,serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141310; --surface:#1C1A16; --surface2:#24211B; --surface3:#2C2822;
    --ink:#ECE8DF; --ink2:#CFC9BC; --muted:#98907F; --line:#302C24; --line2:#3D382E;
    --accent:#7FADD9; --accent-soft:#1E2A36;
    --pos:#5FBB8D; --pos-soft:#16241D; --neg:#E3785F; --neg-soft:#2A1A16;
    --warn:#D6A845; --warn-soft:#2A2314;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#141310; --surface:#1C1A16; --surface2:#24211B; --surface3:#2C2822;
  --ink:#ECE8DF; --ink2:#CFC9BC; --muted:#98907F; --line:#302C24; --line2:#3D382E;
  --accent:#7FADD9; --accent-soft:#1E2A36;
  --pos:#5FBB8D; --pos-soft:#16241D; --neg:#E3785F; --neg-soft:#2A1A16;
  --warn:#D6A845; --warn-soft:#2A2314;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0}
a{color:var(--accent)}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

/* ══════════ đầu trang — menu chính ══════════ */
.top{position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line)}
.top-in{
  max-width:1320px; margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; gap:20px;
  /* PHẢI cho bọc dòng. Không có nó thì khi tổng bề ngang vượt khung, flex ép
     .topnav co lại nhưng các link bên trong có white-space:nowrap nên KHÔNG co
     theo — chúng tràn ra ngoài và ĐÈ LÊN mốc thời gian bên phải.
     Đo thật 27/08 ở 1900px: .topnav cần 778px bị ép còn 537px, link cuối tràn
     tới x=1263 trong khi mốc bắt đầu x=1041 → chồng 222px. */
  flex-wrap:wrap;
}
.brand{
  font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; color:var(--ink); flex:none;
}
.brand span{color:var(--accent)}
/* flex-basis:auto (không phải 0) để bề rộng NỘI DUNG được tính vào phép chia
   không gian — nhờ đó khi không đủ chỗ, mốc thời gian bị đẩy xuống dòng dưới
   thay vì bị menu đè lên. overflow-x:auto là lớp chặn cuối: nếu màn hình quá
   hẹp mà vẫn phải nằm chung dòng thì menu tự cuộn ngang, không tràn ra ngoài. */
.topnav{display:flex; gap:2px; flex:1 1 auto; overflow-x:auto; scrollbar-width:thin}
.topnav a{
  font-size:13.5px; font-weight:500; color:var(--ink2); text-decoration:none;
  padding:8px 12px; border-radius:7px; white-space:nowrap;
}
.topnav a:hover{background:var(--surface2); color:var(--ink)}
.topnav a.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.stamp{
  font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:7px; flex:0 0 auto;
  margin-left:auto; white-space:nowrap;
}
/* Khi phải xuống dòng riêng (màn hình vừa), cho phép ngắt chữ để không bao giờ
   đẩy trang tràn ngang — nội dung có thể dài: "cập nhật 4 phút trước ⚠ cũ nhất
   trên trang: Ví chiến lược 1 ngày 5 giờ trước" đo được 547px. */
.stamp #stamp-gia{white-space:normal}
.dot{width:7px; height:7px; border-radius:50%; background:var(--pos); flex:none}
.dot.stale{background:var(--warn)} .dot.old{background:var(--neg)}
.hamburger{
  display:none; flex:none; width:34px; height:34px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.hamburger span{width:16px; height:2px; background:var(--ink2); border-radius:1px; transition:transform .15s,opacity .15s}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── thanh lọc thời gian + giao diện ── */
.filters{
  max-width:1320px; margin:0 auto; padding:0 22px 12px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
}
.fgroup{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.flabel{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.chips{display:flex; gap:4px; flex-wrap:wrap; background:var(--surface2);
  padding:3px; border-radius:8px; border:1px solid var(--line)}
.chip{
  font:inherit; font-size:13px; font-weight:500; color:var(--ink2);
  background:none; border:0; padding:5px 11px; border-radius:6px; cursor:pointer;
  white-space:nowrap; transition:background .13s,color .13s;
}
.chip:hover{background:var(--surface3)}
.chip[aria-pressed="true"]{background:var(--surface); color:var(--accent);
  font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.07)}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

@media (max-width:980px){
  .hamburger{display:flex}
  .topnav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; padding:8px; box-shadow:var(--shadow);
  }
  .topnav.open{display:flex}
  .topnav a{padding:11px 13px}
  .top{position:sticky}
  .top-in{position:relative; flex-wrap:wrap}
  /* Ẩn menu ngang thì .stamp (mốc cập nhật) không còn co lại đủ nữa — nó có
     nội dung dài ("cập nhật X phút trước" + cảnh báo khối cũ nhất) và flex
     item mặc định không co dưới độ rộng nội dung, nên đẩy tràn trang ngang.
     Xuống dòng riêng thay vì cắt chữ, để không mất thông tin. flex-basis:100%
     chỉ có tác dụng khi CHÍNH container cho phép bọc dòng (flex-wrap:wrap ở trên) —
     thiếu dòng đó thì item vẫn bị ép nằm chung hàng và tràn ra ngoài như cũ. */
  .stamp{flex-basis:100%; justify-content:flex-end; margin-left:0; order:3;
    flex-wrap:wrap; white-space:normal; text-align:right}
}

/* ── mẩu bánh mì (breadcrumb) ── */
.crumb{
  max-width:1320px; margin:0 auto; padding:14px 22px 0; font-size:13px; color:var(--muted);
}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent); text-decoration:underline}
.crumb-sep{margin:0 6px; opacity:.5}
.crumb-cur{color:var(--ink2); font-weight:600}

/* ── điều hướng trong trang ── */
.age{margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.age.warn{color:var(--warn)}
.gauge{position:relative; display:flex; height:9px; border-radius:5px; overflow:hidden; margin:12px 0 4px}
.gz{height:100%}
.gz1{background:color-mix(in srgb,var(--warn) 55%,transparent)}
.gz2{background:color-mix(in srgb,var(--warn) 22%,transparent)}
.gz3{background:color-mix(in srgb,var(--pos) 22%,transparent)}
.gz4{background:color-mix(in srgb,var(--pos) 55%,transparent)}
.gpin{position:absolute; top:-3px; width:3px; height:15px; border-radius:2px; background:var(--ink); transform:translateX(-1.5px)}
.glbl{display:flex; justify-content:space-between; font-size:11px; color:var(--muted)}
.card.wide{grid-column:1/-1}

/* ── bố cục ── */
main{max-width:1320px; margin:0 auto; padding:22px 22px 70px}
section{margin-bottom:38px; scroll-margin-top:20px}
.shead{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:5px}
/* KHÔNG đặt `position:relative` ở đây. Nó thắng `th:first-child{position:sticky}`
   về độ ưu tiên (0,1,2 so với 0,1,1), nên ô TIÊU ĐỀ của cột ghim trôi mất khi kéo
   ngang trong khi ô THÂN BẢNG vẫn đứng — tiêu đề lệch khỏi cột nó mô tả, ở MỌI
   trang có bảng sắp xếp được. Đo 28/08 trên bảng giá: ô tiêu đề "#" nằm ở x=-385
   còn ô "1" của chính cột đó đứng ở x=15, và chữ của cột "7 ngày" lọt qua bên dưới.
   Mà relative vốn thừa: "⇅" là ký tự nội tuyến, không hề định vị tuyệt đối. */
thead th[data-sortable]{cursor:pointer; user-select:none}
thead th[data-sortable]:hover{color:var(--ink)}
thead th[data-sortable]::after{content:"⇅"; opacity:.28; margin-left:5px; font-size:10px}
thead th[data-sorted="desc"]::after{content:"▼"; opacity:1; color:var(--accent)}
thead th[data-sorted="asc"]::after{content:"▲"; opacity:1; color:var(--accent)}

/* thanh tóm tắt / dải chỉ số chính */
.tomtat{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
}
.tt{background:var(--surface); padding:11px 13px}
.tt .l{font-size:11px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.tt .v{font-family:var(--f-mono); font-size:18px; font-weight:600; margin-top:3px; letter-spacing:-.01em}
.tt .s{font-size:11.5px; color:var(--muted); margin-top:2px}
.fixw{
  font-size:11px; font-weight:600; color:var(--warn); background:var(--warn-soft);
  padding:2px 8px; border-radius:4px; letter-spacing:.02em; white-space:nowrap;
}
.tier{
  font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); padding:2px 7px; border-radius:4px; letter-spacing:.03em;
}
h2{font-size:19px; letter-spacing:-.01em}
.ask{color:var(--muted); font-size:13.5px; margin:0 0 15px; max-width:74ch}
.ask b{color:var(--ink2); font-weight:600}

.grid{display:grid; gap:13px; grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; box-shadow:var(--shadow);
}
.card h3{font-size:12.5px; font-weight:600; color:var(--muted); font-family:var(--f-body);
  letter-spacing:.02em; margin-bottom:7px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
.big{font-family:var(--f-mono); font-size:25px; font-weight:600; letter-spacing:-.02em; line-height:1.15}
.sub{font-size:12.5px; color:var(--muted); margin-top:4px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)} .dim{color:var(--muted)}

/* ── nhận định ── */
.verdict{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--muted);
  border-radius:var(--r); padding:17px 19px; box-shadow:var(--shadow);
}
.verdict.tot{border-left-color:var(--pos)} .verdict.xau{border-left-color:var(--neg)}
.verdict.trungtinh{border-left-color:var(--warn)}
.vstate{font-family:var(--f-display); font-size:20px; font-weight:700; letter-spacing:-.01em}
.vgroups{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin-top:14px}
.vg{background:var(--surface2); border-radius:8px; padding:11px 12px}
.vg .q{font-size:12px; color:var(--muted); margin-bottom:3px}
.vg .n{font-weight:600; font-size:14px; display:flex; justify-content:space-between; gap:8px}
.vg .g{font-size:12.5px; color:var(--ink2); margin-top:4px}

/* ── bảng ── */
.twrap{
  overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{padding:9px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left; position:sticky; left:0; background:var(--surface)}
thead th{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--surface2); border-bottom:1px solid var(--line2);
  position:sticky; top:0; z-index:2;
}
thead th:first-child{z-index:3; background:var(--surface2)}
tbody tr:hover td{background:var(--surface2)}
tbody tr:hover td:first-child{background:var(--surface2)}
tbody tr:last-child td{border-bottom:0}
td.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.sym{font-weight:600}
tr.clickable{cursor:pointer}
a.rowlink{color:inherit; text-decoration:none; display:block}
a.rowlink:hover{color:var(--accent)}

.tag{
  font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:4px;
  letter-spacing:.02em; display:inline-block;
}
.tag.ok{background:var(--pos-soft); color:var(--pos)}
.tag.no{background:var(--surface3); color:var(--muted)}
.tag.al{background:var(--neg-soft); color:var(--neg)}
.tag.wa{background:var(--warn-soft); color:var(--warn)}

/* ── biểu đồ ── */
.spark{display:block; width:100%; height:34px; overflow:visible}
.chart{display:block; width:100%; height:150px}

/* ── chọn / lọc ── */
.picker{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:13px}
.pick{
  font:inherit; font-size:13px; font-weight:500; padding:7px 13px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:7px; color:var(--ink2);
}
.pick:hover{border-color:var(--line2); background:var(--surface2)}
.pick[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.pick:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pick .m{font-family:var(--f-mono); font-size:11.5px; opacity:.75; margin-left:5px}

.searchbar{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:0 0 13px}
.searchbar input{
  font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:8px 13px;
  min-width:min(360px,100%); flex:0 1 380px;
}
.searchbar input::placeholder{color:var(--muted)}
.searchbar input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.split{display:grid; gap:13px; grid-template-columns:1fr 1fr}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.colhead{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:10px 13px; border-bottom:1px solid var(--line);
}
.colhead.up{color:var(--pos); background:var(--pos-soft)}
.colhead.down{color:var(--muted); background:var(--surface2)}

.note{
  font-size:12.5px; color:var(--muted); margin-top:9px; line-height:1.5;
  padding-left:11px; border-left:2px solid var(--line2); max-width:80ch;
}
footer{
  border-top:1px solid var(--line); margin-top:44px; padding:22px;
  font-size:12.5px; color:var(--muted); max-width:1320px; margin-inline:auto;
}
footer b{color:var(--ink2)}
.warnbox{
  background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink2);
  border-radius:8px; padding:11px 13px; font-size:12.5px; margin-top:13px;
}
.empty{padding:26px; text-align:center; color:var(--muted); font-size:13.5px}

/* ══════════ trang chủ — lối vào nhanh ══════════ */
.homehero{margin-bottom:28px}
.homehero h1{font-size:26px; margin-bottom:6px}
.homehero p{color:var(--muted); font-size:14.5px; max-width:70ch}
.destgrid{display:grid; gap:13px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); margin:22px 0 38px}
.dest{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 17px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:border-color .12s,transform .12s;
}
.dest:hover{border-color:var(--accent); transform:translateY(-1px)}
.dest .ic{font-size:22px; margin-bottom:8px; display:block}
.dest h3{font-family:var(--f-display); font-size:15.5px; color:var(--ink); margin-bottom:4px}
.dest p{font-size:12.5px; color:var(--muted); margin:0; line-height:1.45}

/* ══════════ trang chi tiết coin/chuỗi — phần đầu ══════════ */
.hero{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.hero .ic{font-size:34px; line-height:1}
.hero h1{font-size:25px}
.hero .sub-line{color:var(--muted); font-size:13.5px; margin-top:3px}
.hero .price{font-family:var(--f-mono); font-size:25px; font-weight:600; margin-left:auto}
.hero .price .chg{font-size:14px; margin-left:8px}

/* ══════════ bộ lọc coin explorer ══════════ */
.filterbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px}
.count-badge{font-size:12.5px; color:var(--muted)}

/* ══════════ trang HƯỚNG DẪN — trang để ĐỌC, không phải để tra số ══════════
   Bề ngang hẹp hơn (dòng ~72 ký tự) và dòng thưa hơn: mắt đọc văn xuôi dài
   khác hẳn mắt quét bảng số. */
.doc{max-width:920px}
.doc h2{font-size:22px; margin:38px 0 10px; scroll-margin-top:20px}
.doc h3{font-family:var(--f-display); font-size:16.5px; margin:22px 0 7px; color:var(--ink)}
.doc p{margin:0 0 12px; line-height:1.72; color:var(--ink2)}
.doc li{margin-bottom:7px; line-height:1.65; color:var(--ink2)}
.doc ul,.doc ol{padding-left:22px; margin:0 0 14px}
.doc b,.doc strong{color:var(--ink)}
.doc table{margin:6px 0 16px; font-size:13.5px}
.doc .twrap{margin-bottom:16px}
.doc code{
  font-family:var(--f-mono); font-size:.9em; background:var(--surface2);
  padding:1px 5px; border-radius:4px; color:var(--ink2);
}
/* mục lục đầu trang hướng dẫn */
.toc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 18px; margin-bottom:30px; box-shadow:var(--shadow);
}
.toc h3{margin:0 0 9px; font-size:13px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); font-family:var(--f-body)}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:26px}
.toc li{margin-bottom:5px; break-inside:avoid}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
@media(max-width:640px){.toc ol{columns:1}}
/* ô nhấn mạnh trong trang hướng dẫn */
.box{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:13px 16px; border-radius:0 8px 8px 0; margin:0 0 16px;
}
.box.canh{border-left-color:var(--warn); background:var(--warn-soft)}
.box.nguy{border-left-color:var(--neg); background:var(--neg-soft)}
.box p:last-child{margin-bottom:0}
.box .nhan{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:5px;
}
.box.canh .nhan{color:var(--warn)}
.box.nguy .nhan{color:var(--neg)}

@media(max-width:640px){
  main{padding:18px 14px 60px}
  .top-in,.filters,.crumb{padding-inline:14px}
  .big{font-size:22px}
  .hero .price{margin-left:0; width:100%; order:3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── P9 · dải cảnh báo sức khoẻ hệ (hiện trên mọi trang) ── */
.suckhoe{padding:9px 16px; font-size:13px; line-height:1.5; border-top:1px solid var(--line)}
.suckhoe.do{background:color-mix(in srgb, var(--warn) 14%, var(--surface));
  color:var(--text); border-top:2px solid var(--warn)}
.suckhoe.chua{background:var(--surface2); color:var(--muted)}
.suckhoe a{color:var(--accent)}
@media (max-width:640px){.suckhoe{padding:8px 12px; font-size:12px}}

/* ── P22 · menu theo nhóm (thay 12 mục phẳng) ────────────────────────────── */
.topnav .nhom{position:relative}
.topnav .nhom > button{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  background:transparent; border:0; color:var(--muted);
  padding:9px 12px; border-radius:7px; white-space:nowrap;
  display:flex; align-items:center; gap:5px}
.topnav .nhom > button:hover{background:var(--surface2); color:var(--ink)}
.topnav .nhom.on > button{background:var(--surface); color:var(--accent)}
.topnav .nhom > button .ar{font-size:9px; opacity:.55}
.topnav .nhom-con{
  display:none; position:absolute; top:100%; left:0; z-index:60; min-width:222px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16); padding:6px; margin-top:3px}
.topnav .nhom.mo .nhom-con{display:block}
.topnav .nhom-con a{
  display:block; padding:8px 11px; border-radius:7px; font-size:13px;
  color:var(--ink); white-space:normal}
.topnav .nhom-con a:hover{background:var(--surface2); color:var(--accent)}
.topnav .nhom-con a.on{background:var(--surface2); color:var(--accent)}
.topnav .nhom-con a small{
  display:block; color:var(--muted); font-size:11.5px; margin-top:1px; font-weight:400}
/* Thanh menu có hộp thả xuống thì KHÔNG được cắt nội dung tràn ra ngoài;
   overflow-x:auto của bản cũ sẽ cắt cụt hộp con. */
.topnav{overflow:visible}
@media (max-width:900px){
  /* Ở màn hẹp menu xổ dọc, nên hộp con hiện thẳng trong dòng thay vì nổi lên. */
  .topnav .nhom{width:100%}
  .topnav .nhom > button{width:100%; justify-content:space-between}
  .topnav .nhom-con{position:static; box-shadow:none; margin:2px 0 6px 10px;
    min-width:0; border-left:2px solid var(--line); border-radius:0 8px 8px 0}
}

/* ── P22 · buồng lái 6 tầng ở trang chủ ──────────────────────────────────── */
.thap{display:flex; flex-direction:column; gap:8px; margin:0 0 14px}
.tang{display:grid; grid-template-columns:34px 138px 1fr auto; gap:12px;
  align-items:center; padding:13px 15px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface)}
.tang .so{font:600 15px/1 "JetBrains Mono",monospace; color:var(--muted); text-align:center}
.tang .ten{font-weight:650; font-size:13.5px}
.tang .ten small{display:block; color:var(--muted); font-weight:400; font-size:11.5px; margin-top:2px}
.tang .tt{font-size:13.5px; line-height:1.5}
.tang .di{white-space:nowrap; font-size:12.5px; color:var(--accent);
  border:1px solid var(--line); padding:6px 11px; border-radius:8px}
.tang .di:hover{background:var(--surface2)}
.tang.veto{border-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--surface))}
@media (max-width:860px){
  .tang{grid-template-columns:28px 1fr; gap:8px}
  .tang .tt{grid-column:1/-1}
  .tang .di{grid-column:1/-1; text-align:center}
}

/* ── Gọn header trên điện thoại (28/08) ──────────────────────────────────────
   ĐO ĐƯỢC trước khi sửa: trên màn 375×812, header cao 335px = 41% màn hình,
   lại còn dính cố định nên chiếm chỗ vĩnh viễn. Thủ phạm: dải bộ lọc 164px
   (7 chip thời gian xuống 2 hàng + hàng "GIAO DIỆN" riêng + hai nhãn nhóm).
   Người dùng phải cuộn qua gần nửa màn hình mới thấy số. */
@media (max-width:640px){
  /* Nhãn nhóm bỏ đi: chip "Nay / 7 ngày / 30 ngày" tự nói lên nó là gì,
     không cần dòng chữ "KHOẢNG THỜI GIAN" phía trên chiếm nguyên một hàng. */
  .filters .flabel{display:none}
  .filters{flex-wrap:nowrap; gap:8px; padding:7px 12px; align-items:center}
  .filters .fgroup{margin:0 !important; min-width:0}
  .filters .fgroup:first-child{flex:1 1 auto; min-width:0}
  /* Chip thời gian: MỘT hàng cuộn ngang thay vì xuống hai hàng. */
  .filters #wins{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .filters #wins::-webkit-scrollbar{display:none}
  .filters #wins .chip{flex:0 0 auto}
  /* Chọn giao diện là thứ đặt MỘT LẦN rồi thôi — không đáng chiếm chỗ thường
     trực trên màn hẹp. Thu về đúng ba ký hiệu. */
  .filters #themes{flex-wrap:nowrap}
  .filters #themes .chip{padding:6px 9px; font-size:0}
  .filters #themes .chip::after{font-size:13px}
  .filters #themes .chip:nth-child(1)::after{content:"A"}
  .filters #themes .chip:nth-child(2)::after{content:"☀"}
  .filters #themes .chip:nth-child(3)::after{content:"☾"}
  /* Mốc cập nhật về cùng hàng với tên trang, thôi chiếm riêng một dòng. */
  .top-in{flex-wrap:nowrap; gap:9px; padding:8px 12px}
  .top-in .brand{font-size:16px; flex:0 1 auto; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis}
  .top-in .stamp{margin-left:auto; font-size:11px; white-space:nowrap}
  .suckhoe{padding:7px 12px; font-size:12px; line-height:1.45}
}

/* ── Sửa vòng 2 sau khi NHÌN ảnh chụp thật (28/08) ───────────────────────────
   Vòng 1 kéo header 335→173px nhưng làm hỏng ba chỗ: TÊN TRANG biến mất (bị
   ellipsis nuốt), chip giao diện bị cắt cụt ở mép phải, dải cảnh báo vẫn dài
   ba dòng. Đo bằng mắt trên ảnh chụp mới thấy — số đo chiều cao không nói ra
   được những chuyện này. */
.suckhoe .sk-ngan{display:none}
.suckhoe .sk-du{display:inline}
.fgroup.trong-menu{width:100%; margin:6px 0 0 !important;
  padding-top:8px; border-top:1px solid var(--line)}

@media (max-width:640px){
  /* Tên trang PHẢI còn nhìn thấy — nó là thứ cho biết mình đang ở đâu. */
  .top-in .brand{font-size:15.5px; flex:0 0 auto; overflow:visible; text-overflow:clip}
  .top-in .stamp{margin-left:auto; font-size:10.5px; opacity:.75}
  /* Dải cảnh báo: bản ngắn một dòng. Chi tiết đọc ở trang Hướng dẫn. */
  .suckhoe .sk-ngan{display:inline}
  .suckhoe .sk-du{display:none}
  .suckhoe{padding:6px 12px; font-size:12px}
  /* Bộ chọn giao diện đã dọn vào trong menu nên hàng lọc chỉ còn chip thời gian. */
  .filters{padding:6px 12px}
  .filters #wins{flex-wrap:nowrap; overflow-x:auto}
  /* Trong menu thì hiện lại chữ đầy đủ, không dùng ký hiệu rút gọn nữa. */
  .fgroup.trong-menu .flabel{display:block; margin-bottom:5px}
  .fgroup.trong-menu #themes .chip{font-size:13px; padding:7px 12px}
  .fgroup.trong-menu #themes .chip::after{content:"" !important}
}

/* Mốc cập nhật PHẢI còn thấy trên điện thoại — nó là thứ cho biết số có tươi
   không. Vòng sửa trước đẩy nó ra khỏi màn hình vì `.brand` chiếm hết chỗ. */
@media (max-width:640px){
  .top-in{flex-wrap:wrap; row-gap:0}
  .top-in .brand{flex:1 1 auto; min-width:0}
  .top-in .stamp{flex:0 0 auto; margin-left:auto; font-size:10.5px; opacity:.72}
  .top-in .stamp span:last-child{max-width:96px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; display:inline-block;
    vertical-align:middle}
}

/* ── Ghi chú dài: mặc định 2 dòng, bấm mới mở (28/08) ────────────────────── */
.note.gon{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.note-mo{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  background:transparent; border:0; color:var(--accent);
  padding:2px 0 0; margin:0 0 10px; display:block}
.note-mo:hover{text-decoration:underline}
@media (min-width:900px){ .note.gon{-webkit-line-clamp:3} }