/* ============================================================================
   IDX Smart Screener — Premium Terminal Edition
   Theme: Bloomberg × TradingView  |  Institutional Grade Dark UI
   ============================================================================ */

/* === GOOGLE FONTS IMPORT === */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
/* Serif thương hiệu — dùng riêng cho tiêu đề Home Hero (Bước 1) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* ============================================================================
   🛡️ HIDE TRADINGVIEW WATERMARK - HARDCORE MODE
   ============================================================================ */
img[src*="tradingview" i],
img[src*="TRADINGVIEW" i],
img[alt*="tradingview" i],
img[alt*="TradingView" i],
img[alt*="TICK CHARTS" i],
div[class*="tradingview" i],
div[id*="tradingview" i],
a[href*="tradingview" i],
iframe[src*="tradingview" i],
*[class*="tradingview-widget" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    pointer-events: none !important;
}

/* Hide all small images in header (watermark pattern) */
#main-header img:not([src*="logo"]):not([src*="Logo"]) {
    display: none !important;
}

/* Overlay che watermark góc phải header */
#main-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(6, 15, 30, 0.7) 25%,
        rgba(6, 15, 30, 0.95) 50%,
        rgba(6, 15, 30, 1) 75%
    );
    z-index: 9999;
    pointer-events: none;
}

/* ============================================================================
   CSS DESIGN TOKENS
   ============================================================================ */
/* ============================================================================
   CSS DESIGN TOKENS (LIGHT & DARK MODE)
   ============================================================================ */

/* 1. THEME SÁNG (Mặc định) */
:root, [data-theme="light"] {
  /* Core backgrounds: Trắng và xám sáng */
  --bg-void:        #f4f6f8;
  --bg-base:        #ffffff;
  --bg-card:        #ffffff;
  --bg-surface:     #f8f9fa;
  --bg-elevated:    #e9ecef;
  --bg-hover:       #e2e8f0;
  --bg-active:      #cbd5e1;

  /* Borders: Xám nhạt */
  --border-subtle:  #e2e8f0;
  --border-dim:     #cbd5e1;
  --border-default: #94a3b8;
  --border-bright:  #0057D9;

  /* ═══════════════════════════════════════════════════════════
     BRAND PALETTE — UEL (Trường Đại học Kinh tế – Luật)
     LƯU Ý: đây là màu THƯƠNG HIỆU (nút, viền nhấn, hover, sidebar
     active...). KHÔNG dùng cho màu tăng/giảm giá hay xếp hạng A-F
     — những màu đó vẫn giữ xanh lá/đỏ theo quy ước TTCK Việt Nam,
     xem --positive/--negative bên dưới, không đổi.
     ═══════════════════════════════════════════════════════════ */
  --brand-navy:     #003B8E;  /* Xanh đậm */
  --brand-blue:     #0057D9;  /* Xanh UEL — accent chính */
  --brand-blue-light:#1E88E5; /* Xanh sáng — hover/nhấn nhẹ */
  --brand-blue-pale:#CFE8FF;  /* Xanh nhạt — nền tint/badge */
  --brand-orange:   #F9A11B;  /* Cam — CTA phụ/nhấn mạnh */
  --brand-orange-deep:#F57C00;/* Cam đậm — hover của CTA cam */

  /* Primary accent — Xanh UEL (trước đây xanh lá cây #10b981) */
  --accent:         var(--brand-blue);
  --accent-dim:     rgba(0, 87, 217, 0.12);
  --accent-glow:    rgba(0, 87, 217, 0.25);
  --accent-deep:    var(--brand-navy);

  /* Semantic — GIỮ NGUYÊN, không phải màu thương hiệu.
     Tăng/giảm giá và xếp hạng A-F vẫn theo quy ước xanh lá/đỏ TTCK VN. */
  --positive:       #10b981;
  --positive-dim:   rgba(16, 185, 129, 0.12);
  --negative:       #ef4444;
  --negative-dim:   rgba(239, 68, 68, 0.12);
  --warning:        #f59e0b;
  --warning-dim:    rgba(245, 158, 11, 0.12);
  --purple:         #8b5cf6;
  --purple-dim:     rgba(139, 92, 246, 0.12);

  /* Text: Đen và xám đậm */
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --text-ticker:    var(--brand-blue);

  /* Typography & Radius (Giữ nguyên của bạn) */
  --font-display:   'Montserrat', 'Space Grotesk', 'Sora', sans-serif;
  --font-data:      'JetBrains Mono', 'Monaco', monospace;
  --font-ui:        'Inter', -apple-system, sans-serif;
  --font-brand:     'Space Grotesk', 'Montserrat', sans-serif;

  --glow-accent:    0 0 20px rgba(0, 87, 217, 0.3);
  --glow-positive:  0 0 16px rgba(16, 185, 129, 0.25);
  --glow-negative:  0 0 16px rgba(239, 68, 68, 0.25);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-deep:    0 8px 40px rgba(0, 0, 0, 0.12);

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── ⚡ GLASSMORPHISM TOKENS (Light) ──
     Frosted panels read as soft, milky glass over a pale terminal floor. */
  --neon-cyan:        #0057D9;
  --neon-cyan-dim:    rgba(0, 87, 217, 0.10);
  --glass-bg:         rgba(255, 255, 255, 0.55);
  --glass-bg-strong:  rgba(255, 255, 255, 0.72);
  --glass-bg-deep:    rgba(255, 255, 255, 0.85);
  --glass-border:     rgba(15, 23, 42, 0.08);
  --glass-border-accent: rgba(0, 87, 217, 0.35);
  --glass-highlight:  rgba(255, 255, 255, 0.6);
  --glass-blur:       blur(20px) saturate(180%);
  --glass-blur-sm:    blur(12px) saturate(160%);
  --glass-shadow:     0 8px 32px rgba(15, 23, 42, 0.10);
  --glass-shadow-lg:  0 16px 48px rgba(15, 23, 42, 0.14);
  --ease-glass:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ── [BƯỚC 1] Home Hero — xanh lá thương hiệu riêng, KHÔNG dùng
     chung với --accent (xanh dương UEL) hay --positive (tăng/giảm giá) ── */
  --brand-green:      var(--brand-blue);
  --brand-green-hover:var(--brand-navy);
  --font-serif-brand: 'Playfair Display', 'Georgia', serif;
}

/* 2. THEME TỐI — "Gentelella" navy/teal reference palette */
[data-theme="dark"] {
  /* Dark Mode — nền navy đậm kiểu Gentelella, card phẳng viền mảnh,
     accent xanh UEL (#1E88E5) — brand chính thức. */
  --bg-void:        #0B132B;
  --bg-base:        #0B132B;
  --bg-card:        #16213e;
  --bg-surface:     #1a2332;
  --bg-elevated:    #232e41;
  --bg-hover:       #232e41;
  --bg-active:      #2d3a50;

  --border-subtle:  #232e41;
  --border-dim:     #2a3548;
  --border-default: #3a4760;
  --border-bright:  var(--brand-blue-light);

  --accent:         var(--brand-blue-light);
  --accent-dim:     rgba(30, 136, 229, 0.14);
  --accent-glow:    rgba(30, 136, 229, 0.22);
  --accent-deep:    var(--brand-blue);

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #8a99ad;
  --text-ticker:    var(--brand-blue-light);

  /* ── Pastel "icon-dim" tones — ô icon mờ trên card tối, lấy mẫu
     trực tiếp từ ảnh tham khảo Gentelella (KPI card icon boxes) ── */
  --pastel-teal-bg:    #1a3840;
  --pastel-teal-fg:    #2dd4bf;
  --pastel-blue-bg:    #16314a;
  --pastel-blue-fg:    #60a5fa;
  --pastel-amber-bg:   #3c3729;
  --pastel-amber-fg:   #fbbf24;
  --pastel-red-bg:     #3a2226;
  --pastel-red-fg:     #f87171;
  --pastel-purple-bg:  #2a2240;
  --pastel-purple-fg:  #c084fc;

  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-deep:    0 8px 32px rgba(0, 0, 0, 0.45);

  /* ── Glass tokens (Dark) — kính tối nhẹ, KHÔNG neon ── */
  --neon-cyan:        #1E88E5;
  --neon-cyan-dim:    rgba(30, 136, 229, 0.10);
  --glass-bg:         rgba(26, 35, 50, 0.70);
  --glass-bg-strong:  rgba(20, 28, 41, 0.88);
  --glass-bg-deep:    rgba(15, 22, 35, 0.96);
  --glass-border:     rgba(255, 255, 255, 0.06);
  --glass-border-accent: rgba(30, 136, 229, 0.30);
  --glass-highlight:  rgba(255, 255, 255, 0.04);
  --glass-blur:       blur(14px) saturate(140%);
  --glass-blur-sm:    blur(8px) saturate(130%);
  --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.40);
  --glass-shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.50);
  --ease-glass:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ── [BƯỚC 1] Home Hero — xanh lá sáng hơn cho nền tối ── */
  --brand-green:      var(--brand-blue-light);
  --brand-green-hover:#60a5fa;
}

body {
  font-family: var(--font-ui);
  background-color: var(--bg-void);
  color: var(--text-primary);
  overflow-x: hidden;

  transition: background-color 0.4s ease, color 0.4s ease;

  /* Subtle scan-line texture for terminal feel */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(30, 136, 229, 0.012) 2px,
      rgba(30, 136, 229, 0.012) 4px
    );
}

/* ============================================================================
   SCROLLBAR — Sleek blue-themed
   ============================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg-void); }

/* ============================================================================
   MAIN LAYOUT
   ============================================================================ */
.main-content {
  padding: 20px 24px;
  min-height: 100vh;
  background-color: transparent;
  width: 100%;
}

/* ============================================================================
   [BƯỚC 1] HOME HERO — Tiêu đề + Mô tả + Thanh tìm kiếm
   ============================================================================ */
.home-hero {
  text-align: center;
  padding: 88px 24px 36px;
  max-width: 720px;
  margin: 0 auto;
}

.home-hero-title {
  font-family: var(--font-serif-brand);
  font-style: italic;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.15;
  color: var(--brand-green);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.home-hero-desc {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 28px;
}

.home-hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-glass), box-shadow 0.2s var(--ease-glass);
}

.home-hero-search:focus-within {
  border-color: var(--brand-green);
  box-shadow: var(--shadow-deep);
}

.home-hero-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
}

.home-hero-search-input::placeholder {
  color: var(--text-muted);
}

.home-hero-kbd {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.home-hero-search-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--brand-green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.home-hero-search-btn:hover {
  filter: brightness(1.08);
  transform: scale(1.05);
}

.home-hero-search-btn:active {
  transform: scale(0.97);
}

@media (max-width: 640px) {
  .home-hero { padding: 40px 16px 28px; }
  .home-hero-title { font-size: 30px; }
  .home-hero-desc { font-size: 13.5px; }
  .home-hero-kbd { display: none; }
}

/* ============================================================================
   [BƯỚC 2] MARKET OVERVIEW — 4 thẻ chỉ số ngang (VN-INDEX / HNX-INDEX /
   VN30-INDEX / TOTAL VOLUME)
   ============================================================================ */
.home-market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto 32px;
  padding: 0 24px;
  
  /* THÊM 1 TRONG 2 DÒNG NÀY: */
  grid-auto-rows: 150px; /* Ép chiều cao cố định cho các thẻ là 280px */
}

.home-market-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.2s var(--ease-glass), transform 0.2s var(--ease-glass);
}

.home-market-card:hover {
  border-color: var(--border-default);
  transform: translateY(-1px);
}

.home-market-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.home-market-card-label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Badge dùng chung cho cả % thay đổi (3 thẻ index) và nhãn xu hướng
   (thẻ Volume). Callback set className phụ "is-positive" / "is-negative"
   để đổi màu — mặc định trung tính theo --text-muted. */
.home-market-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.home-market-badge.is-positive { color: var(--positive); }
.home-market-badge.is-negative { color: var(--negative); }

.home-market-card-value {
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
}

.home-market-card-pts {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.home-market-card-pts.is-positive { color: var(--positive); }
.home-market-card-pts.is-negative { color: var(--negative); }

.home-market-card-spark {
  height: 44px;
  margin-top: auto;
}

.home-market-card-spark .js-plotly-plot,
.home-market-card-spark .plot-container {
  height: 100% !important;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .home-market-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .home-market-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .home-market-card-value { font-size: 21px; }
}

/* ============================================================================
   [BƯỚC 3] TOP FIN PICKS (65%) + MARKET PULSE (35%)
   ============================================================================ */
.home-picks-pulse-grid {
  display: grid;
  grid-template-columns: 13fr 7fr; /* tỉ lệ 65% / 35% */
  gap: 20px;
  max-width: 1220px;
  margin: 0 auto 32px;
  padding: 0 24px;
  align-items: start;
}

/* ── Cột trái — Top Fin Picks ── */
.home-picks-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.home-picks-title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.home-picks-subtitle {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

.home-picks-viewall {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.home-picks-viewall:hover { text-decoration: underline; }

.home-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.home-pick-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: border-color 0.2s var(--ease-glass), transform 0.2s var(--ease-glass);
}

.home-pick-card:hover {
  border-color: var(--border-default);
  transform: translateY(-1px);
}

.home-pick-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Tag — dùng lại design token có sẵn theo từng nhóm phân loại */
.home-pick-tag {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.home-pick-tag-growth   { color: var(--positive); background: var(--positive-dim); }
.home-pick-tag-value    { color: var(--accent);   background: rgba(0, 87, 217, 0.12); }
.home-pick-tag-momentum { color: var(--warning);  background: var(--warning-dim); }

.home-pick-card-stars {
  display: flex;
  gap: 2px;
  font-size: 11px;
  color: var(--warning); /* sao vàng cam, tái dùng --warning cho nhất quán token màu */
  flex-shrink: 0;
}

.home-pick-card-ticker {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* [BƯỚC 3.1] Nhận xét/insight ngữ nghĩa tự động sinh theo điểm số của mã */
.home-pick-card-insight {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.35;
}

.home-picks-empty {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px;
  text-align: center;
  grid-column: 1 / -1;
}

.home-pick-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.home-pick-card-price {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.home-pick-card-change {
  font-family: var(--font-data);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.home-pick-card-change.is-positive { color: var(--positive); }
.home-pick-card-change.is-negative { color: var(--negative); }

/* ── Cột phải — Market Pulse ── */
.home-pulse-col {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
  min-width: 0;
}

.home-pulse-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.home-pulse-breadth {
  margin-bottom: 18px;
}

.home-pulse-breadth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.home-pulse-breadth-label-static {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.home-pulse-breadth-label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  color: var(--positive);
}

.home-pulse-breadth-track {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.home-pulse-breadth-fill-bull {
  background: var(--positive);
  height: 100%;
  transition: width 0.3s var(--ease-glass);
}

.home-pulse-breadth-fill-bear {
  background: var(--negative);
  height: 100%;
  transition: width 0.3s var(--ease-glass);
}

.home-pulse-breadth-counts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.home-pulse-breadth-count-item strong {
  font-weight: 1000;
  color: var(--text-primary);   /* [SỬA] đổi từ text-muted → text-primary (sáng hơn) */
}

.home-pulse-alerts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-pulse-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.home-pulse-alert-icon {
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 2px;
  width: 20px;
  text-align: center;
}

.home-pulse-alert-icon-positive { color: var(--positive); }
.home-pulse-alert-icon-negative { color: var(--negative); }
.home-pulse-alert-icon-neutral  { color: var(--accent); }

.home-pulse-alert-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.home-pulse-alert-desc {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .home-picks-pulse-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-picks-grid {
    grid-template-columns: 1fr;
  }
  .home-picks-pulse-grid {
    padding: 0 16px;
  }
}

/* ============================================================================
   PAGE HEADER — Sharp branded header
   ============================================================================ */
.page-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 40%, transparent 100%);
}

.page-header h2 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

.page-header h2 i {
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}

.page-header p {
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-data);
  letter-spacing: 0.5px;
}

/* ============================================================================
   INFO CARDS — Glass morphism panels
   ============================================================================ */
.info-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
  animation: fadeInUp 0.3s ease-out;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  opacity: 0;
  transition: opacity 0.25s;
}

.info-card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-card), inset 0 0 40px rgba(30, 136, 229, 0.03);
}

.info-card:hover::before { opacity: 1; }

/* ============================================================================
   SCORE BOX — Metric display cards
   ============================================================================ */
.score-box {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.score-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-dim) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.score-box:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-2px);
}

.score-box:hover::after { opacity: 1; }

.metric-label {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.metric-value {
  font-family: var(--font-data);
  font-size: 22px;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s;
}

.metric-row:last-child { border-bottom: none; }

.metric-row:hover {
  background: var(--bg-hover);
  margin: 0 -16px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

.metric-positive { color: var(--positive) !important; font-weight: 600; }
.metric-negative { color: var(--negative) !important; font-weight: 600; }

/* ============================================================================
   AG GRID — Bloomberg Terminal-style data table
   ============================================================================ */
[data-theme="dark"] .ag-theme-alpine-dark {
  /* Core tokens */
  --ag-background-color:              #060f1e;
  --ag-header-background-color:       #091526;
  --ag-odd-row-background-color:      #060f1e;
  --ag-even-row-background-color:     #070e1c;
  --ag-row-hover-color:               #112236;
  --ag-border-color:                  #0e2540;
  --ag-header-column-separator-color: #163660;
  --ag-foreground-color:              #d6eaf8;
  --ag-header-foreground-color:       #3d6a8a;
  --ag-secondary-foreground-color:    #2a5070;
  --ag-row-border-color:              #0a1e35;
  --ag-selected-row-background-color: rgba(30, 136, 229, 0.07);
  --ag-range-selection-border-color:  #1E88E5;
  --ag-font-family: 'Inter', -apple-system, sans-serif;  /* đổi từ JetBrains Mono */
  --ag-font-size:                     12px;
  --ag-cell-horizontal-padding:       10px;
  --ag-row-height:                    36px;
  --ag-header-height:                 38px;

  border: 1px solid #0e2540 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(30, 136, 229,0.06);
}

/* ── Header ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-header {
  background: linear-gradient(180deg, #0d1d30 0%, #091526 100%) !important;
  border-bottom: 2px solid #1d4d80 !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-header-row {
  background: transparent !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #5d7a96 !important;           /* đổi từ #3d6a8a — sáng hơn chút */
  border-right: 1px solid #0a1e35 !important;
  transition: color 0.2s, background 0.2s;
  padding: 0 10px !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell:hover {
  color: #1E88E5 !important;
  background: rgba(30, 136, 229, 0.05) !important;
}

/* Sort icons */
[data-theme="dark"] .ag-theme-alpine-dark .ag-sort-indicator-icon {
  color: #1E88E5 !important;
}

/* ── Rows ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-row {
  border-bottom: 1px solid #0a1e35 !important;
  transition: background-color 0.15s ease;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-row-odd {
  background-color: #060f1e !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-row-even {
  background-color: #07101f !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-row:hover {
  background-color: #112236 !important;
  /* Subtle left glow on hover */

}

/* Selected row */
[data-theme="dark"] .ag-theme-alpine-dark .ag-row-selected {
  background-color: rgba(30, 136, 229, 0.07) !important;
  box-shadow: inset 3px 0 0 #1E88E5 !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-row-selected .ag-cell {
  color: #b2c9e0 !important;   /* đổi từ #d6eaf8 — bớt chói, đúng TV tone */
}

/* ── Cells — canonical rule, không !important để inline cellStyle Python thắng ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #b2c9e0;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}
/* Right-aligned numeric cells — Roboto Mono tabular (khớp với _num/_pct Python) */
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell[class*="rightAligned"] {
  font-family: 'Roboto Mono', 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* tabular-nums cho mọi cell-value */
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell-value {
  font-variant-numeric: tabular-nums;
}

/* Empty/dash values */
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell-value:empty::after {
  content: '—';
  color: #1d4d80;
}

/* ── Pinned columns ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-pinned-left-cols-container {
  border-right: 2px solid #1d4d80 !important;
  box-shadow: 6px 0 16px rgba(0,0,0,0.5);
  background: #060f1e !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-pinned-left-header {
  border-right: 2px solid #1d4d80 !important;
  background: linear-gradient(180deg, #0d1d30 0%, #091526 100%) !important;
}

/* ── Filter input ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-filter-toolpanel-header,
[data-theme="dark"] .ag-theme-alpine-dark .ag-filter-body-wrapper {
  background: #091526 !important;
  border-color: #1d4d80 !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-input-field-input {
  background: #0d1d30 !important;
  border: 1px solid #1d4d80 !important;
  color: #d6eaf8 !important;
  border-radius: 4px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11px !important;
}

/* ── Pagination panel ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-panel {
  background: linear-gradient(180deg, #091526 0%, #060f1e 100%) !important;
  border-top: 1px solid #1d4d80 !important;
  color: #5d7a96 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11px !important;
  height: 44px !important;
  padding: 0 16px !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-button {
  color: #5d7a96 !important;
  transition: all 0.2s;
  border-radius: 4px !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-button:hover:not([disabled]) {
  background: rgba(30, 136, 229, 0.1) !important;
  color: #1E88E5 !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-button[disabled] {
  opacity: 0.2 !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-page-summary-panel {
  color: #7fa8cc !important;
}

/* ── Scrollbar inside grid ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
[data-theme="dark"] .ag-theme-alpine-dark .ag-body-viewport::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
[data-theme="dark"] .ag-theme-alpine-dark .ag-body-viewport::-webkit-scrollbar-track {
  background: #060f1e;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
[data-theme="dark"] .ag-theme-alpine-dark .ag-body-viewport::-webkit-scrollbar-thumb {
  background: #163660;
  border-radius: 3px;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .ag-theme-alpine-dark .ag-body-viewport::-webkit-scrollbar-thumb:hover {
  background: #1E88E5;
}

/* ── No rows overlay ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-overlay-no-rows-wrapper {
  background: #060f1e !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-overlay-no-rows-center {
  color: #2a5070 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
}

/* ============================================================================
   GRADE CHIPS — Score badges
   ============================================================================ */
.grade-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  user-select: none;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
}

.grade-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity 0.2s;
}
.grade-chip:hover::after { opacity: 1; }

