/* ===================== Bảng màu theo giao diện sáng / tối ===================== */

:root,
:root[data-theme="dark"] {
  --bg: #0d1421;
  --bg-elev: #111827;
  --panel: #171f2e;
  --line: #222d3d;
  --line-soft: #1b2434;
  --row-hover: #151d2b;
  --text: #eaecef;
  --text-2: #a9b6ca;
  --muted: #7f8da3;
  --na: #4b566b;
  --star-off: #3b475c;
  --topbar: rgba(13, 20, 33, .92);
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --panel: #f8fafd;
  --line: #e6ebf2;
  --line-soft: #eff2f6;
  --row-hover: #f7f9fc;
  --text: #0d1421;
  --text-2: #3f4a5c;
  --muted: #616e85;
  --na: #a1acc0;
  --star-off: #c2cbd9;
  --topbar: rgba(255, 255, 255, .93);
  --shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

:root {
  --up: #16c784;
  --down: #ea3943;
  --accent: #3861fb;
  --accent-soft: rgba(56, 97, 251, .12);
  --ceil: #b061f5;
  --flr: #00b8d9;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: background .18s, color .18s;
}

.wrap { max-width: 1560px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
a { color: inherit; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.na { color: var(--na); }

/* ============================== LIQUID GLASS ==============================
   Bật bằng nút ▢ trên thanh trên cùng (lưu trong localStorage). Chỉ chồng thêm
   lớp bề mặt, không đụng tới bố cục — tắt là về đúng giao diện phẳng cũ. */

:root[data-ui="glass"] {
  --glass-bg: rgba(255, 255, 255, .045);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .16);
  --glass-blur: 18px;
}
:root[data-ui="glass"][data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-line: rgba(15, 23, 42, .09);
  --glass-hi: rgba(255, 255, 255, .85);
}

/* nền có chiều sâu để lớp kính có cái mà làm mờ */
:root[data-ui="glass"] body::before {
  content: ''; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 12% 4%, rgba(56, 97, 251, .22), transparent 62%),
    radial-gradient(40vw 40vw at 88% 12%, rgba(22, 199, 132, .16), transparent 60%),
    radial-gradient(50vw 50vw at 50% 108%, rgba(123, 97, 255, .14), transparent 62%);
  filter: saturate(1.1);
}
:root[data-ui="glass"][data-theme="light"] body::before { opacity: .5; }

:root[data-ui="glass"] .topbar,
:root[data-ui="glass"] .stat,
:root[data-ui="glass"] .card,
:root[data-ui="glass"] .mini-card,
:root[data-ui="glass"] .table-scroll,
:root[data-ui="glass"] .search input,
:root[data-ui="glass"] .select,
:root[data-ui="glass"] .toast,
:root[data-ui="glass"] .chip-btn,
:root[data-ui="glass"] .icon-btn,
:root[data-ui="glass"] .pager button {
  background: var(--glass-bg);
  border-color: var(--glass-line);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

/* viền sáng mảnh ở mép trên — thứ tạo cảm giác "kính" */
:root[data-ui="glass"] .stat,
:root[data-ui="glass"] .card,
:root[data-ui="glass"] .mini-card,
:root[data-ui="glass"] .table-scroll {
  position: relative;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 28px rgba(0, 0, 0, .18);
}

:root[data-ui="glass"] thead th,
:root[data-ui="glass"] .mini-head {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
:root[data-ui="glass"] .sticky-1,
:root[data-ui="glass"] .sticky-2,
:root[data-ui="glass"] .sticky-3 { background: transparent; backdrop-filter: none; }
:root[data-ui="glass"] tbody tr:hover td { background: var(--glass-hi); }
:root[data-ui="glass"] tbody tr:hover .sticky-1,
:root[data-ui="glass"] tbody tr:hover .sticky-2,
:root[data-ui="glass"] tbody tr:hover .sticky-3 { background: var(--glass-hi); }
:root[data-ui="glass"] tbody td { border-bottom-color: var(--glass-line); }
:root[data-ui="glass"] .tab.active { box-shadow: inset 0 1px 0 var(--glass-hi); }
:root[data-ui="glass"] .brand-mark { box-shadow: 0 2px 10px rgba(56, 97, 251, .45); }

/* nét hơn: chữ mảnh mượt, viền 0.5px trên màn retina */
:root[data-ui="glass"] body { -webkit-font-smoothing: antialiased; }
@media (min-resolution: 2dppx) {
  :root[data-ui="glass"] .stat,
  :root[data-ui="glass"] .card,
  :root[data-ui="glass"] .mini-card,
  :root[data-ui="glass"] .table-scroll { border-width: .5px; }
}

/* ================================= topbar ================================= */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--topbar);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 16px; height: 54px; }

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, #3861fb, #16c784);
  font-weight: 800; font-size: 10.5px; color: #fff; letter-spacing: .2px;
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.2px; }

