#marketPage {
    --bg-main: var(--ink);
    --bg-card: var(--ink-2);
    --primary: var(--gold);
    --primary-light: rgba(255, 210, 0, 0.12);
    --text-main: var(--bone);
    --text-muted: var(--muted);
    --border-color: var(--line);
    
    --color-up: var(--signal);
    --color-down: var(--risk);
    --color-flat: var(--gold);
    --color-ceil: #a855f7;
    --color-floor: #3b82f6;
    
    --color-up-bg: rgba(34, 197, 94, 0.1);
    --color-down-bg: rgba(224, 87, 91, 0.1);
    --color-flat-bg: rgba(255, 210, 0, 0.1);
    
    --shadow-soft: var(--shadow);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
}

#marketPage,
#marketPage * {
    font-family: var(--sans) !important;
}

#marketPage .metric-val,
#marketPage .gold-price-val,
#marketPage .premium-table,
#marketPage .summary-value,
#marketPage .summary-comparison,
#marketPage .bar-val,
#marketPage .impact-val,
#marketPage .chart-label-y,
#marketPage .chart-label-x {
    font-family: var(--mono) !important;
}







/* App Container - Mimics Mobile App Frame but adapts to Desktop */
.market-app-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Mobile: full width, no frame */
@media (max-width: 480px) {
    .market-app-container {
        border-radius: 0;
        border: none;
        box-shadow: none;
        max-width: 100%;
    }
}

/* ===== DESKTOP LAYOUT (≥900px) - Wide 2-column premium design ===== */
@media (min-width: 900px) {
    .market-app-container {
        max-width: 1280px;
        width: 96%;
        border-radius: 20px;
        box-shadow: 0 8px 60px rgba(0, 0, 0, 0.5);
        margin: 16px auto;
    }

    /* Header wider */
    .header-nav {
        padding: 14px 28px;
    }

    .pill {
        padding: 6px 18px;
        font-size: 13px;
    }

    /* Index slider - more cards per view */
    .indices-slider {
        padding: 0 28px;
        gap: 16px;
    }

    .index-card {
        min-width: 170px;
        max-width: 280px;
        padding: 14px 16px;
    }

    .index-val { font-size: 20px; }
    .index-name { font-size: 13px; }
    .index-pct  { font-size: 13px; }
    .index-sparkline { height: 44px; }

    /* Metrics marquee */
    .index-marquee-container {
        height: 42px;
    }

    /* Sub-nav */
    .sub-nav {
        padding: 0 28px;
        gap: 28px;
    }

    .sub-tab {
        font-size: 16px;
        padding: 10px 2px;
    }

    /* Content area wider padding */
    .app-content {
        padding: 20px 28px;
    }

    /* Widget cards — 2-column grid layout */
    .content-section.active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }

    /* Widget card base — rộng hơn, thoáng hơn */
    .widget-card {
        padding: 22px 24px;
        border-radius: 20px;
    }

    .widget-title { font-size: 17px; }

    .summary-label { font-size: 12px; }
    .summary-value { font-size: 26px; }
    .summary-comparison { font-size: 16px; }

    /* Bars taller on desktop */
    .bar-row { margin-bottom: 8px; }
    .bar-container { height: 8px; }
    .bar-fill { height: 8px; }
    .bar-val  { font-size: 12px; }
    .bar-symbol-left  { font-size: 11px; min-width: 38px; }
    .bar-symbol-right { font-size: 11px; min-width: 38px; }

    /* Foreign summary row */
    .foreign-summary { margin-bottom: 14px; }

    /* Chart inside widget — taller on desktop */
    /* [10.20.66] iframe khít đúng khung + bỏ đẩy âm để không cắt hàng thông tin trên
       và nhãn trục "0" dưới đáy (CafeF Highcharts tự vẽ đủ trong chiều cao khung). */
    .chart-container { height: 320px !important; }
    .liq-chart-iframe { height: 320px !important; margin-top: 0 !important; }

    /* Breadth bar */
    .breadth-bar { height: 36px; border-radius: 8px; }
    .breadth-segment { font-size: 14px; line-height: 36px; }
    .breadth-count-row { margin-top: 12px; }

    /* Sector heatmap + sức mạnh ngành — span 2 cols */
    #sectors-tab-content {
        grid-column: 1 / -1;
    }

    /* Smart chart span full width */
    #chartPage {
        grid-column: 1 / -1;
    }

    /* SSN chart taller */
    #ssn-chart-container { height: 380px !important; }

    /* Split bars wider */
    .split-bars-container { gap: 12px; }
    .split-side { flex: 1; }
    .split-header { font-size: 13px; margin-bottom: 10px; }
}

/* Tablet 600-899px — slightly wider than mobile */
@media (min-width: 600px) and (max-width: 899px) {
    .market-app-container {
        max-width: 580px;
        border-radius: 18px;
    }
}


/* Status Bar & Header Mock */
.app-header {
    background-color: var(--bg-main);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
}

