/* =============================================================
   IERM FINANCIAL TERMINAL - VCBS THEME STYLESHEET
   Dark Mode (Image 1) & Light Mode (Image 2) Synchronized
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
    --font-sans: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Roboto', monospace;

    /* VCBS Light Mode Palette (Hình 2) */
    --vcbs-bg: #f1f3f5;
    --vcbs-card: #ffffff;
    --vcbs-header: #ffffff;
    --vcbs-table-head: #f8fafc;
    --vcbs-border: #e2e8f0;
    --vcbs-border-subtle: #cbd5e1;
    --vcbs-text-main: #0f172a;
    --vcbs-text-sub: #334155;
    --vcbs-text-muted: #64748b;

    /* VCBS Market Colors (Light Mode) */
    --vcbs-bull: #15803d;  /* Xanh lá đậm nét chuẩn VCBS Light */
    --vcbs-bear: #dc2626;  /* Đỏ tươi sắc nét VCBS Light */
    --vcbs-ref: #d97706;   /* Vàng hổ phách VCBS Light */
    --vcbs-ceil: #7e22ce;  /* Tím giá trần */
    --vcbs-floor: #0284c7; /* Xanh lơ giá sàn */
}

html.dark {
    /* VCBS Dark Mode Palette (Hình 1) */
    --vcbs-bg: #0c1017;
    --vcbs-card: #121824;
    --vcbs-header: #131922;
    --vcbs-table-head: #161e2e;
    --vcbs-border: #1f293d;
    --vcbs-border-subtle: #243047;
    --vcbs-text-main: #f1f5f9;
    --vcbs-text-sub: #cbd5e1;
    --vcbs-text-muted: #8a99ad;

    /* VCBS Market Colors (Dark Mode) */
    --vcbs-bull: #00c060;  /* Xanh lá neon sáng nét chuẩn VCBS Dark */
    --vcbs-bear: #ff3b57;  /* Đỏ hồng sắc nét chuẩn VCBS Dark */
    --vcbs-ref: #f59e0b;   /* Vàng tham chiếu VCBS Dark */
    --vcbs-ceil: #c084fc;  /* Tím giá trần */
    --vcbs-floor: #06b6d4; /* Xanh lơ giá sàn */
}

/* Base Typography */
body, button, input, select, textarea {
    font-family: var(--font-sans);
}

body, table, th, td, .font-mono, .tabular-nums {
    font-feature-settings: "tnum" 1, "zero" 1;
    font-variant-numeric: tabular-nums;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #243047;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Subtle animations */
@keyframes pulseSubtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
.animate-pulse-subtle {
    animation: pulseSubtle 3s ease-in-out infinite;
}

/* Matrix Table Styling */
#matrix-table-element th, #matrix-table-element td {
    padding: 10px 14px;
    vertical-align: top;
    line-height: 1.5;
}
#matrix-table-element tr:hover td {
    background-color: rgba(18, 24, 36, 0.7);
}
#matrix-table-element td:first-child, #matrix-table-element th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #0c1017;
    border-right: 1px solid #1f293d;
    min-width: 190px;
    max-width: 220px;
}
#matrix-table-element td:last-child, #matrix-table-element th:last-child {
    background-color: rgba(18, 24, 36, 0.95);
    border-left: 1px solid #1f293d;
    min-width: 200px;
}

/* =============================================================
   BCTC FINANCIAL STATEMENTS TABLE STYLING
   Solid sticky headers and columns (Fix overlapping text & opacity bug)
   ============================================================= */
#bctc-table-element {
    border-collapse: separate;
    border-spacing: 0;
}
#bctc-table-element th, #bctc-table-element td {
    padding: 8px 12px;
    vertical-align: middle;
}
/* Sticky Left Column */
#bctc-table-element th:first-child,
#bctc-table-element td:first-child,
#bctc-table-element .bctc-sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
    min-width: 280px !important;
    width: 320px !important;
    max-width: 380px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
    background-color: #0c1017 !important;
    border-right: 2px solid #1f293d !important;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.45);
}
/* Sticky Header */
#bctc-table-element thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background-color: #121824 !important;
    border-bottom: 2px solid #0284c7 !important;
}
/* Top-Left Corner Header (Sticky Top & Left) */
#bctc-table-element thead th:first-child {
    z-index: 40 !important;
    background-color: #0c1017 !important;
    border-right: 2px solid #1f293d !important;
}
#bctc-table-element tr:hover td {
    background-color: #161e2e !important;
}
#bctc-table-element tr:hover td:first-child {
    background-color: #121824 !important;
}

