/* ============================================================================
 * DNA HIỂN THỊ — bộ thành phần dùng chung cho dashboard-v3
 * File: css/components/dna.css   ·   Dựng 2026-08-02
 * ============================================================================
 *
 * VỊ TRÍ NẠP: sau `section-nav.css`, TRƯỚC mọi file trong `components/`.
 * Hệ quả cố ý: file này chỉ ĐẶT NỀN. Trang nào đã tự khai giá trị riêng thì
 * khai báo của trang vẫn thắng (cùng độ đặc hiệu, đứng sau trong cascade).
 * ⇒ Thêm lớp cũ vào mục "GẮN LỚP CŨ" ở cuối KHÔNG thể làm hỏng trang đó —
 *   nó chỉ điền vào những thuộc tính trang chưa đặt.
 *
 * QUY TẮC KHI SỬA FILE NÀY
 *  1. Chỉ dùng biến của `variables.css`. Không hex, không rgba trần.
 *  2. Cỡ chữ chỉ dùng `--font-size-*` (đơn vị rem). Không viết px.
 *  3. Bo góc chỉ dùng `--border-radius-*`. Khoảng cách chỉ dùng `--space-*`.
 *  4. Thêm thành phần mới ở đây chỉ khi nó lặp ở ≥3 trang. Dưới mức đó là
 *     chuyện riêng của trang.
 *
 * PHONG CÁCH ĐƯỢC CHẮT TỪ ĐÂU (khảo sát 2026-08-02, không nhập từ ngoài):
 *   thẻ            ← .tbd-card (TÍN HIỆU ĐỈNH-ĐÁY) + .itd-card (DIỄN BIẾN PHIÊN)
 *   tiêu đề thẻ    ← .tbd-section-title — cỡ nhỏ + in hoa + màu nhạt, tách được
 *                    cấp bậc mà không tốn chiều cao (thủ pháp tốt nhất trong repo)
 *   tab cấp 2      ← .bsig-subtab + .index-folder-tab — kiểu "đầu kẹp file"
 *   tab cấp 3      ← .pf-stock-tab + .wl-fbtn — kiểu "viên thuốc"
 *   bảng           ← .wl-table (DANH SÁCH THEO DÕI) + .itd-table
 *   chip / nhãn    ← .bsig-chip + .itd-badge + .tbd-score-badge
 *   khối diễn giải ← .bsig-block + .ce-rel + .tbd-capit-verdict — viền trái đậm
 *   trạng thái rỗng← .stock-analysis-empty (bộ .empty-icon/-title/-description)
 * ========================================================================== */


/* ══ 1. ĐẦU TRANG ═══════════════════════════════════════════════════════════
   Một trang có ĐÚNG MỘT khối này, ở trên cùng. Tiêu đề trang là cấp cao nhất;
   mọi tiêu đề bên dưới phải nhỏ hơn nó. */
.dna-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.dna-page-title {
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0;
}
.dna-page-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin-top: 3px;
}
/* Dấu thời gian / nguồn dữ liệu — luôn nằm bên phải, không xuống dòng */
.dna-page-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    padding-top: 3px;
}


/* ══ 2. THẺ ════════════════════════════════════════════════════════════════
   Đơn vị chứa nội dung duy nhất. Không lồng thẻ trong thẻ quá 1 cấp —
   cấp 2 dùng .dna-card--flat (không viền, nền chìm). */
.dna-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}
.dna-card--flat {
    background: var(--color-bg-tertiary);
    border: 0;
    box-shadow: none;
}
.dna-card--pad-sm { padding: var(--space-sm) var(--space-md); }

/* Tiêu đề trong thẻ — cấp 2. Nhỏ + in hoa + nhạt, KHÔNG to đậm:
   phân cấp bằng độ tương phản chứ không bằng kích thước. */
.dna-card-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
/* Hàng tiêu đề có thứ gì đó ở mép phải (nhãn, số đếm, nút) */
.dna-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}
.dna-card-head .dna-card-title { margin-bottom: 0; }