.ticker {
  flex: 1; min-width: 0;
  display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none;
  font-size: 12px; color: var(--muted);
}
.ticker::-webkit-scrollbar { display: none; }
.ticker b { color: var(--text); font-weight: 600; margin-right: 5px; }

.topbar-right { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
/* Chấm nhịp: thở nhẹ liên tục cho web có cảm giác đang sống, và bung một vòng
   tròn mỗi lần dữ liệu mới về. Chuyển vàng nếu dữ liệu bị cũ bất thường. */
.dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.dot.live { background: var(--up); animation: breathe 2.6s ease-in-out infinite; }
.dot.live.closed { background: #4d8dff; }
.dot.live.stale { background: #f0b90b; animation: none; }

.dot.live::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid currentColor; color: inherit; opacity: 0;
}
.dot.live.ping::after { animation: ping 1s ease-out 1; }

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 199, 132, .35); }
  50%      { box-shadow: 0 0 0 4px rgba(22, 199, 132, 0); }
}
@keyframes ping {
  0%   { opacity: .8; transform: scale(.7); }
  100% { opacity: 0;  transform: scale(2.4); }
}
@media (prefers-reduced-motion: reduce) {
  .dot.live, .dot.live.ping::after { animation: none; }
}

.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); cursor: pointer; padding: 0; transition: .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn .i-sun { display: none; }
.icon-btn .i-moon { display: block; }
:root[data-theme="light"] .icon-btn .i-sun { display: block; }
:root[data-theme="light"] .icon-btn .i-moon { display: none; }

/* ================================== hero ================================== */

.hero { padding: 16px 0 10px; }
.hero h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.sub { margin: 0; color: var(--muted); font-size: 13px; }
.sub strong { color: var(--text); font-weight: 600; }

/* ================================= stats ================================== */

.stats {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: 12px;
}
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 12px;
}
.stat .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.stat .v { font-size: 17px; font-weight: 700; margin-top: 2px; letter-spacing: -.3px; }
.stat .d { font-size: 11.5px; margin-top: 1px; }

/* ================================ toolbar ================================= */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: .12s;
}
.tab:hover { color: var(--text); background: var(--panel); }
.tab.active { color: var(--text); background: var(--accent-soft); border-color: rgba(56, 97, 251, .4); }

.toolbar-right { display: flex; gap: 10px; align-items: center; }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.search input {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 12px 8px 32px; width: 260px; font: inherit; font-size: 13px;
}
.search input:focus { outline: none; border-color: var(--accent); }
.select {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.select:focus { outline: none; border-color: var(--accent); }

/* ================================== bảng ================================== */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev);
}
/* không đặt min-width cứng: JS ẩn dần cột phụ cho vừa khung, min-width cứng
   sẽ chặn mất và làm bảng tràn khung ở màn tầm 1200px */
table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* `overflow-x: auto` biến khung bảng thành scroll container, nên header chỉ
   dính theo khung đó chứ không dính theo trang.
   - Bảng vừa khung (.fits): bỏ overflow, header dính theo TRANG ở 54px.
   - Bảng rộng hơn khung: cho khung tự cuộn cả dọc lẫn ngang, header dính theo
     KHUNG ở 0px. Nếu không làm vậy thì cuộn xuống là mất tiêu đề. */
.table-scroll.fits { overflow: visible; }
.table-scroll.fits thead th { top: 54px; }

.table-scroll:not(.fits) thead th { top: 0; }