/* Recommendation Badge Colors */
.rec-buy {
    background-color: rgba(0, 192, 96, 0.15);
    color: #00c060;
    border: 1px solid rgba(0, 192, 96, 0.35);
}
.rec-outperform {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.rec-hold {
    background-color: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.rec-sell {
    background-color: rgba(255, 59, 87, 0.15);
    color: #ff3b57;
    border: 1px solid rgba(255, 59, 87, 0.35);
}

/* Card terminal */
.card-terminal {
    background: linear-gradient(180deg, rgba(18, 24, 36, 0.95) 0%, rgba(12, 16, 23, 0.98) 100%);
}

/* ------------------------------------------------------------- */
/* DARK MODE VCBS PALETTE OVERRIDES (Image 1)                   */
/* ------------------------------------------------------------- */
html.dark body {
    background-color: #0c1017 !important;
    color: #f1f5f9 !important;
}
html.dark header {
    background-color: #121824 !important;
    border-color: #1f293d !important;
}
html.dark .bg-slate-900,
html.dark .bg-slate-950,
html.dark .bg-slate-950\/60,
html.dark .bg-slate-950\/70,
html.dark .bg-slate-950\/90 {
    background-color: #121824 !important;
    border-color: #1f293d !important;
}
html.dark .border-slate-800,
html.dark .border-slate-800\/80,
html.dark .border-slate-700 {
    border-color: #1f293d !important;
}
html.dark .text-emerald-400,
html.dark .text-emerald-300,
html.dark .text-green-400 {
    color: #00c060 !important;
}
html.dark .text-rose-400,
html.dark .text-rose-300,
html.dark .text-rose-500,
html.dark .text-red-400 {
    color: #ff3b57 !important;
}
html.dark .text-amber-400,
html.dark .text-amber-300,
html.dark .text-yellow-400 {
    color: #f59e0b !important;
}

/* ------------------------------------------------------------- */
/* LIGHT MODE VCBS PALETTE OVERRIDES (Image 2)                  */
/* ------------------------------------------------------------- */
html:not(.dark) body {
    background-color: #f1f3f5 !important;
    color: #0f172a !important;
}

html:not(.dark) header {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Base Dark Element Neutralization for Light Mode */
html:not(.dark) .bg-black,
html:not(.dark) .bg-black\/90,
html:not(.dark) .bg-black\/80,
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/95,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/85,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/70,
html:not(.dark) .bg-slate-950\/60,
html:not(.dark) .bg-slate-950\/50,
html:not(.dark) .bg-slate-950\/40,
html:not(.dark) .bg-slate-950\/30,
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/70,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/40,
html:not(.dark) .bg-slate-900\/30,
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/90,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/70,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/40,
html:not(.dark) .bg-slate-800\/30 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Gradients Neutralization */
html:not(.dark) .bg-gradient-to-r,
html:not(.dark) .bg-gradient-to-br,
html:not(.dark) .bg-gradient-to-l,
html:not(.dark) .bg-gradient-to-t,
html:not(.dark) .bg-gradient-to-b {
    background-image: none !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Preserve Primary Action Gradients */
html:not(.dark) button.bg-gradient-to-r,
html:not(.dark) a.bg-gradient-to-r,
html:not(.dark) #stat-progress-bar {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

html:not(.dark) .card-terminal {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---- Borders & Dividers ---- */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/90,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-800\/40,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-700\/50,
html:not(.dark) .border-slate-700\/60 {
    border-color: #e2e8f0 !important;
}
html:not(.dark) .divide-slate-800 > * + *,
html:not(.dark) .divide-slate-800\/90 > * + *,
html:not(.dark) .divide-slate-800\/80 > * + *,
html:not(.dark) .divide-slate-800\/60 > * + *,
html:not(.dark) .divide-slate-800\/40 > * + *,
html:not(.dark) .divide-slate-700 > * + * {
    border-color: #e2e8f0 !important;
}

/* ---- High-Contrast Text Colors ---- */
html:not(.dark) .text-white {
    color: #0f172a !important;
}
html:not(.dark) .text-slate-100 {
    color: #0f172a !important;
}
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
    color: #1e293b !important;
}
html:not(.dark) .text-slate-400 {
    color: #475569 !important;
}
html:not(.dark) .text-slate-500 {
    color: #64748b !important;
}

/* ---- Market Colors (VCBS Standard Light Palette) ---- */
html:not(.dark) .text-emerald-400,
html:not(.dark) .text-emerald-300,
html:not(.dark) .text-emerald-500,
html:not(.dark) .text-green-400,
html:not(.dark) .text-green-500 {
    color: #15803d !important; /* Rich VCBS Green */
}
html:not(.dark) .text-rose-400,
html:not(.dark) .text-rose-300,
html:not(.dark) .text-rose-500,
html:not(.dark) .text-red-400,
html:not(.dark) .text-red-500 {
    color: #dc2626 !important; /* Sharp VCBS Red */
}
html:not(.dark) .text-amber-400,
html:not(.dark) .text-amber-300,
html:not(.dark) .text-yellow-400 {
    color: #b45309 !important; /* Deep VCBS Amber */
}
html:not(.dark) .text-cyan-400,
html:not(.dark) .text-sky-400 {
    color: #0284c7 !important; /* Crisp Sky/Cyan */
}
html:not(.dark) .text-cyan-300,
html:not(.dark) .text-cyan-200 {
    color: #0369a1 !important;
}
html:not(.dark) .text-purple-400,
html:not(.dark) .text-purple-300 {
    color: #7e22ce !important; /* Ceiling Purple */
}
html:not(.dark) .text-indigo-400,
html:not(.dark) .text-indigo-300 {
    color: #4338ca !important;
}

/* ---- Top Ticker Tape ---- */
html:not(.dark) #live-ticker-tape {
    color: #334155 !important;
}

/* ---- Quick Chip Buttons (Top Navigation) ---- */
html:not(.dark) .chip-btn {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
html:not(.dark) .chip-btn:hover {
    border-color: #0284c7 !important;
    color: #0f172a !important;
    background-color: #f0f9ff !important;
}
html:not(.dark) .chip-btn.active {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
}

/* ---- Action Buttons (Export, Copy, Print, etc.) ---- */
html:not(.dark) .bg-slate-800:not(button.bg-gradient-to-r),
html:not(.dark) .hover\:bg-slate-700:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* ---- Search Input & Controls ---- */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html:not(.dark) input::placeholder {
    color: #94a3b8 !important;
}

/* ---- 6 Master Tabs Navigation ---- */
html:not(.dark) .tab-btn {
    color: #475569 !important;
    background-color: #ffffff !important;
    border-color: transparent !important;
}
html:not(.dark) .tab-btn:hover {
    color: #0f172a !important;
    background-color: #f8fafc !important;
}
html:not(.dark) .tab-btn.active {
    color: #0284c7 !important;
    border-bottom-color: #0284c7 !important;
    background-color: #ffffff !important;
}

/* ---- Tables (Matrix, Peers, BCTC, etc.) ---- */
html:not(.dark) table {
    background-color: #ffffff !important;
}
html:not(.dark) th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) td {
    border-color: #f1f5f9 !important;
    color: #1e293b !important;
}
html:not(.dark) tr:hover td {
    background-color: #f8fafc !important;
}

/* Matrix Table Sticky Columns */
html:not(.dark) #matrix-table-element td:first-child,
html:not(.dark) #matrix-table-element th:first-child {
    background-color: #ffffff !important;
    border-right-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html:not(.dark) #matrix-table-element td:last-child,
html:not(.dark) #matrix-table-element th:last-child {
    background-color: #f8fafc !important;
    border-left-color: #e2e8f0 !important;
}
html:not(.dark) #matrix-table-element tr:hover td {
    background-color: #f1f5f9 !important;
}

/* Peer Comparison Table */
html:not(.dark) #peer-table-head th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html:not(.dark) #peer-table-body td {
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html:not(.dark) #peer-table-body td:first-child {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-right-color: #e2e8f0 !important;
}
html:not(.dark) #peer-table-body tr.group:hover td {
    background-color: #f8fafc !important;
}
html:not(.dark) #peer-table-body tr.group.bg-cyan-950\/40 td {
    background-color: #f0f9ff !important;
}
html:not(.dark) #peer-table-body tr.group.bg-cyan-950\/40 td:first-child {
    background-color: #e0f2fe !important;
}