/* A */
.grade-chip-a {
  background: var(--positive-dim);
  color: var(--positive);
  border-color: rgba(0, 230, 118, 0.25);
}
.grade-chip-a:hover {
  background: rgba(0, 230, 118, 0.2);
  border-color: var(--positive);
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.3);
  transform: translateY(-1px);
}
.grade-chip-a.active {
  background: var(--positive);
  color: #001a0c;
  border-color: var(--positive);
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.4);
}

/* B */
.grade-chip-b {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(30, 136, 229, 0.25);
}
.grade-chip-b:hover {
  background: rgba(30, 136, 229, 0.2);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-1px);
}
.grade-chip-b.active {
  background: var(--accent);
  color: #001a20;
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(30, 136, 229, 0.5);
}

/* C */
.grade-chip-c {
  background: var(--warning-dim);
  color: var(--warning);
  border-color: rgba(255, 183, 3, 0.25);
}
.grade-chip-c:hover {
  background: rgba(255, 183, 3, 0.2);
  border-color: var(--warning);
  box-shadow: 0 0 12px rgba(255, 183, 3, 0.3);
  transform: translateY(-1px);
}
.grade-chip-c.active {
  background: var(--warning);
  color: #1a1200;
  border-color: var(--warning);
  box-shadow: 0 0 16px rgba(255, 183, 3, 0.4);
}

/* D */
.grade-chip-d {
  background: var(--negative-dim);
  color: var(--negative);
  border-color: rgba(255, 61, 87, 0.25);
}
.grade-chip-d:hover {
  background: rgba(255, 61, 87, 0.2);
  border-color: var(--negative);
  box-shadow: var(--glow-negative);
  transform: translateY(-1px);
}
.grade-chip-d.active {
  background: var(--negative);
  color: #1a0007;
  border-color: var(--negative);
  box-shadow: 0 0 16px rgba(255, 61, 87, 0.4);
}

/* F */
.grade-chip-f {
  background: rgba(42, 62, 80, 0.4);
  color: #4a6a80;
  border-color: rgba(42, 62, 80, 0.4);
}
.grade-chip-f:hover {
  background: rgba(42, 62, 80, 0.6);
  border-color: #4a6a80;
  transform: translateY(-1px);
}
.grade-chip-f.active {
  background: #3d5a70;
  color: var(--text-primary);
  border-color: #4a6a80;
}

/* ============================================================================
   LEGEND CHIPS
   ============================================================================ */
.legend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border-radius: 3px;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.legend-a { background: var(--positive); color: #001a0c; }
.legend-b { background: var(--accent);   color: #001a20; }
.legend-c { background: var(--warning);  color: #1a1200; }
.legend-d { background: var(--negative); color: #1a0007; }
.legend-f { background: #3d5a70;         color: var(--text-primary); }

/* ============================================================================
   CUSTOM RANGE SLIDER
   ============================================================================ */
.custom-range-slider .rc-slider-rail {
  background-color: var(--border-dim);
  height: 3px;
  border-radius: 2px;
}

.custom-range-slider .rc-slider-track {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  height: 3px;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(30, 136, 229, 0.3);
}

.custom-range-slider .rc-slider-handle {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background-color: var(--accent);
  border: 2px solid var(--bg-void);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(30, 136, 229, 0.5);
  transition: box-shadow 0.2s, transform 0.15s;
  /* rc-slider dùng translateX(-50%) để căn giữa handle theo left:X%
     Phải giữ translateX(-50%) khi override transform, nếu không handle bị lệch */
  transform: translateX(-50%);
}

.custom-range-slider .rc-slider-handle:hover,
.custom-range-slider .rc-slider-handle:active {
  box-shadow: 0 0 16px rgba(30, 136, 229, 0.7);
  /* translateX(-50%) giữ handle căn giữa, scale(1.1) phóng to nhẹ */
  transform: translateX(-50%) scale(1.1);
}

/* ============================================================================
   CRITERIA ITEMS — Filter sidebar list
   ============================================================================ */
.criteria-item-hover {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 2px solid transparent;
}

.criteria-item-hover:hover {
  background-color: var(--bg-hover) !important;
  border-left-color: var(--accent) !important;
  padding-left: 16px !important;
}

.criteria-item-hover:active {
  background-color: var(--bg-active) !important;
  transform: scale(0.99);
}

/* ============================================================================
   COLLAPSE HEADERS
   ============================================================================ */
.collapse-header {
  transition: all 0.18s ease;
  position: relative;
}

.collapse-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}

.collapse-header:hover {
  background-color: var(--bg-elevated) !important;
}

.collapse-header:hover::before { opacity: 1; }

/* ============================================================================
   ACTION BUTTONS
   ============================================================================ */

/* Apply button */
.btn-apply-ssi {
  background: linear-gradient(135deg, #0057D9 0%, #1E88E5 100%) !important;
  border: none !important;
  color: #001a20 !important;
  padding: 9px 22px !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.3) !important;
}

.btn-apply-ssi::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn-apply-ssi:active::before { width: 300px; height: 300px; }

.btn-apply-ssi:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(30, 136, 229, 0.5) !important;
  filter: brightness(1.1) !important;
}

.btn-apply-ssi:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3) !important;
}

/* Save / secondary button */
.btn-save-ssi {
  background-color: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  padding: 9px 22px !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-save-ssi:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: var(--accent-dim) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.15) !important;
}

/* Reset button */
#btn-reset-ui {
  background: transparent !important;
  border: 1px solid rgba(255, 61, 87, 0.35) !important;
  color: rgba(255, 61, 87, 0.7) !important;
  transition: all 0.25s !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

#btn-reset-ui:hover {
  border-color: var(--negative) !important;
  color: var(--negative) !important;
  background: var(--negative-dim) !important;
  box-shadow: 0 0 12px rgba(255, 61, 87, 0.2) !important;
}

/* Toggle filter panel button */
#toggle-filter-btn {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--accent) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.25s !important;
}

#toggle-filter-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================================
   SELECTS & DROPDOWNS
   ============================================================================ */
.ssi-select {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 7px 10px !important;
  font-family: var(--font-data) !important;
  font-size: 12px !important;
  transition: all 0.2s !important;
}

.ssi-select:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-dim) !important;
}

.ssi-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
  outline: none !important;
}

/* Dash Dcc Dropdown */
.custom-dropdown .Select-control {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  min-height: 36px;
  transition: all 0.2s ease;
}

.custom-dropdown .Select-control:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-dim) !important;
}

.custom-dropdown .Select-menu-outer {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 0 1px var(--border-dim) !important;
  margin-top: 4px;
}

.custom-dropdown .Select-option {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  padding: 9px 14px;
  font-family: var(--font-data) !important;
  font-size: 12px !important;
  transition: all 0.15s;
}

.custom-dropdown .Select-option:hover {
  background-color: var(--bg-hover) !important;
  color: var(--accent) !important;
  padding-left: 18px;
}

.custom-dropdown .Select-option.is-selected {
  background-color: var(--accent-dim) !important;
  color: var(--accent) !important;
}

.custom-dropdown .Select-value {
  background-color: rgba(30, 136, 229, 0.1) !important;
  border: 1px solid rgba(30, 136, 229, 0.3) !important;
  border-radius: 4px !important;
  color: var(--accent) !important;
}

.custom-dropdown .Select-placeholder {
  color: var(--text-muted) !important;
  font-family: var(--font-data) !important;
  font-size: 12px !important;
}

/* SSI sector dropdown */
.ssi-dropdown-custom .Select-control {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-primary) !important;
}

.ssi-dropdown-custom .Select-menu-outer {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
  max-height: 400px !important;
  z-index: 9999 !important;
}

.ssi-dropdown-custom .VirtualizedSelectOption {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-data) !important;
}

.ssi-dropdown-custom .VirtualizedSelectFocusedOption {
  background-color: var(--accent-dim) !important;
  color: var(--accent) !important;
}

.ssi-dropdown-custom .Select-value {
  background-color: rgba(30, 136, 229, 0.1) !important;
  border: 1px solid rgba(30, 136, 229, 0.3) !important;
}

.ssi-dropdown-custom .Select-value-label { color: var(--accent) !important; }

.ssi-dropdown-custom .is-focused:not(.is-open) > .Select-control {
  background-color: var(--bg-surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-dim) !important;
}

.ssi-dropdown-custom .Select-placeholder { color: var(--text-muted) !important; }

/* ============================================================================
   PERIOD BUTTONS — Chart time period selector
   ============================================================================ */
.period-btn {
  border-color: var(--border-dim) !important;
  color: var(--text-muted) !important;
  background-color: transparent !important;
  font-family: var(--font-data) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 11px !important;
  letter-spacing: 0.5px;
  transition: all 0.2s ease !important;
}

.period-btn:hover {
  background-color: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.period-btn.active, .period-btn:active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #001a20 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(30, 136, 229, 0.35) !important;
}

/* ============================================================================
   REMOVE FILTER ICON
   ============================================================================ */
.remove-filter-icon {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted) !important;
}

.remove-filter-icon:hover {
  color: var(--negative) !important;
  transform: rotate(90deg) scale(1.3);
  filter: drop-shadow(0 0 4px rgba(255, 61, 87, 0.5));
}

/* ============================================================================
   RESULT COUNT BAR
   ============================================================================ */
#result-count {
  font-family: var(--font-data);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

#filter-stats {
  font-family: var(--font-data);
  color: var(--text-muted);
  font-size: 11px;
}

/* ============================================================================
   CHART CONTROLS & CONTAINERS
   ============================================================================ */
.chart-controls-container { animation: slideDown 0.3s ease-out; }

/* Period buttons group */
.btn-group > .btn {
  border-width: 1px !important;
  border-color: var(--border-dim) !important;
}

.btn-group > .btn:not(:last-child) { border-right: none !important; }
.btn-group > .btn:hover { z-index: 1; }

/* Plotly modebar */
.modebar {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-md);
  padding: 4px 8px;
  box-shadow: var(--shadow-card);
}

.modebar-btn {
  border-radius: var(--radius-sm);
  margin: 0 2px;
  transition: all 0.2s;
}

.modebar-btn:hover {
  background-color: var(--accent-dim) !important;
}

.modebar-btn.active {
  background-color: rgba(30, 136, 229, 0.25) !important;
}

/* Chart empty state */
.fireant-candlestick-chart {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}

.fireant-candlestick-chart:hover {
  box-shadow: var(--shadow-deep);
}

/* ============================================================================
   TOGGLE SWITCHES (DAQ)
   ============================================================================ */
.daq-toggleswitch { transform: scale(0.85); }
.daq-toggleswitch-label {
  color: var(--text-secondary) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
}

/* ============================================================================
   LOADING INDICATORS
   ============================================================================ */
.loading-pulse { animation: pulse 1.5s ease-in-out infinite; }

.loading-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(30, 136, 229, 0.15);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 0.8s ease-in-out infinite;
}

.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-dim);
}

.chart-loading-spinner {
  border: 3px solid rgba(30, 136, 229, 0.1);
  border-top: 3px solid var(--accent);
  border-radius: 50%;
  width: 44px; height: 44px;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 20px rgba(30, 136, 229, 0.2);
}

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */
.toast-notification {
  position: fixed;
  top: 20px; right: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: var(--shadow-deep), 0 0 0 1px var(--border-dim);
  z-index: 9999;
  font-family: var(--font-ui);
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-success { border-left: 3px solid var(--positive); }
.toast-error   { border-left: 3px solid var(--negative); }
.toast-info    { border-left: 3px solid var(--accent); }

/* ============================================================================
   FILTER PANEL — Inline collapsible panel
   ============================================================================ */
#filter-offcanvas {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
}

#filter-offcanvas ::-webkit-scrollbar { width: 4px; }
#filter-offcanvas ::-webkit-scrollbar-track { background: var(--bg-card); }
#filter-offcanvas ::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: 2px;
}
#filter-offcanvas ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }

#filter-offcanvas .collapsing {
  transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================================
   SELECTED FILTERS CONTAINER
   ============================================================================ */
#selected-filters-container {
  min-height: 60px;
}

/* Individual filter tag */
.active-filter-tag {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  position: relative;
  transition: border-color 0.2s;
}

.active-filter-tag:hover {
  border-color: var(--accent) !important;
}

/* ============================================================================
   DETAIL TABS — Bottom detail panel
   ============================================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--border-dim) !important;
  gap: 2px;
}

.nav-tabs .nav-link {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  padding: 8px 16px !important;
  transition: all 0.2s !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--text-secondary) !important;
  background: var(--bg-hover) !important;
  border-color: var(--border-dim) !important;
}

.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  background: var(--bg-surface) !important;
  border-color: var(--border-default) var(--border-default) var(--bg-surface) !important;
  border-bottom-color: var(--bg-surface) !important;
}

/* Tab content */
.tab-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Period toggle buttons */
.btn-group .btn-outline-primary {
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  font-family: var(--font-data) !important;
  font-size: 11px !important;
  transition: all 0.2s !important;
}

.btn-group .btn-outline-primary:hover {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-group .btn-outline-primary.active {
  background: var(--accent) !important;
  color: #001a20 !important;
  border-color: var(--accent) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   TABLE STYLES — Detail tabs HTML tables
   ============================================================================ */
table {
  border-collapse: collapse;
}

th {
  font-family: var(--font-data) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted) !important;
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
}

td {
  font-family: var(--font-data) !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary);
}

tr:hover td {
  background: var(--bg-hover) !important;
}

/* ============================================================================
   CHART BACKGROUND FAINT IMAGE
   ============================================================================ */
.faint-chart-bg { position: relative; }

.faint-chart-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('chart-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.04;
  filter: blur(3px) saturate(0.5);
  z-index: -1;
}

/* ============================================================================
   TOGGLE ICON ANIMATION
   ============================================================================ */
#toggle-filter-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#toggle-filter-icon.open { transform: rotate(180deg); }

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes chartFadeIn {
  from { opacity: 0; transform: scale(0.99); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(30, 136, 229, 0.2); }
  50%       { box-shadow: 0 0 20px rgba(30, 136, 229, 0.5); }
}

.fireant-candlestick-chart > div { animation: chartFadeIn 0.4s ease-out; }

/* ============================================================================
   PLOTLY CUSTOMIZATION
   ============================================================================ */
.plotly .hoverlayer .hovertext {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-data) !important;
  font-size: 11px !important;
  box-shadow: var(--shadow-deep) !important;
}

.plotly .annotation-arrow-g path { stroke: var(--accent) !important; }
.plotly .shapelayer path { stroke-width: 2 !important; opacity: 0.8 !important; }
.plotly .shapelayer path:hover { opacity: 1 !important; stroke-width: 3 !important; }

/* ============================================================================
   BOOTSTRAP OVERRIDES
   ============================================================================ */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
}

.card-header {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-secondary) !important;
}

.badge {
  font-family: var(--font-data) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1200px) {
  .main-content { padding: 16px; }
  .grade-chip { width: 30px; height: 22px; font-size: 11px; }
}

@media (max-width: 768px) {
  .page-header h2 { font-size: 16px; }
  .btn-apply-ssi, .btn-save-ssi {
    padding: 7px 16px !important;
    font-size: 11px !important;
  }
  .period-btn { font-size: 10px !important; padding: 4px 8px !important; }
}
/* ============================================================================
   FIX GIAO DIỆN DROPDOWN (MENU THẢ XUỐNG) BỊ DÍNH CHÙM
   ============================================================================ */

/* 1. Chỉnh khoảng cách và phông chữ cho danh sách sổ xuống */
.custom-dropdown .Select-option,
.ssi-dropdown-custom .VirtualizedSelectOption,
.Select-option,
.VirtualizedSelectOption {
    padding: 12px 16px !important; /* Tăng khoảng cách trên/dưới, trái/phải cho thoáng */
    font-family: var(--font-ui), 'Inter', sans-serif !important; /* Dùng phông chữ mềm mại, dễ đọc */
    font-size: 14px !important; /* Chữ to rõ hơn */
    line-height: 1.6 !important; /* Tăng khoảng cách giữa các dòng nếu chữ dài bị rớt dòng */
    white-space: normal !important; /* Tự động xuống dòng gọn gàng */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important; /* Thêm đường kẻ mờ phân cách */
}

/* 2. Hiệu ứng khi di chuột vào từng dòng (Hover) */
.custom-dropdown .Select-option:hover,
.ssi-dropdown-custom .VirtualizedSelectOption:hover,
.Select-option:hover,
.VirtualizedSelectOption:hover {
    background-color: rgba(30, 136, 229, 0.08) !important;
    padding-left: 20px !important; /* Chữ thụt lùi vào một chút cho xịn */
    transition: all 0.2s ease !important;
}

/* 3. Chỉnh phông chữ cho Text hiển thị bên ngoài (khi đã chọn xong) */
.custom-dropdown .Select-value-label,
.custom-dropdown .Select-placeholder,
.ssi-dropdown-custom .Select-value-label,
.ssi-dropdown-custom .Select-placeholder,
.Select-value-label,
.Select-placeholder {
    font-family: var(--font-ui), 'Inter', sans-serif !important;
    font-size: 14px !important;
}

/* 4. Mở rộng khung nền đen của Dropdown (Menu Outer) để không bị cắt chữ */
.custom-dropdown .Select-menu-outer,
.ssi-dropdown-custom .Select-menu-outer {
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid var(--border-default) !important;
    padding: 4px 0 !important;
}
/* ============================================================================
   ĐẶC TRỊ GIAO DIỆN DROPDOWN (BẢNG CHỌN NGÀNH) DÍNH CHÙM & BỊ CẮT CHỮ
   ============================================================================ */

/* Ép CẢ LỚP VỎ VÀ LỚP BÊN TRONG giãn ra để chứa đủ chữ */
.Select-menu-outer, 
.Select-menu {
    width: max-content !important; 
    min-width: 100% !important;
    overflow-x: hidden !important; /* Giấu thanh cuộn ngang nếu có */
}

/* Chỉnh từng dòng chữ bên trong thật thoáng */
.Select-menu-outer .Select-option,
.Select-menu-outer .VirtualizedSelectOption {
    padding: 12px 35px 12px 18px !important; /* Tăng khoảng cách bên phải (35px) để né thanh cuộn */
    font-family: var(--font-ui), 'Inter', sans-serif !important; 
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important; /* Chữ vẫn nằm trên 1 dòng mượt mà */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Hiệu ứng khi rê chuột vào */
.Select-menu-outer .Select-option:hover,
.Select-menu-outer .VirtualizedSelectOption:hover,
.Select-menu-outer .Select-option.is-focused,
.Select-menu-outer .VirtualizedSelectOption.is-focused {
    background-color: rgba(30, 136, 229, 0.1) !important;
    color: var(--accent) !important;
    padding-left: 24px !important; /* Thụt chữ lùi vào trong một chút */
}

/* assets/custom.css */
.ticker-search-dropdown input {
    color: #ffffff !important;
    caret-color: #ffffff !important;
}
.ticker-search-dropdown .Select-value-label {
    color: #ffffff !important;
}
.ticker-search-dropdown .Select-placeholder {
    color: #8b949e !important;
}
/* ============================================================================
   ÉP BUỘC HEADER PHẢI CUỘN THEO TRANG (ANTI-FIXED)
   ============================================================================ */
#main-header {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    z-index: 10 !important;
}

/* Đảm bảo body và html không bị khóa cuộn */
html, body {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
}

/* ============================================================================
   CĂN CHỈNH LỀ CHO THANH SEARCH TÌM KIẾM MÃ CỔ PHIẾU
   ============================================================================ */
/* Thụt lề trái (né kính lúp) và lề phải (né dấu x) cho phần Placeholder và Text đã chọn */
.ticker-search-dropdown .Select-placeholder,
.ticker-search-dropdown .Select-value {
    padding-left: 34px !important;  /* Đẩy chữ lùi sang phải 34px để né kính lúp (kính lúp đang ở vị trí 10px) */
    padding-right: 40px !important; /* Đẩy chữ lùi sang trái 40px để né dấu X và mũi tên */
}

/* Thụt lề cho con trỏ chuột khi người dùng đang gõ phím */
.ticker-search-dropdown .Select-input {
    padding-left: 34px !important;
}

/* ============================================================================
   POLISH UI — NÂNG CẤP TOÀN BỘ (TCInvest Grade)
   ============================================================================ */

/* ── Row hover smooth (POLISH UI — giữ lại phần này) ── */
[data-theme="dark"] .ag-theme-alpine-dark .ag-row {
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid rgba(14, 37, 64, 0.8) !important;
}

/* Selected row glow */
[data-theme="dark"] .ag-theme-alpine-dark .ag-row-selected {
    background-color: rgba(30, 136, 229, 0.08) !important;
    border-left: 3px solid #1E88E5 !important;
}