.status-bar-placeholder { display: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px 4px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.icons-mock {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Header navigation - tabs and search */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
}

.tabs-pills {
    display: flex;
    gap: 4px;
    background-color: var(--bg-main);
    padding: 2px;
    border-radius: 16px;
}

.pill {
    background: none;
    border: none;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pill.active {
    background-color: var(--primary);
    color: #000000; /* Black text on gold background */
    font-weight: 600;
}

.search-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-main);
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.search-btn:hover {
    background-color: var(--bg-main);
}

/* Horizontal Indices Slider */
.indices-slider-container {
    padding: 8px 0 12px 0;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.indices-slider-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.indices-slider {
    display: flex;
    gap: 12px;
    padding: 0 16px;
}

/* Index Cards */
.index-card {
    flex: 1;
    min-width: 130px;
    max-width: 220px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.index-card.active {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(255, 210, 0, 0.15);
}

.index-name {
    font-size: 12px;
    font-weight: 700;
    color: #555555;
    margin-bottom: 2px;
}

.index-card.active .index-name {
    color: var(--primary);
}

.index-val-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 4px;
}

.index-val {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.index-pct {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Sparkline style inside card */
.index-sparkline {
    width: 100%;
    height: 35px;
}

.sparkline-path {
    fill: none;
    stroke-width: 1.5;
}

.sparkline-path.up {
    stroke: var(--color-up);
}

.sparkline-path.down {
    stroke: var(--color-down);
}

.sparkline-grad.up {
    fill: url(#grad-up);
}

/* Skeleton items during load */
.skeleton-card {
    min-width: 145px;
    height: 85px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: loading-pulse 1.5s infinite;
    border-radius: 12px;
}

@keyframes loading-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Index metrics bar under slider */
/* Index marquee container under slider */
.index-marquee-container {
    width: 100%;
    overflow: hidden;
    background: var(--ink-3);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    height: 38px;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 10px;
}

.index-marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 55s linear infinite;
    gap: 32px;
    padding-left: 20px;
    white-space: nowrap;
}

.index-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bone);
    font-family: var(--sans);
}

.marquee-item .sym {
    color: var(--gold);
}

.marquee-item .val {
    font-family: var(--mono);
    color: var(--bone-dim);
}

.marquee-item .pct {
    font-size: 0.78rem;
    font-weight: 700;
}

/* Sub tabs under index bar */
.sub-nav-container {
    overflow-x: auto;
    scrollbar-width: none;
}

.sub-nav-container::-webkit-scrollbar {
    display: none;
}

.sub-nav {
    display: flex;
    padding: 0 16px;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
}

.sub-tab {
    background: none;
    border: none;
    padding: 8px 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.sub-tab.active {
    color: var(--primary);
}

.sub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px 3px 0 0;
}

/* Main Content Area */
.app-content {
    flex: 1;
    background-color: var(--bg-main);
    padding: 12px 16px;
    overflow-y: visible !important;
    position: relative;
}

/* Loading Overlay inside content block */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 17, 15, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Content Sections */
.content-section {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.content-section.active {
    display: flex;
}

/* Widget Card styling (Premium visual design) */
.widget-card {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
}

/* [10.20.155] TAB CỔ PHIẾU: bỏ khung xám mờ bọc ngoài, tràn hết bề ngang.

   Anh Duy: "không còn viền xám mờ bọc xung quanh. Phải để nó mở rộng hết cỡ trong khung
   đó. Không biết bọc vào thì có tác dụng gì hơn?"

   Đúng là không có tác dụng gì hơn: khung đó chỉ vẽ một đường viền và ăn 16px đệm mỗi
   bên. Trên điện thoại, 32px bề ngang mất đi là chỗ đủ để chữ mã to thêm một cỡ. Tab
   Ngành đã bỏ khung từ bản 10.20.81 và nhìn thoáng hẳn — nay làm tiếp cho tab này. */
#sec-co-phieu > .widget-card,
#sec-co-phieu > .tp-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* [10.20.155] Dải tab Theo dõi / Tăng mạnh / Giảm mạnh… — chữ to và rõ hơn.

   Anh Duy: "cỡ chữ lại quá bé so với số. Cho nó tăng lên 1 chút (đừng to quá), và có lẽ
   nó cần màu rõ nét hơn (như màu trắng ở phiên bản đen, và màu đen ở phiên bản trắng)."

   11px cạnh những con số 1.35rem (≈22px) trông như chú thích chứ không như nút bấm được.
   Nâng lên 14px — vẫn nhỏ hơn số nên không tranh chỗ, mà đọc được. Màu chữ dùng
   --text-main (trắng ở nền tối, đen ở nền sáng) thay cho --text-muted xám nhạt. */
/* [10.20.209] Tab Cổ phiếu: 1 dòng trượt ngang, chữ đầy đủ không xuống dòng.
   Bấm tab nào thì scrollIntoView để tab đó hiện ra. */
#sec-co-phieu .segmented-control {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
}
#sec-co-phieu .segmented-control::-webkit-scrollbar { display: none; }
#sec-co-phieu .segmented-control .seg-btn {
    flex: none;
    white-space: nowrap;
    font-size: 14px;
    padding: 9px 14px;
    color: var(--text-main);
    opacity: .58;
}
#sec-co-phieu .segmented-control .seg-btn:hover { opacity: .85; }
#sec-co-phieu .segmented-control .seg-btn.active { opacity: 1; font-weight: 700; }

/* [10.20.81] Bản đồ nhiệt: bỏ khung/viền bọc để tràn rộng như tab Tin tức.
   Chỉ chừa chút lề ngang cho tiêu đề + hàng lọc; heatmap thì full-bleed. */
#sec-nganh > .widget-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
#sec-nganh > .widget-card > .widget-header { padding: 2px 6px 0; }
#sector-heatmap-content > div:first-child { padding: 0 6px; }
#sector-strength-content { padding: 0 6px; }

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.widget-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.subtitle-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* Dropdown Menu style trigger */
.dropdown-mock {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-main);
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    color: #4A5568;
    cursor: pointer;
}