/* BCTC Table in Light Mode (100% Solid Non-Transparent Sticky Columns) */
html:not(.dark) #bctc-table-element {
    background-color: #ffffff !important;
}
html:not(.dark) #bctc-table-element th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) #bctc-table-element td {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #f1f5f9 !important;
}
html:not(.dark) #bctc-table-element th:first-child,
html:not(.dark) #bctc-table-element td:first-child,
html:not(.dark) #bctc-table-element .bctc-sticky-col {
    min-width: 280px !important;
    width: 320px !important;
    max-width: 380px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-right: 2px solid #e2e8f0 !important;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.06) !important;
}
html:not(.dark) #bctc-table-element thead th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-bottom: 2px solid #0284c7 !important;
}
html:not(.dark) #bctc-table-element thead th:first-child {
    background-color: #f8fafc !important;
    color: #0284c7 !important;
    border-right: 2px solid #e2e8f0 !important;
}
html:not(.dark) #bctc-table-element tr:hover td {
    background-color: #f8fafc !important;
}
html:not(.dark) #bctc-table-element tr:hover td:first-child,
html:not(.dark) #bctc-table-element tr:hover .bctc-sticky-col {
    background-color: #f1f5f9 !important;
}

/* BCTC Table Scrollbar */
html:not(.dark) #bctc-table-container {
    scrollbar-color: #94a3b8 #f1f5f9;
}
html:not(.dark) #bctc-table-container::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}
html:not(.dark) #bctc-table-container::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-color: #f1f5f9 !important;
}
html:not(.dark) #bctc-table-container::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}
html:not(.dark) #bctc-table-container::-webkit-scrollbar-corner {
    background: #f1f5f9 !important;
}