/* Pagination */
[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-panel {
    background-color: #040d18 !important;
    border-top: 1px solid #0e2540 !important;
    color: #5a8ab0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    padding: 8px 16px !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-button {
    color: #7fa8cc !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-button:hover {
    color: #1E88E5 !important;
}

/* ── 2. FILTER CARD — Padding thoáng hơn, border radius lớn hơn ── */
[id*="selected-filter"] {
    border-radius: 8px !important;
    padding: 8px 10px 6px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

[id*="selected-filter"]:hover {
    border-color: rgba(30, 136, 229, 0.3) !important;
    box-shadow: 0 2px 12px rgba(30, 136, 229, 0.08) !important;
}

/* Filter card input số */
[id*="selected-filter"] input[type="number"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
}

/* ── 3. RANGE SLIDER — block trùng đã xóa, xem định nghĩa ở phần CUSTOM RANGE SLIDER phía trên ── */

/* ── 4. RESULT COUNT BADGE — Nổi bật hơn ── */
#result-count-number {
    font-family: 'JetBrains Mono', monospace !important;
    text-shadow: 0 0 20px rgba(30, 136, 229, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* ── 5. SIDEBAR TOOLBAR — Nhìn chuyên nghiệp hơn ── */
#filter-panel-top-bar {
    background: linear-gradient(180deg, #0a1628 0%, #060f1e 100%) !important;
    border-bottom: 1px solid #0e2540 !important;
}

/* ── 6. STRATEGY DROPDOWN — Style đẹp hơn ── */
#strategy-preset-dropdown .Select-control {
    background: linear-gradient(135deg, #091526, #0c1d30) !important;
    border: 1px solid #1d4d80 !important;
    border-radius: 8px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#strategy-preset-dropdown .Select-control:hover {
    border-color: #1E88E5 !important;
    box-shadow: 0 0 12px rgba(30, 136, 229, 0.15) !important;
}

/* ── 7. BADGE ĐẾM MÃ TRÊN FILTER CARD ── */
[id*="filter-count-badge"] {
    font-family: 'JetBrains Mono', monospace !important;
    transition: color 0.3s, background 0.3s !important;
}

/* ── 8. MODAL CHI TIẾT CỔ PHIẾU ── */
.modal-content {
    background: linear-gradient(135deg, #07111f 0%, #091526 100%) !important;
    border: 1px solid #163660 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8) !important;
}

.modal-header {
    background: #040d18 !important;
    border-bottom: 1px solid #0e2540 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 24px !important;
}

.modal-title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1E88E5 !important;
    letter-spacing: 1px !important;
}

/* ── 9. TABS TRONG MODAL ── */
.nav-tabs {
    border-bottom: 2px solid #0e2540 !important;
    background: #040d18 !important;
    padding: 0 16px !important;
}

.nav-tabs .nav-link {
    color: #5a8ab0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    transition: color 0.2s !important;
}

.nav-tabs .nav-link:hover {
    color: #1E88E5 !important;
    background: rgba(30, 136, 229, 0.05) !important;
}

.nav-tabs .nav-link.active {
    color: #1E88E5 !important;
    background: transparent !important;
    border-bottom: 2px solid #1E88E5 !important;
    margin-bottom: -2px !important;
}

/* ── 10. TOAST NOTIFICATION ── */
.toast {
    background: #091526 !important;
    border: 1px solid #1d4d80 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── 11. LOADING SPINNER ── */
._dash-loading {
    background: rgba(2, 8, 16, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── 12. SECTOR DROPDOWN ── */
#filter-all-industry .Select-control {
    min-height: 34px !important;
    background: #091526 !important;
    border: 1px solid #1d4d80 !important;
    border-radius: 8px !important;
}

/* ── 13. SAVED FILTER DROPDOWN ── */
#saved-filters-dropdown .Select-control {
    background: #091526 !important;
    border: 1px solid #1d4d80 !important;
    border-radius: 8px !important;
    min-height: 34px !important;
}

/* ── 14. SEARCH TICKER INPUT ── */
#search-ticker-input .Select-control {
    background: #091526 !important;
    border: 1px solid #1d4d80 !important;
    border-radius: 8px !important;
    min-height: 34px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#search-ticker-input .Select-control:hover {
    border-color: #1E88E5 !important;
    box-shadow: 0 0 12px rgba(30, 136, 229, 0.15) !important;
}

/* ── 15. RESULT COUNT TEXT ── */
#result-count {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: #5a8ab0 !important;
    letter-spacing: 0.5px !important;
}

/* ── 16. COLLAPSE HEADER ── */
.collapse-header {
    transition: background 0.15s, padding-left 0.15s !important;
}

.collapse-header:hover {
    background: #0d1d30 !important;
    padding-left: 16px !important;
}

/* ── 17. CRITERIA ITEM ── */
.criteria-item-hover {
    transition: background 0.15s, padding-left 0.15s !important;
}

.criteria-item-hover:hover {
    background: rgba(30, 136, 229, 0.06) !important;
    padding-left: 18px !important;
}

/* ── 18. THAM KHẢO BADGE ── */
span[style*="f59e0b"] {
    animation: pulse-badge 2s ease-in-out infinite !important;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── 19. GRADE CHIPS (A/B/C/D/F) ── */
.grade-chip {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
}

.grade-chip:hover {
    transform: scale(1.05) !important;
}

/* ── 20. SMOOTH SCROLLING CHO FILTER CONTAINER ── */
#selected-filters-container {
    scroll-behavior: smooth !important;
}

#selected-filters-container::-webkit-scrollbar { width: 3px !important; }
#selected-filters-container::-webkit-scrollbar-thumb {
    background: #1d4d80 !important;
    border-radius: 2px !important;
}

/* Fix màu chữ input trong Compare & Portfolio dropdown */
.modal input,
.modal .Select-input input,
.modal .VirtualizedSelectFocusedOption,
.modal input[type="text"] {
    color: #c9d1d9 !important;
}

/* Custom tooltip thay thế rc-slider tooltip — không bị ảnh hưởng bởi zoom */
.custom-range-slider .rc-slider-handle::after {
    content: attr(aria-valuenow);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1c2333;
    color: #1E88E5;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    pointer-events: none;
    display: none;
}
.custom-range-slider .rc-slider-handle:hover::after,
.custom-range-slider .rc-slider-handle:active::after {
    display: block;
}

/* Ẩn hoàn toàn tooltip gốc của rc-slider */
.custom-range-slider .rc-slider-tooltip {
    display: none !important;
}
/* ── Year filter dropdown in filter panel header ── */
.year-filter-dropdown .Select-control {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 4px !important;
    min-height: 26px !important;
    height: 26px !important;
}
.year-filter-dropdown .Select-value-label {
    color: #58a6ff !important;
    font-size: 11px !important;
    line-height: 24px !important;
}
.year-filter-dropdown .Select-arrow {
    border-top-color: #58a6ff !important;
}
.year-filter-dropdown .Select-menu-outer {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    font-size: 11px !important;
    z-index: 9999 !important;
}
.year-filter-dropdown .Select-option {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
    font-size: 11px !important;
}
.year-filter-dropdown .Select-option.is-focused {
    background-color: #21262d !important;
    color: #58a6ff !important;
}
.year-filter-dropdown .Select-option.is-selected {
    background-color: #1f3a5f !important;
    color: #58a6ff !important;
}
/* ── Shimmer animation cho nút BỘ LỌC ── */
@keyframes shimmer-slide {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(250%)  skewX(-15deg); }
}

.btn-filter-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-filter-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: translateX(-100%) skewX(-15deg);
    animation: shimmer-slide 0.7s ease-in-out;
    animation-play-state: paused;
    pointer-events: none;
}

.btn-filter-shimmer.play-shimmer::after {
    animation-play-state: running;
}

#screener-scroll-anchor {
    scroll-margin-top: 66px;  /* = chiều cao header + padding */
}

/* Custom Font hiện đại cho toàn hệ thống (nếu bạn chưa có) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* --- CYBER TOOLTIP STYLING --- */

/* Tùy chỉnh khối nội dung chính của tooltip */
.cyber-tooltip .tooltip-inner {
    background-color: #0b0f19 !important; /* Nền đen sâu (Dark Space) */
    border: 1px solid #00f0ff !important; /* Viền xanh Cyber Blue */
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3) !important; /* Hiệu ứng phát sáng Glow */
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-family: 'Inter', sans-serif !important; /* Font chữ hiện đại */
    text-align: left !important;
    max-width: 280px !important;
    opacity: 1 !important; /* Đảm bảo không bị mờ do mặc định của Bootstrap */
}

/* Tùy chỉnh màu của "mũi tên" trỏ lên nút để đồng bộ với viền */
.cyber-tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-bottom-color: #00f0ff !important;
}

/* Xóa viền đen mặc định của mũi tên ẩn phía sau */
.cyber-tooltip .tooltip-arrow::after {
    display: none !important;
}

/* --- SỬA LỖI POPUP / MODAL BỊ TO --- */

/* Đảm bảo nội dung bên trong Popup kế thừa font chữ 90% */
.modal-content {
    font-size: 1rem; 
    border-radius: 12px; /* Tùy chỉnh bo góc cho hiện đại hơn */
}

/* Thu nhỏ chiều rộng tối đa của các loại Popup theo tỷ lệ 90% */
/* Modal mặc định (trước đây 500px -> giờ ~450px) */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 450px !important;
    }
}

/* Modal lớn (lg) (trước đây 800px -> giờ ~720px) */
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 720px !important;
    }
}

/* Modal cực lớn (xl) (trước đây 1140px -> giờ ~1020px) */
@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1020px !important;
    }
}

/* Tinh chỉnh lại khoảng cách bên trong cho cân đối */
.modal-header, .modal-body, .modal-footer {
    padding: 1.25rem !important; 
}

/* Ép Modal/Popup luôn cố định theo toàn bộ cửa sổ trình duyệt (Viewport) */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important; /* Xóa bỏ mọi tàn dư transform */
}

/* Sửa lỗi lệch cho Tooltip và Popover của Popper.js */
.tooltip, .popover {
    /* Đảm bảo chúng không bị dính transform của thẻ cha */
    transform-origin: center !important; 
    margin: 0 !important;
}

/* Nếu bạn có dùng Box hướng dẫn (Tour guide / Joyride) */
.react-joyride__spotlight, .__floater {
    transform: none !important;
}
/* ═══════════════════════════════════════
   HERO — FINANCIAL EVENTS SLIDESHOW
═══════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   HERO — Slideshow lịch sử TTCK Việt Nam
   LƯU Ý: Trước đây các quy tắc dưới đây bị ghi đè bởi một khối
   <style> inject qua JS (hero_slideshow.js) dùng toàn !important
   để chỉnh chiều cao, typography, z-index... Đã hợp nhất về MỘT
   nguồn CSS duy nhất tại đây (giá trị cuối cùng đang hiển thị),
   xoá khối inject trùng lặp trong JS. Giữ nguyên toàn bộ hiệu ứng
   thị giác hiện có — đây là dọn dẹp mã nguồn, không đổi thiết kế.
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: min(100vh, 720px);
  min-height: 560px;
  overflow: hidden;
  background: #070a12;
}
.hero-slide {
  position: absolute; inset: 0;
  height: min(100vh, 720px);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 100px;
  pointer-events: none;
  z-index: 0;
  background-size: cover;
  background-position: center right;
  filter: grayscale(80%) brightness(0.38) blur(1px);
  /* Ảnh tĩnh, không hiệu ứng Ken Burns (đã tắt chủ động để tránh
     phân tán sự chú ý khỏi nội dung/số liệu) */
  transform: scale(1.05);
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 75px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%);
}
.hero-content {
  position: relative;
  z-index: 10;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0 56px 188px;
  max-width: 720px;
  pointer-events: none; /* để không chặn click nút điều hướng phía dưới */
}
.hero-content button, .cyber-btn { pointer-events: auto; }