/* Tiêu đề cấp 3, trong lòng thẻ */
.dna-sub-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: var(--space-md) 0 var(--space-xs);
}


/* ══ 3. LƯỚI THẺ ══════════════════════════════════════════════════════════
   auto-fill: số cột tự co theo bề ngang, không cần khai media query riêng. */
.dna-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}
.dna-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dna-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.dna-grid > .dna-card { margin-bottom: 0; }

/* Ô số liệu trong lưới — nhãn nhỏ ở trên, số to ở dưới */
.dna-stat-label {
    font-size: var(--font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}
.dna-stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;   /* số thẳng cột khi đổi giá trị */
    color: var(--color-text-primary);
}
.dna-stat-sub {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}


/* ══ 4. TAB CẤP 2 — kiểu "đầu kẹp file" ═══════════════════════════════════
   Dùng khi các tab là các MẶT KHÁC NHAU của cùng một chủ đề, và nội dung
   nằm trong một khung liền với thanh tab. */
.dna-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding-left: var(--space-sm);
    position: relative;
    z-index: 2;
}
.dna-tab {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    padding: var(--space-sm) var(--space-lg);
    margin-bottom: -1px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dna-tab:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}
.dna-tab.active {
    background: var(--color-bg-secondary);
    color: var(--color-accent-primary);
    border-bottom: 1px solid var(--color-bg-secondary);
}
.dna-tabpanel {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) var(--border-radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}
/* Số đếm gắn trên tab */
.dna-tab-badge {
    display: inline-block;
    min-width: 16px;
    margin-left: var(--space-xs);
    padding: 0 5px;
    font-size: var(--font-size-2xs);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--color-bg-secondary);
    background: var(--color-accent-primary);
    border-radius: var(--border-radius-full);
    vertical-align: middle;
}


/* ══ 5. TAB CẤP 3 — kiểu "viên thuốc" ═════════════════════════════════════
   Dùng khi các tab là BỘ LỌC / LÁT CẮT trên cùng một tập nội dung. Nhẹ hơn
   tab cấp 2 để mắt không nhầm hai cấp với nhau. */
.dna-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.dna-subtab {
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.dna-subtab:hover { color: var(--color-text-primary); }
.dna-subtab.active,
.dna-subtab.on {
    background: var(--color-accent-primary);
    border-color: transparent;
    color: var(--color-bg-secondary);
}


/* ══ 6. BẢNG ══════════════════════════════════════════════════════════════
   Quy ước: cột chữ căn trái, cột SỐ căn phải (cả ô lẫn tiêu đề cột — nếu chỉ
   căn ô mà quên tiêu đề thì hai thứ lệch trục, xem ghi chú U4 trong
   watchlist.css). Đầu bảng dính khi cuộn. */
.dna-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.dna-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    text-align: left;
    font-weight: 700;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--space-sm) 10px;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}
.dna-table td {
    padding: var(--space-sm) 10px;
    color: var(--color-text-primary);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-light);
}
.dna-table tbody tr:last-child td { border-bottom: none; }
.dna-table tbody tr:hover { background: var(--color-bg-tertiary); }

/* Cột số — dùng ĐỒNG THỜI trên th và td của cùng một cột */
.dna-table th.dna-num,
.dna-table td.dna-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dna-table th.dna-mid,
.dna-table td.dna-mid { text-align: center; }

/* Khung cuộn cho bảng nhiều cột */
.dna-table-wrap {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}


/* ══ 7. CHIP & NHÃN ═══════════════════════════════════════════════════════
   .dna-chip  = nhãn nhạt, viền mảnh — dùng cho phân loại, số lượng lớn.
   .dna-badge = nhãn đặc, nổi — dùng cho trạng thái, mỗi khối chỉ vài cái. */
.dna-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}
.dna-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Bộ màu trạng thái — DÙNG CHUNG cho chip, nhãn, khối diễn giải và ô bảng.
   Bốn nghĩa, không hơn: tốt / xấu / cần chú ý / thông tin. */
