/* Tự lưu từ Google Fonts (giấy phép OFL) — bỏ 2 kết nối ra ngoài mỗi trang. */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-800-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/data/static/fonts/bevietnampro-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/data/static/fonts/ibmplexmono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Phông dự phòng co giãn cho KHỚP khổ Be Vietnam Pro (đo bằng fontTools so với Arial): chữ hiện
   bằng phông máy trước, lúc Be Vietnam Pro tải xong thay vào không xô dòng. Không có khối này thì
   trang mã nhảy bố cục 0,18 (Google coi ≤ 0,1 là tốt). Đổi phông chính thì đo lại 3 số. */
@font-face {
  font-family: 'BVP Fallback';
  font-weight: 100 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto');
  size-adjust: 109.7%; ascent-override: 91.2%; descent-override: 24.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'BVP Fallback';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Roboto Bold');
  size-adjust: 108.5%; ascent-override: 92.2%; descent-override: 24.4%; line-gap-override: 0%;
}

:root{
  --bg:#090D14; --surface:#0E1424; --surface2:#141C2C; --surface3:#1A2334;
  --line:#1E293C; --line2:#2A3750;
  --text:#E8EEF7; --text2:#95A5BA; --text3:#64748B;
  --brass:#C9A227; --brass-deep:#B08C1A; --blue:#3E86D6;
  --up:#14AE72; --down:#D6404F; --ceil:#A971E8; --floor:#1FB8C9; --ref:#D8B23A;
  /* Màu CHỮ số tăng/giảm, tách khỏi màu thanh/cột (--up/--down): đỏ #D6404F trên nền tối chỉ đạt
     tương phản 4,1 (chuẩn chữ nhỏ 4,5) — anh Quân chê khó đọc. Bản tông sáng: đỏ 7,3, xanh 9,6.
     Ảnh nền sáng (`Viet bai/tools/infographic/chup_data.py`) gán lại --up-t/--down-t = --up/--down. */
  --up-t:#34D399; --down-t:#FF7B7B;
  --ui:"Be Vietnam Pro","BVP Fallback",system-ui,"Segoe UI",sans-serif;
  /* Chữ số dùng chung phông với chữ, KHÔNG chân (anh Quân chọn phương án B 25-9-2026, chê
     IBM Plex Mono "cứng"). Thẳng cột nhờ tabular-nums ở body, không cần phông đơn cách. */
  --mono:"Be Vietnam Pro","BVP Fallback",system-ui,"Segoe UI",sans-serif;
  --r:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;container-type:inline-size;background:var(--bg);color:var(--text);font-family:var(--ui);
  font-variant-numeric:tabular-nums;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.svgchart text{font-family:var(--mono)}
.up{color:var(--up-t)} .down{color:var(--down-t)} .flat{color:var(--ref)}
.pc-ce{color:var(--ceil)} .pc-fl{color:var(--floor)}
.tcard .bval.pc-ce{color:var(--ceil)} .tcard .bval.pc-fl{color:var(--floor)} .tcard .bval.up{color:var(--up-t)} .tcard .bval.down{color:var(--down-t)} .tcard .bval.flat{color:var(--ref)}
.rank .vv.pc-ce{color:var(--ceil)} .rank .vv.pc-fl{color:var(--floor)} .rank .vv.up{color:var(--up-t)} .rank .vv.down{color:var(--down-t)}
.lbl{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text3)}
.muted{color:var(--text2)}

/* ---------- shared app bits ---------- */
.appbar{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.appbar .logo{font-weight:800;letter-spacing:-.01em}
.appbar .logo i{font-style:normal;color:var(--brass)}
.appbar .stamp{margin-left:auto;font-size:11px;color:var(--text3);text-align:right}
.appbar .stamp b{display:block;font-family:var(--mono);color:var(--text2);font-weight:500}

.wrap{padding:16px 14px 40px;display:flex;flex-direction:column;gap:22px}
@container (min-width:760px){ .wrap{padding:26px 26px 60px;gap:30px} }

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
@container (min-width:760px){ .panel{padding:18px} }
.panel > header{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.panel > header h3{font-size:14px}
.panel > header .when{margin-left:auto;font-size:11px;color:var(--text3);font-family:var(--mono)}
.panel > header .ptl{display:flex;flex-direction:column;gap:3px;min-width:0}
.panel > header .ptl .kunit{margin:0}

/* ---------- search hero ---------- */
.hero{padding:26px 14px 22px;text-align:center;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 0%,#131C2E 0%,var(--bg) 70%)}
.hero h1{font-size:22px;font-weight:800;letter-spacing:-.02em}
.hero p{margin:6px 0 16px;color:var(--text2);font-size:13px}
@container (min-width:760px){ .hero{padding:52px 20px 40px} .hero h1{font-size:34px} .hero p{font-size:15px} }
.searchbox{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;
  background:var(--surface2);border:1px solid var(--line2);border-radius:999px;padding:10px 14px}
.searchbox:focus-within{border-color:var(--brass)}
.searchbox svg{flex:none;opacity:.55}
.searchbox input{flex:1;min-width:0;background:none;border:0;color:var(--text);
  font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.searchbox input:focus,.searchbox input:focus-visible{outline:none}
.searchbox input::placeholder{font-family:var(--ui);letter-spacing:0;text-transform:none;color:var(--text3)}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.chip{font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line2);color:var(--text2)}
.chip:hover{border-color:var(--brass);color:var(--text)}
.origdoc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 8px}
.origdoc a{display:inline-block;padding:10px 18px;border-radius:8px;background:var(--brass);color:var(--bg);
  font-weight:600;font-size:15px;text-decoration:none}
.origdoc a:hover{background:var(--brass-deep)}
.origdoc span{color:var(--text2);font-size:13px}

/* ---------- index strip ---------- */
.idxstrip{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@container (min-width:560px){ .idxstrip{grid-template-columns:repeat(4,1fr)} }
.idx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.idx .nm{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text2)}
.idx .vl{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:2px}
.idx .dl{font-family:var(--mono);font-size:12px}

/* ---------- breadth ---------- */
.breadth{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:10px 0 8px}
.breadth i{display:block}
.blegend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px}
.blegend span{display:flex;align-items:center;gap:6px;color:var(--text2)}
.blegend b{font-family:var(--mono);font-weight:600;color:var(--text)}
.dot{width:8px;height:8px;border-radius:2px;flex:none}
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:12px}
.statrow div .v{font-family:var(--mono);font-size:16px;font-weight:600}

/* ---------- movers ---------- */
.movers{display:grid;gap:14px}
@container (min-width:760px){ .movers{grid-template-columns:repeat(3,1fr)} }
.rank{display:flex;flex-direction:column;gap:9px}
.rank li{list-style:none;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}
.rank .tk{font-family:var(--mono);font-size:13px;font-weight:600}
.rank .track{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden}
.rank .track i{display:block;height:100%;border-radius:3px}
.rank .vv{font-family:var(--mono);font-size:12px;color:var(--text2)}
ul{margin:0;padding:0}

/* ---------- tool grid ---------- */
.tools{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@container (min-width:760px){ .tools{grid-template-columns:repeat(3,1fr)} }
.tool{display:flex;flex-direction:column;gap:3px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px}
.tool:hover{border-color:var(--brass)}
.tool b{font-size:13.5px;font-weight:600}
.tool span{font-size:11.5px;color:var(--text3);line-height:1.35}
.tool.locked b::after{content:" 🔒";font-size:11px}

/* ---------- symbol header ---------- */
.symhead{padding:16px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
@container (min-width:760px){ .symhead{padding:22px 26px} }
.symtop{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.symtop .symid{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:.02em;line-height:1}
.symtop .meta{flex:1;min-width:180px}
.symtop .meta .co{font-size:14px;font-weight:600;margin:0;line-height:1.35}
.symtop .meta .en{font-size:12px;color:var(--text3);margin-top:1px}
.symtop .meta .tags{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--text2);border-radius:4px;padding:2px 7px}
.pricebox{text-align:right;margin-left:auto}
.pricebox .p{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1}
.pricebox .d{font-family:var(--mono);font-size:13px;margin-top:3px}
.keyrow{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:16px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@container (min-width:560px){ .keyrow{grid-template-columns:repeat(3,1fr)} }
@container (min-width:900px){ .keyrow{grid-template-columns:repeat(6,1fr)} }
.keyrow div{background:var(--surface);padding:9px 11px}
.keyrow .v{font-family:var(--mono);font-size:14.5px;font-weight:600;margin-top:1px}

/* ---------- sticky section nav ---------- */
.secnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;overflow-x:auto;
  background:rgba(14,20,36,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);padding:8px 12px;scrollbar-width:none}
.secnav::-webkit-scrollbar{display:none}
.secnav button{white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--text2);
  padding:5px 11px;border-radius:999px}
.secnav button[aria-pressed=true]{background:var(--surface3);color:var(--text)}

/* ---------- charts ---------- */
.chartwrap{position:relative}
.chartwrap svg{display:block;width:100%;height:auto;overflow:visible}
.searchbox svg{width:16px;height:16px}
.gridline{stroke:var(--line);stroke-width:1}
.axtx{fill:var(--text3);font-family:var(--mono);font-size:9.5px}
.tip{position:absolute;pointer-events:none;z-index:12;background:var(--surface3);
  border:1px solid var(--line2);border-radius:8px;padding:7px 10px;font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap;opacity:0;transition:opacity .1s}
.tip b{font-family:var(--mono);font-weight:600}
.tip .r{display:flex;justify-content:space-between;gap:14px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text2);margin-bottom:10px}
.legend span{display:flex;align-items:center;gap:6px}
.rngs{display:flex;gap:2px;margin-left:auto}
.rngs button{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;color:var(--text3)}
.rngs button[aria-pressed=true]{background:var(--surface3);color:var(--text)}
.unit{font-size:11px;color:var(--text3);font-family:var(--mono)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);text-align:right;padding:0 10px 8px;white-space:nowrap;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left;padding-left:0}
td.lt{text-align:left}
td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.tx{font-family:var(--ui);white-space:normal;text-align:left}
tr:last-child td{border-bottom:0}