/* ---- Badge Pill Styles in Light Mode ---- */
html:not(.dark) .bg-emerald-950,
html:not(.dark) .bg-emerald-950\/90,
html:not(.dark) .bg-emerald-950\/80,
html:not(.dark) .bg-emerald-950\/70,
html:not(.dark) .bg-emerald-950\/40 {
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
    color: #15803d !important;
}
html:not(.dark) .bg-rose-950,
html:not(.dark) .bg-rose-950\/90,
html:not(.dark) .bg-rose-950\/80,
html:not(.dark) .bg-rose-950\/70,
html:not(.dark) .bg-rose-950\/40 {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}
html:not(.dark) .bg-amber-950,
html:not(.dark) .bg-amber-950\/90,
html:not(.dark) .bg-amber-950\/80,
html:not(.dark) .bg-amber-950\/70,
html:not(.dark) .bg-amber-950\/40 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}
html:not(.dark) .bg-cyan-950,
html:not(.dark) .bg-cyan-950\/90,
html:not(.dark) .bg-cyan-950\/80,
html:not(.dark) .bg-cyan-950\/70,
html:not(.dark) .bg-cyan-950\/60,
html:not(.dark) .bg-cyan-950\/40,
html:not(.dark) .bg-cyan-950\/30,
html:not(.dark) .bg-sky-950,
html:not(.dark) .bg-sky-950\/90,
html:not(.dark) .bg-sky-950\/80,
html:not(.dark) .bg-sky-950\/70,
html:not(.dark) .bg-sky-950\/60,
html:not(.dark) .bg-sky-950\/40 {
    background-color: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
}
html:not(.dark) .bg-purple-950,
html:not(.dark) .bg-purple-950\/90,
html:not(.dark) .bg-purple-950\/80,
html:not(.dark) .bg-purple-950\/70,
html:not(.dark) .bg-purple-950\/40 {
    background-color: #f3e8ff !important;
    border-color: #d8b4fe !important;
    color: #7e22ce !important;
}
html:not(.dark) .bg-indigo-950,
html:not(.dark) .bg-indigo-950\/90,
html:not(.dark) .bg-indigo-950\/80,
html:not(.dark) .bg-indigo-950\/70,
html:not(.dark) .bg-blue-950,
html:not(.dark) .bg-blue-950\/90,
html:not(.dark) .bg-blue-950\/80,
html:not(.dark) .bg-blue-950\/70 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
}