/* Segmented Control Pills inside cards */
.segmented-control {
    display: flex;
    gap: 6px;
    background-color: var(--bg-main);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 14px;
}

.seg-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.seg-btn.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Liquidity summary styling */
.liquidity-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.summary-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
    display: block;
}

.summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}

.summary-comparison {
    font-size: 14px;
    font-weight: 700;
    margin-top: 6px;
}

/* Chart Container & SVG */
.chart-container {
    width: 100%;
    margin-bottom: 8px;
    position: relative;
}

body:not(.light) .liq-chart-iframe {
    filter: invert(0.93) hue-rotate(180deg) brightness(1.1) contrast(1.1);
}

.liquidity-chart {
    width: 100%;
    height: auto;
}

.chart-gridline {
    stroke: var(--border-color);
    stroke-width: 1;
    stroke-dasharray: 4, 4;
}

.chart-label-y {
    font-size: 10px;
    fill: var(--text-muted);
    text-anchor: end;
    font-weight: 500;
}

.chart-label-x {
    font-size: 10px;
    fill: var(--text-muted);
    text-anchor: middle;
    font-weight: 500;
}

.chart-label-x.text-right {
    text-anchor: end;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-orange { background-color: #F2994A; }
.dot-gray { background-color: #A0AAB5; }
.dot-green { background-color: var(--color-up); }
.dot-red { background-color: var(--color-down); }

/* Foreign Investment Summary */
.foreign-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.for-metric {
    font-size: 11px;
    margin-bottom: 2px;
}

/* Split Side Horizontal Bar charts */
.split-bars-container {
    display: flex;
    gap: 16px;
    position: relative;
}

.split-divider {
    width: 1px;
    background-color: var(--border-color);
}

.split-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.split-header {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.split-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Single bar row */
.bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    position: relative;
}

.bar-symbol-left {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    width: 32px;
}

.bar-symbol-right {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    width: 32px;
    text-align: right;
}

.bar-container {
    flex: 1;
    height: 12px;
    background-color: var(--bg-main);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 8px;
    position: relative;
}

.bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.1, 0.8, 0.3, 1);
}

.bar-fill.up {
    background-color: var(--color-up);
}

.bar-fill.down {
    background-color: var(--color-down);
}

.bar-val {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Table Style for Stock lists */
.table-container {
    width: 100%;
    overflow-x: auto;
}

.premium-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.premium-table th {
    color: var(--text-main);
    font-weight: 700;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.premium-table td {
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

.premium-table tbody tr:hover {
    background-color: var(--bg-main);
}

.premium-table td.text-right,
.premium-table th.text-right {
    text-align: right;
}

.table-symbol {
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.table-symbol:hover {
    text-decoration: underline;
}

/* [10.20.75] Top biến động kiểu Finpath: cột Mã · GTGD (Tỷ) · Giá · %, pill % màu theo trạng thái */
.premium-table td.tp-sym { font-weight: 800; font-size: 0.92rem; color: var(--text-main); }
.premium-table td.tp-val { font-family: var(--mono); font-weight: 700; color: var(--text-main); }
.premium-table td.tp-price { font-weight: 700; font-family: var(--mono); }
.tp-price.up { color: var(--color-up); }
.tp-price.down { color: var(--color-down); }
.tp-price.flat { color: var(--color-flat); }
.tp-price.ceil { color: var(--color-ceil); }
.tp-price.floor { color: var(--color-floor); }
.tp-pill {
    display: inline-block;
    min-width: 68px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.82rem;
    font-family: var(--mono);
}
.tp-pill.up { background: rgba(34,197,94,.14); color: var(--color-up); }
.tp-pill.down { background: rgba(224,87,91,.14); color: var(--color-down); }
.tp-pill.ceil { background: rgba(168,85,247,.16); color: var(--color-ceil); }
.tp-pill.floor { background: rgba(59,130,246,.16); color: var(--color-floor); }
.tp-pill.flat { background: rgba(234,179,8,.16); color: #b8860b; }
.tp-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
/* [10.20.155] BỎ MŨI TÊN TỰ THÊM BẰNG CSS — nó gây ra "mũi tên đôi" anh Duy thấy trong ảnh.

   Hàng tiêu đề mới đã có sẵn thẻ <i>⇅</i> viết thẳng trong HTML, vì mũi tên đó cần đổi
   thành ↑ hoặc ↓ khi bấm sắp xếp — mà nội dung do CSS sinh ra thì JavaScript không sửa
   được. Giữ cả hai thành ra mỗi nhãn có hai mũi tên cạnh nhau: "Mã ⇅ ⇅".

   Bỏ ba dòng CSS này, giữ thẻ trong HTML. Lớp .tp-asc / .tp-desc cũng không dùng nữa
   (nay đánh dấu cột đang sắp bằng lớp .on đổi màu vàng, rõ hơn hẳn mũi tên bé xíu). */
.tp-sortable { /* mũi tên nằm trong HTML, xem #tpHead */ }

/* Heatmap Grid */
/* [10.20.69] TREEMAP nhóm theo ngành (kiểu Finpath). Các thẻ ngành xếp gạch multi-column
   (JS đặt column-width theo bề rộng: ĐT 2 cột / tablet 3 / máy tính 4). Ô mã đặt tuyệt đối,
   to nhỏ theo khối lượng (Result). */
.heatmap-container {
    position: relative;   /* JS masonry đặt thẻ ngành tuyệt đối vào cột ngắn nhất */
    margin-top: 8px;
}
.heatmap-sector {
    position: absolute;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
}
/* Nền Sáng: nền market trắng hẳn, thẻ ngành trắng-nhạt có viền cho tách bạch, hết "nhờ nhờ"/đen */
body.light .market-app-container { background: #ffffff; }
body.light .heatmap-sector { background: #f4f6f9; border-color: #e4e8ec; }
.sector-title {
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 17px;
    line-height: 17px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}
.heatmap-sector .map {
    position: absolute;   /* left/top/width/height do JS đặt */
}
.heatmap-block {
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.05;
    color: #FFFFFF;
    cursor: pointer;
    padding: 2px;
    transition: filter 0.12s ease;
}
.heatmap-block:hover { filter: brightness(1.12); z-index: 5; }
.heatmap-block.up { background-color: var(--color-up); }
.heatmap-block.down { background-color: var(--color-down); }
.heatmap-block.flat { background-color: var(--color-flat); color: #3a2f00; }
.heatmap-block.ceil { background-color: var(--color-ceil); }
.heatmap-block.floor { background-color: var(--color-floor); }
.heatmap-block .tm-s { font-weight: 800; }
.heatmap-block .tm-p { opacity: .95; margin-top: 1px; }

.heatmap-skeleton {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Impact Index list widgets */
.impact-split-container {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.impact-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.impact-header-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.impact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Impact single row layout - Image 4 */
.impact-row {
    display: flex;
    align-items: center;
    height: 24px;
}

.impact-symbol {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    width: 32px;
}

.impact-bar-container {
    flex: 1;
    height: 12px;
    position: relative;
    border-radius: 3px;
    background-color: var(--bg-main);
    overflow: hidden;
}

.impact-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.1, 0.8, 0.3, 1);
}

.impact-bar.up {
    background-color: var(--color-up);
    float: left;
}

.impact-bar.down {
    background-color: var(--color-down);
    float: right;
}

.impact-val {
    font-size: 10px;
    font-weight: 600;
    width: 32px;
}

.impact-val.text-right {
    text-align: right;
    margin-left: 6px;
}

.impact-val.text-left {
    text-align: left;
    margin-right: 6px;
}

/* Utility classes for colors */
.text-up { color: var(--color-up); }
.text-down { color: var(--color-down); }
.text-flat { color: var(--color-flat); }
.font-semibold { font-weight: 600; }

/* Footer Navigation Bar Mock */
.app-footer {
    height: 56px;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.footer-nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.footer-nav-item i {
    font-size: 18px;
}

.footer-nav-item.active {
    color: var(--primary);
}

/* Modal Bottom Sheet - Image 3 */
.modal-overlay {
    position: absolute; /* Set inside phone frame */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    justify-content: flex-end;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

.bottom-sheet-modal {
    background-color: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 20px 16px;
    max-height: 80%;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);
}

.modal-overlay.active .bottom-sheet-modal {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h4 {
    font-size: 16px;
    font-weight: 700;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.modal-option {
    background: none;
    border: none;
    padding: 14px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.modal-option:hover,
.modal-option.active {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.modal-cancel-btn {
    background-color: var(--bg-main);
    border: none;
    color: var(--text-muted);
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
}

/* Styles for Gold & Forex Tab */
.gold-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.gold-box.world {
    background-color: var(--bg-main);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--border-color);
}

.gold-box-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.gold-price-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.gold-price-vnd {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

.gold-change {
    font-size: 13px;
    font-weight: 600;
}

.gold-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gold-sub-box {
    background-color: var(--bg-main);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.gold-sub-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
}

.gold-row-val {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.gold-sub-change {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--text-muted);
}

/* Make sure tables are scrollable on smaller screens */
.table-container {
    width: 100%;
    overflow-x: auto;
}

/* Crypto specific styles */
.crypto-logo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.crypto-symbol {
    font-weight: 700;
    color: var(--text-main);
}

.crypto-name {
    font-size: 11px;
    color: var(--text-muted);
}



/* ===== LIGHT THEME FOR MARKET PAGE ===== */
body.light #marketPage {
    --bg-main: #FFFFFF;
    --bg-card: #F4F6F9;
    --primary: #c99700;
    --primary-light: rgba(201, 151, 0, 0.12);
    --text-main: #0d0d0d;
    --text-muted: #666666;
    --border-color: #d8d8d8;
    
    --color-up: #22c55e;
    --color-down: #e0575b;
    --color-flat: #F2C94C;
    --color-ceil: #a855f7;
    --color-floor: #3b82f6;
    
    --color-up-bg: rgba(39, 174, 96, 0.1);
    --color-down-bg: rgba(235, 87, 87, 0.1);
    --color-flat-bg: rgba(242, 201, 76, 0.1);
    
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
}
body.light #marketPage .skeleton-card {
    background: linear-gradient(90deg, #F0F2F5 25%, #E6E8EB 50%, #F0F2F5 75%);
}
body.light #marketPage .index-marquee-container {
    background-color: #FAFCFE;
    border-color: #e2e8f0;
}
body.light #marketPage .bar-container,
body.light #marketPage .impact-bar-container {
    background-color: #F8FAFC;
}
body.light #marketPage .premium-table tbody tr:hover {
    background-color: #F8FAFC;
}

/* Market Breadth Styles */
.breadth-container {
    padding: 8px 4px;
}
.breadth-bar {
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    margin: 12px 0 16px 0;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
}
.breadth-segment {
    transition: width 0.3s ease;
    min-width: 25px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.breadth-segment.up {
    background-color: var(--color-up);
}
.breadth-segment.flat {
    background-color: var(--color-flat);
    color: #333333;
}
.breadth-segment.down {
    background-color: var(--color-down);
}
.breadth-legend {
    display: flex;
    justify-content: space-around;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
}
.breadth-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.breadth-legend .legend-item strong {
    color: var(--text-main);
}
.breadth-legend .dot-up {
    background-color: var(--color-up);
}
.breadth-legend .dot-flat {
    background-color: var(--color-flat);
}
.breadth-legend .dot-down {
    background-color: var(--color-down);
}

/* Symbol inside Top Viewed Table */
.symbol-link {
    font-weight: 700;
    color: var(--primary) !important;
    text-decoration: none;
    cursor: pointer;
}
.symbol-link:hover {
    text-decoration: underline;
}

/* Sector Strength Styles */
.sector-tab-content {
    display: none;
}
.sector-tab-content.active {
    display: block;
}
.controls-row {
    margin-bottom: 15px;
}
.sector-click-name {
    transition: color 0.2s ease;
}
.sector-click-name:hover {
    color: var(--gold) !important;
    text-decoration: underline;
}

/* Mobile responsive optimization for Sector Strength */
@media (max-width: 480px) {
    #sector-strength-content .controls-row {
        padding: 8px !important;
        gap: 6px !important;
    }
    #sector-strength-content .controls-row label {
        font-size: 11px !important;
    }
    #sector-strength-content .controls-row input,
    #sector-strength-content .controls-row select,
    #sector-strength-content #ssn-refresh {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }
    #sector-strength-content div[style*="height: 280px"] {
        height: 210px !important;
    }
    #ssn-legend-table td, 
    #ssn-legend-table th {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }
}

/* High-Contrast Premium Tab Switcher for Sector Analysis */
#sectors-nav-tabs {
    display: flex;
    gap: 8px;
    background-color: var(--ink-3) !important;
    border: 1px solid var(--border-color) !important;
    padding: 5px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 320px; /* limits width on desktop so it doesn't look too stretched */
}
#sectors-nav-tabs .seg-btn {
    flex: 1;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}
#sectors-nav-tabs .seg-btn.active {
    background-color: var(--primary) !important; /* Gold background */
    color: #0c110f !important; /* Dark text */
    border-color: var(--primary) !important;
    box-shadow: 0 4px 16px rgba(255, 210, 0, 0.25) !important;
    font-weight: 800 !important;
}
#sectors-nav-tabs .seg-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
@media (max-width: 480px) {
    #sectors-nav-tabs {
        max-width: 100% !important;
        margin-bottom: 12px !important;
        padding: 4px !important;
    }
    #sectors-nav-tabs .seg-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* Timeframe Quick-Select Buttons Style */
.ssn-tf-btn {
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.ssn-tf-btn:hover {
    color: var(--text-main) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.ssn-tf-btn.active {
    background: var(--primary) !important;
    color: #0c110f !important;
}

/* ===== DESKTOP SECTION OVERRIDES (≥900px) ===== */
@media (min-width: 900px) {
    /* Tổng quan: 2-column grid.
       align-items: stretch -> 2 ô cùng hàng (Thanh khoản/Top biến động,
       Nước ngoài/Tự doanh) luôn BẰNG chiều cao, đáy thẳng hàng, hết "thụt". */
    #sec-tong-quan.active {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }
    #sec-tong-quan.active > .widget-card {
        display: flex;
        flex-direction: column;
    }
    #sec-tong-quan .widget-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Cổ phiếu: first widget full-width, rest 2-col */
    #sec-co-phieu.active {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    #sec-co-phieu .widget-card:first-child {
        grid-column: 1 / -1;
    }

    /* Ngành: full-width single column */
    #sec-nganh.active {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        align-items: stretch !important;
    }

    /* Tác động: full-width single column */
    #sec-tac-dong.active {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        align-items: stretch !important;
    }

    /* Heatmap: JS tự set chiều cao theo masonry, không ép min-height (tránh trống đáy). */

    /* Sector strength table larger */
    #ssn-table-container {
        max-height: 420px;
    }
    #ssn-chart-container {
        height: 380px !important;
    }

    /* Impact list scroll area */
    .impact-list {
        max-height: 360px;
    }
}

/* Custom responsive classes for Tác động Index & Heatmap desktop layout */
.impact-horizontal-chart-container {
    display: none;
}
@media (min-width: 900px) {
    /* [10.20.69] Treemap: JS tự đặt column-width theo bề rộng (2/3/4 cột). Không ép ở đây. */
    .heatmap-container {
        display: block !important;
        grid-template-columns: none !important;
    }

    .impact-split-container {
        display: none !important;
    }
    
    .impact-horizontal-chart-container {
        display: flex !important;
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }
    
    .svg-chart-wrapper {
        width: 100%;
        height: 340px;
        background: var(--bg-card);
        border-radius: 12px;
        padding: 15px 10px 10px 10px;
        position: relative;
        border: 1px solid var(--border-color);
        box-sizing: border-box;
    }
    
    .impact-summary-bar {
        display: flex;
        height: 32px;
        border-radius: 6px;
        overflow: hidden;
        font-weight: 700;
        font-size: 0.85rem;
        color: #FFFFFF;
        text-align: center;
        line-height: 32px;
    }
    
    .sum-bar-pos {
        background-color: var(--color-up);
        transition: width 0.3s ease;
    }
    
    .sum-bar-neg {
        background-color: var(--color-down);
        transition: width 0.3s ease;
    }
}

body.light .loading-overlay {
    background-color: rgba(255, 255, 255, 0.55) !important;
}

/* Centered popup modal for Heatmap Chart */
#heatmap-chart-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    display: none;
    justify-content: center !important;
    align-items: center !important;
}