/* market list: table on wide, cards on narrow */
.mktcards{display:flex;flex-direction:column;gap:8px}
.mkt-card{display:grid;grid-template-columns:1fr auto;gap:4px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.mkt-card .tk{font-family:var(--mono);font-size:15px;font-weight:600}
.mkt-card .co{font-size:11.5px;color:var(--text3);line-height:1.3}
.mkt-card .p{font-family:var(--mono);font-size:15px;font-weight:600;text-align:right}
.mkt-card .d{font-family:var(--mono);font-size:12px;text-align:right}
.mkt-card .foot{grid-column:1/-1;display:flex;gap:16px;margin-top:5px;padding-top:7px;
  border-top:1px solid var(--line);font-size:11px;color:var(--text3)}
.mkt-card .foot b{font-family:var(--mono);color:var(--text2);font-weight:500}
.showwide{display:none}
@container (min-width:700px){ .showwide{display:block} .shownarrow{display:none} }

/* ---------- disclosure list ---------- */
.dlist{display:flex;flex-direction:column}
.dlist a{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);text-decoration:none}
.dlist a:last-child{border-bottom:0}
.dlist .dt{font-family:var(--mono);font-size:11.5px;color:var(--text3);padding-top:2px}
.dlist .ti{display:block;font-size:13px;line-height:1.4}
.dlist .src{display:block;font-size:11px;color:var(--text3);margin-top:3px}
.dlist a:hover .ti{color:var(--brass)}

/* ---------- accordion ---------- */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
summary{padding:14px;font-weight:600;font-size:13.5px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:8px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--text3);font-size:16px}
details[open] summary::after{content:"−"}
details .body{padding:0 14px 14px}

/* ---------- callout ---------- */
.warn{display:flex;gap:9px;background:rgba(216,178,58,.07);border:1px solid rgba(216,178,58,.28);
  border-radius:8px;padding:9px 11px;font-size:12px;color:var(--text2);line-height:1.45}
.warn b{color:var(--ref)}


/* ---------- bản chạy thật: liên kết thay cho nút ---------- */
.chip,.tool{text-decoration:none}
.searchbox.mini{max-width:190px;margin:0;padding:6px 12px;flex:1}
.searchbox.mini input{font-size:13px}
.appbar .stamp{margin-left:auto}
.secnav a{white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--text2);
  padding:5px 11px;border-radius:999px;text-decoration:none}
.secnav a:hover{background:var(--surface3);color:var(--text)}
.wrap h2{font-size:18px;margin-bottom:6px}
:target{scroll-margin-top:60px}

/* ---------- khung trang: chặn bề ngang trên màn hình lớn ---------- */
.wrap{max-width:1180px;margin:0 auto}

/* bảng ít cột: không kéo hết bề ngang, mắt phải chạy quá xa */
.panel .tblwrap>table{max-width:960px}


/* =====================================================================
   Trang dựng ở máy chủ: đường dẫn, đoạn tóm tắt, danh mục, chân trang.
   Bám đúng hệ màu và hai bộ chữ đã chốt — không thêm biến mới.
   ===================================================================== */

.panel > header h2{font-size:14px;font-weight:600}
h1.ptitle{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
@container (min-width:760px){ h1.ptitle{font-size:27px} }
.symtop .symid a{text-decoration:none}
.mt{margin:12px 0 0}
p.muted.mt,p.muted{font-size:12.5px}
.empty{margin:0;font-size:12.5px}

/* ---------- đường dẫn ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;
  color:var(--text3);padding:10px max(14px,calc((100cqw - 1180px)/2)) 0;max-width:100cqw}
.crumbs a{color:var(--text2);text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs span{color:var(--text3)}

/* ---------- đoạn tóm tắt: thứ máy tìm kiếm thật sự đọc ---------- */
.prose{display:flex;flex-direction:column;gap:10px;max-width:78ch}
.prose p{margin:0;font-size:14.5px;line-height:1.62;color:var(--text)}
.prose p + p{color:var(--text2)}
.prose b{color:var(--text);font-weight:600}
@container (min-width:760px){ .prose p{font-size:15px} }

/* ---------- hỏi nhanh ---------- */
.qa{margin:0;display:flex;flex-direction:column;gap:2px}
.qa dt{font-size:13.5px;font-weight:600;padding:12px 0 4px;border-top:1px solid var(--line)}
.qa dt:first-child{border-top:0;padding-top:0}
.qa dd{margin:0 0 4px;font-size:13.5px;line-height:1.55;color:var(--text2)}

/* ---------- lưới mã và ngành ---------- */
.indgrid{display:grid;gap:9px;grid-template-columns:repeat(1,1fr)}
@container (min-width:620px){ .indgrid{grid-template-columns:repeat(2,1fr)} }
@container (min-width:900px){ .indgrid{grid-template-columns:repeat(3,1fr)} }
.indcell{display:flex;align-items:baseline;gap:8px;padding:11px 13px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:8px}
.indcell:hover{border-color:var(--brass)}
.indcell b{font-size:13px;font-weight:600;flex:1}
.indcell span{font-family:var(--mono);font-size:11.5px;color:var(--text3);white-space:nowrap}
.chips.left{justify-content:flex-start}
.chip.word{font-family:var(--ui);letter-spacing:0}

/* ---------- biểu đồ dựng sẵn ---------- */
.svgchart{display:block;width:100%;height:auto}
.tier + .tier{margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.tierlbl{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text3);margin-bottom:4px}
.tierlbl i{font-style:normal;font-family:var(--mono);letter-spacing:0;text-transform:none}

/* ---------- văn bản dài trong hồ sơ ---------- */
.longtext{font-size:13.5px;line-height:1.65;color:var(--text2);white-space:pre-line;
  max-width:78ch}
.bullets{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;
  font-size:13.5px;color:var(--text2);line-height:1.5}
.bullets li{list-style:disc}

/* ---------- danh sách công bố bản tĩnh ---------- */
.dlist .ditem{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:11px 0;
  border-bottom:1px solid var(--line);text-decoration:none}
.dlist a.ditem:hover .ti{color:var(--brass)}
.dlist .ditem:last-child{border-bottom:0}
.dlist .ditem .dt{font-family:var(--mono);font-size:11.5px;color:var(--text3);grid-row:1/3}
.dlist .ditem .ti{font-size:13px;line-height:1.4}
.dlist .ditem .src{font-size:11px;color:var(--text3)}

/* ---------- thanh mục của một mã: đang xem thì nổi lên ---------- */
.secnav a[aria-current="page"]{background:var(--surface3);color:var(--text);font-weight:600}
th.lt{text-align:left}

/* ---------- chân trang ---------- */
.ftr{border-top:1px solid var(--line);background:var(--surface);
  padding:20px max(14px,calc((100cqw - 1180px)/2)) 28px;
  display:flex;flex-direction:column;gap:12px}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.ftr nav a{font-size:12.5px;color:var(--text2);text-decoration:none}
.ftr nav a:hover{color:var(--brass)}
.ftr p{margin:0;font-size:11.5px;line-height:1.6;color:var(--text3);max-width:82ch}
.ftr-lh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:12px;border-top:1px solid var(--line)}
.ftr-lh a{font-size:12.5px;color:var(--text2);text-decoration:none}
.ftr-lh a:hover{color:var(--brass)}
.ftr-lh .nm{font-weight:600;color:var(--text)}
.ftr-lh .ic{display:inline-flex;line-height:0;border-radius:50%;transition:transform .15s}
.ftr-lh .ic:hover{transform:scale(1.1)}

/* =====================================================================
   Trang chỉ số: khối bar xếp hạng + bộ chọn khung thời gian.
   ⛔ .rank2/.tcard PHẢI GIỐNG HỆT khối bar trang /tudoanh
   (local/tudoanh/build_html.py .tcard/.bar-*) và trang Khối ngoại local
   (fireant/web.py .rank2/.tcard) — anh Quân chụp riêng từng khối đặt cạnh
   nhau trong bài. Sửa bên này thì sửa cả hai bên kia, và ngược lại.
   Khác biệt DUY NHẤT được phép: màu thanh bar (giá: xanh/đỏ của trang này;
   khối ngoại: teal/đỏ hồng như trang Khối ngoại; tự doanh: xanh lá/đỏ tươi).
   ===================================================================== */
.rankzone{display:flex;flex-direction:column;gap:12px}
.rank2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 6px;max-width:1040px;
  --t-line:#20293F;--t-txt:#E9E7DF;--t-dim:#8A93A8;--t-faint:#5A6379}
