/* MarketVeo — lớp giao diện đặt trên design system "Modernist".
 *
 * Bộ gốc (`_ds/styles.css`) lo màu nền, chữ Archivo, bo góc 0, kẻ 2px. File này
 * chỉ thêm những gì một trang tài chính cần mà bộ gốc không có:
 *   - Màu TĂNG/GIẢM. Bộ gốc là bảng màu một sắc đỏ, nhưng bảng giá bắt buộc
 *     phải phân biệt được lên/xuống. Chọn xanh rêu trầm để không phá tông
 *     "báo in" của bộ gốc, và đỏ lấy thẳng từ `--color-accent` cho liền mạch.
 *   - Bảng số liệu dày đặc: chữ số phải thẳng cột nên dùng `tabular-nums`.
 *   - Dải ticker chạy ngang.
 */

:root {
  /* Màu lấy ĐÚNG từ file thiết kế gốc: #1d6b3f cho tăng, #ec3013 cho giảm,
     kèm các sắc phụ dùng cho huy hiệu nguồn tin và nhãn chuyên mục. */
  --len: #1d6b3f;            /* tăng */
  --len-sang: #57c98a;       /* tăng, bản sáng — dùng trên nền tối */
  --len-nen: #e4f4ea;
  --xanh: #2a53c9;           /* xanh dương */
  --tim: #6b3fd6;
  --mongket: #0f7f77;
  --cam: #c45500;
  --nauvang: #a86a00;
  --xuong: var(--color-accent);
  --xuong-nen: var(--color-accent-100);
  --vien: color-mix(in srgb, var(--color-text) 14%, transparent);
  --vien-dam: color-mix(in srgb, var(--color-text) 85%, transparent);
  --mo: var(--color-neutral-600);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Số liệu phải thẳng cột — nếu không, mắt không so được hàng trên với hàng dưới */
.so { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.len  { color: var(--len); }
.xuong{ color: var(--xuong); }
.o-len   { background: var(--len-nen);   color: var(--len);   padding: 2px 6px; font-weight: 700; }
.o-xuong { background: var(--xuong-nen); color: var(--xuong); padding: 2px 6px; font-weight: 700; }

.khung { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-6); }

/* ───────── Thanh trạng thái phiên ───────── */
.thanh-trang-thai {
  border-bottom: 1px solid var(--vien);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.thanh-trang-thai .khung {
  display: flex; align-items: center; gap: var(--space-4);
  height: 34px; overflow-x: auto; scrollbar-width: none;
}
.thanh-trang-thai .khung::-webkit-scrollbar { display: none; }
.cham { width: 7px; height: 7px; background: var(--color-accent); display: inline-block; }
.cham.mo { background: var(--color-neutral-400); }
.day { flex: 1; }
.nut-ngu {
  display: inline-flex; border: 1px solid var(--vien-dam);
}
.nut-ngu button {
  font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 9px; border: 0; background: none; color: var(--color-text);
  cursor: pointer;
}
.nut-ngu button.on { background: var(--color-text); color: var(--color-bg); }

/* ───────── Thanh điều hướng ───────── */
.dieu-huong { border-bottom: 2px solid var(--vien-dam); }
.dieu-huong .khung {
  display: flex; align-items: center; gap: var(--space-6); height: 66px;
}
.hieu {
  font-family: var(--font-heading); font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; text-decoration: none; color: var(--color-text);
  white-space: nowrap;
}
.hieu span {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  color: var(--mo); margin-left: 7px; vertical-align: 3px;
}
.menu { display: flex; gap: var(--space-4); flex: 1; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  color: var(--color-text); text-decoration: none; font-size: 14px;
  white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--color-accent-300); }
.menu a.on { border-bottom-color: var(--color-accent); font-weight: 700; }
.o-tim {
  border: 1px solid var(--vien-dam); padding: 8px 12px; font: inherit;
  font-size: 13px; background: var(--color-bg); width: 210px;
}
.o-tim:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ───────── Dải ticker chạy ngang ───────── */
.dai-ticker {
  background: var(--color-text); color: var(--color-bg);
  overflow: hidden; height: 34px; display: flex; align-items: center;
}
.dai-ticker .chay { display: flex; gap: 0; white-space: nowrap; animation: troi 70s linear infinite; }
.dai-ticker:hover .chay { animation-play-state: paused; }
@keyframes troi { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.o-ticker {
  display: inline-flex; gap: 8px; align-items: baseline;
  padding: 0 var(--space-4); border-right: 1px solid rgba(243,242,242,.2);
  font-size: 11.5px; letter-spacing: .03em;
}
.o-ticker b { font-weight: 800; text-transform: uppercase; }
.o-ticker .len { color: #5fd39b; }
.o-ticker .xuong { color: #ff8a72; }

/* ───────── Hàng chỉ số nổi bật ───────── */
.hang-hero {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 2px solid var(--vien-dam);
}
.o-hero {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-right: 1px solid var(--vien); position: relative;
}
.o-hero:last-child { border-right: 0; }
.o-hero .ten {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mo); margin-bottom: 5px;
}
.o-hero .gia {
  font-family: var(--font-heading); font-weight: 800; font-size: 27px;
  letter-spacing: -.02em; line-height: 1.05;
}
.o-hero .doi { font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.o-hero.dan-dau::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--color-accent);
}

/* ───────── Bảng số liệu ───────── */
.tieu-de-muc {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-6) 0 var(--space-3);
}
.tieu-de-muc h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  letter-spacing: -.02em; margin: 0;
}
.tieu-de-muc .phu { font-size: 11px; color: var(--mo); text-transform: uppercase; letter-spacing: .07em; }
.tieu-de-muc .day { flex: 1; }