#heatmap-chart-popup.active {
    display: flex !important;
}

#heatmap-chart-popup .bottom-sheet-modal {
    border-radius: 16px !important;
    transform: scale(0.9) !important;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
    width: 92% !important;
    max-width: 600px !important;
    height: auto !important;
    margin: auto !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
}

#heatmap-chart-popup.active .bottom-sheet-modal {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Net Flow Grid Layout */
.net-flow-grid-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-top: 15px;
}
.net-flow-metrics-box {
    background: var(--ink-3);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.net-flow-chart-box {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .net-flow-grid-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ============================================================
   SỔ XUỐNG CHỌN NGÀNH (tab Ngành → Sức mạnh ngành)
   Cho phép tick chọn vài ngành thay vì hiện cả 33 ngành.
   Thứ tự xếp hạng luôn được giữ nguyên, chỉ lọc bớt dòng.
   ============================================================ */
.ssn-picker { position: relative; display: inline-block; }

.ssn-picker-btn {
    display: flex; align-items: center; gap: 6px;
    background: #0f1412;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.ssn-picker-btn:hover { border-color: var(--primary); color: var(--primary); }
.ssn-picker.open .ssn-picker-btn { border-color: var(--primary); color: var(--primary); }
.ssn-picker.open .ssn-picker-btn svg { transform: rotate(180deg); }
.ssn-picker-btn svg { transition: transform .18s; }

.ssn-picker-panel {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 260px;
    background: #0f1412;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.62);
    z-index: 9999;
    overflow: hidden;
}
.ssn-picker.open .ssn-picker-panel { display: block; }

.ssn-picker-head {
    display: flex; gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}
.ssn-picker-head button {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.74rem; font-weight: 600;
    padding: 5px 6px; cursor: pointer;
    transition: .12s;
}
.ssn-picker-head button:hover { border-color: var(--primary); color: var(--primary); }

.ssn-picker-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.ssn-picker-list::-webkit-scrollbar { width: 8px; }
.ssn-picker-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.ssn-pick-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 6px;
    cursor: pointer; user-select: none;
    font-size: 0.79rem; color: var(--text-muted);
    transition: background .1s;
}
.ssn-pick-item:hover { background: rgba(255,255,255,.04); }
.ssn-pick-item.on { color: var(--text-main); font-weight: 700; }

.ssn-pick-box {
    width: 15px; height: 15px; flex: none;
    border: 1.5px solid var(--border-color);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900; color: #111;
    transition: .12s;
}
.ssn-pick-item.on .ssn-pick-box { background: var(--primary); border-color: var(--primary); }
.ssn-pick-item.on .ssn-pick-box::after { content: "✓"; }

.ssn-pick-rank { margin-left: auto; font-size: 0.7rem; opacity: .5; flex: none; }

.ssn-picker-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.74rem; color: var(--text-muted);
}
.ssn-picker-foot button {
    background: var(--primary); color: #111;
    border: 0; border-radius: 6px;
    padding: 5px 16px; font-size: 0.76rem; font-weight: 700;
    cursor: pointer;
}

/* Trên điện thoại: mở rộng gần hết bề ngang cho dễ bấm */
@media (max-width: 560px) {
    .ssn-picker-panel { width: min(300px, calc(100vw - 40px)); }
}

body.light .ssn-picker-btn,
body.light .ssn-picker-panel { background: #fff; }

/* ============================================================
   Ô "LỌC THEO NGÀNH" — SỬA LỖI ĐEN KỊT Ở NỀN SÁNG   [v10.20.28]

   HAI LỖI CHỒNG NHAU:

   1) Màu nền bị viết chết thẳng vào thẻ HTML:
         style="background:#0f1412; ..."
      Không dùng biến nên đổi nền Sáng/Tối nó vẫn đen sì. Người dùng nền Sáng
      nhìn thấy một hộp đen giữa trang trắng, chữ đen trên nền đen -> mù luôn.

   2) Code gọi var(--text-primary) — BIẾN NÀY CHƯA TỪNG ĐƯỢC ĐỊNH NGHĨA.
      Tên thật là --text-main. Gọi biến không tồn tại thì trình duyệt bỏ qua
      cả dòng đó, chữ ăn màu thừa kế của thẻ cha. (Đã sửa hết 8 chỗ.)

   Vì màu nằm trong thuộc tính style= của thẻ nên CSS thường KHÔNG thắng được.
   Bắt buộc phải dùng !important.
   ============================================================ */
#marketPage .multiselect-trigger {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
#marketPage .multiselect-trigger:hover {
    border-color: var(--primary) !important;
}
#marketPage .multiselect-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
#marketPage .multiselect-dropdown label {
    color: var(--text-main) !important;
}
#marketPage .multiselect-dropdown > div:hover {
    background: var(--primary-light) !important;
}
/* Ô tick cho ăn màu vàng thương hiệu, nền Sáng nhìn mới rõ */
#marketPage .multiselect-dropdown input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px; height: 15px;
}