.rank2.px{--t-up:#14AE72;--t-down:#D6404F;--t-up0:#0b6e47;--t-down0:#8f2a35;--t-up-t:#34D399;--t-down-t:#FF7B7B}
.rank2.fo{--t-up:#14B8A6;--t-down:#E5484D;--t-up0:#0d7d70;--t-down0:#a12f33;--t-up-t:#2DD4BF;--t-down-t:#FF8585}
@container (max-width:900px){ .rank2{grid-template-columns:1fr} }
.tcard{background:#0E1424;border:1px solid var(--t-line);border-radius:14px;padding:16px 18px}
.tcard h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-dim);
  margin:0 0 10px;font-weight:700;font-family:"Be Vietnam Pro",system-ui,sans-serif}
.tcard.up h2,.tcard.fbuy h2{color:var(--t-up-t,var(--t-up))} .tcard.down h2,.tcard.fsell h2{color:var(--t-down-t,var(--t-down))}
.tcard .cap{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.5;
  color:#B4BCCD;margin:-4px 0 12px;letter-spacing:.02em}
.tcard .empty-mini{color:var(--t-faint);font-size:13px;padding:8px 0}
.tcard .brow{display:grid;grid-template-columns:66px 1fr 96px;align-items:center;gap:10px;padding:6px 0}
.tcard .bsym{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:13px;
  color:var(--t-txt);text-decoration:none}
.tcard .bsym:hover{color:var(--brass)}
.tcard .btrack{height:10px;background:rgba(255,255,255,.09);border-radius:5px;overflow:hidden}
.tcard .bfill{display:block;height:100%;border-radius:5px;min-width:3px}
.tcard .bfill.pos{background:linear-gradient(90deg,var(--t-up0),var(--t-up))}
.tcard .bfill.neg{background:linear-gradient(270deg,var(--t-down0),var(--t-down))}
.tcard .bval{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;text-align:right;white-space:nowrap}
.tcard .bval.pos{color:var(--t-up-t,var(--t-up))} .tcard .bval.neg{color:var(--t-down-t,var(--t-down))}
.blockmeta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#5A6379;
  margin:4px 2px 0;letter-spacing:.02em;max-width:1040px;line-height:1.55}

.kbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:1040px}
.kf{display:flex;gap:6px;align-items:center;margin:0}
.ksel,.kbtn,.krange input{background:var(--surface2);border:1px solid var(--line2);color:var(--text2);
  font-family:var(--ui);font-size:12.5px;font-weight:500;border-radius:999px;padding:6px 13px}
.ksel{cursor:pointer;max-width:230px}
.ksel.on,.kbtn[aria-pressed=true],.krange.on input{border-color:var(--brass);color:var(--text)}
.kbtn[aria-pressed=true]{background:var(--brass);color:#141005;font-weight:600}
.kbtn:hover,.ksel:hover{border-color:var(--text3);color:var(--text)}
.krange input{font-family:var(--mono);font-size:12px;border-radius:8px;padding:5px 8px}
.krange span{color:var(--text3)}
.ktop{margin-left:auto}
.fulltbl summary{font-size:13px}

/* ---------- trang chủ: thẻ chỉ số, danh sách và bảng bấm được sang trang mã ---------- */
a.idx{text-decoration:none;display:block}
a.idx:hover{border-color:var(--brass)}
a.idx .nm::after{content:" ›";color:var(--text3)}
.rank a.tk{text-decoration:none}
.rank a.tk:hover,td a:hover{color:var(--brass)}
td a{text-decoration:none}
a.mkt-card{text-decoration:none}
a.mkt-card:hover{border-color:var(--brass)}

/* ================= khung điều hướng (17-9-2026) =================
   Anh Quân: vạch ngăn giữa các khu vực phải rõ, thanh trái gập được,
   cái gì trông bấm được thì bấm được thật. */

.appbar{border-bottom-width:2px;border-bottom-color:var(--line2)}
.appbar .logo span{margin-left:8px;font-weight:500;font-size:12px;color:var(--text2);
  letter-spacing:.04em}
.appbar .searchbox.mini{flex:1;max-width:420px;margin:0}

/* dải chỉ số: mỗi ô một liên kết thật sang trang chỉ số */
.tickerbar{display:flex;overflow-x:auto;background:var(--surface);
  border-bottom:2px solid var(--line2);scrollbar-width:thin}
.tickerbar .tkc{display:flex;align-items:baseline;gap:8px;padding:8px 16px;
  border-right:1px solid var(--line);white-space:nowrap;text-decoration:none;font-size:13px}
.tickerbar .tkc:hover{background:var(--surface2)}
.tickerbar .tkc b{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text2)}

/* hai cột: thanh trái + nội dung */
.layout{display:flex;align-items:flex-start}
.side{width:248px;flex:0 0 248px;position:sticky;top:0;max-height:100vh;overflow-y:auto;
  background:var(--surface);border-right:2px solid var(--line2);padding-bottom:24px}
.page{flex:1;min-width:0;container-type:inline-size}

.navgrp{border-bottom:1px solid var(--line)}
.navgrp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:11px 16px;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text3)}
.navgrp > summary::-webkit-details-marker{display:none}
.navgrp[open] > summary{color:var(--text2)}
.navgrp > summary:hover{background:var(--surface2);color:var(--text)}
.navgrp a{display:block;padding:8px 16px 8px 20px;font-size:13.5px;text-decoration:none;
  border-left:3px solid transparent;color:var(--text)}
.navgrp a:hover{background:var(--surface2)}
.navgrp a.on{background:var(--surface3);border-left-color:var(--brass);font-weight:600}
.navgrp a span{display:block;font-size:11px;color:var(--text3);font-weight:400;margin-top:1px}
.navgrp:last-child{border-bottom:none;margin-bottom:10px}
/* cây mảng (ui._nav_tree): mảng → nhóm → mục; nhãn "Mới" theo navnew.py.
   Ba tầng phân bằng màu + thụt lề (anh Quân): mảng chữ trắng đậm, nhóm chữ in hoa vàng đồng, mục chữ xám
   có đường kẻ dọc. Nút mở là ô vuông "+", mở ra thành "−" — áp cho MỌI tầng thanh trái. */
.side .navgrp > summary::after,.side .navsec > summary::after,.side .navsub > summary::after{content:"+";flex:none;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  border:1px solid var(--line2);border-radius:5px;font:700 15px/1 var(--mono);color:var(--text);
  letter-spacing:0;margin-left:auto;transform:none;transition:border-color .15s,color .15s}
.side .navgrp[open] > summary::after,.side .navsec[open] > summary::after,.side .navsub[open] > summary::after{content:"−";transform:none}
.side .navone > summary::after,.side .navone[open] > summary::after{content:none}
.navone[open]{padding-bottom:0}
.side .navgrp > summary:hover::after,.side .navsec > summary:hover::after,.side .navsub > summary:hover::after{border-color:var(--brass);color:var(--brass)}
.navsec > summary,.navsub > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.navsec > summary::-webkit-details-marker,.navsub > summary::-webkit-details-marker{display:none}
.navsec,.navsub{border:none;border-radius:0;background:transparent}
.navsec{border-left:3px solid transparent}
.navsec > summary{padding:0 12px 0 0;font-weight:400}
.navsec > summary > a{flex:1;min-width:0}
.navgrp .navsec > summary > a{padding:9px 4px 9px 17px;font-size:14px;font-weight:600;color:var(--text);
  border-left:none;background:transparent}
.navsec > summary:hover,.navsub > summary:hover{background:var(--surface2)}
.navsec[open]{border-left-color:var(--brass);background:var(--bg);padding-bottom:6px}
.navsec[open] > summary{background:var(--surface2)}
.navsub > summary{padding:7px 12px 5px 26px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass)}
.navgrp .navsub a{margin-left:30px;padding:6px 12px 6px 12px;font-size:13px;color:var(--text2);
  border-left:1px solid var(--line2)}
.navgrp .navsub a:hover{color:var(--text)}
.navgrp .navsub a.on{border-left:3px solid var(--brass);padding-left:10px;color:var(--text)}
.navcur{border-bottom:2px solid var(--line2)}
.navcur .navsec[open]{padding-bottom:10px}
.navnew{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:10px;
  font-weight:700;letter-spacing:.03em;line-height:16px;background:var(--brass);color:#141000;
  text-transform:none;vertical-align:1px}
.navsec > summary .navnew,.navsub > summary .navnew{margin-left:0}

/* vạch ngăn rõ hơn giữa các khối nội dung */
.panel{border-color:var(--line2)}
.panel > header{border-bottom:1px solid var(--line);padding-bottom:9px}
.secttl{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text3);border-top:1px solid var(--line2);padding-top:14px;margin-bottom:12px}
table th{border-bottom:2px solid var(--line2)}
.ftr{border-top:2px solid var(--line2)}
.idx{text-decoration:none;display:block}
.idx:hover{border-color:var(--brass)}
.lead{color:var(--text2);margin:6px 0 0;font-size:14.5px;max-width:70ch}

@media (max-width:900px){
  .layout{display:block}
  .side{width:auto;flex:none;position:static;max-height:none;
    border-right:none;border-bottom:2px solid var(--line2);padding-bottom:0}
  .navgrp:last-child{margin-bottom:0}
  .appbar{flex-wrap:wrap}
  .appbar .searchbox.mini{order:3;flex:1 0 100%;max-width:none}
}

/* ---------- khối "Đang giao dịch" trên trang chỉ số (live.py) ---------- */
.livebox{border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--surface);
  display:flex;flex-direction:column;gap:14px}
.livebox .lhead{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px}
.livebox .ldot{width:8px;height:8px;border-radius:50%;background:var(--brass);
  animation:lpulse 1.6s ease-in-out infinite}
@keyframes lpulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.livebox .ldot{animation:none}}
.livebox .ltiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-radius:var(--r);overflow:hidden}
@container (min-width:760px){ .livebox .ltiles{grid-template-columns:repeat(4,1fr)} }
.livebox .ltile{background:var(--surface2);padding:10px 12px}
.livebox .ltile .v{font-size:18px;font-weight:600}
.livebox .ltile .d{font-size:12.5px}
.livebox .ltile .lsub{font-size:11px;color:var(--text3);margin-top:2px}

/* =====================================================================
   Bảng điều khiển tràn màn hình (19-9-2026). Anh Quân: màn hình desktop bị thừa
   khoảng trống, chữ nhiều. Khung (thanh trên, đầu trang mã, đường dẫn) bám sát lề
   trái; trang nào dùng `<main class="wrap grid">` thì nội dung tràn hết bề ngang và
   dàn thành lưới 12 cột. Trang chưa chuyển vẫn giữ cột 1180px như cũ.
   ===================================================================== */