table.bang { width: 100%; border-collapse: collapse; }
table.bang th {
  text-align: right; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mo); padding: 7px 10px;
  border-bottom: 2px solid var(--vien-dam); white-space: nowrap;
}
table.bang th:first-child, table.bang td:first-child { text-align: left; }
table.bang td {
  padding: 9px 10px; border-bottom: 1px solid var(--vien);
  text-align: right; white-space: nowrap;
}
table.bang tbody tr:hover { background: var(--color-neutral-100); }
table.bang .ma { font-weight: 700; }
table.bang .phu-ten { color: var(--mo); font-size: 12px; font-weight: 400; margin-left: 7px; }
.co {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--mo);
  border: 1px solid var(--vien); padding: 1px 4px; margin-right: 7px;
}

/* ───────── Lưới 4 cột dải giá ───────── */
.luoi-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--vien-dam); border-bottom: 2px solid var(--vien-dam);
}
.cot-gia { border-right: 1px solid var(--vien); padding: var(--space-4); }
.cot-gia:last-child { border-right: 0; }
.cot-gia h3 {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.dong-gia {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--vien); font-size: 13px;
}
.dong-gia:last-child { border-bottom: 0; }
.dong-gia .nhan { flex: 1; }
.dong-gia .val { font-weight: 700; }

/* ───────── Nhãn nguồn dữ liệu ───────── */
.nguon-du-lieu {
  font-size: 10.5px; color: var(--mo); padding: var(--space-3) 0 var(--space-6);
  border-top: 1px solid var(--vien); margin-top: var(--space-6);
  line-height: 1.6;
}
.nhan-ton {
  background: var(--color-accent-100); color: var(--color-accent-700);
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 5px; margin-left: 6px; text-transform: uppercase;
}