.cyber-cta-container {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s 0.5s ease, transform 0.6s 0.5s ease;
}
.hero-slide.active .cyber-cta-container { opacity: 1; transform: translateY(0); }
.cyber-btn {
  display: inline-block;
  padding: 12px 30px;
  background: rgba(30, 136, 229, 0.05);
  border: none;
  color: #1E88E5;
  font-family: var(--font-data);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  position: relative;
  cursor: pointer;
  clip-path: polygon(0% 0%, 90% 0%, 100% 30%, 100% 100%, 10% 100%, 0% 70%);
  transition: all 0.3s ease;
}
.cyber-btn:hover {
  background: #1E88E5; color: #ffffff;
  box-shadow: 0 0 20px rgba(30, 136, 229, 0.6);
  transform: scale(1.05);
}
.cyber-btn::before { content: ">>"; margin-right: 8px; font-size: 10px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-data);
  font-size: 10.5px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px; padding: 4px 11px;
  margin-bottom: 18px; width: fit-content; border: 1px solid;
}
.badge-crash    { color:#ff3d57; border-color:rgba(255,61,87,0.5);  background:rgba(255,61,87,0.12);  }
.badge-collapse { color:#ff8c42; border-color:rgba(255,140,66,0.5); background:rgba(255,140,66,0.12); }
.badge-panic    { color:#ffb703; border-color:rgba(255,183,3,0.5);  background:rgba(255,183,3,0.12);  }
.badge-mania    { color:#b388ff; border-color:rgba(179,136,255,0.5);background:rgba(179,136,255,0.12);}
.badge-boom     { color:#00e676; border-color:rgba(0,230,118,0.5);  background:rgba(0,230,118,0.12);  }
.badge-policy   { color:#1E88E5; border-color:rgba(30, 136, 229,0.5);  background:rgba(30, 136, 229,0.12);  }
.hero-year {
  font-family: var(--font-display);
  font-size: clamp(88px, 13vw, 168px);
  font-weight: 800; line-height: 0.85;
  letter-spacing: -2px; color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 0 0 120px rgba(255,255,255,0.06);
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s 0.08s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s 0.08s cubic-bezier(0.22,1,0.36,1);
}
.hero-slide.active .hero-year { opacity: 1; transform: translateY(0); }
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 700; color: #e8f4ff; line-height: 1.18;
  letter-spacing: -0.2px;
  margin-bottom: 16px; max-width: 580px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s 0.22s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s 0.22s cubic-bezier(0.22,1,0.36,1);
}
.hero-slide.active .hero-tagline { opacity: 1; transform: translateY(0); }
.hero-tagline .hl        { color: #ff3d57; }
.hero-tagline .hl-green  { color: #00e676; }
.hero-tagline .hl-blue   { color: #1E88E5; }
.hero-tagline .hl-amber  { color: #ffb703; }
.hero-tagline .hl-purple { color: #b388ff; }
.hero-desc {
  font-family: var(--font-ui);
  font-size: 14.5px; font-weight: 400;
  color: rgba(200,220,240,0.62);
  line-height: 1.75; max-width: 500px; margin-bottom: 30px;
  letter-spacing: 0.1px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s 0.36s ease, transform 0.6s 0.36s ease;
}
.hero-slide.active .hero-desc { opacity: 1; transform: translateY(0); }
.hero-stats {
  display: flex; gap: 32px; align-items: flex-end;
  opacity: 0; transition: opacity 0.5s 0.5s ease;
}
.hero-slide.active .hero-stats { opacity: 1; }
.hero-stat-group { display: flex; flex-direction: column; gap: 3px; }
.stat-label {
  font-family: var(--font-data);
  font-size: 9px; color: rgba(200,220,240,0.32);
  text-transform: uppercase; letter-spacing: 1.8px;
}
.stat-value { font-family: var(--font-data); font-size: 17px; font-weight: 500; letter-spacing: -0.5px; }
.stat-neg   { color: #ff3d57; }
.stat-pos   { color: #00e676; }
.stat-neut  { color: #1E88E5; }
.stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); align-self: flex-end; }
.hero-controls {
  position: relative; z-index: 100;
  position: absolute; bottom: 88px; left: 56px;
  display: flex; align-items: center; gap: 14px;
}
.hero-btn {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e8f4ff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.hero-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }
.hero-counter { font-family: var(--font-data); font-size: 11px; color: rgba(200,220,240,0.28); letter-spacing: 1px; }
.hero-keys    { font-family: var(--font-data); font-size: 10px; color: rgba(200,220,240,0.18); }
.hero-legend {
  position: relative; z-index: 100;
  position: absolute; bottom: 88px; right: 56px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end;
}
.legend-dot-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-data);
  font-size: 9.5px; color: rgba(255,255,255,0.3);
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hero-eras {
  position: absolute; bottom: 40px; left: 0; right: 0; z-index: 100;
  display: flex; border-top: 1px solid rgba(255,255,255,0.06);
}
.era-tab {
  position: relative; z-index: 100;
  flex: 1; text-align: center;
  font-family: var(--font-data);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 10px 4px; cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
}
.era-tab:last-child { border-right: none; }
.era-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.03); }
.era-tab.active { font-weight: 800; border-bottom: 2px solid currentColor; }
.era-doi-moi     { color: #3a6eb3; }
.era-khung-hoang { color: #b33a3a; }
.era-ttck        { color: #8b3ab3; }
.era-tai-co-cau  { color: #b37a3a; }
.era-covid       { color: #3ab36e; }
.hero-timeline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px; z-index: 100;
  background: rgba(5,8,18,0.85); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tl-inner { position: relative; width: 100%; height: 100%; }
.tl-tick-label {
  position: absolute;
  font-family: var(--font-data);
  font-size: 8.5px; color: rgba(200,220,240,0.18);
  transform: translateX(-50%); top: 4px;
}
.tl-event-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(5,8,18,0.9);
  top: 50%; transform: translate(-50%,-50%);
  cursor: pointer; transition: transform 0.2s; z-index: 2;
}
.tl-event-dot:hover  { transform: translate(-50%,-50%) scale(1.5); }
.tl-event-dot.active { transform: translate(-50%,-50%) scale(1.6); box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
.hero-progress-bar {
  position: absolute; top: 0; left: 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, #0057D9, #1E88E5);
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(30, 136, 229,0.5);
}
.hero-credit {
  position: relative; z-index: 100;
  position: absolute; bottom: 148px; right: 20px;
  font-family: var(--font-data);
  font-size: 9px; color: rgba(200,220,240,0.16);
}
.hero-enter {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #0057D9, #1E88E5);
  color: #ffffff; font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: 0.8px;
  border: none; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 24px rgba(30, 136, 229,0.35);
  transition: all 0.25s; text-decoration: none;
}
.hero-enter:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(30, 136, 229,0.55); }
/* ═══════════════════════════════════════════════════════════
   IPS ONBOARDING — Giao diện liền mạch (onboarding.html style)
   Thêm vào cuối style.css
═══════════════════════════════════════════════════════════ */

/* ── .page wrapper ── */
.page {
  position: relative; z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  font-family: 'DM Sans', 'Inter', sans-serif;
}

/* ── Logo header ── */
.logo-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 14px;
}
.logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #0057D9, #1E88E5);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 0 24px rgba(30, 136, 229,0.3);
}
.logo-name {
  font-family: 'Syne', 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: -0.3px;
  background: linear-gradient(90deg, #e8f4ff 0%, #1E88E5 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-tagline {
  text-align: center;
  font-size: 13px; color: #3d6a8a; line-height: 1.7;
  max-width: 420px; margin: 0 auto 48px;
  font-family: 'DM Sans', sans-serif;
}

/* ── Progress Rail ── */
.progress-rail {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 48px;
}
.rail-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid #1a3a60;
  background: #070e1c;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px; font-weight: 600; color: #3d6a8a;
  transition: all 0.3s;
}
.rail-dot.active {
  background: linear-gradient(135deg, #0057D9, #1E88E5);
  border-color: transparent; color: #001a20;
  box-shadow: 0 0 16px rgba(30, 136, 229,0.4);
}
.rail-dot.done {
  background: rgba(30, 136, 229,0.12);
  border-color: #1E88E5; color: #1E88E5;
}
.rail-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: #1d4060;
  letter-spacing: 0.8px; text-transform: uppercase;
  white-space: nowrap; transition: color 0.3s;
}
.rail-label.active { color: #1E88E5; }
.rail-label.done   { color: #3d6a8a; }
.rail-line {
  flex: 1; height: 1px; background: #1a3a60;
  margin-bottom: 18px; transition: background 0.3s;
  min-width: 24px;
}
.rail-line.done { background: #1E88E5; }

/* ── Section (step container) ── */
.section {
  padding: 0 0 8px;
  margin-bottom: 0;
}

/* ── Divider ── */
.divider {
  border: none; border-top: 1px solid #1a3a60;
  margin: 36px 0; opacity: 0.5;
}

/* ── Step eyebrow ── */
.step-eyebrow {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.step-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: #1E88E5;
  letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap;
}
.step-line { flex: 1; height: 1px; background: #1a3a60; }

/* ── Step title ── */
.step-title {
  font-family: 'Syne', 'Montserrat', sans-serif !important;
  font-size: clamp(22px, 3.5vw, 32px) !important;
  font-weight: 700 !important;
  color: #e8f4ff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 12px !important;
}
.step-title em {
  font-style: normal;
  background: linear-gradient(90deg, #1E88E5, #0057D9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Step desc ── */
.step-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; color: #3d6a8a;
  line-height: 1.7; margin-bottom: 28px;
}

/* ── Section sub-label ── */
.section-sub-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important; font-weight: 600 !important;
  color: #3d6a8a !important;
  text-transform: uppercase !important; letter-spacing: 1px !important;
  margin-bottom: 12px !important;
}

/* ── Choice grid ── */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 8px;
}
.choice-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── Choice card ── */
.choice-card {
  position: relative; overflow: hidden;
  padding: 22px 16px 18px;
  background: #0a1628;
  border: 1.5px solid #1a3a60;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
}
.choice-card:hover {
  border-color: rgba(30, 136, 229,0.4);
  background: #0d1d36;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,144,255,0.15);
}
.choice-card.selected {
  border-color: #1E88E5;
  background: rgba(30, 136, 229,0.06);
  box-shadow: 0 0 0 1px #1E88E5, 0 8px 32px rgba(30, 136, 229,0.2);
}
.choice-card .check {
  position: absolute; top: 10px; right: 12px;
  font-size: 12px; color: #1E88E5;
  opacity: 0; transition: opacity 0.2s;
  font-family: 'DM Mono', monospace;
}
.choice-card.selected .check { opacity: 1; }
.choice-icon {
  font-size: 28px; line-height: 1;
  display: block; margin-bottom: 2px;
}
.choice-label {
  font-family: 'Syne', sans-serif;
  font-size: 13.5px; font-weight: 700; color: #e8f4ff;
  line-height: 1.2;
}
.choice-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px; color: #3d6a8a; line-height: 1.4;
}

/* Ripple */
.choice-card .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(30, 136, 229,0.15);
  transform: scale(0); animation: rippleAnim 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

/* ── Step error ── */
.step-error {
  color: #ff3d57; font-size: 12px;
  font-family: 'DM Mono', monospace;
  min-height: 18px; margin-top: 8px;
}

/* ── Slider row ── */
.slider-row {
  margin-bottom: 24px;
}
.slider-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; color: #7aafcc;
}
.slider-val {
  font-family: 'DM Mono', monospace;
  font-size: 13px; color: #1E88E5; font-weight: 600;
}

/* Dash slider override for onboarding */
.ips-slider .rc-slider-track { background: #1E88E5 !important; }
.ips-slider .rc-slider-handle {
  border-color: #1E88E5 !important;
  background: #1E88E5 !important;
  box-shadow: 0 0 0 2px rgba(30, 136, 229,0.3) !important;
}
.ips-slider .rc-slider-rail { background: #1a3a60 !important; }

/* ── Check list ── */
.check-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 24px;
}
.check-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #0a1628; border: 1px solid #1a3a60;
  border-radius: 10px; cursor: pointer;
  transition: all 0.2s;
}
.check-item:hover { border-color: rgba(30, 136, 229,0.3); background: #0d1d36; }
.check-item.checked { border-color: rgba(30, 136, 229,0.35); background: rgba(30, 136, 229,0.04); }
.check-box {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid #1a3a60;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #1E88E5;
  flex-shrink: 0; transition: all 0.2s;
}
.check-box.checked { background: rgba(30, 136, 229,0.12); border-color: #1E88E5; }
.check-item-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; color: #7aafcc; line-height: 1.4;
}

/* ── Summary card ── */
.summary-card {
  background: #0a1628;
  border: 1px solid #1a3a60;
  border-radius: 16px; overflow: hidden;
  margin-top: 8px;
}
.summary-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #1a3a60;
  background: #070e1c;
}
.summary-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: #3d6a8a;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.risk-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
}
.risk-conservative { color: #00e676; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); }
.risk-moderate     { color: #1E88E5; background: rgba(30, 136, 229,0.1); border: 1px solid rgba(30, 136, 229,0.3); }
.risk-aggressive   { color: #ff3d57; background: rgba(255,61,87,0.1);  border: 1px solid rgba(255,61,87,0.3);  }

.summary-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; padding: 4px 0;
}
.summary-cell {
  padding: 14px 22px; border-bottom: 1px solid #0d1d36;
}
.sum-label {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px; color: #1d4060;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px;
}
.sum-value {
  font-family: 'Syne', sans-serif;
  font-size: 15px; font-weight: 700; color: #7aafcc;
}
.sum-value.hi { color: #e8f4ff; }

.summary-filter-list { padding: 18px 22px; }
.sum-filter-title {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px; color: #1d4060;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
}
.filter-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: #1E88E5;
  background: rgba(30, 136, 229,0.08);
  border: 1px solid rgba(30, 136, 229,0.25);
  border-radius: 5px; padding: 4px 10px;
  animation: tagFadeIn 0.3s ease both;
}
@keyframes tagFadeIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }

/* ── Disclaimer ── */
.disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,183,3,0.04);
  border: 1px solid rgba(255,183,3,0.2);
  border-radius: 10px; margin-top: 16px;
}
.disclaimer-icon { font-size: 16px; flex-shrink: 0; }
.disclaimer p {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: #3d6a8a; line-height: 1.6;
  margin: 0;
}

/* ── Apply status ── */
.apply-status {
  font-family: 'DM Mono', monospace;
  font-size: 12px; color: #00e676;
  min-height: 20px; margin-top: 12px;
}

/* ── Nav bar ── */
.nav-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 8px;
  background: linear-gradient(to top, #040810 60%, transparent);
  z-index: 10;
  margin-top: 48px;
}
.step-counter-pill {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: #1d4060;
  letter-spacing: 1px;
}
.btn {
  font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 700;
  border: none; border-radius: 10px;
  padding: 13px 28px; cursor: pointer;
  transition: all 0.22s;
}
.btn-ghost {
  background: transparent;
  border: 1px solid #1a3a60;
  color: #3d6a8a;
}
.btn-ghost:hover { border-color: #2a5a90; color: #7aafcc; }
.btn-primary {
  background: linear-gradient(135deg, #0057D9, #1E88E5);
  color: #001a20;
  box-shadow: 0 4px 20px rgba(30, 136, 229,0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(30, 136, 229,0.45); }
.btn-success {
  background: linear-gradient(135deg, #00b84c, #00e676);
  color: #001a10;
  box-shadow: 0 4px 20px rgba(0,230,118,0.3);
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,230,118,0.45); }

/* ── Footer note ── */
.footer-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; color: #1d4060;
  text-align: center; margin-top: 24px;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .page { padding: 40px 16px 80px; }
  .step-title { font-size: 22px !important; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .choice-grid.cols-3 { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .nav-bar { padding: 20px 0 8px; }
  .btn { padding: 11px 20px; }
}
.ips-choice-card.selected {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ============================================================================
   FIX Z-INDEX: ÉP TOÀN BỘ POPUP/MODAL HIỆN LÊN TRÊN TOPBAR (Z-INDEX > 9999)
   ============================================================================ */

/* 1. Lớp phủ đen (Backdrop) của Modal và Offcanvas */
.modal-backdrop, 
.offcanvas-backdrop {
    z-index: 10000 !important; 
}

/* 2. Khung cửa sổ Modal và Offcanvas (nơi chứa nội dung và nút X) */
.modal, 
.offcanvas {
    z-index: 10005 !important; 
}

/* 3. Các thông báo nhỏ (Toast) góc màn hình */
.toast-container,
.toast-notification,
.toast {
    z-index: 10010 !important;
}

/* 4. Các hướng dẫn khi hover (Tooltip, Popover) */
.tooltip, 
.popover, 
.cyber-tooltip {
    z-index: 10015 !important;
}

/* ============================================================================
   GIAO DIỆN MÃ NỔI BẬT (TRENDING CHIPS)
   ============================================================================ */
.trending-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #8b949e;
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trending-chip:hover {
    color: #1E88E5;
    border-color: #1E88E5;
    background-color: rgba(30, 136, 229, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2);
}

/* ============================================================================
   TÙY CHỈNH DÒNG PHÂN CÁCH TRONG DROPDOWN LỊCH SỬ
   ============================================================================ */
.Select-option.is-disabled {
    text-align: center !important;
    color: #484f58 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    padding: 8px 0 !important;
    background-color: #091526 !important;
    cursor: default !important;
}
/* ============================================================================
   OVERRIDE: ÉP TOÀN HỆ THỐNG VỀ TONE XANH DƯƠNG UEL (FSS THEME)
   Đây là block có quyền quyết định CUỐI CÙNG cho --accent toàn app (dùng
   !important + áp cho cả light/dark). Trước đây --accent-deep vẫn còn sót
   lại 1 mã xanh lá (#007a3d) không nằm trong danh sách hex đã quét thay
   thế hàng loạt — sửa nốt để nhất quán hoàn toàn với bảng màu UEL.
   ============================================================================ */

:root, [data-theme="light"], [data-theme="dark"] {
    --accent: #0057D9 !important;
    --accent-deep: #003B8E !important;
    --accent-dim: rgba(0, 87, 217, 0.12) !important;
    --accent-glow: rgba(0, 87, 217, 0.25) !important;
    --border-bright: #1E88E5 !important;
    --glow-accent: 0 0 20px rgba(0, 87, 217, 0.3) !important;
}

/* Đổi màu xanh dương trong các gradient và hiệu ứng phát sáng */
.btn-apply-ssi {
    background: linear-gradient(135deg, #1E88E5 0%, #0057D9 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 87, 217, 0.3) !important;
    color: #ffffff !important;
}

.btn-apply-ssi:hover {
    box-shadow: 0 8px 28px rgba(0, 87, 217, 0.5) !important;
}

.custom-range-slider .rc-slider-handle,
.custom-range-slider .rc-slider-track {
    background: #0057D9 !important;
    border-color: #0057D9 !important;
    box-shadow: 0 0 8px rgba(0, 87, 217, 0.5) !important;
}

/* Ép màu AG Grid */
[data-theme="dark"] .ag-theme-alpine-dark {
    --ag-selected-row-background-color: rgba(0, 87, 217, 0.08) !important;
    --ag-range-selection-border-color: #0057D9 !important;
    --ag-row-hover-color: rgba(0, 87, 217, 0.05) !important;
}


[data-theme="dark"] .ag-theme-alpine-dark .ag-row-selected {
    box-shadow: inset 3px 0 0 #0057D9 !important;
    border-left: 3px solid #0057D9 !important;
}

[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell:hover,
[data-theme="dark"] .ag-theme-alpine-dark .ag-sort-indicator-icon {
    color: #1E88E5 !important;
}

/* Ép màu các dropdown và tooltip bị dính blue */
.custom-dropdown .Select-value,
.ssi-dropdown-custom .Select-value {
    background-color: rgba(0, 87, 217, 0.1) !important;
    border: 1px solid rgba(0, 87, 217, 0.3) !important;
}

.custom-dropdown .Select-option:hover,
.ssi-dropdown-custom .Select-option:hover {
    background-color: rgba(0, 87, 217, 0.08) !important;
}

.cyber-tooltip .tooltip-inner {
    border: 1px solid #0057D9 !important;
    box-shadow: 0 0 12px rgba(0, 87, 217, 0.3) !important;
}

.cyber-tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-bottom-color: #0057D9 !important;
}

/* Các tag, badge và text hiển thị phụ */
#result-count-number {
    text-shadow: 0 0 20px rgba(0, 87, 217, 0.5) !important;
}

.trending-chip:hover {
    color: #1E88E5 !important;
    border-color: #1E88E5 !important;
    background-color: rgba(0, 87, 217, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.2) !important;
}

/* Ép màu onboarding (Hero banner/IPS) */
.ips-choice-card.selected {
    border-color: #0057D9 !important;
    background-color: rgba(0, 87, 217, 0.1) !important;
}

#ips-onboarding-wrapper::before {
    background: radial-gradient(ellipse 80% 60% at 10% 50%, rgba(0, 87, 217,0.13) 0%, transparent 60%) !important;
}
/* (Đã bỏ #fss-hero-bg khỏi rule trên — nền hero giờ dùng gradient terminal
   phosphor-green định nghĩa trong header.css, không còn ép gradient xanh
   dương cũ nữa, vì nó đang đè !important lên toàn bộ thiết kế mới.) */
/* ============================================================
   THEME SÁNG (LIGHT MODE) CHO HEADER & HERO BANNER
   ============================================================ */

/* Đổi nền thanh điều hướng (Navbar) sang trắng -> đã sửa thành trong suốt */
[data-theme="light"] #fss-sticky-nav {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Chữ Logo Vietcap chuyển sang màu Đen */
[data-theme="light"] .fss-logo-text {
    color: #0f172a !important; 
}

/* Các link menu chuyển sang màu tối */
[data-theme="light"] .vietcap-nav-link {
    color: #334155 !important;
}
[data-theme="light"] .vietcap-nav-link:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Nút Đăng nhập / User */
[data-theme="light"] .vietcap-nav-login-btn {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] #navbar-user-name {
    color: #0f172a !important;
}

/* Nền khu vực Hero Banner ở light mode — nay dùng gradient terminal nhạt
   định nghĩa trong header.css (#fss-hero-bg), không ép flat gray nữa */
[data-theme="light"] #fss-hero {
    background: #f2f7f4;
}

/* Tagline "FIN SMART SCREENER" và Eyebrow — giữ đúng phong cách terminal
   (mono, phosphor-green) ở CẢ 2 theme. Trước đây có 1 block patch riêng ép
   font Montserrat + màu trắng/xanh dương !important đè lên toàn bộ thiết kế
   terminal mới — đã xoá khối đó, giữ lại đúng 1 định nghĩa trong header.css. */
[data-theme="light"] .fss-headline-sub {
    color: var(--fss-term-green, #00a86b);
}
[data-theme="light"] .fss-eyebrow {
    color: var(--fss-term-green, #00a86b);
}
/* ============================================================================
   loại bỏ màu blue, chuyển sang xanh lá vietcap
   ============================================================================ */

/* 1. đổi màu nút chọn chiến lược đầu tư */
#strategy-accordion-trigger {
    background: linear-gradient(135deg, #1E88E5 0%, #0057D9 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.2) !important;
}

#strategy-display-label, 
#strategy-chevron {
    color: #ffffff !important; /* chữ màu trắng cho nổi trên nền xanh */
}

/* 2. đổi màu đường gạch chân của tab đang chọn (chiến lược) */
.toolbar-tab-active, 
.toolbar-tab.active {
    border-bottom: 2px solid #0057D9 !important;
    color: #ffffff !important;
}

/* ============================================================================
   đồng bộ màu sắc sáng/tối cho thanh công cụ (toolbar)
   ============================================================================ */

/* nền thanh công cụ khi ở chế độ sáng */
[data-theme="light"] #screener-scroll-anchor + div {
    background-color: #ffffff !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

/* màu chữ các tab: xám khi chưa chọn, đen khi được chọn */
[data-theme="light"] .toolbar-tab {
    color: #64748b !important;
}
[data-theme="light"] .toolbar-tab-active,
[data-theme="light"] .toolbar-tab.active {
    color: #0f172a !important; 
}
[data-theme="light"] .toolbar-tab-icon {
    color: inherit !important;
}

/* màu chữ bên trong các khu vực điều khiển */
[data-theme="light"] .toolbar-panel {
    color: #0f172a !important;
}

/* tinh chỉnh lại khối nhập vốn (nav) */
[data-theme="light"] #nav-wrapper {
    background-color: #f8f9fa !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] #nav-wrapper span {
    color: #334155 !important;
}
[data-theme="light"] #nav-input {
    background-color: transparent !important;
    color: #0f172a !important; /* chữ đen trên nền sáng */
}
[data-theme="light"] #nav-input::placeholder {
    color: #94a3b8 !important;
}

/* tinh chỉnh khối t+2.5 */
[data-theme="light"] #tplus-wrapper {
    background-color: #f8f9fa !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] #tplus-toggle-track {
    background-color: #cbd5e1 !important;
    border-color: #94a3b8 !important;
}

/* đổi màu nền menu thả xuống của chiến lược khi ở chế độ sáng */
[data-theme="light"] #strategy-accordion-popover .popover-body > div,
[data-theme="light"] #strategy-accordion-popover {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .strategy-group-header span {
    color: #0057D9 !important; /* tiêu đề nhóm chiến lược */
}
[data-theme="light"] .strategy-item-row {
    color: #334155 !important;
}
[data-theme="light"] .strategy-item-row:hover {
    background-color: rgba(0, 87, 217, 0.05) !important;
    color: #0057D9 !important;
}
/* ============================================================================
   1. CHUYỂN ĐỔI MỌI SẮC XANH DƯƠNG (BLUE/CYAN) SANG XANH LÁ (GREEN)
   ============================================================================ */

/* Đổi màu các tag Hot (Trending chips) */
.trending-chip:hover {
    color: #1E88E5 !important;
    border-color: #1E88E5 !important;
    background-color: rgba(30, 136, 229, 0.1) !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.2) !important;
}

/* Đổi màu Nút thả xuống (Dropdown Năm) */
.year-filter-dropdown .Select-value-label { color: #0057D9 !important; }
.year-filter-dropdown .Select-arrow { border-top-color: #0057D9 !important; }
.year-filter-dropdown .Select-option.is-focused { color: #0057D9 !important; }
.year-filter-dropdown .Select-option.is-selected { 
    background-color: rgba(0, 87, 217,0.1) !important; 
    color: #0057D9 !important; 
}

/* Đổi viền Thanh tìm kiếm mã khi click vào */
#search-ticker-input .Select-control:hover, 
#search-ticker-input.is-focused .Select-control {
    border-color: #0057D9 !important;
    box-shadow: 0 0 12px rgba(0, 87, 217, 0.15) !important;
}

/* ÉP ĐỔI MÀU CÁC ICON BỊ FIX CỨNG MÀU BLUE TRONG PYTHON MÀ KHÔNG CẦN SỬA PYTHON */
[style*="color: #58a6ff"], 
[style*="color: rgb(88, 166, 255)"] {
    color: #0057D9 !important;
}
[style*="color: #1E88E5"] {
    color: #1E88E5 !important;
}

/* ============================================================================
   2. ĐỒNG BỘ NỀN SÁNG (LIGHT MODE) CHO PANEL TÌM KIẾM & BỘ LỌC
   ============================================================================ */

/* Nền thanh công cụ (Tìm mã, Phạm vi...) */
[data-theme="light"] #toolbar-panel-search,
[data-theme="light"] #toolbar-panel-scope,
[data-theme="light"] #toolbar-panel-personal {
    background-color: #ffffff !important;
}

/* --- Khối Search Input --- */
[data-theme="light"] .ticker-search-dropdown .Select-control {
    background-color: #f8f9fa !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .ticker-search-dropdown input,
[data-theme="light"] .ticker-search-dropdown .Select-value-label {
    color: #0f172a !important; /* Chữ đen */
}
[data-theme="light"] .ticker-search-dropdown .Select-placeholder {
    color: #64748b !important;
}
[data-theme="light"] .ticker-search-dropdown .Select-menu-outer {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .ticker-search-dropdown .Select-option {
    background-color: #ffffff !important;
    color: #334155 !important;
}
[data-theme="light"] .ticker-search-dropdown .Select-option:hover {
    background-color: rgba(0, 87, 217, 0.08) !important;
    color: #0057D9 !important;
}

/* --- Cụm Mã Hot (Trending Chips) --- */
[data-theme="light"] .trending-chip {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
[data-theme="light"] .trending-chip:hover {
    background-color: rgba(0, 87, 217, 0.1) !important;
    border-color: #0057D9 !important;
    color: #0057D9 !important;
}

/* --- Bảng Điều Khiển Bộ Lọc (Wizard Panel) --- */
/* Nền bao ngoài bộ lọc và Index */
[data-theme="light"] #filter-offcanvas > div {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
/* Xóa nền đen của 3 cột */
[data-theme="light"] #filter-offcanvas > div > div:first-child,
[data-theme="light"] #filter-offcanvas .wizard-group-item,
[data-theme="light"] #wizard-col2-content,
[data-theme="light"] #selected-filters-container {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Tiêu đề các cột (Chọn điều kiện lọc, Chọn tiêu chí...) */
[data-theme="light"] #filter-offcanvas > div > div:first-child > div > div:first-child,
[data-theme="light"] #filter-offcanvas > div > div:first-child > div:nth-child(2) > div:first-child,
[data-theme="light"] #filter-offcanvas > div > div:first-child > div:nth-child(3) > div:first-child {
    background-color: #f8f9fa !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] #filter-offcanvas span {
    color: #334155 !important;
}

/* Các dòng tiêu chí hover */
[data-theme="light"] .wizard-group-item:hover,
[data-theme="light"] .criteria-item-hover:hover {
    background-color: #f8f9fa !important;
}

/* Nút Chọn Năm trong bộ lọc */
[data-theme="light"] .year-filter-dropdown .Select-control,
[data-theme="light"] .year-filter-dropdown .Select-menu-outer,
[data-theme="light"] .year-filter-dropdown .Select-option {
    background-color: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* --- Các Thẻ Tiêu Chí (Filter Cards) --- */
[data-theme="light"] [id*="selected-filter"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] [id*="selected-filter"] input {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* --- Khối Chỉ Số Thị Trường (VNINDEX Panel) --- */
[data-theme="light"] #filter-offcanvas > div > div:nth-child(2) {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] #filter-offcanvas > div > div:nth-child(2) > div:first-child {
    background-color: #f8f9fa !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] #idx-stats-panel {
    background-color: #ffffff !important;
    border-right-color: #e2e8f0 !important;
}
[data-theme="light"] #idx-stats-panel > div {
    border-bottom-color: #f1f5f9 !important;
}
/* ============================================================================
   đồng bộ nền sáng cho các thanh chọn (dropdown) bị kẹt màu đen
   ============================================================================ */

/* 1. các thanh tìm kiếm và chọn phạm vi, cá nhân */
[data-theme="light"] #search-ticker-input .Select-control,
[data-theme="light"] #filter-exchange .Select-control,
[data-theme="light"] #filter-all-industry .Select-control,
[data-theme="light"] #filter-sub-industry .Select-control,
[data-theme="light"] #filter-index .Select-control,
[data-theme="light"] #saved-filters-dropdown .Select-control {
    background-color: #f8f9fa !important;
    border-color: #cbd5e1 !important;
}

/* sửa màu chữ bên trong thanh chọn để dễ đọc trên nền sáng */
[data-theme="light"] .Select-value-label,
[data-theme="light"] .Select-input input,
[data-theme="light"] #search-ticker-input input {
    color: #0f172a !important; 
}

/* màu chữ phần gợi ý (placeholder) */
[data-theme="light"] .Select-placeholder {
    color: #64748b !important; 
}

/* mũi tên trỏ xuống */
[data-theme="light"] .Select-arrow {
    border-top-color: #64748b !important;
}

/* 2. các thẻ tag được chọn (như 'tất cả sàn', 'tất cả ngành') */
[data-theme="light"] .Select-value {
    background-color: rgba(0, 87, 217, 0.1) !important;
    border: 1px solid rgba(0, 87, 217, 0.3) !important;
    color: #0057D9 !important;
}

/* dấu x để xóa tag */
[data-theme="light"] .Select-value-icon {
    border-right: 1px solid rgba(0, 87, 217, 0.3) !important;
    color: #0057D9 !important;
}

[data-theme="light"] .Select-value-icon:hover {
    background-color: rgba(0, 87, 217, 0.2) !important;
    color: #003B8E !important;
}

/* 3. menu xổ xuống của toàn bộ dropdown */
[data-theme="light"] .Select-menu-outer {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .Select-option {
    background-color: #ffffff !important;
    color: #334155 !important;
}

[data-theme="light"] .Select-option:hover,
[data-theme="light"] .Select-option.is-focused {
    background-color: rgba(0, 87, 217, 0.08) !important;
    color: #0057D9 !important;
}

/* 4. fix riêng cho khung chọn "toàn bộ năm" */
[data-theme="light"] .year-filter-dropdown .Select-control {
    background-color: #f8f9fa !important;
    border-color: #cbd5e1 !important;
}

/* sửa lỗi chữ trong ô tìm mã bị mờ */
[data-theme="light"] .ticker-search-dropdown input {
    color: #0f172a !important;
    caret-color: #0057D9 !important;
}
/* ============================================================================
   NÂNG CẤP TAB THANH CÔNG CỤ (TÌM MÃ, CHIẾN LƯỢC, PHẠM VI...)
   => ĐỔI THÀNH KHỐI XANH LÁ KHI ĐƯỢC CHỌN, BỎ TOÀN BỘ MÀU BLUE
   ============================================================================ */

/* 1. Xóa nền đen/trắng mặc định, biến tab đang chọn thành khối màu xanh lá Vietcap */
.toolbar-tab.toolbar-tab-active,
.toolbar-tab.active,
[data-theme="light"] .toolbar-tab.toolbar-tab-active,
[data-theme="light"] .toolbar-tab.active {
    background-color: #0057D9 !important; 
    border-bottom: none !important; /* Xóa đường gạch chân mỏng manh */
    color: #ffffff !important; /* Chữ màu trắng */
    border-radius: 6px !important; /* Bo góc cho giống một nút bấm hiện đại */
    margin: 4px !important; /* Tạo lề để khối xanh không chạm sát viền thanh công cụ */
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.2) !important;
}

/* 2. Ép tất cả ICON bên trong tab ĐANG CHỌN thành màu TRẮNG (Áp dụng cho cả Sáng/Tối) */
.toolbar-tab.toolbar-tab-active i,
.toolbar-tab.active i,
[data-theme="light"] .toolbar-tab.toolbar-tab-active i,
[data-theme="light"] .toolbar-tab.active i {
    color: #ffffff !important; 
}

/* 3. TẨY MÀU XANH DƯƠNG (BLUE) của các icon khi CHƯA được chọn */
.toolbar-tab i,
[data-theme="light"] .toolbar-tab i {
    color: #94a3b8 !important; /* Chuyển icon về màu xám trung tính cho đồng bộ */
}

/* 4. Hiệu ứng khi rê chuột (hover) vào tab chưa chọn -> Hiện viền/chữ xanh lá thay vì xanh dương */
.toolbar-tab:hover:not(.toolbar-tab-active),
[data-theme="light"] .toolbar-tab:hover:not(.toolbar-tab-active) {
    background-color: rgba(0, 87, 217, 0.05) !important;
    color: #0057D9 !important;
}
.toolbar-tab:hover:not(.toolbar-tab-active) i,
[data-theme="light"] .toolbar-tab:hover:not(.toolbar-tab-active) i {
    color: #0057D9 !important;
}
/* ============================================================================
   ĐỒNG BỘ NỀN SÁNG (LIGHT MODE) - BỔ SUNG FIX CÁC KHỐI BỊ KẸT MÀU ĐEN
   ============================================================================ */

/* 1. GHI ĐÈ NỀN ĐEN CỦA 3 THANH TIÊU ĐỀ (Chọn điều kiện, Chọn tiêu chí, Kéo chọn) */
[data-theme="light"] #filter-offcanvas > div > div:first-child > div > div:first-child {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] #filter-offcanvas > div > div:first-child > div > div:first-child span {
    color: #334155 !important; /* Đổi chữ xám sáng thành xám đậm */
}

[data-theme="light"] #filter-offcanvas > div > div:first-child > div > div:first-child i {
    color: #64748b !important; /* Đổi mũi tên thành xám */
}


/* 2. SỬA MÀU Ô "TOÀN BỘ NĂM" VÀ NÚT "LƯU BỘ LỌC" */
[data-theme="light"] .year-filter-dropdown .Select-control,
[data-theme="light"] .year-filter-dropdown .Select-menu-outer {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .year-filter-dropdown .Select-value-label {
    color: #0f172a !important; /* Chữ màu đen */
}

[data-theme="light"] #btn-save {
    color: #0057D9 !important;
    border-color: #0057D9 !important;
    background-color: transparent !important;
}

[data-theme="light"] #btn-save:hover {
    background-color: rgba(0, 87, 217, 0.1) !important;
}


/* 3. LÀM SÁNG KHỐI CHỈ SỐ VN-INDEX (Bảng thống kê) */
[data-theme="light"] #filter-offcanvas > div > div:nth-child(2) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Thanh Header của VN-INDEX */
[data-theme="light"] #filter-offcanvas > div > div:nth-child(2) > div:first-child {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #cbd5e1 !important;
}
[data-theme="light"] #filter-offcanvas > div > div:nth-child(2) > div:first-child span {
    color: #0f172a !important;
}

/* Cột thông số bên trái */
[data-theme="light"] #idx-stats-panel {
    background-color: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
}
[data-theme="light"] #idx-stats-panel > div {
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Chữ trong cột thống kê: Ép xám/đen nhưng BỎ QUA màu Xanh/Đỏ của % thay đổi */
[data-theme="light"] #idx-stats-panel span:not([style*="color: #10b981"]):not([style*="color: #ef4444"]):not([style*="color: #0057D9"]) {
    color: #334155 !important;
}