.dna-chip--pos, .dna-badge--pos { background: var(--color-positive-bg); color: var(--color-positive); border-color: var(--color-positive); }
.dna-chip--neg, .dna-badge--neg { background: var(--color-negative-bg); color: var(--color-negative); border-color: var(--color-negative); }
.dna-chip--warn, .dna-badge--warn { background: var(--color-neutral-bg); color: var(--color-neutral); border-color: var(--color-neutral); }
.dna-chip--info, .dna-badge--info { background: var(--color-accent-bg); color: var(--color-accent-primary); border-color: var(--color-accent-primary); }

/* Màu chữ trạng thái — dùng cho số trong bảng */
.dna-pos { color: var(--color-positive); font-weight: 600; }
.dna-neg { color: var(--color-negative); font-weight: 600; }
.dna-warn { color: var(--color-neutral); font-weight: 600; }
.dna-muted { color: var(--color-text-muted); }


/* ══ 8. KHỐI DIỄN GIẢI / CẢNH BÁO ═════════════════════════════════════════
   Viền trái đậm + nền chìm. Màu viền mang nghĩa, KHÔNG trang trí. */
.dna-note {
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--color-border);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}
.dna-note b { color: var(--color-text-primary); }
.dna-note--pos { border-left-color: var(--color-positive); background: var(--color-positive-bg); }
.dna-note--neg { border-left-color: var(--color-negative); background: var(--color-negative-bg); }
.dna-note--warn { border-left-color: var(--color-neutral); background: var(--color-neutral-bg); }
.dna-note--info { border-left-color: var(--color-accent-primary); background: var(--color-accent-bg); }

/* Dòng chú thích cuối khối — nhỏ nhất, nghiêng, không cạnh tranh với nội dung */
.dna-footnote {
    margin-top: var(--space-sm);
    font-size: var(--font-size-2xs);
    font-style: italic;
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
}


/* ══ 9. TRẠNG THÁI RỖNG ═══════════════════════════════════════════════════
   Ba tầng: biểu tượng → nói CHUYỆN GÌ → nói LÀM GÌ tiếp. Thiếu tầng 3 thì
   người đọc không biết phải làm sao, đó là lỗi hay gặp nhất ở khối rỗng. */
.dna-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    color: var(--color-text-muted);
}
.dna-empty-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
    opacity: 0.8;
}
.dna-empty-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}
.dna-empty-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: 420px;
    line-height: var(--line-height-relaxed);
}
.dna-empty code {
    background: var(--color-bg-tertiary);
    padding: 1px 5px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-mono);
    font-size: 0.92em;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 10. GẮN LỚP CŨ VÀO DNA
 * ══════════════════════════════════════════════════════════════════════════
 * File này nạp TRƯỚC components/ nên các dòng dưới chỉ ĐIỀN THIẾU, không đè
 * lên lựa chọn riêng của từng trang. Cách gỡ dần: xoá khai báo trùng bên
 * file của trang, phần DNA sẽ lộ ra — sửa tới đâu xem lại trang tới đó.
 * ======================================================================== */

/* — Trạng thái rỗng: gộp hai bộ toàn cục đang chọi nhau —
   `.empty-state` (layout.css) và `.stock-analysis-empty` (stock-analysis.css)
   cùng khai `.empty-icon` với hai cỡ khác nhau (48px vs 64px). */
.stock-analysis-empty,
.portfolio-page-empty,
.cg-empty-state,
.mc-empty-state,
/* VĨ MÔ & ĐỊNH GIÁ (2026-08-03, trang mẫu áp DNA): bốn khối rỗng tự viết,
   mỗi cái một kiểu. Khai báo riêng của chúng trong macro.css đã xoá để lộ nền này. */
.mc-no-data,
.mbr-empty,
.mc-sv-cycle-empty,
.mc-sv-sug-empty,
.tbd-empty,
.stk-empty,
.bt-empty,
.emc-empty,
.ce-empty,
.tp-empty,
.pp-empty,
.rrg-empty,
.crypto-screener-empty,
.sys-gap-empty,
.vnb-empty,
.picks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    color: var(--color-text-muted);
}
.empty-icon, .cg-empty-icon, .bt-empty-icon, .pp-empty-icon,
.vnb-empty-icon, .ce-empty-icon, .stk-no-data-icon, .idx-no-data-icon,
.sys-no-data-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
    opacity: 0.8;
}
.empty-title, .cg-empty-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}
.empty-description, .cg-empty-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: 420px;
    line-height: var(--line-height-relaxed);
}