/* ───────── Màn hình nhỏ ───────── */
@media (max-width: 1100px) {
  .hang-hero { grid-template-columns: repeat(3, 1fr); }
  .o-hero:nth-child(3) { border-right: 0; }
  .luoi-4 { grid-template-columns: repeat(2, 1fr); }
  .cot-gia:nth-child(2) { border-right: 0; }
}
@media (max-width: 720px) {
  .khung { padding: 0 var(--space-4); }
  /* Nhóm nút lọc phải XUỐNG DÒNG trên màn hẹp.
     Tiếng Anh dài hơn tiếng Việt ("Most active" vs "KL lớn", "Agriculture" vs
     "Nông sản") nên hàng nút vượt 390px và kéo tràn cả trang — lỗi chỉ xuất
     hiện SAU khi đổi ngôn ngữ gốc sang tiếng Anh, không có ở bản tiếng Việt. */
  .tieu-de-muc { flex-wrap: wrap; }
  .tieu-de-muc .day { flex: 1 0 100%; height: 0; }
  .tieu-de-muc .nut-ngu { margin-top: var(--space-2); max-width: 100%; }
  /* Nút phải đủ CAO để bấm bằng ngón tay. Lần vá đầu em thu cả chiều cao lẫn
     cỡ chữ cho vừa bề ngang, kết quả là 8 nút chỉ còn 22–23px — hết tràn
     nhưng thành khó bấm. Giờ chỉ bóp chiều NGANG (padding trái/phải, cỡ chữ),
     còn chiều CAO giữ tối thiểu 30px. */
  .tieu-de-muc .nut-ngu button { padding: 6px 8px; font-size: 10.5px; min-height: 30px; }
  .nut-ngu button { min-height: 30px; }
  .hang-hero { grid-template-columns: repeat(2, 1fr); }
  .o-hero:nth-child(odd) { border-right: 1px solid var(--vien); }
  .o-hero:nth-child(even) { border-right: 0; }
  .o-hero .gia { font-size: 22px; }
  .luoi-4 { grid-template-columns: 1fr; }
  .cot-gia { border-right: 0; border-bottom: 1px solid var(--vien); }
  .o-tim { display: none; }
  /* Bảng rộng: cho cuộn TRONG khung, không nống cả trang ra ngoài.
     Bài học cũ: bảng tràn làm kéo ngang được cả trang trên điện thoại. */
  .cuon-bang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cuon-bang table.bang { min-width: 640px; }
}

/* ───────── Danh sách tin (AI xếp hạng) ───────── */
.dstin { list-style: none; margin: 0; padding: 0; }
.dstin li { border-bottom: 1px solid var(--vien); }
.dstin li:last-child { border-bottom: 0; }
.dstin a {
  display: flex; gap: var(--space-4); padding: 12px 0; text-decoration: none;
  color: var(--color-text); align-items: flex-start;
}
.dstin a:hover { background: var(--color-neutral-100); }
.dstin .anh {
  flex: 0 0 104px; width: 104px; height: 68px; overflow: hidden;
  background: var(--color-neutral-200); position: relative;
}
/* 🔴 ẢNH TIN PHẢI ĐỂ MÀU.
   Bộ thiết kế có quy ước "ảnh in đen trắng", nhưng đó là cho ảnh MINH HOẠ của
   hệ thiết kế — em áp máy móc lên cả ảnh thumbnail bài báo nên khu tin thành
   một mảng xám xịt, nhìn u ám hẳn. Ảnh báo chí phải giữ màu thật. */
