/* ==========================================================================
   INTRADAY MARKET (.itm-*) — 3 section thị trường trang DIỄN BIẾN HÔM NAY
   §2 NHỊP THỊ TRƯỜNG · §3 TIỀN ĐI ĐÂU · §4 ĐIỂM SỐ TỪ ĐÂU
   Xương sống lấy từ components/dna.css (.dna-card/.dna-table/.dna-stack/.dna-legend);
   file này chỉ thêm nét riêng: đèn cơ giới, biểu đồ SVG, bản đồ ô, cột kéo/kìm điểm.
   ========================================================================== */

/* Bảng màu NGỮ NGHĨA theo quy ước bảng giá Việt Nam — trần tím, sàn xanh lơ, cùng
   thang màu 5 bậc của bản đồ ô. Đây là màu DỮ LIỆU, thuộc diện ngoại lệ được giữ
   giống các dải --pp-stage và --ce-evt: KHÔNG phải biến cầu nối trỏ về token chủ.
   Tăng / giảm / đứng ở mọi chỗ khác vẫn dùng thẳng token chủ.
   Chữ trên ô treemap luôn trắng ở cả hai chế độ vì nền ô là màu bão hoà cố định. */
:root {
    --itm-ceil: #b026ff;
    --itm-floor: #00bcd4;
    --itm-tm-u2: #0f9d58;
    --itm-tm-u1: #4caf7d;
    --itm-tm-flat: #9e9e30;
    --itm-tm-d1: #d9534f;
    --itm-tm-d2: #a02522;
    --itm-tm-fg: #ffffff;
    --itm-tm-fg-dim: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] {
    --itm-ceil: #c86bff;
    --itm-floor: #26d7ea;
}

.itm-page { padding-bottom: var(--space-lg); }
.itm-mt { margin-top: var(--space-md); }
.itm-inline { margin-left: var(--space-xs); font-weight: 700; }
.itm-big { font-size: var(--font-size-base); font-weight: 700; }
.itm-big small { font-size: var(--font-size-2xs); font-weight: 400; color: var(--color-text-muted); }

/* ── Dải chỉ số ─────────────────────────────────────────────────────────── */
.itm-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.itm-strip-cell {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
}
.itm-strip-name {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 700;
}
.itm-est { cursor: help; color: var(--color-text-muted); margin-left: 2px; }
/* Sàn phụ: rổ ghi hình phủ thiếu nên ô được làm nhạt để không đọc ngang hàng với VNINDEX */
.itm-strip-cell--partial { background: var(--color-bg-tertiary); }
.itm-strip-cell--partial .itm-strip-val { font-size: var(--font-size-lg); color: var(--color-text-secondary); }
.itm-strip-cell--partial .itm-strip-val small { font-size: var(--font-size-2xs); font-weight: 400; }
.itm-partial {
    font-size: var(--font-size-2xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-style: italic;
}
.itm-strip-val { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.2; }
.itm-strip-sub { font-size: var(--font-size-2xs); color: var(--color-text-secondary); }

/* ── Lưới §2 ────────────────────────────────────────────────────────────── */
/* Số cột ĐẾM ĐƯỢC chứ không auto-fit: thẻ đồng hồ chiếm đúng 2 cột, mà `span 2` chỉ có
   nghĩa khi biết chắc hàng có mấy cột — auto-fit đổi từ 3 sang 4 cột theo bề rộng thì
   bố cục "đồng hồ nằm bên phải KHỐI NGOẠI" vỡ mà không báo gì.
   3 cột: A|B|C hàng trên · D|đồng-hồ-2-cột hàng dưới. */
.itm-grid2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}
.itm-grid2 > .dna-card { margin-bottom: 0; min-width: 0; }
.itm-span2 { grid-column: span 2; }

/* 2 cột: A|B · C|D · đồng hồ trải hết hàng cuối. */
@media (max-width: 1200px) {
    .itm-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .itm-grid2 { grid-template-columns: 1fr; }
    .itm-span2 { grid-column: auto; }
}