/* — Bảng: tiêu đề cột cùng một giọng ở mọi trang — */
.pf-positions-table thead th,
.pf-perf-table thead th,
.ce-table thead th,
.bsig-table thead th,
.emc-table thead th,
.tp-table thead th,
.cbot-table thead th,
/* VĨ MÔ & ĐỊNH GIÁ (2026-08-03) — 7 họ bảng, mỗi họ một giọng tiêu đề cột */
.mc-table th,
.mc-table-compact th,
.mc-table-tight th,
.mc-explain-table th,
.mc-imp-tok-table th,
.mc-rc-table thead th,
.wr-picks-table .wr-th {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--font-size-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 11. THANH TAB TRÊN MÀN HẸP
 * ══════════════════════════════════════════════════════════════════════════
 * Trước 2026-08-02 việc này nằm ở `responsive.css` dưới dạng DANH SÁCH LIỆT KÊ
 * TAY từng tên lớp — thanh nào viết sau ngày sửa danh sách đó thì không được
 * bảo vệ. Đưa về đây theo lớp, và liệt kê nốt 10 thanh đang bị bỏ sót.
 *
 * ≤768px: cuộn ngang, ẩn thanh cuộn (đủ chỗ vuốt).
 * ≤454px: KHÔNG cuộn ngang nữa mà xuống dòng — mốc ràng buộc của dự án.
 * ======================================================================== */
@media (max-width: 768px) {
    .dna-tabs, .dna-subtabs,
    .bsig-subtabs, .bt-subtab-bar, .bt-tabs, .crypto-sl-tabs, .etf-chart-tabs,
    .mc-sv-rank-tabs, .mc-sv-rank-tab-bar, .overview-tabs-nav, .picks-tabs-nav,
    .pp-type-tabs, .cg-disc-subtabs, .crypt-screen-tabs, .bond-tab-bar,
    .bk-subtabs, .idx-tab-bar, .ss-tab-bar, .ss-rec-subtabs, .sys-tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-xs);
    }
    .dna-tabs::-webkit-scrollbar, .dna-subtabs::-webkit-scrollbar,
    .bsig-subtabs::-webkit-scrollbar, .bt-subtab-bar::-webkit-scrollbar,
    .bt-tabs::-webkit-scrollbar, .crypto-sl-tabs::-webkit-scrollbar,
    .etf-chart-tabs::-webkit-scrollbar, .mc-sv-rank-tabs::-webkit-scrollbar,
    .mc-sv-rank-tab-bar::-webkit-scrollbar, .overview-tabs-nav::-webkit-scrollbar,
    .picks-tabs-nav::-webkit-scrollbar, .pp-type-tabs::-webkit-scrollbar,
    .cg-disc-subtabs::-webkit-scrollbar, .crypt-screen-tabs::-webkit-scrollbar,
    .bond-tab-bar::-webkit-scrollbar, .bk-subtabs::-webkit-scrollbar,
    .idx-tab-bar::-webkit-scrollbar, .ss-tab-bar::-webkit-scrollbar,
    .ss-rec-subtabs::-webkit-scrollbar, .sys-tab-bar::-webkit-scrollbar {
        display: none;
    }
    /* Mục tab không được bóp lại, nếu không nó squish thay vì cuộn */
    .dna-tab, .dna-subtab,
    .bsig-subtab, .bt-subtab, .bt-tab, .crypto-sl-tab, .etf-chart-tab,
    .mc-sv-rank-tab, .overview-tab, .picks-tab, .pp-type-tab,
    .cg-disc-subtab, .crypt-screen-tab-btn, .bond-tab, .bk-subtab,
    .idx-tab, .ss-tab, .ss-rec-tab, .sys-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