.dstin .anh img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.dstin a:hover .anh img { transform: scale(1.04); }
.dstin .than { min-width: 0; flex: 1; }
.dstin .tieu {
  font-weight: 700; font-size: 15px; line-height: 1.33; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dstin a:hover .tieu { color: var(--color-accent); }
.dstin .chan {
  margin-top: 6px; font-size: 11px; color: var(--mo);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.dstin .bao { font-weight: 800; color: var(--color-text); text-transform: uppercase; letter-spacing: .04em; }
.dstin .ma-lq {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  border: 1px solid var(--vien); padding: 1px 5px;
}
.dstin .them { color: var(--color-accent); font-weight: 700; }
.dstin li.dau .anh { flex: 0 0 210px; width: 210px; height: 132px; }
.dstin li.dau .tieu { font-size: 22px; line-height: 1.22; -webkit-line-clamp: 3; }
@media (max-width: 720px) {
  .dstin .anh { flex: 0 0 82px; width: 82px; height: 58px; }
  .dstin .tieu { font-size: 13.5px; }
  /* 🔴 `flex: 0 0 100%` KHÔNG dùng được ở đây. Thẻ cha `.dau a` chuyển sang
     flex-direction: column ngay dòng dưới, nên trục chính là TRỤC DỌC — và
     flex-basis khi đó áp lên CHIỀU CAO, đè mất `height: 178px`. Kết quả đo
     trên máy thật: ô ảnh tin dẫn đầu chỉ cao 16px, bẹt thành một vệt màu
     ngang suốt bề rộng màn hình. Nhìn ảnh chụp mới thấy; mã CSS đọc qua thì
     vẫn "có đủ chiều cao". */
  .dstin li.dau .anh { flex: 0 0 auto; width: 100%; height: 178px; }
  .dstin li.dau a { flex-direction: column; gap: var(--space-2); }
  .dstin li.dau .tieu { font-size: 18px; }
}

/* Dòng/ô bấm được để mở trang chi tiết */
.bam-duoc { cursor: pointer; }
table.bang tbody tr.bam-duoc:hover { background: var(--color-accent-100); }
table.bang tbody tr.bam-duoc .ma { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.dong-gia.bam-duoc:hover .nhan { color: var(--color-accent); }
.o-hero.bam-duoc:hover { background: var(--color-neutral-100); }
.dstin .tin-trong { padding: var(--space-4) 0; color: var(--mo); font-size: 13px; }

/* ───────── Phần thêm cho bản dựng sẵn ───────── */
/* Chỉ dành cho trình đọc màn hình — mắt thường không thấy nhưng máy đọc được.
   Bảng số liệu cần caption để người dùng trình đọc biết bảng này nói về gì. */
.an-di {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tieu-trang {
  font-family: var(--font-heading); font-weight: 800; font-size: 34px;
  letter-spacing: -.03em; margin: var(--space-6) 0 var(--space-2);
}
.dan-trang {
  font-size: 14.5px; line-height: 1.65; color: var(--color-neutral-800);
  max-width: 76ch; margin: 0 0 var(--space-4);
}
.luoi-ma { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: var(--vien); border: 1px solid var(--vien); }
.luoi-ma a { background: var(--color-bg); padding: 10px var(--space-3); text-decoration: none;
  color: var(--color-text); font-weight: 700; font-size: 13px; display: block; }
.luoi-ma a:hover { background: var(--color-accent-100); color: var(--color-accent); }
.luoi-ma a span { display: block; font-weight: 400; font-size: 11.5px; color: var(--mo); margin-top: 2px; }
@media (max-width: 720px) { .tieu-trang { font-size: 25px; } }


/* ═══════════ Huy hiệu hãng tin — điểm nhấn màu của trang ═══════════ */
.hh-bao {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .02em;
  color: #fff; flex: 0 0 auto;
}

/* ═══════════ Nhãn chuyên mục có màu ═══════════ */
.nhan-muc {
  display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; padding: 2px 7px;
  color: #fff;
}
.nhan-muc.m-indices    { background: var(--xanh); }
.nhan-muc.m-stocks     { background: var(--tim); }
.nhan-muc.m-commodities{ background: var(--cam); }
.nhan-muc.m-bonds      { background: var(--mongket); }
.nhan-muc.m-crypto     { background: var(--nauvang); }
.nhan-muc.m-currencies { background: var(--xanh); }
.nhan-muc.m-futures    { background: var(--color-text); }
.nhan-muc.m-etfs       { background: var(--tim); }
.nhan-muc.m-news       { background: var(--color-accent); }

/* Vạch màu ở đầu mỗi mục — dẫn mắt, phá thế đơn điệu của nền sáng */
.tieu-de-muc { position: relative; }
.tieu-de-muc h2 { position: relative; padding-left: 14px; }
.tieu-de-muc h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 5px; background: var(--color-accent);
}
#indices  .tieu-de-muc h2::before { background: var(--xanh); }
#stocks   .tieu-de-muc h2::before { background: var(--tim); }
#movers   .tieu-de-muc h2::before { background: var(--cam); }
#commodities-full .tieu-de-muc h2::before { background: var(--cam); }
#futures  .tieu-de-muc h2::before { background: var(--color-text); }
#etfs     .tieu-de-muc h2::before { background: var(--tim); }
#symbols  .tieu-de-muc h2::before { background: var(--mongket); }

/* Tiêu đề 4 dải giá cũng có vạch màu riêng */
.cot-gia h3 { position: relative; padding-left: 11px; }
.cot-gia h3::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 1px;
  width: 4px; background: var(--color-neutral-400);
}
#currencies h3::before  { background: var(--xanh); }
#commodities h3::before { background: var(--cam); }
#crypto h3::before      { background: var(--nauvang); }
#bonds h3::before       { background: var(--mongket); }

/* Ô chỉ số nổi bật: nền nhạt theo chiều tăng/giảm cho đỡ phẳng lì */
.o-hero { transition: background .2s; }
.o-hero.len-nen   { background: linear-gradient(180deg, rgba(29,107,63,.07), transparent 62%); }
.o-hero.xuong-nen { background: linear-gradient(180deg, rgba(236,48,19,.07), transparent 62%); }

/* Thanh điều hướng: mục đang xem có gạch chân đậm */
.menu a.on { border-bottom-color: var(--color-accent); font-weight: 700; }

/* ═══════════ Trang chuyên mục ═══════════ */
.duong-dan {
  font-size: 11.5px; color: var(--mo); padding: var(--space-4) 0 0;
  letter-spacing: .03em;
}
.duong-dan a { color: var(--color-accent); text-decoration: none; font-weight: 700; }
.duong-dan a:hover { text-decoration: underline; }
.duong-dan span { margin: 0 6px; }

.tieu-trang .nhan-muc {
  font-size: 13px; padding: 5px 12px; letter-spacing: .06em;
  vertical-align: 5px;
}

/* Ba con số nổi bật đầu trang chuyên mục */
.tom-tat-muc {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--vien); border-left: 4px solid var(--color-accent);
  margin-bottom: var(--space-4);
}
.o-tt { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--vien); }
.o-tt:last-child { border-right: 0; }
.o-tt .nh {
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mo);
}
.o-tt .gt { font-size: 15px; font-weight: 700; margin-top: 5px; }
@media (max-width: 720px) {
  .tom-tat-muc { grid-template-columns: 1fr; }
  .o-tt { border-right: 0; border-bottom: 1px solid var(--vien); }
  .o-tt:last-child { border-bottom: 0; }
}