.itm-grid-tm {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(310px, 0.9fr);
    gap: var(--space-md);
    align-items: start;
}
.itm-grid-tm > .dna-card { min-width: 0; margin-bottom: 0; }   /* min-width:0 — thiếu thì bảng đẩy cột tràn khỏi lưới */

/* Thân tab: .dna-tabpanel đã là mặt thẻ nên nội dung bên trong KHÔNG bọc .dna-card nữa
   (hai khung viền chồng nhau). Thẻ cấp 2 trong panel dùng .dna-card--flat. */
.itm-tabbody > .dna-card-head { margin-bottom: var(--space-sm); }
.dna-tabpanel > .itm-tabbody > .dna-footnote:last-child { margin-bottom: 0; }

/* ── Biểu đồ SVG ────────────────────────────────────────────────────────── */
.itm-chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.itm-chart-empty {
    padding: var(--space-lg);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.itm-grid { stroke: var(--color-border-light); stroke-width: 1; }
.itm-zero { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.itm-axis { fill: var(--color-text-muted); font-size: 9px; }
/* preserveAspectRatio="none" kéo giãn nét theo trục — non-scaling-stroke giữ nét đều.
   Bộ chọn phải là `path.itm-line`, KHÔNG phải `.itm-line`: các lớp màu .itm-c-* bên dưới
   có khai `fill` (để dùng chung cho vùng tô .itm-area) và cùng độ ưu tiên, lớp sau thắng
   ⇒ đường bị SVG tự khép lại rồi tô kín. Thêm tên thẻ là đủ để `fill:none` luôn thắng. */
path.itm-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.itm-area { stroke: none; opacity: 0.16; }
.itm-dot { stroke: var(--color-bg-secondary); stroke-width: 1.5; }

.itm-c-today { stroke: var(--color-accent-primary); fill: var(--color-accent-primary); }
.itm-c-prev { stroke: var(--color-text-muted); stroke-dasharray: 4 3; fill: none; }
/* Tăng−Giảm và Khối ngoại ròng tô theo DẤU qua gradient bậc thang dựng trong JS (signColor);
   hai khai báo dưới đây chỉ còn là màu dự phòng khi trình duyệt không nhận url(#gradient). */
.itm-c-ad { stroke: var(--color-positive); fill: var(--color-positive); }
.itm-c-fnet { stroke: var(--color-positive); fill: var(--color-positive); }
.itm-c-idx { stroke: var(--color-accent-primary); fill: var(--color-accent-primary); }
.itm-c-eq { stroke: var(--color-neutral); fill: var(--color-neutral); }

.dna-legend-dot.itm-dot-today { background: var(--color-accent-primary); }
.dna-legend-dot.itm-dot-prev { background: var(--color-text-muted); }
.dna-legend-dot.itm-dot-idx { background: var(--color-accent-primary); }
.dna-legend-dot.itm-dot-eq { background: var(--color-neutral); }

/* ── Năm nhóm giá: trần / tăng / đứng / giảm / sàn ──────────────────────── */
/* Một bảng màu dùng cho CẢ ba dạng vẽ: thanh xếp chồng + chấm chú giải (background) và
   vành khuyên §2C (stroke). Tách thành hai bộ lớp thì màu nhóm giá có hai nơi để lệch nhau. */
.itm-seg-ceil { background: var(--itm-ceil); stroke: var(--itm-ceil); }
.itm-seg-up { background: var(--color-positive); stroke: var(--color-positive); }
.itm-seg-unch { background: var(--color-neutral); stroke: var(--color-neutral); }
.itm-seg-down { background: var(--color-negative); stroke: var(--color-negative); }
.itm-seg-floor { background: var(--itm-floor); stroke: var(--itm-floor); }

/* ── Vành khuyên phân bố dòng tiền (§2C) ────────────────────────────────── */
/* flex-wrap thay cho media query: thẻ nằm trong lưới auto-fit tối thiểu 340px, hẹp tới mức
   bảng số không còn đủ 200px thì nó tự xuống dòng dưới vành. */
.itm-donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}
.itm-donut { width: 132px; height: 132px; flex: none; }
.itm-ring { fill: none; }
/* Chữ trắng trên 5 màu bão hoà: riêng nền hổ phách (#f59e0b) tương phản với trắng chưa đạt,
   nên viền chữ tối vẽ TRƯỚC phần tô (paint-order) — đọc được trên cả 5 màu, cả hai chế độ. */
.itm-ring-n {
    fill: #fff;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2.5px;
    paint-order: stroke fill;
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.itm-donut-tot {
    fill: var(--color-text-primary);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}
.itm-donut-sub {
    fill: var(--color-text-muted);
    font-size: 8.5px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.itm-dl { flex: 1 1 200px; min-width: 0; }
.itm-dl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px 60px 44px;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 0;
    font-size: var(--font-size-xs);
}
.itm-dl-row + .itm-dl-row { border-top: 1px solid var(--color-border-light); }
.itm-dl-head {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}
.itm-dl-head > span + span { text-align: right; }
.itm-dl-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* % là thứ vành đang mã hoá — đậm nhất trong hàng, các cột còn lại là số phụ trợ. */
.itm-dl-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.itm-dl-val,
.itm-dl-n {
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Bảng ngành ─────────────────────────────────────────────────────────── */

/* Khung cuộn dọc cho bảng 18 ngành. `.dna-table thead th` ĐÃ có sẵn
   `position: sticky; top: 0` + nền đục trong dna.css, và `.dna-table-wrap` đã có
   `overflow: auto` — thứ DUY NHẤT còn thiếu là chiều cao trần, không có nó thì khung
   không bao giờ cuộn nên sticky cũng không bao giờ kích hoạt. Vì vậy chỉ cần đúng
   một dòng max-height, không cần dựng lại đầu bảng dính.
   Theo vh để màn hình cao hiện được nhiều dòng hơn; sàn 240px cho màn rất thấp. */
.itm-scroll {
    max-height: 62vh;
    min-height: 240px;
}
.itm-sector-table td { vertical-align: middle; }
/* Nền dòng khi rê chuột trùng màu nền đầu bảng — đổi để đầu bảng không "biến mất"
   lúc dòng đầu tiên cuộn tới sát dưới nó. */
.itm-sector-table tbody tr:hover { background: var(--color-bg-secondary); }
.itm-thin { color: var(--color-text-muted); }
.itm-kn {
    margin-left: var(--space-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.itm-stack-sm { height: 10px; width: 92px; display: inline-flex; vertical-align: middle; }
/* Thanh neo về mép PHẢI để cùng mép với con số (cột số căn phải) — neo trái thì thanh và
   số mọc ngược chiều nhau, mắt đọc thành hai đại lượng khác nhau. */
.itm-minibar {
    display: flex;
    justify-content: flex-end;
    height: 3px;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-full);
    margin-top: 3px;
}
.itm-minibar > span {
    display: block;
    height: 100%;
    background: var(--color-accent-primary);
    border-radius: var(--border-radius-full);
}

/* ── Bản đồ ô (treemap) ─────────────────────────────────────────────────── */
.itm-tm {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 62;
    min-height: 260px;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.itm-tm-group {
    position: absolute;
    border: 1px solid var(--color-bg-primary);
    pointer-events: none;
    z-index: 2;
}
/* left+right cùng lúc = nhãn bị KẸP trong đúng ô ngành. Thiếu `right` thì nhãn ngành dài
   tràn sang ô bên cạnh và hai nhãn đè lên nhau (lỗi thấy ở ảnh chụp đầu 03/08). */
/* Nhãn nhóm nằm ĐÈ lên các ô đã tô màu bão hoà, nên phải có nền riêng — chữ trong suốt
   trên nền tím/lục đậm tương phản không đủ đọc. Nền đục + bo góc biến nhãn thành con tem
   nổi trên bản đồ thay vì chữ chìm vào ô. */
.itm-tm-gname {
    position: absolute;
    top: 2px; left: 3px;
    max-width: calc(100% - 6px);
    padding: 0 4px;
    font-size: var(--font-size-2xs);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.itm-tm-cell {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--color-bg-primary);
    cursor: pointer;
    line-height: 1.1;
}
.itm-tm-cell:hover { filter: brightness(1.2); z-index: 3; }

/* Bản đồ khối ngoại: hai nhóm gốc MUA RÒNG / BÁN RÒNG. Màu bên trong ô đã dành cho
   %thay-đổi-giá nên CHIỀU mua/bán phải do viền nhóm gánh, không tô lại nền ô. */
.itm-tm-group.itm-tm-g-buy { border: 2px solid var(--color-positive); }
.itm-tm-group.itm-tm-g-sell { border: 2px solid var(--color-negative); }
.itm-tm-g-buy .itm-tm-gname { color: var(--color-positive); }
.itm-tm-g-sell .itm-tm-gname { color: var(--color-negative); }
/* nowrap trên cả ba dòng: ô treemap hẹp mà cho ngắt dòng thì một nhãn nuốt mất chỗ của
   nhãn dưới nó. Ngắt cụt (bị overflow:hidden cắt) đọc vẫn hơn là đẩy hỏng bố cục ô. */
.itm-tm-sym,
.itm-tm-pct,
.itm-tm-sub { white-space: nowrap; }
.itm-tm-sym { font-size: var(--font-size-2xs); font-weight: 700; color: var(--itm-tm-fg); }
.itm-tm-pct { font-size: var(--font-size-2xs); color: var(--itm-tm-fg-dim); }
/* Dòng số phụ (bản đồ khối ngoại: %thay đổi giá dưới giá trị ròng). Nhạt hơn dòng chính
   để thứ tự đọc là mã → ròng → giá, đúng thứ tự quan trọng của tab này. */
.itm-tm-sub { font-size: var(--font-size-2xs); color: var(--itm-tm-fg-dim); opacity: 0.8; }

/* Thang màu treemap — 7 bậc, đủ tương phản với chữ trắng ở cả hai chế độ */
.itm-tm-ceil, .dna-legend-dot.itm-tm-ceil { background: var(--itm-ceil); }
.itm-tm-u2, .dna-legend-dot.itm-tm-u2 { background: var(--itm-tm-u2); }
.itm-tm-u1, .dna-legend-dot.itm-tm-u1 { background: var(--itm-tm-u1); }
.itm-tm-flat, .dna-legend-dot.itm-tm-flat { background: var(--itm-tm-flat); }
.itm-tm-d1, .dna-legend-dot.itm-tm-d1 { background: var(--itm-tm-d1); }
.itm-tm-d2, .dna-legend-dot.itm-tm-d2 { background: var(--itm-tm-d2); }
.itm-tm-floor, .dna-legend-dot.itm-tm-floor { background: var(--itm-floor); }
.itm-tm-legend { margin-top: var(--space-xs); }

.itm-rank { color: var(--color-text-muted); width: 24px; }
.itm-sym { font-weight: 700; }
/* Cột phụ trợ — bỏ trước tiên khi cột bên phải bị bóp hẹp */
.itm-share { color: var(--color-text-secondary); }

/* Đơn vị của cột số: xuống dòng dưới tên cột thay vì lặp lại ở từng ô. Nhắc lại
   "Tỷ VND" trên 24 dòng vừa chiếm chỗ vừa che mất chính con số cần so sánh. */
.itm-unit {
    display: block;
    font-size: var(--font-size-2xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* ── Cột kéo / kìm điểm ─────────────────────────────────────────────────── */
/* Thân thẻ "Top ảnh hưởng tới chỉ số VNINDEX": trái = mã kéo/kìm, phải = 2 đồng hồ áp lực.
   Cột phải cố định 300px — đồng hồ có kích thước tự nhiên, cho nó co giãn thì mặt số méo,
   còn danh sách mã thì càng rộng càng dễ so thanh ngang. */
.itm-contrib-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: var(--space-lg);
    align-items: start;
}
.itm-contrib-split--solo { grid-template-columns: minmax(0, 1fr); }
/* Hai đồng hồ xếp CẠNH NHAU trong cột phải (ghi đè auto-fit 148px của .itm-vd-row —
   auto-fit ở bề ngang này sẽ dồn chúng thành hai hàng). */
.itm-contrib-gauges .itm-vd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Nới trần mặt số CHỈ trong khối này. `.itm-gg` chặn ở 132px cho §2 — nơi 5 đồng hồ nằm
   một hàng ngang; nới toàn cục là vỡ hàng đó. Nới cột mà quên chỗ này thì cột rộng ra
   nhưng đồng hồ vẫn nhỏ, chỉ thêm khoảng trắng. */
.itm-contrib-gauges .itm-gg { max-width: 190px; }

/* Màn hẹp: xếp dọc, đồng hồ xuống dưới danh sách mã */
@media (max-width: 1240px) {
    .itm-contrib-split { grid-template-columns: minmax(0, 1fr); }
    /* Xếp dọc thì cột phải chiếm hết bề ngang — giới hạn lại để mặt số không phình to */
    .itm-contrib-gauges .itm-vd-row { max-width: 440px; }
}

.itm-cb-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-md);
}
.itm-cb-row {
    display: grid;
    grid-template-columns: 44px 1fr 52px;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    margin-bottom: 3px;
}
.itm-cb-sym { font-weight: 700; }
.itm-cb-track {
    height: 14px;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.itm-cb-fill { display: block; height: 100%; min-width: 2px; border-radius: var(--border-radius-sm); }
.itm-cb-up { background: var(--color-positive); }
.itm-cb-down { background: var(--color-negative); }
.itm-cb-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.itm-q-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.itm-q-nums > div { display: flex; flex-direction: column; }

/* ── Đèn cơ giới ────────────────────────────────────────────────────────── */
.itm-vd-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--space-sm);
}
.itm-vd {
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
    padding: var(--space-sm);
    border-left: 3px solid var(--color-neutral);
    text-align: center;
}
.itm-vd--good { border-left-color: var(--color-positive); }
.itm-vd--warn { border-left-color: var(--color-neutral); }
.itm-vd--bad { border-left-color: var(--color-negative); }
.itm-vd--na { border-left-color: var(--color-border); opacity: 0.72; }
.itm-vd-label {
    font-size: var(--font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.itm-vd-value { font-size: var(--font-size-lg); font-weight: 700; line-height: 1.25; }

/* ── Thang 5 bậc dưới mỗi đồng hồ ───────────────────────────────────────── */
.itm-gr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 3px 0 2px;
}
.itm-gr-pips { display: inline-flex; gap: 2px; }
.itm-gr-pips i {
    width: 7px;
    height: 4px;
    border-radius: 1px;
    background: var(--color-border);
}
/* Vạch sáng và chữ luôn mang MÀU CỦA ĐÈN — bậc suy từ chính `zones` nên không thể lệch.
   Chữ màu TRẦN, không chip nền: nền hổ phách #f59e0b với chữ trắng chỉ đạt ~2:1, mà đây là
   cỡ chữ nhỏ nhất trong thẻ. Vạch bên trái đã tải phần lớn thông tin nên chữ không cần nền. */
.itm-gr--good .itm-gr-pips i.on { background: var(--color-positive); }
.itm-gr--warn .itm-gr-pips i.on { background: var(--color-neutral); }
.itm-gr--bad .itm-gr-pips i.on { background: var(--color-negative); }
.itm-gr--good .itm-gr-word { color: var(--color-positive); }
.itm-gr--warn .itm-gr-word { color: var(--color-neutral); }
.itm-gr--bad .itm-gr-word { color: var(--color-negative); }
.itm-gr-word {
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.itm-vd-note {
    font-size: var(--font-size-2xs);
    color: var(--color-text-secondary);
    text-align: left;
    margin-top: 2px;
}

/* ── Câu tổng kết trạng thái (đứng TRƯỚC 5 mặt đồng hồ) ─────────────────── */
.itm-hl {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--color-neutral);
    background: var(--color-neutral-bg);
}
.itm-hl--good { border-left-color: var(--color-positive); background: var(--color-positive-bg); }
.itm-hl--warn { border-left-color: var(--color-neutral); background: var(--color-neutral-bg); }
.itm-hl--bad { border-left-color: var(--color-negative); background: var(--color-negative-bg); }
.itm-hl-ico { font-size: var(--font-size-base); line-height: 1.5; }
/* Cỡ chữ nhỉnh hơn thân thẻ: đây là thứ đọc ĐẦU TIÊN, năm đồng hồ bên dưới là phần chứng minh. */
.itm-hl-text {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-primary);
}

/* ── Mặt đồng hồ của đèn cơ giới ────────────────────────────────────────── */
.itm-gg { display: block; width: 100%; max-width: 132px; margin: 2px auto 0; }
.itm-gg-none {
    height: 34px;
    line-height: 34px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.itm-gg-band { fill: none; stroke-linecap: butt; }
.itm-gg-good { stroke: var(--color-positive); }
.itm-gg-warn { stroke: var(--color-neutral); }
.itm-gg-bad { stroke: var(--color-negative); }
/* Kim tô theo TRẠNG THÁI đèn, không theo vùng nó đứng — xem chú thích ở _itmGauge. */
.itm-gg-needle { stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.itm-gg-n-good { stroke: var(--color-positive); fill: var(--color-positive); }
.itm-gg-n-warn { stroke: var(--color-neutral); fill: var(--color-neutral); }
.itm-gg-n-bad { stroke: var(--color-negative); fill: var(--color-negative); }
.itm-gg-n-na { stroke: var(--color-text-muted); fill: var(--color-text-muted); }
.itm-gg-hub { stroke: var(--color-bg-tertiary); stroke-width: 1.5; }
.itm-gg-tick { fill: var(--color-text-muted); font-size: 8px; }
.itm-gg-peg {
    fill: var(--color-text-primary);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* ── Bấm vào MÃ để mở biểu đồ ────────────────────────────────────────────── */
.itm-sym-row, .itm-tm-cell[data-sym] { cursor: pointer; }
.itm-sym-row:hover { background: var(--color-bg-tertiary); }
.itm-sym-row:focus-visible,
.itm-tm-cell[data-sym]:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: -2px;
}
/* Gạch chân chỉ hiện khi rê chuột: gạch sẵn cả bảng thì 230 dòng đều có gạch, thành nhiễu. */
.itm-sym-row:hover .itm-sym { text-decoration: underline; }

/* ── Chi tiết một ngành (bấm vào hàng ở bảng ngành) ──────────────────────── */
.itm-sec-row { cursor: pointer; }
.itm-sec-row:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }
.itm-sec-caret { color: var(--color-text-muted); font-weight: 700; }
.itm-sec-row:hover .itm-sec-caret { color: var(--color-accent-primary); }
/* Số nằm giữa hai ngưỡng chip: giữ nguyên chữ số nhưng làm nhạt, để ⚡/💧 nổi lên
   mà cột vẫn đọc được theo giá trị chứ không chỉ theo có/không có chip. */
.itm-flow-mid { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

/* ── Đường tắt sang lát cắt chi tiết (§2 → §3) ───────────────────────────── */
.itm-jump {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-accent-primary);
    cursor: pointer;
    font-size: var(--font-size-2xs);
    font-weight: 700;
    margin-left: auto;
    padding: 2px 9px;
    white-space: nowrap;
}
.itm-jump:hover { background: var(--color-accent-bg); border-color: var(--color-accent-primary); }
/* Cả vùng biểu đồ bấm được — viền chỉ hiện khi rê chuột để lúc bình thường không có
   thêm một khung nữa cạnh tranh với đường biểu đồ. */
.itm-jump-zone { cursor: pointer; border-radius: var(--border-radius-sm); }
.itm-jump-zone:hover { background: var(--color-accent-bg); }
.itm-jump-zone:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }

/* Tỷ trọng toàn sàn đi kèm cột Dòng tiền: xuống dòng riêng và nhạt hơn — nó là BỐI CẢNH
   độ lớn, không phải con số để so hàng-với-hàng (so độ lớn đã có cột GTGD kèm thanh mini). */
.itm-sec-share {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.itm-crumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.itm-crumb-back {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 2px var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
}
.itm-crumb-back:hover { color: var(--color-text-primary); border-color: var(--color-accent-primary); }
.itm-crumb-sep { color: var(--color-text-muted); }
.itm-crumb-cur { font-weight: 700; }
.itm-sec-cards { margin-bottom: var(--space-md); }

/* Đầu cột sắp xếp được. Cùng cách cư xử với bảng §0: bấm đổi cột/chiều, mũi tên ở cột đang
   dùng. `user-select: none` để bấm nhanh hai lần không bôi đen chữ tiêu đề. */
.itm-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.itm-th-sort:hover { color: var(--color-text-primary); }
.itm-th-sort:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }
.itm-th-active { color: var(--color-accent-primary); }

.itm-stock-table td { vertical-align: middle; }
.itm-stock-table tbody tr:hover { background: var(--color-bg-secondary); }
.itm-sym { font-weight: 700; }
/* Trần/sàn dùng ĐÚNG hai màu của bản đồ ô — cùng một hiện tượng thì cùng một màu */
.itm-row-ceil .itm-sym { color: var(--color-accent-primary); }
.itm-row-floor .itm-sym { color: var(--color-negative); }
.itm-ce {
    font-size: var(--font-size-2xs);
    padding: 0 4px;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ── Màn hẹp ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .itm-grid-tm { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .itm-bar-row { grid-template-columns: 62px 1fr 52px 32px; }
    .itm-bar-n { display: none; }
    th.itm-share, td.itm-share { display: none; }
    .itm-tm { aspect-ratio: 3 / 4; }
    .itm-strip { grid-template-columns: repeat(2, 1fr); }
    /* Bảng 11 cột không nhét vừa màn điện thoại: giấu 3 cột phái sinh, giữ lại
       giá/%/GTGD/dòng tiền/NN — bảng vẫn cuộn ngang được nếu cần. */
    .itm-stock-table th:nth-child(5), .itm-stock-table td:nth-child(5),
    .itm-stock-table th:nth-child(7), .itm-stock-table td:nth-child(7),
    .itm-stock-table th:nth-child(9), .itm-stock-table td:nth-child(9) { display: none; }
}

/* ══════════════ ĐỘ RỘNG B50R (mục 1 trang DIỄN BIẾN HÔM NAY, 07/08/2026) ══════════════ */
.b50r-warn { margin-bottom: var(--space-md); }

.b50r-top {
    display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
    gap: var(--space-md); margin-bottom: var(--space-md);
}
.b50r-now {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); padding: var(--space-md);
    display: flex; flex-direction: column; justify-content: center;
}
.b50r-now-lbl { font-size: var(--font-size-2xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.b50r-now-val { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.1; color: var(--color-text-primary); }
.b50r-now-val small { font-size: var(--font-size-lg); font-weight: 600; }
.b50r-now-sub { font-size: var(--font-size-sm); font-weight: 600; }
.b50r-now-n   { font-size: var(--font-size-2xs); color: var(--color-text-muted); margin-top: var(--space-xs); }

.b50r-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.b50r-card {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); padding: var(--space-sm) var(--space-md);
    display: flex; flex-direction: column; gap: 2px; justify-content: center;
}
.b50r-card-lbl { font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.b50r-card-val { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text-primary); }
.b50r-card-sub { font-size: var(--font-size-2xs); color: var(--color-text-muted); }

.b50r-chart-card { padding-bottom: var(--space-sm); }

/* Đường trong phiên + 3 đường tham chiếu. Ngưỡng 50% dùng màu "trung tính cảnh báo" chứ
   KHÔNG dùng xanh/đỏ: nó là mốc luật, không phải một trạng thái tốt/xấu. */
.itm-line.itm-c-b50r  { stroke: var(--color-accent-primary); stroke-width: 2; }
.itm-area.itm-c-b50r  { fill: var(--color-accent-primary); opacity: .12; }
.itm-dot.itm-c-b50r   { fill: var(--color-accent-primary); }
.itm-ref              { stroke-width: 1; stroke-dasharray: 4 3; stroke: var(--color-border); }
.itm-ref-lbl          { font-size: 9px; fill: var(--color-text-muted); }
.itm-ref--thr         { stroke: var(--color-neutral); stroke-dasharray: 6 3; }
text.itm-ref--thr     { fill: var(--color-neutral); font-weight: 600; }

.b50r-legend {
    display: flex; flex-wrap: wrap; gap: var(--space-md);
    font-size: var(--font-size-2xs); color: var(--color-text-muted); padding-top: var(--space-xs);
}
.b50r-legend span { display: inline-flex; align-items: center; gap: 5px; }
.b50r-sw { width: 14px; height: 0; border-top: 2px solid var(--color-border); display: inline-block; }
.b50r-sw--line { border-top-color: var(--color-accent-primary); }
.b50r-sw--thr  { border-top: 2px dashed var(--color-neutral); }

.b50r-how { margin-top: var(--space-md); }
.b50r-how summary { cursor: pointer; font-weight: 600; }
.b50r-how p { margin: var(--space-sm) 0 0; }

@media (max-width: 768px) {
    .b50r-top   { grid-template-columns: 1fr; }
    .b50r-cards { grid-template-columns: 1fr; }
}

/* B50R — nền lịch sử + điểm cuối trong phiên (07/08/2026 đợt 2) */
.b50r-chart-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xs);
}
.b50r-range { display: inline-flex; gap: 4px; }
.b50r-rbtn {
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    padding: 3px 10px; font-size: var(--font-size-2xs); cursor: pointer; white-space: nowrap;
}
.b50r-rbtn:hover { color: var(--color-text-primary); }
.b50r-rbtn.on {
    background: var(--color-accent-primary-bg); color: var(--color-accent-primary);
    border-color: var(--color-accent-primary); font-weight: 600;
}
/* Điểm cuối = số TRONG PHIÊN. Vòng nhấn rỗng để phân biệt với 250 điểm đã chốt. */
.itm-dot-live {
    fill: none; stroke: var(--color-accent-primary); stroke-width: 1.5; opacity: .55;
}
.b50r-sw--live {
    border-top: none; width: 9px; height: 9px; border-radius: var(--border-radius-full);
    border: 1.5px solid var(--color-accent-primary); background: transparent;
}

/* Đường chỉ số chồng lên B50R (12/08/2026) — NÉT ĐỨT và MẢNH HƠN đường chính là điều bắt
   buộc, không phải trang trí: chúng đã bị co giãn về dải của B50R nên không đọc được theo
   trục Y. Nét đứt là dấu hiệu thị giác quen thuộc của "đường tham chiếu, không phải số thật".
   Hai màu tách hẳn khỏi xanh nhấn của B50R để không ai nhầm đâu là nội dung chính. */
.itm-line.itm-c-ovni { stroke: var(--color-text-secondary);    stroke-width: 1.4; stroke-dasharray: 5 4; }
.itm-line.itm-c-ovnb { stroke: var(--color-accent-secondary);  stroke-width: 1.4; stroke-dasharray: 2 3; }

.b50r-ovbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.b50r-ovbar-lbl { font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.b50r-ovbtn {
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
    border: 1px dashed var(--color-border); border-radius: var(--border-radius-sm);
    padding: 3px 10px; font-size: var(--font-size-2xs); cursor: pointer; white-space: nowrap;
}
.b50r-ovbtn:hover { color: var(--color-text-primary); }
.b50r-ovbtn.itm-c-ovni.on {
    color: var(--color-text-primary); border-color: var(--color-text-secondary); font-weight: 600;
}
.b50r-ovbtn.itm-c-ovnb.on {
    color: var(--color-accent-secondary); border-color: var(--color-accent-secondary); font-weight: 600;
}
.b50r-sw--ov { border-top-style: dashed; }
.b50r-sw--ov.itm-c-ovni { border-top-color: var(--color-text-secondary); }
.b50r-sw--ov.itm-c-ovnb { border-top-color: var(--color-accent-secondary); }
.b50r-ovnote { margin-top: var(--space-xs); }