/* 4. TẨY TRẮNG BACKGROUND CỦA BIỂU ĐỒ PLOTLY (Can thiệp sâu vào SVG) */
[data-theme="light"] #idx-mini-chart .bg,
[data-theme="light"] #idx-mini-chart .plotbg,
[data-theme="light"] #idx-mini-chart rect.bg,
[data-theme="light"] #idx-mini-chart rect.plotbg {
    fill: #ffffff !important; /* Đổi nền biểu đồ thành trắng */
}

/* Đổi màu lưới biểu đồ */
[data-theme="light"] #idx-mini-chart .gridlayer path {
    stroke: #f1f5f9 !important; 
}
[data-theme="light"] #idx-mini-chart .zerolinelayer path {
    stroke: #cbd5e1 !important;
}

/* Đổi màu chữ trục hoành, trục tung (Tháng, Năm, Giá trị) */
[data-theme="light"] #idx-mini-chart .xtick text, 
[data-theme="light"] #idx-mini-chart .ytick text {
    fill: #64748b !important; 
}
/* ============================================================================
   VŨ KHÍ HẠNG NẶNG: ÉP TOÀN BỘ KHU VỰC BỘ LỌC VÀ VNINDEX SANG LIGHT MODE
   ============================================================================ */

/* 1. TẨY NỀN ĐEN: Ép toàn bộ các div bên trong khu vực này trong suốt hoặc nền trắng */
[data-theme="light"] #filter-offcanvas div {
    background-color: transparent !important; 
    border-color: #e2e8f0 !important;
}

/* Đổ lại nền trắng cho các khối chính để không bị lỗi giao diện */
[data-theme="light"] #filter-offcanvas {
    background-color: #f1f5f9 !important; /* Nền tổng xám nhạt */
}
[data-theme="light"] #filter-offcanvas > div > div {
    background-color: #ffffff !important; /* Khối 3 cột lọc & khối VNINDEX nền trắng */
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
}
[data-theme="light"] .wizard-group-item:hover,
[data-theme="light"] .criteria-item-hover:hover {
    background-color: #f8f9fa !important;
}

/* 2. ÉP ĐỔI MÀU CHỮ: Quét toàn bộ text sang màu đen (NGOẠI TRỪ MÀU XANH/ĐỎ CỦA GIÁ) */
[data-theme="light"] #filter-offcanvas span:not([style*="color: #10b981"]):not([style*="color: rgb(16, 185, 129)"]):not([style*="color: #ef4444"]):not([style*="color: rgb(239, 68, 68)"]),
[data-theme="light"] #filter-offcanvas div:not([style*="color: #10b981"]):not([style*="color: #ef4444"]) {
    color: #334155 !important;
}

/* 3. SỬA LỖI CÁC Ô NHẬP SỐ (INPUT SLIDER) */
[data-theme="light"] #filter-offcanvas input {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* 4. FIX RIÊNG THANH CHỌN "TOÀN BỘ NĂM" VÀ NÚT LƯU */
[data-theme="light"] .year-filter-dropdown .Select-control {
    background-color: #ffffff !important;
}
[data-theme="light"] .year-filter-dropdown .Select-value-label {
    color: #0f172a !important;
}
[data-theme="light"] #btn-save {
    color: #0057D9 !important;
    border-color: #0057D9 !important;
    background-color: transparent !important;
}

/* 5. TẨY TRẮNG BACKGROUND CỦA BIỂU ĐỒ PLOTLY VNINDEX */
[data-theme="light"] #idx-mini-chart .bg,
[data-theme="light"] #idx-mini-chart .plotbg,
[data-theme="light"] #idx-mini-chart rect.bg,
[data-theme="light"] #idx-mini-chart rect.plotbg {
    fill: #ffffff !important; 
}
[data-theme="light"] #idx-mini-chart .gridlayer path {
    stroke: #f1f5f9 !important; /* Lưới kẻ mờ */
}
[data-theme="light"] #idx-mini-chart .zerolinelayer path {
    stroke: #cbd5e1 !important; /* Trục chính đậm hơn chút */
}
[data-theme="light"] #idx-mini-chart .xtick text, 
[data-theme="light"] #idx-mini-chart .ytick text {
    fill: #64748b !important; /* Chữ tháng, năm */
}
/* ép chữ màu đen/xám đậm cho thanh navbar ở chế độ sáng */
[data-theme="light"] .fss-logo-text,
[data-theme="light"] .vietcap-nav-link,
[data-theme="light"] .vietcap-nav-login-btn,
[data-theme="light"] #navbar-user-name {
    color: #0f172a !important; 
}

/* màu khi rê chuột vào các chữ (màu xanh lá vietcap cho đẹp) */
[data-theme="light"] .vietcap-nav-link:hover {
    color: #1E88E5 !important; 
    background: rgba(255, 255, 255, 0.1) !important;
}
/* ép style cho nút đăng xuất đồng bộ với thanh navbar */
#btn-logout {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important; /* màu chữ trắng */
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 7px 16px !important;
    border-radius: 7px !important;
    transition: all 0.2s ease !important;
}

/* màu khi rê chuột vào */
#btn-logout:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1E88E5 !important; /* chữ ngả xanh lá cho đẹp */
}

/* tạo khung màu xanh khi ấn vào (focus/active) */
#btn-logout:active,
#btn-logout:focus,
#btn-logout:focus-visible {
    border: 1px solid #0057D9 !important; /* viền xanh */
    box-shadow: 0 0 0 2px rgba(0, 87, 217, 0.3) !important; /* glow xanh nhẹ */
    background: rgba(0, 87, 217, 0.1) !important;
    outline: none !important;
}

/* ép màu chữ trắng luôn cho chế độ sáng */
[data-theme="light"] #btn-logout {
    color: #ffffff !important;
}
/* tăng cỡ chữ logo vietcap */
.fss-logo-text {
    font-size: 24px !important; 
}

/* tăng cỡ chữ các mục menu (về vietcap, dịch vụ, sản phẩm...) */
.vietcap-nav-link {
    font-size: 15px !important; 
    padding: 8px 16px !important; /* nới rộng khoảng cách giữa các nút một chút cho thoáng */
}

/* chỉnh lại kích thước riêng cho nút screener cho cân xứng */
.vietcap-nav-screener {
    font-size: 15px !important;
    padding: 7px 22px !important;
}

/* tăng cỡ chữ tên người dùng (guest demo) */
#navbar-user-name {
    font-size: 15px !important;
}

/* tăng cỡ chữ nút đăng xuất */
#btn-logout {
    font-size: 15px !important;
    padding: 8px 18px !important;
}
/* bo tròn góc thanh công cụ (áp dụng cho cả sáng và tối) */
#screener-scroll-anchor + div {
    border-radius: 14px !important;
    
    /* thêm xíu bóng đổ nhẹ cho thanh này nổi lên 3d 1 chút */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    
    /* nếu bạn muốn nó không chạm sát viền màn hình (kiểu khối nổi) thì bỏ comment 2 dòng dưới nha */
    /* width: calc(100% - 32px) !important; */
    /* margin: 0 auto !important; */
}

/* chỉnh lại viền ở chế độ sáng cho nó bọc kín nguyên khối */
[data-theme="light"] #screener-scroll-anchor + div {
    border-bottom: none !important;
    border: 1px solid #e2e8f0 !important;
}

/* Ép thanh header luôn có nền đen */
#fss-sticky-nav {
    background-color: #000000 !important;
    border-bottom: 1px solid #1f2937 !important;
}

/* --- TÙY CHỈNH TOOLTIP FSS --- */
/* Ép màu nền đen và chữ trắng cho khối text */
.custom-fss-tooltip .tooltip-inner {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 500;
    font-size: 13px; /* Có thể chỉnh cỡ chữ ở đây nếu cần */
    border: 1px solid #333; /* Tùy chọn: Thêm viền mỏng cho đẹp */
}

/* Ép màu phần mũi tên chĩa ra của Tooltip thành màu đen */
.custom-fss-tooltip .tooltip-arrow::before,
.custom-fss-tooltip.bs-tooltip-end .tooltip-arrow::before,
.custom-fss-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #000000 !important;
}

/* Tác động trực tiếp vào phần lõi chứa chữ của tooltip */
.cyber-tooltip .tooltip-inner {
    font-size: 11px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    
    /* Bạn có thể ép luôn màu nền nếu thích (tùy chọn) */
    /* background-color: #1a1a1a !important; */
}

/* 1. Theme chung cho toàn bộ hộp nội dung của tooltip */
.cyber-theme-tooltip .tooltip-inner {
    background-color: #0d1117 !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 8px 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
    max-width: 260px !important;
    text-align: left !important;
}

/* 2. Đổi màu cái "mũi tên" (arrow) của tooltip để khớp với màu nền #0d1117 */
/* Bao phủ mọi hướng (top, bottom, left, right) để bạn dùng placement nào cũng đẹp */
.cyber-theme-tooltip.bs-tooltip-top .tooltip-arrow::before,
.cyber-theme-tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #0d1117 !important;
}

.cyber-theme-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.cyber-theme-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #0d1117 !important;
}

.cyber-theme-tooltip.bs-tooltip-start .tooltip-arrow::before,
.cyber-theme-tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #0d1117 !important;
}

.cyber-theme-tooltip.bs-tooltip-end .tooltip-arrow::before,
.cyber-theme-tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #0d1117 !important;
}

/* Biến thể dành cho Tooltip Cảnh báo (Viền cam) */
.cyber-theme-tooltip-warning .tooltip-inner {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border: 1px solid #f59e0b !important; /* Viền cam cảnh báo */
    border-radius: 8px !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 11px !important; /* Font nhỏ hơn một chút như code gốc của bạn */
    line-height: 1.5 !important;
    padding: 8px 12px !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15) !important; /* Đổ bóng màu cam nhạt */
    max-width: 240px !important;
    text-align: left !important;
}

/* Đổi màu mũi tên thành viền cam tương ứng */
.cyber-theme-tooltip-warning.bs-tooltip-top .tooltip-arrow::before,
.cyber-theme-tooltip-warning[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #f59e0b !important;
}
/* ============================================================================
   ⚡ CYBERPUNK GLASSMORPHISM — UPGRADE LAYER
   Thêm vào CUỐI file để cascade ghi đè các khối bề mặt (card/modal/dropdown/
   tooltip) sang kính mờ thật (backdrop-filter), giữ NGUYÊN class/id/cấu trúc
   gốc — không đụng đến logic, callback hay layout. An toàn 100% để dán đè.
   ============================================================================ */

/* ── 0. Khử nhiễu chuyển động cho người dùng nhạy cảm ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── 1. NỀN TỔNG: thêm chiều sâu cho void, glass nổi rõ hơn ── */
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 70% 50% at 15% -10%, rgba(0, 87, 217, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 10%, rgba(30, 136, 229, 0.04) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(30, 136, 229, 0.012) 2px, rgba(30, 136, 229, 0.012) 4px);
  background-attachment: fixed;
}

/* ── 2. SCROLLBAR — siêu mảnh, tự ẩn cạnh, kính mờ ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--glass-border-accent);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.25s var(--ease-glass);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }

/* ── 3. THẺ THÔNG TIN & METRIC — kính mờ thật ── */
.info-card,
.score-box,
.chart-loading,
.active-filter-tag,
.card,
[id*="selected-filter"],
.filter-item {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.info-card:hover,
.score-box:hover {
  border-color: var(--glass-border-accent) !important;
  box-shadow: var(--glass-shadow-lg), 0 0 24px var(--accent-dim);
}

/* ── 4. AG GRID — chỉ làm kính ở khung viền ngoài, giữ ô dữ liệu sắc nét ── */
[data-theme="dark"] .ag-theme-alpine-dark {
  border: 1px solid var(--glass-border-accent) !important;
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(30, 136, 229, 0.06) !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-header,
[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-panel {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

/* ── 5. MODAL — khung kính tối, nội dung vẫn rõ chữ ── */
.modal-content,
#login-modal .modal-content {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-accent) !important;
  box-shadow: var(--glass-shadow-lg), 0 0 0 1px rgba(0, 87, 217, 0.06) !important;
}
.modal-header {
  background: rgba(4, 13, 24, 0.35) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}
.modal-backdrop.show { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0.6 !important; }

/* ── 6. DROPDOWN / SELECT MENUS — kính mờ nổi trên mọi nền ── */
.custom-dropdown .Select-menu-outer,
.ssi-dropdown-custom .Select-menu-outer,
.year-filter-dropdown .Select-menu-outer,
.ticker-search-dropdown .Select-menu-outer,
.Select-menu-outer,
#strategy-accordion-popover,
#strategy-accordion-popover .popover-body > div {
  background: var(--glass-bg-deep) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-accent) !important;
}
#strategy-preset-dropdown .Select-control,
#filter-all-industry .Select-control,
#saved-filters-dropdown .Select-control,
#search-ticker-input .Select-control {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

/* ── 7. TOOLTIP / TOAST — viên kính nổi nhẹ, glow theo accent ── */
.cyber-tooltip .tooltip-inner,
.cyber-theme-tooltip .tooltip-inner,
.cyber-theme-tooltip-warning .tooltip-inner,
.custom-fss-tooltip .tooltip-inner,
.toast,
.toast-notification {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-bg-deep) !important;
}

/* ── 8. ONBOARDING (IPS) — đồng bộ kính mờ cho thẻ lựa chọn & tóm tắt ── */
.choice-card,
.check-item,
.summary-card,
.rail-dot {
  background: rgba(10, 22, 40, 0.45) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

/* ── 9. ACTION BUTTON LIFT — bổ sung micro-interaction cho nút còn thiếu ── */
.btn-save-ssi, .btn-ghost, #toggle-filter-btn, .hero-btn {
  will-change: transform;
}
.btn-primary, .btn-success {
  transition: transform 0.25s var(--ease-glass), box-shadow 0.25s var(--ease-glass) !important;
}

/* ── 10. HỘI TỤ MÀU LẠC (legacy #58a6ff / #3b82f6 / #1E88E5 lẻ tẻ) VỀ HỆ THỐNG ── */
.year-filter-dropdown .Select-arrow,
.ips-choice-card .check-box.checked {
  border-top-color: var(--accent) !important;
}
[style*="color: #58a6ff" i],
[style*="color: rgb(88, 166, 255)" i] {
  color: var(--accent) !important;
}

/* ── 11. FOCUS VISIBLE — giữ khả năng điều hướng bằng bàn phím rõ ràng ──
   [SỬA] Bỏ input:focus-visible khỏi rule này: outline bọc quanh ô input
   tự co giãn theo text (đặc thù react-select .Select-input) tạo thành
   khung xanh "phình" theo độ dài chữ đang gõ — không đẹp. Giữ nguyên
   outline cho button/link/[tabindex] (điều hướng bàn phím vẫn cần thấy
   rõ đang ở đâu), chỉ input text thì bỏ, dùng con trỏ nhấp nháy mặc định
   của trình duyệt là đủ. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
.Select-control:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* [MỚI] Tắt hẳn outline mặc định của trình duyệt cho MỌI ô input đang gõ
   chữ — kể cả input thường lẫn input bên trong react-select — chỉ còn
   lại con trỏ | nhấp nháy mặc định. */