@media (max-width: 454px) {
    .dna-tabs, .dna-subtabs,
    .bsig-subtabs, .bt-subtab-bar, .bt-tabs, .crypto-sl-tabs, .etf-chart-tabs,
    .mc-sv-rank-tabs, .mc-sv-rank-tab-bar, .overview-tabs-nav, .picks-tabs-nav,
    .pp-type-tabs, .cg-disc-subtabs, .crypt-screen-tabs, .bond-tab-bar,
    .bk-subtabs, .idx-tab-bar, .ss-tab-bar, .ss-rec-subtabs, .sys-tab-bar {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .dna-tab, .dna-subtab,
    .bsig-subtab, .bt-subtab, .bt-tab, .crypto-sl-tab, .etf-chart-tab,
    .mc-sv-rank-tab, .overview-tab, .picks-tab, .pp-type-tab,
    .cg-disc-subtab, .crypt-screen-tab-btn, .bond-tab, .bk-subtab,
    .idx-tab, .ss-tab, .ss-rec-tab, .sys-tab {
        flex-shrink: 1;
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-xs);
    }
    .dna-table { font-size: var(--font-size-xs); }
    .dna-table thead th, .dna-table td { padding: 6px 5px; }
}

/* ==========================================================================
 * 11. BẢNG MÀU CHUỖI DỮ LIỆU  (data series)
 * --------------------------------------------------------------------------
 * Dùng khi phải phân biệt N phần tử KHÔNG có nghĩa tốt/xấu — lát bánh xe, đoạn
 * thanh xếp chồng, đường trên biểu đồ. KHÁC hẳn `--color-positive/-negative`:
 * những cái đó mang NGHĨA, còn bảng này chỉ để phân biệt.
 *
 * 8 màu tách nhau về sắc độ, không dựa vào riêng đỏ-xanh nên người mù màu
 * đỏ-lục vẫn phân biệt được phần lớn. Quá 8 phần tử thì gộp phần đuôi thành
 * "Khác" — đừng lặp vòng màu, lặp là hai lát cùng màu trong một biểu đồ.
 * ========================================================================== */
:root {
    --series-1: #3b82f6;   /* lam    */
    --series-2: #f59e0b;   /* hổ phách */
    --series-3: #14b8a6;   /* ngọc lam */
    --series-4: #a855f7;   /* tím    */
    --series-5: #ef4444;   /* đỏ     */
    --series-6: #84cc16;   /* lục chanh */
    --series-7: #ec4899;   /* hồng   */
    --series-8: #0ea5e9;   /* xanh trời */
    --series-rest: #94a3b8; /* "Khác" + tiền mặt — cố ý xám, không tranh chú ý */
}

/* Bánh xe khoét giữa. Tỉ lệ nằm ở `--dna-donut` do JS bơm (conic-gradient
   không nhận biến rời rạc nên phải dựng cả chuỗi stop ở JS). */
.dna-donut {
    width: 96px; height: 96px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--dna-donut);
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.dna-donut::before {
    content: ''; position: absolute; inset: 20%;
    border-radius: 50%;
    background: var(--color-bg-secondary);
}
.dna-donut-val, .dna-donut-sub { position: relative; line-height: 1.1; }
.dna-donut-val { font-size: var(--font-size-lg); font-weight: 700; }
.dna-donut-sub { font-size: var(--font-size-2xs); color: var(--color-text-secondary); }

/* Thanh xếp chồng 100% — so được thành phần mà chỉ tốn MỘT dòng chiều cao,
   thay cho N dòng thanh ngang rời. */
.dna-stack {
    display: flex; width: 100%; height: 18px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-bg-tertiary);
}
.dna-stack-seg { height: 100%; min-width: 2px; }
.dna-stack-seg:hover { filter: brightness(1.15); }

/* Chú giải dạng chip — mỗi chip tự mang con số nên không cần bảng riêng */
.dna-legend { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 6px; }
.dna-legend-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--font-size-2xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.dna-legend-dot {
    width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.dna-legend-item b { color: var(--color-text-primary); font-weight: 600; }