/* Nền Sáng: đổ bóng nhẹ + viền rõ để hộp nổi trên nền trắng */
body.light #marketPage .multiselect-trigger,
body.light #marketPage .multiselect-dropdown {
    background: #FFFFFF !important;
    border-color: #d8d8d8 !important;
    color: #0d0d0d !important;
}
body.light #marketPage .multiselect-dropdown {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14) !important;
}
body.light #marketPage .multiselect-dropdown label {
    color: #0d0d0d !important;
}

/* Ô sổ xuống "Chọn ngành" bên tab Sức mạnh ngành — cùng bệnh, vá cùng thuốc */
body.light .ssn-picker-btn,
body.light .ssn-picker-panel {
    background: #FFFFFF !important;
    border-color: #d8d8d8 !important;
    color: #0d0d0d !important;
}
body.light .ssn-picker-panel {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16) !important;
}
body.light .ssn-pick-item.on { color: #0d0d0d !important; }
body.light .ssn-picker-head button:hover { color: #c99700 !important; }

/* ============================================================
   TĂNG CỠ CHỮ CHO DỄ ĐỌC   [v10.20.28]
   Khách hàng của anh Duy 30–50 tuổi, chữ cũ quá bé.
   Tăng có kiểm soát, không phá vỡ bố cục.
   ============================================================ */

/* --- Tab Tổng quan / Ngành / Cổ phiếu / Tác động Index ---
   Cũ: 14px điện thoại, 16px web. Đây là thanh điều hướng chính của tab
   Thị trường mà lại bé hơn cả chữ trong bảng -> mất cân đối thị giác. */
#marketPage .sub-tab {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 11px 2px !important;
}
#marketPage .sub-nav {
    gap: 24px !important;
}
@media (min-width: 900px) {
    #marketPage .sub-tab {
        font-size: 19px !important;
        padding: 13px 2px !important;
    }
    #marketPage .sub-nav {
        gap: 34px !important;
    }
    /* Gạch chân tab đang chọn dày lên cho cân với chữ to */
    #marketPage .sub-tab.active::after {
        height: 4px !important;
    }
}