/* ───────── Đường giá nhỏ trong bảng ─────────
 * Bản thiết kế đặt một đường giá 30 ngày cạnh mỗi mã. Nó mang thông tin mà
 * cột "%" không có: hình dạng xu hướng. Vẽ bằng SVG dựng sẵn từ nến đã cào —
 * không thư viện, không gọi mạng thêm, và không hề bịa số (mã thiếu nến thì
 * ô để trống).
 */
.c-spark { width: 76px; padding-right: 0 !important; text-align: right; }
.spark { display: block; margin-left: auto; opacity: .92; }
.bang tr:hover .spark { opacity: 1; }
.dong-gia .spark { flex: 0 0 auto; margin-left: 8px; }

/* Ô ảnh thay thế cho tin không kèm ảnh: mảng màu mang chữ viết tắt của hãng,
 * thay cho ô xám trống trước đây — trông như khối tin đang hỏng. */
.anh-chu {
  display: flex; align-items: flex-end; justify-content: flex-start;
  position: relative; overflow: hidden;
}
/* Vạch kẻ mảnh gợi khung ảnh, để khối màu không đọc thành một mảng đặc vô hồn.
   Dùng gradient thay vì ảnh nền: không thêm lượt tải nào. */
.anh-chu::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.07) 0 10px, transparent 10px 20px);
}
.anh-chu span {
  position: relative;
  font: 800 clamp(15px, 3.4vw, 20px)/1 var(--chu-tieu, 'Archivo', system-ui, sans-serif);
  letter-spacing: .04em; color: #fff;
  padding: 0 8px 6px;
}
/* Ô lớn của tin dẫn đầu: chữ viết tắt phóng to hẳn để khối màu có điểm nhìn,
   thay vì một dòng chữ nhỏ trôi giữa mảng màu 178px. */
.dstin li.dau .anh-chu span { font-size: clamp(34px, 9vw, 52px); padding: 0 14px 10px; }

/* Màn hẹp: giấu cột đường giá — nó là phần trang trí có ích, không mang con
 * số nào, nên bỏ đi thì bảng vẫn đủ nghĩa; giữ lại thì các cột tiền bị đẩy ra
 * khỏi màn hình. Ẩn theo LỚP `c-spark` (gắn cả ở ô tiêu đề lẫn ô dữ liệu), chứ
 * KHÔNG ẩn theo vị trí "cột cuối" — bảng nào không có đường giá sẽ bị ẩn nhầm
 * cột số thật. Đã từng mất cột theo đúng kiểu này ở một dự án trước. */
@media (max-width: 720px) {
  .c-spark { display: none !important; }
  .dong-gia .spark { display: none; }
}