/* Badge Border Colors */
html:not(.dark) .border-emerald-800,
html:not(.dark) .border-emerald-800\/80,
html:not(.dark) .border-emerald-800\/60,
html:not(.dark) .border-emerald-700 {
    border-color: #86efac !important;
}
html:not(.dark) .border-rose-800,
html:not(.dark) .border-rose-800\/80,
html:not(.dark) .border-rose-800\/60,
html:not(.dark) .border-rose-700 {
    border-color: #fca5a5 !important;
}
html:not(.dark) .border-amber-800,
html:not(.dark) .border-amber-800\/60,
html:not(.dark) .border-amber-700 {
    border-color: #fde68a !important;
}
html:not(.dark) .border-cyan-800,
html:not(.dark) .border-cyan-800\/80,
html:not(.dark) .border-cyan-800\/60,
html:not(.dark) .border-cyan-700,
html:not(.dark) .border-cyan-700\/80,
html:not(.dark) .border-cyan-700\/90 {
    border-color: #7dd3fc !important;
}
html:not(.dark) .border-indigo-800,
html:not(.dark) .border-indigo-800\/60,
html:not(.dark) .border-indigo-700 {
    border-color: #c7d2fe !important;
}
html:not(.dark) .border-sky-800,
html:not(.dark) .border-sky-800\/60,
html:not(.dark) .border-sky-700 {
    border-color: #7dd3fc !important;
}
html:not(.dark) .border-purple-800,
html:not(.dark) .border-purple-800\/60,
html:not(.dark) .border-purple-700 {
    border-color: #d8b4fe !important;
}

/* ---- Recommendation Badges ---- */
html:not(.dark) .rec-buy {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border-color: #86efac !important;
}
html:not(.dark) .rec-sell {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
html:not(.dark) .rec-hold {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}
html:not(.dark) .rec-outperform {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    border-color: #bae6fd !important;
}

/* ---- Modals & Dialogs ---- */
html:not(.dark) #ssi-export-modal > div > div,
html:not(.dark) #peer-export-modal > div > div,
html:not(.dark) #ingestion-modal > div > div,
html:not(.dark) #ssi-api-modal > div > div,
html:not(.dark) #markdown-modal > div > div,
html:not(.dark) #price-compare-modal > div > div,
html:not(.dark) #ctck-reports-modal > div > div {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}
html:not(.dark) label {
    color: #334155 !important;
}

/* ---- Footer ---- */
html:not(.dark) footer {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

/* Printing styles */
@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    header, footer, .preset-btn, #ingestion-modal, #markdown-modal, .tab-btn {
        display: none !important;
    }
    .tab-pane {
        display: block !important;
    }
    #matrix-table-element {
        min-width: 100% !important;
        color: #000000 !important;
    }
}

/* Custom Sleek Scrollbar for Cards and Panels (Dự án & Catalysts) */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #334155 rgba(15, 23, 42, 0.6);
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.8);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}

/* Custom High-Visibility Scrollbar for CTCK Modal */
.custom-scrollbar-cyan::-webkit-scrollbar {
    height: 14px;
}
.custom-scrollbar-cyan::-webkit-scrollbar-track {
    background: #0c1017;
    border: 1px solid #1f293d;
    border-radius: 8px;
}
.custom-scrollbar-cyan::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #0284c7, #06b6d4, #22d3ee);
    border-radius: 8px;
    border: 2px solid #0c1017;
    cursor: grab;
}
.custom-scrollbar-cyan::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #06b6d4, #22d3ee, #38bdf8);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}
.custom-scrollbar-cyan::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
}

/* Range input styling for table horizontal scroll */
.ctck-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #1f293d;
    height: 10px;
    border-radius: 6px;
    outline: none;
    border: 1px solid #334155;
    transition: all 0.2s ease;
}
.ctck-slider:hover {
    border-color: #06b6d4;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}
.ctck-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border: 2px solid #ffffff;
    cursor: grab;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
    transition: transform 0.1s ease, background 0.2s ease;
}
.ctck-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #22d3ee;
}
.ctck-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}
.ctck-slider::-moz-range-thumb {
    width: 28px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border: 2px solid #ffffff;
    cursor: grab;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
}

/* BCTC Table Scrollable & Dragging Styles */
#bctc-table-container {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: thin;
    scrollbar-color: #0284c7 #0c1017;
}

#bctc-table-container:active {
    cursor: grabbing;
}

#bctc-table-container::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

#bctc-table-container::-webkit-scrollbar-track {
    background: #0c1017;
    border-radius: 4px;
}

#bctc-table-container::-webkit-scrollbar-thumb {
    background: #0284c7;
    border-radius: 4px;
    border: 2px solid #0c1017;
}