.appbar,.hero,.symhead,.secnav{padding-left:14px;padding-right:14px}
.crumbs{padding-left:14px;padding-right:14px}
@container (min-width:760px){
  .hero,.symhead,.secnav,.crumbs{padding-left:26px;padding-right:26px}
}
.appbar{padding-left:20px;padding-right:20px}
.wrap{margin:0}
.wrap.grid{max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;align-items:start}
.wrap.grid>*{grid-column:1/-1;min-width:0}
@container (min-width:1100px){
  .wrap.grid>.c8{grid-column:span 8}.wrap.grid>.c7{grid-column:span 7}
  .wrap.grid>.c5{grid-column:span 5}.wrap.grid>.c4{grid-column:span 4}
  .wrap.grid>.c6{grid-column:span 6}
  .wrap.grid>.keyrow.c4{grid-template-columns:1fr 1fr;align-self:stretch}
  .wrap.grid>.keyrow.c4 .v{font-size:19px}
}
.wrap.grid .keyrow{margin-top:0}
.wrap.grid .panel .tblwrap>table{max-width:none}
.keyrow a.kc{display:block;background:var(--surface);padding:12px 13px;text-decoration:none;color:inherit}
.keyrow a.kc:hover{background:var(--surface3)}
.keyrow a.kc:hover .lbl{color:var(--brass)}
a.chartlink{display:block;border-radius:6px;text-decoration:none}
a.chartlink:hover{background:var(--surface2)}
details.more>summary{cursor:pointer;font-size:12.5px;color:var(--text2);margin-top:10px}
details.more>summary:hover{color:var(--brass)}
.morebtn{display:block;width:100%;margin-top:10px;padding:9px;border:1px solid var(--line2);border-radius:8px;
  background:transparent;color:var(--text);font:600 13px/1.3 var(--ui);cursor:pointer}
.morebtn small{color:var(--text3);font-weight:400}
.morebtn:hover{border-color:var(--brass);color:var(--brass)}
.morebtn:disabled{opacity:.5;cursor:wait}
.panel tbody tr:hover td{background:var(--surface2)}
td a,td.tx a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--text3)}
td a:hover{color:var(--brass);border-bottom-color:var(--brass)}
/* khối chữ cho máy tìm kiếm: vẫn đọc được, nhưng lùi về sau các biểu đồ */
.panel.seo{background:transparent;border-style:dashed}
.panel.seo .prose{max-width:none}
.panel.seo .prose p,.panel.seo dd{font-size:13.5px;color:var(--text2)}
/* thanh trái chạy suốt chiều cao, gọn hơn, bỏ dòng mô tả */
@media (min-width:901px){
  .layout{align-items:stretch}
  .side{width:200px;flex:0 0 200px;height:100vh;align-self:flex-start}
  .navgrp a span{display:none}
}

