/* ============================================
   VN STOCK MARKET - PROFESSIONAL DARK THEME
   ============================================ */

:root {
    /* Color Palette - tinted dark navy (not pure black) */
    --bg-primary: #0a0a1a;
    --bg-secondary: #12122a;
    --bg-card: #1a1a35;
    --bg-card-hover: #222250;
    --border-color: #2a2a55;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #9999bb;
    --text-muted: #6666aa;

    /* Accent Colors - slightly desaturated so data colors read calmer */
    --accent-green: #2ee68a;
    --accent-green-dark: #1fc873;
    --accent-green-bg: rgba(46, 230, 138, 0.1);
    --accent-red: #ff5c78;
    --accent-red-dark: #d9415d;
    --accent-red-bg: rgba(255, 92, 120, 0.1);
    --accent-yellow: #ffcc00;
    --accent-yellow-bg: rgba(255, 204, 0, 0.1);
    --accent-blue: #2eaaff;
    --accent-blue-dark: #1a88d6;
    --accent-blue-bg: rgba(46, 170, 255, 0.1);
    --accent-purple: #aa66ff;
    --accent-purple-bg: rgba(170, 102, 255, 0.1);

    /* Gradients */
    --gradient-green: linear-gradient(135deg, #2ee68a 0%, #1fc873 100%);
    --gradient-red: linear-gradient(135deg, #ff5c78 0%, #d9415d 100%);
    --gradient-blue: linear-gradient(135deg, #2eaaff 0%, #1a6fd6 100%);
    --gradient-purple: linear-gradient(135deg, #aa66ff 0%, #7744cc 100%);
    --gradient-card: linear-gradient(180deg, #1a1a35 0%, #12122a 100%);

    /* Shadows - tinted with the dark-navy background hue (not pure black) */
    --shadow-sm: 0 2px 8px rgba(8, 8, 26, 0.45);
    --shadow-md: 0 4px 16px rgba(8, 8, 26, 0.55);
    --shadow-lg: 0 12px 40px rgba(6, 6, 22, 0.65);
    --shadow-glow-green: 0 0 20px rgba(46, 230, 138, 0.25);
    --shadow-glow-red: 0 0 20px rgba(255, 92, 120, 0.25);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Fonts */
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* z-index scale (clean, no arbitrary 9999) */
    --z-base: 1;
    --z-sticky: 100;
    --z-dropdown: 500;
    --z-modal: 2000;
    --z-toast: 3000;

    /* Typography scale (BỔ SUNG) */
    --font-size-display: 2.1rem;   /* index-value, số liệu lớn */
    --font-size-h1: 1.6rem;
    --font-size-h2: 1.25rem;       /* section-title */
    --font-size-h3: 1rem;          /* card-header h3 */
    --font-size-body: 0.9rem;
    --font-size-label: 0.75rem;    /* nhãn phụ, stat-label */
    --font-size-micro: 0.65rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-body: 1.6;

    /* Semantic state tokens (ánh xạ lên token màu sẵn có) */
    --color-up: var(--accent-green);
    --color-up-bg: var(--accent-green-bg);
    --color-down: var(--accent-red);
    --color-down-bg: var(--accent-red-bg);

    /* Token màu cho TradingView (đọc bởi JS qua getComputedStyle) */
    --tv-bg: var(--bg-card);
    --tv-grid: var(--border-color);
    --tv-text: var(--text-secondary);
    --tv-up: var(--accent-green);
    --tv-down: var(--accent-red);
    --tv-volume-up: rgba(46, 230, 138, 0.5);
    --tv-volume-down: rgba(255, 92, 120, 0.5);
}

/* ============================================
   UTILITY CLASSES FOR VALUE COLORING
   ============================================ */

.positive {
    color: var(--color-up) !important;
}

.negative {
    color: var(--color-down) !important;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Display font for headings — more character than Inter alone */
h1, h2, h3,
.logo-text,
.section-title,
.index-value {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Tabular figures for all numeric/data displays — digits align in columns */
.index-value,
.change-value,
.change-percent,
.stat-value,
.stat-number,
.summary-value,
.b-val,
.net-value,
.flow-value,
.breadth-count,
.stock-value,
.industry-value,
.investor-value,
.investor-stock-list li,
.data-table td,
.data-table th,
.price-table td,
.price-table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ============================================
   HEADER
   ============================================ */

.header {
    background: linear-gradient(180deg, #14142e 0%, #0e0e26 100%);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(46, 170, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44px;
    gap: 8px;
    max-width: 100%;
    padding: 0 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid var(--border-color);
    margin-right: 0;
    letter-spacing: -0.02em;
}
/* Logo Bee.Vn — lục giác honeycomb */
.bee-logo { flex-shrink: 0; display: block; width: 24px; height: 24px; }
.logo .bee-logo + .logo-text { margin-left: 2px; }

.logo-icon {
    font-size: 1.3rem;
}

.logo-text .highlight {
    background: var(--gradient-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue-dark, #1a88d6) transparent;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    align-items: stretch;
}
.nav::-webkit-scrollbar {
    height: 4px;
}
.nav::-webkit-scrollbar-track {
    background: transparent;
}
.nav::-webkit-scrollbar-thumb {
    background: var(--border-color, #2a2a55);
    border-radius: 3px;
}
.nav::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue-dark, #1a88d6);
}

.nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 9px;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

/* "Danh mục" là <a> sang trang riêng — bỏ gạch chân và kế thừa mọi thứ còn lại
   từ .nav-btn để nhìn không khác gì các tab bên cạnh. */
.nav-btn-link,
.nav-btn-link:hover,
.nav-btn-link:visited {
    text-decoration: none;
}
.nav-btn[hidden] {
    display: none;
}

.nav-btn:hover {
    background: transparent;
    color: var(--text-primary);
}

.nav-btn.active {
    background: transparent;
    color: var(--accent-blue);
    border: none;
    border-bottom: 2px solid var(--accent-blue);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.update-time {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.8;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.refresh-btn {
    background: var(--gradient-blue);
    border: none;
    color: white;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-fast);
}

.refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.refresh-icon {
    animation: none;
}

.refresh-btn:active .refresh-icon {
    animation: spin 0.5s linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.update-time {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-family: 'Courier New', monospace;
}

.header .user-info,
.header-action-link,
.header-logout-btn {
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
}

.header-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 3px;
    text-decoration: none;
    border-radius: 5px;
}

.header-action-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.header-action-link.portfolio-link { color: var(--accent-blue); }
.header-action-link.admin-link { color: var(--accent-purple); }

.notif-bell { position: relative; margin-left: 0; }
.header-icon-btn {
    position: relative;
    min-width: 30px;
    min-height: 28px;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}

.header-logout-btn {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

/* Nhãn "Cập nhật" chỉ hiện khi header còn dư chỗ; hẹp hơn thì nút còn ↻ + giờ
   (tooltip vẫn nói rõ chức năng). */
.refresh-label { display: none; }
@media (min-width: 1400px) {
    .refresh-label { display: inline; }
}

/* ── Menu tài khoản ────────────────────────────────────────────────────────
   Gộp Danh mục / Quản trị / Đổi mật khẩu / Đăng xuất vào một nút để thanh
   header không phải cõng 4 link chữ. */
.user-menu { position: relative; display: inline-flex; }
.user-menu[hidden] { display: none; }

.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 2px 6px 2px 3px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    transition: var(--transition-fast);
}
.user-menu-trigger:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
}
.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-blue);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}
.user-menu-caret { font-size: 0.6rem; opacity: 0.7; }
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 190px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-menu-panel[hidden] { display: none; }

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.user-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
.user-menu-item.portfolio-link { color: var(--accent-blue); }
.user-menu-item.admin-link { color: var(--accent-purple); }
.user-menu-logout {
    margin-top: 2px;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 7px 7px;
    color: var(--accent-red);
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main {
    padding: var(--spacing-xl) 0;
    min-height: calc(100vh - 70px - 80px);
}

.tab-content {
    display: none;
    padding: 0 var(--spacing-lg);
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MARKET OVERVIEW CARDS
   ============================================ */

.market-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.market-overview > .index-card {
    flex: 1 1 300px;
    min-width: 250px;
    overflow: visible;
}

/* Gộp VNINDEX + VN30 vào 1 panel pair (grid 2 cột, responsive) */
.index-cards-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md, 12px);
    width: 100%;
}
.index-cards-pair > .index-card {
    min-width: 0; /* grid item co giãn đúng, không tràn */
}
@media (max-width: 768px) {
    .index-cards-pair {
        grid-template-columns: 1fr; /* màn nhỏ → stack dọc */
    }
}

/* Cho phép chart-card nằm trong market-overview cũng tự giãn */
.market-overview > .chart-card {
    flex: 1 1 400px;
    min-width: 250px;
}

/* Khi panel bị resize nhỏ, nội dung tự wrap/scale */
.index-card .index-stats {
    flex-wrap: wrap;
}

.index-card .index-main-row {
    flex-wrap: wrap;
}

.index-card .index-chart-mini {
    min-height: 40px;
}

.index-main-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.index-info-left {
    display: flex;
    flex-direction: column;
}

.index-breadth-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 105px;
}

.breadth-stats-mini {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.breadth-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.b-val {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
}

.breadth-col.positive .b-val {
    color: var(--accent-green);
}

.breadth-col.warning .b-val {
    color: var(--accent-yellow);
}

.breadth-col.negative .b-val {
    color: var(--accent-red);
}

.b-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.breadth-bar-mini {
    width: 100%;
    height: 4px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.bar-seg {
    height: 100%;
}

.bar-seg.positive {
    background: var(--accent-green);
}

.bar-seg.warning {
    background: var(--accent-yellow);
}

.bar-seg.negative {
    background: var(--accent-red);
}

.index-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.index-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-blue);
}

.index-card.vnindex::before {
    background: var(--gradient-green);
}

.index-card.vn30::before {
    background: var(--gradient-blue);
}

.index-card.hnx::before {
    background: var(--gradient-purple);
}

.index-card.market-breadth::before {
    background: var(--gradient-green);
}

.index-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.index-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.index-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.index-exchange {
    background: var(--bg-primary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.index-value {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-xs);
}

.index-change {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.index-change.positive {
    color: var(--accent-green);
}

.index-change.negative {
    color: var(--accent-red);
}

.change-value {
    font-weight: 600;
}

.change-percent {
    color: inherit;
}

.index-stats {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.stat-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.stat-change {
    font-size: 0.65rem;
    font-weight: 500;
    margin-left: 2px;
}

.stat-change.positive {
    color: var(--accent-green);
}

.stat-change.negative {
    color: var(--accent-red);
}

.index-chart-mini {
    height: 60px;
}

.index-breadth {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}


/* Market Breadth */
.breadth-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.breadth-item {
    text-align: center;
}

.breadth-count {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

.breadth-item.advance .breadth-count {
    color: var(--accent-green);
}

.breadth-item.unchanged .breadth-count {
    color: var(--accent-yellow);
}

.breadth-item.decline .breadth-count {
    color: var(--accent-red);
}

.breadth-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.breadth-bar {
    display: flex;
    height: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-primary);
}

.breadth-advance {
    background: var(--accent-green);
}

.breadth-unchanged {
    background: var(--accent-yellow);
}

.breadth-decline {
    background: var(--accent-red);
}

/* ============================================
   DASHBOARD GRID
   ============================================ */

.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.dashboard-grid > .card {
    flex: 1 1 calc(50% - var(--spacing-lg));
    min-width: 250px;
}

.dashboard-column {
    flex: 1 1 calc(50% - var(--spacing-lg));
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ============================================
   CARDS
   ============================================ */

.card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-normal);
}

.card:hover {
    border-color: rgba(0, 170, 255, 0.3);
}

.card.full-width {
    grid-column: 1 / -1;
    width: 100%;
}

/* Cho phép user resize chiều ngang card.full-width */
#dashboard > .card.full-width[style*="width"] {
    width: auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.card-badge {
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
    padding: var(--spacing-xs) 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.card-badge.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================
   FOREIGN FLOW
   ============================================ */

/* ===== Foreign Flow (Khối Ngoại) — redesigned ===== */
.foreign-flow {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* 3 stat cards cạnh nhau: Mua | Bán | Ròng */
.ff-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.ff-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 10px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.03);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ff-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.25));
}
.ff-stat-label {
    font-size: 11px;
    color: var(--text-secondary, #aaa);
    font-weight: 500;
    letter-spacing: 0.3px;
}
.ff-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.1;
}
.ff-stat-value.positive { color: var(--accent-green, #2ee68a); }
.ff-stat-value.negative { color: var(--accent-red, #ff5c78); }
/* Card Ròng nổi bật hơn (border đậm theo dấu) */
#ff-net-card.is-positive { border-color: rgba(46,230,138,0.4); background: rgba(46,230,138,0.06); }
#ff-net-card.is-negative { border-color: rgba(255,92,120,0.4); background: rgba(255,92,120,0.06); }
#ff-net-card.is-positive .ff-stat-value { color: var(--accent-green, #2ee68a); }
#ff-net-card.is-negative .ff-stat-value { color: var(--accent-red, #ff5c78); }

/* Chart wrap */
.ff-chart-wrap {
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-md, 10px);
    padding: 10px 12px 6px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
.ff-chart-title {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-bottom: 4px;
    font-weight: 500;
}
.ff-chart-wrap canvas,
.flow-chart { height: 120px; }

/* Trend rows (1/5/20 phiên) — dạng text gọn thay chart cột */
.ff-trend {
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-md, 10px);
    padding: 6px 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
.ff-trend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ff-trend-row:last-child { border-bottom: none; }
.ff-trend-label {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}
.ff-trend-val {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'Space Grotesk', sans-serif;
}
.ff-trend-val.pos { color: var(--accent-green, #2ee68a); }
.ff-trend-val.neg { color: var(--accent-red, #ff5c78); }

/* Responsive: 3 cards → stack trên mobile */
@media (max-width: 480px) {
    .ff-stats { grid-template-columns: 1fr; }
}

/* ============================================
   INDUSTRY LISTS
   ============================================ */

.industry-lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.industry-column h4 {
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
    font-weight: 600;
}

.industry-column h4.positive {
    color: var(--accent-green);
}

.industry-column h4.negative {
    color: var(--accent-red);
}

.industry-list {
    list-style: none;
}

.industry-list li {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.industry-list li:last-child {
    border-bottom: none;
}

.industry-name {
    color: var(--text-secondary);
}

.industry-value.positive {
    color: var(--accent-green);
    font-weight: 600;
}

.industry-value.negative {
    color: var(--accent-red);
    font-weight: 600;
}

/* ============================================
   INVESTOR FLOW GRID
   ============================================ */

.investor-flow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.investor-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.investor-item:hover {
    background: var(--bg-card-hover);
}

.investor-icon {
    font-size: 1.5rem;
}

.investor-info {
    display: flex;
    flex-direction: column;
}

.investor-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.investor-value {
    font-size: 1rem;
    font-weight: 700;
}

.investor-value.positive {
    color: var(--accent-green);
}

.investor-value.negative {
    color: var(--accent-red);
}

.investor-chart {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    height: 200px;
}

/* ============================================
   STOCK LISTS
   ============================================ */

/* (ĐÃ XÓA 2026-08-18) .top-stocks-grid/.stock-column/.stock-list —
   bảng "Top Cổ Phiếu Mua/Bán Ròng" (nguồn Fitrade chết) đã bỏ khỏi dashboard.
   Giữ .top-net-tab dưới đây — tab range (Ngày/Tuần/Tháng…) của các panel khác đang dùng chung. */
.top-net-tabs {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
}

.top-net-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-xs) 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.top-net-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.top-net-tab.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* Subtitle trong h3 (range + date động, nhỏ hơn + mờ hơn tiêu đề) */
.investor-top-subtitle {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary, #9ba3b4);
    margin-left: 6px;
}
/* Panel investor-top: h3 to hơn mặc định card-header */
#panel-investor-top .card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Bảng Dòng tiền thông minh theo mã (table view) */
.stock-flow-table-wrap {
    border: 1px solid var(--border-color, #3a3f55);
    border-radius: 8px;
    overflow: hidden;
}
.stock-flow-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-primary, #1a1f2e);
    color: var(--text-secondary, #9ba3b4);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-color, #3a3f55);
    z-index: 2;
}
.stock-flow-table thead th:first-child { text-align: left; }
.stock-flow-table thead th:nth-child(2) { text-align: right; }
.stock-flow-table tbody td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #e4e7ef);
    font-variant-numeric: tabular-nums;
}
.stock-flow-table tbody td:first-child { text-align: left; color: var(--text-secondary, #9ba3b4); }
.stock-flow-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
/* pos/neg trong bảng: xanh cho dương, đỏ cho âm */
.stock-flow-table .pos { color: var(--color-up, #2ee68a); font-weight: 600; }
.stock-flow-table .neg { color: var(--color-down, #ff5c78); font-weight: 600; }

.stock-list li:last-child {
    border-bottom: none;
}

.stock-code {
    font-weight: 700;
    color: var(--accent-blue);
}

.stock-value.positive {
    color: var(--accent-green);
    font-weight: 600;
}

.stock-value.negative {
    color: var(--accent-red);
    font-weight: 600;
}

/* ============================================
   DATA TABLES
   ============================================ */

.breakout-table-wrapper,
.price-table-wrapper,
.industry-table-wrapper {
    overflow-x: auto;
    padding: var(--spacing-md);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background: var(--bg-primary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.data-table td.stock-code {
    font-weight: 700;
    color: var(--accent-blue);
}

.data-table td.positive {
    color: var(--accent-green);
    font-weight: 600;
}

.data-table td.negative {
    color: var(--accent-red);
    font-weight: 600;
}

.signal-badge {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.trend-badge {
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.trend-badge.bullish {
    background: var(--accent-green-bg);
    color: var(--accent-green);
}

.trend-badge.bearish {
    background: var(--accent-red-bg);
    color: var(--accent-red);
}

/* ============================================
   INVESTOR SUB-TABS (Thị trường, Ngành, Cổ phiếu)
   ============================================ */

.investor-sub-tabs {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--spacing-sm);
    /* Collapsible dropdown behavior */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease;
    padding: 0 var(--spacing-lg);
    margin-bottom: 0;
}

.investor-sub-tabs.expanded {
    max-height: 60px;
    opacity: 1;
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

/* Toggle button for sub-tabs dropdown */
.investor-toggle-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    margin-left: var(--spacing-lg);
}

.investor-toggle-btn:hover {
    border-color: var(--accent-blue);
    background: var(--bg-card-hover);
}

.investor-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.investor-toggle-btn.active .toggle-icon {
    transform: rotate(180deg);
}

.investor-sub-tab {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: var(--transition-fast);
}

.investor-sub-tab:hover {
    border-color: var(--accent-green);
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.investor-sub-tab.active {
    background: var(--accent-green-bg);
    border-color: var(--accent-green);
    color: var(--accent-green);
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.2);
}

.investor-sub-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.investor-sub-panel.active {
    display: block;
}

.placeholder-content {
    padding: var(--spacing-2xl);
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin: var(--spacing-lg);
    border: 1px dashed var(--border-color);
}

.placeholder-content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

.placeholder-content p {
    color: var(--text-secondary);
}

/* ============================================
   INVESTOR TABS (Period selector)
   ============================================ */

.investor-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.investor-tab {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.investor-tab:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.investor-tab.export-img-btn {
    margin-left: auto;
    background: #333;
    color: var(--text-primary);
    border: 1px solid #555;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: var(--spacing-xs) var(--spacing-md);
}

.investor-tab.export-img-btn:hover {
    background: #444;
    border-color: #666;
}

.investor-tab.active {
    background: var(--accent-blue-bg);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.investor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-lg);
}

.investor-detail-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.investor-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.investor-detail-header h3 {
    font-size: 1rem;
}

.investor-detail-header.foreign {
    background: linear-gradient(90deg, rgba(0, 170, 255, 0.1), transparent);
}

.investor-detail-header.individual {
    background: linear-gradient(90deg, rgba(255, 204, 0, 0.1), transparent);
}

.investor-detail-header.proprietary {
    background: linear-gradient(90deg, rgba(170, 102, 255, 0.1), transparent);
}

.investor-detail-header.institution {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.1), transparent);
}

.net-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.net-value.positive {
    color: var(--accent-green);
}

.net-value.negative {
    color: var(--accent-red);
}

.investor-detail-content {
    padding: var(--spacing-lg);
}

.investor-detail-content h4 {
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-size: 0.85rem;
}

.investor-detail-content h4:first-child {
    margin-top: 0;
}

.investor-stock-list {
    list-style: none;
}

.investor-stock-list li {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: 0.85rem;
}

/* ============================================
   BREAKOUT STATS
   ============================================ */

.breakout-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.stat-icon {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-card.positive .stat-number {
    color: var(--accent-green);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   SEARCH & FILTERS
   ============================================ */

.search-box {
    display: flex;
    align-items: center;
}

.search-input {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    width: 200px;
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.filter-select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    cursor: pointer;
}

/* ============================================
   CHARTS
   ============================================ */

.industry-chart-container,
.money-flow-content {
    padding: var(--spacing-lg);
}

.money-flow-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
}

.flow-chart-container {
    height: 300px;
}

.flow-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.summary-item {
    background: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.summary-item.positive {
    border-left: 3px solid var(--accent-green);
}

.summary-item.negative {
    border-left: 3px solid var(--accent-red);
}

.summary-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.summary-value {
    font-size: 1.3rem;
    font-weight: 700;
}

.summary-value.positive {
    color: var(--accent-green);
}

.summary-value.negative {
    color: var(--accent-red);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.footer p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
}

.disclaimer {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* ============================================
   RESPONSIVE — 3 BREAKPOINT (Req 5)
   Mobile ≤480px | Tablet 481–1024px | Desktop >1024px
   Lưu ý: .market-overview / .dashboard-grid / .charts-row dùng flexbox,
   nên đổi số cột bằng flex-basis (KHÔNG dùng grid-template-columns).
   ============================================ */

/* ---------- Tablet & nhỏ hơn: tối đa 2 cột (≤1024px) ---------- */
@media (max-width: 1024px) {
    /* Header co gọn; nav xuống hàng riêng, cuộn ngang (Req 5.3) */
    .header .container {
        flex-wrap: wrap;
        height: auto;
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .logo {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .nav {
        order: 3;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-sm);
        border-top: 1px solid var(--border-color);
        padding-top: 2px;
    }

    /* Overview & dashboard: tối đa 2 cột qua flex-basis (Req 5.2) */
    .market-overview > .index-card,
    .market-overview > .chart-card,
    .dashboard-grid > .card,
    .dashboard-column {
        flex: 1 1 calc(50% - var(--spacing-lg));
        min-width: 0;            /* tránh chồng lấp/tràn nội dung khi đổi breakpoint (Req 5.6) */
    }

    /* Biểu đồ cần bề ngang lớn: cho 1 cột để dễ đọc */
    .charts-row > .chart-card,
    .charts-row > .index-card {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Các lưới grid về tối đa 2 cột */
    .breakout-stats,
    .investor-excel-grid,
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Lưới rộng/ghép đôi về 1 cột trên tablet */
    .investor-grid,
    .money-flow-content {
        grid-template-columns: 1fr;
    }

    .bubble-chart-container {
        height: 300px;
    }
}

/* ---------- Mobile: 1 cột dọc (≤480px) ---------- */
@media (max-width: 480px) {
    /* Overview, dashboard, charts: 1 cột dọc (Req 5.1) */
    .market-overview > .index-card,
    .market-overview > .chart-card,
    .dashboard-grid > .card,
    .dashboard-column,
    .charts-row > .chart-card,
    .charts-row > .index-card {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Mọi lưới grid về 1 cột (Req 5.1, 5.6) */
    .industry-lists,
    .top-stocks-grid,
    .investor-flow-grid,
    .investor-grid,
    .influential-stocks-grid,
    .breakout-stats,
    .investor-excel-grid,
    .news-grid,
    .money-flow-content {
        grid-template-columns: 1fr;
    }

    /* Biểu đồ co giãn vừa khít chiều rộng vùng chứa (Req 5.7) */
    .chart-card,
    .chart-card canvas,
    .flow-chart-container,
    .bubble-chart-container,
    #tv-modal-container {
        width: 100%;
        max-width: 100%;
    }

    /* Vùng chạm tối thiểu 44×44px cho phần tử tương tác chính (Req 5.5) */
    .nav-btn,
    .exchange-tab,
    .top-net-tab,
    .investor-tab,
    .investor-sub-tab,
    button {
        min-height: 44px;
    }

    .nav-btn {
        min-width: 44px;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8rem;
    }

    .index-value {
        font-size: 1.5rem;
    }

    .data-table {
        font-size: 0.8rem;
    }

    .data-table th,
    .data-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* --- UIState skeleton variants --- */
.ui-skeleton {
    width: 100%;
}

.skeleton-line {
    height: 14px;
    margin: var(--spacing-sm) 0;
    width: 100%;
}

.skeleton-cell {
    height: 18px;
    flex: 1 1 0;
}

.skeleton-chart {
    width: 100%;
    height: 100%;
    min-height: 160px;
}

.skeleton-chart-wrap {
    width: 100%;
    height: 100%;
    min-height: 160px;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.skeleton-row {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
}

.skeleton-list {
    width: 100%;
}

.skeleton-card-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

.skeleton-card {
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.skeleton-title {
    margin-bottom: var(--spacing-md);
}

/* --- UIState error / empty states --- */
.ui-error,
.ui-empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-body, 0.9rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    min-height: 120px;
}

.ui-error-message,
.ui-empty-message {
    max-width: 480px;
    line-height: var(--line-height-body, 1.6);
}

.retry-btn {
    margin-top: var(--spacing-md);
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-md);
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
    font-size: var(--font-size-body, 0.9rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: var(--transition-fast);
}

.retry-btn:hover {
    background: var(--accent-blue);
    color: var(--text-primary);
}

.retry-btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   NEWS SECTION
   ============================================ */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.news-item {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    transition: var(--transition-normal);
}

.news-item:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.news-category {
    display: inline-block;
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.news-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.news-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.news-title a:hover {
    color: var(--accent-blue);
}

.news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.news-source {
    font-weight: 500;
    color: var(--accent-green);
}

.news-time {
    font-style: italic;
}

.news-sources {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.filter-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Responsive cho .news-grid được xử lý tập trung trong khối 3-breakpoint
   (tablet ≤1024px: 2 cột; mobile ≤480px: 1 cột) */

/* ============================================
   4 NDT EXCEL-STYLE LAYOUT
   ============================================ */

.investor-excel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.investor-column {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.investor-column-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-weight: 600;
}

.investor-column-header.foreign-header {
    background: #d9d9d9;
    color: #333;
}

.investor-column-header.individual-header {
    background: #d9d9d9;
    color: #333;
}

.investor-column-header.proprietary-header {
    background: #d9d9d9;
    color: #333;
}

.investor-column-header.institution-header {
    background: #d9d9d9;
    color: #333;
}

.investor-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.investor-total-net {
    font-size: 2rem;
    font-weight: 700;
}

.investor-total-net.positive {
    color: #228B22;
}

.investor-total-net.negative {
    color: var(--accent-red);
}

.investor-sub-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.sub-header-title.buy-header {
    background: #1b5e20;
    color: var(--text-primary);
    padding: var(--spacing-xs);
}

.sub-header-title.sell-header {
    background: #cc0000;
    color: var(--text-primary);
    padding: var(--spacing-xs);
}

.investor-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background: #e8e8e8;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    padding: var(--spacing-sm);
}

.investor-table-header span {
    padding: 2px;
}

.investor-data-rows {
    /* max-height: 400px; Remove scroll limit */
    /* overflow-y: auto; */
    height: auto;
}

.investor-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-color);
}

.investor-data-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.investor-data-row span {
    padding: var(--spacing-xs) 6px;
    text-align: center;
}

.investor-data-row .ticker {
    font-weight: 600;
    color: var(--text-primary);
}

/* Sector panel: smaller font for longer sector names */
#sector-investor-container .investor-data-row .ticker {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.investor-data-row .buy-value {
    color: #388e3c;
    font-weight: 600;
    background: rgba(56, 142, 60, 0.12);
}

.investor-data-row .sell-value {
    color: #cc0000;
    background: rgba(204, 0, 0, 0.1);
}

/* Responsive cho .investor-excel-grid được xử lý tập trung trong khối 3-breakpoint
   (tablet ≤1024px: 2 cột; mobile ≤480px: 1 cột) */

/* ============================================
   INDUSTRY FLOW - DATE PICKER & CHART
   ============================================ */

.industry-date-controls {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.date-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.date-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.date-input {
    padding: var(--spacing-sm) 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.date-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-bg);
}

.btn-primary {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-blue);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition-fast);
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-sm {
    padding: 6px 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition-fast);
}

.btn-sm:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.industry-chart-section {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

.chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.industry-select-controls {
    display: flex;
    gap: var(--spacing-sm);
}

.industry-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    max-height: 120px;
    overflow-y: auto;
}

.industry-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.industry-checkbox-item:hover {
    background: var(--bg-card-hover);
}

.industry-checkbox-item input[type="checkbox"] {
    accent-color: var(--accent-green);
    cursor: pointer;
}

.industry-checkbox-item.checked {
    background: var(--accent-blue-bg);
    border: 1px solid var(--accent-blue);
}

.industry-cumulative-chart {
    height: 400px;
    position: relative;
}

.industry-cumulative-chart canvas {
    max-height: 100%;
}

.table-info {
    padding: var(--spacing-sm) 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.loading-text {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 1024px) {
    .industry-date-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .industry-cumulative-chart {
        height: 300px;
    }
}

/* ============================================
   DASHBOARD CHARTS SECTION
   ============================================ */

.dashboard-charts-section {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.dashboard-charts-section .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.charts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.charts-row > .chart-card {
    flex: 1 1 calc(50% - var(--spacing-lg));
    min-width: 250px;
    overflow: auto;
}

/* Cho phép index-card nằm trong charts-row */
.charts-row > .index-card {
    flex: 1 1 calc(50% - var(--spacing-lg));
    min-width: 250px;
}

.charts-row.full-width {
    flex-direction: column;
}

.charts-row.full-width > .chart-card {
    flex: 1 1 100%;
}

.chart-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.chart-card.wide {
    width: 100%;
}

.chart-card .chart-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.chart-card .chart-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ⭐ Footnote Lực Cầu — dấu (*) dưới bảng chart, click sổ ra popup giải thích */
.lucCau-footnote {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: space-between;   /* hint trái, link phải — cùng 1 dòng */
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lucCau-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}
.lucCau-footnote-link {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    font-style: italic;
    transition: color 0.15s;
    user-select: none;
}
.lucCau-footnote-link:hover {
    color: var(--accent-blue, #4472C4);
    text-decoration: underline;
}

/* ⭐ Popup overlay giải thích cách tính Lực Cầu */
.lucCau-info-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lucCau-info-card {
    background: var(--bg-card, #1e2235);
    border: 1px solid var(--border-color, #3a3f55);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lucCau-info-card h4 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: var(--text-primary, #e4e7ef);
}
.lucCau-info-card h5 {
    margin: 16px 0 8px;
    font-size: 0.92rem;
    color: var(--text-secondary, #9ba3b4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.lucCau-info-card .lucCau-formula {
    background: rgba(68, 114, 196, 0.12);
    border-left: 3px solid var(--accent-blue, #4472C4);
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: var(--text-primary, #e4e7ef);
}
.lucCau-info-card ul {
    margin: 0 0 8px;
    padding-left: 20px;
    list-style: none;
}
.lucCau-info-card ul li {
    padding: 4px 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #9ba3b4);
    line-height: 1.5;
}
.lucCau-info-card ul.lucCau-filter li::before {
    content: '';
}
.lucCau-info-card .lucCau-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: rgba(255, 215, 61, 0.06);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #9ba3b4);
    line-height: 1.55;
}
.lucCau-info-card .lucCau-note strong {
    color: var(--text-primary, #e4e7ef);
}
.lucCau-info-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--text-muted, #6b7280);
    font-size: 1.2rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.lucCau-info-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e4e7ef);
}

.label-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    user-select: none;
}

.label-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.label-toggle span {
    cursor: pointer;
}

.bubble-table-container {
    margin-top: 10px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.bubble-table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.bubble-table-container th,
.bubble-table-container td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.bubble-table-container th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.bubble-table-container td {
    color: var(--text-secondary);
}

.bubble-table-container tr:hover td {
    background: var(--bg-card-hover);
}

/* Dòng có thể click (mở danh sách CP) */
.bubble-table-container tbody tr[onclick] {
    transition: background 0.15s;
}

.bubble-table-container tbody tr[onclick]:hover td {
    background: rgba(46, 170, 255, 0.12);
}

.bubble-table-container tbody tr[onclick]:active td {
    background: rgba(46, 170, 255, 0.2);
}

.bubble-table-container .force-cell {
    color: var(--accent-green);
    font-weight: 600;
}

.bubble-table-container .ma10-cell {
    color: var(--accent-blue);
    font-weight: 600;
}

.chart-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.chart-legend-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

.chart-legend-compact {
    display: flex;
    gap: var(--spacing-sm);
}

.chart-legend-compact .legend-item {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text-primary);
}

.chart-legend-compact .legend-item.small {
    background: #9966FF;
}

.chart-legend-compact .legend-item.mid {
    background: #4BC0C0;
}

.chart-legend-compact .legend-item.large {
    background: #36A2EB;
}

.chart-legend-compact .legend-item.super {
    background: #FFCE56;
    color: #333;
}

.chart-legend-inline {
    display: flex;
    gap: var(--spacing-md);
}

.chart-legend-inline .legend-vnindex {
    color: #90EE90;
    font-size: 0.85rem;
}

.chart-legend-inline .legend-luccau {
    color: #FFB6C1;
    font-size: 0.85rem;
}

.bubble-chart-container {
    flex: 1 1 auto;
    min-height: 200px;
    height: 350px;
    position: relative;
    cursor: pointer;
}

.line-chart-container {
    flex: 1 1 auto;
    min-height: 180px;
    height: 300px;
    position: relative;
}

.chart-reference-lines,
.chart-reference-lines-horizontal {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
}

.ref-line-35 {
    color: #ff6b6b;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 107, 107, 0.15);
    border-radius: 4px;
}

.ref-line-50 {
    color: #ffd93d;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 217, 61, 0.15);
    border-radius: 4px;
}

/* Responsive: .charts-row dùng flexbox, đổi số cột qua flex-basis trong khối
   3-breakpoint (tablet/mobile cho 1 cột). Chỉ giữ điều chỉnh chiều cao biểu đồ. */
@media (max-width: 1024px) {
    .bubble-chart-container {
        height: 300px;
    }
}

/* ============================================
   SORTABLE TABLE STYLES
   ============================================ */

.sortable-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
}

.sortable-table th.sortable:hover {
    background: var(--bg-card-hover);
    color: var(--accent-blue);
}

.sortable-table th .sort-icon {
    margin-left: 6px;
    opacity: 0.5;
    font-size: 0.9em;
}

.sortable-table th.sortable:hover .sort-icon {
    opacity: 1;
}

.sortable-table th.sort-asc .sort-icon,
.sortable-table th.sort-desc .sort-icon {
    opacity: 1;
    color: var(--accent-blue);
}

.sortable-table th.sort-asc .sort-icon::after {
    content: '▲';
}

.sortable-table th.sort-desc .sort-icon::after {
    content: '▼';
}

.sortable-table th.sort-asc .sort-icon,
.sortable-table th.sort-desc .sort-icon {
    font-size: 0;
}

.sortable-table th.sort-asc .sort-icon::after,
.sortable-table th.sort-desc .sort-icon::after {
    font-size: 0.85rem;
}

/* ============================================
   PRICE BOARD EXCHANGE TABS
   ============================================ */

.price-board-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.exchange-tabs {
    display: flex;
    gap: var(--spacing-xs);
}

.exchange-tab {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.exchange-tab:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.exchange-tab.active {
    background: var(--accent-blue-bg);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.exchange-tab span {
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    min-width: 30px;
    text-align: center;
}

.exchange-tab.active span {
    background: rgba(0, 170, 255, 0.2);
}

.loading-indicator {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.loading-indicator.loading::before {
    content: ' Đang tải...';
}

/* Compact price values */
.price-table td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Table with sticky header */
.price-table-wrapper {
    max-height: 70vh;
    overflow-y: auto;
}

.price-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.price-table thead th {
    background: var(--bg-secondary);
}

/* Filter Popup Styles */
.filter-popup {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    padding: 12px;
    z-index: 1000;
    min-width: 250px;
    color: var(--text-primary);
    top: 100%;
    left: 0;
}

.filter-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-option {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.filter-option:hover {
    background: var(--bg-hover);
}

.filter-option i,
.filter-option span.icon {
    margin-right: var(--spacing-sm);
    width: 20px;
    text-align: center;
}

.filter-title {
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.filter-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-group select,
.filter-group input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px;
    border-radius: 4px;
    width: 100%;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: 12px;
}

.btn-filter-apply {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-filter-clear {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

th.sortable {
    position: relative;
    /* For absolute positioning of popup */
}


/* Fix for Select Dropdown Visibility */
.filter-group select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.filter-group select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Ensure inputs are also visible */
.filter-group input {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}


/* TradingView Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

/* Industry Top Stocks Modal */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-overlay .industry-modal {
    width: 85%;
    max-width: 900px;
    max-height: 80vh;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.industry-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.industry-modal .modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--accent-blue);
}

.industry-modal .modal-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

.industry-summary {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.summary-item {
    font-size: 13px;
    color: var(--text-secondary);
}

.summary-item strong {
    color: var(--text-primary);
}

.industry-stocks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.industry-stocks-table thead th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
}

.industry-stocks-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.industry-stocks-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.industry-stocks-table tbody td {
    padding: 10px 12px;
    color: var(--text-primary);
}

.industry-stocks-table .stock-code {
    font-weight: 700;
    color: var(--accent-blue);
}

.industry-stocks-table .force-cell {
    font-weight: 600;
}

.loading-spinner {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

.error-text {
    color: var(--accent-red);
    text-align: center;
    padding: 20px;
}

.modal-content {
    background-color: var(--bg-card);
    margin: 5vh auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    width: 90%;
    height: 90vh;
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-lg);
}

.close-modal {
    color: var(--text-secondary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 10;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--accent-red);
    text-decoration: none;
    cursor: pointer;
}


/* Stock Filter Tab Styles */
.filter-controls-container {
    background: var(--bg-card);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.filter-presets-bar {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.filter-presets-bar select {
    flex: 1;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm) 12px;
    border-radius: var(--radius-sm);
}

.action-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
}

.save-btn {
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
}

.save-btn:hover {
    background: var(--accent-blue);
    color: white;
}

.delete-btn {
    background: var(--accent-red-bg);
    color: var(--accent-red);
}

.delete-btn:hover {
    background: var(--accent-red);
    color: white;
}

.filter-builder {
    flex: 1;
    margin-bottom: 0;
}

.filter-condition-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    align-items: center;
}

.filter-condition-row select,
.filter-condition-row input {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.filter-condition-row select {
    min-width: 150px;
}

.remove-condition-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 var(--spacing-sm);
}

.remove-condition-btn:hover {
    color: var(--accent-red);
}

.btn-add-condition {
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    width: 100%;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-add-condition:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.filter-actions-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 200px;
    margin-top: 0;
}

.filter-main-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 1024px) {
    .filter-main-layout {
        flex-direction: column;
    }

    .filter-actions-bar {
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
    }
}

.run-filter-btn {
    background: var(--gradient-green);
    color: white;
    border: none;
    padding: 10px var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-glow-green);
    transition: var(--transition-normal);
}

.run-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.filter-results-info {
    margin-bottom: var(--spacing-md);
    font-style: italic;
    color: var(--text-secondary);
}

#filter-results-table td {
    white-space: nowrap;
}

/* ============================================
   STOCK LOOKUP CONTROLS
   ============================================ */

.stock-lookup-controls {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.stock-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.stock-input-group label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 100px;
}

#stock-symbol-input {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    padding: 14px 20px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--accent-blue);
    outline: none;
    transition: var(--transition-fast);
    letter-spacing: 2px;
}

#stock-symbol-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0;
}

#stock-symbol-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.3);
}

#stock-load-btn {
    padding: 14px var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
    background: var(--gradient-blue);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#stock-load-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 170, 255, 0.4);
}

.stock-lookup-status {
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.stock-data-title {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-md);
    color: var(--accent-blue);
}

.stock-freq-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.stock-detail-table-wrapper {
    overflow-x: auto;
}

#stock-detail-table {
    font-size: 0.9rem;
}

#stock-detail-table th,
#stock-detail-table td {
    text-align: right;
    padding: 10px 12px;
}

#stock-detail-table th:first-child,
#stock-detail-table td:first-child {
    text-align: left;
}

.sum-row {
    background: var(--bg-secondary) !important;
    font-weight: bold;
    border-top: 2px solid var(--accent-blue);
}

/* ============================================
   INFLUENTIAL STOCKS GRID
   ============================================ */

.influential-stocks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.influential-column {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.influential-column.positive {
    border-left: 3px solid var(--accent-green);
}

.influential-column.negative {
    border-left: 3px solid var(--accent-red);
}

.influential-column h4 {
    margin-bottom: var(--spacing-sm);
    font-size: 0.95rem;
}

.data-table.compact {
    font-size: 0.85rem;
}

.data-table.compact th,
.data-table.compact td {
    padding: 6px 10px;
}

.data-table.compact tbody tr:nth-child(odd) {
    background: var(--bg-card);
}

/* Responsive cho .influential-stocks-grid được xử lý tập trung trong khối
   3-breakpoint (mobile ≤480px: 1 cột; tablet giữ 2 cột) */

/* ============================================
   GRIDSTACK PANEL MANAGER STYLES
   ============================================ */

/* ── Toolbar (Lưu / Reset / Hiện tất cả) ── */
.grid-toolbar {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-sm);
}

.grid-tb-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.grid-tb-btn:hover {
    background: rgba(0, 170, 255, 0.15);
    border-color: #00aaff;
    color: var(--text-primary);
}

.grid-save-btn:hover {
    background: rgba(0, 200, 100, 0.15);
    border-color: #00cc66;
}

.grid-reset-btn:hover {
    background: rgba(255, 68, 102, 0.15);
    border-color: #ff4466;
}

/* ── Gridstack container ── */
.grid-stack {
    background: transparent;
}

/* Item content = panel wrapper */
.grid-stack-item-content {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border-radius: var(--radius-lg);
    inset: 0;
}

/* Panel bên trong chiếm toàn bộ item, cho scroll nếu dữ liệu lớn */
.grid-stack-item-content > .card,
.grid-stack-item-content > .chart-card,
.grid-stack-item-content > .index-card {
    flex: 1 1 auto;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Vùng nội dung cuộn được bên trong card */
.grid-stack-item-content > .card > .foreign-flow,
.grid-stack-item-content > .card > .industry-lists,
.grid-stack-item-content > .card > .top-stocks-grid,
.grid-stack-item-content > .card > .influential-stocks-grid,
.grid-stack-item-content > .card > .breakout-table-wrapper {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

/* ── Thanh điều khiển panel ── */
.panel-control-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px var(--spacing-sm);
    background: rgba(10, 10, 30, 0.6);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    height: 26px;
}

.panel-drag-handle {
    cursor: grab;
    color: rgba(255, 255, 255, 0.35);
    font-size: 14px;
    letter-spacing: -2px;
    user-select: none;
    transition: color 0.15s;
}

.panel-drag-handle:hover {
    color: #00aaff;
}

.panel-drag-handle:active {
    cursor: grabbing;
}

.panel-title-mini {
    flex: 1;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
    user-select: none;
}

.panel-btn:hover {
    background: rgba(0, 170, 255, 0.2);
    color: #00aaff;
}

.panel-hide-btn:hover {
    background: rgba(255, 68, 102, 0.2);
    color: #ff4466;
}

/* ── Collapsed state ── */
.grid-stack-item.panel-collapsed .grid-stack-item-content > .card,
.grid-stack-item.panel-collapsed .grid-stack-item-content > .chart-card,
.grid-stack-item.panel-collapsed .grid-stack-item-content > .index-card {
    display: none;
}

/* ── Drag / resize visual feedback ── */
.grid-stack-item.ui-draggable-dragging .grid-stack-item-content {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 170, 255, 0.35);
    opacity: 0.92;
    border: 2px solid #00aaff;
}

.grid-stack-item.ui-resizable-resizing .grid-stack-item-content {
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.3);
    border: 1px solid #00aaff;
}

/* Placeholder khi kéo */
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed #00aaff !important;
    border-radius: var(--radius-lg);
    background: rgba(0, 170, 255, 0.08);
}

/* Resize handles dễ nhìn hơn */
.grid-stack-item > .ui-resizable-handle {
    z-index: 50;
}

/* ── Toast ── */
.grid-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: rgba(10, 10, 30, 0.95);
    color: var(--text-primary);
    padding: 10px var(--spacing-lg);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(0, 170, 255, 0.3);
    box-shadow: var(--shadow-lg);
    z-index: 999999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.grid-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   INDUSTRY DROPDOWN
   ============================================ */
.industry-dropdown {
    position: relative;
    display: inline-block;
}

.industry-dropdown-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ccc;
    padding: 6px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.industry-dropdown-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

.industry-dropdown-list {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--spacing-xs);
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    min-width: 240px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
}

.industry-dropdown.open .industry-dropdown-list {
    display: block;
}

.industry-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #ccc;
    transition: background 0.15s;
}

.industry-dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.industry-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.industry-count {
    margin-left: auto;
    font-size: 11px;
    color: #666;
}

/* ============================================
   FILTERED COLUMN HIGHLIGHT & CLEAR BUTTON
   ============================================ */
th.sortable.filtered-column {
    color: #ff4757 !important;
    position: relative;
}

th.sortable.filtered-column::after {
    content: '⬤';
    color: #ff4757;
    font-size: 8px;
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

.btn-clear-price-filters {
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid rgba(255, 71, 87, 0.4);
    color: #ff4757;
    padding: var(--spacing-xs) 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-clear-price-filters:hover {
    background: rgba(255, 71, 87, 0.3);
    color: var(--text-primary);
}

/* Breadth Distribution Bar in Modal */
.modal-breadth-container {
    margin-bottom: 20px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.modal-breadth-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-breadth-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 13px;
}

.modal-breadth-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.modal-breadth-stat .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.modal-breadth-stat.positive {
    color: var(--accent-green);
}
.modal-breadth-stat.positive .dot {
    background: var(--accent-green);
    box-shadow: 0 0 6px var(--accent-green);
}

.modal-breadth-stat.warning {
    color: var(--accent-yellow);
}
.modal-breadth-stat.warning .dot {
    background: var(--accent-yellow);
    box-shadow: 0 0 6px var(--accent-yellow);
}

.modal-breadth-stat.negative {
    color: var(--accent-red);
}
.modal-breadth-stat.negative .dot {
    background: var(--accent-red);
    box-shadow: 0 0 6px var(--accent-red);
}

.modal-breadth-bar {
    width: 100%;
    height: 14px;
    display: flex;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.modal-breadth-bar .bar-seg {
    height: 100%;
    transition: width 0.5s ease-out;
}

.modal-breadth-bar .bar-seg.positive {
    background: linear-gradient(90deg, #2ecc71, var(--accent-green));
}

.modal-breadth-bar .bar-seg.warning {
    background: linear-gradient(90deg, #f1c40f, var(--accent-yellow));
}

.modal-breadth-bar .bar-seg.negative {
    background: linear-gradient(90deg, #e74c3c, var(--accent-red));
}

/* ============================================
   REDESIGN POLISH (accessibility + interaction states)
   ============================================ */

/* Visible focus ring for keyboard navigation (a11y requirement) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-btn:focus-visible,
.exchange-tab:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove focus ring only for mouse users, keep for keyboard */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Active/pressed feedback — physical click feel */
.nav-btn:active,
.refresh-btn:active,
.exchange-tab:active,
.action-btn:active,
.run-filter-btn:active,
.grid-tb-btn:active,
.top-net-tab:active,
.investor-tab:active,
.investor-sub-tab:active {
    transform: translateY(1px) scale(0.985);
}

/* Smooth anchor scrolling */
html {
    scroll-behavior: smooth;
}

/* Tinted card shadow on hover (depth cue) */
.card:hover,
.chart-card:hover,
.index-card:hover {
    box-shadow: var(--shadow-md);
}

/* Active nav indicator accent bar */
.nav-btn.active {
    position: relative;
}

/* Focus ring for text areas (keyboard a11y, accent token — Req 4.3) */
textarea:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Depth scale: resting elevation on cards so the layering
   bg-primary < bg-secondary < bg-card reads with subtle shadow (Req 4.4).
   Hover elevation (--shadow-md/lg) is defined above. */
.card,
.chart-card,
.index-card {
    box-shadow: var(--shadow-sm);
}

/* Background-scan progress indicator (Req 4.7).
   The scan trigger (#btn-scan-potential) is set to disabled by JS while a scan
   runs, so styling :disabled gives an automatic in-progress cue with NO JS change. */
.run-filter-btn:disabled,
.run-filter-btn.loading,
.run-filter-btn.scanning,
.refresh-btn:disabled {
    opacity: 0.7;
    cursor: progress;
}

/* Conventional inline spinner for any button flagged .loading/.scanning.
   Reuses the existing @keyframes spin. NOTE: showing this spinner requires JS to
   toggle the .loading/.scanning class on the button; the :disabled cue above
   already provides a visible in-progress state without any JS wiring. */
button.loading::after,
button.scanning::after {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Skeleton: hiển thị khối tĩnh, không shimmer (Req 3.7) */
    .skeleton {
        animation: none !important;
        background: var(--bg-card-hover) !important;
        background-size: auto !important;
    }

    /* Dừng hẳn các animation trang trí lặp vô hạn không thiết yếu (Req 4.5) */
    .card-badge.pulse {
        animation: none !important;
    }
}

/* ============================================
   TV CHART — INDICATOR TOOLBAR & STACKED PANES
   ============================================ */

/* Container becomes a flex column (toolbar + panes) — set inline by tv-chart.js */
#tv-modal-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-md);
    flex: 0 0 auto;
}

.tv-toolbar-label {
    font-size: var(--font-size-label, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-secondary);
    margin-right: var(--spacing-sm);
    letter-spacing: 0.02em;
}

.tv-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-label, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
    line-height: 1.4;
}

.tv-chip:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.tv-chip.active {
    background: var(--accent-blue-bg);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.tv-chip:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.tv-panes {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tv-pane {
    width: 100%;
    min-height: 0;
    position: relative;
}

.tv-pane-main {
    flex: 1 1 0;
}

.tv-pane-rsi,
.tv-pane-macd {
    border-top: 1px solid var(--border-color);
}

@media (max-width: 480px) {
    .tv-toolbar {
        padding: var(--spacing-xs);
    }
    .tv-chip {
        min-height: 32px;
    }
}

/* ============================================
   KLINECHARTS MODAL — TOOLBAR / DRAWING BAR / PANES
   ============================================ */

.tvk-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 40px var(--spacing-sm) var(--spacing-xs);
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border-color);
}

.tvk-symbol {
    font-family: var(--font-display, sans-serif);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-right: var(--spacing-sm);
}

.tvk-sep {
    font-size: var(--font-size-label, 0.75rem);
    color: var(--text-secondary);
    margin-right: var(--spacing-xs);
}

.tvk-spacer { flex: 1 1 auto; }

.tvk-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 11px;
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-label, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.tvk-chip:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.tvk-chip.active { background: var(--accent-blue-bg); border-color: var(--accent-blue); color: var(--accent-blue); }
.tvk-chip:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.tvk-action {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-label, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
    min-height: 32px;
}

.tvk-action:hover { border-color: var(--accent-blue); color: var(--text-primary); }

.tvk-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

.tvk-leftbar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-xs) 4px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.tvk-tool {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tvk-tool:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.tvk-tool.active { background: var(--accent-blue-bg); border-color: var(--accent-blue); color: var(--accent-blue); }
.tvk-tool:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.tvk-chart {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

@media (max-width: 480px) {
    .tvk-leftbar { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border-color); }
    .tvk-tool { width: 44px; height: 44px; }
    .tvk-topbar { padding-right: var(--spacing-xs); }
}

/* ============================================
   KLINECHARTS — FLYOUT MENUS, INDICATOR DIALOG, TOOL STATES
   ============================================ */

.tvk-divider {
    width: 60%;
    height: 1px;
    margin: 6px auto;
    background: var(--border-color);
}

.tvk-tool.on {
    background: var(--accent-green-bg);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.tvk-ind-btn {
    font-family: var(--font-display, sans-serif);
}

/* Fly-out drawing menu */
.tvk-flyout {
    position: absolute;
    z-index: var(--z-dropdown, 500);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xs);
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
}

.tvk-flyout-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body, 0.9rem);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.tvk-flyout-item:hover {
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
}

/* Indicator dialog ("Các chỉ báo") */
.tvk-dialog {
    position: absolute;
    z-index: var(--z-modal, 2000);
    top: 8px;
    left: 8px;
    width: min(440px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.tvk-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-display, sans-serif);
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.tvk-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.tvk-dialog-close:hover { background: var(--bg-card-hover); color: var(--accent-red); }

.tvk-dialog-search {
    margin: var(--spacing-md) var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-body, 0.9rem);
    outline: none;
}

.tvk-dialog-search:focus { border-color: var(--accent-blue); }

.tvk-dialog-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
}

.tvk-dialog-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body, 0.9rem);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tvk-dialog-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.tvk-dialog-item.active { color: var(--text-primary); }
.tvk-dialog-item .tvk-star { color: var(--accent-yellow); width: 16px; }
.tvk-ind-label { flex: 1 1 auto; }

/* ── Dòng tiền ngành: bộ chọn mốc thời gian (Fiintrade) ── */
.industry-timerange-controls {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

.industry-timerange-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-xs) 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.industry-timerange-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.industry-timerange-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.industry-date-range {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Phân tích lệnh: bảng dòng tiền 4 nhóm NĐT ── */
.investor-flow-wrapper {
    overflow-x: auto;
    padding: var(--spacing-sm) 0;
}

#investor-flow-table td,
#investor-flow-table th {
    text-align: right;
}

#investor-flow-table td:first-child,
#investor-flow-table th:first-child {
    text-align: left;
}

/* ============================================================
   PROFESSIONAL POLISH (pro stock-data look) — appended block
   Chỉ bổ sung, không sửa rule cũ. An toàn với cấu trúc & test.
   ============================================================ */

/* 1) Thanh cuộn mảnh, tông theme (Firefox + WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue-dark);
    background-clip: padding-box;
}

/* 2) Bảng dữ liệu dài: cuộn dọc trong card + header dính khi cuộn */
.price-table-wrapper,
.breakout-table-wrapper,
.industry-table-wrapper {
    max-height: 72vh;
    overflow-y: auto;
}
.price-table-wrapper .data-table thead th,
.breakout-table-wrapper .data-table thead th,
.industry-table-wrapper .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    /* nền đặc để hàng không lộ qua header + đường kẻ chân header */
    background: var(--bg-primary);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

/* 3) Sọc ngựa vằn nhẹ tăng mật độ đọc; giữ nguyên hiệu ứng hover */
.data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.018);
}
.data-table tbody tr:hover {
    background: var(--bg-card-hover);
}

/* 4) Card mượt hơn khi hover (chỉ tinh chỉnh viền + bóng, không đổi layout) */
.card {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover {
    border-color: var(--accent-blue-dark);
}

/* ===== Industry performance heatmap ===== */
.industry-heatmap-section { margin: 16px 0 8px; }
.industry-heatmap-hint { font-size: 12px; color: var(--text-muted); }
.industry-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.heatmap-tile {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: default;
}
.heatmap-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.heatmap-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heatmap-pct { font-size: 16px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.heatmap-idx { font-size: 11px; color: var(--text-muted); }

/* ===== MA Breadth (Độ Rộng Kỹ Thuật) ===== */
.ma-breadth-section { margin-top: 16px; }
.ma-breadth-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}
.ma-checkbox-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ma-line-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.12s ease;
}
.ma-line-item:hover { border-color: rgba(255,255,255,0.12); }
.ma-line-vnindex { border-style: dashed; border-color: rgba(255,255,255,0.2); }
.ma-line-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent-blue, #3b82f6);
    margin: 0;
}
.ma-color-picker {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}
.ma-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.ma-color-picker::-webkit-color-swatch { border: none; border-radius: 3px; }
.ma-color-picker::-moz-color-swatch { border: none; border-radius: 3px; }
.ma-line-label { font-weight: 500; }
.ma-date-range-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ma-date-range-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}
.ma-date-range-group input[type="date"] {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    padding: 5px 8px;
    font-size: 13px;
    font-family: inherit;
    color-scheme: dark; /* calendar picker icon dark */
    cursor: pointer;
}
.ma-date-range-group input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-blue, #3b82f6);
}
.ma-range-presets {
    display: inline-flex;
    gap: 4px;
}
.ma-preset-btn {
    padding: 4px 10px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 5px;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    transition: all 0.12s ease;
}
.ma-preset-btn:hover {
    border-color: var(--accent-blue, #3b82f6);
    color: var(--text-primary, #fff);
    background: rgba(59,130,246,0.1);
}
.ma-breadth-meta {
    font-size: 12px;
    color: var(--text-muted, #888);
    margin-left: auto;
}
.ma-breadth-chart-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin-top: 8px;
}
.ma-breadth-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 14px;
}
.ma-breadth-empty .empty-action {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
}
.btn-secondary {
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    transition: all 0.12s ease;
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-blue, #3b82f6);
}
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ---- MA Breadth drawing toolbar ---- */
.ma-draw-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 8px;
}
.ma-draw-title {
    font-size: 13px;
    color: var(--text-secondary, #aaa);
    font-weight: 600;
    margin-right: 2px;
}
.ma-draw-btn {
    padding: 5px 12px;
    font-size: 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.ma-draw-btn:hover {
    background: rgba(59,130,246,0.12);
    border-color: var(--accent-blue, #3b82f6);
}
/* nút đang ở chế độ vẽ → sáng lên */
.ma-draw-btn.active {
    background: var(--accent-blue, #3b82f6);
    border-color: var(--accent-blue, #3b82f6);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}
.ma-draw-clear { border-color: rgba(255,94,94,0.4); }
.ma-draw-clear:hover { background: rgba(255,94,94,0.15); border-color: #ff5e5e; }
.ma-draw-color-lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-secondary, #aaa);
}
.ma-draw-hint {
    font-size: 11px;
    color: var(--text-muted, #777);
    font-style: italic;
}
.ma-draw-status {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent-blue, #3b82f6);
    font-weight: 500;
}
#ma-breadth-refresh.is-loading,
#ma-breadth-build.is-loading {
    position: relative;
    color: transparent;
}
#ma-breadth-refresh.is-loading::after,
#ma-breadth-build.is-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--text-muted, #888);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ma-spin 0.7s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }

/* ===== Nút Cập Nhật thủ công trên card dashboard (realtime) ===== */
/* Compact, đặt trong .chart-header / .index-header / .card-header bên phải */
.btn-card-refresh {
    padding: 2px 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 6px;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: all 0.12s ease;
    margin-left: auto;       /* đẩy về bên phải trong flex header */
}
.btn-card-refresh:hover {
    background: rgba(59,130,246,0.15);
    border-color: var(--accent-blue, #3b82f6);
    color: var(--accent-blue, #3b82f6);
}
.btn-card-refresh.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}
.btn-card-refresh.is-loading::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--accent-blue, #3b82f6);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ma-spin 0.7s linear infinite;
}

/* ===== Industry Top Flow Modal (top mã mua/bán ròng theo ngành) ===== */
.industry-topflow-content {
    width: 95%;
    max-width: 1100px;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
}
.industry-topflow-content h3 {
    margin-top: 4px;
    margin-bottom: 16px;
    font-size: 18px;
}
.topflow-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.topflow-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}
@media (max-width: 800px) {
    .topflow-columns { grid-template-columns: 1fr; }
}
.topflow-col h4.topflow-h {
    font-size: 15px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid;
}
.topflow-h.pos { color: var(--color-up, #2ee68a); border-color: var(--color-up, #2ee68a); }
.topflow-h.neg { color: var(--color-down, #ff5c78); border-color: var(--color-down, #ff5c78); }
.topflow-table {
    width: 100%;
    font-size: 12px;
}
.topflow-table th {
    font-size: 11px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
}
.topflow-table td {
    padding: 5px 8px;
}
.topflow-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.topflow-table td.pos { color: var(--color-up, #2ee68a); }
.topflow-table td.neg { color: var(--color-down, #ff5c78); }
.topflow-details {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}
.topflow-details summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 6px 0;
}
.topflow-details summary:hover { color: var(--text-primary); }

/* Nút "Xem đầy đủ tất cả mã" trong modal top flow */
.topflow-toggle-btn {
    display: block;
    margin: 14px auto 0;
    padding: 8px 18px;
    font-size: 13px;
}

/* Chip dòng tiền lớn trong tiêu đề modal top flow */
.topflow-title-net { font-size: 16px; font-weight: 700; margin-left: 4px; }
.topflow-title-net.pos { color: var(--color-up, #2ee68a); }
.topflow-title-net.neg { color: var(--color-down, #ff5c78); }
.topflow-title-range {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #888);
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 10px;
}

/* ============================================
   AUTH PAGES (Phase 3) — login / register / admin
   ============================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(46, 170, 255, 0.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(170, 102, 255, 0.08), transparent 40%),
        var(--bg-primary);
    padding: var(--spacing-lg);
    font-family: var(--font-body);
}

.auth-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 420px;
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    font-family: var(--font-display);
}
.auth-logo .logo-icon { font-size: 2.5rem; }
.auth-logo .logo-text {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}
.auth-logo .highlight { color: var(--accent-blue); }

.auth-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.auth-form label {
    font-size: var(--font-size-label);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
    display: block;
}
.auth-form input {
    width: 100%;
    padding: 12px var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}
.auth-form input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-bg);
}

/* Ô password có nút mắt ẩn/hiện — wrap inline để không phá layout */
.pw-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
.pw-wrap input { padding-right: 38px; box-sizing: border-box; }
.pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    z-index: 2;
}
.pw-toggle:hover { opacity: 1; }

/* Dropdown thông báo admin */
.notif-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 8px 10px; background: var(--bg-secondary);
    border-radius: 6px; border: 1px solid transparent;
}
.notif-item:hover { border-color: var(--border-color); }
.notif-item .ni-info { flex: 1; min-width: 0; }
.notif-item .ni-name { color: var(--text-primary); font-weight: 600; font-size: 0.82rem; }
.notif-item .ni-meta { color: var(--text-muted); font-size: 0.68rem; margin-top: 2px; }

/* Investor top 4-group table — 16 cột: 4 nhóm × (MãMua|GiáMua|MãBán|GiáBán)
   Chia cột rõ ràng: border dày giữa các nhóm, border dashed giữa Mua/Bán,
   padding rộng + tabular-nums để số không dính vào mã chứng khoán. */
.ig-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ig-table th, .ig-table td {
    padding: 4px 10px; text-align: left; border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.ig-table thead th {
    background: var(--bg-secondary); z-index: 2;
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color);
}
/* Hàng 1: tên nhóm NĐT span 4 cột */
.ig-table .ig-group-header th {
    text-align: center; font-size: 0.8rem; color: var(--text-primary);
    font-family: var(--font-display); padding: 7px 6px; border-bottom: 2px solid var(--border-color);
}
/* Hàng 2: Mã Mua | Giá | Mã Bán | Giá lặp lại */
.ig-table .ig-sub-header th {
    text-align: center; font-size: 0.6rem; color: var(--text-muted); padding: 4px;
}
.ig-table .ig-sub-buy { color: var(--accent-green) !important; }
.ig-table .ig-sub-sell { color: var(--accent-red) !important; }
.ig-table .ig-rank { color: var(--text-muted); width: 30px; text-align: right; font-size: 0.7rem; }
/* Mã chứng khoán: render dạng chip để tách biệt rõ khỏi giá trị bên cạnh */
.ig-table .ig-tk {
    display: inline-block; font-weight: 700; color: var(--text-primary);
    padding: 1px 7px; border-radius: 4px; font-size: 0.78rem; cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ig-table .ig-tk:hover { color: #fff; background: var(--accent-blue); }
/* Ô giá trị: căn phải, tabular-nums (các số hàng đơn vị thẳng hàng),
   padding-left lớn tạo khoảng cách với mã CK bên trái → không đọc nhầm */
.ig-table .ig-val-pos,
.ig-table .ig-val-neg {
    text-align: right; font-weight: 600; min-width: 66px;
    padding-left: 16px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.ig-table .ig-val-pos { color: var(--accent-green); }
.ig-table .ig-val-neg { color: var(--accent-red); }
/* Border phân tách: dashed giữa khối Mua & Bán trong cùng nhóm */
.ig-table .ig-split-border { border-right: 1px dashed var(--border-color); }
/* Border phân tách: dày (2px) giữa các nhóm NĐT */
.ig-table .ig-group-border { border-right: 2px solid var(--border-color); }
/* Header cũng phải có border tương ứng để đường phân cách liền mạch */
.ig-table .ig-sub-header.ig-split-border { border-right: 1px dashed var(--border-color); }
.ig-table .ig-sub-header.ig-group-border { border-right: 2px solid var(--border-color); }
.ig-table .ig-group-header.ig-group-border { border-right: 2px solid var(--border-color); }
.ig-table tbody tr:hover td { background: var(--bg-card-hover); }
/* Hàng tổng SUM */
.ig-table .ig-sum-row td {
    background: var(--bg-secondary); border-bottom: 2px solid var(--border-color);
    font-size: 0.82rem;
}
.ig-table .ig-sum-row:hover td { background: var(--bg-secondary); }

.auth-btn {
    margin-top: var(--spacing-sm);
    padding: 12px var(--spacing-lg);
    background: var(--gradient-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-body);
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.auth-btn:hover { opacity: 0.92; }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-link {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-label);
    color: var(--text-secondary);
}
.auth-link a {
    color: var(--accent-blue);
    text-decoration: none;
}
.auth-link a:hover { text-decoration: underline; }

.auth-error {
    background: var(--accent-red-bg);
    border: 1px solid var(--accent-red-dark);
    color: var(--accent-red);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-label);
    margin-bottom: var(--spacing-sm);
    display: none;
}
.auth-error.show { display: block; }

.auth-success {
    background: var(--accent-green-bg);
    border: 1px solid var(--accent-green-dark);
    color: var(--accent-green);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-label);
    margin-bottom: var(--spacing-sm);
    display: none;
}
.auth-success.show { display: block; }

/* ---- ADMIN PANEL ---- */
.admin-page { padding: var(--spacing-xl); max-width: 1200px; margin: 0 auto; font-family: var(--font-body); }
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}
.admin-header h1 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--font-size-h1);
}
.admin-filters { display: flex; gap: var(--spacing-sm); align-items: center; flex-wrap: wrap; }
.admin-filters select, .admin-filters button {
    padding: 8px var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-label);
    cursor: pointer;
}
.admin-filters button:hover { background: var(--bg-card-hover); }

.user-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.user-table th, .user-table td {
    padding: 12px var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-body);
}
.user-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.user-table td { color: var(--text-primary); }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover { background: var(--bg-card-hover); }

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}
.badge-pending  { background: var(--accent-yellow-bg); color: var(--accent-yellow); }
.badge-active   { background: var(--accent-green-bg); color: var(--accent-green); }
.badge-disabled { background: var(--accent-red-bg); color: var(--accent-red); }
.badge-admin    { background: var(--accent-purple-bg); color: var(--accent-purple); }

.btn-sm {
    padding: 5px 10px;
    margin-right: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-micro);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.btn-sm:hover { background: var(--bg-card-hover); }
.btn-sm.btn-approve { border-color: var(--accent-green-dark); color: var(--accent-green); }
.btn-sm.btn-disable { border-color: var(--accent-red-dark); color: var(--accent-red); }
.btn-sm.btn-delete  { border-color: var(--accent-red-dark); color: var(--accent-red); }

/* ════════════════════════════════════════════════════════════════
   BREADTH HIGH/LOW — Phá Đỉnh / Phá Đáy
   ════════════════════════════════════════════════════════════════ */

/* Layout tổng thể section breadth */
#tech-feature-breadth-hl .card.full-width { max-width: 1600px; margin: 0 auto; }
#tech-feature-breadth-hl .card-header h3 {
    font-size: 1.15rem;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-blue, #4472C4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#tech-feature-breadth-hl .chart-title { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }

/* Verdict box — nhận xét tổng thể (border-left theo verdict color) */
.breadth-verdict {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-muted);
    border-radius: 10px;
}
.breadth-verdict.bullish { border-left-color: var(--accent-green); background: rgba(46, 230, 138, 0.06); }
.breadth-verdict.bearish { border-left-color: var(--accent-red);   background: rgba(255, 92, 120, 0.06); }
.breadth-verdict.neutral { border-left-color: var(--text-muted); }

.breadth-verdict-badge {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--border-color);
    white-space: nowrap;
}
.breadth-verdict.bullish .breadth-verdict-badge { background: rgba(46, 230, 138, 0.15); color: var(--accent-green); }
.breadth-verdict.bearish .breadth-verdict-badge { background: rgba(255, 92, 120, 0.15); color: var(--accent-red); }
.breadth-verdict.neutral .breadth-verdict-badge { color: var(--text-secondary); }

.breadth-verdict-text { flex: 1; }
.breadth-verdict-text p {
    margin: 4px 0;
    line-height: 1.55;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.breadth-verdict-text p:first-child { margin-top: 0; }
.breadth-verdict-text p:last-child  { margin-bottom: 0; }

/* 4 stat cards (grid responsive) - DEPRECATED, dùng .breadth-stat-box */
/* 2 biểu đồ cạnh nhau */
.breadth-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}
@media (max-width: 1100px) { .breadth-charts { grid-template-columns: 1fr; } }
.breadth-chart-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
}
.breadth-chart-block .industry-cumulative-chart { height: 280px; }

.breadth-count { font-size: 0.8rem; color: var(--text-muted); }

/* Tô màu ô +/- trong bảng breadth */
#breadth-all-table td.pos, #breadth-sector-table td.pos { color: var(--accent-green); font-weight: 600; }
#breadth-all-table td.neg, #breadth-sector-table td.neg { color: var(--accent-red); font-weight: 600; }
.breadth-warn { color: #f0ad4e; margin-left: 4px; cursor: help; }
.breadth-turnaround { margin-left: 4px; cursor: help; filter: drop-shadow(0 0 2px rgba(46, 230, 138, 0.4)); }

/* Bảng phân nhóm ngành — sector table redesigned */
.breadth-sectors {
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
}
.breadth-sectors .chart-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.breadth-sector-hint { font-size: 0.75rem; color: var(--text-muted); }

#breadth-sector-table { width: 100%; border-collapse: collapse; }
#breadth-sector-table thead th {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.15);
}
#breadth-sector-table thead th:first-child { text-align: left; }
#breadth-sector-table thead th.sortable { cursor: pointer; }
#breadth-sector-table thead th.sortable:hover { color: var(--text-primary); }
#breadth-sector-table .sub-header th {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    padding: 4px 6px;
    border-bottom: 2px solid var(--border-color);
}
#breadth-sector-table .tf-group-3T { color: var(--accent-blue, #4472C4); }
#breadth-sector-table .tf-group-6T { color: var(--accent-purple, #9b59b6); }
#breadth-sector-table .tf-group-1N { color: #e8a934; }
#breadth-sector-table tbody td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}
.breadth-sec-name { text-align: left !important; color: var(--text-primary); }
.breadth-sec-cnt { display: block; font-weight: 700; font-size: 0.9rem; }
.breadth-sec-cap { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.breadth-sec-impact { font-size: 0.9rem !important; }
#breadth-sector-table td.pos .breadth-sec-cnt { color: var(--accent-green); }
#breadth-sector-table td.neg .breadth-sec-cnt { color: var(--accent-red); }

/* Box sức mạnh thị trường — 4 chỉ báo */
.breadth-insights {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
#breadth-insights-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
@media (max-width: 900px) { #breadth-insights-list { grid-template-columns: 1fr; } }
.breadth-insight-item {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.breadth-insight-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.breadth-insight-head strong { color: var(--text-primary); font-size: 0.85rem; }
.breadth-insight-val { font-size: 0.8rem; color: var(--accent-blue, #4472C4); font-weight: 600; white-space: nowrap; }
.breadth-insight-read { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

/* Nút refresh trong header breadth */
#breadth-refresh { padding: 4px 12px; font-size: 0.8rem; }

/* ═══ Collapse toggle (thu gọn/mở rộng section) ═══ */
.breadth-collapse-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 26px; height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    padding: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}
.breadth-collapse-btn:hover {
    border-color: var(--accent-blue, #4472C4);
    color: var(--accent-blue, #4472C4);
}
.breadth-collapse-btn .collapse-icon {
    display: inline-block;
    transition: transform 0.2s;
}

/* Khi collapsed: ẩn mọi direct child trừ header đầu tiên.
   Header đầu = .chart-controls HOẶC .breadth-stat-header HOẶC .breadth-verdict-badge. */
.breadth-collapsible.collapsed > .chart-controls ~ *,          /* siblings sau chart-controls */
.breadth-collapsible.collapsed > .breadth-stat-header ~ *,     /* siblings sau stat-header */
.breadth-collapsible.collapsed > .breadth-verdict-text {       /* verdict text */
    display: none;
}
/* Section có collapse → thu nhỏ padding cho gọn */
.breadth-collapsible.collapsed { padding-bottom: 10px; }
.breadth-collapsible { transition: padding 0.2s; }

/* Nút toggle đặc biệt cho verdict badge (nhỏ hơn, đặt cạnh badge) */
.breadth-collapse-btn.verdict-toggle {
    width: 18px; height: 18px;
    font-size: 0.6rem;
    margin-left: 8px;
    vertical-align: middle;
    border: none;
    background: rgba(255, 255, 255, 0.1);
}

/* ═══ Breadth snapshot — section trend lịch sử ═══ */
.breadth-snapshot-section {
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.breadth-snapshot-section .chart-controls {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.breadth-snapshot-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
.breadth-snapshot-chart-block {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}
.breadth-snapshot-chart-block .industry-cumulative-chart { height: 240px; }
.chart-title.small { font-size: 0.85rem; color: var(--text-primary); margin-bottom: 8px; font-weight: 600; }
.breadth-empty { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 24px; }

/* Range selector (7N/30N/90N/Tất cả) */
.breadth-range-selector { display: flex; gap: 4px; }
.breadth-range-btn {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-secondary); padding: 4px 10px; border-radius: 6px;
    font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
}
.breadth-range-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.breadth-range-btn.active {
    background: var(--accent-blue, #4472C4);
    border-color: var(--accent-blue, #4472C4);
    color: #fff; font-weight: 600;
}

/* Calendar heatmap (GitHub-style) */
.breadth-calendar { overflow-x: auto; padding: 4px 0; }
.breadth-cal-grid {
    display: grid;
    grid-template-columns: 24px repeat(7, 1fr);
    gap: 3px;
    min-width: 600px;
}
.breadth-cal-wd {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2px 0;
    grid-column: span 1;
}
/* weekday label chỉ chiếm cột đầu */
.breadth-cal-wd:nth-child(-n+7) { grid-column: 1; }
/* cells từ cột 2 trở đi */
.breadth-cal-cell {
    width: 100%;
    aspect-ratio: 1;
    min-height: 16px;
    border-radius: 3px;
    cursor: help;
    transition: transform 0.1s;
}
.breadth-cal-cell:hover { transform: scale(1.4); outline: 1px solid var(--text-primary); z-index: 2; }
.breadth-cal-cell.pad { background: transparent; cursor: default; }
.breadth-cal-cell.empty { background: rgba(255, 255, 255, 0.05); }
.breadth-cal-cell.bullish { background: rgba(46, 230, 138, var(--intensity, 0.6)); }
.breadth-cal-cell.bearish { background: rgba(255, 92, 120, var(--intensity, 0.6)); }
.breadth-cal-cell.neutral { background: rgba(150, 150, 180, 0.4); }

.breadth-cal-legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.75rem; color: var(--text-secondary);
    margin-top: 10px;
}
.breadth-cal-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.breadth-cal-legend-item .breadth-cal-cell {
    width: 12px; height: 12px; min-height: 12px; display: inline-block; cursor: default;
}
.breadth-cal-legend-item .breadth-cal-cell.bullish { background: rgba(46, 230, 138, 0.6); }
.breadth-cal-legend-item .breadth-cal-cell.bearish { background: rgba(255, 92, 120, 0.6); }
.breadth-cal-legend-item .breadth-cal-cell.neutral { background: rgba(150, 150, 180, 0.4); }
.breadth-cal-legend-item .breadth-cal-cell.empty { background: rgba(255, 255, 255, 0.05); }

/* ═══ Box thống kê breadth theo timeframe ═══ */
.breadth-stat-box {
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.breadth-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.breadth-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.breadth-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.breadth-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .breadth-stat-grid { grid-template-columns: 1fr; } }
.breadth-tf-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}
.breadth-tf-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 0.95rem;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
.breadth-tf-rows { display: flex; flex-direction: column; gap: 6px; }
.breadth-tf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.breadth-tf-row strong { color: var(--text-primary); font-size: 0.9rem; }
.breadth-tf-row strong.pos { color: var(--accent-green); }
.breadth-tf-row strong.neg { color: var(--accent-red); }

/* Style nút filter (.breadth-tf-btn + .breadth-filter-btn) được gộp chung
   tại block .breadth-filter-btns ở dưới — đồng bộ padding/font/active. */

/* ═══ Bảng tổng hợp tất cả mã (Phá Đỉnh + Phá Đáy) ═══ */
.breadth-all-table {
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
}
.breadth-all-table .chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.breadth-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.breadth-search {
    background: var(--bg-main, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 180px;
}
.breadth-search:focus { outline: none; border-color: var(--accent-blue, #4472C4); }
/* Cụm filter: label + nhóm nút, có viền riêng để tách 2 nhóm Loại / Khung TG */
.breadth-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main, rgba(0, 0, 0, 0.15));
}
.breadth-filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.breadth-filter-btns {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
}
/* Đồng bộ style 2 nhóm nút (Loại + Khung TG) — cùng padding/font/border */
.breadth-filter-btn,
.breadth-tf-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.breadth-filter-btn:hover,
.breadth-tf-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
/* Active: cùng tông xanh (nhấn mạnh) cho cả 2 nhóm — tránh 2 màu khác nhau gây rối */
.breadth-filter-btn.active,
.breadth-tf-btn.active {
    background: var(--accent-blue, #4472C4);
    border-color: var(--accent-blue, #4472C4);
    color: #fff;
    font-weight: 600;
}
/* Bộ lọc Timeframe lúc active có thể chọn màu tím để phân biệt với Loại (tùy chọn) */
.breadth-tf-btn.active {
    background: var(--accent-purple, #9b59b6);
    border-color: var(--accent-purple, #9b59b6);
}

/* Bảng scroll dọc (max 500px) để không chiếm hết trang.
   Chỉ áp dụng cho bảng MÃ TỔNG HỢP (50+ dòng cần sticky).
   Bảng NGÀNH (~27 dòng) không cần → dùng wrapper gốc, không sticky, không gap. */
.breadth-table-scroll { max-height: 520px; overflow-y: auto; }
.breadth-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-primary);
    box-shadow: inset 0 -1px 0 var(--border-color);
}
/* Bảng mã tổng hợp: nền đục để row không lộ qua header khi scroll */
#breadth-all-table thead th {
    background: var(--bg-primary) !important;
}
/* Bảng ngành: nền mờ gốc (không sticky) */
#breadth-sector-table thead th {
    background: rgba(0, 0, 0, 0.15);
}

/* Badge timeframe (3T/6T/1N) trong cột Đỉnh/Đáy */
.breadth-tf-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 3px;
}
.breadth-tf-badge.high {
    background: rgba(46, 230, 138, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(46, 230, 138, 0.3);
}
.breadth-tf-badge.low {
    background: rgba(255, 92, 120, 0.15);
    color: var(--accent-red);
    border: 1px solid rgba(255, 92, 120, 0.3);
}
.breadth-dash { color: var(--text-muted); }

/* Sort indicator trên header */
#breadth-all-table th.sortable.sort-asc .sort-icon,
#breadth-all-table th.sortable.sort-desc .sort-icon { color: var(--accent-blue, #4472C4); }
#breadth-all-table th.sortable.sort-asc .sort-icon::after { content: " ↑"; }
#breadth-all-table th.sortable.sort-desc .sort-icon::after { content: " ↓"; }

/* ═══ AI Settings Panel (collapsible) ═══ */
.ai-settings-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color, #3a3f55);
    border-radius: 8px;
    margin-bottom: 14px;
}
.ai-settings-summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary, #9ba3b4);
    list-style: none;
    user-select: none;
}
.ai-settings-summary::-webkit-details-marker { display: none; }
.ai-settings-summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
    color: var(--accent-blue, #4472C4);
}
.ai-settings-panel[open] .ai-settings-summary::before {
    transform: rotate(90deg);
}
.ai-settings-body {
    padding: 4px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-settings-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ai-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
}
.ai-field-label {
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ai-field input,
.ai-field select,
.ai-field textarea {
    background: var(--bg-main, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border-color, #3a3f55);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-primary, #e4e7ef);
    font-size: 0.85rem;
    font-family: inherit;
}
.ai-field input:focus,
.ai-field select:focus,
.ai-field textarea:focus {
    outline: none;
    border-color: var(--accent-blue, #4472C4);
}
.ai-field-prompt { flex: 1 1 100%; }
.ai-field textarea {
    font-family: 'Space Grotesk', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 120px;
}
.ai-preset-btn {
    background: transparent;
    border: 1px solid var(--border-color, #3a3f55);
    color: var(--text-muted, #6b7280);
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.ai-preset-btn:hover { color: var(--accent-blue, #4472C4); border-color: var(--accent-blue, #4472C4); }
.ai-settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ai-settings-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}

/* ═══ AI Market Report — render markdown ═══ */
.ai-report-content {
    padding: 20px 24px;
    line-height: 1.7;
    color: var(--text-primary, #e4e7ef);
    font-size: 0.95rem;
    max-width: 900px;
}
.ai-report-content h1,
.ai-report-content h2 {
    color: var(--accent-blue, #4472C4);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #3a3f55);
}
.ai-report-content h2:first-child { margin-top: 0; }
.ai-report-content h3 {
    color: var(--text-primary, #e4e7ef);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 18px 0 8px;
}
.ai-report-content h4 {
    color: var(--text-secondary, #9ba3b4);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 14px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ai-report-content p { margin: 8px 0; }
.ai-report-content strong {
    color: var(--accent-blue, #4472C4);
    font-weight: 600;
}
.ai-report-content ul,
.ai-report-content ol {
    margin: 8px 0;
    padding-left: 24px;
}
.ai-report-content li {
    margin: 4px 0;
    line-height: 1.6;
}
.ai-report-content ul li::marker { color: var(--accent-blue, #4472C4); }
.ai-report-content blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 3px solid var(--accent-blue, #4472C4);
    background: rgba(68, 114, 196, 0.08);
    color: var(--text-secondary, #9ba3b4);
    border-radius: 0 6px 6px 0;
}
.ai-report-content code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'Space Grotesk', monospace;
}
.ai-report-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.85rem;
}
.ai-report-content th,
.ai-report-content td {
    padding: 8px 10px;
    border: 1px solid var(--border-color, #3a3f55);
    text-align: left;
}
.ai-report-content th {
    background: var(--bg-primary, #1a1f2e);
    font-weight: 600;
    color: var(--text-secondary, #9ba3b4);
}
.ai-report-content hr {
    border: none;
    border-top: 1px solid var(--border-color, #3a3f55);
    margin: 20px 0;
}

/* ============================================
   STOCK ANALYSIS TAB
   ============================================ */

/* Search bar */
.sa-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-lg, 16px);
    position: relative;
}
.sa-search-wrapper input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-secondary, #12122a);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.sa-search-wrapper input:focus {
    border-color: var(--accent-blue, #2eaaff);
}
.sa-search-wrapper input::placeholder {
    color: var(--text-muted, #6666aa);
}
.sa-search-recent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    flex-wrap: wrap;
}
.sa-recent-tag {
    padding: 4px 10px;
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 14px;
    color: var(--text-secondary, #9999bb);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.sa-recent-tag:hover {
    background: var(--accent-blue-bg, rgba(46,170,255,0.1));
    border-color: var(--accent-blue, #2eaaff);
    color: var(--accent-blue, #2eaaff);
}

/* Autocomplete dropdown */
.sa-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: none;
}
.sa-autocomplete.open { display: block; }
.sa-ac-header {
    padding: 6px 12px;
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.sa-ac-item:hover,
.sa-ac-item.highlighted {
    background: var(--accent-blue-bg, rgba(46,170,255,0.1));
}
.sa-ac-symbol {
    font-weight: 700;
    color: var(--text-primary, #fff);
    min-width: 55px;
}
.sa-ac-name {
    font-size: 0.85rem;
    color: var(--text-secondary, #9999bb);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-ac-price {
    font-size: 0.85rem;
    color: var(--text-muted, #6666aa);
    min-width: 60px;
    text-align: right;
}

/* Layout: chart FULL chiều ngang, 3 card thông tin xuống hàng dưới.
   Trước đây là grid 1.5fr/1fr — trên màn 1900px chart chỉ được ~1100px, còn cột phải
   thừa chỗ, tức là thu nhỏ đúng thứ cần nhìn rõ nhất để nhường chỗ cho 3 card chữ.
   minmax(0, 1fr) chứ không phải 1fr: canvas của KLineCharts không co lại được, để
   1fr trơn thì grid track phình theo canvas và cả trang tràn ngang. */
.sa-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg, 16px);
}

/* Chart area */
.sa-chart-area {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    overflow: hidden;
    min-height: 500px;
    position: relative;
}
.sa-chart-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    background: var(--bg-secondary, #12122a);
    flex-wrap: wrap;
}
.sa-chart-topbar .sa-symbol-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #fff);
    margin-right: 8px;
}
.sa-chart-topbar .sa-price-tag {
    font-weight: 600;
    font-size: 0.9rem;
}
.sa-chart-topbar .sa-change-tag {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.sa-chart-ind-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.sa-ind-chip {
    padding: 3px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    transition: all 0.15s;
}
.sa-ind-chip.active,
.sa-ind-chip:hover {
    background: var(--accent-blue-bg, rgba(46,170,255,0.1));
    border-color: var(--accent-blue, #2eaaff);
    color: var(--accent-blue, #2eaaff);
}
.sa-chart-container {
    width: 100%;
    height: 460px;
}
/* Chart rộng gấp rưỡi rồi thì cao thêm cho đúng tỉ lệ — 460px trên khung 1900px làm
   nến bị dẹt, khó đọc thân/bóng nến. */
@media (min-width: 1400px) {
    .sa-chart-container {
        height: 560px;
    }
}

/* Hàng card thông tin (SEPA Score / Tín hiệu / TA chi tiết) — nằm DƯỚI chart.
   auto-fit + minmax: màn rộng thì 3 card một hàng, hẹp dần thì tự rớt xuống 2 rồi 1,
   không cần media query. */
.sa-info-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg, 16px);
    align-items: start;
}

/* SEPA Score card */
.sa-score-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
}
.sa-score-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.sa-score-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}
.sa-score-circle::after {
    content: '/100';
    font-size: 0.55rem;
    font-weight: 400;
    position: absolute;
    bottom: 12px;
}
.sa-score-info {
    flex: 1;
}
.sa-grade-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}
.sa-score-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #6666aa);
    margin-top: 4px;
}

/* Breakdown progress bars */
.sa-breakdown { margin-top: 8px; }
.sa-bd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
    font-size: 0.75rem;
}
.sa-bd-label {
    width: 100px;
    color: var(--text-secondary, #9999bb);
    flex-shrink: 0;
}
.sa-bd-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-primary, #0a0a1a);
    border-radius: 4px;
    overflow: hidden;
}
.sa-bd-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.sa-bd-value {
    width: 28px;
    text-align: right;
    color: var(--text-muted, #6666aa);
    font-size: 0.7rem;
}

/* Signal card */
.sa-signal-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
}
.sa-signal-action {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 10px;
}
.sa-signal-action.buy { background: var(--accent-green, #2ee68a); color: #000; }
.sa-signal-action.sell { background: var(--accent-red, #ff5c78); }
.sa-signal-action.watch { background: var(--accent-yellow, #ffcc00); color: #000; }
.sa-signal-action.hold { background: var(--accent-blue, #2eaaff); }
.sa-signal-action.none { background: var(--text-muted, #6666aa); }

.sa-signal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.sa-signal-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    font-size: 0.8rem;
}
.sa-signal-item .sa-label { color: var(--text-secondary, #9999bb); }
.sa-signal-item .sa-value { font-weight: 600; color: var(--text-primary, #fff); }
.sa-signal-reason {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-primary, #0a0a1a);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #9999bb);
    line-height: 1.4;
}

/* TA Detail card */
.sa-ta-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
}
.sa-ta-card h4 {
    font-size: 0.85rem;
    color: var(--text-secondary, #9999bb);
    margin: 0 0 10px 0;
}
.sa-ta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.sa-ta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}
.sa-ta-item .ta-label {
    color: var(--text-secondary, #9999bb);
    min-width: 70px;
}
.sa-ta-item .ta-val {
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.ta-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.ta-tag.pass { background: var(--accent-green-bg, rgba(46,230,138,0.1)); color: var(--accent-green, #2ee68a); }
.ta-tag.fail { background: var(--accent-red-bg, rgba(255,92,120,0.1)); color: var(--accent-red, #ff5c78); }
.ta-tag.neutral { background: var(--accent-yellow-bg, rgba(255,204,0,0.1)); color: var(--accent-yellow, #ffcc00); }

/* Ichimoku / Elliott summary cards */
.sa-middle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg, 16px);
    margin-top: var(--spacing-lg, 16px);
}
@media (max-width: 1100px) {
    .sa-middle-row { grid-template-columns: 1fr; }
}
.sa-summary-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
}
.sa-summary-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-summary-card .card-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}
.sa-verdict-badge {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
.sa-verdict-badge.bullish { background: var(--accent-green, #2ee68a); color: #000; }
.sa-verdict-badge.bearish { background: var(--accent-red, #ff5c78); }
.sa-verdict-badge.neutral { background: var(--accent-yellow, #ffcc00); color: #000; }
.sa-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.6;
}
.sa-summary-list li {
    color: var(--text-secondary, #9999bb);
    padding-left: 12px;
    position: relative;
}
.sa-summary-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-blue, #2eaaff);
}

/* Bộ lọc quét mẫu hình (tab Kỹ thuật) */
.pattern-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--bg-card-hover, #21214a);
    border-radius: 8px;
}
.pattern-filter { display: flex; flex-direction: column; gap: 4px; }
.pattern-filter label {
    font-size: 0.72rem;
    color: var(--text-muted, #6b6b8a);
    white-space: nowrap;
}
.pattern-filter select { padding: 6px 8px; max-width: 220px; }
.pattern-filter input { padding: 6px 8px; width: 100px; text-align: center; }

/* Mẫu hình tích luỹ — nền giá trước sóng tăng */
.sa-pattern-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-pattern-card:empty { display: none; }
.sa-pattern-card .card-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-pattern-card .card-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}
.sa-pattern-sub {
    font-size: 0.75rem;
    color: var(--text-muted, #6b6b8a);
}
.sa-pattern-empty {
    padding: 14px 0;
    font-size: 0.82rem;
    color: var(--text-muted, #6b6b8a);
}
.sa-pattern-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sa-pattern-stage {
    padding: 3px 12px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #000;
}
.sa-pattern-score { font-size: 0.85rem; color: var(--text-secondary, #9999bb); }
.sa-pattern-score b { font-size: 1.05rem; }
.sa-pattern-primary {
    font-size: 0.8rem;
    color: var(--text-primary, #fff);
    padding: 2px 10px;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 12px;
}
.sa-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.sa-pattern-block {
    background: var(--bg-card-hover, #21214a);
    border-radius: 8px;
    padding: 10px 12px;
}
.sa-pattern-block-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #9999bb);
    margin-bottom: 8px;
}
.sa-pattern-kv {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    padding: 3px 0;
}
.sa-pattern-kv span { color: var(--text-muted, #6b6b8a); }
.sa-pattern-kv b { color: var(--text-primary, #fff); font-weight: 600; text-align: right; }
.sa-pattern-kv b.good { color: var(--accent-green, #2ee68a); }
.sa-pattern-kv b.bad { color: var(--accent-red, #ff5c78); }
.sa-pattern-note { font-size: 0.78rem; color: var(--text-muted, #6b6b8a); }
.sa-pattern-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.sa-pattern-tag {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: help;
}
.sa-pattern-tag.strong { background: var(--accent-green-bg, rgba(46,230,138,0.12)); color: var(--accent-green, #2ee68a); }
.sa-pattern-tag.mid { background: var(--accent-yellow-bg, rgba(255,204,0,0.12)); color: var(--accent-yellow, #ffcc00); }
.sa-pattern-tag.weak { background: rgba(120,120,150,0.12); color: var(--text-muted, #6b6b8a); }
.sa-pattern-notes { margin-top: 12px; }
.sa-pattern-notes summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary, #9999bb);
}
.sa-pattern-notes ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--text-secondary, #9999bb);
}
.sa-pattern-notes li { margin-bottom: 4px; }

/* Investor flow card */
.sa-flow-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-flow-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-flow-card .card-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}
.sa-flow-canvas-wrap {
    position: relative;
    height: 200px;
}

/* Quote strip at bottom */
.sa-quote-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-quote-strip .qs-symbol {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-primary, #fff);
}
.sa-quote-strip .qs-price {
    font-weight: 700;
    font-size: 1.1rem;
}
.sa-quote-strip .qs-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sa-quote-strip .qs-label {
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
}
.sa-quote-strip .qs-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #9999bb);
}

/* Empty/placeholder state */
.sa-empty-state {
    text-align: center;
    color: var(--text-muted, #6666aa);
    padding: 80px 20px;
}
.sa-empty-state .sa-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.sa-empty-state p {
    font-size: 0.95rem;
}

/* Loading skeleton for chart */
.sa-chart-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--bg-primary, #0a0a1a);
    color: var(--text-muted, #6666aa);
    font-size: 0.85rem;
}
.sa-card-skeleton {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted, #6666aa);
    font-size: 0.85rem;
    background: var(--bg-primary, #0a0a1a);
    border-radius: 10px;
}

/* Scrollbar for autocomplete */
.sa-autocomplete::-webkit-scrollbar {
    width: 6px;
}
.sa-autocomplete::-webkit-scrollbar-track {
    background: var(--bg-primary, #0a0a1a);
}
.sa-autocomplete::-webkit-scrollbar-thumb {
    background: var(--border-color, #2a2a55);
    border-radius: 3px;
}

/* ============================================
   STOCK ANALYSIS — Header Strip (Fiintrade-style)
   ============================================ */
.sa-header-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg, 16px);
    padding: 14px 18px;
    background: linear-gradient(135deg, #1a1a35 0%, #14142e 100%);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 12px;
    margin-bottom: var(--spacing-lg, 16px);
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.sa-hs-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.sa-hs-symbol {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    line-height: 1;
    letter-spacing: -0.02em;
}
.sa-hs-name {
    font-size: 0.85rem;
    color: var(--text-secondary, #9999bb);
    line-height: 1.3;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-hs-exchange {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--accent-blue-bg, rgba(46,170,255,0.15));
    color: var(--accent-blue, #2eaaff);
    border-radius: 4px;
    margin-top: 4px;
}
.sa-hs-right {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.sa-hs-price {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}
.sa-hs-change {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.85rem;
    font-weight: 600;
}
.sa-hs-up { color: var(--accent-green, #2ee68a); }
.sa-hs-down { color: var(--accent-red, #ff5c78); }
.sa-hs-flat { color: var(--text-secondary, #9999bb); }

/* ============================================
   STOCK ANALYSIS — Fundamentals Grid
   ============================================ */
.sa-fundamentals {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: var(--spacing-lg, 16px);
}
@media (max-width: 900px) {
    .sa-fundamentals { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .sa-fundamentals { grid-template-columns: repeat(2, 1fr); }
}
.sa-fund-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s, transform 0.15s;
}
.sa-fund-card:hover {
    border-color: var(--accent-blue, #2eaaff);
    transform: translateY(-2px);
}
.sa-fund-label {
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.sa-fund-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    line-height: 1.2;
}
.sa-fund-sub {
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
}

/* ============================================
   STOCK ANALYSIS — Financial Statements Table
   ============================================ */
.sa-financials-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-fin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    flex-wrap: wrap;
    gap: 8px;
}
.sa-fin-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}
.sa-fin-controls {
    display: flex;
    gap: 4px;
}
.sa-fin-tab {
    padding: 3px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    transition: all 0.15s;
}
.sa-fin-tab.active {
    background: var(--accent-blue-bg, rgba(46,170,255,0.15));
    border-color: var(--accent-blue, #2eaaff);
    color: var(--accent-blue, #2eaaff);
}
.sa-fin-tab:hover:not(.active) {
    color: var(--text-primary, #fff);
    border-color: var(--text-muted, #6666aa);
}
.sa-fin-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
}
.sa-fin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
}
.sa-fin-table th {
    text-align: right;
    padding: 8px 10px;
    color: var(--text-muted, #6666aa);
    font-weight: 600;
    font-size: 0.72rem;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sa-fin-table th:first-child {
    text-align: left;
}
.sa-fin-table td {
    text-align: right;
    padding: 7px 10px;
    color: var(--text-secondary, #9999bb);
    border-bottom: 1px solid rgba(42, 42, 85, 0.4);
}
.sa-fin-table td:first-child {
    text-align: left;
    color: var(--text-primary, #fff);
    font-weight: 500;
}
.sa-fin-table tbody tr:hover {
    background: rgba(46, 170, 255, 0.04);
}
.sa-fin-pos { color: var(--accent-green, #2ee68a) !important; font-weight: 600; }
.sa-fin-neg { color: var(--accent-red, #ff5c78) !important; }
.sa-fin-loading {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted, #6666aa);
    font-size: 0.85rem;
}

/* ============================================
   STOCK ANALYSIS — Khuyến nghị CTCK (#sa-recos-card)
   Bảng thống kê báo cáo phân tích của các công ty chứng khoán, đặt ngay dưới
   dải mã CP. Ẩn hoàn toàn (attribute hidden) khi mã chưa có báo cáo nào.
   ============================================ */
.sa-recos-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-md, 12px);
}
.sa-recos-card[hidden] { display: none; }
.sa-reco-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-reco-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}
.sa-reco-count {
    font-size: 0.72rem;
    color: var(--text-muted, #6666aa);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 20px;
    padding: 2px 10px;
}

/* Dải thống kê tổng hợp */
.sa-reco-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.sa-reco-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sa-reco-stat-label {
    font-size: 0.68rem;
    color: var(--text-muted, #6666aa);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.sa-reco-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    font-variant-numeric: tabular-nums;
}
.sa-reco-stat-sub {
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
}
.sa-reco-votes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0;
}
.sa-reco-pill {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sa-reco-pill b { font-weight: 700; }

/* Màu theo nhóm khuyến nghị — dùng chung cho pill và tag trong bảng */
.sa-reco-buy {
    color: var(--accent-green, #2ee68a);
    background: rgba(46, 230, 138, 0.12);
    border-color: rgba(46, 230, 138, 0.35);
}
.sa-reco-hold {
    color: var(--accent-yellow, #ffc94d);
    background: rgba(255, 201, 77, 0.12);
    border-color: rgba(255, 201, 77, 0.35);
}
.sa-reco-sell {
    color: var(--accent-red, #ff5c78);
    background: rgba(255, 92, 120, 0.12);
    border-color: rgba(255, 92, 120, 0.35);
}
.sa-reco-other {
    color: var(--text-muted, #6666aa);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color, #2a2a55);
}
.sa-reco-up { color: var(--accent-green, #2ee68a); font-weight: 600; }
.sa-reco-down { color: var(--accent-red, #ff5c78); font-weight: 600; }
.sa-reco-stale { color: var(--text-muted, #6666aa); }

/* Bảng chi tiết — cuộn dọc khi mã có nhiều báo cáo (VHC hơn 100 bản) */
.sa-reco-table-wrap {
    overflow: auto;
    max-height: 340px;
    scrollbar-width: thin;
    border-radius: 8px;
}
.sa-reco-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.sa-reco-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card, #1a1a35);
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted, #6666aa);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    white-space: nowrap;
}
.sa-reco-table td {
    padding: 7px 10px;
    color: var(--text-secondary, #9999bb);
    border-bottom: 1px solid rgba(42, 42, 85, 0.4);
    vertical-align: middle;
}
.sa-reco-table tbody tr:hover { background: rgba(46, 170, 255, 0.04); }
.sa-reco-row-stale td { opacity: 0.62; }
.sa-reco-broker {
    color: var(--text-primary, #fff) !important;
    font-weight: 700;
    white-space: nowrap;
}
.sa-reco-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sa-reco-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sa-reco-title {
    max-width: 420px;
    min-width: 200px;
}
.sa-reco-title a {
    color: var(--accent-blue, #2eaaff);
    text-decoration: none;
}
.sa-reco-title a:hover { text-decoration: underline; }
.sa-reco-note {
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
    line-height: 1.5;
}
@media (max-width: 640px) {
    .sa-reco-title { display: none; }
    .sa-reco-table th:nth-child(6) { display: none; }
}

/* ============================================
   STOCK ANALYSIS — Lịch sử chia cổ tức (#sa-dividends-card)
   ============================================ */
.sa-dividends-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-dividends-card[hidden] { display: none; }
.sa-div-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-div-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary, #fff);
}
.sa-div-yield {
    font-size: 0.75rem;
    color: var(--text-secondary, #9999bb);
}
.sa-div-yield b { color: var(--accent-green, #2ee68a); }
.sa-div-table-wrap {
    overflow: auto;
    max-height: 300px;
    scrollbar-width: thin;
}
.sa-div-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.sa-div-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card, #1a1a35);
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted, #6666aa);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    white-space: nowrap;
}
.sa-div-table td {
    padding: 7px 10px;
    color: var(--text-secondary, #9999bb);
    border-bottom: 1px solid rgba(42, 42, 85, 0.4);
}
.sa-div-table tbody tr:hover { background: rgba(46, 170, 255, 0.04); }
.sa-div-date {
    color: var(--text-primary, #fff) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sa-div-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sa-div-cash {
    color: var(--accent-green, #2ee68a);
    background: rgba(46, 230, 138, 0.12);
    border-color: rgba(46, 230, 138, 0.35);
}
.sa-div-stock {
    color: var(--accent-blue, #2eaaff);
    background: rgba(46, 170, 255, 0.12);
    border-color: rgba(46, 170, 255, 0.35);
}
.sa-div-other {
    color: var(--text-muted, #6666aa);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color, #2a2a55);
}
.sa-div-content { line-height: 1.5; }
.sa-div-note {
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
}

/* ============================================
   STOCK ANALYSIS — Trading Agent Chat
   ============================================ */
.sa-agent-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 12px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
    display: flex;
    flex-direction: column;
}
.sa-agent-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-agent-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary, #fff);
}
.sa-agent-sub {
    font-size: 0.75rem;
    color: var(--text-muted, #6666aa);
}
.sa-agent-chat {
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #2a2a55) transparent;
}
.sa-agent-empty {
    text-align: center;
    color: var(--text-muted, #6666aa);
    font-size: 0.85rem;
    padding: 20px 0;
}
.sa-agent-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}
.sa-agent-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}
.sa-agent-suggest {
    padding: 5px 12px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 16px;
    background: transparent;
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    transition: all 0.15s;
}
.sa-agent-suggest:hover {
    border-color: var(--accent-blue, #2eaaff);
    color: var(--accent-blue, #2eaaff);
    background: var(--accent-blue-bg, rgba(46,170,255,0.1));
}
.sa-agent-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.sa-agent-msg.user {
    align-self: flex-end;
    background: var(--accent-blue-bg, rgba(46,170,255,0.15));
    border: 1px solid rgba(46,170,255,0.3);
    color: var(--text-primary, #fff);
}
.sa-agent-msg.ai {
    align-self: flex-start;
    background: var(--bg-secondary, #12122a);
    border: 1px solid var(--border-color, #2a2a55);
    color: var(--text-primary, #fff);
}
.sa-agent-msg.ai h2,
.sa-agent-msg.ai h3 {
    font-size: 0.95rem;
    margin: 8px 0 4px;
    color: var(--accent-blue, #2eaaff);
}
.sa-agent-msg.ai strong { color: var(--accent-green, #2ee68a); }
.sa-agent-msg.ai ul,
.sa-agent-msg.ai ol { padding-left: 18px; margin: 4px 0; }
.sa-agent-msg.ai code {
    background: rgba(0,0,0,0.3);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.8rem;
}
.sa-agent-msg.ai p { margin: 4px 0; }
.sa-agent-typing {
    align-self: flex-start;
    padding: 10px 14px;
    background: var(--bg-secondary, #12122a);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 12px;
    color: var(--text-muted, #6666aa);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sa-agent-typing-dots {
    display: inline-flex;
    gap: 3px;
}
.sa-agent-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted, #6666aa);
    animation: sa-bounce 1.2s infinite;
}
.sa-agent-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.sa-agent-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sa-bounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
.sa-agent-input-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #2a2a55);
}
.sa-agent-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-secondary, #12122a);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}
.sa-agent-input:focus {
    border-color: var(--accent-blue, #2eaaff);
}
.sa-agent-send {
    padding: 10px 20px;
    background: var(--gradient-blue, linear-gradient(135deg, #2eaaff, #1a6fd6));
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.sa-agent-send:hover { opacity: 0.85; }
.sa-agent-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   MA HEATMAP — Bảng giá theo ngành + MA distance
   ============================================ */
.mah-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.mah-select {
    padding: 6px 12px;
    background: var(--bg-secondary, #12122a);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 8px;
    max-width: 220px;
}
.mah-sort-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.mah-sort-btn.active {
    background: var(--accent-blue-bg, rgba(46,170,255,0.15));
    border-color: var(--accent-blue, #2eaaff);
    color: var(--accent-blue, #2eaaff);
}
.mah-sort-btn:hover:not(.active) {
    color: var(--text-primary, #fff);
    border-color: var(--text-muted, #6666aa);
}
.mah-legend {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    font-size: 0.75rem;
    color: var(--text-muted, #6666aa);
    flex-wrap: wrap;
}
.mah-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mah-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    max-height: 600px;
    overflow-y: auto;
}
.mah-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    white-space: nowrap;
}
.mah-table th {
    padding: 8px 10px;
    text-align: center;
    color: var(--text-muted, #6666aa);
    font-weight: 600;
    font-size: 0.72rem;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    background: var(--bg-card, #1a1a35);
    z-index: 1;
}
.mah-table th:first-child { text-align: left; }
.mah-th-sort {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.mah-th-sort:hover { color: var(--accent-blue, #2eaaff); }
.mah-th-sort.active { color: var(--accent-blue, #2eaaff); }
.mah-sort-ic { font-size: 0.7rem; opacity: 0.7; margin-left: 2px; }
.mah-hint { font-size: 0.72rem; color: var(--text-muted, #6666aa); }
.mah-min-vol {
    width: 80px;
    padding: 6px 10px;
    background: var(--bg-secondary, #12122a);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s;
}
.mah-min-vol:focus { border-color: var(--accent-blue, #2eaaff); }
.mah-min-vol::placeholder { color: var(--text-muted, #6666aa); }

/* Price-board sub-tabs (Bảng Giá | MA Heatmap) */
.pb-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    padding-bottom: 10px;
}
.pb-subtab {
    padding: 8px 20px;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px 8px 0 0;
    background: var(--bg-secondary, #0d0d24);
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: none;
    transition: all 0.2s ease;
}
.pb-subtab.active {
    background: var(--bg-primary, #0a0a1a);
    color: var(--accent-blue, #4d9fff);
    border-color: var(--accent-blue, #4d9fff);
    font-weight: 600;
}
.pb-subtab:hover:not(.active) {
    color: var(--text-primary, #e0e0ff);
    background: var(--bg-tertiary, #12122e);
}
.pb-panel { display: none; }
.pb-panel.active { display: block; }

/* ── Sub-tab CP Tiềm Năng (ps-) — cùng pattern .pb-subtab ─────────────── */
.ps-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    padding-bottom: 10px;
}
.ps-subtab {
    padding: 8px 20px;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px 8px 0 0;
    background: var(--bg-secondary, #0d0d24);
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: none;
    transition: all 0.2s ease;
}
.ps-subtab.active {
    background: var(--bg-primary, #0a0a1a);
    color: var(--accent-blue, #4d9fff);
    border-color: var(--accent-blue, #4d9fff);
    font-weight: 600;
}
.ps-subtab:hover:not(.active) {
    color: var(--text-primary, #e0e0ff);
    background: var(--bg-tertiary, #12122e);
}
.ps-panel { display: none; }
.ps-panel.active { display: block; }

/* Nhóm cấp 1 trong tab Kỹ Thuật: Phân tích | Phá Đỉnh/Đáy. */
.feature-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.feature-subtab {
    padding: 8px 18px;
    border: 1px solid var(--border-color, #2a2a55);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--bg-secondary, #0d0d24);
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    font-size: 0.86rem;
    transition: all 0.2s ease;
}
.feature-subtab:hover:not(.active) {
    color: var(--text-primary, #e0e0ff);
    background: var(--bg-tertiary, #12122e);
}
.feature-subtab.active {
    color: var(--accent-blue, #4d9fff);
    border-color: var(--accent-blue, #4d9fff);
    background: var(--bg-primary, #0a0a1a);
    font-weight: 600;
}
.tech-feature-panel { display: none; }
.tech-feature-panel.active { display: block; }
.mah-sym { font-weight: 600; color: var(--text-primary, #fff) !important; }
.mah-table td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(42, 42, 85, 0.3);
    color: var(--text-secondary, #9999bb);
}
.mah-table td:first-child {
    text-align: left;
    color: var(--text-primary, #fff);
    font-weight: 600;
}
.mah-table tbody tr:hover {
    background: rgba(46, 170, 255, 0.04);
}
/* MA distance cells — color-coded */
.mah-cell {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 55px;
    text-align: center;
}
.mah-pos {
    background: rgba(46, 230, 138, 0.15);
    color: var(--accent-green, #2ee68a);
}
.mah-neg {
    background: rgba(255, 92, 120, 0.15);
    color: var(--accent-red, #ff5c78);
}
/* Intensity coloring based on distance magnitude */
.mah-pos.strong { background: rgba(46, 230, 138, 0.3); }
.mah-neg.strong { background: rgba(255, 92, 120, 0.3); }

/* ── Quét T+ (RSI 30m cắt Signal) — tái dùng pattern .mah-* ────────────── */
.tps-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    max-height: 600px;
    overflow-y: auto;
}
.tps-refresh-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tps-refresh-btn:hover { color: var(--text-primary, #fff); border-color: var(--accent-blue, #2eaaff); }
.tps-refresh-btn.loading { opacity: 0.6; cursor: wait; }
/* Nút chủ động "Quét tín hiệu" — nổi bật hơn nút refresh thường */
.tps-scan-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--accent-green, #2ee68a);
    border-radius: 6px;
    background: rgba(46, 230, 138, 0.12);
    color: var(--accent-green, #2ee68a);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tps-scan-btn:hover { background: rgba(46, 230, 138, 0.25); }
.tps-scan-btn.loading { opacity: 0.6; cursor: wait; }
/* Chấm báo điều kiện đã đổi nhưng chưa quét lại */
.tps-scan-btn.dirty::after {
    content: ' ●';
    color: var(--accent-yellow, #f0b429);
}
.tps-forming { font-size: 0.66rem; color: var(--accent-yellow, #f0b429); margin-left: 3px; }
.tps-deep { color: var(--accent-yellow, #f0b429); font-weight: 700; margin-right: 2px; cursor: help; }
.tps-cross { color: var(--accent-green, #2ee68a); font-weight: 600; }

/* ── 📈 RSI (cùng chiều vào, điều kiện lỏng) ───────────────────────────── */
/* Dùng lại toàn bộ khung .tps-*, chỉ đổi màu nút quét sang xanh dương để khỏi nhầm tab. */
.tps-scan-btn.rsi {
    border-color: var(--accent-blue, #4d9fff);
    background: rgba(77, 159, 255, 0.12);
    color: var(--accent-blue, #4d9fff);
}
.tps-scan-btn.rsi:hover { background: rgba(77, 159, 255, 0.25); }

/* ── ⚠️ Rủi ro (quét T+ ngược — giá cắt XUỐNG ngưỡng) ──────────────────── */
/* Cùng bộ khung .tps-*, chỉ đảo màu sang đỏ và thêm khối "mã đang cầm". */
.tps-scan-btn.risk {
    border-color: var(--accent-red, #ff5c78);
    background: rgba(255, 92, 120, 0.12);
    color: var(--accent-red, #ff5c78);
}
.tps-scan-btn.risk:hover { background: rgba(255, 92, 120, 0.25); }
.tpr-cross { color: var(--accent-red, #ff5c78); font-weight: 600; }
/* Khối danh mục đặt trên cùng — viền nổi khi có mã đang cầm dính tín hiệu ra */
.tpr-pf-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card, #14142b);
}
.tpr-pf-box.alert {
    border-color: var(--accent-red, #ff5c78);
    background: rgba(255, 92, 120, 0.06);
}
.tpr-pf-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 8px;
}
.tpr-pf-note { font-weight: 400; font-size: 0.8rem; color: var(--text-muted, #7a7a99); }

/* ==========================================
   REPORT SUB-TABS (Gộp AI + Tuần + Tháng)
   ========================================== */
.report-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
    padding-bottom: 10px;
}
.report-subtab {
    padding: 8px 20px;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px 8px 0 0;
    background: var(--bg-secondary, #0d0d24);
    color: var(--text-secondary, #9999bb);
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: none;
    transition: all 0.2s ease;
}
.report-subtab.active {
    background: var(--bg-primary, #0a0a1a);
    color: var(--accent-blue, #4d9fff);
    border-color: var(--accent-blue, #4d9fff);
    font-weight: 600;
}
.report-subtab:hover:not(.active) {
    color: var(--text-primary, #e0e0ff);
    background: var(--bg-tertiary, #12122e);
}
.report-panel {
    display: none;
}
.report-panel.active {
    display: block;
}



/* ============================================
   STOCK ANALYSIS — Phân tích sâu (engine Python:
   Trading Agent 13 agent + FinRobot 8 analyst)
   ============================================ */
.sa-deep {
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
    background: var(--bg-secondary, #12122a);
}
.sa-deep-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sa-deep-btn {
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(46,170,255,0.4);
    border-radius: 8px;
    background: var(--accent-blue-bg, rgba(46,170,255,0.12));
    color: var(--accent-blue, #2eaaff);
    cursor: pointer;
    transition: all 0.15s;
}
.sa-deep-btn:hover:not(:disabled) {
    background: rgba(46,170,255,0.22);
}
.sa-deep-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.sa-deep-tier {
    padding: 7px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    background: var(--bg-card, #1a1a35);
    color: var(--text-secondary, #9999bb);
}
.sa-deep-note {
    font-size: 0.72rem;
    color: var(--text-muted, #6666aa);
}
/* Ô email nhận báo cáo + lịch sử báo cáo đã chạy */
.sa-deep-email {
    padding: 7px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    background: var(--bg-card, #1a1a35);
    color: var(--text-primary, #e0e0ff);
    min-width: 190px;
}
.sa-deep-email:disabled { opacity: 0.5; cursor: not-allowed; }
/* Gửi mail là tính năng TUỲ CHỌN chưa bật, không phải lỗi → màu chữ mờ như ghi chú,
   không dùng vàng cảnh báo (trước đây đọc như có gì đang hỏng). */
.sa-deep-mailhint {
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
    white-space: nowrap;
}
.sa-deep-mailhint[hidden] { display: none; }
.sa-deep-history { margin-top: 10px; }
.sa-deep-hist-label {
    font-size: 0.72rem;
    color: var(--text-muted, #6666aa);
    margin-bottom: 4px;
}
.sa-deep-hist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sa-deep-hist-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.74rem;
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 999px;
    background: var(--bg-card, #1a1a35);
    color: var(--text-primary, #e0e0ff);
    cursor: pointer;
    transition: all 0.15s;
}
.sa-deep-hist-item:hover { border-color: var(--accent-blue, #2eaaff); color: var(--accent-blue, #2eaaff); }
.sa-deep-hist-meta { color: var(--text-muted, #6666aa); font-size: 0.68rem; }
.sa-deep-hist-none { font-size: 0.72rem; color: var(--text-muted, #6666aa); }

/* ── Credits: trạng thái khoá trong kho nghiên cứu ────────────────────── */
.sa-deep-hist-item.locked { opacity: 0.82; }
.sa-deep-hist-item.locked:hover { opacity: 1; border-color: var(--accent-yellow, #f0b429); color: var(--accent-yellow, #f0b429); }
.sa-lock { color: var(--accent-yellow, #f0b429); }
.sa-free {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--accent-green, #2ee68a); background: rgba(46, 230, 138, 0.14);
    padding: 1px 4px; border-radius: 3px;
}
.sa-mine {
    font-size: 0.6rem; color: var(--accent-blue, #4d9fff);
    background: rgba(77, 159, 255, 0.14); padding: 1px 4px; border-radius: 3px;
}
.sa-credit-chip {
    font-size: 0.7rem; font-weight: 600; color: var(--accent-yellow, #f0b429);
    background: rgba(240, 180, 41, 0.13); border: 1px solid rgba(240, 180, 41, 0.3);
    padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
/* Thẻ preview bài bị khoá — thay cho màn hình trống */
.sa-lock-card {
    border: 1px solid rgba(240, 180, 41, 0.35); border-radius: var(--radius-md, 8px);
    background: var(--bg-card, #14142b); padding: 16px 18px;
}
.sa-lock-head { font-size: 0.92rem; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 10px; }
.sa-lock-lead {
    font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary, #9999bb);
    margin: 0 0 12px; font-style: italic;
}
.sa-lock-facts { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.sa-lock-facts span { font-size: 0.72rem; color: var(--text-muted, #7a7a99); }
.sa-lock-sub { font-size: 0.75rem; color: var(--text-muted, #7a7a99); margin: 10px 0 4px; }
.sa-lock-list { margin: 0 0 12px; padding-left: 20px; }
.sa-lock-list li { font-size: 0.8rem; color: var(--text-secondary, #9999bb); line-height: 1.6; }
.sa-unlock-btn {
    padding: 9px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--accent-yellow, #f0b429); border-radius: 6px;
    background: rgba(240, 180, 41, 0.14); color: var(--accent-yellow, #f0b429);
    transition: background 0.15s;
}
.sa-unlock-btn:hover:not(:disabled) { background: rgba(240, 180, 41, 0.28); }
.sa-unlock-btn:disabled { opacity: 0.6; cursor: wait; }
.sa-lock-note { font-size: 0.72rem; color: var(--text-muted, #7a7a99); margin-top: 7px; }
.sa-lock-warn {
    margin-top: 10px; font-size: 0.8rem; line-height: 1.5;
    color: var(--accent-red, #ff5c78);
}

/* ══════════════════════════════════════════════════════════════════════
   KHO NGHIÊN CỨU (tab #research) — lưới thẻ báo cáo
   ══════════════════════════════════════════════════════════════════════ */
.rh-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.rh-filter {
    padding: 6px 16px; font-size: 0.8rem; font-family: inherit; cursor: pointer;
    border: 1px solid var(--border-color, #2a2a55); border-radius: 999px;
    background: var(--bg-secondary, #0d0d24); color: var(--text-secondary, #9999bb);
    transition: all 0.15s;
}
.rh-filter:hover { color: var(--text-primary, #fff); }
.rh-filter.active {
    background: rgba(77, 159, 255, 0.14);
    border-color: var(--accent-blue, #4d9fff);
    color: var(--accent-blue, #4d9fff);
    font-weight: 600;
}

.rh-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rh-empty {
    grid-column: 1 / -1; padding: 36px 20px; text-align: center;
    color: var(--text-muted, #7a7a99); font-size: 0.85rem;
}
.rh-err { color: var(--accent-red, #ff5c78); }

.rh-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px; cursor: pointer;
    background: var(--bg-card, #14142b);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: var(--radius-md, 10px);
    transition: border-color 0.15s, transform 0.15s;
}
.rh-card:hover, .rh-card:focus-visible {
    border-color: var(--accent-blue, #4d9fff);
    transform: translateY(-2px);
    outline: none;
}
.rh-card.locked:hover, .rh-card.locked:focus-visible {
    border-color: var(--accent-yellow, #f0b429);
}
.rh-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rh-sym {
    font-family: var(--font-display, inherit);
    font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--text-primary, #fff);
}
.rh-rating {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    padding: 3px 9px; border-radius: 4px; white-space: nowrap;
}
.rh-buy { color: var(--accent-green, #2ee68a); background: rgba(46, 230, 138, 0.14); }
.rh-sell { color: var(--accent-red, #ff5c78); background: rgba(255, 92, 120, 0.14); }
.rh-hold { color: var(--text-secondary, #9999bb); background: rgba(255, 255, 255, 0.06); }

.rh-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.rh-badge {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.rh-free { color: var(--accent-green, #2ee68a); background: rgba(46, 230, 138, 0.14); }
.rh-mine { color: var(--accent-blue, #4d9fff); background: rgba(77, 159, 255, 0.14); }
.rh-lock { color: var(--accent-yellow, #f0b429); background: rgba(240, 180, 41, 0.14); }

.rh-lead {
    margin: 0; font-size: 0.8rem; line-height: 1.55;
    color: var(--text-secondary, #9999bb);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.rh-lead-empty { font-style: italic; color: var(--text-muted, #7a7a99); }
.rh-meta { font-size: 0.7rem; color: var(--text-muted, #7a7a99); }
.rh-foot {
    display: flex; justify-content: space-between; gap: 10px;
    padding-top: 8px; margin-top: auto;
    border-top: 1px solid var(--border-color, #2a2a55);
    font-size: 0.7rem; color: var(--text-muted, #7a7a99);
}
.rh-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-when { white-space: nowrap; }

/* ── Modal đọc bài ───────────────────────────────────────────────────── */
.rh-overlay {
    display: none; position: fixed; inset: 0; z-index: 210;
    background: rgba(0, 0, 0, 0.66);
    align-items: flex-start; justify-content: center;
    padding: 28px 16px; overflow-y: auto;
}
.rh-overlay.open { display: flex; }
.rh-modal-card {
    background: var(--bg-card, #14142b);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: var(--radius-md, 10px);
    max-width: 900px; width: 100%;
}
.rh-modal-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 18px; border-bottom: 1px solid var(--border-color, #2a2a55);
    background: var(--bg-card, #14142b);
    border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}
.rh-modal-head b { font-size: 0.95rem; color: var(--text-primary, #fff); }
.rh-close {
    background: none; border: 1px solid var(--border-color, #2a2a55);
    color: var(--text-muted, #7a7a99); border-radius: 6px;
    width: 28px; height: 28px; cursor: pointer; font-size: 0.8rem; flex: none;
}
.rh-close:hover { color: var(--text-primary, #fff); }
.rh-modal-body { padding: 18px; }
.rh-raw { white-space: pre-wrap; font-size: 0.82rem; line-height: 1.7; margin: 0; }

/* Thẻ bài đang khoá trong modal */
.rh-lock-lead {
    margin: 0 0 12px; font-size: 0.88rem; line-height: 1.65; font-style: italic;
    color: var(--text-secondary, #9999bb);
}
.rh-lock-facts { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rh-lock-facts span { font-size: 0.74rem; color: var(--text-muted, #7a7a99); }
.rh-lock-sub { font-size: 0.76rem; color: var(--text-muted, #7a7a99); margin: 12px 0 5px; }
.rh-lock-list { margin: 0 0 12px; padding-left: 20px; }
.rh-lock-list li { font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary, #9999bb); }
.rh-unlock {
    padding: 10px 20px; font-size: 0.86rem; font-weight: 600; cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--accent-yellow, #f0b429); border-radius: 6px;
    background: rgba(240, 180, 41, 0.14); color: var(--accent-yellow, #f0b429);
}
.rh-unlock:hover:not(:disabled) { background: rgba(240, 180, 41, 0.28); }
.rh-unlock:disabled { opacity: 0.6; cursor: wait; }
.rh-lock-note { font-size: 0.74rem; color: var(--text-muted, #7a7a99); margin-top: 7px; }
.rh-lock-warn { font-size: 0.82rem; color: var(--accent-red, #ff5c78); margin-bottom: 10px; }

/* Chip số dư trên header — cùng dáng .header-icon-btn nhưng có số bên cạnh */
.credit-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; cursor: pointer; white-space: nowrap;
    font-size: 0.78rem; font-weight: 600; font-family: inherit;
    color: var(--accent-yellow, #f0b429);
    background: rgba(240, 180, 41, 0.12);
    border: 1px solid rgba(240, 180, 41, 0.32);
    border-radius: 999px;
    transition: background 0.15s;
}
.credit-pill:hover { background: rgba(240, 180, 41, 0.26); }
.credit-pill span { font-variant-numeric: tabular-nums; }

/* ── Màn hình ví / nạp credits (mở từ chip 🪙) ─────────────────────────── */
.sa-credit-chip { cursor: pointer; font-family: inherit; }
.sa-credit-chip:hover { background: rgba(240, 180, 41, 0.24); }

.sa-vi-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, 0.62);
    align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.sa-vi-overlay.open { display: flex; }
.sa-vi-card {
    background: var(--bg-card, #14142b);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: var(--radius-md, 10px);
    padding: 20px 22px; max-width: 520px; width: 100%;
}
.sa-vi-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 4px;
}
.sa-vi-head b { font-size: 1rem; color: var(--text-primary, #fff); }
.sa-vi-close {
    background: none; border: 1px solid var(--border-color, #2a2a55);
    color: var(--text-muted, #7a7a99); border-radius: 6px;
    width: 28px; height: 28px; cursor: pointer; font-size: 0.8rem; flex: none;
}
.sa-vi-close:hover { color: var(--text-primary, #fff); }
.sa-vi-loading { color: var(--text-muted, #7a7a99); font-size: 0.85rem; margin: 0; }
.sa-vi-bal {
    font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--accent-yellow, #f0b429); font-variant-numeric: tabular-nums;
    margin: 6px 0 4px;
}
.sa-vi-bal span { font-size: 0.85rem; font-weight: 500; color: var(--text-muted, #7a7a99); }
.sa-vi-sub {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-muted, #7a7a99); font-weight: 600;
    margin: 20px 0 8px; padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-vi-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sa-vi-table td {
    padding: 7px 0; border-bottom: 1px solid var(--border-color, #2a2a55);
    color: var(--text-secondary, #9999bb); vertical-align: top;
}
.sa-vi-table tr:last-child td { border-bottom: 0; }
.sa-vi-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-vi-free { color: var(--accent-green, #2ee68a); font-size: 0.76rem; }
.sa-vi-plus { color: var(--accent-green, #2ee68a); font-weight: 600; }
.sa-vi-minus { color: var(--accent-red, #ff5c78); font-weight: 600; }
.sa-vi-after { color: var(--text-muted, #7a7a99); font-size: 0.76rem; }
.sa-vi-when { color: var(--text-muted, #7a7a99); font-size: 0.72rem; white-space: nowrap; }
.sa-vi-ghichu { font-size: 0.72rem; color: var(--text-muted, #7a7a99); margin-top: 2px; }

/* Mỗi cách nạp (ngân hàng / MoMo) là một khối riêng, tách bạch cho khỏi nhầm */
.sa-vi-cach {
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px; padding: 14px; margin-bottom: 12px;
    background: var(--bg-secondary, #0d0d24);
}
.sa-vi-cach-ten {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 0.85rem; font-weight: 600;
    color: var(--text-primary, #fff); margin-bottom: 10px;
}
.sa-vi-auto {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent-green, #2ee68a); background: rgba(46, 230, 138, 0.14);
    padding: 2px 7px; border-radius: 4px;
}
.sa-vi-qr {
    display: block; width: 100%; max-width: 220px; height: auto;
    margin: 0 auto 10px; border-radius: 8px; background: #fff; padding: 6px;
}
.sa-vi-memo-box {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--border-color, #2a2a55);
}
.sa-vi-memo-label { font-size: 0.78rem; color: var(--text-secondary, #9999bb); }
/* Báo tiền về — thẻ lớn giữa màn hình, không thể không thấy */
.credits-bao {
    position: fixed; inset: 0; z-index: 400;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer; padding: 20px;
}
.credits-bao.hien { display: flex; }
.credits-bao-the {
    text-align: center; padding: 36px 44px;
    border-radius: 18px;
    background: var(--bg-card, #14142b);
    border: 2px solid var(--accent-green, #2ee68a);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(46, 230, 138, 0.18);
    animation: creditsBaoVao 0.28s ease-out;
    max-width: 420px;
}
.credits-bao-ic { font-size: 3.6rem; line-height: 1; margin-bottom: 10px; }
.credits-bao-to {
    font-size: 2.6rem; font-weight: 800; line-height: 1.1;
    color: var(--accent-green, #2ee68a);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.credits-bao-phu {
    font-size: 1rem; color: var(--text-primary, #fff); margin-top: 6px;
}
.credits-bao-du {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border-color, #2a2a55);
    font-size: 1rem; color: var(--text-secondary, #9999bb);
}
.credits-bao-du b { color: var(--accent-yellow, #f0b429); font-size: 1.15rem; }
.credits-bao-tat {
    margin-top: 14px; font-size: 0.75rem; color: var(--text-muted, #7a7a99);
}
@keyframes creditsBaoVao {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .credits-bao-the { animation: none; }
}
@media (max-width: 520px) {
    .credits-bao-the { padding: 28px 24px; }
    .credits-bao-to { font-size: 2.1rem; }
    .credits-bao-ic { font-size: 3rem; }
}

.sa-vi-ok {
    margin: 10px 0 0; padding: 10px 12px; border-radius: 6px;
    font-size: 0.86rem; line-height: 1.5;
    color: var(--accent-green, #2ee68a);
    background: rgba(46, 230, 138, 0.12);
    border: 1px solid rgba(46, 230, 138, 0.34);
}
.sa-vi-qr-note {
    text-align: center; font-size: 0.74rem; line-height: 1.5;
    color: var(--text-muted, #7a7a99); margin: -4px 0 10px;
}
.sa-vi-eta { margin-top: 6px; font-size: 0.74rem; color: var(--text-muted, #7a7a99); }
.sa-vi-note { font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary, #9999bb); margin: 0; }
.sa-vi-steps { margin: 0; padding-left: 20px; }
.sa-vi-steps > li {
    font-size: 0.83rem; line-height: 1.6;
    color: var(--text-secondary, #9999bb); margin-bottom: 12px;
}
.sa-vi-bank {
    margin-top: 7px; padding: 10px 12px;
    background: var(--bg-secondary, #0d0d24);
    border: 1px solid var(--border-color, #2a2a55); border-radius: 6px;
}
.sa-vi-acc { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.sa-vi-acc > span {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1rem; font-weight: 600; color: var(--text-primary, #fff);
    letter-spacing: 0.03em;
}
.sa-vi-holder {
    margin-top: 5px; font-size: 0.76rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted, #7a7a99);
}
.sa-vi-memo {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1.05rem; font-weight: 700; color: var(--accent-yellow, #f0b429);
    letter-spacing: 0.06em;
}
.sa-vi-copy {
    padding: 3px 10px; font-size: 0.7rem; cursor: pointer; flex: none;
    border: 1px solid var(--border-color, #2a2a55); border-radius: 5px;
    background: var(--bg-card, #14142b); color: var(--text-secondary, #9999bb);
}
.sa-vi-copy:hover { color: var(--text-primary, #fff); border-color: var(--accent-blue, #4d9fff); }
.sa-vi-warn-sm {
    margin-top: 6px; font-size: 0.74rem; line-height: 1.5;
    color: var(--accent-red, #ff5c78);
}
.sa-vi-warn { font-size: 0.83rem; color: var(--accent-red, #ff5c78); margin: 12px 0 0; }
.sa-vi-goi { margin: 0; padding-left: 20px; }
.sa-vi-goi li {
    font-size: 0.82rem; line-height: 1.7; color: var(--text-secondary, #9999bb);
}
/* Banner báo cáo cũ từ kho dùng chung */
.sa-deep-stale {
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    border: 1px solid var(--accent-yellow, #f0b429);
    border-radius: 8px;
    background: rgba(240, 180, 41, 0.1);
    color: var(--text-primary, #e0e0ff);
}
.sa-deep-progress {
    margin-top: 10px;
}
.sa-deep-track {
    height: 5px;
    border-radius: 3px;
    background: var(--border-color, #2a2a55);
    overflow: hidden;
}
.sa-deep-track > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2eaaff, #00e676);
    transition: width 0.6s linear;
}
.sa-deep-step {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted, #6666aa);
}
.sa-deep-result {
    margin-top: 12px;
}
.sa-deep-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.sa-deep-rating {
    padding: 3px 10px;
    flex-shrink: 0;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0b0b1a;
}
.sa-deep-meta {
    font-size: 0.7rem;
    color: var(--text-muted, #6666aa);
}
.sa-deep-block {
    border-top: 1px solid var(--border-color, #2a2a55);
    padding-top: 10px;
    margin-top: 10px;
}
.sa-deep-block h5 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--text-primary, #fff);
}
.sa-deep-src {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-muted, #6666aa);
}
/* Hồ sơ dự án: khối quan trọng nhất — viền trái nhấn màu */
.sa-deep-project {
    border-left: 3px solid var(--accent-green, #00e676);
    padding-left: 10px;
}
.sa-deep-project ul {
    margin: 0;
    padding-left: 18px;
}
.sa-deep-project li {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary, #9999bb);
    margin-bottom: 6px;
}
.sa-deep-empty {
    font-size: 0.78rem;
    color: var(--text-muted, #6666aa);
    font-style: italic;
}
/* Bối cảnh thị trường chung: khối NỀN, đặt đầu tiên — viền trái xanh dương để
   phân biệt với hồ sơ dự án (xanh lá) và không bị đọc lẫn thành số của mã. */
.sa-deep-market {
    border-left: 3px solid var(--accent-blue, #2eaaff);
    padding-left: 10px;
}
/* Câu nối thị trường ↔ cổ phiếu (beta, cỡ vị thế) — lý do cả khối này tồn tại */
.sa-deep-bridge {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(46,170,255,0.10);
    border: 1px solid rgba(46,170,255,0.28);
}
.sa-deep-vote {
    margin-top: 8px;
}
.sa-deep-vote > summary {
    cursor: pointer;
    font-size: 0.74rem;
    color: var(--accent-blue, #2eaaff);
}
.sa-deep-vote ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.sa-deep-vote li {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-secondary, #9999bb);
    margin-bottom: 4px;
}
.sa-deep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}
.sa-deep-kv {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--bg-card, #1a1a35);
    font-size: 0.76rem;
}
.sa-deep-kv span {
    color: var(--text-muted, #6666aa);
}
.sa-deep-kv b {
    color: var(--text-primary, #fff);
}
.sa-deep-reasons {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary, #9999bb);
}
.sa-deep-warn {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    background: rgba(255,167,38,0.12);
    border: 1px solid rgba(255,167,38,0.35);
    color: #ffa726;
}
.sa-deep-err {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(255,92,120,0.12);
    border: 1px solid rgba(255,92,120,0.35);
    color: #ff5c78;
}
.sa-deep-full {
    margin-top: 12px;
}
.sa-deep-full > summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--accent-blue, #2eaaff);
}
/* Báo cáo engine là TEXT thuần (emoji + kẻ ━━━) — giữ nguyên xuống dòng */
.sa-deep-report {
    margin-top: 8px;
    max-height: 460px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-secondary, #9999bb);
    word-break: break-word;
    scrollbar-width: thin;
}
/* ── Nhấn nhá báo cáo sâu ─────────────────────────────────────────────────
   Màu theo NGHĨA, không theo trang trí: xanh lá = phía mua/thuận lợi,
   đỏ = phía bán/rủi ro, vàng = chờ/trung lập, xám = không có số. */
.sa-em-buy { color: var(--accent-green, #2ee68a) !important; font-weight: 700; }
.sa-em-sell { color: var(--accent-red, #ff5c78) !important; font-weight: 700; }
.sa-em-hold { color: var(--accent-yellow, #ffcc00) !important; font-weight: 700; }
.sa-em-info { color: var(--accent-blue, #2eaaff) !important; font-weight: 700; }
.sa-em-flat { color: var(--text-muted, #6666aa) !important; font-weight: 600; }

/* Mã CP — luôn xanh lá, đây là thứ phải nhận ra đầu tiên khi đọc bài cũ */
.sa-hl-sym {
    color: var(--accent-green, #2ee68a);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.sa-deep-sym {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(46, 230, 138, 0.14);
    border: 1px solid rgba(46, 230, 138, 0.45);
    color: var(--accent-green, #2ee68a);
    font-weight: 800;
    letter-spacing: 0.03em;
}
.sa-deep-sym-lg {
    padding: 2px 12px;
    font-size: 1.05rem;
    font-family: var(--font-display, inherit);
}
/* Đang đọc báo cáo của mã KHÁC mã trên ô tìm kiếm → nói thẳng ra */
.sa-deep-offsym {
    font-size: 0.68rem;
    color: var(--accent-yellow, #ffcc00);
    border: 1px dashed rgba(255, 204, 0, 0.5);
    border-radius: 5px;
    padding: 1px 6px;
}

/* Từ khoá hành động trong thân bài (MUA / BÁN / TĂNG TỶ TRỌNG ...) */
.sa-hl-act { font-weight: 700; }
.sa-hl-price {
    color: var(--text-primary, #e0e0ff);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sa-hl-num {
    color: var(--accent-blue, #2eaaff);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Thân báo cáo: từng dòng một khối, nhãn đầu dòng nổi lên */
.sa-rep-line { margin: 0 0 2px; }
.sa-rep-gap { height: 8px; }
.sa-rep-lbl {
    color: var(--text-primary, #e0e0ff);
    font-weight: 700;
}

.sa-deep-disc {
    margin-top: 10px;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-muted, #6666aa);
}

/* Ẩn mũi tên tăng/giảm của ô nhập số.
   Trình duyệt vẽ cặp mũi tên spinner trên mọi input[type=number]; trên nền tối
   nó hiện thành một dải dọc nhỏ có tam giác xanh, trông như lỗi giao diện chứ
   không như nút bấm. Các ô lọc ở đây đều gõ số trực tiếp nên không cần spinner.
   Bỏ dòng này là mũi tên hiện lại. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dải giá thị trường thế giới (chạy ngang) + bảng trong tab 🌍 Thế giới
   ═══════════════════════════════════════════════════════════════════════════ */

.world-ticker {
    position: sticky;
    /* Nằm ngay dưới .header (cao 44px) và cũng dính lại khi cuộn — dải này chỉ
       có ích nếu luôn thấy được. */
    top: 44px;
    z-index: 999;
    display: flex;
    align-items: stretch;
    height: 26px;
    background: linear-gradient(180deg, #12122a 0%, #0d0d20 100%);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    user-select: none;
}

.world-ticker.is-stale {
    /* Số cũ vì không gọi được nguồn: viền vàng để không ai đọc như số hiện tại */
    border-bottom-color: var(--accent-yellow, #ffcc00);
}

.world-ticker-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-blue);
    background: var(--accent-blue-bg);
    border-right: 1px solid var(--border-color);
}

.world-ticker-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.world-ticker-track {
    display: inline-flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    /* Nội dung được nhân đôi trong JS, nên dịch -50% là về đúng vị trí đầu →
       vòng lặp liền mạch, không có khe trống. */
    animation: world-ticker-scroll 60s linear infinite;
    will-change: transform;
}

/* Cố tình KHÔNG có :hover { animation-play-state: paused }. Dải nằm ngay dưới
   header nên chuột đi qua nó liên tục lúc dùng Dashboard — dừng theo hover là
   dải đứng im gần như suốt. Muốn xem kỹ một mục thì dừng lại ở nó, tooltip hiện
   đầy đủ giá, giá tham chiếu và thời điểm chốt số. */

@keyframes world-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Ai bật "giảm chuyển động" trong hệ thống thì không cho nó chạy — thay bằng
   dải cuộn được bằng chuột. */
@media (prefers-reduced-motion: reduce) {
    .world-ticker-track { animation: none; }
    .world-ticker-viewport { overflow-x: auto; }
}

.world-ticker-loading {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.wm-tick {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 0 12px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    border-right: 1px solid rgba(42, 42, 85, 0.5);
}

.wm-tick b {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.wm-tick i {
    font-style: normal;
    font-weight: 600;
    font-size: 0.72rem;
}

/* ○ = thị trường đã đóng cửa, số này là giá chốt phiên chứ không phải giá đang chạy */
.wm-tick u {
    text-decoration: none;
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Ô dấu ○ luôn có trong DOM (để làm mới số mà không dựng lại khung). Khi rỗng
   phải ẩn hẳn, không thì `gap` của flex vẫn chừa một khoảng trắng lệch. */
.wm-tick u:empty { display: none; }

.wm-tick.wm-old { opacity: 0.62; }

.wm-up i { color: var(--accent-green); }
.wm-down i { color: var(--accent-red); }
.wm-flat i { color: var(--text-secondary); }

/* Từ 1024px xuống, .header .container chuyển height:auto (nav xuống hàng riêng),
   nên chiều cao header không còn là 44px và mốc "top: 44px" ở trên sẽ lệch —
   dải chồng lên nav hoặc hở một khoảng. Ở các cỡ này bỏ sticky, để dải cuộn
   theo trang. */
@media (max-width: 1024px) {
    .world-ticker { position: relative; top: auto; }
}

@media (max-width: 768px) {
    .world-ticker-label { padding: 0 7px; font-size: 0.6rem; }
    .world-ticker-label .wtl-text { display: none; }
    .wm-tick { padding: 0 9px; font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phái sinh VN30 (card đầu Dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */

.deriv-card .card-header h3 { display: flex; align-items: baseline; gap: 8px; }

.deriv-contract {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--accent-blue);
    background: var(--accent-blue-bg);
    padding: 1px 7px;
    border-radius: 4px;
}

.deriv-head-right { display: flex; align-items: center; gap: 8px; }
.deriv-asof { font-size: 0.74rem; color: var(--text-muted); }
.deriv-loading { color: var(--text-muted); font-size: 0.85rem; }
.dv-err { color: var(--accent-red); font-size: 0.85rem; }
.dv-warn { color: var(--accent-yellow, #ffcc00); }

/* Dấu "đang khớp" trên ô giá phái sinh. Nó phân biệt con số DUY NHẤT chạy theo
   thời gian thật với mọi con số chốt phiên còn lại trong card, nên phải nhìn ra
   ngay mà không cần đọc chữ. */
.dv-live {
    color: var(--accent-green, #2ee68a);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    animation: dv-live-pulse 2s ease-in-out infinite;
}

@keyframes dv-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Người đặt hệ thống ở chế độ giảm hiệu ứng thì bỏ nhấp nháy — màu đã đủ để
   phân biệt, và một ô nhấp nháy liên tục là thứ gây khó chịu thật sự. */
@media (prefers-reduced-motion: reduce) {
    .dv-live { animation: none; }
}

/* Hàng ô số. auto-fit để 4 ô (chưa có file khối ngoại/tự doanh) và 6 ô đều
   lấp kín hàng, không để một ô lẻ dài ngoẵng. */
.dv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.dv-tile {
    padding: 9px 11px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-radius: 7px;
    min-width: 0;
}

.dv-tile.dv-up { border-left-color: var(--accent-green); }
.dv-tile.dv-down { border-left-color: var(--accent-red); }
.dv-tile.dv-flat { border-left-color: var(--border-color); }

.dv-tile-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-tile-value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.dv-tile-sub { font-size: 0.72rem; color: var(--text-secondary); }

.dv-cycle { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 4px; }

.dv-h {
    margin: 14px 0 4px;
    font-size: 0.84rem;
    color: var(--text-primary);
}

/* Bảng nhiều cột: cho cuộn ngang TRONG khung, không đẩy cả trang rộng ra. */
.dv-scroll { overflow-x: auto; }

.dv-table {
    font-size: 0.78rem;
    white-space: nowrap;
}

.dv-table td, .dv-table th { font-variant-numeric: tabular-nums; }
.dv-table .dv-dim { color: var(--text-secondary); }

/* Dùng chung thang màu tăng/giảm với phần còn lại của app */
.dv-up { color: var(--accent-green); }
.dv-down { color: var(--accent-red); }
.dv-flat { color: var(--text-secondary); }
/* Ô .dv-tile cũng nhận class màu, nhưng ở đó màu chỉ nằm ở viền trái —
   nếu không chặn thì cả chữ trong ô cũng bị nhuộm và số chính mất tương phản. */
.dv-tile.dv-up, .dv-tile.dv-down, .dv-tile.dv-flat { color: inherit; }
.dv-tile.dv-up .dv-tile-value { color: var(--accent-green); }
.dv-tile.dv-down .dv-tile-value { color: var(--accent-red); }

/* Sổ lệnh: hai bên đối xứng nên cột nào cũng canh phải, đọc theo hàng mới
   thấy được bậc giá nào đang dày. */
.dv-book { min-width: 320px; max-width: 480px; }
.dv-book td, .dv-book th { text-align: right; }
.dv-book tbody tr:last-child td { border-top: 1px solid var(--border-color); }
.dv-book-note { font-size: 0.76rem; color: var(--text-secondary); margin: 5px 0 0; }

.dv-notes {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.dv-notes li { margin-bottom: 3px; }

@media (max-width: 768px) {
    .dv-tiles { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); }
    .dv-tile-value { font-size: 1.05rem; }
    .dv-table { font-size: 0.72rem; }

    /* Tiêu đề card: 3 khối (tên · chip hợp đồng · ngày+nút) không đủ chỗ trên
       một hàng 375px — để nguyên thì tên xuống 3 dòng và chip đè lên chữ ngày.
       Cho nó xuống hàng hẳn và bỏ nowrap của chip. */
    .deriv-card .card-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .deriv-card .card-header h3 {
        flex-wrap: wrap;
        font-size: 0.95rem;
    }
    .deriv-contract { font-size: 0.66rem; }
    .deriv-head-right { width: 100%; justify-content: space-between; }
    .deriv-asof { font-size: 0.7rem; }
}

/* Nút mở/đóng phần chi tiết của card phái sinh. Card nằm đầu Dashboard nên
   mặc định chỉ hiện hàng ô số; hai bảng bên dưới cộng lại hơn 20 dòng và sẽ
   đẩy bảng giá xuống ngoài màn hình nếu để mở sẵn. */
.deriv-toggle {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-family: inherit;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}

.deriv-toggle:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.deriv-toggle.is-open {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: var(--accent-blue-bg);
}

/* Mũi tên chỉ chiều mở/đóng — dùng ::after để chữ trong nút do JS quyết định */
.deriv-toggle::after { content: ' ▾'; font-size: 0.66rem; }
.deriv-toggle.is-open::after { content: ' ▴'; }

/* Phần chi tiết: cách hàng ô số một khoảng, có vạch phân tách */
#deriv-detail {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* Ô "chưa có dữ liệu" trong bảng Mua Bán Ròng Khớp Lệnh.
   Phải khác hẳn một con số: trước đây thiếu dữ liệu hiện thành "+0" và đọc
   thành "nhóm này mua bán cân bằng" — một khẳng định sai. */
.ig-nodata {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
}

.ig-nodata-sub { font-size: 0.66rem; opacity: 0.75; font-style: normal; }

/* Mốc dữ liệu riêng của từng nhóm — chỉ hiện khi các nhóm LỆCH ngày */
.ig-group-date {
    display: block;
    font-size: 0.64rem;
    font-weight: 400;
    color: var(--accent-yellow, #ffcc00);
    letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   LỊCH SỬ GIAO DỊCH (tab #trading-history) — js/trading-history.js
   Chỉ những class KHÔNG có sẵn mới nằm ở đây. Bảng dùng lại .mah-table /
   .mah-th-sort / .mah-cell, ô số dùng lại .dv-tile của card phái sinh (cùng
   một dạng: nhãn nhỏ / số to / phụ đề), nút dùng lại .tps-scan-btn.
   Sub-tab phải có tên riêng .th-subtab chứ KHÔNG dùng lại .ps-subtab: app.js
   gắn handler cho mọi .ps-subtab trên trang, trùng tên là hai bộ handler cùng
   bắn và panel nhảy lung tung.
   ══════════════════════════════════════════════════════════════════════ */

.th-lb { font-size: 0.75rem; color: var(--text-muted, #6666aa); margin-left: 6px; }
.th-date { width: 140px; text-align: left; }
.th-sym-inp { width: 120px; text-align: left; text-transform: uppercase; }

.th-note {
    padding: 22px 16px; text-align: center; line-height: 1.6;
    color: var(--text-muted, #6666aa); font-size: 0.85rem; margin: 0;
}
.th-err { color: var(--accent-red, #ff5c78); }

.th-line { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-secondary, #9999bb); }

.th-sec {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 6px; font-size: 0.86rem; font-weight: 600;
    color: var(--text-primary, #fff);
}
.th-sec-note { font-size: 0.75rem; font-weight: 400; color: var(--text-muted, #6666aa); }

/* Câu giải thích top-5 — thứ quan trọng nhất tab này, nên nó là một băng ngang
   full-width có viền trái dày, không phải chú thích chữ nhỏ dưới bảng.
   4 mức: nguy (>100% — các lệnh còn lại cộng lại đang lỗ), canhbao (≥50%),
   thieu (mẫu ≤5 lệnh, con số chưa nói lên gì), ok. */
.th-top5 {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 10px 0 4px; padding: 11px 14px;
    border-radius: 8px; border-left: 4px solid var(--border-color, #2a2a55);
    background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
    font-size: 0.86rem; line-height: 1.55; color: var(--text-primary, #fff);
}
.th-top5-ic { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.th-top5.nguy {
    border-left-color: var(--accent-red, #ff5c78);
    background: rgba(255, 92, 120, 0.12);
    color: var(--accent-red, #ff5c78);
    font-weight: 600;
}
.th-top5.canhbao {
    border-left-color: var(--accent-yellow, #ffcc00);
    background: rgba(255, 204, 0, 0.1);
    color: var(--accent-yellow, #ffcc00);
    font-weight: 600;
}
.th-top5.thieu { border-left-color: var(--text-muted, #6666aa); color: var(--text-secondary, #9999bb); }
.th-top5.ok { border-left-color: var(--accent-green, #2ee68a); }

/* Sub-tab Vòng lệnh | Nhật ký — cùng dáng .ps-subtab, khác tên (xem đầu khối) */
.th-subtabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 18px 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.th-subtab {
    padding: 8px 20px; font-family: inherit; font-size: 0.9rem; cursor: pointer;
    border: 1px solid var(--border-color, #2a2a55); border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--bg-secondary, #0d0d24); color: var(--text-secondary, #9999bb);
    transition: all 0.2s ease;
}
.th-subtab.active {
    background: var(--bg-primary, #0a0a1a);
    color: var(--accent-blue, #4d9fff);
    border-color: var(--accent-blue, #4d9fff);
    font-weight: 600;
}
.th-subtab:hover:not(.active) {
    color: var(--text-primary, #e0e0ff);
    background: var(--bg-tertiary, #12122e);
}
.th-panel { display: none; }
.th-panel.active { display: block; }

.th-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

/* Badge "CHƯA ĐÓNG" — vị thế mở phải nhìn phát biết, vì %lãi của nó là lãi
   trên giấy: chưa trả phí bán, giá còn chạy. */
.th-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap;
}
.th-badge.mo {
    background: rgba(255, 204, 0, 0.14);
    color: var(--accent-yellow, #ffcc00);
    border: 1px solid rgba(255, 204, 0, 0.4);
}

/* Trạng thái lệnh trong nhật ký */
.th-st {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.th-st.khop { background: rgba(46, 230, 138, 0.15); color: var(--accent-green, #2ee68a); }
.th-st.cho { background: rgba(46, 170, 255, 0.15); color: var(--accent-blue, #2eaaff); }
.th-st.huy { background: rgba(120, 120, 150, 0.18); color: var(--text-muted, #6666aa); }
.th-st.chan { background: rgba(255, 92, 120, 0.2); color: var(--accent-red, #ff5c78); }
.th-st.khac { background: rgba(120, 120, 150, 0.15); color: var(--text-secondary, #9999bb); }

/* Dòng lệnh bị chặn/từ chối: nền hồng nhạt để lướt mắt là thấy, nhưng không
   đậm tới mức lấn át các dòng khớp — cả hai loại đều cần đọc được. */
.th-row-chan { background: rgba(255, 92, 120, 0.05); }

.th-side { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.3px; }
.th-side.mua { color: var(--accent-green, #2ee68a); }
.th-side.ban { color: var(--accent-red, #ff5c78); }

/* Chế độ 'live' — một dòng tiền thật lẫn giữa hàng trăm dòng mô phỏng mà
   không đánh dấu thì không ai nhận ra. */
.th-mode-that {
    color: var(--accent-red, #ff5c78) !important;
    font-weight: 700; letter-spacing: 0.3px;
}

.th-dim { color: var(--text-muted, #6666aa) !important; font-size: 0.72rem; }
.th-reason {
    color: var(--text-muted, #6666aa) !important;
    font-size: 0.72rem; text-align: left !important;
    white-space: normal; max-width: 260px; line-height: 1.4;
}

.th-more-wrap { display: flex; justify-content: center; padding: 12px 0 4px; }

@media (max-width: 768px) {
    .th-subtab { padding: 7px 14px; font-size: 0.82rem; }
    .th-date, .th-sym-inp { width: 120px; }
    .th-reason { max-width: 160px; }
}

/* ── Xu hướng đa khung thời gian (tab Phân tích CP) ────────────────────────
   Card này bám đúng bộ biến màu của .sa-pattern-card để không tạo thêm một
   ngôn ngữ màu thứ hai trong cùng một tab. Chỉ có ba màu mang nghĩa: xanh =
   nghiêng tăng, đỏ = nghiêng giảm, vàng = không rõ — dùng thống nhất cho cả
   điểm khung, thanh chỉ báo lẫn dấu chấm bằng chứng. */
.sa-mtf-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-mtf-card:empty { display: none; }
.sa-mtf-card .card-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-mtf-card .card-header h4 { margin: 0; font-size: 0.9rem; color: var(--text-primary, #fff); }

.mtf-top { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: stretch; }
.mtf-verdict {
    border: 1px solid var(--border-color, #2a2a55);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-secondary, #14142b);
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.mtf-bias { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.5px; }
.mtf-composite { font-size: 0.85rem; color: var(--text-secondary, #9999bb); }
.mtf-composite b { font-size: 1.05rem; }
.mtf-composite span { color: var(--text-muted, #6b6b8a); font-size: 0.75rem; }
.mtf-conf { font-size: 0.75rem; color: var(--text-secondary, #9999bb); }
.mtf-conflict { font-size: 0.72rem; color: var(--accent-yellow, #ffcc00); margin-top: 2px; }

.mtf-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mtf-frame {
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-secondary, #14142b);
}
.mtf-frame-empty { opacity: 0.55; }
.mtf-frame-head { display: flex; justify-content: space-between; align-items: baseline; }
.mtf-frame-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary, #fff); }
.mtf-frame-score { font-size: 1rem; font-weight: 800; }
.mtf-frame-bias { font-size: 0.7rem; color: var(--text-muted, #6b6b8a); margin-bottom: 8px; }
.mtf-frame-na { font-size: 0.72rem; color: var(--text-muted, #6b6b8a); padding: 10px 0; }
.mtf-frame-foot {
    font-size: 0.66rem; color: var(--text-muted, #6b6b8a);
    margin-top: 8px; padding-top: 6px;
    border-top: 1px dashed var(--border-color, #2a2a55);
    display: flex; justify-content: space-between; gap: 6px;
}
.mtf-warn { color: var(--accent-yellow, #ffcc00); }

.mtf-part { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 6px; margin: 3px 0; }
.mtf-part-name { font-size: 0.68rem; color: var(--text-secondary, #9999bb); }
.mtf-part-val { font-size: 0.68rem; text-align: right; font-variant-numeric: tabular-nums; }
.mtf-bar {
    position: relative; height: 6px; border-radius: 3px;
    background: var(--bg-tertiary, #0f0f22);
    overflow: hidden;
}
/* Vạch 0 ở chính giữa: không có nó thì thanh lệch trái trông như "ít" chứ
   không như "âm", và đó là hai chuyện khác nhau. */
.mtf-bar::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; background: var(--border-color, #2a2a55);
}
.mtf-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }

.mtf-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.mtf-sub-title {
    font-size: 0.78rem; font-weight: 700; color: var(--text-primary, #fff);
    margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mtf-ev-list { list-style: none; margin: 0; padding: 0; }
.mtf-ev-list li {
    display: grid; grid-template-columns: 46px 1fr auto;
    align-items: center; gap: 8px;
    font-size: 0.74rem; padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mtf-ev-tf { color: var(--text-muted, #6b6b8a); }
.mtf-ev-text { color: var(--text-secondary, #9999bb); }
.mtf-ev-dir { font-size: 0.7rem; white-space: nowrap; font-weight: 600; }

.mtf-level-row {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 0.74rem; padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mtf-level-row span { color: var(--text-secondary, #9999bb); }
.mtf-level-row b { color: var(--text-primary, #fff); font-variant-numeric: tabular-nums; }

.mtf-calib { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color, #2a2a55); }
.mtf-scope-btns { display: inline-flex; gap: 6px; margin-left: auto; }
.mtf-scope-btn {
    background: var(--bg-tertiary, #0f0f22);
    border: 1px solid var(--border-color, #2a2a55);
    color: var(--text-secondary, #9999bb);
    border-radius: 6px; padding: 3px 10px;
    font-size: 0.7rem; cursor: pointer;
}
.mtf-scope-btn:hover { color: var(--text-primary, #fff); }
.mtf-scope-btn.active {
    background: var(--accent-primary, #4a7cff);
    border-color: var(--accent-primary, #4a7cff);
    color: #fff;
}
.mtf-verdict-line { font-size: 0.78rem; color: var(--text-secondary, #9999bb); margin-bottom: 8px; }
.mtf-verdict-line.ok b { color: var(--accent-green, #2ee68a); }
.mtf-verdict-line.warn b { color: var(--accent-yellow, #ffcc00); }
.mtf-verdict-line.bad b { color: var(--accent-red, #ff5c78); }
.mtf-note-inline { color: var(--text-muted, #6b6b8a); margin-left: 8px; font-size: 0.72rem; }

.mtf-table-wrap { overflow-x: auto; }
.mtf-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.mtf-table th, .mtf-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; }
.mtf-table th { color: var(--text-muted, #6b6b8a); font-weight: 600; text-align: left; }
.mtf-table td { color: var(--text-secondary, #9999bb); }
.mtf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mtf-table tr.sig td { font-weight: 700; color: var(--text-primary, #fff); }

.mtf-note { font-size: 0.7rem; color: var(--text-secondary, #9999bb); margin-top: 6px; line-height: 1.5; }
.mtf-note-dim { color: var(--text-muted, #6b6b8a); }

/* ── Card "Ngắn Hạn Trong Ngày" (6 khung 5m→4h) ──────────────────────────────
   Dùng lại toàn bộ khung xương .mtf-* của card đa khung phía trên: hai card
   chấm điểm bằng cùng một thước, nên chúng phải trông như một hệ thống. Chỉ
   thêm những gì khung trong ngày có mà khung ngày/tuần/tháng không có: sáu ô
   thay vì ba, nhãn nến cụt, và bảng hiệu chuẩn nhiều cột hơn. */
.sa-intraday-card {
    background: var(--bg-card, #1a1a35);
    border: 1px solid var(--border-color, #2a2a55);
    border-radius: 10px;
    padding: 16px;
    margin-top: var(--spacing-lg, 16px);
}
.sa-intraday-card:empty { display: none; }
.sa-intraday-card .card-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2a2a55);
}
.sa-intraday-card .card-header h4 { margin: 0; font-size: 0.9rem; color: var(--text-primary, #fff); }

/* Sáu khung, xếp từ khung lớn sang nhỏ (4h → 5m) vì đọc top-down: khung lớn cho
   bối cảnh, khung nhỏ cho thời điểm.

   Selector đôi .mtf-frames.intra-frames là CỐ Ý, không phải thừa: ở cuối file có
   sẵn @media (max-width: 900px) ép .mtf-frames về MỘT cột — hợp với ba khung
   ngày/tuần/tháng, nhưng với sáu khung thì thành một cột dài sáu ô phải cuộn mới
   thấy hết, tức là mất luôn cái nhìn "các khung có đồng pha không". Hai class
   thắng một class bất kể thứ tự trong file, nên rule này không vỡ nếu ai đó dời
   khối media query đi chỗ khác. */
.mtf-frames.intra-frames { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1100px) {
    .mtf-frames.intra-frames { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 900px) {
    /* Hai cột × ba hàng: vẫn so sánh được các khung cạnh nhau trên điện thoại. */
    .mtf-frames.intra-frames { grid-template-columns: repeat(2, 1fr); }
}

/* Trọng số của khung trong phép hợp nhất — in nhỏ cạnh tên khung để con số
   "điểm hợp nhất" không trông như trung bình cộng. */
.mtf-frame-w {
    margin-left: 5px;
    font-size: 0.62rem;
    color: var(--text-muted, #6b6b8a);
    font-weight: 400;
}

/* Khung chưa đủ nến: làm mờ hẳn thay vì hiện điểm số. Một khung chấm trên MA
   rỗng vẫn cho ra một con số, và con số đó tệ hơn ô trống. */
.mtf-frame-off { opacity: 0.55; }
.mtf-frame-na { font-size: 0.74rem; color: var(--text-muted, #6b6b8a); margin: 4px 0; }

/* Nến cụt: 30 phút thay vì 60. Đây là tính chất của phiên HOSE (240 phút khớp
   lệnh không chia hết cho 60), không phải dữ liệu thiếu — nên nhãn màu vàng
   "lưu ý", không phải đỏ "lỗi". */
.intra-partial,
.intra-caveat {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.62rem;
    background: rgba(255, 204, 0, 0.12);
    color: var(--accent-yellow, #ffcc00);
    cursor: help;
}
.intra-caveat { margin-top: 4px; margin-left: 0; }

/* Badge phán quyết hiệu chuẩn. Bốn trạng thái, và "không đủ bằng chứng" phải
   trông TRUNG TÍNH chứ không như một lỗi: phần lớn thời gian nó là câu trả lời
   đúng, và một badge đỏ sẽ khiến người đọc tưởng hệ thống đang hỏng. */
.mtf-v-good, .mtf-v-weak, .mtf-v-bad, .mtf-v-none {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 8px;
}
.mtf-v-good { background: rgba(46, 230, 138, 0.15); color: var(--accent-green, #2ee68a); }
.mtf-v-weak { background: rgba(255, 204, 0, 0.15); color: var(--accent-yellow, #ffcc00); }
.mtf-v-bad  { background: rgba(255, 92, 120, 0.15); color: var(--accent-red, #ff5c78); }
.mtf-v-none { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary, #9999bb); }

/* Nhóm điểm có ý nghĩa thống kê (khoảng tin cậy không chồng lên nền) — đây là
   dòng duy nhất trong bảng đáng để mắt dừng lại, nên nó được in đậm. */
.mtf-table tr.mtf-row-sig td {
    font-weight: 700;
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.03);
}
.mtf-table .mtf-ci,
.mtf-table .mtf-edge-pos,
.mtf-table .mtf-edge-neg { text-align: right; font-variant-numeric: tabular-nums; }
.mtf-table .mtf-ci { color: var(--text-muted, #6b6b8a); }
.mtf-table .mtf-edge-pos { color: var(--accent-green, #2ee68a); }
.mtf-table .mtf-edge-neg { color: var(--accent-red, #ff5c78); }

.mtf-oos {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-secondary, #9999bb);
}

/* Hiệu chuẩn từng khung: khi điểm hợp nhất không có edge, người đọc cần thấy
   khung nào kéo nó đi đâu. */
.intra-perframe {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.74rem;
    color: var(--text-secondary, #9999bb);
    line-height: 1.65;
}
.intra-perframe b { color: var(--text-primary, #fff); font-weight: 600; }

/* Ba sự thật về khung trong ngày ở thị trường Việt Nam: thu gọn mặc định vì
   người dùng quen rồi sẽ không cần đọc lại, nhưng KHÔNG được bỏ — chúng là lý
   do các con số ở trên phải đọc theo cách khác với TradingView Mỹ. */
.intra-notes {
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--text-secondary, #9999bb);
}
.intra-notes summary {
    cursor: pointer;
    color: var(--text-muted, #6b6b8a);
    padding: 4px 0;
}
.intra-notes ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.intra-notes li { margin-bottom: 6px; }
.mtf-foot {
    margin-top: 12px; padding-top: 8px;
    border-top: 1px dashed var(--border-color, #2a2a55);
    font-size: 0.68rem; color: var(--text-muted, #6b6b8a);
}

@media (max-width: 900px) {
    .mtf-top { grid-template-columns: 1fr; }
    .mtf-frames { grid-template-columns: 1fr; }
    .mtf-mid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BẢN ĐỒ NHIỆT THỊ TRƯỜNG (market-map.js)
   Ô treemap định vị tuyệt đối trong .mm-canvas — mọi toạ độ do JS tính theo
   chiều rộng THẬT của panel, nên panel phải đang hiện lúc render.
   ═══════════════════════════════════════════════════════════════════════════ */
.mm-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mm-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}

.mm-legend-scale {
    display: inline-flex;
    border-radius: 3px;
    overflow: hidden;
}

.mm-legend-scale i {
    width: 26px;
    height: 12px;
    display: inline-block;
}

.mm-legend-text.mm-muted,
.mm-stat.mm-muted {
    color: var(--text-muted);
}

.mm-canvas {
    position: relative;
    width: 100%;
    min-height: 460px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.mm-sector {
    position: absolute;
    overflow: hidden;
    border: 1px solid var(--bg-primary);
}

.mm-sector-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-tile {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    line-height: 1.15;
    transition: outline-color .1s ease;
    outline: 1px solid transparent;
}

.mm-tile:hover {
    outline-color: #fff;
    z-index: 2;
}

.mm-sym {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
}

.mm-pct {
    font-size: 10px;
    opacity: .92;
}

.mm-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}

.mm-stat.mm-up { color: var(--accent-green); }
.mm-stat.mm-down { color: var(--accent-red); }
.mm-stat.mm-flat { color: var(--text-muted); }

@media (max-width: 900px) {
    .mm-canvas { min-height: 360px; }
    .mm-sym { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB VĨ MÔ (macro.js) — bảng lãi suất + OMO + tỷ giá, số tất định từ engine
   ═══════════════════════════════════════════════════════════════════════════ */
.mc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.mc-title {
    font-size: 18px;
    margin: 0 0 2px;
}

.mc-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.mc-card { margin-bottom: 14px; }
.mc-body { padding: 14px; }
.mc-sub { font-size: 12px; color: var(--text-muted); }

.mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mc-table-wrap { overflow-x: auto; }

/* Khung hẹp thì CUỘN NGANG, không bóp cột — tên đường lãi suất vỡ thành 4 dòng
   làm bảng không đọc được. */
.mc-rates { min-width: 720px; }
.mc-votes { min-width: 560px; }
.mc-rates th, .mc-votes th { white-space: nowrap; }
.mc-r { text-align: right; }

.mc-muc {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.mc-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 3px;
}

.mc-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
}

.mc-tag-vn { background: rgba(0, 170, 255, .16); color: #4cc2ff; }
.mc-tag-us { background: rgba(160, 160, 170, .16); color: var(--text-muted); }

.mc-why {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 2px;
}

.mc-good { color: var(--accent-green); }
.mc-bad { color: var(--accent-red); }
.mc-warn { color: #e6a23c; }
.mc-flat { color: var(--text-muted); }
.mc-thieu { font-size: 11px; font-style: italic; }

.mc-note {
    font-size: 12px;
    color: var(--text-muted);
    margin: 10px 0 0;
}

.mc-verdict {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-secondary);
    border-left: 3px solid currentColor;
}

.mc-verdict-why, .mc-verdict-n {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    margin-top: 6px;
    font-weight: 400;
}

.mc-verdict-n { color: var(--text-muted); }

.mc-warn-box {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: rgba(230, 162, 60, .12);
    color: #e6a23c;
    font-size: 12px;
}

.mc-missing {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: rgba(160, 160, 170, .1);
    color: var(--text-secondary);
    font-size: 12px;
}

.mc-missing ul { margin: 6px 0 0 16px; }
.mc-missing li { margin: 2px 0; }

.mc-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 13px;
}

.mc-kv:last-child { border-bottom: none; }
.mc-kv span { color: var(--text-secondary); }

.mc-line {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mc-fx { margin-bottom: 14px; }
.mc-fx:last-child { margin-bottom: 0; }

.mc-fx-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.mc-fx-val {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.mc-state {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mc-state-badge {
    padding: 4px 12px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    font-weight: 700;
}

.mc-state-score { color: var(--text-muted); font-size: 13px; }
.mc-toggle { margin-top: 12px; }

.mc-source {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 4px 0 0;
}

.mc-warn-text { color: var(--text-secondary); }

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

/* Dải "đang xem bản cũ": server trả cache ngay thay vì bắt chờ engine 90s, nên
   phải thấy được ngay từ đầu trang là số này của lúc nào. */
.mc-stale {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: rgba(230, 162, 60, .12);
    border-left: 3px solid #e6a23c;
    color: #e6a23c;
    font-size: 12px;
}

.mc-missing #mc-retry { margin-top: 8px; }

@media (max-width: 900px) {
    .mc-grid { grid-template-columns: 1fr; }
}

/* ── Khối FOMC trong tab Vĩ mô ────────────────────────────────────────────── */
.mc-fomc { min-width: 900px; }
.mc-fomc-stat { min-width: 680px; }

/* Số của bảng FOMC phải thẳng cột để mắt so sánh được theo chiều dọc —
   font mặc định cho chữ số bề ngang khác nhau, 1.718,98 và 572,55 sẽ lệch. */
.mc-fomc td.mc-r,
.mc-fomc-stat td.mc-r,
.mc-rates td.mc-r {
    font-variant-numeric: tabular-nums;
}

.mc-fomc-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.mc-fomc-up { background: rgba(255, 92, 120, .16); color: var(--accent-red); }
.mc-fomc-down { background: rgba(46, 230, 138, .16); color: var(--accent-green); }
.mc-fomc-sos { background: rgba(230, 162, 60, .18); color: #e6a23c; }

.mc-star {
    color: var(--accent-yellow);
    cursor: help;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   Bộ lọc nhanh (scr-) — tab Lọc CP, js/stock-screener.js
   Sub-tab dùng tên riêng .scr-subtab chứ KHÔNG dùng lại .ps-subtab: app.js
   gắn handler cho mọi .ps-subtab trên trang.
   ══════════════════════════════════════════════════════════════════════ */
.scr-subtabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.scr-subtab {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: none;
    transition: all 0.2s ease;
}
.scr-subtab.active {
    background: var(--bg-primary);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    font-weight: 600;
}
.scr-subtab:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.scr-panel { display: none; }
.scr-panel.active { display: block; }

.scr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.scr-card {
    margin: 0;
    min-width: 0;
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.scr-card legend {
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.scr-card-wide { grid-column: span 2; }
.scr-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.scr-field label { cursor: pointer; }
.scr-field input[type="number"] {
    width: 90px;
    padding: 6px 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.scr-field input[type="checkbox"],
.scr-field input[type="radio"] { accent-color: var(--accent-blue); }
.scr-label-text { min-width: 40px; color: var(--text-muted); }
.scr-suffix { color: var(--text-muted); font-size: 0.8rem; }
.scr-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-label);
    color: var(--text-muted);
}
.scr-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--spacing-md);
}
.scr-status {
    min-height: 1.2em;
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.scr-status.error { color: var(--accent-red); }
.scr-meta {
    margin-bottom: var(--spacing-sm);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.scr-meta b { color: var(--text-primary); }
.scr-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    background: var(--accent-green-bg);
    color: var(--accent-green);
}
.scr-badge.muted { background: transparent; color: var(--text-muted); font-weight: var(--font-weight-regular); }
.scr-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    max-height: 640px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.scr-table-wrap .data-table { white-space: nowrap; font-size: 0.82rem; }
.scr-table-wrap .data-table th,
.scr-table-wrap .data-table td { text-align: right; }
.scr-table-wrap .data-table th:first-child,
.scr-table-wrap .data-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 1;
}
.scr-table-wrap .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.scr-table-wrap .data-table thead th:first-child { z-index: 3; background: var(--bg-primary); }
.scr-th-sort { cursor: pointer; user-select: none; }
.scr-th-sort:hover,
.scr-th-sort.active { color: var(--accent-blue); }
.scr-sym { font-weight: var(--font-weight-bold); color: var(--accent-blue); cursor: pointer; }
.scr-sub { color: var(--text-muted); font-size: 0.72rem; }
.scr-empty { padding: 32px; text-align: center; color: var(--text-muted); }

@media (max-width: 768px) {
    .scr-grid { grid-template-columns: 1fr; }
    .scr-card-wide { grid-column: auto; }
    .scr-actions { flex-direction: column; align-items: stretch; }
    .scr-actions .run-filter-btn,
    .scr-actions .action-btn { width: 100%; }
    .scr-table-wrap .data-table { font-size: 0.72rem; }
    .scr-table-wrap .data-table th,
    .scr-table-wrap .data-table td { padding: var(--spacing-xs) var(--spacing-sm); }
}

/* Nút / tab chỉ admin dùng được (API phía server đã chặn bằng requireAdmin).
   Ẩn với mọi người cho tới khi app.js xác nhận tài khoản admin và gắn body.is-staff
   — user thường không còn thấy Paper, Lịch sử, Cấu hình AI, Tải lịch sử MA rồi bấm vào ra lỗi 403. */
body:not(.is-staff) .staff-only {
    display: none !important;
}