#bctc-table-container::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}

#bctc-table-container::-webkit-scrollbar-corner {
    background: #0c1017;
}

/* =============================================================
   OVERVIEW TAB (TAB 1) ENHANCEMENTS & VCBS LIGHT / DARK ADAPTATIONS
   ============================================================= */
.overview-tf-btn {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.overview-tf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.overview-tf-btn.active {
    background: rgba(8, 145, 178, 0.15);
    border-color: #06b6d4 !important;
    color: #22d3ee !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}

/* Light mode overrides for Tab Overview */
html:not(.dark) #tab-overview .bg-slate-900\/90,
html:not(.dark) #tab-overview .bg-slate-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

html:not(.dark) #tab-overview .bg-slate-950\/85,
html:not(.dark) #tab-overview .bg-slate-950\/80,
html:not(.dark) #tab-overview .bg-slate-950\/70,
html:not(.dark) #tab-overview .bg-slate-950\/60,
html:not(.dark) #tab-overview .bg-slate-950 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) #tab-overview .overview-tf-btn {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
html:not(.dark) #tab-overview .overview-tf-btn.active {
    background-color: #e0f2fe !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
}

html:not(.dark) #tab-overview .text-slate-200,
html:not(.dark) #tab-overview .text-slate-300,
html:not(.dark) #tab-overview .text-white {
    color: #0f172a !important;
}

html:not(.dark) #tab-overview .text-slate-400 {
    color: #475569 !important;
}

html:not(.dark) #tab-overview .text-slate-500 {
    color: #64748b !important;
}

html:not(.dark) #tab-overview .border-slate-800,
html:not(.dark) #tab-overview .border-slate-800\/80,
html:not(.dark) #tab-overview .border-slate-800\/60,
html:not(.dark) #tab-overview .border-slate-800\/50 {
    border-color: #e2e8f0 !important;
}

html:not(.dark) #tab-overview .divide-slate-800\/60 > * + *,
html:not(.dark) #tab-overview .divide-slate-800\/50 > * + *,
html:not(.dark) #tab-overview .divide-slate-800 > * + * {
    border-color: #e2e8f0 !important;
}

html:not(.dark) #tab-overview table thead th {
    background-color: #f1f5f9;
    color: #334155 !important;
}
html:not(.dark) #tab-overview table tbody tr:hover td {
    background-color: #f8fafc;
}

/* Thẻ Dự Án Trọng Điểm & Danh Mục Thích Ứng (Tab Tổng quan) */
html:not(.dark) #overview-projects-container .bg-slate-950\/85,
html:not(.dark) #overview-projects-container > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) #overview-projects-container > div:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08) !important;
}
html:not(.dark) #overview-projects-container h4,
html:not(.dark) #overview-projects-container h4 span {
    color: #0369a1 !important;
}
html:not(.dark) #overview-projects-container .bg-slate-800 {
    background-color: #e2e8f0 !important;
}
html:not(.dark) #overview-projects-container .bg-slate-900\/90 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html:not(.dark) #overview-projects-container .bg-purple-950\/90 {
    background-color: #f3e8ff !important;
    border-color: #d8b4fe !important;
    color: #7e22ce !important;
}
html:not(.dark) #overview-projects-container .text-cyan-300 {
    color: #0284c7 !important;
}
html:not(.dark) #overview-projects-container .text-slate-400 {
    color: #64748b !important;
}
html:not(.dark) #overview-projects-container .text-slate-300 {
    color: #334155 !important;
}
html:not(.dark) #overview-projects-container .text-slate-200 {
    color: #0f172a !important;
}
html:not(.dark) #overview-projects-container .text-amber-300 {
    color: #b45309 !important;
}
html:not(.dark) #overview-projects-container .text-emerald-400 {
    color: #15803d !important;
}
html:not(.dark) #overview-projects-container .border-slate-800\/60,
html:not(.dark) #overview-projects-container .border-slate-800\/80,
html:not(.dark) #overview-projects-container .border-slate-800 {
    border-color: #e2e8f0 !important;
}

/* Banner Quét Dự Án Thông Minh */
html:not(.dark) #overview-projects-discovery-status {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}
html:not(.dark) #overview-projects-discovery-status strong {
    color: #14532d !important;
}

/* ========================================================================= */
/* Light Mode Overrides for Tab Technical (Đồ thị Kỹ thuật & FireAnt Studio) */
/* ========================================================================= */