input:focus-visible,
input:focus,
.Select-input input:focus-visible,
.Select-input input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ── 12. LIGHT MODE — đảm bảo kính mờ vẫn đủ tương phản trên nền sáng ── */
[data-theme="light"] .info-card,
[data-theme="light"] .score-box,
[data-theme="light"] .modal-content,
[data-theme="light"] .Select-menu-outer {
  box-shadow: var(--glass-shadow) !important;
}
[data-theme="light"] .modal-header { background: rgba(255, 255, 255, 0.5) !important; }

/* ============================================================================
   ☀️ LIGHT MODE — POWER-BI DASHBOARD STYLE
   🌙 DARK MODE — TỐI SẠCH, KHÔNG NEON CYBERPUNK
   Cả 2 khối đều đặt cuối file để thắng cascade. Mỗi khối chỉ áp dụng khi
   <html data-theme="..."> tương ứng — toggle bật/tắt sẽ đổi đúng theo.
   ============================================================================ */

:root {
  --pbi-rose:   #e11d48; --pbi-rose-bg:   rgba(244, 63, 94, 0.08);  --pbi-rose-bd:   rgba(244, 63, 94, 0.20);
  --pbi-green:  #16a34a; --pbi-green-bg:  rgba(34, 197, 94, 0.08);  --pbi-green-bd:  rgba(34, 197, 94, 0.20);
  --pbi-purple: #7c3aed; --pbi-purple-bg: rgba(139, 92, 246, 0.08); --pbi-purple-bd: rgba(139, 92, 246, 0.20);
  --pbi-amber:  #b45309; --pbi-amber-bg:  rgba(245, 158, 11, 0.10); --pbi-amber-bd:  rgba(245, 158, 11, 0.22);
  --pbi-sky:    #0369a1; --pbi-sky-bg:    rgba(14, 165, 233, 0.08); --pbi-sky-bd:    rgba(14, 165, 233, 0.20);
  --pbi-teal:   #0f766e; --pbi-teal-bg:   rgba(20, 184, 166, 0.08); --pbi-teal-bd:   rgba(20, 184, 166, 0.20);
}

/* ── Nền tổng ── */
[data-theme="light"] body {
  background-image: none !important;
  background-color: #f1f5f9 !important;
}
[data-theme="dark"] body {
  background-image: none !important;   /* bỏ scanline/neon texture cũ */
  background-color: #0f1623 !important;
}

/* ── Card / Modal / Dropdown — LIGHT: trắng đặc, bóng mềm ── */
[data-theme="light"] .info-card,
[data-theme="light"] .score-box,
[data-theme="light"] .chart-loading,
[data-theme="light"] .active-filter-tag,
[data-theme="light"] .card,
[data-theme="light"] .filter-item,
[data-theme="light"] .modal-content,
[data-theme="light"] #login-modal .modal-content,
[data-theme="light"] .Select-menu-outer,
[data-theme="light"] .custom-dropdown .Select-menu-outer,
[data-theme="light"] .ssi-dropdown-custom .Select-menu-outer,
[data-theme="light"] .year-filter-dropdown .Select-menu-outer,
[data-theme="light"] #strategy-accordion-popover {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .info-card:hover,
[data-theme="light"] .score-box:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-2px);
}

/* ── Card / Modal / Dropdown — DARK: tối trơn, viền mảnh, KHÔNG neon ── */
[data-theme="dark"] .info-card,
[data-theme="dark"] .score-box,
[data-theme="dark"] .chart-loading,
[data-theme="dark"] .active-filter-tag,
[data-theme="dark"] .card,
[data-theme="dark"] .filter-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] #login-modal .modal-content,
[data-theme="dark"] .Select-menu-outer,
[data-theme="dark"] .custom-dropdown .Select-menu-outer,
[data-theme="dark"] .ssi-dropdown-custom .Select-menu-outer,
[data-theme="dark"] .year-filter-dropdown .Select-menu-outer,
[data-theme="dark"] #strategy-accordion-popover {
  background: #1a2332 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #2a3548 !important;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
[data-theme="dark"] .info-card:hover,
[data-theme="dark"] .score-box:hover {
  border-color: #1E88E555 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-2px);
}