/* --- Tên ngành (Ngân hàng, Bảo hiểm, Bất động sản…) ---
   Cũ: 11px — quá bé so với vai trò tiêu đề nhóm. */
#marketPage .sector-title {
    font-size: 11.5px !important;
    padding: 0 6px !important;
    letter-spacing: 0.2px !important;
}
@media (min-width: 900px) {
    #marketPage .sector-title {
        font-size: 12px !important;
        padding: 0 8px !important;
    }
}

/* --- Mã cổ phiếu và % trong ô bản đồ nhiệt ---
   Cũ: mã 12px, % 10px. Ô đủ rộng, chữ to lên vẫn nằm gọn. */
#marketPage .block-symbol {
    font-size: 14px !important;
    margin-bottom: 3px !important;
}
#marketPage .heatmap-block {
    font-size: 12px !important;
}
@media (min-width: 900px) {
    #marketPage .block-symbol { font-size: 15px !important; }
    #marketPage .heatmap-block { font-size: 12.5px !important; }
}

/* --- Nút Bản đồ nhiệt / Sức mạnh ngành --- */
@media (min-width: 900px) {
    #sectors-nav-tabs .seg-btn {
        font-size: 14.5px !important;
        padding: 11px 16px !important;
    }
}

/* --- Nhãn "Lọc theo ngành" và ô chọn --- */
#marketPage .multiselect-trigger {
    font-size: 0.9rem !important;
    min-height: 34px !important;
}
#marketPage .multiselect-dropdown label {
    font-size: 0.88rem !important;
}