/* 1. FireAnt Terminal Container & Main Panes */
html:not(.dark) #tab-technical .bg-\[\#0e1320\],
html:not(.dark) #tab-technical .bg-\[\#090d16\],
html:not(.dark) #tab-technical #pane-main-chart,
html:not(.dark) #tab-technical #tech-chart-stack-container,
html:not(.dark) #tab-technical #tech-tv-render-box,
html:not(.dark) .bg-\[\#0e1320\],
html:not(.dark) .bg-\[\#090d16\] {
    background-color: #ffffff !important;
}

/* 2. Top Header Controls & Bottom Range Bar & Left Drawing Toolbar */
html:not(.dark) #tab-technical .bg-\[\#131927\],
html:not(.dark) #tab-technical .bg-\[\#101625\],
html:not(.dark) .bg-\[\#131927\],
html:not(.dark) .bg-\[\#101625\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* 3. Sub-panes (Volume, MCDX, MACD, RSI) */
html:not(.dark) #tab-technical .bg-\[\#080b13\],
html:not(.dark) #tab-technical .bg-\[\#070a11\],
html:not(.dark) #tab-technical #pane-volume,
html:not(.dark) #tab-technical #pane-mcdx,
html:not(.dark) #tab-technical #pane-macd,
html:not(.dark) #tab-technical #pane-rsi,
html:not(.dark) .bg-\[\#080b13\],
html:not(.dark) .bg-\[\#070a11\] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* 4. Realtime Legend Header */
html:not(.dark) #tab-technical #tech-fireant-legend,
html:not(.dark) #tab-technical .bg-\[\#0d121e\],
html:not(.dark) .bg-\[\#0d121e\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical #tech-fireant-legend .text-slate-300,
html:not(.dark) #tab-technical #tech-fireant-legend .text-slate-400 {
    color: #475569 !important;
}
html:not(.dark) #tab-technical #tech-fireant-legend #legend-open,
html:not(.dark) #tab-technical #tech-fireant-legend #legend-close {
    color: #0f172a !important;
}
html:not(.dark) #tab-technical #tech-fireant-legend #legend-vol {
    color: #0284c7 !important;
}

/* 5. Inputs, Buttons & Dropdowns in Technical Header */
html:not(.dark) #tab-technical #tech-quick-ticker {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html:not(.dark) #tab-technical #tech-quick-ticker:focus {
    border-color: #0284c7 !important;
}

html:not(.dark) #tab-technical #tech-fireant-timeframe-group {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical #tech-fireant-timeframe-group button {
    color: #475569 !important;
}
html:not(.dark) #tab-technical #tech-fireant-timeframe-group button:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical #tech-fireant-timeframe-group button.bg-cyan-600 {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

html:not(.dark) #tab-technical #btn-candle-type,
html:not(.dark) #tab-technical #btn-indicators-menu,
html:not(.dark) #tab-technical #btn-ma-cross {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html:not(.dark) #tab-technical #btn-candle-type:hover,
html:not(.dark) #tab-technical #btn-indicators-menu:hover,
html:not(.dark) #tab-technical #btn-ma-cross:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

html:not(.dark) #tab-technical #dropdown-candle-type,
html:not(.dark) #tab-technical #dropdown-indicators-menu {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) #tab-technical #dropdown-candle-type button,
html:not(.dark) #tab-technical #dropdown-indicators-menu label {
    color: #334155 !important;
}
html:not(.dark) #tab-technical #dropdown-candle-type button:hover,
html:not(.dark) #tab-technical #dropdown-indicators-menu label:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* 6. Left Drawing Toolbar */
html:not(.dark) #tab-technical .w-10.bg-\[\#101625\] button {
    color: #475569 !important;
}
html:not(.dark) #tab-technical .w-10.bg-\[\#101625\] button:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical .w-10.bg-\[\#101625\] button.bg-cyan-600 {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}
html:not(.dark) #tab-technical .w-10.bg-\[\#101625\] .bg-slate-800 {
    background-color: #e2e8f0 !important;
}

/* 7. Sub-panes Title Badges & Labels */
html:not(.dark) #pane-volume .text-slate-300,
html:not(.dark) #pane-mcdx .text-slate-200,
html:not(.dark) #pane-macd .text-slate-300 {
    color: #0f172a !important;
}
html:not(.dark) #pane-volume .text-slate-400,
html:not(.dark) #pane-mcdx .text-slate-400,
html:not(.dark) #pane-macd .text-slate-400 {
    color: #475569 !important;
}