/* ── Toolbar — LIGHT ── */
[data-theme="light"] .toolbar-panel { background: #ffffff !important; }
[data-theme="light"] .toolbar-tab { border-right: 1px solid #e2e8f0; }
[data-theme="light"] .toolbar-tab .toolbar-tab-icon,
[data-theme="light"] .toolbar-tab .toolbar-tab-label { color: #64748b; }
[data-theme="light"] .strategy-group-header {
  background-color: #f8fafc !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
}

/* ── Toolbar — DARK ── */
[data-theme="dark"] .toolbar-panel { background: #0f1623 !important; }
[data-theme="dark"] .toolbar-tab { border-right: 1px solid #2a3548; }

/* ── AG GRID — class thật trong DOM luôn là .ag-theme-alpine-dark (Python
   hardcode cố định, KHÔNG đổi theo toggle) → ta tự đổi MÀU của chính class
   đó dựa theo data-theme trên <html>, để bảng kết quả lọc cổ phiếu thực sự
   sáng/tối theo đúng switch. ── */

/* LIGHT: bảng nền trắng */
[data-theme="light"] .ag-theme-alpine-dark {
  --ag-background-color:               #ffffff !important;
  --ag-foreground-color:               #1e293b !important;
  --ag-header-background-color:        #f8fafc !important;
  --ag-header-foreground-color:        #334155 !important;
  --ag-border-color:                   #e2e8f0 !important;
  --ag-row-border-color:               #f1f5f9 !important;
  --ag-odd-row-background-color:       #fafbfc !important;
  --ag-row-hover-color:                rgba(34, 197, 94, 0.06) !important;
  --ag-selected-row-background-color:  rgba(34, 197, 94, 0.08) !important;
  --ag-modal-overlay-background-color: rgba(255, 255, 255, 0.7) !important;
  --ag-disabled-foreground-color:      #94a3b8 !important;
  --ag-input-background-color:         #ffffff !important;
  --ag-input-border-color:             #e2e8f0 !important;
  --ag-secondary-foreground-color:     #64748b !important;
  --ag-range-selection-background-color: rgba(34, 197, 94, 0.10) !important;
  --ag-font-family:                    'Inter', sans-serif !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05) !important;
  border-radius: 12px;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-header,
[data-theme="light"] .ag-theme-alpine-dark .ag-header-row {
  background: #f8fafc !important;
  background-image: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-header-cell-label,
[data-theme="light"] .ag-theme-alpine-dark .ag-header-cell-text {
  color: #334155 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-root-wrapper {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-row {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-row-odd {
  background-color: #fafbfc !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-paging-panel {
  background-color: #f8fafc !important;
  color: #334155 !important;
  border-top: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-icon { color: #94a3b8 !important; }

/* DARK: bảng nền tối kiểu Gentelella — card phẳng, viền mảnh, accent teal */
[data-theme="dark"] .ag-theme-alpine-dark {
  --ag-background-color:               #1a2332 !important;
  --ag-foreground-color:               #f1f5f9 !important;
  --ag-header-background-color:        #0f1623 !important;
  --ag-header-foreground-color:        #cbd5e1 !important;
  --ag-border-color:                   #2a3548 !important;
  --ag-row-border-color:                #232e41 !important;
  --ag-odd-row-background-color:       #1d2738 !important;
  --ag-row-hover-color:                rgba(26, 187, 156, 0.08) !important;
  --ag-selected-row-background-color:  rgba(26, 187, 156, 0.12) !important;
  --ag-modal-overlay-background-color: rgba(15, 22, 35, 0.7) !important;
  --ag-disabled-foreground-color:      #5d6b80 !important;
  --ag-input-background-color:         #0f1623 !important;
  --ag-input-border-color:             #2a3548 !important;
  --ag-secondary-foreground-color:     #8a99ad !important;
  --ag-range-selection-background-color: rgba(26, 187, 156, 0.14) !important;
  --ag-font-family:                    'Inter', -apple-system, sans-serif !important;
  border: 1px solid #2a3548 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
  border-radius: 12px;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-header,
[data-theme="dark"] .ag-theme-alpine-dark .ag-header-row {
  background: #0f1623 !important;
  background-image: none !important;
  border-bottom: 1px solid #2a3548 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell-label,
[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell-text {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-root-wrapper {
  background-color: #1a2332 !important;
  border-color: #2a3548 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-row {
  background-color: #1a2332 !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid #232e41 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-row-odd {
  background-color: #1d2738 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-paging-panel {
  background-color: #0f1623 !important;
  color: #cbd5e1 !important;
  border-top: 1px solid #2a3548 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-icon { color: #5d6b80 !important; }

/* ═══════════════════════════════════════════════════════════
   HEADER CỘT — Fix màu/icon sắp xếp (đồng bộ về accent xanh lá
   chính thức #0057D9, thay cho cyan #1E88E5 cũ còn sót lại)
   ═══════════════════════════════════════════════════════════ */
/* Header hover: trước đây chữ đổi xanh lá (#1E88E5) nhưng nền hover
   vẫn còn cyan cũ (rgba(30, 136, 229,0.05)) — 2 màu thương hiệu lẫn
   lộn trên cùng 1 trạng thái. Đồng bộ nền hover về xanh lá. */
[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell:hover {
  background: rgba(0, 87, 217, 0.08) !important;
}

/* Icon mũi tên sắp xếp: CSS cũ chỉ nhắm ".ag-sort-indicator-icon"
   — class này KHÔNG tồn tại trong DOM thật của AG-Grid Alpine theme
   (tên thật là .ag-sort-ascending-icon / .ag-sort-descending-icon,
   bọc quanh 1 span.ag-icon). Vì vậy icon mũi tên trước giờ vẫn nhận
   màu xám mặc định từ rule ".ag-icon" ở trên, KHÔNG PHẢI màu thương
   hiệu như ý định. Nhắm đúng selector lồng — độ đặc thù cao hơn nên
   luôn thắng rule ".ag-icon" chung, không phụ thuộc thứ tự khai báo. */
[data-theme="dark"] .ag-theme-alpine-dark .ag-sort-ascending-icon .ag-icon,
[data-theme="dark"] .ag-theme-alpine-dark .ag-sort-descending-icon .ag-icon,
[data-theme="dark"] .ag-theme-alpine-dark .ag-sort-mixed-icon .ag-icon {
  color: #1E88E5 !important;
}
/* Icon filter/menu trên header (phễu lọc, 3 chấm) — giữ tương phản rõ khi hover cả header */
[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell:hover .ag-header-icon .ag-icon {
  color: #1E88E5 !important;
}

/* Tooltip header (headerTooltip) — trước đây CHƯA TỪNG được style,
   hiển thị dạng mặc định thô của trình duyệt/AG-Grid, tương phản kém
   và lệch hẳn theme tối của app. */
[data-theme="dark"] .ag-tooltip {
  background: #0f1623 !important;
  color: #e2e8f0 !important;
  border: 1px solid #2a3548 !important;
  border-left: 2px solid #0057D9 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  max-width: 280px !important;
}
[data-theme="light"] .ag-tooltip {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 2px solid #0057D9 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  max-width: 280px !important;
}

/* ── KPI pastel card utility (cho card metric tô màu xen kẽ, dùng chung) ── */
.kpi-pastel-rose   { background: var(--pbi-rose-bg)   !important; border-color: var(--pbi-rose-bd)   !important; }
.kpi-pastel-green  { background: var(--pbi-green-bg)  !important; border-color: var(--pbi-green-bd)  !important; }
.kpi-pastel-purple { background: var(--pbi-purple-bg) !important; border-color: var(--pbi-purple-bd) !important; }
.kpi-pastel-amber  { background: var(--pbi-amber-bg)  !important; border-color: var(--pbi-amber-bd)  !important; }
.kpi-pastel-sky    { background: var(--pbi-sky-bg)    !important; border-color: var(--pbi-sky-bd)    !important; }
.kpi-pastel-teal   { background: var(--pbi-teal-bg)   !important; border-color: var(--pbi-teal-bd)   !important; }

/* ── DARK: pastel KPI icon-box đậm hơn, lấy mẫu trực tiếp từ ảnh tham khảo
   Gentelella (ô icon các thẻ VISITORS/REVENUE/CONVERSIONS...) — bản
   rgba(...,0.08) siêu nhạt phía trên gần như vô hình trên nền navy đậm. ── */
[data-theme="dark"] .kpi-pastel-rose   { background: var(--pastel-red-bg)    !important; border-color: var(--pastel-red-fg)    !important; color: var(--pastel-red-fg)    !important; }
[data-theme="dark"] .kpi-pastel-green  { background: var(--pastel-teal-bg)   !important; border-color: var(--pastel-teal-fg)   !important; color: var(--pastel-teal-fg)   !important; }
[data-theme="dark"] .kpi-pastel-purple { background: var(--pastel-purple-bg) !important; border-color: var(--pastel-purple-fg) !important; color: var(--pastel-purple-fg) !important; }
[data-theme="dark"] .kpi-pastel-amber  { background: var(--pastel-amber-bg)  !important; border-color: var(--pastel-amber-fg)  !important; color: var(--pastel-amber-fg)  !important; }
[data-theme="dark"] .kpi-pastel-sky    { background: var(--pastel-blue-bg)   !important; border-color: var(--pastel-blue-fg)   !important; color: var(--pastel-blue-fg)   !important; }
[data-theme="dark"] .kpi-pastel-teal   { background: var(--pastel-teal-bg)   !important; border-color: var(--pastel-teal-fg)   !important; color: var(--pastel-teal-fg)   !important; }

/* ── Scrollbar — LIGHT riêng (DARK đã có ở lớp Glassmorphism phía trên) ── */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  background-clip: content-box;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
/* ============================================================================
   CHART CONTROLS (tab BIẾN ĐỘNG GIÁ) — theme-aware
   Thay cho inline style hard-code dark trong chart_controls.py cũ.
   Layout này dựng tĩnh 1 lần (Python không biết theme tại thời điểm
   render) nên dùng CSS variable đổi theo [data-theme] là cách đúng.
   ============================================================================ */
.chart-controls-panel {
  padding: 20px;
  background: var(--bg-surface);
  border-radius: 15px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}
.chart-controls-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.chart-controls-label i { margin-right: 8px; color: var(--accent); }

.chart-toggle-box {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}
.chart-toggle-box span {
  color: var(--text-secondary);
  font-size: 13px;
  margin-right: 10px;
  font-weight: 500;
}

.chart-tip-box {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--pbi-amber-bg, rgba(245,158,11,0.08));
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 4px solid #f59e0b;
}
.chart-tip-box .tip-label { color: #b45309; font-size: 13px; font-weight: 700; }
[data-theme="dark"] .chart-tip-box .tip-label { color: #fbbf24; }
.chart-tip-box .tip-text { color: var(--text-muted); font-size: 12px; margin-left: 5px; }

/* Dropdown bên trong chart controls — đè style mặc định của react-select */
.chart-controls-panel .custom-dropdown .Select-control,
.chart-controls-panel .custom-dropdown > div {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

.chart-empty-state { color: var(--text-muted); }
.chart-empty-state i { color: var(--text-muted); opacity: 0.7; }

/* ============================================================================
   TAB "BIỂU ĐỒ" — Template picker panel (financial_charts_callbacks.py)
   ============================================================================ */
.fin-chart-picker-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.fin-chart-picker-panel .picker-header {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}
.fin-chart-picker-panel .picker-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.fin-chart-picker-panel .picker-search-input {
  width: 100%; padding: 7px 10px 7px 32px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 6px;
  font-size: 12px; outline: none;
}
.fin-chart-picker-panel .picker-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 12px; pointer-events: none;
}
.fin-chart-picker-panel .picker-group-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle); letter-spacing: 0.5px;
}
.fin-chart-picker-panel .picker-checklist label {
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
}

.fin-chart-render-box {
  flex: 1; min-width: 0;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* ============================================================================
   🔧 LIGHT MODE FIX — Ghi đè các block dark hard-code không có [data-theme]
   prefix. Các block toàn cục (.ag-theme-alpine-dark .ag-row-selected v.v.)
   hard-code màu nền đen/navy → cần ép lại sang trắng khi light mode.
   ============================================================================ */

/* AG Grid — Row hover & selected: xóa màu dark cứng trong light mode */
[data-theme="light"] .ag-theme-alpine-dark .ag-row:hover {
  background-color: rgba(34, 197, 94, 0.06) !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-row-selected {
  background-color: rgba(34, 197, 94, 0.08) !important;
  box-shadow: inset 3px 0 0 #16a34a !important;
  border-left: none !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-row-selected .ag-cell {
  color: #1e293b !important;
}

/* AG Grid — Pagination panel light */
[data-theme="light"] .ag-theme-alpine-dark .ag-paging-panel,
[data-theme="light"] .ag-theme-alpine-dark .ag-paging-button,
[data-theme="light"] .ag-theme-alpine-dark .ag-paging-page-summary-panel {
  background-color: #f8fafc !important;
  color: #334155 !important;
  border-top: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-paging-button:hover:not([disabled]) {
  background-color: rgba(34, 197, 94, 0.10) !important;
  color: #16a34a !important;
}

/* AG Grid — Pinned left panel (cột MÃ CK) light */
[data-theme="light"] .ag-theme-alpine-dark .ag-pinned-left-cols-container,
[data-theme="light"] .ag-theme-alpine-dark .ag-pinned-left-header {
  background-color: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 8px rgba(15,23,42,0.04) !important;
}

/* Modal header — nền sáng, chữ tối */
[data-theme="light"] .modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modal title (span text cạnh PDF) */
[data-theme="light"] #modal-title {
  color: #1e293b !important;
}

/* Modal nav-tabs (tab TỔNG QUAN / BIẾN ĐỘNG GIÁ ...) */
[data-theme="light"] .modal-body .nav-tabs,
[data-theme="light"] .nav-tabs {
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
[data-theme="light"] .modal-body .nav-tabs .nav-link,
[data-theme="light"] .nav-tabs .nav-link {
  color: #64748b !important;
  background: transparent !important;
}
[data-theme="light"] .modal-body .nav-tabs .nav-link:hover,
[data-theme="light"] .nav-tabs .nav-link:hover {
  color: #1e293b !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .modal-body .nav-tabs .nav-link.active,
[data-theme="light"] .nav-tabs .nav-link.active {
  color: #0369a1 !important;
  background: #ffffff !important;
  border-bottom: 2px solid #0369a1 !important;
}

/* dbc.Tabs trong modal body — override màu tab đen cứng */
[data-theme="light"] .modal-body .tab-content {
  background: #ffffff !important;
  color: #1e293b !important;
}
/* ============================================================================
   ⚡ TAB "BIẾN ĐỘNG GIÁ" — class mới dùng trong chart_callbacks.py
   Dán đoạn này vào CUỐI style.css (không đụng gì khác trong file của bạn).
   Tái dùng các biến --positive/--negative/--warning/--bg-card/--text-primary...
   đã có sẵn trong :root của bạn — nếu bạn đã đổi tên biến gốc, sửa lại tên ở
   đây cho khớp.
   ============================================================================ */

/* ── Biến accent riêng cho từng metric chip (không trùng dữ liệu pos/neg) ── */
:root {
  --chart-chip-sky:    #0ea5e9;
  --chart-chip-blue:   #2563eb;
  --chart-chip-purple: #8b5cf6;
  --chart-chip-teal:   #14b8a6;
}
[data-theme="light"] {
  --chart-chip-sky:    #0284c7;
  --chart-chip-blue:   #1d4ed8;
  --chart-chip-purple: #7c3aed;
  --chart-chip-teal:   #0f766e;
}
[data-theme="dark"] {
  --chart-chip-sky:    #1E88E5;
  --chart-chip-blue:   #58a6ff;
  --chart-chip-purple: #b388ff;
  --chart-chip-teal:   #2dd4bf;
}

/* ── Empty / no-data card (dùng chung với .chart-empty-state đã có) ── */
.chart-no-data-card {
  background: var(--bg-card);
  border-radius: 15px;
  border: 1px solid var(--negative-dim, rgba(239, 68, 68, 0.25));
}
.chart-no-data-card--warning {
  border-color: var(--warning-dim, rgba(245, 158, 11, 0.3));
}
.chart-no-data-title {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px 0;
}
.chart-no-data-reason,
.chart-no-data-detail {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
.chart-warning-text {
  color: var(--negative);
}

/* ── Info bar (dải 7 ô CAO NHẤT KỲ / THẤP NHẤT KỲ / ...) ── */
.chart-info-bar {
  display: flex;
  gap: 10px;
  padding: 14px 4px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.chart-info-bar-wrapper {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.chart-metric-chip {
  padding: 12px 18px;
  background: var(--bg-elevated);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  border-top: 2px solid; /* màu thật set qua inline borderTopColor theo từng chip */
  min-width: 130px;
  flex: 1;
}
.chart-metric-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.chart-metric-value {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
}

/* ── Khung biểu đồ nến ── */
.chart-graph-card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  padding: 8px 4px 4px 4px;
}
/* ============================================================================
   FORCE %-COLUMN COLORS — cellClassRules cho cột % (Price_Change_Pct,
   Perf_1W, Perf_1M...). Đặt cuối file + dùng class riêng để CHẮC CHẮN
   thắng mọi rule .ag-cell { color: ... } khác có thể đang ghi đè màu
   set qua cellStyle JS (một số theme AG Grid áp color qua CSS class với
   độ ưu tiên cao hơn inline style trong vài trường hợp cấu hình).
   ============================================================================ */
.ag-theme-alpine-dark .cell-pct-positive,
.ag-theme-alpine-dark .cell-pct-positive .ag-cell-value,
.ag-theme-alpine-dark .cell-pct-positive span {
  color: #10b981 !important;
  font-weight: 700 !important;
}
.ag-theme-alpine-dark .cell-pct-negative,
.ag-theme-alpine-dark .cell-pct-negative .ag-cell-value,
.ag-theme-alpine-dark .cell-pct-negative span {
  color: #ef4444 !important;
  font-weight: 700 !important;
}
[data-theme="light"] .ag-theme-alpine-dark .cell-pct-zero,
[data-theme="light"] .ag-theme-alpine-dark .cell-pct-zero .ag-cell-value {
  color: #b45309 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .cell-pct-zero,
[data-theme="dark"] .ag-theme-alpine-dark .cell-pct-zero .ag-cell-value {
  color: #f5c842 !important;
}

/* ============================================================================
   TOP MOVERS CARD — fss-hero
   (Khối "🌍 EARTH BACKGROUND" cũ đã bị xoá — nghệ thuật nền giờ là biểu đồ
   giá/nến, định nghĩa ở assets/header.css cùng #fss-hero-chart-art, gắn
   đúng chủ đề tài chính thay vì ảnh chụp Trái Đất không liên quan.)
   ============================================================================ */
#fss-hero {
  position: relative;
  overflow: hidden;
}

/* Đảm bảo nội dung hero nổi trên lớp nền */
#fss-hero-content {
  position: relative;
  z-index: 1;
}

/* ── Hero right column ──────────────────────────────────────────────────────── */
/* (Layout chính của .fss-hero-right nay nằm ở header.css — bỏ override
   padding-top:101px cũ vì đó là hack cho navbar tuyệt-đối kiểu cũ, không
   còn cần thiết từ khi ticker tape trở thành phần tử trong luồng bình thường.) */

/* ── Card "TOP ĐỘNG" — bảng nhỏ góc phải hero, dữ liệu thật ───────────────── */
.fss-movers-card {
  position: relative;
  width: 260px;
  background: rgba(3, 10, 6, 0.72);
  border: 1px solid rgba(0, 255, 157, 0.22);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(0, 255, 157, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  flex-shrink: 0;
}

/* Viền sáng mỏng phía trên — gợi cảm giác panel kính cao cấp */
.fss-movers-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 100, 0.55), transparent);
}

.fss-movers-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 16px 10px;
  border-bottom: 1px solid rgba(120, 160, 210, 0.18);
}
.fss-movers-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #c9e6d8;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Chỉ báo trạng thái dữ liệu — trung thực: đây là dữ liệu cuối phiên (EOD),
   KHÔNG dùng nhãn "realtime" vì snapshot chỉ cập nhật theo phiên, không phải
   tick-by-tick. Cùng cách tiếp cận với việc sửa nhãn "TTM"/"Forward P/E" ở
   phần audit trước — không gắn nhãn sai bản chất dữ liệu. */
.fss-movers-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(200, 215, 235, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.fss-movers-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00c864;
  box-shadow: 0 0 6px rgba(0, 200, 100, 0.7);
  flex-shrink: 0;
}

.fss-movers-col-header {
  display: flex;
  align-items: center;
  padding: 8px 16px 6px;
  gap: 8px;
}
.fss-mover-col-ticker,
.fss-mover-col-price,
.fss-mover-col-pct {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(200, 215, 235, 0.55);
  text-transform: none;
}
.fss-mover-col-ticker { flex: 0 0 52px; }
.fss-mover-col-price   { flex: 1 1 auto; text-align: right; padding-right: 2px; }
.fss-mover-col-pct     { flex: 0 0 60px; text-align: right; padding-right: 2px; }

/* ── Khung cuộn cố định chiều cao, ẩn phần tràn ra ngoài ───────────────────── */
.fss-movers-track-wrap {
  position: relative;
  height: 280px;
  overflow: hidden;
  /* Mờ dần ở mép trên/dưới để hàng mã "trôi vào/ra" mượt mà, không bị cắt cụt */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Danh sách được nhân đôi (xem _build_top_movers_card) → cuộn đúng 50%
   rồi lặp lại sẽ liền mạch, không giật. Thời gian dựa theo số dòng để
   tốc độ cuộn luôn đều bất kể có bao nhiêu mã. */
.fss-movers-list {
  display: flex;
  flex-direction: column;
  animation: fssMoversScroll 22s linear infinite;
}
.fss-movers-track-wrap:hover .fss-movers-list {
  animation-play-state: paused;
}

@keyframes fssMoversScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* danh sách nhân đôi → lùi đúng 1 nửa */
}

.fss-mover-row {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
  flex-shrink: 0;
}
.fss-mover-row:hover {
  background: rgba(120, 160, 210, 0.06);
}

.fss-mover-ticker {
  flex: 0 0 52px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #eef4fb;
  letter-spacing: 0.02em;
}
.fss-mover-price {
  flex: 1 1 auto;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(220, 230, 245, 0.85);
  padding-right: 2px;   /* ← THÊM DÒNG NÀY */
}
.fss-mover-pct {
  flex: 0 0 60px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding-right: 2px;   /* ← THÊM DÒNG NÀY */
}

/* ── #fss-hero-content: layout chính nay nằm ở header.css (display:grid,
   2 cột, padding đúng để chừa chỗ cho ticker tape + navbar). Override
   !important cũ ở đây (height:100%, padding:0 40px) là hack cho layout
   trước khi có ticker tape trong luồng — đã bỏ vì gây đè chồng nội dung. */
.fss-hero-left {
  flex: 1 1 auto;
  min-width: 0;
  z-index: 1;
}

/* ── Light mode overrides cho card TOP ĐỘNG ─────────────────────────────────── */
[data-theme="light"] .fss-movers-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(10, 40, 100, 0.15);
}
[data-theme="light"] .fss-movers-title  { color: #0a4a30; }
[data-theme="light"] .fss-movers-status { color: rgba(10, 40, 80, 0.5); }
[data-theme="light"] .fss-mover-ticker  { color: #0a2040; }
[data-theme="light"] .fss-mover-price   { color: #4a6080; }
[data-theme="light"] .fss-mover-col-ticker,
[data-theme="light"] .fss-mover-col-price,
[data-theme="light"] .fss-mover-col-pct { color: rgba(10, 40, 80, 0.55); }

/* ── Responsive: ẩn card trên mobile nhỏ ─────────────────────────────────────── */
@media (max-width: 768px) {
  .fss-hero-right { display: none; }
  #fss-hero-content { justify-content: center !important; }
}
/* ============================================================================
   NÚT "TRẠM TÂM LÝ" TRÊN NAVBAR (merge bổ sung từ version trước)
   ============================================================================ */
#btn-open-psy-clinic {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
#btn-open-psy-clinic:hover {
    border-color: #0057D9 !important;
    color: #0057D9 !important;
    background-color: rgba(0, 87, 217, 0.1) !important;
}
[data-theme="light"] #btn-open-psy-clinic {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
[data-theme="light"] #btn-open-psy-clinic:hover {
    color: #1E88E5 !important;
    border-color: #1E88E5 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================================
   🎛️  TOOLBAR ACTION BUTTONS — hệ thống nút hành động thống nhất
   Trước đây mỗi nút (Excel/Thị trường/So sánh/Danh mục/Margin Crisis/
   Watchlist/Cảnh báo) dùng 1 màu Bootstrap khác nhau (success/danger/info/
   warning...) khiến hàng nút trông như "cầu vồng", thiếu hệ thống, không
   chuyên nghiệp. Redesign: MỘT kiểu khung nút duy nhất (chrome trung tính),
   màu sắc chỉ còn ở icon để giữ ý nghĩa nhận diện — đúng quy ước của các
   terminal tài chính chuyên nghiệp (Bloomberg, TradingView).
   ============================================================================ */
.fss-tbtn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 7px !important;
  color: #b8c2cf !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fss-tbtn:hover {
  background: rgba(30, 136, 229, 0.10) !important;
  border-color: rgba(30, 136, 229, 0.45) !important;
  color: #eaf2fb !important;
  transform: translateY(-1px);
}
.fss-tbtn:active { transform: translateY(0); }

.fss-tbtn .fss-tbtn-icon {
  font-size: 12px;
  color: #7d8b9c;
  transition: color 0.15s ease;
}
.fss-tbtn:hover .fss-tbtn-icon { color: #1E88E5; }

/* Icon giữ màu ngữ nghĩa riêng (Excel = xanh lá bảng tính, Margin Crisis =
   đỏ cảnh báo rủi ro thật) — CHỈ icon, không nhuộm cả khung nút như trước */
/* (Đã bỏ .fss-tbtn-icon-excel/-danger/-alert cũ — thay bằng hệ thống biến
   thể màu .fss-tbtn--color đầy đủ hơn, phủ cả viền + icon + hover) */


/* Định nghĩa hiệu ứng nhịp thở / tỏa sáng */
@keyframes softGlow {
  0% {
    box-shadow: 0 0 0px rgba(30, 136, 229, 0);
    border-color: rgba(30, 136, 229, 0.35);
  }
  50% {
    box-shadow: 0 0 10px rgba(30, 136, 229, 0.6), inset 0 0 5px rgba(30, 136, 229, 0.2);
    border-color: rgba(30, 136, 229, 0.9);
  }
  100% {
    box-shadow: 0 0 0px rgba(30, 136, 229, 0);
    border-color: rgba(30, 136, 229, 0.35);
  }
}

/* Áp dụng animation vào nút Công cụ */
.fss-tbtn-primary {
  border-color: rgba(30, 136, 229, 0.35) !important;
  color: #cfe3fb !important;
  /* Chạy animation liên tục: thời gian 2.5 giây, lặp vô tận */
  animation: softGlow 2.5s infinite ease-in-out !important; 
}

.fss-tbtn-primary:hover {
  background: rgba(30, 136, 229, 0.16) !important;
  border-color: #1E88E5 !important;
  /* Tùy chọn: Bạn có thể giữ hoặc bỏ dòng dưới nếu muốn khi rê chuột animation dừng lại hoặc nhanh hơn */
  animation: softGlow 1.2s infinite ease-in-out !important; 
}

/* Vạch phân cách giữa các nhóm nút liên quan */
.fss-toolbar-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 4px;
  flex-shrink: 0;
}
.fss-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Biến thể MÀU RIÊNG cho từng nút ─────────────────────────────────────
   Vẫn giữ NGUYÊN khung/kích thước/font đồng nhất của .fss-tbtn (để không
   quay lại kiểu "cầu vồng" lộn xộn cũ) — chỉ đổi màu viền + icon + nền tint
   nhẹ theo từng nút, chữ vẫn giữ màu sáng trung tính để luôn dễ đọc. */
.fss-tbtn.fss-tbtn--green   { border-color: rgba(46, 160, 67, 0.38)   !important; }
.fss-tbtn.fss-tbtn--cyan    { border-color: rgba(34, 184, 207, 0.38)  !important; }
.fss-tbtn.fss-tbtn--blue    { border-color: rgba(59, 130, 246, 0.38)  !important; }
.fss-tbtn.fss-tbtn--violet  { border-color: rgba(167, 139, 250, 0.38) !important; }
.fss-tbtn.fss-tbtn--amber   { border-color: rgba(245, 158, 11, 0.38)  !important; }
.fss-tbtn.fss-tbtn--red     { border-color: rgba(248, 81, 73, 0.38)   !important; }
.fss-tbtn.fss-tbtn--gold    { border-color: rgba(234, 179, 8, 0.38)   !important; }
.fss-tbtn.fss-tbtn--lime    { border-color: rgba(216, 239, 68, 0.38)  !important; }

.fss-tbtn.fss-tbtn--green   .fss-tbtn-icon { color: #3fb950 !important; }
.fss-tbtn.fss-tbtn--cyan    .fss-tbtn-icon { color: #22b8cf !important; }
.fss-tbtn.fss-tbtn--blue    .fss-tbtn-icon { color: #58a6ff !important; }
.fss-tbtn.fss-tbtn--violet  .fss-tbtn-icon { color: #a78bfa !important; }
.fss-tbtn.fss-tbtn--amber   .fss-tbtn-icon { color: #f59e0b !important; }
.fss-tbtn.fss-tbtn--red     .fss-tbtn-icon { color: #f85149 !important; }
.fss-tbtn.fss-tbtn--gold    .fss-tbtn-icon { color: #eab308 !important; }
.fss-tbtn.fss-tbtn--lime    .fss-tbtn-icon { color: #d8ef44 !important; }

.fss-tbtn.fss-tbtn--green:hover   { background: rgba(46, 160, 67, 0.12)   !important; border-color: #3fb950 !important; }
.fss-tbtn.fss-tbtn--cyan:hover    { background: rgba(34, 184, 207, 0.12)  !important; border-color: #22b8cf !important; }
.fss-tbtn.fss-tbtn--blue:hover    { background: rgba(59, 130, 246, 0.12)  !important; border-color: #58a6ff !important; }
.fss-tbtn.fss-tbtn--violet:hover  { background: rgba(167, 139, 250, 0.12) !important; border-color: #a78bfa !important; }
.fss-tbtn.fss-tbtn--amber:hover   { background: rgba(245, 158, 11, 0.12)  !important; border-color: #f59e0b !important; }
.fss-tbtn.fss-tbtn--red:hover     { background: rgba(248, 81, 73, 0.12)   !important; border-color: #f85149 !important; }
.fss-tbtn.fss-tbtn--gold:hover    { background: rgba(234, 179, 8, 0.12)   !important; border-color: #eab308 !important; }
.fss-tbtn.fss-tbtn--lime:hover    { background: rgba(216, 239, 68, 0.12)  !important; border-color: #d8ef44 !important; }

.fss-tbtn.fss-tbtn--green:hover   .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--cyan:hover    .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--blue:hover    .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--violet:hover  .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--amber:hover   .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--red:hover     .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--gold:hover    .fss-tbtn-icon,
.fss-tbtn.fss-tbtn--lime:hover    .fss-tbtn-icon { color: inherit; filter: brightness(1.15); }
.fss-tbtn.fss-tbtn--green:hover   { color: #d3f2d8 !important; }
.fss-tbtn.fss-tbtn--cyan:hover    { color: #d0f2f7 !important; }
.fss-tbtn.fss-tbtn--blue:hover    { color: #d6e6fd !important; }
.fss-tbtn.fss-tbtn--violet:hover  { color: #e6dffc !important; }
.fss-tbtn.fss-tbtn--amber:hover   { color: #fce4bb !important; }
.fss-tbtn.fss-tbtn--red:hover     { color: #fdd2cf !important; }
.fss-tbtn.fss-tbtn--gold:hover    { color: #fbecb0 !important; }
.fss-tbtn.fss-tbtn--lime:hover    { color: #f2fac0 !important; }

[data-theme="light"] .fss-tbtn.fss-tbtn--green,
[data-theme="light"] .fss-tbtn.fss-tbtn--cyan,
[data-theme="light"] .fss-tbtn.fss-tbtn--blue,
[data-theme="light"] .fss-tbtn.fss-tbtn--violet,
[data-theme="light"] .fss-tbtn.fss-tbtn--amber,
[data-theme="light"] .fss-tbtn.fss-tbtn--red,
[data-theme="light"] .fss-tbtn.fss-tbtn--gold,
[data-theme="light"] .fss-tbtn.fss-tbtn--lime { color: #334155 !important; }

[data-theme="light"] .fss-tbtn {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #475569 !important;
}
[data-theme="light"] .fss-tbtn:hover {
  background: rgba(0, 87, 217, 0.06) !important;
  border-color: rgba(0, 87, 217, 0.35) !important;
  color: #0f172a !important;
}
[data-theme="light"] .fss-tbtn .fss-tbtn-icon { color: #64748b; }
[data-theme="light"] .fss-toolbar-divider { background: rgba(15, 23, 42, 0.10); }


.premium-wrapper {
  position: relative;
}

.premium-wrapper.premium-locked .premium-content {
  filter: blur(6px) brightness(0.6);
  user-select: none;
  pointer-events: none;
  transition: filter 0.25s ease;
}

.premium-wrapper.premium-unlocked .premium-content {
  filter: none;
}

.premium-wrapper.premium-unlocked .premium-overlay {
  display: none;
}

.premium-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(11,19,43,0.35) 0%, rgba(11,19,43,0.85) 100%);
  border-radius: var(--radius-lg, 12px);
  transition: background 0.2s ease;
}

.premium-overlay:hover {
  background: linear-gradient(180deg, rgba(11,19,43,0.45) 0%, rgba(11,19,43,0.92) 100%);
}

.premium-overlay span {
  color: #e5e7eb !important;
}

.premium-overlay:hover span {
  color: #ffffff !important;
}

/* ── Dòng bị khoá VIP trong AG-Grid ── */
.ag-theme-alpine-dark .ag-row.fss-locked-row {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}

.fss-grid-lock-banner-wrap {
  position: relative;
  margin-top: -120px;   /* đè lên phần cuối grid */
  z-index: 10;
  pointer-events: none;
}
.fss-grid-lock-banner-wrap > div {
  pointer-events: auto;
}
/* ══════════════════════════════════════════════════════════════
   CANONICAL LOCK — AG GRID FONT & ROW HEIGHT
   Đặt cuối file để thắng tất cả các block trên.
   Chỉ dùng !important ở đây, không dùng ở block 383.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .ag-theme-alpine-dark {
  --ag-row-height: 40px !important;
  --ag-header-height: 40px !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}
/* Màu chữ mặc định — KHÔNG !important để .metric-positive/.metric-negative
   và inline cellStyle (Python, xanh/đỏ tăng giảm) vẫn thắng được */
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell {
  color: #b2c9e0;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell[class*="rightAligned"] {
  font-family: 'Roboto Mono', 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-header-cell {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #5d7a96 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell[col-id="Ticker"] {
  font-family: 'Sora', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #1E88E5 !important;   /* xanh lá thương hiệu Vietcap */
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell[col-id="Company Name"],
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell[col-id="Sector"],
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell[col-id="Industry"] {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
[data-theme="dark"] .ag-theme-alpine-dark .ag-cell-value:empty::after {
  content: '—';
  color: #1d4d80;
  font-family: 'Inter', sans-serif !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-cell {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-cell[class*="rightAligned"] {
  font-family: 'Roboto Mono', 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums !important;
}
[data-theme="light"] .ag-theme-alpine-dark .ag-cell[col-id="Ticker"] {
  font-family: 'Sora', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0057D9 !important;   /* xanh lá Vietcap tone light */
}
[data-theme="light"] .ag-theme-alpine-dark {
  --ag-row-height: 40px !important;
  --ag-header-height: 40px !important;
}

/* ── Stat cards trong hero banner (1500+ mã, 165+ chỉ báo, 3 sàn) ─── */
.fss-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.fss-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid rgba(120, 160, 210, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fss-stat-icon {
  font-size: 15px;
  color: #1E88E5;
  opacity: 0.85;
  flex-shrink: 0;
}

.fss-stat-value {
  font-family: 'Roboto Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #eef4fb;
  line-height: 1.2;
}

.fss-stat-label {
  font-size: 11px;
  color: rgba(200, 220, 240, 0.6);
  margin-top: 2px;
}

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

/* ══════════════════════════════════════════════════════
   PROFILE SYSTEM — Avatar button + Modal
══════════════════════════════════════════════════════ */

/* Nút avatar trên navbar */
.fss-nav-avatar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fss-nav-avatar-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}

/* Circle avatar nhỏ trên navbar */
.fss-nav-avatar-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

/* VIP badge */
.vip-badge {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.06em;
  color: #0B132B;
  background: linear-gradient(135deg, #1E88E5, #0057D9);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Profile modal content */
.fss-profile-modal-content {
  background: #0f1829 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  overflow: visible !important;
  position: relative;
}

/* Avatar lớn trong modal */
.fss-profile-avatar-lg {
  width: 80px; height: 80px;
  border-radius: 50%;
  margin: 0 auto 16px;
  font-size: 32px; font-weight: 700;
  border: 3px solid rgba(255,255,255,0.10);
  overflow: hidden;
}

/* Avatar picker row */
.fss-avatar-picker {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fss-avatar-opt {
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.10);
  transition: border-color 0.15s, transform 0.15s;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.fss-avatar-opt:hover {
  border-color: #0057D9;
  transform: scale(1.08);
}
.fss-avatar-opt--img {
  object-fit: cover;
  width: 42px; height: 42px;
}

/* Upload mock button */
.fss-avatar-upload-btn {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  margin-bottom: 24px;
  padding: 6px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 8px;
  transition: color 0.15s, border-color 0.15s;
}
.fss-avatar-upload-btn:hover {
  color: #9ca3af;
  border-color: rgba(255,255,255,0.20);
}

/* Read-only field */
.fss-profile-readonly-field {
  padding: 9px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 14px;
  color: #e5e7eb;
  font-weight: 500;
}

/* Investor profile tags */
.fss-profile-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0,144,255,0.10);
  border: 1px solid rgba(0,144,255,0.20);
  border-radius: 20px;
  font-size: 12px;
  color: #7ab8d0;
  font-weight: 500;
}

/* Avatar section centering */
.fss-profile-avatar-section {
  text-align: center;
  margin-bottom: 20px;
}

/* ============================================================================
   ☀️ LIGHT MODE CHO HERO SLIDESHOW (SỰ KIỆN TÀI CHÍNH)
   ============================================================================ */

/* 1. Đổi nền tổng và làm sáng ảnh nền */
[data-theme="light"] .hero {
    background: #f8f9fa !important;
}
[data-theme="light"] .hero-bg {
    /* Giảm độ xám, tăng độ sáng để ảnh nền hợp với theme trắng */
    filter: grayscale(30%) brightness(0.95) blur(1px) !important;
}

/* 2. Lật ngược màng che (overlay) từ Đen sang Trắng */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0) 100%) !important;
}

/* 3. Đổi màu Text chính (Năm, Tiêu đề, Mô tả) sang xám đen */
[data-theme="light"] .hero-year {
    color: #0f172a !important;
    text-shadow: 0 0 60px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .hero-tagline {
    color: #1e293b !important;
}
[data-theme="light"] .hero-desc {
    color: #475569 !important;
}

/* Ép các chữ highlight (Màu xanh, cam) đậm xuống một xíu để dễ đọc trên nền trắng */
[data-theme="light"] .hero-tagline .hl-green { color: #059669 !important; } 
[data-theme="light"] .hero-tagline .hl-amber { color: #d97706 !important; } 

/* 4. Đổi màu Stats (Chỉ số Biến động/Dữ liệu) */
[data-theme="light"] .stat-label {
    color: #64748b !important;
}
[data-theme="light"] .stat-divider {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* 5. Nút bấm và các Text phụ (Counter, Credit, Legend) */
[data-theme="light"] .hero-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .hero-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}
[data-theme="light"] .hero-counter,
[data-theme="light"] .hero-keys,
[data-theme="light"] .hero-credit,
[data-theme="light"] .legend-dot-item {
    color: #64748b !important;
}

/* 6. Thanh Timeline và các Tab Kỷ nguyên ở dưới cùng */
[data-theme="light"] .hero-timeline {
    background: rgba(255, 255, 255, 0.9) !important;
    border-top: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .tl-tick-label {
    color: #64748b !important;
}
[data-theme="light"] .tl-event-dot {
    border-color: #ffffff !important; /* Viền trắng để các chấm màu nổi lên */
}
[data-theme="light"] .tl-event-dot.active {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .hero-eras {
    border-top: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .era-tab {
    color: #64748b !important;
    border-right: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .era-tab:hover,
[data-theme="light"] .era-tab.active {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================================
   ☀️ LIGHT MODE CHO ONBOARDING (ĐẶC TRỊ NỀN HARDCODE VÀ MÀU ẨN)
   ============================================================================ */

/* 1. KHỐI SỨ MỆNH FSS: Tẩy gradient xanh lá, ép sang xanh dương nhạt */
[data-theme="light"] .fss-congrats-match-card,
[data-theme="light"] .disclaimer {
    background: rgba(0, 87, 217, 0.05) !important;
    background-color: rgba(0, 87, 217, 0.05) !important;
    background-image: none !important; /* Xóa sổ màu loang (gradient) */
    border: 1px solid rgba(0, 87, 217, 0.2) !important;
    border-left: 4px solid #0057D9 !important;
}

/* Chữ trong Sứ mệnh đổi sang xám đậm */
[data-theme="light"] .fss-congrats-match-card *,
[data-theme="light"] .disclaimer * {
    color: #334155 !important;
}

/* 2. CÁC THẺ KẾT QUẢ TỐI (NAVY, XÁM ĐEN) SANG TRẮNG */
/* Bắt keyword mã màu bất chấp định dạng rgb hay hex */
[data-theme="light"] #onboarding-page div[style*="0f172a" i],
[data-theme="light"] #onboarding-page div[style*="15, 23, 42" i],
[data-theme="light"] #onboarding-page div[style*="1e293b" i],
[data-theme="light"] #onboarding-page div[style*="30, 41, 59" i],
[data-theme="light"] #onboarding-page div[style*="0a1628" i] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* 3. THẺ KẾT LUẬN "THẬN TRỌNG" (XANH RÊU ĐEN) SANG XANH LỤC NHẠT */
[data-theme="light"] #onboarding-page div[style*="052e16" i],
[data-theme="light"] #onboarding-page div[style*="5, 46, 22" i] {
    background: #ecfdf5 !important;
    background-color: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
}
/* Đổi chữ bên trong thẻ Thận trọng cho sắc nét */
[data-theme="light"] #onboarding-page div[style*="052e16" i] *,
[data-theme="light"] #onboarding-page div[style*="5, 46, 22" i] * {
    color: #065f46 !important;
}

/* 4. TRACK PROGRESS BAR (XÁM ĐEN) SANG XÁM NHẠT */
[data-theme="light"] #onboarding-page div[style*="334155" i],
[data-theme="light"] #onboarding-page div[style*="51, 65, 85" i] {
    background: #e2e8f0 !important;
    background-color: #e2e8f0 !important;
}

/* 5. TẨY MÀU CHỮ BỊ TÀNG HÌNH (TRẮNG, XÁM MỜ) THÀNH XÁM ĐẬM */
[data-theme="light"] #onboarding-page span[style*="94a3b8" i],
[data-theme="light"] #onboarding-page span[style*="cbd5e1" i],
[data-theme="light"] #onboarding-page span[style*="ffffff" i],
[data-theme="light"] #onboarding-page span[style*="e8f4ff" i],
[data-theme="light"] #onboarding-page div[style*="94a3b8" i],
[data-theme="light"] #onboarding-page div[style*="cbd5e1" i],
[data-theme="light"] #onboarding-page div[style*="ffffff" i],
[data-theme="light"] #onboarding-page div[style*="e8f4ff" i] {
    color: #334155 !important;
}
/* ============================================================
   FAQ SECTION — theme-aware (fix: trước đây hard-code hex nên
   không đổi màu theo data-theme, khiến khối này "kẹt" ở nền tối
   khi chuyển sang theme sáng)
   ============================================================ */
.fss-faq-section {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 80px auto 60px auto;
    padding: 40px;
    align-items: flex-start;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fss-faq-header {
    flex: 0 0 320px;
    margin-bottom: 40px;
}

.fss-faq-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 72px;
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: 0;
}

.fss-faq-title-dot {
    color: var(--accent);
}

.fss-faq-desc {
    color: var(--text-muted);
    font-size: 14px;
    max-width: 250px;
    margin-top: 24px;
    line-height: 1.55;
}

.fss-faq-list {
    flex: 1;
    border-top: 1px solid var(--border-subtle);
}

.fss-faq-item {
    border-bottom: 1px solid var(--border-subtle);
    padding: 32px 0;
}

.fss-faq-btn {
    width: 100%;
    display: flex;
    align-items: baseline;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.fss-faq-index {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    width: 40px;
    text-align: left;
    flex-shrink: 0;
}

.fss-faq-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--text-primary);
    flex: 1;
    text-align: left;
    letter-spacing: -0.01em;
}

.fss-faq-icon {
    font-size: 28px;
    color: var(--text-muted);
    line-height: 1;
    transition: color 0.2s ease;
}

.fss-faq-icon.is-active {
    color: var(--accent);
}

.fss-faq-answer {
    margin-left: 40px;
    margin-top: 16px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 620px;
}

/* Định nghĩa keyframes chung cho hiệu ứng nhịp thở / tỏa sáng */
@keyframes softGlowCyan {
  0% {
    box-shadow: 0 0 0px rgba(13, 202, 240, 0);
    border-color: rgba(13, 202, 240, 0.35);
  }
  50% {
    box-shadow: 0 0 12px rgba(13, 202, 240, 0.7), inset 0 0 6px rgba(13, 202, 240, 0.3);
    border-color: rgba(13, 202, 240, 1);
  }
  100% {
    box-shadow: 0 0 0px rgba(13, 202, 240, 0);
    border-color: rgba(13, 202, 240, 0.35);
  }
}

.fss-tour-pulse {
    background-color: #0dcaf0 !important; /* Xanh lơ sáng */
    color: #ffffff !important; /* Chữ trắng */
    font-weight: 600;
    border: 0.5px solid rgba(13, 202, 240, 0.35) !important; /* Thêm border nhẹ để hiệu ứng boxShadow hiển thị rõ nét */
    border-radius: 8px;
    padding: 8px 15px;
    animation: softGlowCyan 2.5s infinite ease-in-out !important; /* Đồng bộ thời gian 2.5s với nút Công cụ */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fss-tour-pulse i {
    margin-right: 6px;
}

.fss-tour-pulse:hover {
    transform: scale(1.05); /* Phóng to nhẹ khi rê chuột vào */
    animation: softGlowCyan 1.2s infinite ease-in-out !important; /* Tăng tốc nhịp đập khi hover cho sinh động */
}

.fss-tour-pulsee {
    background-color: #0dcaf0 !important; /* Xanh lơ sáng */
    color: #000000 !important; /* Chữ xanh đen */
    font-weight: 600;
    border: none !important;
    border-radius: 8px;
    padding: 8px 15px;
    animation: pulse-animation 2s infinite; /* Gọi hiệu ứng nhấp nháy */
    transition: transform 0.2s ease;
}

.fss-tour-pulsee i {
    margin-right: 6px;
}

.fss-tour-pulsee:hover {
    transform: scale(1.05); /* Phóng to nhẹ khi rê chuột vào */
}

/* Hiệu ứng tỏa sáng xung quanh nút */
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(13, 202, 240, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 202, 240, 0);
    }
}

html {
    scroll-behavior: smooth;
}

.vietcap-header-bg-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fss-contact-demo-modal-content {
    background-color: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
}

/* Khi chưa có VIP (có class premium-locked) thì nội dung bên trong bị mờ */
.premium-locked .premium-content {
    opacity: 0.2;
    pointer-events: none; /* Không cho phép click xuyên qua lớp mờ */
}

/* Ẩn hoàn toàn overlay ổ khóa nếu mất class premium-locked (đã mua VIP) */
.premium-wrapper:not(.premium-locked) .premium-overlay {
    display: none !important;
}

/* ── Card clickable — toàn bộ card là 1 vùng bấm ── */
.home-pick-card-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.home-pick-card-clickable:hover {
  border-color: rgba(0, 144, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Chevron chỉ hiện khi hover ── */
.home-pick-card-chevron {
  color: #4b5563;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.home-pick-card-clickable:hover .home-pick-card-chevron {
  opacity: 1;
  transform: translateX(2px);
}

/* ── Ticker row: ticker trái, avg score + sao phải ── */
.home-pick-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-pick-card-avgscore-inline {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent2, #00c8ff);
  margin-left: auto;   /* ← đẩy điểm số + mọi thứ sau nó sang phải */
}

.home-pick-card-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;    /* dính sát điểm số */
}
/* ── Breakdown — NEUTRAL hoàn toàn ── */
.home-pick-score-breakdown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.home-pick-score-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.home-pick-score-label {
  font-size: 10px;
  color: #6b7280;         /* xám — neutral */
}
.home-pick-score-value {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  color: #6b7280;         /* trắng nhạt — neutral, KHÔNG còn 3 màu khác nhau */
}
.home-pick-score-dot {
  color: #374151;
  font-size: 10px;
}







/* Hero link buttons hover state */
.hero-link-btn:hover {
    opacity: 1 !important;
    text-decoration-color: rgba(255,255,255,0.6) !important;
}

.hero-link-btn:active {
    opacity: 0.8 !important;
}






/* ══════════════════════════════════════════════════════
   NOTIFICATION BELL + PANEL
══════════════════════════════════════════════════════ */

.fss-notif-bell-wrap {
  position: relative;
}

.fss-notif-bell-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #4A90E2;                 /* xanh nước biển — cùng theme logo thefiwi */
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.fss-notif-bell-btn:hover {
  background: rgba(74,144,226,0.12);
  border-color: rgba(74,144,226,0.35);
}

.fss-notif-dot {
  position: absolute;
  top: 6px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid #0B132B;
  display: block;   /* mặc định CÓ chấm đỏ (có thông báo mới) */
}

/* ── Panel ───────────────────────────────────────────── */
.fss-notif-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: 380px;
  max-height: 520px;
  background: #0f1829;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 2000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fss-notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fss-notif-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
}
.fss-notif-panel-mark-all {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}
.fss-notif-panel-mark-all:hover {
  color: #4A90E2;
}

/* ── Tabs ────────────────────────────────────────────── */
.fss-notif-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
}
.fss-notif-tab {
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fss-notif-tab.is-active {
  background: #4A90E2;
  color: #ffffff;
}
.fss-notif-tab:hover:not(.is-active) {
  background: rgba(255,255,255,0.09);
}

/* ── List ────────────────────────────────────────────── */
.fss-notif-list {
  overflow-y: auto;
  padding: 0 12px 12px;
  flex: 1;
}

/* ── Card ────────────────────────────────────────────── */
.fss-notif-card {
  position: relative;
  background: #16213e;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s;
}
.fss-notif-card:hover {
  background: #1a2847;
}

/* Thanh xanh dọc bên trái = CHƯA ĐỌC */
.fss-notif-card.is-unread::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: #4A90E2;
}

.fss-notif-card-inner {
  padding: 13px 14px 11px 17px;
}

.fss-notif-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.fss-notif-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #e5e7eb;
  line-height: 1.4;
}
.fss-notif-card-dismiss {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #9ca3af;
  font-size: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fss-notif-card-dismiss:hover {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.fss-notif-card-body {
  margin-top: 6px;
}
.fss-notif-card-tickers {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
}

.fss-notif-card-bottom {
  margin-top: 8px;
}
.fss-notif-card-date {
  font-size: 11px;
  color: #6b7280;
}

/* ── Category tag ── */
.fss-notif-cat {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.fss-notif-cat--blue  { color: #60a5fa; background: rgba(96,165,250,0.10); }
.fss-notif-cat--cyan  { color: #22d3ee; background: rgba(34,211,238,0.10); }
.fss-notif-cat--amber { color: #fbbf24; background: rgba(251,191,36,0.10); }
.fss-notif-cat--red   { color: #f87171; background: rgba(248,113,113,0.10); }
.fss-notif-cat--gray  { color: #9ca3af; background: rgba(156,163,175,0.10); }

.fss-notif-card-detail {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.55;
}
.fss-notif-card-cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4A90E2;
}

.fss-notif-card-note {
  margin-top: 6px;
  font-size: 10.5px;
  font-style: italic;
  color: #6b7280;
}

.fss-notif-expand-btn {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border: none;
  color: #4A90E2;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.fss-notif-expand-btn:hover {
  color: #6ba8ea;
  text-decoration: underline;
}

.fss-notif-card--tour {
  background: linear-gradient(135deg, rgba(74,144,226,0.10), rgba(0,229,255,0.05));
  border: 1px solid rgba(74,144,226,0.25);
}
.fss-notif-card--tour:hover {
  background: linear-gradient(135deg, rgba(74,144,226,0.16), rgba(0,229,255,0.08));
}

/* ============================================================================
   OVERRIDE: CUSTOM RANGE SLIDER (THEME XANH DƯƠNG MỚI)
   ============================================================================ */

/* Đổi màu dải nối (track) từ gradient sang màu xanh đậm solid */
.custom-range-slider .rc-slider-track {
  background: #1A73E8 !important; 
  box-shadow: 0 0 6px rgba(26, 115, 232, 0.4) !important;
}

/* Đổi màu cục kéo (handle) thành xanh đặc, xóa viền đục */
.custom-range-slider .rc-slider-handle {
  background-color: #1A73E8 !important;
  border: 2px solid #1A73E8 !important; 
  box-shadow: 0 0 6px rgba(26, 115, 232, 0.5) !important;
}

/* Hiệu ứng sáng lên (glow) khi di chuột hoặc đang kéo */
.custom-range-slider .rc-slider-handle:hover,
.custom-range-slider .rc-slider-handle:active {
  box-shadow: 0 0 12px rgba(26, 115, 232, 0.8) !important;
  background-color: #1557B0 !important; /* Làm màu tối đi một chút khi tương tác */
  border-color: #1557B0 !important;
}

/* Đồng bộ luôn màu của cái tooltip nhỏ xíu (nếu bạn vẫn đang để nó hiển thị) */
.custom-range-slider .rc-slider-handle::after {
    color: #1A73E8 !important;
}

/* ============================================================================
   OVERRIDE: THEME XANH NGỌC (CYAN) CÓ BORDER TỐI MÀU
   ============================================================================ */

/* Màu của dải nối (track) */
.custom-range-slider .rc-slider-track {
  background: #00d4ff !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

/* Hình tròn (handle) với border tối màu tạo nét cắt rõ ràng */
.custom-range-slider .rc-slider-handle {
  background-color: #00d4ff !important;
  border: 3px solid #161b22 !important; /* CHÍNH LÀ LỚP VIỀN TỐI NÀY */
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.7) !important;
  width: 16px !important; /* Tăng size lên 1 chút để viền nhìn rõ hơn */
  height: 16px !important;
  margin-top: -6px !important; /* Chỉnh lại để căn giữa với ray */
}

/* Hiệu ứng sáng bừng lên khi hover hoặc đang kéo */
.custom-range-slider .rc-slider-handle:hover,
.custom-range-slider .rc-slider-handle:active {
  box-shadow: 0 0 14px rgba(0, 212, 255, 1) !important;
  background-color: #00e5ff !important;
  transform: translateX(-50%) scale(1.15) !important; /* Phóng to nhẹ khi kéo */
}

/* Đổi màu chữ của tooltip về màu xanh ngọc */
.custom-range-slider .rc-slider-handle::after {
    color: #00d4ff !important;
}

/* ══════════════════════════════════════════════════════
   FILTER MANAGER MODAL
══════════════════════════════════════════════════════ */
.fm-modal-content {
  background: #0f1829 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 24px 22px 20px;
  position: relative;
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fm-modal-close-btn {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none;
  color: #9ca3af; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.fm-modal-title {
  font-size: 17px; font-weight: 700; color: #e5e7eb;
  margin-bottom: 16px;
}

/* ── Tabs ── */
.fm-tabs {
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px; padding: 4px;
  margin-bottom: 16px; width: fit-content;
}
.fm-tab {
  background: transparent; border: none;
  padding: 7px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #9ca3af;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.fm-tab.is-active {
  background: #16213e; color: #ffffff;
}

/* ── Panel / list ── */
.fm-panel {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fm-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #16213e;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  transition: background 0.15s;
}
.fm-row:hover { background: #1a2847; }

.fm-row-main { cursor: pointer; flex: 1; min-width: 0; }
.fm-row-title-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fm-row-name { font-size: 13.5px; font-weight: 600; color: #e5e7eb; }
.fm-row-default-tag {
  font-size: 9px; font-weight: 700; color: #4A90E2;
  background: rgba(74,144,226,0.12); padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em;
}
.fm-row-count-badge {
  font-size: 11px; color: #6b7280;
}
.fm-row-count-badge--muted { font-style: italic; }

.fm-row-meta-line { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.fm-row-stat { font-size: 11px; color: #6b7280; }
.fm-row-author { font-size: 11px; color: #4A90E2; }

/* ── Kebab menu ── */
.fm-row-kebab-wrap { position: relative; flex-shrink: 0; margin-left: 10px; }
.fm-kebab-btn {
  background: transparent; border: none; color: #6b7280;
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
}
.fm-kebab-btn:hover { background: rgba(255,255,255,0.08); color: #e5e7eb; }

.fm-kebab-menu {
  position: absolute; top: 30px; right: 0;
  background: #1a2540; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; padding: 6px; min-width: 170px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 50;
}
.fm-kebab-item {
  display: flex; align-items: center;
  font-size: 12px; color: #d1d5db;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.fm-kebab-item:hover { background: rgba(255,255,255,0.06); }
.fm-kebab-item--danger { color: #f87171; }

/* ── Community search + filter ── */
.fm-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.fm-search-box {
  flex: 1; display: flex; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 9px 12px;
}
.fm-search-input {
  background: transparent; border: none; outline: none;
  color: #e5e7eb; font-size: 13px; flex: 1;
}
.fm-filter-icon-btn {
  width: 38px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  color: #9ca3af; cursor: pointer;
}
.fm-filter-icon-btn:hover { color: #4A90E2; border-color: rgba(74,144,226,0.35); }

.fm-community-filter-panel {
  position: absolute; top: 90px; right: 24px;
  width: 300px; background: #16213e;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
  padding: 18px; z-index: 60;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.fm-popover-label {
  font-size: 11px; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.fm-radio-group { display: flex; gap: 16px; }
.fm-radio-label { font-size: 12px; color: #d1d5db; margin-right: 4px; }
.fm-radio-input { margin-right: 4px; }
.fm-popover-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
}
.fm-btn-reset {
  background: transparent; border: none; color: #9ca3af;
  font-size: 12px; cursor: pointer;
}
.fm-btn-apply {
  background: linear-gradient(135deg, #0090ff, #00c8ff);
  border: none; color: #fff; font-size: 12px; font-weight: 700;
  padding: 8px 20px; border-radius: 8px; cursor: pointer;
}

/* Modal content nền tối cho filter-manager-modal (Bootstrap Modal mặc định) */
#filter-manager-modal .modal-content {
  background-color: #0d1117 !important;
  border: 1px solid #30363d !important;
}
#filter-manager-modal .modal-header {
  background-color: #0d1117 !important;
  border-bottom: 1px solid #30363d !important;
}
#filter-manager-modal .btn-close {
  filter: invert(1);
}

.fm-row-top-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #001a20;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.fm-row--top {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251,191,36,0.06), #16213e 40%);
}