/* trang khối ngoại toàn thị trường */
.kbar.kfixed{margin-bottom:8px}
a.kbtn{text-decoration:none;display:inline-flex;align-items:center}
.wrap.grid>.keyrow{grid-template-columns:repeat(3,1fr)}
@container (min-width:1100px){ .wrap.grid>.keyrow:not(.c4){grid-template-columns:repeat(6,1fr)} }
.tcard.indlist{background:transparent;border:none;padding:0;max-width:none}
.tcard.indlist .brow{grid-template-columns:minmax(0,210px) 1fr 96px}
.tcard.indlist .bsym{font-family:inherit;font-weight:500;font-size:13px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tcard.indlist .indgap{text-align:center;color:var(--text3);font-size:12px;padding:2px 0}
.tcard.indlist{--t-up:#14B8A6;--t-down:#E5484D;--t-up0:#0d7d70;--t-down0:#a12f33;--t-up-t:#2DD4BF;--t-down-t:#FF8585}
/* tự doanh: màu thanh khác khối ngoại CHỦ Ý — thứ duy nhất phân biệt hai nguồn khi chụp ảnh */
.rank2.td{--t-up:#2BD07C;--t-down:#FF515B;--t-up0:#15804a;--t-down0:#a8323a;--t-up-t:#4ADE80;--t-down-t:#FF8A8A}
.panel.flip{border-color:var(--brass)}

/* ---------- bấm tiêu đề cột để sắp xếp (ui.SORT_JS) ---------- */
th.srt{cursor:pointer;user-select:none}
th.srt:hover{color:var(--text)}
th.srt::after{content:"↕";margin-left:4px;opacity:.35;font-size:10px}
th.srt[aria-sort=ascending]::after{content:"▲";opacity:1;color:var(--brass)}
th.srt[aria-sort=descending]::after{content:"▼";opacity:1;color:var(--brass)}
th.srt[aria-sort]{color:var(--text)}
/* biểu đồ đường: mỗi phiên một dải dọc bấm được */
.svgchart a.hit rect{fill:transparent;cursor:pointer}
.svgchart a.hit:hover rect{fill:rgba(201,162,39,.18)}
/* Điện thoại: biểu đồ vẽ trên khung 760 đơn vị rồi co về ~340px, chữ 10 đơn vị còn ~4px —
   không đọc được. Phóng chữ trong hệ toạ độ của biểu đồ (CSS thắng thuộc tính font-size của
   SVG); nhãn trục phải có thể tràn nhẹ ra lề khối nên cho overflow hiện. */
@media (max-width:640px){
  .svgchart{overflow:visible}
  .svgchart text{font-size:19px}
}

/* lưu trữ công bố theo tháng: mỗi năm một dòng */
.yarch{display:flex;flex-direction:column;gap:6px}
.yrow{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--line);padding-top:6px}
.yrow:first-child{border-top:0;padding-top:0}
.yrow b{font-family:var(--mono);font-size:13px;min-width:44px}
.yrow .chips{display:flex;flex-wrap:wrap;gap:4px}

/* ---------- diễn biến từng phiên, so kỳ liền trước (pages._session_zone) ----------
   Màu hình vẽ gắn qua lớp + biến màu, KHÔNG ghi cứng trong SVG: bài báo chụp các khối này
   ở giao diện sáng bằng cách đè biến lúc chụp (Viet bai/tools/infographic/chup_data.py). */
.kzone{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@container (max-width:900px){ .duo{grid-template-columns:1fr} }
.duo>.kcell{min-width:0}
.kcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.kcell{display:flex;flex-direction:column;gap:7px;min-width:0}
.kcell.knarrow{max-width:900px}
.kcell.kchart{max-width:640px}      /* biểu đồ một mình một hàng: hẹp lại để ảnh tải về chữ đủ to */     /* bảng ít cột: trải hết bề ngang thì thưa, ảnh tải về rộng quá */
.kunit{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--text2);margin:0 0 10px}
.pnote{font-size:12px;line-height:1.55;color:var(--text2);margin:0;padding:0 2px}
.svgchart .k-grid{stroke:var(--line);stroke-width:1}
.svgchart .k-split{stroke:var(--line2);stroke-width:1.5;stroke-dasharray:3 3}
.svgchart .k-cur{fill:var(--brass);fill-opacity:.16}
.svgchart .k-zero{stroke:var(--text3);stroke-width:1}
.svgchart .k-ax{fill:var(--text3);font:10px var(--mono)}
.svgchart .k-hd{fill:var(--text);font:600 11.5px var(--ui)}
.svgchart .k-hd.old{fill:var(--text3);font-weight:500}
.svgchart .k-val{fill:var(--text);font:10px var(--mono)}
.svgchart .k-val.old{fill:var(--text3)}
.svgchart .k-last{fill:var(--text);font:600 11px var(--mono)}
.svgchart .k-up line{stroke:var(--up);stroke-width:1.3} .svgchart .k-up rect{fill:var(--up)}
.svgchart .k-dn line{stroke:var(--down);stroke-width:1.3} .svgchart .k-dn rect{fill:var(--down)}
.svgchart .k-acc rect{fill:var(--brass)}
.svgchart .k-old{opacity:.35}
.svgchart a:hover g{opacity:.8}
.xduo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@container (max-width:900px){ .xduo{grid-template-columns:1fr} }
.xcol h3{font-size:13px;margin:0 0 8px;color:var(--text2)}
.xtab{width:100%}
.xtab td.main{font-weight:600;color:var(--text)}
.xtab tr.grp td{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.02em;background:var(--surface2);padding-top:6px;padding-bottom:6px}
.xtab tr.grp.pos td{color:var(--up-t)} .xtab tr.grp.neg td{color:var(--down-t)}

/* tín hiệu kỹ thuật: danh sách tín hiệu cộng/trừ điểm */
.siglist{margin:6px 0 8px;padding-left:18px;font-size:13px;line-height:1.6}
.siglist li.up b{color:var(--up-t)} .siglist li.down b{color:var(--down-t)}

/* biểu đồ nến kiểu TradingView (tvchart.js) */
.tvwrap{display:flex;flex-direction:column;gap:6px}
.tvbar{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.tvbar button{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:5px;
  color:var(--text3);background:transparent;border:1px solid var(--line);cursor:pointer}
.tvbar button[aria-pressed=true]{background:var(--surface3);color:var(--text);border-color:var(--line2)}
.tvbar button i{display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle}
.tvbar .tvsep{width:10px}
.tvhost{position:relative;height:380px}
@media (max-width:640px){ .tvhost{height:300px} }
.tvlegend{position:absolute;left:6px;top:4px;z-index:3;font-family:var(--mono);font-size:11px;
  color:var(--text2);pointer-events:none;background:rgba(9,13,20,.6);padding:2px 5px;border-radius:4px}
.tvlegend b{color:var(--text)}
.keyrow small{font-size:11px;color:var(--text3);margin-left:4px}

/* biểu đồ đua người giàu (race.js) — không JS thì là danh sách thanh bình thường */
.race .rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.race .rdate{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--brass)}
.race .rctl{display:none;gap:10px;align-items:center;flex:1;justify-content:flex-end}
.race.ready .rctl{display:flex}
.race .rctl input{flex:1;max-width:360px}
.race .rplay{font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid var(--line2);
  background:var(--surface3);color:var(--text);cursor:pointer}
.rbars{list-style:none;margin:0;padding:0;position:relative}
.rbars li{position:relative;height:26px;margin-bottom:4px;display:flex;align-items:center;gap:8px;
  font-size:12.5px;padding:0 8px;overflow:hidden;border-radius:4px}
.rbars .rfill{position:absolute;left:0;top:0;bottom:0;background:var(--brass-deep);opacity:.55;
  border-radius:4px;transition:width .4s linear;z-index:0}
.rbars li > a,.rbars li > span:not(.rfill){position:relative;z-index:1;white-space:nowrap}
.rbars li > a{color:var(--text);font-weight:600;text-decoration:none}
.rbars .rsym{font-family:var(--mono);font-size:11px;color:var(--text2)}
.rbars .rv{margin-left:auto;font-family:var(--mono)}
.rbars.live li{position:absolute;left:0;right:0;margin:0;transition:transform .4s linear,opacity .4s}
.race .rhead{flex-wrap:wrap}
.race .rdate{white-space:nowrap}
@media (max-width:640px){ .race .rdate{font-size:20px} .rbars li{font-size:11.5px} }

/* ---------- trang chủ /data kiểu bảng điều khiển (pages.home) ---------- */
.hkpis{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:700px){ .hkpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (min-width:1100px){ .hkpis{grid-template-columns:repeat(6,minmax(0,1fr))} }
.hk{display:flex;flex-direction:column;gap:3px;padding:11px 13px;background:var(--surface);
  border:1px solid var(--line2);border-radius:10px;text-decoration:none;min-width:0}
.hk:hover{border-color:var(--brass)}
.hk .l{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.hk .v{font-size:21px;font-weight:600}.hk .s{font-size:11.5px;color:var(--text3)}
.rtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.rtab{font-size:11.5px;padding:4px 10px;border-radius:14px;border:1px solid var(--line2);
  background:transparent;color:var(--text3);cursor:pointer}
.rtab[aria-pressed=true]{background:var(--surface3);color:var(--text);border-color:var(--brass)}
.rbig{display:block;font-size:24px;font-weight:800;line-height:1.25;margin:2px 0 10px;
  color:var(--text);text-decoration:none}
.rbig:hover{color:var(--brass)}
@media (max-width:640px){ .rbig{font-size:18px} }
.rank.rankw li{grid-template-columns:minmax(90px,170px) 1fr auto}
/* Ô "Được quan tâm nhất" (pages.home_tracuu), cột c4: mã là chữ trần, màu chữ cam đậm dần lên hạng 1 qua --k */
.panel.tcs{padding:12px 14px}
.tct{display:flex;align-items:center;gap:6px;margin:0 0 9px;font-size:14px;font-weight:700;white-space:nowrap}
.tct svg{width:15px;height:15px;color:#F0712C}
.tct small{font-size:12px;font-weight:500;color:var(--text3);margin-left:2px}
.tcl{display:flex;justify-content:space-between;gap:8px;margin:0;padding:0;list-style:none}
.tcl a{display:flex;align-items:baseline;gap:4px;text-decoration:none;font-size:15px;font-weight:700;
  color:color-mix(in srgb,#F0712C var(--k),var(--text2))}
.tcl .t1 a{font-weight:800}
.tcl a:hover{text-decoration:underline}
.tct a{display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.tct a:hover{color:var(--brass)}
.tcl small{font-size:11px;font-weight:500;color:var(--text3);margin-left:1px}
/* "Lên báo nhiều nhất" (pages.home_lenbao): cùng khuôn, màu xanh */
.lb .tct svg{color:#4F9BEA}
.lb .tcl a{color:color-mix(in srgb,#4F9BEA var(--k),var(--text2))}
@media (max-width:420px){.tcl{gap:2px}.tcl a{font-size:13px;gap:2px}.tcl small{font-size:9.5px}}
.rank.rankw .tk{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.breadth{display:flex;text-decoration:none}
.hmap{position:relative;height:560px;border-radius:8px;overflow:hidden;container-type:size}
@media (max-width:640px){ .hmap{height:420px} }
/* Font follows the cell's real pixel size (--w/--h are % of the map), so phones don't overflow */
.hmap a{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;border:1px solid var(--bg);color:#fff;text-decoration:none;text-align:center;line-height:1.15;
  container-type:size;
  font-size:max(6px,min(22px,calc(var(--w) * 1cqw / 3.6),calc(var(--h) * 1cqh / 3.2)))}
@container (max-width:30px) or (max-height:30px){ .hmap a span{display:none} }
.hmap a b{font-family:var(--mono);font-weight:600}
.hmap a span{font-family:var(--mono);font-size:.75em;opacity:.9}
.hmap a:hover{outline:2px solid var(--brass);z-index:2}
.itiles{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:700px){ .itiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (min-width:1100px){ .itiles{grid-template-columns:repeat(6,minmax(0,1fr))} }
.itile{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:7px;color:var(--text);
  text-decoration:none;min-width:0}
.itile b{font-size:12px;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.itile span{font-size:15px}.itile small{font-size:10.5px;opacity:.75}
.itile:hover{outline:1px solid var(--brass)}
/* mã dài (FUEVFVND, ETF) không được tràn cột mã trong khối xếp hạng */
.rank li{grid-template-columns:62px 1fr auto}
.rank .tk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.newtag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;background:var(--brass);color:#141000;vertical-align:2px}
@container (min-width:900px){ .panel ul.bullets{columns:2;column-gap:28px} }

/* --- so trong phien tren trang chu + dai chi so --------------------------- */
.tickerbar.live{border-left:3px solid var(--brass)}
.tickerbar .tklive{display:flex;align-items:center;gap:6px;padding:8px 14px;flex:0 0 auto;
  font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text2);white-space:nowrap}
.tickerbar .tklive .ldot{width:7px;height:7px;border-radius:50%;background:var(--brass);
  animation:lpulse 1.6s ease-in-out infinite}
.klive{display:flex;flex-direction:column;gap:10px}
.hlive{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--text2)}
.hlive .ldot{width:8px;height:8px;border-radius:50%;background:var(--brass);
  animation:lpulse 1.6s ease-in-out infinite}
.hlive a{margin-left:auto;color:var(--brass);font-weight:600}
.hk .b{font-size:11px;color:var(--text3)}
@media (prefers-reduced-motion:reduce){.hlive .ldot,.tickerbar .tklive .ldot{animation:none}}
.stamp.live{display:flex;align-items:center;gap:6px;color:var(--text2)}
.stamp.live .ldot{width:7px;height:7px;border-radius:50%;background:var(--brass);animation:lpulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.stamp.live .ldot{animation:none}}
/* man hinh hep: o ngay tren thanh dau da noi "Dang giao dich" roi */
@media (max-width:640px){ .tickerbar .tklive{display:none} }
/* --- so trong phien cua trang ma --------------------------------------- */
.pricebox .plive{font-size:11px;color:var(--text3);margin-top:3px;white-space:nowrap}
.lgrid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1px;background:var(--line);
  border-radius:var(--r);overflow:hidden}
@container (min-width:560px){ .lgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.lgrid .lrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:var(--surface2);padding:8px 12px;font-size:13px}
.lgrid .lrow .lbl{color:var(--text3);font-size:11.5px}

/* ---------- gợi ý mã khi gõ (static/goiy.js) ---------- */
.searchbox{position:relative}
.gy{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;z-index:60;
  margin:0;padding:4px;list-style:none;background:var(--surface2);border:1px solid var(--line2);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.55);max-height:min(60vh,380px);overflow-y:auto}
.gy[hidden]{display:none}
.gy a{display:grid;grid-template-columns:4.6em minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:8px 10px;border-radius:7px;text-decoration:none;color:var(--text)}
.gy b{font-family:var(--mono);font-weight:600;color:var(--brass);letter-spacing:.03em}
.gy span{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gy i{font-style:normal;font-size:11px;color:var(--text3)}
.gy a:hover,.gy [aria-selected="true"] a{background:var(--surface3)}
@media (max-width:900px){ .gy{min-width:0} }

/* Tin tức /data/tin-tuc (tintuc.py) */
.wrap.grid>.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.wrap.grid>.stack>.panel{margin:0}
.dhead{font-size:12px;font-weight:600;color:var(--brass);text-transform:uppercase;
  letter-spacing:.04em;margin:14px 0 2px}
.dhead:first-of-type{margin-top:4px}
.dlist .ditem a{display:inline;padding:0;border:0;grid-template-columns:none}
.dlist .ditem a.ti{display:block;color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.45}
.dlist .ditem a.ti:visited{color:var(--text2)}
.dlist .ditem a.ti:hover{color:var(--brass)}
.dlist .ditem .src a{color:var(--text3);text-decoration:none}
.dlist .ditem .src a:hover{color:var(--brass)}
.dlist .ditem .src a.nsym{font-family:var(--mono);font-weight:600;color:var(--brass);
  margin-left:8px}
ol.trend{margin:0;padding-left:22px;font-size:13px;line-height:1.9}
ol.trend a{color:var(--text);text-decoration:none}
ol.trend a:hover{color:var(--brass)}
ol.trend small{color:var(--text3);font-family:var(--mono);font-size:11px}
/* Tin tức bản mới: Tiêu điểm + dòng tin (.nr) + cột phải (.nhot/.ntr/.nsrc) */
.nhead{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nstamp{margin:0;color:var(--text3);font-size:13px}
.nstamp b{color:var(--up-t);font-weight:600}
.nstrip{display:none}
.ftop{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px}
.nt{position:relative;display:block;aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:var(--surface3)}
.nt b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:var(--text3);font-weight:700}
.nt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nt.big{aspect-ratio:16/9;border-radius:8px}
.nt.big b{font-size:40px}
.fbig h2{font-size:21px;line-height:1.32;font-weight:800;letter-spacing:-.01em;margin:14px 0 8px}
.fbig h2 a,.fs a.ti,.nr a.ti{color:var(--text);text-decoration:none}
.fbig h2 a:hover,.fs a.ti:hover,.nr a.ti:hover{color:var(--brass)}
.fbig p{color:var(--text2);font-size:14.5px;line-height:1.6;margin:0 0 10px;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fs{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.fs:first-child{border-top:0;padding-top:0}
.fs a.ti{display:block;font-size:15px;font-weight:600;line-height:1.4;margin-bottom:6px}
.nm{font-size:12.5px;color:var(--text3);display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap}
.nm .s{color:var(--text2);text-decoration:none}
.nm a.s:hover{color:var(--brass)}
.nm time{font-variant-numeric:tabular-nums}
.nm a.nsym{font-size:11.5px;font-weight:700;color:var(--brass);border:1px solid rgba(201,162,39,.35);
  border-radius:4px;padding:0 5px;text-decoration:none;line-height:18px}
.nm a.nsym:hover{background:var(--brass);color:#111}
.nalso{font-size:12px;color:var(--text3);margin-top:5px}
.nalso a{color:var(--text3)}
.nalso a:hover{color:var(--brass)}
.dhead2{position:sticky;top:0;z-index:1;background:var(--surface);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass);padding:10px 0 8px;margin:0;border-bottom:1px solid var(--line2)}
.nlist2{display:flex;flex-direction:column}
.nr{display:grid;grid-template-columns:46px minmax(0,1fr) 210px;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.nr:last-child{border-bottom:0}
.nr>time{font-size:13px;color:var(--text3);font-variant-numeric:tabular-nums;padding-top:2px;line-height:1.3}
.nr>time small{display:block;font-size:11px}
.nr a.ti{display:block;font-size:15px;font-weight:600;line-height:1.45;margin-bottom:5px}
.nr a.ti:visited,.fs a.ti:visited{color:var(--text2)}
.nr .nl{margin:0 0 6px;color:var(--text2);font-size:13.5px;line-height:1.55;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nr .nt{border-radius:6px}
.nhot{list-style:none;margin:0;padding:0}
.nhot li{display:grid;grid-template-columns:18px 46px minmax(0,1fr) 26px;gap:10px;align-items:center;padding:6px 0;font-size:13.5px}
.nhot .r{color:var(--text3);font-size:12px}
.nhot a{font-weight:700;color:var(--text);text-decoration:none}
.nhot a:hover{color:var(--brass)}
.nhot .bar{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden}
.nhot .bar i{display:block;height:100%;background:var(--brass);border-radius:3px}
.nhot .n{text-align:right;color:var(--text2);font-variant-numeric:tabular-nums}
.ntr{list-style:none;margin:0;padding:0;counter-reset:t}
.ntr li{counter-increment:t;display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.ntr li:first-child{border-top:0}
.ntr li:before{content:counter(t);color:var(--text3);min-width:14px;font-size:12px}
.ntr a{color:var(--text);text-decoration:none;flex:1}
.ntr a:hover{color:var(--brass)}
.ntr small{color:var(--text3);font-size:11px}
.nsrc{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.nsrc a{display:flex;justify-content:space-between;gap:6px;font-size:13px;color:var(--text2);text-decoration:none;
  padding:6px 0;border-bottom:1px dashed var(--line)}
.nsrc a:hover{color:var(--brass)}
.nsrc a b{font-weight:400;color:var(--text3);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .ftop{grid-template-columns:minmax(0,1fr)}
  .fbig h2{font-size:19px}
  .nr{grid-template-columns:38px minmax(0,1fr) 100px;gap:10px;padding:13px 0}
  .nr a.ti,.fs a.ti{font-size:14.5px}
  .nstrip{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;min-width:0}
  .nstrip::-webkit-scrollbar{display:none}
  .nstrip a{flex:none;font-size:13px;font-weight:700;color:var(--text);background:var(--surface2);
    border:1px solid var(--line2);border-radius:999px;padding:5px 11px;text-decoration:none}
  .nstrip a b{color:var(--brass);font-weight:600;margin-left:5px}
}

/* ---------- tab lớn trên đỉnh (ui.top_tabs) ---------- */
.toptabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--bg);
  border-bottom:1px solid var(--line2);padding:0 12px}
.toptabs::-webkit-scrollbar{display:none}
.toptabs a{flex:0 0 auto;padding:11px 16px 9px;font-size:13.5px;font-weight:600;color:var(--text2);
  text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.toptabs a:hover{color:var(--text)}
.toptabs a.on{color:var(--brass);border-bottom-color:var(--brass)}

/* ---------- thanh giá chạy ngang (ui.ticker) ---------- */
.tickerbar{overflow:hidden;align-items:stretch}
.tickerbar .tklive{flex:0 0 auto;z-index:1;background:var(--surface)}
.tickerbar .tkview{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tickerbar .tktrack{display:flex;width:max-content;animation:tkscroll var(--tkdur,60s) linear infinite}
.tickerbar .tkrun{display:flex}
.tickerbar:hover .tktrack,.tickerbar:focus-within .tktrack{animation-play-state:paused}
@keyframes tkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ô vừa đổi số: nháy nền xanh/đỏ (TICKER_JS) */
.tickerbar .tkc.tkfu{animation:tkfu 1.6s ease-out}
.tickerbar .tkc.tkfd{animation:tkfd 1.6s ease-out}
@keyframes tkfu{from{background:color-mix(in srgb,var(--up) 28%,transparent)}to{background:transparent}}
@keyframes tkfd{from{background:color-mix(in srgb,var(--down) 28%,transparent)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .tickerbar .tkview{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .tickerbar .tktrack{animation:none}
  .tickerbar .tkrun[aria-hidden]{display:none}
}

/* tiêu đề khối là liên kết (ui.panel href) + cả dòng xếp hạng bấm được */
.panel h2 a.ph{color:inherit;text-decoration:none}
.panel h2 a.ph i{font-style:normal;color:var(--text3);margin-left:2px}
.panel h2 a.ph:hover,.panel h2 a.ph:hover i{color:var(--brass)}
.rank a.track{display:block}
.rank a.vv{text-decoration:none}
.rank li:hover a.vv,.rank li:hover a.tk{color:var(--brass)}

/* biểu đồ TradingView hiện ngay: ẩn SVG dựng sẵn khi có JS, giữ chỗ đúng chiều cao (ui.shell) */
.tvjs .tvchart:not(.tvdone):not(.tvfail){min-height:424px;border-radius:8px;
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);
  background-size:200% 100%;animation:tvwait 1.4s linear infinite}
.tvjs .tvchart:not(.tvfail) .tvfallback{display:none}
@keyframes tvwait{from{background-position:100% 0}to{background-position:-100% 0}}
@media (max-width:640px){ .tvjs .tvchart:not(.tvdone):not(.tvfail){min-height:344px} }
@media (prefers-reduced-motion:reduce){ .tvjs .tvchart{animation:none} }

/* tin có ảnh đại diện (tintuc.py) — ảnh là đường dẫn trên báo gốc */
.nlist{display:flex;flex-direction:column}
.nitem{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.nitem:last-child{border-bottom:0}
.nitem .nth{position:relative;display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;
  background:var(--surface2);text-decoration:none}
.nitem .nth b{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;
  color:var(--text3);font-weight:600}
.nitem .nth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nitem .nbd{min-width:0;display:flex;flex-direction:column;gap:4px}
.nitem a.ti{color:var(--text);text-decoration:none;font-size:14px;line-height:1.45;font-weight:500}
.nitem a.ti:visited{color:var(--text2)}
.nitem a.ti:hover{color:var(--brass)}
.nitem .src{font-size:11.5px;color:var(--text3);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.nitem .src .dt{font-family:var(--mono)}
.nitem .src a{color:var(--text3);text-decoration:none}
.nitem .src a:hover{color:var(--brass)}
.nitem .src a.nsym{font-family:var(--mono);font-weight:600;color:var(--brass);margin-left:0}
@media (max-width:640px){ .nitem{grid-template-columns:88px 1fr;gap:10px} .nitem a.ti{font-size:13.5px} }

/* Bảng nhiều kỳ (báo cáo tài chính): cột chỉ tiêu đứng yên khi kéo ngang xem kỳ cũ. */
.tblwrap.sticky1 th:first-child,.tblwrap.sticky1 td:first-child{position:sticky;left:0;z-index:1;
  background:var(--surface);min-width:230px;max-width:320px;padding-right:12px;
  box-shadow:1px 0 0 var(--line2)}
.tblwrap.sticky1 td,.tblwrap.sticky1 th{white-space:nowrap}
.tblwrap.sticky1 td.tx{white-space:normal}
@media (max-width:640px){ .tblwrap.sticky1 th:first-child,.tblwrap.sticky1 td:first-child{min-width:150px} }
.fin-hint{font-size:12px;color:var(--text3);margin:0 0 8px}

/* Tô màu kiểu Excel: sinh bằng ui.heat_css(), đừng sửa tay */
td.h0{background:rgba(239,83,80,0.62)}
td.h1{background:rgba(239,83,80,0.546)}
td.h2{background:rgba(239,83,80,0.474)}
td.h3{background:rgba(239,83,80,0.404)}
td.h4{background:rgba(239,83,80,0.336)}
td.h5{background:rgba(239,83,80,0.27)}
td.h6{background:rgba(239,83,80,0.206)}
td.h7{background:rgba(239,83,80,0.146)}
td.h8{background:rgba(239,83,80,0.09)}
td.h9{background:rgba(239,83,80,0.039)}
td.h10{background:rgba(38,166,154,0.0)}
td.h11{background:rgba(38,166,154,0.039)}
td.h12{background:rgba(38,166,154,0.09)}
td.h13{background:rgba(38,166,154,0.146)}
td.h14{background:rgba(38,166,154,0.206)}
td.h15{background:rgba(38,166,154,0.27)}
td.h16{background:rgba(38,166,154,0.336)}
td.h17{background:rgba(38,166,154,0.404)}
td.h18{background:rgba(38,166,154,0.474)}
td.h19{background:rgba(38,166,154,0.546)}
td.h20{background:rgba(38,166,154,0.62)}

/* ---- lich su kien (/data/lich-su-kien) ---- */
.lsk-f input[type=text]{background:var(--surface2);border:1px solid var(--line2);color:var(--text);
  border-radius:8px;padding:5px 8px;width:84px;font-family:var(--mono);font-size:12px;text-transform:uppercase}
/* thanh lọc 8 ô: màn hình hẹp phải xuống dòng, không thì điện thoại thu nhỏ cả trang */
.lsk-f{flex-wrap:wrap}
.lsk-bar{display:flex;align-items:center;gap:12px;margin:2px 0 -4px}
.lsk-panel h2{font-size:17px}
table.lsk{width:100%;border-collapse:collapse;font-size:15px}
table.lsk td{vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;line-height:1.45}
table.lsk td.lsk-ngay{white-space:nowrap;width:52px;color:var(--text2);font-variant-numeric:tabular-nums}
table.lsk td.lsk-ma{white-space:nowrap;width:56px}
table.lsk td.lsk-san{width:62px;color:var(--text2)}
table.lsk td.lsk-loai{width:240px}
table.lsk td.lsk-ct{white-space:normal}
table.lsk tr.lsk-new td{border-top:2px solid var(--brass);padding-top:14px}
table.lsk tr.lsk-new td.lsk-ngay{color:var(--brass);font-weight:700}
table.lsk tr.lsk-huy td:not(.lsk-ma):not(.lsk-ngay){text-decoration:line-through;color:var(--text3)}
.lsk-src{margin-left:4px;color:var(--brass)!important;border:0!important;text-decoration:none}
.lsk-shooting .lsk-src{display:none}
.lsk-bar{flex-wrap:wrap}
#lich.lsk-editing{outline:2px dashed var(--brass);outline-offset:4px;cursor:text}
#lich.lsk-editing.lsk-shooting{outline:0}
#lich[contenteditable=true]:focus{outline:2px dashed var(--brass)}
@media (max-width:640px){table.lsk{font-size:14px}table.lsk td.lsk-loai{width:auto;white-space:normal}table.lsk .lsk-san{display:none}}

/* =====================================================================
   Menu ☰ trên màn hình hẹp (26-9-2026). Anh Quân: đầu trang trên điện thoại chiếm gần nửa
   màn hình (logo, ô tìm, tab lớn, dải chỉ số, 5 nhóm menu) → dưới 900px chỉ còn: dòng logo +
   ngày + ☰, dòng ô tìm, dải chỉ số. Tab lớn + thanh trái ẩn, bấm ☰ mới mở (ô #mnav đầu
   <body>, không cần JS). Máy tính (>900px) KHÔNG đổi gì — mọi quy tắc nằm trong @media.
   ===================================================================== */
/* danh sách tin/công bố: tít có chuỗi dài liền (tên file, mã văn bản) phải ngắt được, không thì
   cột chữ phình ra và điện thoại thu nhỏ cả trang (/data/cong-bo rộng 564px trên màn 390) */
.dlist a,.dlist .ditem{grid-template-columns:auto minmax(0,1fr)}
.dlist .ti,.dlist .src{overflow-wrap:anywhere}
/* nền cả khung: trang ngắn hơn màn hình thì phần dưới <body> không lộ màu mặc định */
html{background:var(--bg)}
.mnavbtn{display:none}
@media (max-width:900px){
  /* dải chỉ số lên ngay dưới thanh trên; menu mở ra nằm dưới dải chỉ số */
  body{display:flex;flex-direction:column}
  body>.appbar{order:-2}
  body>.tickerbar{order:-1}
  .appbar{padding-top:8px;padding-bottom:8px;row-gap:8px}
  .mnavbtn{order:2;display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:40px;height:36px;padding:0 9px;margin:0 -6px 0 auto;border-radius:8px;cursor:pointer;
    flex:none;-webkit-tap-highlight-color:transparent}
  .appbar .stamp~.mnavbtn{margin-left:4px}
  .mnavbtn:hover,.mnavbtn:focus-visible{background:var(--surface2)}
  .mnavbtn:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
  .mnavbtn i{display:block;height:2px;border-radius:2px;background:var(--text);
    transition:transform .18s,opacity .18s}
  #mnav:checked~.appbar .mnavbtn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #mnav:checked~.appbar .mnavbtn i:nth-child(2){opacity:0}
  #mnav:checked~.appbar .mnavbtn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .toptabs,.layout>.side{display:none}
  #mnav:checked~.toptabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;
    background:var(--surface);border-bottom:1px solid var(--line)}
  #mnav:checked~.toptabs a{padding:7px 12px;border:1px solid var(--line2);border-radius:999px;
    font-size:13px}
  #mnav:checked~.toptabs a.on{background:var(--surface3);border-color:var(--brass)}
  #mnav:checked~.layout>.side{display:block}
  .navgrp a span{display:none}
  .navgrp a{padding-top:10px;padding-bottom:10px}
  /* hàng tab trong trang mã vuốt ngang: mờ dần mép phải để biết còn mục phía sau */
  .secnav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
/* Trang chủ: "Tăng giảm mạnh nhất" 10 + 10 mã, hai cột cạnh nhau trong ô c4 */
.mv2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mv2 .rank li{grid-template-columns:38px 1fr 62px;gap:8px}
.mv2 .rank .vv{text-align:right;white-space:nowrap}
/* chọn sàn: trạng thái nằm trên <html data-mvx>, mặc định HOSE (khối tự làm mới thay nguyên khối) */
.mvp{display:none}
html:not([data-mvx]) .mvp[data-ex=hose],html[data-mvx=hose] .mvp[data-ex=hose],
html[data-mvx=hnx] .mvp[data-ex=hnx],html[data-mvx=upcom] .mvp[data-ex=upcom]{display:block}
html:not([data-mvx]) .mvt[data-ex=hose],html[data-mvx=hose] .mvt[data-ex=hose],
html[data-mvx=hnx] .mvt[data-ex=hnx],html[data-mvx=upcom] .mvt[data-ex=upcom]{
  background:var(--surface3);color:var(--text);border-color:var(--brass)}
/* Trang chủ: tiêu đề nhóm (Thống kê hôm nay / Diễn biến phiên) + đầu ô VN-Index trong phiên */
.wrap.grid>h2.grp{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:10px 0 -4px;
  padding-top:14px;border-top:1px solid var(--line)}
.vnih{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.vnih .v{font-size:26px;font-weight:700}

/* ---------- trang tổng /data: thị trường đang mở + luồng tin tự cập nhật (trangchu.py) ---------- */
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mkc{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface2);text-decoration:none;min-width:0}
a.mkc:hover{border-color:var(--brass)}
.mkc .n{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc .v{font-size:16px;font-weight:600;font-family:var(--mono)}
.mkc .p{font-size:12px;font-family:var(--mono)}
.feed .flive{display:inline-flex;align-items:center;gap:6px}
.feed .flive .ldot{width:7px;height:7px;border-radius:50%;background:var(--brass);
  animation:lpulse 1.6s ease-in-out infinite}
.flist{list-style:none;margin:0;padding:0}
.flist .fi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.flist .fi:last-child{border-bottom:0}
.flist .ft{font-family:var(--mono);font-size:11.5px;color:var(--text3);padding-top:2px;white-space:nowrap}
.flist .ti{display:block;color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.45;
  overflow-wrap:anywhere}
.flist .ti:visited{color:var(--text2)}
.flist .ti:hover{color:var(--brass)}
.flist .fs{display:block;font-size:11.5px;color:var(--text3);margin-top:2px}
.flist .fs a{color:var(--text3);text-decoration:none}
.flist .fs a:hover{color:var(--brass)}
.flist .fs a.nsym{font-family:var(--mono);font-weight:600;color:var(--brass)}
.flist .fi.fnew{animation:fnew 6s ease-out}
@keyframes fnew{0%{background:rgba(201,162,39,.28)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.feed .flive .ldot,.flist .fi.fnew{animation:none}}
@container (min-width:1100px){
  .feed .flist{max-height:360px;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
}
@media (max-width:640px){
  .mkgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mkc{padding:7px 8px}.mkc .n{font-size:11px}.mkc .v{font-size:14px}.mkc .p{font-size:11px}
}

/* Nút "Tải ảnh" (static/shot.js) — nằm ngoài ảnh chụp */
.shotbtn{font:600 11px/1 var(--mono);color:var(--text3);background:transparent;border:1px solid var(--line2);
  border-radius:6px;padding:4px 8px;cursor:pointer;white-space:nowrap;flex:none}
.shotbtn:hover{color:var(--brass);border-color:var(--brass)}
.shotbtn:disabled{opacity:.6;cursor:wait}
.panel>header .shotbtn{margin-left:auto;align-self:center}
.panel>header .when+.shotbtn{margin-left:8px}
.shotmenu{position:absolute;z-index:60;display:flex;gap:6px;padding:6px;background:var(--surface2);
  border:1px solid var(--line2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.shotmenu button{font:600 12px/1 var(--ui);border-radius:6px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.shotmenu .sang{background:#FFFFFF;color:#141A26;border:1px solid #CBD3DE}
.shotmenu .toi{background:var(--bg);color:var(--text);border:1px solid var(--line2)}
.shotmenu button:hover{border-color:var(--brass)}
.shotbar{display:flex;justify-content:flex-end;max-width:1040px;margin:-8px 0 0}
.shooting .tblwrap{overflow:visible!important}
.shooting .shotbtn,.shooting details.more,.shooting [data-html2canvas-ignore]{display:none!important}   /* ẩn hẳn, không chừa khoảng trắng đáy ảnh */
/* Ảnh "Tải ảnh": chữ bảng/bar xếp hạng to hơn trên web ~20% (anh Quân: chữ bé khi còn chỗ trống).
   Đặt lên khối thật lúc chụp (không ở onclone) vì chiều cao ảnh đo từ khối thật. */
.shooting table{font-size:15.5px}.shooting th{font-size:12px}
.shooting .tcard h2{font-size:15px}.shooting .tcard .cap{font-size:14px}
/* Thẻ bar chỉ ~360px (trang tự doanh): cột mã/số KHÔNG được nới, nới là thanh co còn nửa. */
.shooting .tcard .brow{grid-template-columns:60px 1fr 108px;gap:10px;padding:7px 0}   /* cột số CỐ ĐỊNH (auto thì thanh mỗi dòng dài khác nhau = sai tỉ lệ); 108 đủ "-2.037,4 tỉ" */
.shooting .tcard .bsym{font-size:15px}.shooting .tcard .bval{font-size:14.5px}
.shooting .tcard .btrack{height:12px}
.shooting .tcard.indlist .brow{grid-template-columns:minmax(0,260px) 1fr 118px}
/* Chữ trong biểu đồ SVG (đơn vị hệ toạ độ 760): ảnh vào bài IMS chỉ hiện ~640px, chữ 10 đơn vị
   còn ~5px. 15 đơn vị ≈ 12-13px trong bài. CSS thắng thuộc tính font-size của SVG. */
.shooting .svgchart{overflow:visible}
.shooting .svgchart text,.shooting .svgchart .k-ax,.shooting .svgchart .k-val{font-size:15px}
.shooting .svgchart .k-hd{font-size:17px}
/* nhãn số cột đang chọn: chữ to thì tràn sang nhãn trục bên phải → neo mép phải vào giữa cột */
.shooting .svgchart .k-last{font-size:16px;text-anchor:end}
/* Bấm "Tải ảnh" trên điện thoại: lưới 2 cột không được rơi về 1 cột (html2canvas giữ bố cục đang hiện) */
.rank2.shooting,.shooting .xduo{grid-template-columns:1fr 1fr!important}

/* Logo doanh nghiệp (ui.logo) — chỉ ở đầu trang mã; ảnh đã làm sẵn cho nền tối, không ô nền */
.symlg{display:flex;align-items:center;height:44px;max-width:150px;flex:none}
.symlg img{height:100%;width:auto;max-width:150px;object-fit:contain;display:block}
@container (max-width:520px){ .symlg{height:34px;max-width:110px} .symlg img{max-width:110px} }

/* Bảng lịch sử từng phiên (pages._hist_table / _pager): cột ngày hẹp, đứng yên khi kéo ngang. */
.tblwrap.sticky1.hist th:first-child,.tblwrap.sticky1.hist td:first-child{min-width:0;width:1%}
.tblwrap.sticky1.hist th{white-space:normal;min-width:64px;vertical-align:bottom}
.kpager{margin-top:12px}
.kpager a.kbtn{text-decoration:none}
.kpager .kbtn[aria-current=page]{background:var(--brass);border-color:var(--brass);color:#141005;font-weight:600}
.kpager .kgap{color:var(--text3);padding:0 2px}
/* Bảng báo cáo tài chính gốc theo kỳ (pages._reports_panel): mỗi ô một chồng liên kết tệp */
.bcg{display:flex;flex-direction:column;gap:3px;min-width:84px}
.bcg a{font-size:12.5px;white-space:nowrap;text-decoration:none;color:var(--text)}
.bcg a:hover{color:var(--brass)}
.panel h3.sub{font-size:13px;margin:16px 0 8px;color:var(--text2)}
.bcgrid tr>*:first-child{width:1%;white-space:nowrap;padding-right:14px}
/* Trang tổng /data cuối tuần/lễ: "Tổng hợp thị trường" (tonghop.py) — nút khung + nút sàn từng bảng nhỏ */
.thbox .thk>.rtabs{margin-bottom:6px}
.thbox .thk>.rtabs .rtab{font-size:13px;padding:5px 14px}
.thbox .thl{margin:2px 0 12px;font-size:12.5px}
.thbox .tht{font-size:14px;margin:14px 0 8px}
.thbox .tht a{color:var(--text);text-decoration:none}
.th2{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;margin-top:16px}
.thm h3{font-size:13.5px;margin:0 0 6px;font-weight:700}
.thm h3 a{color:var(--text);text-decoration:none}
.thm h3 a:hover,.thbox .tht a:hover{color:var(--brass)}
.thm h3 small{font-weight:400;font-size:11.5px}
.thm .rtabs{margin-bottom:8px}
.thm .rtab{font-size:11px;padding:2px 9px}
.th2 .rank{gap:7px}
.th2 .rank li{grid-template-columns:40px 1fr 78px;gap:8px}
.th2 .rank.rankw li{grid-template-columns:minmax(70px,120px) 1fr 70px}
.th2 .rank .vv{text-align:right;white-space:nowrap}
.th2 .rank .tk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thbox td b{white-space:nowrap}
@media (max-width:640px){ .th2{grid-template-columns:1fr} }

/* Kết quả kinh doanh theo quý (kqkd.py): dải mùa báo cáo, khối trang tổng, bảng thô 13 cột */
.kqstrip{background:var(--brass);color:#111;padding:7px 16px;font-size:14px;line-height:1.45}
.kqstrip a{color:#111;text-decoration:none}
.kqstrip a:hover{text-decoration:underline}
.kqstrip .up,.kqstrip .down{color:#111;font-weight:600}
.grid>.kqblock{grid-column:1/-1}
.kqhead{margin:0 0 8px;font-size:15px}
.kqbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:12px}
.kqbar i{display:block;height:100%;background:var(--brass)}
.kqchips{display:flex;flex-wrap:wrap;gap:8px}
.kqchip{display:inline-flex;gap:8px;align-items:baseline;padding:5px 10px;border:1px solid var(--line2);
  border-radius:8px;text-decoration:none;font-size:13px}
.kqchip:hover{border-color:var(--brass)}
.kqkd table{width:auto;min-width:100%;font-size:12.5px}
.kqkd th,.kqkd td{padding:6px 4px;white-space:nowrap}
.kqkd th.srt::after{margin-left:2px}
.kqkd thead tr+tr th{white-space:normal;line-height:1.3;vertical-align:bottom;width:1%;
  text-transform:none;letter-spacing:0;font-size:11.5px}
.kqkd th.grp{text-align:center;font-size:11px;letter-spacing:.06em;color:var(--brass);border-bottom:1px solid var(--line2)}
.kqkd th.grp i{text-transform:none;letter-spacing:0;font-style:normal;color:var(--text3)}
.kqkd .g0{border-left:1px solid var(--line2)}
.kqkd td sup{color:var(--text3);font-size:9px;margin-left:1px}
.kqkd td:first-child,.kqkd th:first-child{min-width:0!important;width:1%}
.kqkd .newtag{margin-left:5px;padding:1px 6px}
.fytag{margin-left:2px;font-weight:700;color:var(--brass);text-decoration:none;vertical-align:3px;font-size:12px}
.fytag:hover{color:var(--text)}
.kqkd td.bc{font-size:12px}
.kqkd td.bc .muted{font-size:11px}
.kqkd a.bcf{display:inline-block;padding:3px 8px;margin-right:4px;border:1px solid var(--line2);border-radius:6px;
  text-decoration:none;line-height:1.2}
.kqkd a.bcf:hover{border-color:var(--brass);color:var(--brass)}
.kqkd a.bcf.more{color:var(--text2)}

/* Ảnh chân dung trang người (pages.person_page, static/nguoi/<slug>.webp) — cạnh tên, không viền nền */
.phead{display:flex;align-items:center;gap:14px}
.phead .pava{width:84px;height:auto;max-height:112px;object-fit:cover;border-radius:10px;flex:none}
@container (max-width:520px){ .phead .pava{width:64px;max-height:86px} }
/* Bảng mã + 4 quý kết quả (pages._rows_table: trang ngành, /data/co-phieu) */
.kqm td.nm a{display:block;width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kqm td a{text-decoration:none}
.kqm tr.totrow th{background:var(--surface2);font-weight:700;font-size:12.5px;text-align:right;
  white-space:nowrap;vertical-align:top;border-bottom:1px solid var(--line2)}
.kqm tr.totrow th.lt{text-align:left}
.kqm .totn{display:block;font-weight:400;font-size:10.5px;color:var(--text3)}
@media (max-width:900px){.kqm td.nm a{width:110px}}
/* Bảng mã: nhóm cột chỉ số tài chính (pages._cs_wrap) — nút ghi nhóm vào data-g, nhóm khác ẩn */
.csw>.rtabs{margin:0 0 8px}
.csw .cg-dinh-gia,.csw .cg-sinh-loi,.csw .cg-suc-khoe,.csw .cg-ngan-hang{display:none}
.csw[data-g=dinh-gia] .cg-dinh-gia,.csw[data-g=sinh-loi] .cg-sinh-loi,.csw[data-g=suc-khoe] .cg-suc-khoe,
.csw[data-g=ngan-hang] .cg-ngan-hang{display:table-cell}
.csw:not([data-g=kqkd]) .cg-kqkd{display:none}
/* Mọi bảng: hàng tiêu đề đứng yên khi cuộn (anh Quân: bảng dài không biết số đang ở cột nào). Khung bảng cao tối đa
   ~1 màn hình và tự cuộn dọc — tiêu đề dính đỉnh KHUNG, vì khung đã cuộn ngang (overflow) thì không dính được vào
   cửa sổ. Bảng ngắn hơn màn hình không đổi gì. Ảnh "Tải ảnh" bỏ giới hạn cao để chụp đủ bảng. */
.tblwrap{max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow:auto}
.tblwrap>table>thead{position:sticky;top:0;z-index:3}
.tblwrap>table>thead th{background:var(--surface);box-shadow:inset 0 -1px 0 var(--line2)}
.shooting .tblwrap{max-height:none!important}