/* 8. Bottom Range Bar */
html:not(.dark) #tech-range-bar button {
    color: #475569 !important;
}
html:not(.dark) #tech-range-bar button:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}
html:not(.dark) #tech-range-bar button.bg-slate-800 {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}
html:not(.dark) #tab-technical .text-slate-400 {
    color: #475569 !important;
}

/* 9. Three Cards below Chart in Tab Technical */
html:not(.dark) #tab-technical .bg-slate-900\/90,
html:not(.dark) #tab-technical .bg-slate-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #tab-technical .bg-slate-950 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical .bg-slate-800 {
    background-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical .border-slate-800,
html:not(.dark) #tab-technical .border-slate-800\/90,
html:not(.dark) #tab-technical .border-slate-800\/80,
html:not(.dark) #tab-technical .border-slate-700\/80 {
    border-color: #e2e8f0 !important;
}
html:not(.dark) #tab-technical .text-slate-200,
html:not(.dark) #tab-technical .text-slate-300,
html:not(.dark) #tab-technical .text-white {
    color: #0f172a !important;
}
html:not(.dark) #tab-technical .text-slate-400 {
    color: #475569 !important;
}
html:not(.dark) #tab-technical .text-slate-500 {
    color: #64748b !important;
}

/* Corporate Action Interactive Hover Tooltip */
.ca-tooltip-trigger {
    position: relative;
    cursor: pointer;
    z-index: 20;
}
.ca-tooltip-trigger:hover {
    z-index: 25;
}
.ca-tooltip-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    top: auto;
    left: 0;
    z-index: 35;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: rgba(10, 15, 29, 0.98);
    border: 1px solid rgba(245, 158, 11, 0.8);
    border-radius: 0.75rem;
    padding: 0.9rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
}
.ca-tooltip-popup::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
    background: transparent;
}
.ca-tooltip-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 24px;
    border-width: 6px;
    border-style: solid;
    border-color: rgba(245, 158, 11, 0.85) transparent transparent transparent;
}
.ca-tooltip-trigger:hover .ca-tooltip-popup,
.ca-tooltip-popup:hover,
.ca-tooltip-popup.is-pinned {
    display: block !important;
}

/* ========================================================================= */
/* FIX TRỒNG LẤN: KHUNG VÀNG CỐ ĐỊNH (HEADER + MASTER TABS) - CUỘN DỮ LIỆU PHÍA DƯỚI */
/* ========================================================================= */
:root {
    --header-height: 56px;
}

/* Scrollbar None Utility */
.scrollbar-none {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.scrollbar-none::-webkit-scrollbar {
    display: none !important;
}

/* Smooth Touch Scrolling */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

#main-terminal-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #020617 !important; /* solid slate-950 không cho lọt chữ */
    border-bottom: 1px solid #1e293b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}
html:not(.dark) #main-terminal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
}

#master-tabs-nav {
    position: sticky;
    top: var(--header-height, 56px);
    z-index: 45;
    background-color: #020617 !important; /* solid slate-950 không cho lọt chữ */
    border-bottom: 1px solid #1e293b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    -webkit-overflow-scrolling: touch;
}
html:not(.dark) #master-tabs-nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
}

/* Responsive Table & Layout Optimizations for Mobile & Tablet */
@media (max-width: 768px) {
    /* Reduce sticky column width on mobile so users can see indicators and values side-by-side */
    #bctc-table-element th:first-child,
    #bctc-table-element td:first-child,
    #bctc-table-element .bctc-sticky-col {
        min-width: 155px !important;
        width: 165px !important;
        max-width: 185px !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
        line-height: 1.35 !important;
    }
    #matrix-table-element td:first-child,
    #matrix-table-element th:first-child {
        min-width: 120px !important;
        max-width: 135px !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
        line-height: 1.35 !important;
    }

    /* Modal Responsive Constraint */
    .modal-container, .modal-box {
        max-height: 88vh !important;
        width: 95vw !important;
        margin: auto !important;
    }

    /* Master Tabs swipe feel */
    #master-tabs-nav {
        scroll-snap-type: x proximity;
    }
    #master-tabs-nav .tab-btn {
        scroll-snap-align: center;
    }
}