/* ==========================================================================
   X-STYLE PREMIUM PRICING PANEL & NEWS PAYWALL BLUR
   ========================================================================== */

/* 1. Nền & Khung Modal X-style */
.pricing-modal-x {
    animation: fadeInScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== X-STYLE 1 CỘT (10.20.66) — tối giản, tương thích Sáng/Tối =====
   Dùng biến theme (--bone, --gold, --muted...) nên tự đổi màu theo body.light.
   Không hardcode #fff/#000 để không bị "chữ trắng trên nền trắng". */

/* 1. Tiêu đề */
#duyUptrendPricing .pricing-header-wrapper {
    text-align: center;
    margin-bottom: 20px;
}
#duyUptrendPricing .eyebrow {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
#duyUptrendPricing .pricing-header {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bone);
    margin: 0;
}

/* 2. Tab chọn gói (luôn hiện, cả desktop lẫn mobile) */
#duyUptrendPricing .tab-switcher {
    display: flex;
    background: rgba(127, 138, 155, 0.10);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 18px;
    gap: 3px;
}
#duyUptrendPricing .tab-switcher .tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 10px 0;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
#duyUptrendPricing .tab-switcher .tab-btn.active {
    background: var(--gold);
    color: #111;
    box-shadow: 0 3px 10px rgba(255, 210, 0, 0.22);
}