thead th {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding: 9px 10px; text-align: right; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th.sorted { color: var(--text); }
thead th .arrow { opacity: .45; margin-left: 4px; font-size: 10px; }
thead th.sorted .arrow { opacity: 1; color: var(--accent); }

tbody td {
  padding: 7px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.35;
}
tbody tr:hover td { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: none; }

.col-star { text-align: center !important; width: 30px; }
.col-rank { text-align: center !important; width: 34px; }
.col-name { text-align: left !important; min-width: 230px; }
th.num, td.num { text-align: right; }

/* cột dính bên trái khi cuộn ngang */
.sticky-1, .sticky-2, .sticky-3 { position: sticky; z-index: 10; background: var(--bg-elev); }
thead .sticky-1, thead .sticky-2, thead .sticky-3 { z-index: 30; }
.sticky-1 { left: 0; }
.sticky-2 { left: 30px; }
.sticky-3 { left: 64px; box-shadow: 6px 0 12px -10px rgba(0, 0, 0, .5); }
tbody tr:hover .sticky-1,
tbody tr:hover .sticky-2,
tbody tr:hover .sticky-3 { background: var(--row-hover); }

.star { cursor: pointer; color: var(--star-off); font-size: 15px; line-height: 1; transition: .12s; }
.star:hover { color: #f0b90b; transform: scale(1.15); }
.star.on { color: #f0b90b; }

.name-cell { display: flex; align-items: center; gap: 9px; width: 100%; }
.name-line { text-decoration: none; color: inherit; }
.name-line:hover .sym { color: var(--accent); }
.industry-link { text-decoration: none; }
.industry-link:hover { color: var(--accent); text-decoration: underline; }
.logo {
  position: relative; overflow: hidden;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
}
/* Logo doanh nghiệp thường là ảnh chữ nhật -> contain để không bị cắt chữ */
.logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; padding: 1.5px;
}
.name-main { display: flex; flex-direction: column; gap: 0; min-width: 0; align-items: flex-start; flex: 1; }
/* badge sàn đẩy hẳn sang phải để mọi dòng thẳng thành một cột */
.name-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; width: 100%; }
.name-line .badge { margin-left: auto; min-width: 54px; text-align: center; }
.industry { display: block; }
.sym { font-weight: 700; letter-spacing: .2px; }
.cname {
  color: var(--text-2); font-size: 12px;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.industry {
  color: var(--muted); font-size: 11px; line-height: 1.3;
  max-width: 265px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line);
  color: var(--muted); flex: none;
}
.badge.HOSE { color: #4d8dff; border-color: rgba(77, 141, 255, .35); }
.badge.HNX { color: #16c784; border-color: rgba(22, 199, 132, .35); }
.badge.UPCOM { color: #cc8f00; border-color: rgba(240, 185, 11, .45); }

.price-cell { font-weight: 600; }
.sub-cell { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
/* trên màn hẹp, ô giá gánh luôn % 24h (xem media query cuối file) */
.chg-pct { display: none; }

.flash-up { animation: flashUp .9s ease-out; }
.flash-down { animation: flashDown .9s ease-out; }
@keyframes flashUp { 0% { background: rgba(22, 199, 132, .22); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(234, 57, 67, .22); } 100% { background: transparent; } }

.spark { display: block; margin-left: auto; }
.chart-head { width: 130px; }
.empty { padding: 44px; text-align: center; color: var(--muted); }

/* ================================= phân trang ============================== */

.pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 0; flex-wrap: wrap;
}
.pager button {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.pager button:hover:not(:disabled) { border-color: var(--accent); }
.pager button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .info { color: var(--muted); font-size: 12.5px; margin-right: 10px; }

.clear-filter {
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; margin-left: 8px;
  vertical-align: middle; white-space: nowrap;
}
.clear-filter:hover { color: var(--text); border-color: var(--accent); }

.made-by {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px;
  text-align: center; color: var(--muted); font-size: 12.5px;
}
.made-by b { color: var(--text); font-weight: 600; }

/* thanh hiển thị các tiêu chí sắp xếp đang áp dụng */
.sort-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12.5px;
}
/* display:flex thắng [hidden] của trình duyệt nên phải khai báo lại */
.sort-bar[hidden] { display: none; }
#sort-list { font-weight: 600; }
.sort-note { font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); }
.sort-note::before { content: '('; }
.sort-note::after { content: ')'; }
.sort-note.warn { color: #f0b90b; }
.chip-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.chip-btn:hover { color: var(--text); border-color: var(--accent); }
.sort-order {
  font-size: 8.5px; font-weight: 700; margin-left: 1px;
  color: var(--accent); vertical-align: super;
}
.hint { white-space: nowrap; cursor: help; }

/* đồng hồ ở thanh trên cùng: giờ trên, ngày dưới */
#updated {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; gap: 1px;
}
#updated b {
  color: var(--text); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.upd-date { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }

.footer { padding: 8px 0 40px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.footer strong { color: var(--text-2); font-weight: 600; }
.footer p { margin: 0 0 8px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 60;
  box-shadow: var(--shadow);
}

/* ========================= TRANG CHI TIẾT MỘT MÃ ========================== */

.crumbs { padding: 14px 0 10px; font-size: 12.5px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }

.card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.card h2 {
  margin: 0 0 12px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.stock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stock-head .logo { width: 44px; height: 44px; font-size: 13px; }
.stock-title { min-width: 0; }
.stock-title .row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stock-title h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.stock-title .cn { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.stock-title .ind { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.5; }
.stock-title .ind a { color: var(--muted); text-decoration: none; }
.stock-title .ind a:hover { color: var(--accent); text-decoration: underline; }
.stock-title .ind .sep { opacity: .5; }

.big-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.big-price .p { font-size: 30px; font-weight: 700; letter-spacing: -.8px; }
.big-price .c { font-size: 14px; font-weight: 600; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.chip {
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
  font-size: 11.5px; color: var(--muted); background: var(--panel);
}
.chip b { font-weight: 600; margin-left: 4px; }
.chip.ceil b { color: var(--ceil); }
.chip.flr b { color: var(--flr); }
.chip.ref b { color: #f0b90b; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.kv + .kv { border-top: 1px solid var(--line-soft); }
.kv .k { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.kv .v { font-weight: 600; text-align: right; }

.range { margin-top: 10px; }
.range-bar {
  position: relative; height: 5px; border-radius: 3px; margin: 7px 0 5px;
  background: linear-gradient(90deg, var(--down), #f0b90b, var(--up));
  opacity: .75;
}
.range-dot {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--bg-elev); transform: translate(-50%, -50%);
}
.range-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

/* biểu đồ */
.chart-card { padding: 12px 14px; }
.chart-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.seg { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: #fff; }
.chart-wrap { position: relative; width: 100%; height: 420px; }
.chart-wrap canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; font-size: 11.5px; line-height: 1.6; box-shadow: var(--shadow);
  white-space: nowrap; opacity: 0; transition: opacity .1s;
}
.chart-tip.on { opacity: 1; }
.chart-tip b { font-weight: 600; }
.chart-empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 13px; }
.chart-hint { margin: 8px 0 0; font-size: 11.5px; }

/* hiệu suất */
.perf-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.perf-cell {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; text-align: center;
}
.perf-cell .k { color: var(--muted); font-size: 11px; }
.perf-cell .v { font-size: 14px; font-weight: 700; margin-top: 2px; }

/* sổ lệnh */
.book-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.tick-col h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.book-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 8px; border-radius: 6px; font-size: 12.5px; position: relative; overflow: hidden;
}
.book-row .fill { position: absolute; inset: 0 auto 0 0; opacity: .13; }
.book-row span { position: relative; }
.book-row .px { font-weight: 600; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.two-col-gap { gap: 0 14px; align-items: start; }

/* ============================= BẢNG GIÁ MINI ============================== */

.legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 11.5px; color: var(--text-2);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sw.up { background: var(--up); }
.sw.down { background: var(--down); }
.sw.ref { background: #f0b90b; }
.sw.ceil { background: var(--ceil); }
.sw.flr { background: var(--flr); }

.mini-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  margin-bottom: 18px;
}
.mini-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.mini-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.mini-name {
  font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-name:hover { color: var(--accent); }
.mini-meta { font-size: 10.5px; white-space: nowrap; flex: none; }

.mini-rows { display: flex; flex-direction: column; }
.mini-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 8px; align-items: baseline;
  padding: 5px 10px; text-decoration: none; color: var(--text);
  font-size: 12.5px; border-bottom: 1px solid var(--line-soft);
}
.mini-row:last-child { border-bottom: 0; }
.mini-row:hover { background: var(--row-hover); }
.m-sym { font-weight: 700; letter-spacing: .2px; }
.m-price { font-weight: 600; text-align: right; min-width: 46px; }
.m-pct { text-align: right; min-width: 46px; font-size: 11.5px; }
.m-vol { text-align: right; min-width: 44px; font-size: 11px; color: var(--muted); }

/* màu theo quy ước bảng giá VN */
.ceil { color: var(--ceil) !important; }
.flr { color: var(--flr) !important; }
.ref { color: #f0b90b !important; }

.mini-more {
  display: block; padding: 6px 10px; font-size: 11px; color: var(--muted);
  text-decoration: none; border-top: 1px solid var(--line-soft); text-align: center;
}
.mini-more:hover { color: var(--accent); }

.tab-link { text-decoration: none; display: inline-flex; align-items: center; }

/* sự kiện & tin tức */
.feed { max-height: 420px; overflow-y: auto; margin: -4px -4px 0; padding: 0 4px; }
.feed-item {
  display: block; text-decoration: none; color: inherit;
  padding: 9px 6px; border-bottom: 1px solid var(--line-soft); border-radius: 6px;
}
.feed-item:last-child { border-bottom: 0; }
a.feed-item:hover { background: var(--row-hover); }
a.feed-item:hover .feed-title { color: var(--accent); }
.feed-title { font-size: 13px; line-height: 1.45; font-weight: 500; }
.ev-ico { margin-right: 5px; }
.feed-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 4px; font-size: 11.5px; color: var(--muted);
}
.feed-meta b { color: var(--text-2); font-weight: 600; }
.ev-tag {
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
  font-size: 10.5px; color: var(--muted);
}

/* lệnh khớp realtime */
.h2-right { margin-left: auto; font-weight: 400; }
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.live-dot2 { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.live-pill.on { color: var(--up); border-color: rgba(22, 199, 132, .4); }
.live-pill.on .live-dot2 { background: var(--up); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.ticks { font-size: 12.5px; }
.tick-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr .7fr; gap: 8px;
  padding: 5px 4px; border-bottom: 1px solid var(--line-soft);
}
.tick-row span:not(:first-child) { text-align: right; }
.tick-row.head { color: var(--muted); font-size: 11.5px; border-bottom-color: var(--line); }
.tick-row:not(.head):first-of-type { animation: flashRow 1s ease-out; }
@keyframes flashRow { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

/* ================================ responsive ============================== */

/* Cột phụ trên desktop do JS tự ẩn dần cho tới khi bảng vừa khung (fitTable
   trong app.js) — đặt ngưỡng cứng bằng tay luôn hụt ở vài bề rộng, mà bảng
   tràn khung là hàng tiêu đề hết dính khi cuộn. */
.js-hidden { display: none !important; }
@media (max-width: 1000px) {
  .detail { grid-template-columns: 1fr; }
  .chart-wrap { height: 340px; }
}
@media (max-width: 900px) {
  /* dưới 900px là bố cục điện thoại, JS không can thiệp nên phải ẩn ở đây */
  .c-30d, .c-supply, .c-chart { display: none; }
  .ticker { display: none; }
  .wrap { padding: 0 12px; }
  .hero h1 { font-size: 17px; }
  .sub { font-size: 12px; }
  .search input { width: 160px; }
}

@media (max-width: 760px) {
  .c-1h, .c-star { display: none; }
  /* như CMC trên mobile: cuộn ngang, cột mã luôn dính bên trái */
  table { min-width: 0; }
  .table-scroll {
    border-left: 0; border-right: 0; border-radius: 0; margin: 0 -12px;
    -webkit-overflow-scrolling: touch;
  }
  .sticky-2 { left: 0; }
  .sticky-3 { left: 28px; }
  .col-rank { width: 28px; }
  .col-name { min-width: 0; }
  .cname { display: none; }
  .industry { max-width: 150px; }
  thead th, tbody td { padding: 7px 7px; font-size: 12.5px; }
  .logo { width: 24px; height: 24px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .toolbar { gap: 8px; }
  .toolbar-right { width: 100%; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .two-col { grid-template-columns: 1fr; }
  .big-price .p { font-size: 26px; }
  .stock-title h1 { font-size: 19px; }
  .chart-wrap { height: 300px; }
  .card { padding: 12px; }
}

@media (max-width: 560px) {
  /* chỉ còn #, Tên, Giá (kèm %24h), Vốn hoá -> vừa khít màn hình điện thoại */
  .c-7d, .c-24h, .c-vol { display: none; }
  .chg-abs { display: none; }
  .chg-pct { display: block; }
  .name-line .badge { display: none; }
  /* dòng "P/E · P/B" và tiêu đề cột dài mới là thứ chiếm chỗ trên màn hẹp */
  .c-mc .sub-cell { display: none; }
  .th-long { display: none; }
  .industry { max-width: 96px; }
  thead th, tbody td { padding: 7px 6px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .tab { padding: 6px 9px; font-size: 12.5px; }
  .book-wrap { grid-template-columns: 1fr; gap: 14px; }
  .book { grid-template-columns: 1fr 1fr; gap: 10px; }
  .perf-grid { grid-template-columns: 1fr 1fr; }
  .chart-wrap { height: 260px; }
  .industry { max-width: 110px; }
}