/* 3. Khối gói (1 cột — chỉ hiện gói đang chọn, JS bật display:flex) */
#duyUptrendPricing .pricing-card-wrapper {
    display: block;
    margin: 0 auto 18px;
}
#duyUptrendPricing .pricing-card-detail {
    background: rgba(127, 138, 155, 0.06);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
}
body.light #duyUptrendPricing .pricing-card-detail {
    background: #faf8f2;
    border-color: #ececec;
}
/* Gói Pro nổi nhẹ */
#duyUptrendPricing #content-pro {
    border-color: rgba(255, 210, 0, 0.35);
}
body.light #duyUptrendPricing #content-pro {
    border-color: rgba(184, 134, 11, 0.4);
    background: #fffdf3;
}

/* Badge + tiêu đề gói */
#duyUptrendPricing .card-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}
#duyUptrendPricing .card-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bone);
    margin: 0 0 14px 0;
}

/* Giá */
#duyUptrendPricing .price-box {
    margin-bottom: 18px;
    min-height: 44px;
}
#duyUptrendPricing .card-price {
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--bone);
    line-height: 1;
}
#duyUptrendPricing .card-price .period {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
    margin-left: 4px;
}
#duyUptrendPricing .card-price .discount-badge {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.12);
    color: var(--signal);
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Danh sách quyền lợi (1 cột, có icon) */
#duyUptrendPricing .card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#duyUptrendPricing .card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--bone-dim);
}
#duyUptrendPricing .card-features li strong {
    color: var(--bone);
}
#duyUptrendPricing .card-features .check-icon {
    color: var(--gold);
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

/* 4. Khối chọn kỳ Tháng/Năm (đặt ở đáy, ngay trên CTA) */
#duyUptrendPricing .billing-toggle {
    display: flex;
    background: rgba(127, 138, 155, 0.10);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 4px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px;
    gap: 4px;
}
#duyUptrendPricing .billing-toggle .toggle-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#duyUptrendPricing .billing-toggle .toggle-btn.active {
    background: var(--gold);
    color: #111;
    box-shadow: 0 3px 10px rgba(255, 210, 0, 0.22);
}

/* 5. Nút CTA lớn duy nhất — chữ căn GIỮA */
#duyUptrendPricing .cta-main {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: var(--gold);
    color: #0d0d0d;
    font-size: 1.02rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(255, 210, 0, 0.25);
}
#duyUptrendPricing .cta-main:hover {
    background: var(--gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 210, 0, 0.3);
}
body.light #duyUptrendPricing .cta-main {
    color: #ffffff;
}
#duyUptrendPricing .cta-sub {
    text-align: center;
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 10px;
}

/* 6. Paywall News Blur Effect */
.paywall-container {
    position: relative;
    overflow: hidden;
    max-height: 340px;
}

.paywall-blur {
    filter: blur(10px);
    opacity: 0.35;
    user-select: none;
    pointer-events: none;
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.paywall-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(23,25,29,0) 0%, rgba(23,25,29,0) 48%, rgba(23,25,29,0.90) 80%, rgba(23,25,29,0.99) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 12px 12px;
    text-align: center;
    z-index: 10;
    pointer-events: none;
}
.paywall-overlay .paywall-box { pointer-events: auto; }
body.light .paywall-overlay {
    background: linear-gradient(to bottom, rgba(244,244,244,0) 0%, rgba(244,244,244,0) 48%, rgba(244,244,244,0.90) 80%, rgba(244,244,244,0.99) 100%);
}

.paywall-box {
    background: rgba(23, 24, 33, 0.95);
    border: 1px solid rgba(255, 210, 0, 0.35);
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.paywall-box-h {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.paywall-box-desc {
    font-size: 0.78rem;
    color: var(--bone-dim);
    margin-bottom: 12px;
    line-height: 1.35;
}

.paywall-box-btn {
    background: var(--gold);
    color: #0d1117;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.paywall-box-btn:hover {
    background: #ffe066;
    box-shadow: 0 4px 12px rgba(255, 210, 0, 0.2);
}