/* ==========================================================================
   PROTREND DESIGN SYSTEM - MASTER THEME CSS
   Phiên bản: 6.0 | Cập nhật: Cấu trúc chuẩn - Bảo toàn 100% Code Gốc
   ========================================================================== */

/* =========================================================
   1. CSS VARIABLES (HỆ THỐNG BIẾN & LIGHT/DARK MODE)
   ========================================================= */
/* Mặc định (Dark Mode) */
:root {
    --bg-body: #111827;
    --bg-table-header: #223149;
    --bg-table-row: transparent;
    --bg-table-hover: rgba(250, 204, 21, 0.15);
    
    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    
    --border-color: #374151;
    --border-row: rgba(255, 255, 255, 0.05);

    --color-up: #22c55e;
    --color-down: #ff1f1f;
    --color-ref: #fae315;
    --color-ceil: #e951e9;
    
    --theme-bg: #111827 center/cover no-repeat fixed;
    --glass-bg: rgba(17, 24, 39, 0.7); 
    --glass-border: #374151;
}

/* Chế độ Sáng (Light Mode Overrides) */
[data-theme="light"] {
    --bg-body: #F4F6F8;           
    --bg-table-header: #E9EEF5;   
    --bg-table-row: #ffffffe2;      
    --bg-table-hover: #e2e8f0;    
    
    --text-main: #0f172a;         
    --text-muted: #64748b;        
    
    --border-color: #D8DEE8;
    --border-row: #f1f5f9;
    
    --theme-bg: var(--bg-body) !important; 
    --glass-bg: rgba(255, 255, 255, 0.85); 
    --glass-border: #cbd5e1;
    
    --color-up: #16a34a;          
    --color-down: #dc2626;        
    --color-ref: #f1b612;         
    --color-ceil: #9333ea;        
}

/* Ép màu khối nổi Tailwind sang nền Sáng */
[data-theme="light"] .bg-slate-800 {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}

/* =========================================================
   2. BASE, LAYOUT & TYPOGRAPHY (NỀN TẢNG CHUNG)
   ========================================================= */
html, body { height: 100%; background: var(--theme-bg) !important; }
body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-body) !important; 
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-fill-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.page-fill-layout > main { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; }
.content-wrapper { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }
.filter-bar { flex-shrink: 0; position: relative; z-index: 200; }
#views-container { flex-grow: 1; position: relative; min-height: 0; overflow-y: auto; overflow-x: auto; }

.glass-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

#loading-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.8); 
    display: none; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.3s;
}
[data-theme="light"] #loading-overlay { background-color: rgba(255, 255, 255, 0.85) !important; color: #1e40af !important; font-weight: 600; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #080a10; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.positive { color: var(--color-up) !important; }
.negative { color: var(--color-down) !important; }
.neutral { color: var(--color-ref) !important; }
.ceiling-hit { color: var(--color-ceil) !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* =========================================================
   3. HEADER & NAVIGATION
   ========================================================= */
.sticky-header-container { position: sticky; top: 0; z-index: 9999 !important; }
.nav-link { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; color: #d1d5db; transition: all 0.2s; white-space: nowrap; }
.nav-link:hover { background-color: #374151; color: #ffffff; }
.nav-link.active { background-color: rgba(30, 41, 59, 0.8) !important; border: 1px solid #facc15 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(250, 204, 21, 0.4) !important; animation: none; }

.unread-dot { width: 8px; height: 8px; background-color: #3b82f6; border-radius: 50%; flex-shrink: 0; margin-top: 5px; transition: opacity 0.3s; }
.timestamp-icon { margin-right: 6px; color: #6b7280; }
.user-menu-icon { width: 1.25rem; text-align: center; margin-right: 0.75rem; color: #9ca3af; transition: color 0.2s; }
.user-menu-item:hover .user-menu-icon { color: #facc15; }
.user-menu-item:hover span { color: #ffffff; }

[data-theme="light"] header.glass-panel { background: linear-gradient(135deg, #0f172a 0%, #090d16 50%, #172554 100%) !important; border: none !important; border-bottom: 1px solid #1e293b !important; box-shadow: none !important; }
[data-theme="light"] nav.glass-panel { background: linear-gradient(135deg, #090d16 0%, #0f172a 100%) !important; border: none !important; border-bottom: 1px solid #1e293b !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08) !important; }[data-theme="light"] nav.glass-panel .nav-link { color: #cbd5e1 !important; }
[data-theme="light"] nav.glass-panel .nav-link:hover { color: #ffffff !important; background-color: rgba(59, 130, 246, 0.15) !important; }
[data-theme="light"] nav.glass-panel .nav-link.active { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important; color: #ffffff !important; border: 1px solid #facc15 !important; box-shadow: 0 0 12px rgba(250, 204, 21, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; }
[data-theme="light"] header h1, [data-theme="light"] header .text-3xl, [data-theme="light"] header .text-white, [data-theme="light"] header .text-gray-100, [data-theme="light"] header .text-gray-200, [data-theme="light"] header .text-gray-300 { color: #ffffff !important; fill: #ffffff !important; }
[data-theme="light"] header .text-gray-400, [data-theme="light"] header .text-gray-500 { color: #94a3b8 !important; }
[data-theme="light"] header .italic, [data-theme="light"] header .text-yellow-400, [data-theme="light"] header .text-yellow-500, [data-theme="light"] header p { color: #facc15 !important; }
[data-theme="light"] header i:hover { color: #facc15 !important; }

/* Menu Hỗ Trợ Light Mode */
[data-theme="light"] nav .group .bg-gray-800 { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; }
[data-theme="light"] nav .group .bg-gray-800.rotate-45 { box-shadow: none !important; }
[data-theme="light"] nav .group a.text-gray-300 { color: #475569 !important; }
[data-theme="light"] nav .group a i.text-gray-400 { color: #94a3b8 !important; }
[data-theme="light"] nav .group a.border-gray-700\/30 { border-color: #e2e8f0 !important; }
[data-theme="light"] nav .group a.hover\:bg-slate-700:hover { background-color: #f1f5f9 !important; color: #0f172a !important; }
[data-theme="light"] nav .group a.hover\:bg-slate-700:hover i { color: #2563eb !important; }
[data-theme="light"] nav .group a.bg-slate-700\/50, [data-theme="light"] nav .group a.text-yellow-400.bg-slate-700\/50 { background-color: #eff6ff !important; color: #1e40af !important; font-weight: 700 !important; }
[data-theme="light"] nav .group a.bg-slate-700\/50 i { color: #2563eb !important; }
[data-theme="light"] nav .group div.bg-green-900\/40 { background-color: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }
[data-theme="light"] nav .group div.bg-red-900\/40 { background-color: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; }
[data-theme="light"] nav span.bg-red-600.text-white { color: #ffffff !important; }

/* Menu Dropdown & Avatar */
[data-theme="light"] #notification-dropdown, [data-theme="light"] #user-menu { background-color: #ffffff !important; border-color: var(--border-color) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; }
[data-theme="light"] #notification-dropdown .bg-slate-900 { background-color: #f8fafc !important; color: var(--text-main) !important; border-color: #e2e8f0 !important; }
[data-theme="light"] #notification-dropdown .bg-slate-800, [data-theme="light"] #user-menu .bg-slate-800 { background-color: #ffffff !important; }
[data-theme="light"] #notification-dropdown .border-slate-700, [data-theme="light"] #user-menu .border-slate-700 { border-color: #e2e8f0 !important; }
[data-theme="light"] .notification-item:hover, [data-theme="light"] .user-menu-item:hover { background-color: #f1f5f9 !important; }
[data-theme="light"] .notification-item.unread, [data-theme="light"] .notification-item.bg-slate-700\/50 { background-color: #f0f9ff !important; }
[data-theme="light"] #notification-dropdown .text-white, [data-theme="light"] #notification-dropdown p.text-gray-200, [data-theme="light"] #user-menu .text-white, [data-theme="light"] .user-menu-item:hover span { color: var(--text-main) !important; }
[data-theme="light"] #notification-dropdown .text-gray-400, [data-theme="light"] #notification-dropdown .text-gray-500, [data-theme="light"] #user-menu .text-gray-300, [data-theme="light"] #user-menu .text-gray-400 { color: var(--text-muted) !important; }
/* Tùy biến màu Huy hiệu Gói dịch vụ (Light Mode) */
[data-theme="light"] .badge-standard { 
    background-color: #eff6ff !important; 
    color: #2563eb !important; 
    border-color: #bfdbfe !important; 
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1) !important; 
}

.tech-avatar-wrapper { position: relative; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1e293b; cursor: pointer; z-index: 1; border: 1px solid rgba(34, 197, 94, 0.4); animation: lucky-breathe 3s infinite alternate ease-in-out; }
.tech-avatar-icon { color: #e2e8f0; font-size: 1.1rem; transition: color 0.3s ease; }
.tech-avatar-wrapper:hover .tech-avatar-icon { color: #a855f7; }

.status-light { width: 6px; height: 6px; border-radius: 50%; transition: all 0.2s ease-in-out; z-index: 50; }
.status-red { background-color: #ef4444; box-shadow: 0 0 4px #ef4444; animation: gentle-pulse 2s infinite; }
.status-green { background-color: #2EED58; box-shadow: 0 0 5px rgba(46, 237, 88, 0.6); animation: ssi-breathe 1.5s infinite ease-in-out; }
.status-yellow { background-color: #eab308; box-shadow: 0 0 5px rgba(234, 179, 8, 0.6); animation: ssi-breathe 1.5s infinite ease-in-out; }

@keyframes lucky-breathe { 0% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.2), inset 0 0 4px rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.5); } 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.5), inset 0 0 6px rgba(168, 85, 247, 0.3); border-color: rgba(168, 85, 247, 0.8); } }
@keyframes pulse-glow-yellow { 0% { box-shadow: 0 0 10px rgba(250, 204, 21, 0.5); } 50% { box-shadow: 0 0 15px 2px rgba(250, 204, 21, 0.7); } 100% { box-shadow: 0 0 10px rgba(250, 204, 21, 0.5); } }
@keyframes gentle-pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
@keyframes ssi-breathe { 0% { box-shadow: 0 0 8px rgba(46, 237, 88, 0.8); opacity: 1; } 50% { box-shadow: 0 0 4px rgba(46, 237, 88, 0.5); opacity: 0.8; } 100% { box-shadow: 0 0 8px rgba(46, 237, 88, 0.8); opacity: 1; } }

/* =========================================================
   4. CORE UI COMPONENTS (CÔNG CỤ TÌM KIẾM, NÚT, DROPDOWN)
   ========================================================= */
.zalo-float-button { position: fixed; bottom: 60px; right: -25px; z-index: 1000; opacity: 0.5; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; padding: 5px; }
.zalo-float-button:hover { right: 25px; opacity: 1; transform: scale(1.1) rotate(-10deg); }
.zalo-float-button img { width: 40px; height: 40px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); }

input[type="text"], input[type="number"], select { background-color: var(--bg-body) !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; backdrop-filter: blur(5px); padding: 8px 12px; border-radius: 4px; font-size: 14px; transition: all 0.2s; }
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: #63B3ED !important; box-shadow: 0 0 5px rgba(99, 179, 237, 0.5) !important; }
input::placeholder { color: var(--text-muted) !important; }

.search-wrapper { position: relative; display: flex; align-items: center; }
#search-input { text-transform: uppercase; padding-right: 25px !important; font-weight: 700; }
#search-input:focus { border-color: #facc15 !important; box-shadow: 0 0 8px rgba(250, 204, 21, 0.4) !important; }
/* Tối ưu ô tìm kiếm khi đang gõ chữ (Dark Mode mặc định) */
#search-input:not(:placeholder-shown) { 
    background-color: #1e293b !important; /* Nền xanh đen (Đồng bộ với các nút Filter đang Active) */
    border-color: #facc15 !important;     /* Viền vàng kim */
    color: #fde047 !important;            /* Chữ vàng sáng */
    font-weight: 700 !important; 
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.4) !important; /* Tỏa sáng nhẹ (Glow) */
}#search-clear-btn { position: absolute; right: 8px; background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 14px; display: none; }
#search-clear-btn:hover { color: #ef4444; }
/* Tối ưu ô tìm kiếm khi đang gõ chữ (Light Mode) */
[data-theme="light"] #search-input:not(:placeholder-shown) { 
    background-color: #eff6ff !important; /* Nền xanh pastel cực nhẹ, sang trọng */
    border-color: #bfdbfe !important;     /* Viền xanh nhạt đồng bộ */
    color: #1d4ed8 !important;            /* Chữ mã CK màu xanh đậm sắc nét */
}
.custom-dropdown, .portfolio-dropdown { position: relative; display: inline-block; }
.custom-dropdown-btn, .portfolio-dropdown-btn { background-color: var(--bg-body) !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.custom-dropdown-btn.filter-active, .portfolio-dropdown-btn.filter-active { background-color: #1e293b !important; border-color: #facc15 !important; color: #fde047 !important; font-weight: 700; box-shadow: 0 0 8px rgba(250, 204, 21, 0.4) !important; }
.custom-dropdown-content, .portfolio-dropdown-content { display: none; position: absolute; background-color: #1f2937; border: 1px solid #4a5568; border-radius: 4px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 60; max-height: 300px; overflow-y: auto; width: 100%; min-width: 150px; }
.portfolio-dropdown-content { width: 200px; }
.custom-dropdown-item, .portfolio-item { padding: 8px 12px; color: var(--text-main); cursor: pointer; white-space: nowrap; }
.custom-dropdown-item:hover, .portfolio-item:hover { background-color: var(--bg-table-hover); }
.custom-dropdown-item.active, .portfolio-item.active { background-color: #2563eb !important; color: #ffffff !important; font-weight: bold; }
.portfolio-item { display: flex; justify-content: space-between; align-items: center; }
.portfolio-item-name { flex-grow: 1; }
.portfolio-divider { border-top: 1px solid #4a5568; margin: 4px 0; }
.portfolio-create-form { padding: 8px 12px; display: flex; gap: 8px; }
.portfolio-create-form input { flex-grow: 1; min-width: 0; }
/* OPTION 2: Xanh Công Nghệ (Modern SaaS) */
[data-theme="light"] .custom-dropdown-btn.filter-active, 
[data-theme="light"] .portfolio-dropdown-btn.filter-active { 
    background-color: #eff6ff !important; 
    border-color: #bfdbfe !important; 
    color: #1d4ed8 !important; 
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15) !important; 
}
[data-theme="light"] .custom-dropdown-content, [data-theme="light"] .portfolio-dropdown-content { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .custom-dropdown-item:hover, [data-theme="light"] .portfolio-item:hover { background-color: #f0f9ff !important; color: #2563eb !important; font-weight: 600; }
[data-theme="light"] .custom-dropdown-item.active, [data-theme="light"] .portfolio-item.active { background-color: #2563eb !important; color: #ffffff !important; }

[data-theme="light"] .filter-bar label.text-gray-300, [data-theme="light"] .filter-bar span.text-gray-300 { color: #0f172a !important; font-weight: 600 !important; }

#view-mode-btn { background-color: rgba(20, 184, 166, 0.18) !important; border: 1px solid rgba(45, 212, 191, 0.85) !important; color: #CCFBF1 !important; font-weight: 600; min-width: 90px !important; transition: all 0.25s ease; }
#view-mode-btn:hover { background-color: rgba(20, 184, 166, 0.28) !important; border-color: #5EEAD4 !important; color: #F0FDFA !important; box-shadow: 0 0 10px rgba(20, 184, 166, 0.32) !important; }
#view-mode-btn.is-weekly { background-color: #9333ea !important; border-color: #a855f7 !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.6) !important; }
[data-theme="light"] #view-mode-btn { background-color: #0d9488 !important; border-color: #0f766e !important; color: #ffffff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
[data-theme="light"] #view-mode-btn.is-weekly { background-color: #9333ea !important; border-color: #7e22ce !important; color: #ffffff !important; box-shadow: none !important; }

#advanced-filter-btn, #fa-filter-btn { background-color: transparent; transition: all 0.2s ease-in-out; }
#advanced-filter-btn { border: 1px solid #4A5568; color: #E2E8F0; }
#advanced-filter-btn:hover { border-color: #63B3ED; color: #63B3ED; }
#advanced-filter-btn.is-active { background-color: #1e293b !important; border-color: #facc15 !important; color: #fde047 !important; font-weight: 700; box-shadow: 0 0 10px rgba(250, 204, 21, 0.5) !important; }
[data-theme="light"] #advanced-filter-btn { color: var(--text-main) !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #advanced-filter-btn.is-active { background-color: #fef3c7 !important; border-color: #d97706 !important; color: #92400e !important; box-shadow: 0 0 8px rgba(217, 119, 6, 0.2) !important; }
[data-theme="light"] #fa-filter-btn.text-\[\#E2E8F0\] { color: #0f172a !important; border-color: #94a3b8 !important; }
[data-theme="light"] #fa-filter-btn.bg-\[\#0f172a\] { background-color: #e0f2fe !important; color: #0369a1 !important; border-color: #0284c7 !important; box-shadow: 0 0 10px rgba(2, 132, 199, 0.2) !important; }

#reset-filters-btn { background-color: transparent; border: 1px solid #4A5568; color: #9ca3af; transition: all 0.2s; }
#reset-filters-btn:hover { background-color: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #ef4444; }
[data-theme="light"] #reset-filters-btn { color: #dc2626 !important; }

/* Tooltips */
.has-tooltip { position: relative; cursor: help; overflow: visible !important; }
.has-tooltip::after { content: attr(data-tooltip); background-color: #0f172a; color: #f8fafc; border: 1px solid #e7dd4a; box-shadow: 0 10px 25px rgba(0,0,0,0.8), 0 0 12px rgba(79, 70, 229, 0.4); padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 500; white-space: pre-wrap; width: max-content; max-width: 350px; text-align: left; line-height: 1.5; position: absolute; z-index: 9999; left: 50%; top: 130%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.has-tooltip:hover::after { opacity: 1; top: 110%; }
.tooltip-left::after { left: auto; right: 0; transform: none; }
th:hover { z-index: 100 !important; }
[data-theme="light"] .fa-tooltip { background-color: #ffffff !important; color: var(--text-main) !important; border-color: #cbd5e1 !important; box-shadow: 0 15px 30px rgba(0,0,0,0.12), 0 0 15px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .fa-gem { color: #1570ef !important; filter: drop-shadow(0 0 2px rgba(2, 132, 199, 0.4)); }
[data-theme="light"] .fa-tooltip .text-white, [data-theme="light"] .fa-tooltip .text-gray-200, [data-theme="light"] .fa-tooltip .text-gray-300 { color: #0f172a !important; }
[data-theme="light"] .fa-tooltip .text-gray-400, [data-theme="light"] .fa-tooltip .text-gray-500 { color: #475569 !important; }
[data-theme="light"] .fa-tooltip .border-gray-600\/50, [data-theme="light"] .fa-tooltip .border-gray-700 { border-color: #cbd5e1 !important; }
[data-theme="light"] .fa-tooltip .text-blue-400 { color: #2563eb !important; }
[data-theme="light"] .fa-tooltip .bg-gray-800 { background-color: #e2e8f0 !important; color: #0f172a !important; font-weight: 700 !important; }

/* Smart Tooltip cho các nút Filter nhanh (PC & Mobile) */
#filter-smart-tooltip {
    position: fixed;
    z-index: 999999;
    background-color: #0f172a;
    color: #f8fafc;
    border: 1px solid #3b82f6;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75), 0 0 12px rgba(59, 130, 246, 0.25);
    padding: 10px 14px;
    border-radius: 8px;
    width: max-content;
    max-width: 310px;
    font-size: 0.8rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
}
#filter-smart-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}
#filter-smart-tooltip .ft-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: #facc15;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}
#filter-smart-tooltip .ft-desc {
    color: #cbd5e1;
    font-weight: 400;
}

/* Đồng bộ Light Mode cho Smart Tooltip Filter */
[data-theme="light"] #filter-smart-tooltip {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #93c5fd !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
}
[data-theme="light"] #filter-smart-tooltip .ft-title {
    color: #1d4ed8 !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] #filter-smart-tooltip .ft-desc {
    color: #475569 !important;
}

/* =========================================================
   5. MODALS & OVERLAYS (HỘP THOẠI & POPUP)
   ========================================================= */
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 999999 !important; }
.modal-content { background-color: var(--bg-body) !important; color: var(--text-main); padding: 24px; border-radius: 12px; width: 90%; max-width: 500px; border: 1px solid var(--border-color); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 16px; }
.modal-title { font-size: 1.25rem; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 1.5rem; color: #9ca3af; cursor: pointer; }
.modal-body { display: flex; flex-direction: column; gap: 16px; }
.modal-footer { text-align: right; margin-top: 16px; }
.modal-btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; font-weight: 600; }
.modal-btn-primary { background-color: #2563eb; color: white; }
.modal-btn-secondary { background-color: #4b5563; color: white; margin-right: 8px; }

.modal-body label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-main); }
.modal-body .filter-group { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #374151; }
.modal-body .filter-row { display: grid; grid-template-columns: 70px 1fr 1fr; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.modal-body .filter-row span:first-child { font-weight: 500; color: var(--text-muted); }
.modal-body .filter-row .range-inputs { display: flex; align-items: center; gap: 0.5rem; }
.modal-body .filter-row input[type="number"] { width: 80px; }

/* Modal Chỉnh sửa Danh mục (Edit Portfolio) & Tags Light Mode */
[data-theme="light"] .modal-stock-list, [data-theme="light"] .modal-body .bg-slate-800, [data-theme="light"] .modal-body .bg-slate-900, [data-theme="light"] .modal-body .bg-gray-800, [data-theme="light"] .modal-body .bg-gray-900 { background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] .modal-stock-item, [data-theme="light"] .modal-body span.bg-slate-700, [data-theme="light"] .modal-body span.bg-slate-600, [data-theme="light"] .modal-body span.bg-gray-700, [data-theme="light"] .modal-body span.bg-gray-600 { background-color: #e0f2fe !important; color: #0369a1 !important; border: 1px solid #bae6fd !important; font-weight: 600 !important; box-shadow: none !important; }
[data-theme="light"] .modal-body span.bg-slate-700:hover, [data-theme="light"] .modal-body span.bg-slate-600:hover, [data-theme="light"] .modal-body span.bg-gray-700:hover, [data-theme="light"] .modal-body span.bg-gray-600:hover { background-color: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; cursor: pointer !important; }
[data-theme="light"] .delete-stock-btn { color: #0284c7 !important; }
[data-theme="light"] .delete-stock-btn:hover { color: #ef4444 !important; transform: scale(1.2); }
[data-theme="light"] .modal-btn-secondary, [data-theme="light"] .modal-footer .bg-slate-600, [data-theme="light"] .modal-footer .bg-slate-700, [data-theme="light"] .modal-footer .bg-gray-600, [data-theme="light"] .modal-footer .bg-gray-700 { background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] .modal-btn-secondary:hover, [data-theme="light"] .modal-footer .bg-slate-600:hover, [data-theme="light"] .modal-footer .bg-slate-700:hover, [data-theme="light"] .modal-footer .bg-gray-600:hover, [data-theme="light"] .modal-footer .bg-gray-700:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }

/* Guest Login Prompt */
.login-prompt-wrapper { display: flex; align-items: center; justify-content: center; min-height: 75vh; width: 100%; position: relative; }
.login-prompt-box { position: relative; z-index: 1; background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%); backdrop-filter: blur(16px); padding: 3.5rem 3rem; border-radius: 1.25rem; border: 1px solid rgba(96, 165, 250, 0.15); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); text-align: center; max-width: 480px; width: 90%; }
[data-theme="light"] .login-prompt-box { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .login-icon-container { background: #f0f9ff !important; border: 1px solid #bae6fd !important; }
[data-theme="light"] .login-icon-container i { color: #2563eb !important; }
[data-theme="light"] .login-prompt-box h1, [data-theme="light"] .login-prompt-box h2, [data-theme="light"] .login-prompt-box h3, [data-theme="light"] .login-prompt-box .text-yellow-400, [data-theme="light"] .login-prompt-box .text-yellow-500 { color: #1e40af !important; text-shadow: none !important; }
[data-theme="light"] .login-prompt-box p, [data-theme="light"] .login-prompt-box .text-gray-400, [data-theme="light"] .login-prompt-box .text-gray-300, [data-theme="light"] .login-prompt-box .text-gray-500 { color: #475569 !important; text-shadow: none !important; }
[data-theme="light"] .login-prompt-box .mt-6.text-sm { color: #475569 !important; }
[data-theme="light"] .login-prompt-box a.text-yellow-400 { color: #2563eb !important; font-weight: 700 !important; }
[data-theme="light"] .login-prompt-box a.text-yellow-400:hover { color: #1d4ed8 !important; text-decoration: underline; }

/* Locked & Feature Modals */
#feature-update-modal .bg-gray-900, #locked-feature-modal .bg-\[\#111827\] { background-color: #111827 !important; border-color: #4b5563 !important; }
[data-theme="light"] #locked-feature-modal > div:last-child { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2) !important; }
[data-theme="light"] #locked-feature-modal h2 { color: #0f172a !important; }
[data-theme="light"] #locked-feature-modal p { color: #475569 !important; }
[data-theme="light"] #locked-feature-modal p b { color: #1e40af !important; }
[data-theme="light"] #locked-feature-modal button i.fa-times { color: #94a3b8 !important; }
[data-theme="light"] #locked-feature-modal button i.fa-times:hover { color: #ef4444 !important; }
[data-theme="light"] #feature-panel { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #feature-panel > div:last-child { background-color: #f8fafc !important; }
[data-theme="light"] #feature-panel h3, [data-theme="light"] #feature-panel h4 { color: #0f172a !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #feature-panel p, [data-theme="light"] #feature-panel span[class*="text-gray-"] { color: #475569 !important; }
[data-theme="light"] #close-feature-modal-x { color: #94a3b8 !important; }
[data-theme="light"] #close-feature-modal-x:hover { color: #ef4444 !important; }

/* Story Modal */
.info-story-btn { background: none; border: none; cursor: pointer; color: #60a5fa; margin-left: 8px; font-size: 0.9rem; padding: 2px 6px; border-radius: 50%; transition: all 0.2s; opacity: 0.7; }
.info-story-btn:hover { color: #facc15; background-color: rgba(255, 255, 255, 0.1); opacity: 1; transform: scale(1.1); }
#story-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); z-index: 3000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
#story-modal-overlay.active { display: flex; opacity: 1; }
#story-modal-content { background-color: #111827; width: 90%; max-width: 600px; border-radius: 12px; border: 1px solid #4b5563; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); overflow: hidden; transform: translateY(20px); transition: transform 0.3s ease; }
#story-modal-overlay.active #story-modal-content { transform: translateY(0); }
.story-header { padding: 16px 24px; background-color: #111827; border-bottom: 1px solid #374151; display: flex; justify-content: space-between; align-items: center; }
.story-title { font-size: 1.25rem; font-weight: 700; color: #60a5fa; display: flex; align-items: center; gap: 10px; }
.story-close-btn { background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer; transition: color 0.2s; }
.story-close-btn:hover { color: #ef4444; }
.story-body { padding: 24px; color: #e5e7eb; font-size: 1rem; line-height: 1.7; max-height: 60vh; overflow-y: auto; white-space: pre-line; }
.story-footer { padding: 12px 24px; background-color: #111827; border-top: 1px solid #374151; text-align: right; font-size: 0.85rem; color: #6b7280; }


/* =========================================================
   6. DATA TABLES MASTER (BẢNG DỮ LIỆU CỐT LÕI)
   ========================================================= */
table { width: 100%; min-width: 1400px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
th { padding: 0.6rem 0.4rem; font-weight: 700; font-size: 0.85rem; position: sticky; top: 0; text-align: center; white-space: nowrap; z-index: 50; background-color: var(--bg-table-header) !important; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
td { padding: 0.1rem 0.3rem; font-size: 0.85rem; font-weight: 100; white-space: nowrap; vertical-align: middle; background-color: var(--bg-table-row); color: var(--text-main); border-bottom: 1px solid var(--border-row) !important; }
#table-body tr:hover, #weekly-table-body tr:hover { background-color: var(--bg-table-hover) !important; cursor: pointer; }

/* Bảng dữ liệu Light Mode */
[data-theme="light"] .group-table th { background-color: #e0eaf7 !important; color: #475569 !important; font-weight: 700 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .group-table td { border-top-color: #f1f5f9 !important; }
[data-theme="light"] .group-table tr:hover { background-color: #f0f9ff !important; }
[data-theme="light"] .group-table td[style*="color: #666"], [data-theme="light"] .group-table td[style*="color: #94a3b8"], [data-theme="light"] .watchlist-group td { color: #64748b !important; opacity: 1 !important; font-weight: 500; }
[data-theme="light"] #table-body tr:hover td, [data-theme="light"] #weekly-table-body tr:hover td, [data-theme="light"] .group-table tr:hover td, [data-theme="light"] .fund-table tr:hover td, [data-theme="light"] .report-table tbody tr:hover td { background-color: var(--bg-table-hover) !important; cursor: pointer; }
[data-theme="light"] #table-body tr:hover td:first-child, [data-theme="light"] #weekly-table-body tr:hover td:first-child, [data-theme="light"] .group-table tr:hover td:first-child { color: #1d4ed8 !important; font-weight: 800 !important; }

/* Cột dữ liệu canh lề trang chủ */
#stock-table th:nth-child(1), #stock-table td:nth-child(1), #weekly-stock-table th:nth-child(1), #weekly-stock-table td:nth-child(1) { width: 7%; padding-left: 10px; }
#stock-table th:nth-child(2), #stock-table td:nth-child(2), #weekly-stock-table th:nth-child(2), #weekly-stock-table td:nth-child(2) { width: 7%; }
#stock-table th:nth-child(3), #stock-table td:nth-child(3), #weekly-stock-table th:nth-child(3), #weekly-stock-table td:nth-child(3) { width: 5.5%; text-align: right; padding-right: 8px; }
#stock-table th:nth-child(4), #stock-table td:nth-child(4), #weekly-stock-table th:nth-child(4), #weekly-stock-table td:nth-child(4) { width: 4.5%; text-align: right; padding-right: 8px; }
#stock-table th:nth-child(5), #stock-table td:nth-child(5), #weekly-stock-table th:nth-child(5), #weekly-stock-table td:nth-child(5) { width: 7%; text-align: right; padding-right: 8px; }
#stock-table th:nth-child(6), #stock-table td:nth-child(6), #weekly-stock-table th:nth-child(6), #weekly-stock-table td:nth-child(6) { width: 5.0%; text-align: right; padding-right: 8px; }
#stock-table th:nth-child(7), #stock-table td:nth-child(7), #weekly-stock-table th:nth-child(7), #weekly-stock-table td:nth-child(7) { width: 5.5%; text-align: center; }
#stock-table th:nth-child(8), #stock-table td:nth-child(8), #weekly-stock-table th:nth-child(8), #weekly-stock-table td:nth-child(8) { width: 6.0%; text-align: center; }
#stock-table th:nth-child(9), #stock-table td:nth-child(9), #weekly-stock-table th:nth-child(9), #weekly-stock-table td:nth-child(9) { width: 5%; text-align: right; padding-right: 8px; }
#stock-table th:nth-child(10), #stock-table td:nth-child(10), #weekly-stock-table th:nth-child(10), #weekly-stock-table td:nth-child(10) { width: 5%; text-align: right; padding-right: 8px; }
#stock-table th:nth-child(11), #stock-table td:nth-child(11), #weekly-stock-table th:nth-child(11), #weekly-stock-table td:nth-child(11) { width: 4%; text-align: center; }
#stock-table th:nth-child(12), #stock-table td:nth-child(12), #weekly-stock-table th:nth-child(12), #weekly-stock-table td:nth-child(12) { width: 4.5%; text-align: center; }
#stock-table th:nth-child(13), #stock-table td:nth-child(13), #weekly-stock-table th:nth-child(13), #weekly-stock-table td:nth-child(13) { width: 4.5%; text-align: center; }
#stock-table th:nth-child(14), #stock-table td:nth-child(14), #weekly-stock-table th:nth-child(14), #weekly-stock-table td:nth-child(14) { width: 4.5%; text-align: center; }
#stock-table th:nth-child(15), #stock-table td:nth-child(15), #weekly-stock-table th:nth-child(15), #weekly-stock-table td:nth-child(15) { width: 4.5%; text-align: center; }
#stock-table th:nth-child(16), #stock-table td:nth-child(16), #weekly-stock-table th:nth-child(16), #weekly-stock-table td:nth-child(16) { width: 6%; text-align: center; }
#stock-table th:nth-child(17), #stock-table td:nth-child(17), #weekly-stock-table th:nth-child(17), #weekly-stock-table td:nth-child(17) { width: 4%; text-align: center; }
#stock-table th:nth-child(18), #stock-table td:nth-child(18), #weekly-stock-table th:nth-child(18), #weekly-stock-table td:nth-child(18) { width: 5.5%; text-align: center; }
#stock-table th:nth-child(19), #stock-table td:nth-child(19), #weekly-stock-table th:nth-child(19), #weekly-stock-table td:nth-child(19) { width: 5.5%; text-align: center; }
#stock-table th:last-child, #weekly-stock-table th:last-child, #stock-table td:last-child, #weekly-stock-table td:last-child { display: none; }

/* Căn chỉnh Tags */
.super-stock-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.super-stock-dot.is-placeholder { visibility: hidden; }
#stock-table td:nth-child(13) .tag, #stock-table td:nth-child(14) .tag, #stock-table td:nth-child(15) .tag, #stock-table td:nth-child(17) .tag,
#weekly-stock-table td:nth-child(13) .tag, #weekly-stock-table td:nth-child(14) .tag, #weekly-stock-table td:nth-child(15) .tag, #weekly-stock-table td:nth-child(17) .tag { width: 50px; box-sizing: border-box; margin: 0 auto;}
#stock-table td:nth-child(16) .tag, #weekly-stock-table td:nth-child(16) .tag { width: 65px; box-sizing: border-box; margin: 0 auto; text-align: center;}
#stock-table td:nth-child(18) .tag, #stock-table td:nth-child(19) .tag, #weekly-stock-table td:nth-child(18) .tag, #weekly-stock-table td:nth-child(19) .tag {
    display: block; width: 100%; text-align: center; font-size: 0.75rem; padding: 4px 1px; letter-spacing: -0.3px; white-space: nowrap;
}
@media (min-width: 1600px) {
    #stock-table td:nth-child(18) .tag, #stock-table td:nth-child(19) .tag, #weekly-stock-table td:nth-child(18) .tag, #weekly-stock-table td:nth-child(19) .tag { font-size: 0.85rem; padding: 4px 5px; letter-spacing: 0px; }
}

/* Badges / Tags */
.tag { display: block; width: 100%; box-sizing: border-box; padding: 4px 8px; border-radius: 4px; color: #ffffff; font-weight: 600; text-align: right; }
.signal-badge-buy, .bg-buy { background-color: #16a34a; color: #fff; font-weight: 600; text-align: center; width: 80px; }
.signal-badge-sell, .bg-sell { background-color: #dc2626; color: #fff; font-weight: 600; text-align: center; width: 80px; }

/* --- Badges Light Mode (Pastel Soft Badges) --- */
[data-theme="light"] .signal-badge-buy, [data-theme="light"] .bg-buy { 
    background-color: #dcfce7 !important; color: #15803d !important; border: 1px solid #7cf1a7 !important; box-shadow: none !important; 
}

[data-theme="light"] .signal-badge-sell, [data-theme="light"] .bg-sell { 
    background-color: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; box-shadow: none !important; 
}

/* Nắm giữ: Nền vàng kem, Chữ Nâu Hổ Phách đậm sắc nét (Trị dứt điểm lỗi chói chữ) */
[data-theme="light"] .signal-badge-hold, [data-theme="light"] .bg-hold { 
    background-color: #fef3c7 !important; 
    color: #c6804a !important;            
    border: 1px solid #fcd34d !important; 
    box-shadow: none !important; 
}

[data-theme="light"] .signal-badge-wait, [data-theme="light"] .bg-wait { 
    background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #abb7c7 !important; box-shadow: none !important; 
}

/* --- TẨY TRẮNG MÀU Ổ KHÓA CHO TÀI KHOẢN HẾT HẠN (VIP) --- */

/* 1. Huy hiệu "🔒 VIP" ở cột Tín hiệu */
[data-theme="light"] .signal-badge-lock, 
[data-theme="light"] .bg-vip {
    background-color: #f1f5f9 !important; /* Nền xám pastel siêu nhạt */
    color: #94a3b8 !important;            /* Chữ và Icon xám dịu */
    border: 1px solid #e2e8f0 !important; /* Viền xám chìm */
    box-shadow: none !important;
}

/* 2. Khung bọc Mã CK bị khóa (Ghi đè class bg-gray-800 gán cứng từ JS) */
[data-theme="light"] #table-body td .bg-gray-800.text-gray-500,
[data-theme="light"] #weekly-table-body td .bg-gray-800.text-gray-500 {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}

/* 3. Các Icon ổ khóa rời rạc nằm ở các cột (Ngày, Giá, Lợi nhuận...) */
[data-theme="light"] #table-body td .text-gray-600.fa-lock,
[data-theme="light"] #weekly-table-body td .text-gray-600.fa-lock {
    color: #cbd5e1 !important; /* Cho ổ khóa chìm hẳn vào nền, không gây nhiễu */
}

[data-theme="light"] .ts-badge-positive { background-color: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
[data-theme="light"] .ts-badge-negative { background-color: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }
[data-theme="light"] .ts-badge-neutral { background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
/* FIX BUG 2: Khôi phục nền TS ở trang Bảng giá */
[data-theme="light"] .ts-bg-green { background-color: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
[data-theme="light"] .ts-bg-red { background-color: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
[data-theme="light"] .ts-bg-neutral { background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }

[data-theme="light"] .drg-red, [data-theme="light"] .dt-red { background-color: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; box-shadow: none !important; }
[data-theme="light"] .drg-green, [data-theme="light"] .dt-green, [data-theme="light"] .core-green, [data-theme="light"] .target-hit-1 { background-color: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; box-shadow: none !important; }
[data-theme="light"] .dt-blue, [data-theme="light"] .core-blue { background-color: #dbeafe !important; color: #1e40af !important; border: 1px solid #bfdbfe !important; box-shadow: none !important; }
[data-theme="light"] .dt-purple, [data-theme="light"] .core-purple, [data-theme="light"] .target-hit-2 { background-color: #f3e8ff !important; color: #6b21a8 !important; border: 1px solid #e9d5ff !important; box-shadow: none !important; }
[data-theme="light"] .drg-none, [data-theme="light"] .core-none, [data-theme="light"] .dt-none, [data-theme="light"] .target-default { background-color: #f8fafc !important; color: #64748b !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; }


/* =========================================================
   7. MODULE: MARKET & DASHBOARD (THỊ TRƯỜNG & TRANG CHỦ)
   ========================================================= */
.market-summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.2rem; padding: 0.2rem 1rem; background-color: #1f2937; border-radius: 0.5rem; margin: 0.2rem 0.5rem; border: 1px solid #374151; }
.grid-card { background-color: #111827; border-radius: 0.5rem; padding: 0.1rem; display: flex; flex-direction: column; border: 1px solid #1f2937; }
.card-title { font-size: 0.85rem; font-weight: 600; color: #9ca3af; margin-bottom: 0.2rem; padding-bottom: 0.2rem; border-bottom: 1px solid #374151; text-align: center; }
.semi-gauge-wrapper { position: relative; width: 100%; max-width: 280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; }
.gauge-timeframe-btn { background: radial-gradient(circle, #374151 0%, #1f2937 100%); border: 1px solid #4b5563; border-radius: 20px; padding: 4px 12px; color: #e5e7eb; font-size: 0.7rem; font-weight: 600; cursor: pointer; }

[data-theme="light"] .market-summary-bar, [data-theme="light"] .grid-card { background-color: #f8fafc !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important; }
[data-theme="light"] .index-name, [data-theme="light"] .card-title { color: #1e293b !important; border-bottom-color: #f1f5f9 !important; }
[data-theme="light"] .sector-list-item:hover, [data-theme="light"] .sector-list-item.active { background-color: #eff6ff !important; }
[data-theme="light"] .sector-list-item:hover .name, [data-theme="light"] .sector-list-item.active .name { color: #2563eb !important; font-weight: 700; }
[data-theme="light"] .gauge-timeframe-btn { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
[data-theme="light"] .stat-item { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
[data-theme="light"] .stat-item span.label { color: #64748b !important; }
[data-theme="light"] .stat-item span.value { color: #0f172a !important; }
[data-theme="light"] .semi-gauge-svg path[stroke="#1f2937"] { stroke: #e2e8f0 !important; }
[data-theme="light"] .semi-gauge-percent, [data-theme="light"] .gauge-delta { text-shadow: none !important; }
[data-theme="light"] #gauge-needle polygon { fill: #1e293b !important; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)) !important; }

/* Bảng điện Live Light Mode */
[data-theme="light"] body { background-color: #f8fafc !important; }
[data-theme="light"] #indices-bar { background-color: #ffffff !important; border-bottom: 1px solid #cbd5e1 !important; }
[data-theme="light"] .index-group { border-right: 1px solid #e2e8f0 !important; }
[data-theme="light"] .index-name { color: #1e40af !important; font-weight: 800 !important; }
[data-theme="light"] .index-extra-info { color: #64748b !important; }
[data-theme="light"] .index-detail .text-white { color: #0f172a !important; }
[data-theme="light"] .index-detail .text-yellow-300 { color: #d97706 !important; }
[data-theme="light"] .industry-sidebar { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .industry-sidebar h2 { background: #c4cdd6 !important; color: #b45309 !important; border-bottom-color: #cbd5e1 !important; box-shadow: none !important; }
[data-theme="light"] .industry-item { border-bottom-color: #e2e8f0 !important; color: #334155 !important; }
[data-theme="light"] .industry-item:hover { background-color: #eff6ff !important; color: #2563eb !important; font-weight: 600; }
[data-theme="light"] .group-column { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important; }
[data-theme="light"] .group-column-title { background: #c4cdd6 !important; border-bottom-color: #e2e8f0 !important; color: #475569 !important; font-weight: 700 !important; }
[data-theme="light"] .stock-count-badge { color: #94a3b8 !important; }


/* =========================================================
   8. MODULE: UNIVERSAL MODAL (CHI TIẾT & SIDEBAR)
   ========================================================= */
#universal-modal .modal-content { display: flex !important; flex-direction: column !important; height: 95vh !important; overflow: hidden !important; }
#universal-modal .modal-header { flex: 0 0 auto !important; background-color: #1e293b !important; border-bottom: 1px solid #334155 !important; }
#universal-modal .modal-body { flex: 1 1 0% !important; display: flex !important; flex-direction: row !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; }
#uni-tab-chart { flex: 1 1 0% !important; display: flex !important; flex-direction: row !important; min-height: 0 !important; overflow: hidden !important; }
#uni-chart-iframe { flex: 1 1 0% !important; min-height: 0 !important; border: none !important; }

#floating-detail-panel { position: relative !important; width: 460px !important; height: 100% !important; flex-shrink: 0 !important; order: -1 !important; bottom: auto !important; border-radius: 0 !important; box-shadow: 5px 0 15px rgba(0,0,0,0.5) !important; transition: width 0.25s ease, opacity 0.2s ease; }
#floating-detail-panel.hidden { width: 0 !important; opacity: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; }

.sidebar-card { background: linear-gradient(180deg, rgba(17, 24, 39, 0.8) 0%, rgba(6, 8, 13, 0.95) 100%); border: 1px solid rgba(55, 65, 81, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.4); border-radius: 8px; padding: 12px 15px; margin-bottom: 12px; }
.sidebar-title { font-size: 0.8rem; text-transform: uppercase; color: #9ca3af; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.sidebar-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.85rem; color: #cbd5e1; }
.sidebar-row:last-child { margin-bottom: 0; }
.sidebar-val { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.sidebar-metric-box { background: rgba(4, 6, 10, 0.7); border: 1px solid rgba(55, 65, 81, 0.7); box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05); border-radius: 6px; padding: 10px 6px; text-align: center; }
.sidebar-metric-lbl { color: #9ca3af; font-size: 0.75rem; margin-bottom: 6px; font-weight: 600;}
.sidebar-metric-val { font-size: 1.1rem; font-weight: bold; font-family: 'JetBrains Mono', monospace; }

/* Light Mode Overrides */
[data-theme="light"] #universal-modal .modal-header { background-color: #f1f5f9 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] #uni-modal-title { color: #1e40af !important; }
[data-theme="light"] .modal-tabs-switcher { background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; }

/* Gộp chung nút Tab trái (.uni-tab-btn) và nút Thời gian bên phải (.hist-timeframe-btn) */
[data-theme="light"] .modal-tabs-switcher .uni-tab-btn.active, 
[data-theme="light"] .modal-tabs-switcher .uni-tab-btn.bg-slate-700\/80,
[data-theme="light"] .modal-tabs-switcher .hist-timeframe-btn.active { 
    background-color: #ffffff !important; 
    color: #2563eb !important; 
    border-color: #2563eb !important; 
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important; 
}

[data-theme="light"] .modal-tabs-switcher .uni-tab-btn.active i { color: #2563eb !important; }

/* Ép màu xám thanh lịch cho tất cả các nút chưa được chọn */
[data-theme="light"] .modal-tabs-switcher button { color: #64748b !important; }

[data-theme="light"] #panel-detail { background-color: #f8fafc !important; border-right-color: #cbd5e1 !important; }
[data-theme="light"] .sidebar-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .sidebar-metric-box { background: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .sidebar-card * { text-shadow: none !important; }
[data-theme="light"] .sidebar-title, [data-theme="light"] .sidebar-row { color: #334155 !important; }
[data-theme="light"] .sidebar-val { color: #0f172a !important; }
[data-theme="light"] .sidebar-metric-lbl { color: #64748b !important; }
[data-theme="light"] .sidebar-title .text-yellow-400 { color: #b45309 !important; background-color: #fef3c7 !important; border-color: #fde047 !important; }
[data-theme="light"] .sidebar-title .text-green-400 { color: #15803d !important; background-color: #dcfce7 !important; border-color: #86efac !important; }
[data-theme="light"] .sidebar-title .text-red-400 { color: #b91c1c !important; background-color: #fee2e2 !important; border-color: #fca5a5 !important; }
[data-theme="light"] .sidebar-title .text-gray-400 { color: #475569 !important; background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .sidebar-title span[style*="5eead4"] { color: #0f766e !important; background-color: #ccfbf1 !important; border-color: #5eead4 !important; text-shadow: none !important; }
[data-theme="light"] .sidebar-title span[style*="#9333ea"] { color: #7e22ce !important; background-color: #f3e8ff !important; border-color: #d8b4fe !important; text-shadow: none !important; box-shadow: none !important; }

/* Bảo vệ màu Lãi Lỗ Modal Light Mode */
[data-theme="light"] #detail-sidebar-content .positive, [data-theme="light"] #detail-sidebar-content .text-green-500, [data-theme="light"] #detail-sidebar-content .text-green-400, [data-theme="light"] #detail-sidebar-content span[style*="#22c55e"], [data-theme="light"] #detail-sidebar-content span[style*="rgb(34, 197, 94)"] { color: #15803d !important; font-weight: 800 !important; }
[data-theme="light"] #detail-sidebar-content .negative, [data-theme="light"] #detail-sidebar-content .text-red-500, [data-theme="light"] #detail-sidebar-content .text-red-400, [data-theme="light"] #detail-sidebar-content span[style*="#ef4444"], [data-theme="light"] #detail-sidebar-content span[style*="rgb(239, 68, 68)"] { color: #b91c1c !important; font-weight: 800 !important; }
[data-theme="light"] #detail-sidebar-content .text-white, [data-theme="light"] #detail-sidebar-content div[style*="color: #fff"], [data-theme="light"] #detail-sidebar-content .text-gray-200, [data-theme="light"] #detail-sidebar-content div[style*="color: #e5e7eb"] { color: #0f172a !important; }
[data-theme="light"] #detail-sidebar-content .text-gray-300, [data-theme="light"] #detail-sidebar-content .text-gray-400 { color: #475569 !important; }


/* =========================================================
   9. MODULE: BACKTEST & HISTORY (HIỆU SUẤT & LỊCH SỬ)
   ========================================================= */
#uni-tab-backtest { padding: 10px; height: 100%; overflow-y: auto; background-color: #0f172a; }
.bt-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #1e293b; padding: 10px; border-radius: 8px; border: 1px solid #334155; margin-bottom: 10px; }
.bt-year-group { display: flex; gap: 4px; background: #0f172a; padding: 4px; border-radius: 6px; border: 1px solid #334155; overflow-x: auto; }
.bt-year-btn { background: transparent; color: #94a3b8; padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; transition: 0.2s; white-space: nowrap; cursor: pointer; border: 1px solid transparent;}
.bt-year-btn:hover { color: #f8fafc; background: #334155; }
.bt-year-btn.active { background-color: rgba(250, 204, 21, 0.1); border: 1px solid #facc15; color: #facc15; box-shadow: 0 0 8px rgba(250, 204, 21, 0.4); }
.bt-radio-group { display: flex; gap: 15px; background: #0f172a; padding: 6px 12px; border-radius: 6px; border: 1px solid #334155; align-items: center; }
.bt-radio-group label { color: #e2e8f0; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px;}
.bt-radio-group input { accent-color: #facc15; cursor: pointer;}
.bt-stats-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 10px; }
.bt-stat-box { background: #1e293b; padding: 10px 4px; border-radius: 8px; border: 1px solid #334155; text-align: center; }
.bt-stat-box h4 { color: #94a3b8; font-size: 0.65rem; text-transform: uppercase; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-stat-box .val { font-size: 1.1rem; font-weight: 700; color: #f8fafc; }
.bt-stat-box .val.pos { color: #22c55e; }
.bt-stat-box .val.neg { color: #ef4444; }
.bt-ext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bt-cagr-box, .bt-disc-box { background: #1e293b; padding: 12px; border-radius: 8px; border: 1px solid #334155; }
.bt-cagr-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.9rem;}
.bt-disc-box { border-color: #facc15; position: relative; background: linear-gradient(145deg, #1e293b, #0f172a); }
.bt-disc-val { font-size: 1.3rem; font-weight: 800; color: #facc15; margin-top: 5px; text-align: center; }

/* Bảng log Backtest */
.history-table { width: 100%; border-spacing: 0; }
.history-table th { background-color: var(--bg-table-header); border-bottom: 2px solid var(--border-color); padding: 10px 5px; position: sticky; top: 0; z-index: 10; color: var(--text-muted); }
.history-table td { padding: 6px; border-bottom: 1px solid var(--border-row); color: var(--text-main); }
.bt-log-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; text-align: right; min-width: 1100px; }
.bt-log-table th { position: sticky; top: 0; background-color: #1e293b; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 10px; z-index: 10; border-bottom: 2px solid #334155; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2); }
.bt-log-table td { padding: 10px; border-bottom: 1px solid #1e293b; color: #e2e8f0; white-space: nowrap; overflow: visible !important; text-overflow: clip !important; }
.bt-log-table tbody tr { background-color: #0f172a; transition: all 0.2s ease; }
.bt-log-table tbody tr:nth-child(even) { background-color: #131c2c; }
.bt-log-table tbody tr:hover { background-color: #334155; }
.bt-status-badge { padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.bt-status-closed { background-color: #334155; color: #94a3b8; }
.bt-status-open { background-color: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); }

/* FIX BUG 4: Khôi phục Backtest Light Mode 100% Gốc */
[data-theme="light"] #panel-backtest { background-color: #f8fafc !important; }
[data-theme="light"] #uni-backtest-chart { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #panel-backtest > div[style*="background: #1e293b"] { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #panel-backtest > div > div[style*="background: #223149"] { background-color: #f1f5f9 !important; color: #334155 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .bt-controls, [data-theme="light"] .bt-year-group, [data-theme="light"] .bt-radio-group, [data-theme="light"] .bt-stat-box, [data-theme="light"] .bt-cagr-box, [data-theme="light"] .bt-disc-box { background: #ffffff !important; border-color: #e2e8f0 !important; }
[data-theme="light"] .bt-stat-box h4 { color: #334155 !important; font-weight: 700 !important; }
[data-theme="light"] .bt-stat-box .val, [data-theme="light"] .bt-cagr-row span.text-white, [data-theme="light"] .bt-radio-group label { color: #0f172a !important; }
[data-theme="light"] .bt-stat-box .val.pos { color: #15803d !important; }
[data-theme="light"] .bt-stat-box .val.neg { color: #b91c1c !important; }
[data-theme="light"] .bt-cagr-box h4 { color: #334155 !important; font-weight: 800 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .bt-cagr-row .text-gray-300 { color: #334155 !important; font-weight: 600 !important; }
[data-theme="light"] .bt-disc-box p.text-gray-300 { color: #475569 !important; }
[data-theme="light"] .bt-disc-box p.text-gray-300 b { color: #0f172a !important; }
[data-theme="light"] .bt-disc-box h4.text-yellow-400 { color: #d97706 !important; }
[data-theme="light"] .bt-year-btn { color: #64748b !important; }
[data-theme="light"] .bt-year-btn:hover { background-color: #e2e8f0 !important; }
[data-theme="light"] .bt-year-btn.active { background-color: #fffbeb !important; border-color: #fde68a !important; color: #d97706 !important; box-shadow: none !important;}
[data-theme="light"] #panel-backtest > div:last-child { background-color: #ffffff !important; border-color: #e2e8f0 !important; }
[data-theme="light"] #panel-backtest > div:last-child > div:first-child { background-color: #e2e8f0 !important; color: #0f172a !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .bt-log-table th { background-color: #f1f5f9 !important; color: #475569 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .bt-log-table td { border-bottom-color: #f1f5f9 !important; color: #334155 !important; }
[data-theme="light"] .bt-log-table td[style*="#22c55e"], [data-theme="light"] .bt-log-table td[style*="rgb(34, 197, 94)"] { color: #15803d !important; font-weight: 700 !important; }
[data-theme="light"] .bt-log-table td[style*="#ef4444"], [data-theme="light"] .bt-log-table td[style*="rgb(239, 68, 68)"] { color: #b91c1c !important; font-weight: 700 !important; }
[data-theme="light"] .bt-log-table tbody tr { background-color: #ffffff !important; }
[data-theme="light"] .bt-log-table tbody tr:nth-child(even) { background-color: #f8fafc !important; }
[data-theme="light"] .bt-log-table tbody tr:hover { background-color: #f0f9ff !important; }
[data-theme="light"] #bt-trade-log-foot { background-color: #f1f5f9 !important; }
[data-theme="light"] #bt-trade-log-foot td { color: #334155 !important; border-top-color: #cbd5e1 !important; }
[data-theme="light"] #bt-trade-log-foot td[style*="#22c55e"], [data-theme="light"] #bt-trade-log-foot td[style*="rgb(34, 197, 94)"] { color: #15803d !important; font-weight: 800 !important; }
[data-theme="light"] #bt-trade-log-foot td[style*="#ef4444"], [data-theme="light"] #bt-trade-log-foot td[style*="rgb(239, 68, 68)"] { color: #b91c1c !important; font-weight: 800 !important; }
[data-theme="light"] .bt-status-closed { background-color: #f1f5f9 !important; color: #64748b !important; border-color: #cbd5e1 !important; box-shadow: none !important;}
[data-theme="light"] #bt-cagr-pro.text-green-400 { color: #15803d !important; }
[data-theme="light"] #bt-cagr-pro.text-red-400 { color: #b91c1c !important; }


/* =========================================================
   10. MODULE: DERIVATIVES (PHÁI SINH)
   ========================================================= */
[data-theme="light"] .bg-\[\#0b0e11\] { background-color: #f8fafc !important; }
[data-theme="light"] .glass-panel, [data-theme="light"] .bg-\[\#111827\] { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; }
[data-theme="light"] .text-white, [data-theme="light"] .text-gray-100, [data-theme="light"] .text-gray-200, [data-theme="light"] .text-gray-300 { color: #0f172a !important; }
[data-theme="light"] .text-gray-400, [data-theme="light"] .text-gray-500 { color: #475569 !important; }
[data-theme="light"] .glow-green { text-shadow: none !important; color: #15803d !important; }
[data-theme="light"] .glow-red { text-shadow: none !important; color: #b91c1c !important; }
[data-theme="light"] .glow-purple { text-shadow: none !important; color: #7e22ce !important; }
[data-theme="light"] .text-shadow-glow { text-shadow: none !important; }
[data-theme="light"] .bg-gray-800, [data-theme="light"] .bg-gray-800\/50, [data-theme="light"] .bg-gray-800\/40, [data-theme="light"] .bg-gray-900, [data-theme="light"] .bg-gray-900\/50, [data-theme="light"] .bg-gray-900\/30 { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .border-gray-800, [data-theme="light"] .border-gray-800\/50, [data-theme="light"] .border-gray-700, [data-theme="light"] .border-gray-700\/50, [data-theme="light"] .border-gray-600 { border-color: #cbd5e1 !important; }
[data-theme="light"] .tab-btn { color: #64748b !important; }
[data-theme="light"] .tab-btn:hover { color: #0f172a !important; background-color: #e2e8f0 !important; }
/* 3. Trạng thái Active (Đang chọn - NHÓM PRO) */
[data-theme="light"] .tab-btn.active { 
    color: #2563eb !important; 
    border-bottom-color: #2563eb !important; 
    background-color: #eff6ff !important; /* Nền xanh pastel cực đẹp */
}
[data-theme="light"] thead tr, [data-theme="light"] th[class*="bg-gray-900"] { background-color: #f8fafc !important; color: #475569 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] tbody tr { border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] tbody tr:hover { background-color: #f0f9ff !important; }
[data-theme="light"] tbody tr:nth-child(even) { background-color: #f8fafc !important; }
[data-theme="light"] .text-green-500 { color: #15803d !important; }
[data-theme="light"] .text-red-400, [data-theme="light"] .text-red-500 { color: #b91c1c !important; }
[data-theme="light"] .guide-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .guide-header, [data-theme="light"] .guide-footer { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .guide-text { color: #475569 !important; }
[data-theme="light"] .guide-hl { color: #0f172a !important; font-weight: 800 !important; }
[data-theme="light"] .text-cyan-400 { color: #0284c7 !important; }
[data-theme="light"] .text-yellow-500 { color: #b45309 !important; }
[data-theme="light"] .text-yellow-400 { color: #d97706 !important; }
[data-theme="light"] .text-gray-600 { color: #475569 !important; }
[data-theme="light"] #timer-box { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #countdown { color: #0f172a !important; }
[data-theme="light"] #hud-status.text-gray-500 { color: #64748b !important; }
[data-theme="light"] .bg-green-500\/10 { background-color: #dcfce7 !important; border-color: #86efac !important; }
[data-theme="light"] .bg-red-500\/10 { background-color: #fee2e2 !important; border-color: #fca5a5 !important; }
[data-theme="light"] .bg-gray-800\/40, [data-theme="light"] .bg-gray-900\/40 { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] header.glass-panel { border: none !important; border-bottom: 1px solid #1e293b !important; }
[data-theme="light"] nav.glass-panel { border: none !important; border-bottom: 1px solid #1e293b !important; }

/* FIX BUG 1: Phái sinh Drg Pastel Colors */
[data-theme="light"] span[id^="drg-"] { box-shadow: none !important; text-shadow: none !important; }
[data-theme="light"] span[id^="drg-"].bg-green-600 { background-color: #dcfce7 !important; color: #15803d !important; }
[data-theme="light"] span[id^="drg-"].bg-red-600 { background-color: #fee2e2 !important; color: #b91c1c !important; }
[data-theme="light"] span[id^="drg-"].bg-gray-700 { background-color: #f1f5f9 !important; color: #64748b !important; }

/* FIX BUG 1: Lỗi Dropdown Thống kê che khuất */
.relative.z-40.col-span-1 { z-index: 99999 !important; }
#smartDropdownMenu { z-index: 99999 !important; }

[data-theme="light"] div#smartDropdownMenu { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
[data-theme="light"] div#smartDropdownMenu * { border-color: #e2e8f0 !important; }
[data-theme="light"] div#smartDropdownMenu .bg-black\/20 { background-color: #f8fafc !important; }
[data-theme="light"] div#smartDropdownMenu .hover\:bg-white\/5:hover, [data-theme="light"] div#smartDropdownMenu .hover\:bg-gray-800\/50:hover { background-color: #f1f5f9 !important; }
[data-theme="light"] div#smartDropdownMenu .text-yellow-500 { color: #d97706 !important; }
[data-theme="light"] div#smartDropdownMenu .text-green-400, [data-theme="light"] div#smartDropdownMenu .text-green-500 { color: #15803d !important; font-weight: 700 !important; }
[data-theme="light"] div#smartDropdownMenu .text-red-400 { color: #b91c1c !important; font-weight: 700 !important; }
[data-theme="light"] #smartDropdownBtn { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #smartDropdownBtn:hover { background-color: #f8fafc !important; border-color: #3b82f6 !important; }
[data-theme="light"] #smartLabel { color: #0f172a !important; }
[data-theme="light"] button#btn-tf-m5-pro:not(.opacity-50) { background-color: #f3e8ff !important; color: #7e22ce !important; border-color: #d8b4fe !important; box-shadow: none !important; }
[data-theme="light"] button#btn-tf-m5:not(.opacity-50) { background-color: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; box-shadow: none !important; }
[data-theme="light"] button#btn-tf-m15:not(.opacity-50) { background-color: #fef3c7 !important; color: #b45309 !important; border-color: #fde047 !important; box-shadow: none !important; }
[data-theme="light"] button[id^="btn-tf-"].opacity-50 { background-color: #f8fafc !important; color: #94a3b8 !important; border-color: #e2e8f0 !important; opacity: 1 !important; filter: grayscale(1) !important; }
[data-theme="light"] #discipline-banner, [data-theme="light"] #tab-sim .bg-\[\#151b26\] { background-color: #f8fafc !important; border-color: #cbd5e1 !important; background-image: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important; }
[data-theme="light"] #discipline-banner * { text-shadow: none !important; }
[data-theme="light"] #discipline-banner .text-white { color: #0f172a !important; }
[data-theme="light"] #discipline-banner .text-gray-300, [data-theme="light"] #discipline-banner .text-gray-500 { color: #64748b !important; font-weight: 600 !important; }
[data-theme="light"] #discipline-banner .text-yellow-400, [data-theme="light"] #discipline-banner .text-yellow-500 { color: #b45309 !important; font-weight: 800 !important; }
[data-theme="light"] #discipline-banner .bg-green-500\/10 { background-color: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }
[data-theme="light"] #sim-net-profit { color: #15803d !important; }
[data-theme="light"] #sim-roi { color: #b45309 !important; }
[data-theme="light"] #sim-total-fee { color: #475569 !important; }
[data-theme="light"] #sim-avg-profit { color: #7e22ce !important; }
[data-theme="light"] #sim-avg-roi { color: #9333ea !important; }
[data-theme="light"] #tab-sim .glass-panel p.text-gray-400, [data-theme="light"] #tab-sim .glass-panel p.text-gray-500 { color: #64748b !important; }
[data-theme="light"] #tab-sim table thead tr { background-color: #e2e8f0 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] #tab-sim table thead th { color: #334155 !important; font-weight: 700 !important; }
[data-theme="light"] #sim-table-body td { border-bottom-color: #e2e8f0 !important; color: #0f172a !important; }
[data-theme="light"] #sim-table-body tr.bg-yellow-500\/10 { background-color: #fef9c3 !important; border-left-color: #facc15 !important; }
[data-theme="light"] #sim-table-body tr:hover { background-color: #f1f5f9 !important; }
[data-theme="light"] #sim-table-body td.text-white { color: #0f172a !important; font-weight: 800 !important; }
[data-theme="light"] #pagination-controls { background-color: #f8fafc !important; border-top-color: #cbd5e1 !important; }
[data-theme="light"] #pagination-controls button.bg-gray-800 { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; }
[data-theme="light"] #pagination-controls button.bg-gray-800:hover { background-color: #f1f5f9 !important; color: #0f172a !important; }
[data-theme="light"] #current-page { color: #d97706 !important; }
[data-theme="light"] #total-pages { color: #0f172a !important; }
[data-theme="light"] #sim-compounding { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #sim-compounding:checked { background-color: #d97706 !important; border-color: #d97706 !important; }
[data-theme="light"] #tab-sim input[type="text"], [data-theme="light"] #tab-sim input[type="number"], [data-theme="light"] #tab-sim input[type="month"] { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important; }
[data-theme="light"] #tab-sim input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0) !important; cursor: pointer; }
[data-theme="light"] #tab-sim .bg-gray-900\/50 { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] #tab-sim span.bg-gray-700, [data-theme="light"] #tab-live span.bg-gray-700 { background-color: #e2e8f0 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] #sim-total-trades, [data-theme="light"] #live-total-orders { color: #1e40af !important; font-weight: 800 !important; }
[data-theme="light"] #smartDropdownMenu .bg-\[\#1a1f2e\] { background-color: #f8fafc !important; border-bottom: 1px solid #cbd5e1 !important; }


/* =========================================================
   11. MODULE: FUNDS (QUẢN LÝ QUỸ)
   ========================================================= */
/* FIX BUG 3: Đã loại bỏ độ rộng cứng .fund-table th/td để bảng tự động co giãn */
[data-theme="light"] .fund-container { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .fund-tabs { border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .fund-tabs > div[style*="border-left"] { border-left-color: #cbd5e1 !important; }
[data-theme="light"] .tab-btn { color: #64748b !important; }
[data-theme="light"] .tab-btn:hover { color: #2563eb !important; }
[data-theme="light"] .tab-btn.active { color: #2563eb !important; border-bottom-color: #2563eb !important; }
[data-theme="light"] .tab-btn[data-fund="Admin"].active { color: #d97706 !important; border-bottom-color: #d97706 !important; text-shadow: none !important; }
[data-theme="light"] .tab-btn[data-fund="Admin"]:hover { background: rgba(217, 119, 6, 0.1) !important; color: #d97706 !important; }
[data-theme="light"] .fund-desc-box h2 { color: #b45309 !important; border-right-color: #cbd5e1 !important; }
[data-theme="light"] .fund-desc-box ul { color: #475569 !important; }
[data-theme="light"] .stat-card { background: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .stat-title { color: #64748b !important; }
[data-theme="light"] .stat-value { color: #0f172a !important; }
[data-theme="light"] .stat-value.text-yellow { color: #b45309 !important; }
[data-theme="light"] .stat-value.text-green { color: #15803d !important; }
[data-theme="light"] .stat-value.text-red { color: #b91c1c !important; }
[data-theme="light"] .stat-value.text-blue { color: #1d4ed8 !important; }
[data-theme="light"] #stat-allocation span.text-gray-500 { color: #94a3b8 !important; }
[data-theme="light"] #stat-allocation span.text-gray-400 { color: #475569 !important; }
[data-theme="light"] #chart-title-text { color: #1e40af !important; }
[data-theme="light"] .tf-btn { background: #f1f5f9 !important; color: #64748b !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .tf-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
[data-theme="light"] .tf-btn.active { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; }
[data-theme="light"] #chart-view-mode { background: #ffffff !important; color: #0f172a !important; }
[data-theme="light"] .section-title { color: #1e40af !important; }
[data-theme="light"] .section-title span { color: #64748b !important; }
[data-theme="light"] div[style*="font-size: 1rem; color: #fff"] { color: #1e40af !important; font-weight: 800 !important; }
[data-theme="light"] #slot-info { color: #d97706 !important; }
[data-theme="light"] input#filter-ticker, [data-theme="light"] select#filter-industry, [data-theme="light"] input#filter-month { background: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; color-scheme: light !important; }
[data-theme="light"] button[onclick="clearFilters()"] { background: #f1f5f9 !important; color: #1e40af !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] button[onclick="clearFilters()"]:hover { background: #e2e8f0 !important; }
[data-theme="light"] .table-container { border-color: #cbd5e1 !important; }
[data-theme="light"] .fund-table th { background: #f8fafc !important; color: #475569 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .fund-table td { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .fund-table td[style*="color: #9ca3af"] { color: #64748b !important; }
[data-theme="light"] .fund-table td[style*="color: #ffffff"] { color: #0f172a !important; font-weight: 600 !important; }
[data-theme="light"] .fund-table tr:hover { background-color: #f0f9ff !important; }
[data-theme="light"] .fund-table td[style*="color: #facc15"] { color: #1e40af !important; } 
[data-theme="light"] .fund-table td.text-green, [data-theme="light"] .text-green { color: #15803d !important; font-weight: 700 !important; }
[data-theme="light"] .fund-table td.text-red, [data-theme="light"] .text-red { color: #b91c1c !important; font-weight: 700 !important; }
[data-theme="light"] .fund-table td.text-yellow, [data-theme="light"] .text-yellow { color: #d97706 !important; font-weight: 700 !important; }
[data-theme="light"] .fund-table span[style*="color: #facc15"] { color: #b45309 !important; border-color: #f59e0b !important; background-color: #fef3c7 !important; }
[data-theme="light"] .fund-table span[style*="color: #22c55e"] { color: #15803d !important; border-color: #4ade80 !important; background-color: #dcfce7 !important; }
[data-theme="light"] .fund-table span[style*="color: #9ca3af"] { color: #475569 !important; border-color: #cbd5e1 !important; background-color: #f1f5f9 !important; }
[data-theme="light"] .fund-table .bg-sold { color: #b91c1c !important; border-color: #fca5a5 !important; background-color: #fee2e2 !important; box-shadow: none !important; }
[data-theme="light"] .fund-table tr[style*="background: #111827"] { background-color: #f8fafc !important; border-top-color: #cbd5e1 !important; }
[data-theme="light"] .fund-table tr[style*="background: #111827"] td[style*="color: #eab308"] { color: #b45309 !important; } 
[data-theme="light"] .fund-table tr[style*="background: #111827"] td[style*="color: #fff"] { color: #0f172a !important; } 
[data-theme="light"] .fund-table tr[style*="background: #111827"] td[style*="#22c55e"] { color: #15803d !important; } 
[data-theme="light"] .fund-table tr[style*="background: #111827"] td[style*="#ef4444"] { color: #b91c1c !important; } 
[data-theme="light"] div[style*="background: rgba(239, 68, 68, 0.05)"] { background: #fef2f2 !important; border-left-color: #ef4444 !important; }
[data-theme="light"] div[style*="background: rgba(239, 68, 68, 0.05)"] div[style*="color: #9ca3af"] { color: #475569 !important; }
[data-theme="light"] div[style*="background: rgba(239, 68, 68, 0.05)"] strong { color: #b91c1c !important; }


/* =========================================================
   12. MODULE: REPORT (TRUNG TÂM PHÂN TÍCH)
   ========================================================= */
[data-theme="light"] #stockSearch { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important; }
[data-theme="light"] #stockSearch::placeholder { color: #94a3b8 !important; }
[data-theme="light"] .table-wrapper { border-color: #cbd5e1 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important; }
[data-theme="light"] .report-table thead { background-color: #f8fafc !important; }
[data-theme="light"] .report-table th { color: #475569 !important; border-bottom-color: #cbd5e1 !important; font-weight: 700 !important; }
[data-theme="light"] .report-table td { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .title-link { color: #1e40af !important; font-weight: 600 !important; } 
[data-theme="light"] .title-link:hover { color: #2563eb !important; text-decoration: underline; }
[data-theme="light"] .stock-logo { border: 1px solid #e2e8f0 !important; }
[data-theme="light"] .report-table td.recommendation-buy, [data-theme="light"] .recommendation-buy { color: #15803d !important; font-weight: 700 !important; }
[data-theme="light"] .report-table td.recommendation-sell, [data-theme="light"] .recommendation-sell { color: #b91c1c !important; font-weight: 700 !important; }
[data-theme="light"] .report-table td.recommendation-neutral, [data-theme="light"] .recommendation-neutral { color: #64748b !important; font-weight: 700 !important; }    
[data-theme="light"] .download-btn { color: #2563eb !important; border-color: #bfdbfe !important; background-color: #eff6ff !important; }
[data-theme="light"] .download-btn:hover { background-color: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important; }
[data-theme="light"] .report-note { color: #64748b !important; }
[data-theme="light"] .report-table .text-gray-600 { color: #94a3b8 !important; }
[data-theme="light"] .report-table i.fa-lock { color: #cbd5e1 !important; }
[data-theme="light"] .close { color: #64748b !important; }
[data-theme="light"] .close:hover { color: #ef4444 !important; }


/* =========================================================
   13. MODULE: ADMIN DASHBOARD
   ========================================================= */
[data-theme="light"] .admin-nav, [data-theme="light"] .admin-content { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important; }
[data-theme="light"] .admin-nav a:not(.no-ajax) { color: #475569 !important; }
[data-theme="light"] .admin-nav a:not(.no-ajax):hover { background-color: #f1f5f9 !important; color: #0f172a !important; }
[data-theme="light"] .admin-nav a.active { background-color: #eff6ff !important; color: #1d4ed8 !important; font-weight: 700 !important; }
[data-theme="light"] .admin-nav p { color: #64748b !important; }
[data-theme="light"] .admin-content h1, [data-theme="light"] .admin-content h2, [data-theme="light"] .admin-content h3 { color: #1e40af !important; }
[data-theme="light"] .admin-content p.text-gray-400 { color: #64748b !important; }
[data-theme="light"] .data-table th, [data-theme="light"] #usersTable th, [data-theme="light"] .admin-content thead.bg-gray-700 th { background-color: #f8fafc !important; color: #475569 !important; border-bottom: 2px solid #cbd5e1 !important; }
[data-theme="light"] .data-table td, [data-theme="light"] #usersTable td { border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; }
[data-theme="light"] .data-table tbody tr:hover, [data-theme="light"] #usersTable tbody tr:hover { background-color: #f0f9ff !important; }
[data-theme="light"] .data-table tbody.bg-gray-800 { background-color: #ffffff !important; }
[data-theme="light"] #usersTable td .text-gray-400, [data-theme="light"] #usersTable td .text-gray-500, [data-theme="light"] #usersTable td .text-gray-300 { color: #64748b !important; }
[data-theme="light"] #usersTable td .text-white { color: #0f172a !important; font-weight: 600 !important; }
[data-theme="light"] #usersTable td.text-cyan-400 { color: #0284c7 !important; font-weight: 700 !important; }
[data-theme="light"] #usersTable td.text-yellow-400 { color: #b45309 !important; font-weight: 700 !important; }
[data-theme="light"] #usersTable td.text-red-400 { color: #b91c1c !important; font-weight: 700 !important; }
[data-theme="light"] #userSearchInput, [data-theme="light"] input[type="text"].bg-gray-700, [data-theme="light"] textarea.bg-gray-700, [data-theme="light"] .form-select, [data-theme="light"] .form-select-xs { background-color: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] #userSearchInput::placeholder, [data-theme="light"] input[type="text"].bg-gray-700::placeholder { color: #94a3b8 !important; }
[data-theme="light"] .filter-btn.bg-gray-600 { background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
[data-theme="light"] .filter-btn.bg-gray-600.active { background-color: #e2e8f0 !important; color: #0f172a !important; font-weight: bold !important; outline: none !important; border-color: #94a3b8 !important;}
[data-theme="light"] .filter-btn.bg-green-900\/80 { background-color: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
[data-theme="light"] .filter-btn.bg-green-900\/80.active { background-color: #bbf7d0 !important; font-weight: bold !important; outline: none !important; border-color: #4ade80 !important;}
[data-theme="light"] .filter-btn.bg-red-900\/80 { background-color: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }
[data-theme="light"] .filter-btn.bg-red-900\/80.active { background-color: #fecaca !important; font-weight: bold !important; outline: none !important; border-color: #f87171 !important;}
[data-theme="light"] .stat-card { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left-width: 5px !important; }
[data-theme="light"] .stat-card .label { color: #64748b !important; }
[data-theme="light"] .stat-card .value { color: #0f172a !important; }
[data-theme="light"] .stat-card.border-yellow-500 .value { color: #b45309 !important; }
[data-theme="light"] .stat-card.border-cyan-500 .value { color: #0369a1 !important; }
[data-theme="light"] .stat-card.border-green-500 .value { color: #15803d !important; }
[data-theme="light"] .stat-card.border-blue-500 .value { color: #1d4ed8 !important; }
[data-theme="light"] .admin-content .bg-gray-800 { background-color: #ffffff !important; }
[data-theme="light"] .admin-content .border-gray-700, [data-theme="light"] .admin-content .border-gray-600 { border-color: #cbd5e1 !important; }
[data-theme="light"] .admin-content .bg-gray-700\/50 { background-color: #f8fafc !important; }
[data-theme="light"] #deleteUserModal .bg-gray-800, [data-theme="light"] #editExpiryModal .bg-gray-800 { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important; }
[data-theme="light"] #deleteUserModal p.text-gray-300, [data-theme="light"] #editExpiryModal label.text-gray-300 { color: #475569 !important; }
[data-theme="light"] #editExpiryModal input[type="date"] { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; color-scheme: light !important; }


/* =========================================================
   14. MODULE: AUTH & STATIC PAGES (ĐĂNG NHẬP, BÀI VIẾT, CHÍNH SÁCH)
   ========================================================= */
[data-theme="light"] .login-container, [data-theme="light"] .register-container, [data-theme="light"] .form-container { background-color: #f8fafc !important; }
[data-theme="light"] .login-box, [data-theme="light"] .register-box, [data-theme="light"] .form-box { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .login-box h2, [data-theme="light"] .register-box h2, [data-theme="light"] .form-box h2 { color: #1e40af !important; }
[data-theme="light"] .form-box .subtitle, [data-theme="light"] .divider-text { color: #64748b !important; }
[data-theme="light"] .form-group input { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
[data-theme="light"] .form-group input:focus { background-color: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; }
[data-theme="light"] .form-group input::placeholder { color: #94a3b8 !important; }
[data-theme="light"] .form-group .icon, [data-theme="light"] .toggle-password-icon { color: #64748b !important; }
[data-theme="light"] .toggle-password-icon:hover { color: #0f172a !important; }
[data-theme="light"] .form-options, [data-theme="light"] .register-cta, [data-theme="light"] .login-cta, [data-theme="light"] label[for="agree_terms"], [data-theme="light"] div[style*="font-size: 0.75rem; color: #6b7280;"] { color: #475569 !important; }
[data-theme="light"] .register-cta a, [data-theme="light"] .form-options a, [data-theme="light"] .login-cta a, [data-theme="light"] a[href="/terms"], [data-theme="light"] a[href="/privacy"] { color: #2563eb !important; font-weight: 700 !important; }
[data-theme="light"] .bg-red-900\/50 { background-color: #fef2f2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; }
[data-theme="light"] .bg-green-900\/50 { background-color: #f0fdf4 !important; color: #15803d !important; border-color: #86efac !important; }

/* Pricing */
[data-theme="light"] .pricing-container h2 { color: #b45309 !important; }
[data-theme="light"] .pricing-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .pricing-card h3 { color: #1e40af !important; }
[data-theme="light"] .pricing-card .price { color: #d97706 !important; }
[data-theme="light"] .pricing-card .sub-price { color: #64748b !important; }
[data-theme="light"] .pricing-card ul li { color: #475569 !important; }
[data-theme="light"] .pricing-card ul li::before { color: #15803d !important; }
[data-theme="light"] .pricing-card.free { border-color: #16a34a !important; }
[data-theme="light"] .pricing-card.recommended { border-color: #d97706 !important; box-shadow: 0 10px 25px rgba(217,119,6,0.15) !important; }
[data-theme="light"] .ribbon span { background-color: #d97706 !important; color: #ffffff !important; }
[data-theme="light"] .payment-info { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .payment-info h3 { color: #0284c7 !important; }
[data-theme="light"] .payment-info p { color: #334155 !important; }
[data-theme="light"] .payment-info strong { color: #b45309 !important; }
[data-theme="light"] .payment-info i { color: #64748b !important; }
[data-theme="light"] .payment-info img { border-color: #cbd5e1 !important; }
[data-theme="light"] .pricing-card.deriv-card { background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important; border-color: #0ea5e9 !important; }
[data-theme="light"] .pricing-card.deriv-card h3 { color: #0369a1 !important; text-shadow: none !important; }
[data-theme="light"] .deriv-option-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .deriv-option-card:hover { background-color: #e0f2fe !important; border-color: #0ea5e9 !important; }
[data-theme="light"] .deriv-option-card.active { background: #bae6fd !important; border-color: #0284c7 !important; }
[data-theme="light"] .deriv-option-card .duration { color: #0f172a !important; }
[data-theme="light"] .deriv-option-card .price-tag { color: #0369a1 !important; }
[data-theme="light"] .check-icon { color: #0284c7 !important; }
[data-theme="light"] .pricing-card.deriv-card ul li[style*="color:#e0f2fe"] { color: #334155 !important; }
[data-theme="light"] .pricing-card.deriv-card .pricing-button { background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 100%) !important; color: #ffffff !important; }

/* Article/Guide */
[data-theme="light"] .article-container, [data-theme="light"] .guide-container, [data-theme="light"] .pricing-container { background-color: transparent !important; color: #334155 !important; }
[data-theme="light"] .article-container h1, [data-theme="light"] .guide-container h1, [data-theme="light"] .pricing-container h1, [data-theme="light"] .article-container h2, [data-theme="light"] .guide-container h2, [data-theme="light"] .pricing-container h2, [data-theme="light"] .article-container h3, [data-theme="light"] .guide-container h3, [data-theme="light"] .pricing-container h3, [data-theme="light"] .article-container strong, [data-theme="light"] .guide-container strong, [data-theme="light"] .pricing-container strong { color: #0f172a !important; }
[data-theme="light"] .article-container p, [data-theme="light"] .guide-container p, [data-theme="light"] .pricing-container p, [data-theme="light"] .article-container li, [data-theme="light"] .guide-container li, [data-theme="light"] .pricing-container li { color: #334155 !important; }
[data-theme="light"] .img-wrapper, [data-theme="light"] .responsive-image { background-color: #0f172a !important; border: 10px solid #ffffff !important; outline: 1px solid #cbd5e1 !important; border-radius: 16px !important; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.05) !important; padding: 0 !important; overflow: hidden; }
[data-theme="light"] .img-wrapper img { border-radius: 0 !important; margin: 0 auto !important; }
[data-theme="light"] .img-caption { background-color: #f8fafc !important; color: #64748b !important; margin: 0 !important; padding: 12px !important; border-top: 1px solid #e2e8f0 !important; font-weight: 500; }
[data-theme="light"] .cta-box { background: #ffffff !important; border-color: #cbd5e1 !important; border-left-color: #d97706 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .cta-box .cta-header h3 { color: #d97706 !important; }
[data-theme="light"] .cta-box .cta-desc { color: #64748b !important; }
[data-theme="light"] .contact-icon { background-color: #fef3c7 !important; color: #d97706 !important; }
[data-theme="light"] .contact-item { color: #334155 !important; }
[data-theme="light"] .contact-item span[style*="color: #9ca3af"] { color: #64748b !important; } 
[data-theme="light"] .contact-item strong { color: #0f172a !important; font-weight: 800 !important; }
[data-theme="light"] .contact-item a { color: #2563eb !important; font-weight: 700 !important; }
[data-theme="light"] .contact-item a:hover { color: #1d4ed8 !important; text-decoration: underline !important; }
[data-theme="light"] .cta-qr-container { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .cta-qr-img { border-color: #d97706 !important; }
[data-theme="light"] .cta-qr-text { color: #475569 !important; font-weight: 600 !important; }

/* Terms & Privacy */
[data-theme="light"] .policy-container { background-color: #f8fafc !important; }
[data-theme="light"] .policy-box { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .policy-box h1 { color: #1e40af !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] .policy-box h2 { color: #0f172a !important; }
[data-theme="light"] .policy-box p, [data-theme="light"] .policy-box li { color: #334155 !important; }
[data-theme="light"] .policy-box .last-updated { color: #64748b !important; }
[data-theme="light"] .policy-box a { color: #2563eb !important; font-weight: 600 !important; }
[data-theme="light"] .policy-box a:hover { color: #1d4ed8 !important; }


/* =========================================================
   15. MOBILE RESPONSIVE (MEDIA QUERIES)
   ========================================================= */
@media (max-width: 768px) {

    /* --- FIX TRÚNG ĐÍCH: LỖI TEXT BỊ CUỘN NGANG VÀ HỤT NỀN TRÊN MOBILE --- */
    
    /* 1. Xóa rào cản cấu trúc của khung chứa bảng để giải phóng các thẻ Note ra ngoài */
    #daily-view:not([style*="display: none"]),
    #weekly-view:not([style*="display: none"]) {
        display: contents !important;
    }

    /* 2. Ghim chặt phần "Lưu ý" và "Mô tả danh mục" vào mép trái màn hình */
    .table-note-container,
    #portfolio-desc-container {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        z-index: 45 !important;
        
        /* Bỏ các margin thừa để thiết kế tràn lề màn hình mượt mà hơn */
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-right: none !important;
        border-radius: 0 !important;
    }

    /* Xóa viền trái của phần danh mục (Vẫn giữ lại vạch xanh dương của phần Lưu ý) */
    #portfolio-desc-container {
        border-left: none !important;
    }

    /* 3. Phủ dải màu nền dài vô tận sang phải để không bị lộ vùng trống khi vuốt bảng */
    .table-note-container::after,
    #portfolio-desc-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        width: calc(1120px - 100vw) !important;
        height: 100%;
        background-color: inherit; /* Tự động đồng bộ màu nền với giao diện Sáng/Tối */
        border-top: inherit;
        border-bottom: inherit;
        z-index: -1;
    }
    /* 1. Thiết lập lại Khung Header chính */
    .sticky-header-container header {
        /* THÊM MỚI: Tăng padding-top để tránh thanh trạng thái đt, giảm padding-bottom */
        padding: 12px 10px 6px 10px !important; 
    }

    /* Ép hiển thị dạng lưới (Grid) 3 cột để cân bằng tuyệt đối */
    .sticky-header-container header > div.flex.items-center {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important; /* Trái: Vừa đủ, Giữa: Co giãn, Phải: Vừa đủ */
        align-items: center !important; 
        gap: 8px !important; /* Khoảng cách giữa các cột */
    }

    /* 2. Cụm Trái (Chỉ chứa Logo) */
    .sticky-header-container header > div.flex.items-center > div.w-1\/4:first-child {
        width: auto !important; 
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    .sticky-header-container header img {
        height: 34px !important; /* Logo vừa vặn, không quá to */
        margin-right: 0 !important;
    }

    /* 3. Cụm Giữa (Tên App) */
    .sticky-header-container header > div.flex.items-center > div.w-1\/2 {
        width: auto !important;
        display: flex !important;
        justify-content: center !important; /* Ép tên App nằm ngay giữa màn hình */
        padding: 0 !important;
        text-align: center !important;
    }
    
    .sticky-header-container header h1.text-3xl {
        font-size: 1.15rem !important; /* Chữ nhỏ gọn, tinh tế */
        font-weight: 800 !important; /* Tăng độ đậm để nổi bật */
        line-height: 1 !important;
        margin: 0 !important;
        letter-spacing: -0.5px !important; /* Ép chữ sát lại xíu cho sang */
    }
    
    .sticky-header-container header p.italic {
        display: none !important; /* Ẩn slogan thừa */
    }

    /* 4. Cụm Phải (Nút User, Chuông, Cài đặt) */
    .sticky-header-container header > div.flex.items-center > div.w-1\/4:last-child {
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* Ẩn Ngày giờ & Đồng hồ */
    .sticky-header-container header #header-data-date,
    .sticky-header-container header #current-datetime,
    .sticky-header-container header .text-gray-500.mx-1 {
        display: none !important;
    }

    /* Tạo khoảng đệm dưới đáy trên mọi trang để Bottom Bar 60px không che nội dung */
    body {
        padding-bottom: 60px !important;
    }

    /* Ẩn nút Mặt trời/Mặt trăng trên Header Mobile ở tất cả các trang */
    header #theme-toggle,
    .sticky-header-container header #theme-toggle {
        display: none !important;
    }

    /* Chỉnh cụm Chuông & Avatar gọn gàng, đồng nhất mọi trang */
    .sticky-header-container header .space-x-4 {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 2px 0 0 !important;
    }
    .sticky-header-container header .space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }
    
    /* Thu nhỏ Avatar & bỏ viền xanh trên Mobile giống trang Index */
    .sticky-header-container header .tech-avatar-wrapper {
        width: 32px !important; 
        height: 32px !important;
        border: none !important;
    }
    
    /* Thu nhỏ Icon Chuông */
    .sticky-header-container header .fa-bell {
        font-size: 1.1rem !important;
    }

    /* 5. Thanh Menu điều hướng (Hàng dưới - Vuốt ngang) */
    nav { 
        justify-content: flex-start !important; 
        padding: 0 !important; 
    }
    nav ul { 
        display: flex !important; 
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch; 
        width: 100vw !important; 
        padding: 6px 10px !important; /* Tăng lề trên dưới của thanh menu lên xíu cho thoáng */
    }
    nav ul::-webkit-scrollbar { display: none !important; }
    
    /* Giữ nguyên các thông số z-index */
    header.glass-panel { z-index: 100000 !important; }
    .sticky-header-container { z-index: 100000 !important; }
    
    /* Dropdowns */
    #notification-dropdown, #user-menu { position: fixed !important; top: 65px !important; z-index: 100001 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important; }
    #notification-dropdown { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 96vw !important; max-width: 420px !important; max-height: 80vh !important; }
    #user-menu { right: 2vw !important; }
    .notification-item p { white-space: normal !important; word-wrap: break-word !important; }

    /* Support Modal */
    .mobile-support-modal { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 85vw !important; max-width: 320px !important; z-index: 9999999 !important; outline: 2000px solid rgba(0,0,0,0.85) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.9) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: all 0.3s ease-in-out !important; border-radius: 0.5rem; margin-top: 0 !important; }
    .mobile-support-modal.show-modal { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
    .mobile-support-modal .rotate-45 { display: none !important; }
    
    /* Filter Bar */
    .filter-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 8px 10px !important; gap: 10px !important; margin: 5px 0 !important; position: relative !important; z-index: 100 !important; backdrop-filter: none !important; }
    .filter-bar::-webkit-scrollbar { display: none !important; }
    .filter-item { flex: 0 0 auto !important; }
    .custom-dropdown-content, .portfolio-dropdown-content { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 85% !important; max-width: 320px !important; z-index: 99999 !important; background-color: #1f2937 !important; border-radius: 8px !important; border: 1px solid #4b5563 !important; box-shadow: 0 0 0 2000px rgba(0,0,0,0.7), 0 10px 25px rgba(0,0,0,0.5) !important; }
    
    /* Base Tables */
    th, td { font-size: 0.75rem !important; padding: 0.4rem 0.2rem !important; }
    #stock-table th:nth-child(1), #weekly-stock-table th:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 60 !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2); }
    #stock-table td:nth-child(1), #weekly-stock-table td:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 40 !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2); border-right: 1px solid var(--border-color); }
    #stock-table td:nth-child(1):hover, #weekly-stock-table td:nth-child(1):hover { z-index: 99999 !important; }
    .has-tooltip::after { display: none !important; }
    
    /* Universal Modal */
    #universal-modal .modal-content { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; border: none !important; margin: 0 !important; top: 0 !important; left: 0 !important; position: fixed !important; }
    #universal-modal .modal-header { flex-direction: column !important; align-items: flex-start !important; padding: 10px 40px 10px 10px !important; gap: 12px !important; }
    #universal-modal .modal-header > div { width: 100% !important; flex-wrap: wrap !important; }
    #universal-modal .modal-header button[onclick="closeUniModal()"] { position: absolute !important; top: 10px !important; right: 15px !important; font-size: 2rem !important; z-index: 50; }
    #floating-detail-panel { width: 100% !important; max-width: 100vw !important; position: relative !important; border-radius: 0 !important; border-right: none !important; }
    .sidebar-card > div[style*="display: grid"] { overflow-x: auto; padding-bottom: 5px; }
    
    
    #modal-body-flex { flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; }
    #panel-detail, #panel-chart, #panel-history, #panel-backtest { width: 100% !important; min-height: 400px; flex: none !important; border-right: none !important; border-left: none !important; border-bottom: 2px solid #374151; box-sizing: border-box !important; }
    #panel-backtest { padding: 10px 5px !important; overflow-x: hidden !important; }
    #panel-backtest .bt-controls { flex-direction: column !important; align-items: center !important; padding: 10px !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; }
    #panel-backtest .bt-year-group { width: 100% !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; box-sizing: border-box !important; padding-bottom: 4px !important; }
    #panel-backtest .bt-year-group::-webkit-scrollbar { display: none !important; }
    #panel-backtest .bt-year-btn { flex: 0 0 auto !important; padding: 6px 12px !important; font-size: 0.8rem !important; }
    #panel-backtest .bt-radio-group { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
    #uni-bt-toggle-chart-btn { width: 100% !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; }
    #panel-backtest .bt-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; box-sizing: border-box !important; }
    #panel-backtest .bt-stat-box { padding: 8px 2px !important; }
    #panel-backtest .bt-stat-box h4 { font-size: 0.65rem !important; }
    #panel-backtest .bt-stat-box .val { font-size: 0.95rem !important; }
    #panel-backtest .bt-ext-grid { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; box-sizing: border-box !important; }
    #uni-backtest-chart { height: 350px !important; width: 100% !important; }
    #panel-backtest .custom-scrollbar { width: calc(100% + 10px) !important; margin-left: -5px !important; padding: 0 5px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; box-sizing: border-box !important; }
    #panel-backtest .bt-log-table { min-width: 900px !important; }
    #panel-backtest .bt-log-table th:nth-child(2) { position: sticky !important; left: 0 !important; z-index: 20 !important; background-color: #1e293b !important; width: 65px !important; min-width: 65px !important; box-sizing: border-box !important; }
    #panel-backtest .bt-log-table td:nth-child(2) { position: sticky !important; left: 0 !important; z-index: 10 !important; background-color: #0f172a !important; width: 65px !important; min-width: 65px !important; box-sizing: border-box !important; }
    #panel-backtest .bt-log-table tbody tr:nth-child(even) td:nth-child(2) { background-color: #131c2c !important; }
    #panel-backtest .bt-log-table th:nth-child(3) { position: sticky !important; left: 65px !important; z-index: 20 !important; background-color: #1e293b !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.5) !important; }
    #panel-backtest .bt-log-table td:nth-child(3) { position: sticky !important; left: 65px !important; z-index: 10 !important; background-color: #0f172a !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.5) !important; }
    #panel-backtest .bt-log-table tbody tr:nth-child(even) td:nth-child(3) { background-color: #131c2c !important; }
    
    /* Backtest Light Mode Mobile */
    [data-theme="light"] #trade-log-table th:nth-child(2) { background-color: #f1f5f9 !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important; }
    [data-theme="light"] #trade-log-table td:nth-child(2) { background-color: #ffffff !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important; }

    /* Market Dashboard Mobile */
    .market-dashboard { display: flex !important; flex-direction: column !important; height: auto !important; }
    .market-summary-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
    .grid-card { width: 100% !important; height: auto !important; min-height: 250px; margin-bottom: 15px !important; }
    
    /* Funds Table Mobile */
    .fund-table { table-layout: auto !important; width: max-content !important; min-width: 100% !important; }
    .fund-table th, .fund-table td { white-space: nowrap !important; padding: 0.6rem 0.8rem !important; }
    .fund-table th:nth-child(1), .fund-table td:nth-child(1) { padding: 0.6rem 0.3rem !important; width: 30px !important; }
    .fund-table th:nth-child(2) { padding: 0.6rem 0.5rem !important; position: sticky !important; left: 0 !important; z-index: 99 !important; }
    .fund-table td:nth-child(2) { padding: 0.6rem 0.5rem !important; position: sticky !important; left: 0 !important; z-index: 90 !important; }
    [data-theme="light"] .fund-table th:nth-child(2) { background-color: #f8fafc !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important; }
    [data-theme="light"] .fund-table td:nth-child(2) { background-color: #ffffff !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important; }
    [data-theme="light"] .fund-table tr:hover td:nth-child(2) { background-color: #f0f9ff !important; }
    
    /* Report Table Mobile */
    [data-theme="light"] .report-table th:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 99 !important; background-color: #f1f5f9 !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important; }
    [data-theme="light"] .report-table td:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 90 !important; background-color: #ffffff !important; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important; }
    [data-theme="light"] .report-table tbody tr:nth-child(even) td:nth-child(1) { background-color: #f8fafc !important; }
    
    /* ==========================================================
    BỔ SUNG LIGHT MODE: ÉP MÀU CHO SIDE MENU VÀ NÚT CHUYỂN THEME 
    ========================================================== */
    
    /* 1. Đổi màu chữ của các tính năng trong Side Menu sang Xám đậm */
    [data-theme="light"] #mobile-menu-content a,
    [data-theme="light"] #mobile-menu-content div.cursor-pointer {
        color: #475569 !important; /* Xám đậm Slate-600 */
    }

    /* 2. Đổi màu chữ khi chạm (Hover/Active) sang Xanh Blue đậm */
    [data-theme="light"] #mobile-menu-content a:hover,
    [data-theme="light"] #mobile-menu-content div.cursor-pointer:hover {
        color: #1e40af !important; /* Xanh Navy đậm */
        background-color: #f1f5f9 !important; /* Nền xám nhạt tinh tế khi chạm */
    }

    /* 3. Sửa màu cho tiêu đề "MENU MỞ RỘNG" và Nút (X) tắt menu */
    [data-theme="light"] #mobile-menu-content > div:first-child {
        background-color: #f8fafc !important; /* Nền Header Menu sáng */
        border-bottom-color: #cbd5e1 !important; /* Viền xám nhạt */
    }
    
    [data-theme="light"] #mobile-menu-content > div:first-child span {
        color: #0f172a !important; /* Chữ Đen nhám */
    }
    
    [data-theme="light"] #mobile-menu-content > div:first-child button {
        color: #64748b !important;
    }
    
    [data-theme="light"] #mobile-menu-content > div:first-child button:hover {
        color: #ef4444 !important; /* Chữ đỏ khi chạm nút X */
    }

    /* 4. Đổi nền toàn bộ khung Side Menu sang Trắng */
    [data-theme="light"] #mobile-menu-content {
        background-color: #ffffff !important;
        border-left-color: #cbd5e1 !important;
    }

    /* 5. Đổi các đường kẻ phân cách (Divider) sang màu xám nhạt */
    [data-theme="light"] #mobile-menu-content .border-t.border-gray-700 {
        border-top-color: #e2e8f0 !important;
    }
}

/* =========================================================
   TRANG NHẬT KÝ GIAO DỊCH CHÍNH (MAIN BACKTEST PAGE) - LIGHT MODE
   (Khôi phục nguyên bản từ file gốc)
   ========================================================= */

/* 1. Thanh điều khiển (Controls) */
[data-theme="light"] .backtest-controls { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important; }
[data-theme="light"] .control-group label { color: #475569 !important; }
[data-theme="light"] #backtest-ticker-input { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
[data-theme="light"] #backtest-ticker-input:focus { background-color: #ffffff !important; border-color: #3b82f6 !important; }

/* Nhóm Nút Chọn Năm */
[data-theme="light"] .year-filter-container { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .year-btn { color: #64748b !important; }
[data-theme="light"] .year-btn:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }
[data-theme="light"] .year-btn.active { background-color: #fef3c7 !important; border-color: #f59e0b !important; color: #d97706 !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.2) !important; }

/* Radio Chọn Chiến lược & Select Admin */
[data-theme="light"] .radio-group, [data-theme="light"] #backtest-price-type { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
[data-theme="light"] input[type="radio"] { accent-color: #d97706 !important; }
[data-theme="light"] .control-group label[style*="color: #facc15"] { color: #d97706 !important; }

/* Hộp thoại gợi ý tìm kiếm (Dropdown) */
[data-theme="light"] #ticker-suggestions { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; }
[data-theme="light"] .suggestion-item { border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .suggestion-item:hover { background-color: #f0f9ff !important; }
[data-theme="light"] .suggestion-item span[style*="color: #ffffff"] { color: #1e40af !important; }
[data-theme="light"] .suggestion-item span[style*="color: #9ca3af"] { color: #64748b !important; }

/* 2. Thống kê Summary Grid (8 Ô vuông) */
[data-theme="light"] .stat-box { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; }
[data-theme="light"] .stat-box h3 { color: #64748b !important; }
[data-theme="light"] .stat-box .value[style*="color:#fff"] { color: #0f172a !important; }
[data-theme="light"] .stat-box .positive { color: #15803d !important; }
[data-theme="light"] .stat-box .negative { color: #b91c1c !important; }

/* Thống kê mở rộng (CAGR & Hộp Kỷ luật) */
[data-theme="light"] .ext-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; }
[data-theme="light"] .cagr-title { color: #475569 !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .cagr-label { color: #0f172a !important; }
[data-theme="light"] .cagr-value[style*="#ef4444"] { color: #b91c1c !important; }
[data-theme="light"] .cagr-value[style*="#22c55e"] { color: #15803d !important; }
[data-theme="light"] .cagr-value[style*="#9ca3af"] { color: #64748b !important; }

[data-theme="light"] .discipline-card { background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%) !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .discipline-card::before { background: #d97706 !important; }
[data-theme="light"] .discipline-header i { color: #d97706 !important; }
[data-theme="light"] .discipline-title { color: #b45309 !important; }
[data-theme="light"] .discipline-desc { color: #475569 !important; }
[data-theme="light"] .discipline-desc span[style*="color: #fff"] { color: #0f172a !important; }
[data-theme="light"] .discipline-desc b { color: #15803d !important; }
[data-theme="light"] .discipline-value-box { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .discipline-money { color: #d97706 !important; text-shadow: none !important; }
[data-theme="light"] .discipline-sub { color: #64748b !important; }

/* 3. Phân khu Biểu đồ & Bảng Lịch sử */
[data-theme="light"] .result-section { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; }
[data-theme="light"] .result-section h2 { color: #1e40af !important; border-bottom-color: #cbd5e1 !important; }

/* Tiêu đề biểu đồ */
[data-theme="light"] .chart-main-title { color: #1e40af !important; }
[data-theme="light"] .chart-main-title span[style*="#FFD700"] { color: #d97706 !important; }
[data-theme="light"] .chart-main-title span[style*="color: #facc15"] { color: #b45309 !important; }
[data-theme="light"] .chart-sub-title { color: #64748b !important; }

/* Nút ẩn/hiện biểu đồ */
[data-theme="light"] .chart-toggle-btn { background-color: #f1f5f9 !important; color: #475569 !important; border-color: #cbd5e1 !important; }
[data-theme="light"] .chart-toggle-btn:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }

/* Bảng Lịch sử Lệnh (Trade Log) */
[data-theme="light"] #trade-log-table th { background-color: #f8fafc !important; color: #475569 !important; border-bottom-color: #cbd5e1 !important; }
[data-theme="light"] #trade-log-table td { border-bottom-color: #e2e8f0 !important; color: #0f172a !important; }
[data-theme="light"] #trade-log-table td b { color: #1e40af !important; } /* Mã CK in đậm */

[data-theme="light"] .status-open { color: #d97706 !important; }

/* Khôi phục màu Xanh/Đỏ cho cột Lãi/Lỗ & Hàng Tổng kết (Ép quyền ưu tiên cao nhất) */
[data-theme="light"] #trade-log-table td.profit,
[data-theme="light"] #trade-log-table tfoot td.profit { 
    color: #15803d !important; /* Xanh lá */
    font-weight: 700 !important; 
}

[data-theme="light"] #trade-log-table td.loss,
[data-theme="light"] #trade-log-table tfoot td.loss { 
    color: #b91c1c !important; /* Đỏ */
    font-weight: 700 !important; 
}
[data-theme="light"] #trade-log-table tfoot { border-top-color: #cbd5e1 !important; color: #0f172a !important; }

/* 4. Màn hình Khóa VIP (Lock Overlay) */
[data-theme="light"] .table-lock-overlay { background-color: rgba(255, 255, 255, 0.85) !important; }
[data-theme="light"] .table-lock-overlay h3 { color: #b45309 !important; }
[data-theme="light"] .table-lock-overlay p { color: #475569 !important; }

/* 5. Ép màu cột ghim trên Mobile cho Trang Backtest */
@media (max-width: 768px) {
    [data-theme="light"] #trade-log-table th:nth-child(2) {
        background-color: #f1f5f9 !important;
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important;
    }
    [data-theme="light"] #trade-log-table td:nth-child(2) {
        background-color: #ffffff !important;
        box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15) !important;
    }
}

/* =========================================================
   19. HOTFIX: CHỐNG CHÓA MÀU SẮC BẢNG ĐIỆN VÀ THANH CHỈ SỐ
   ========================================================= */

/* --- A. ÉP MÀU VÀ ĐỒNG BỘ ĐỘ ĐẬM CHỮ (MÃ CK, GIÁ, +/-) --- */

/* 1. Thông số TĂNG (Xanh lá) */
[data-theme="light"] .group-table .text-green-500,
[data-theme="light"] .group-table .text-green-400,
[data-theme="light"] .group-table [style*="#22c55e"],
[data-theme="light"] .group-table [style*="rgb(34, 197, 94)"],
[data-theme="light"] .group-table [style*="#00ff00"],
[data-theme="light"] .group-table .positive, 
[data-theme="light"] #indices-bar .text-green-500,
[data-theme="light"] #indices-bar .text-green-400,
[data-theme="light"] #indices-bar [style*="#22c55e"],
[data-theme="light"] #indices-bar .positive {
    color: #15803d !important; 
}

/* 2. Thông số GIẢM (Đỏ) */
[data-theme="light"] .group-table .text-red-500,
[data-theme="light"] .group-table .text-red-400,
[data-theme="light"] .group-table [style*="#ef4444"],
[data-theme="light"] .group-table [style*="rgb(239, 68, 68)"],
[data-theme="light"] .group-table [style*="#ff0000"],
[data-theme="light"] .group-table .negative, 
[data-theme="light"] #indices-bar .text-red-500,
[data-theme="light"] #indices-bar .text-red-400,
[data-theme="light"] #indices-bar [style*="#ef4444"],
[data-theme="light"] #indices-bar .negative {
    color: #dc2626 !important; 
}

/* 3. Thông số THAM CHIẾU (Vàng Gold) */
[data-theme="light"] .group-table .text-yellow-500,
[data-theme="light"] .group-table .text-yellow-400,
[data-theme="light"] .group-table [style*="#facc15"],
[data-theme="light"] .group-table [style*="rgb(250, 204, 21)"],
[data-theme="light"] .group-table .reference, 
[data-theme="light"] #indices-bar .text-yellow-500,
[data-theme="light"] #indices-bar .text-yellow-400,
[data-theme="light"] #indices-bar [style*="#facc15"],
[data-theme="light"] #indices-bar .reference {
    color: #ca8a04 !important;
}

/* 4. Thông số TRẦN (Tím) */
[data-theme="light"] .group-table .text-purple-500,
[data-theme="light"] .group-table .text-fuchsia-500,
[data-theme="light"] .group-table [style*="#c026d3"],
[data-theme="light"] .group-table [style*="#e951e9"],
[data-theme="light"] .group-table .ceiling, 
[data-theme="light"] #indices-bar .text-purple-500,
[data-theme="light"] #indices-bar [style*="#c026d3"],
[data-theme="light"] #indices-bar .ceiling {
    color: #7e22ce !important; 
}

/* 5. Thông số SÀN (Xanh dương đậm) */
[data-theme="light"] .group-table .text-cyan-500,
[data-theme="light"] .group-table .text-cyan-400,
[data-theme="light"] .group-table [style*="#06b6d4"],
[data-theme="light"] .group-table [style*="#22d3ee"],
[data-theme="light"] #indices-bar .text-cyan-500,
[data-theme="light"] #indices-bar [style*="#06b6d4"] {
    color: #0369a1 !important; 
}

/* --- B. HẠ TONE CỘT TS SANG DẠNG GHOST THEO Ý TƯỞNG CỦA BẠN --- */

/* TS Mua/Nắm giữ (Nền trong suốt, Chữ & Viền Xanh mỏng, Bo tròn tuyệt đối) */
[data-theme="light"] .group-table .ts-bg-green {
    background-color: transparent !important; 
    color: #15803d !important; 
    border: 1px solid #86efac !important;
    font-weight: 600 !important; 
    border-radius: 9999px !important; /* Trả về hình bo tròn chuẩn của Dark Mode */
}

/* TS Bán/Quan sát (Nền trong suốt, Chữ & Viền Đỏ mỏng, Bo tròn tuyệt đối) */
[data-theme="light"] .group-table .ts-bg-red {
    background-color: transparent !important; 
    color: #b91c1c !important; 
    border: 1px solid #fca5a5 !important;
    font-weight: 600 !important;
    border-radius: 9999px !important; /* Trả về hình bo tròn chuẩn của Dark Mode */
}

/* TS Chưa có tín hiệu (Nền trong suốt, Chữ & Viền Xám mỏng, Bo tròn tuyệt đối) */
[data-theme="light"] .group-table .ts-bg-neutral {
    background-color: transparent !important; 
    color: #64748b !important; 
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
    border-radius: 9999px !important; /* Trả về hình bo tròn chuẩn của Dark Mode */
}
/* --- C. KHÔI PHỤC HIỆU ỨNG HIGHLIGHT KHUNG BẢNG GIÁ --- */
[data-theme="light"] .group-column.highlight-group {
    border: 2px solid #d97706 !important; /* Viền màu Cam Vàng đậm cực sắc nét trên nền trắng */
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.35) !important; /* Hiệu ứng tỏa sáng nhẹ */
    z-index: 100 !important; /* Ép bảng nổi lên trên cùng để không bị bảng khác đè viền */
}

/* --- FIX MÀU SỐ ĐẾM CỔ PHIẾU (GÓC PHẢI THANH FILTER) --- */
[data-theme="light"] #row-count {
    color: #64748b !important; /* Màu xám mờ (Slate-500) tinh tế */
    font-weight: 600 !important;
}
/* =========================================================
   21. LIGHT MODE: TOOLTIPS & HƯỚNG DẪN SỬ DỤNG (PHÁI SINH)
   ========================================================= */

/* --- A. ĐỒNG BỘ NỀN TRẮNG CHO TẤT CẢ TOOLTIPS (DRG, THỐNG KÊ...) --- */
[data-theme="light"] .group .absolute[class*="bg-gray-900"],
[data-theme="light"] .group .absolute[class*="bg-gray-800"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    color: #475569 !important;
}

/* Đổi màu mũi tên nhọn của Tooltip */
[data-theme="light"] .group .absolute[class*="bg-gray-900"] > div[class*="bg-gray-"],
[data-theme="light"] .group .absolute[class*="bg-gray-800"] > div[class*="bg-gray-"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Tinh chỉnh màu chữ bên trong Tooltip cho dễ đọc */
[data-theme="light"] .group .absolute[class*="bg-gray-"] h5 { color: #d97706 !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .group .absolute[class*="bg-gray-"] p,
[data-theme="light"] .group .absolute[class*="bg-gray-"] span,
[data-theme="light"] .group .absolute[class*="bg-gray-"] ul { color: #475569 !important; }
[data-theme="light"] .group .absolute[class*="bg-gray-"] b { color: #0f172a !important; }
[data-theme="light"] .group .absolute[class*="bg-gray-"] .text-yellow-500 { color: #d97706 !important; }
[data-theme="light"] .group .absolute[class*="bg-gray-"] .text-white { color: #0f172a !important; }

/* --- B. LẬT MÀU MODAL HƯỚNG DẪN SỬ DỤNG (HDSD) --- */
[data-theme="light"] #guide-modal .guide-card {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #guide-modal .guide-header,
[data-theme="light"] #guide-modal .guide-footer {
    background-color: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
    border-top-color: #e2e8f0 !important;
}

/* Tẩy trắng nền vùng chứa văn bản */
[data-theme="light"] #guide-modal .custom-scrollbar {
    background-color: #ffffff !important;
}

/* Chỉnh màu Tiêu đề & Icon */
[data-theme="light"] #guide-modal .guide-header h3 { color: #0f172a !important; }
[data-theme="light"] #guide-modal button i.fa-xmark { color: #64748b !important; }
[data-theme="light"] #guide-modal .guide-section-title { color: #2563eb !important; } /* Đổi vàng sang xanh tech */

/* Chỉnh màu văn bản cơ bản */
[data-theme="light"] #guide-modal .guide-text, 
[data-theme="light"] #guide-modal p,
[data-theme="light"] #guide-modal li { color: #475569 !important; }

/* Đảo màu các đoạn Hightlight (Chữ trắng sang chữ đen đậm) */
[data-theme="light"] #guide-modal .text-white,
[data-theme="light"] #guide-modal .guide-hl { color: #0f172a !important; font-weight: 700 !important; }
[data-theme="light"] #guide-modal .text-gray-300 { color: #334155 !important; }
[data-theme="light"] #guide-modal .text-gray-400,
[data-theme="light"] #guide-modal .text-gray-500 { color: #64748b !important; }

/* Xử lý các Box mờ bên trong HDSD */
[data-theme="light"] #guide-modal .bg-transparent,
[data-theme="light"] #guide-modal [class*="bg-gray-800"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
/* =========================================================
   22. UX UPGRADE: TỐI ƯU KHÔNG GIAN BẢNG ĐIỆN LIGHT MODE
   (Dựa trên nguyên lý Less is More & White-space)
   ========================================================= */

/* --- 1. KHÔNG GIAN THỞ (BREATHING SPACE) CHO CÁC KHỐI BẢNG --- */
[data-theme="light"] .group-column {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Viền siêu nhạt, bỏ đi cảm giác đóng khung cứng nhắc */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; /* Đổ bóng cực mềm, tạo hiệu ứng Card lơ lửng */
    border-radius: 8px !important; /* Bo tròn góc mềm mại hơn */
    margin-bottom: 1.2rem !important; /* KÉO DÃN KHOẢNG CÁCH giữa các bảng trên dưới */
    overflow: hidden !important; 
}

/* Nới lỏng khoảng cách bên trong từng ô dữ liệu (Padding) */
[data-theme="light"] .group-table td {
    padding: 4px 8px !important; /* Tăng padding trục X để Giá và +/- không bị dính vào nhau */
    border-top: 1px solid #f8fafc !important; /* Đường kẻ ngang siêu mờ, chỉ đủ để phân ranh giới */
}
[data-theme="light"] .stock-ticker-cell {
    padding-left: 16px !important; /* Thụt lề mã CK vào trong cho thoáng mép trái */
}

/* --- 2. GIẢM NHIỄU THỊ GIÁC (VISUAL NOISE REDUCTION) CỘT TIÊU ĐỀ --- */
/* Làm mờ các tiêu đề lặp đi lặp lại (Mã | Giá | +/- | TS) */
[data-theme="light"] .group-table th {
    background-color: #ffffff !important; /* Ép đồng màu với nền bảng, xóa dải băng ngang */
    color: #94a3b8 !important;            /* Chữ xám mờ (Slate-400) */
    border-bottom: 1px dashed #e2e8f0 !important; /* Chỉ dùng nét đứt nhẹ nhàng */
    font-size: 0.65rem !important;        
    font-weight: 500 !important;          /* Giảm độ đậm, nhường Spotlight cho dữ liệu */
    letter-spacing: 0px !important;
    padding-bottom: 6px !important;
}

/* --- 3. SANG TRỌNG HÓA HEADER NHÓM (VN30, NGÂN HÀNG...) --- */
[data-theme="light"] .group-column-title {
    background: #f8fafc !important; /* Nền xám tuyết cực nhẹ */
    color: #0f172a !important;      /* Chữ đen nhám sắc nét */
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    padding: 8px 0 !important;      /* Nới lỏng chiều cao tiêu đề */
}

/* Cục đếm số lượng mã CK tone-sur-tone */
[data-theme="light"] .group-column-title .stock-count-badge {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
    right: 12px !important;
}

/* --- 4. FIX LỖI THẨM MỸ EMPTY STATE (DANH MỤC TRỐNG) --- */
/* Phù phép bảng "Theo Dõi" trống thành dạng Dropzone xịn xò */
[data-theme="light"] .watchlist-group td[colspan="4"] {
    background-color: #f8fafc !important; 
    color: #64748b !important;            
    border: 2px dashed #cbd5e1 !important; /* Viền đứt khúc tạo hàm ý "hãy thêm dữ liệu" */
    border-radius: 8px !important;
    display: block !important;
    margin: 16px !important;              /* Co vào giữa, không nằm sát mép bảng */
    padding: 24px 10px !important;
}
[data-theme="light"] .watchlist-group td[colspan="4"] i { color: #94a3b8 !important; }
[data-theme="light"] .watchlist-group td[colspan="4"] span { color: #0f172a !important; font-weight: 700 !important;}

/* --- 5. TỐI ƯU THANH MENU NGÀNH (BÊN TRÁI) --- */
[data-theme="light"] .industry-sidebar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}
[data-theme="light"] .industry-sidebar h2 {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
}
/* =========================================================
   23. POLISH: TINH CHỈNH MÀU SẮC TIÊU ĐỀ (LIGHT MODE)
   ========================================================= */

/* 1. Thanh Chỉ Số Trên Cùng (VNINDEX, VN30...) */
[data-theme="light"] .index-name { 
    color: #334155 !important; /* Đổi từ Xanh dương chói sang Xám Xanh Đậm (Slate-700) */
    font-weight: 700 !important; 
}

/* 2. Dòng GTGD & Khối lượng trên thanh chỉ số */
[data-theme="light"] .index-detail .text-yellow-300 { 
    color: #64748b !important; /* Đổi từ Cam vàng sang Xám trung tính (Slate-500) */
    font-weight: 600 !important;
}

/* 3. Tiêu đề các Bảng (VN30, PRO30, PRO INVEST...) */
[data-theme="light"] .group-column-title {
    color: #334155 !important; /* Hạ từ Đen tuyền xuống Xám Đậm (Slate-700) */
    font-weight: 700 !important; /* Hạ độ dày từ 800 xuống 700 */
}

/* 4. Tiêu đề Sidebar (NHÓM NGÀNH) */
[data-theme="light"] .industry-sidebar h2 {
    color: #334155 !important; /* Hạ từ Đen tuyền xuống Xám Đậm */
    font-weight: 700 !important;
}

/* 5. Gọt lại viền của các nút bấm (Ngắn hạn, Tín hiệu...) ở thanh Filter cho đồng bộ */
[data-theme="light"] .custom-dropdown-btn, 
[data-theme="light"] .portfolio-dropdown-btn {
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
/* =========================================================
   24. HOTFIX: MÀN HÌNH KHÓA PHÁI SINH (LIGHT MODE)
   ========================================================= */

/* 1. Đổi nền Box sang Trắng tuyết và viền nhạt */
[data-theme="light"] .min-h-\[80vh\] > .bg-gray-800\/80 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
}

/* 2. Đổi màu chữ Tiêu đề và Mô tả */
[data-theme="light"] .min-h-\[80vh\] > .bg-gray-800\/80 h2 {
    color: #0f172a !important; /* Đen nhám */
}
[data-theme="light"] .min-h-\[80vh\] > .bg-gray-800\/80 p.text-gray-400 {
    color: #475569 !important; /* Xám đậm */
}
[data-theme="light"] .min-h-\[80vh\] > .bg-gray-800\/80 strong.text-cyan-400 {
    color: #0284c7 !important; /* Xanh Cyan đậm nét hơn */
}

/* 3. Tẩy trắng vòng tròn chứa Ổ khóa */
[data-theme="light"] .min-h-\[80vh\] .bg-gray-900.rounded-full {
    background-color: #f0f9ff !important; /* Nền xanh pastel siêu nhạt */
    border-color: #bae6fd !important;
}
[data-theme="light"] .min-h-\[80vh\] .bg-gray-900.rounded-full i.text-cyan-400 {
    color: #0284c7 !important;
}

/* 4. Bảo vệ Nút ĐĂNG KÝ NGAY (Ép chữ trả về màu Trắng) */
[data-theme="light"] .min-h-\[80vh\] a.bg-gradient-to-r {
    color: #ffffff !important; 
}
[data-theme="light"] .min-h-\[80vh\] a.bg-gradient-to-r i.text-yellow-300 {
    color: #fde047 !important; 
}

/* 5. Vùng Footer (Tải lại trang) */
[data-theme="light"] .min-h-\[80vh\] p.text-gray-500 {
    color: #64748b !important;
}
[data-theme="light"] .min-h-\[80vh\] .border-t.border-gray-700 {
    border-color: #e2e8f0 !important;
}
/* =========================================================
   25. MODULE: ABOUT PAGE (TRANG GIỚI THIỆU CHUNG)
   ========================================================= */

/* 1. Tinh chỉnh màu Tiêu đề chính (Vàng chói -> Cam đậm để chống chóa trên nền trắng) */
[data-theme="light"] .about-wrapper .hero-title {
    color: #d97706 !important; 
}

/* 2. Ép màu Trắng tinh cho các khối Card và Khung ảnh */
[data-theme="light"] .about-wrapper .quant-card,
[data-theme="light"] .about-wrapper .img-showcase {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; /* Đổ bóng cực mềm */
}

/* 3. Phù phép khung CTA cuối bài (Nền Gradient xám sương mù sang trắng) */
[data-theme="light"] .about-wrapper .cta-section {
    background: linear-gradient(145deg, #f1f5f9 0%, #ffffff 100%) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* 4. Trẻ hóa các thẻ Tag Highlight (Màu xanh Công nghệ) */
[data-theme="light"] .about-wrapper .hl-badge {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

/* 5. Tăng độ tương phản cho các Icon tiêu đề (Đậm màu hơn) */
[data-theme="light"] .about-wrapper .about-section h2 i {
    color: #2563eb !important; 
}
[data-theme="light"] .about-wrapper .quant-card h3 i.text-blue-500 {
    color: #1d4ed8 !important; /* Đậm hơn để dễ nhìn trên nền trắng */
}
[data-theme="light"] .about-wrapper .quant-card h3 i.text-yellow-500,
[data-theme="light"] .about-wrapper .quant-card h3 i.text-yellow-400 {
    color: #d97706 !important; 
}
[data-theme="light"] .about-wrapper .quant-card h3 i.text-green-500 {
    color: #15803d !important; 
}
/* 6. Trị dứt điểm lỗi lóa chữ in đậm trong Card ở Light Mode */
[data-theme="light"] .about-wrapper .quant-card p strong {
    color: #0f172a !important; /* Ép buộc màu đen nhám (Slate-900) */
    font-weight: 800 !important; /* Tăng độ đậm lên mức tối đa để cực kỳ sắc nét */
}

/* =========================================================
   26. MODULE: MORNING CAFE (LIGHT MODE)
   ========================================================= */

/* --- 1. Container & Khối Header --- */
[data-theme="light"] .article-container { 
    background: #ffffff !important; 
    border-color: #cbd5e1 !important; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important; 
}
[data-theme="light"] .article-header { 
    border-bottom-color: #e2e8f0 !important; 
}
[data-theme="light"] .article-header .bg-clip-text { 
    background: none !important; 
    -webkit-text-fill-color: unset !important; 
    color: #1e40af !important; 
}
[data-theme="light"] .article-header .opacity-80.text-2xl i { color: #64748b !important; }
[data-theme="light"] .article-header p.text-\[12px\] .text-gray-300 { color: #475569 !important; }
[data-theme="light"] #report-time { 
    background-color: #f1f5f9 !important; 
    border-color: #cbd5e1 !important; 
    color: #64748b !important; 
}
[data-theme="light"] #report-time b.text-gray-300 { color: #0f172a !important; }

/* --- 2. Bảng Điều Khiển Nhanh (Decision Dashboard) --- */
[data-theme="light"] .quick-take-box { 
    background: #ffffff !important; 
    border-color: #93c5fd !important; 
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1) !important; 
}
[data-theme="light"] .quick-take-box .box-title { 
    color: #1d4ed8 !important; 
    border-bottom-color: #e2e8f0 !important; 
}
[data-theme="light"] .qt-list li { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; }
[data-theme="light"] .qt-label { color: #64748b !important; }
[data-theme="light"] .qt-list li b { color: #1e40af !important; }
[data-theme="light"] .qt-list li .text-gray-300 { color: #334155 !important; }
[data-theme="light"] .quick-take-box .bg-slate-900\/50,
[data-theme="light"] .quick-take-box .bg-slate-900 { 
    background-color: #f8fafc !important; 
    border-color: #cbd5e1 !important; 
}
[data-theme="light"] .quick-take-box .text-gray-400,
[data-theme="light"] .quick-take-box .text-gray-500 { color: #475569 !important; }
[data-theme="light"] .quick-take-box .text-yellow-400 { color: #d97706 !important; font-weight: 800 !important; }

/* --- 3. Các khối Markdown & Text cơ bản --- */
[data-theme="light"] .protrend-verdict { 
    background-color: #f8fafc !important; 
    border-left-color: #2563eb !important; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02) !important; 
}
[data-theme="light"] .protrend-verdict h3 { color: #1d4ed8 !important; }
[data-theme="light"] .protrend-verdict p, 
[data-theme="light"] .markdown-content p, 
[data-theme="light"] .markdown-content li { color: #334155 !important; }

[data-theme="light"] .markdown-content h3:not(.box-title) { 
    color: #b45309 !important; 
    border-left-color: #3b82f6 !important; 
}
[data-theme="light"] .markdown-content strong { color: #0f172a !important; font-weight: 800 !important; }
[data-theme="light"] .markdown-content i.text-gray-400 { color: #64748b !important; }

/* --- 4. Khối Sức Mạnh Ngành (Sector Rotation) --- */
[data-theme="light"] .bg-green-900\/20 { background-color: #f0fdf4 !important; border-color: #bbf7d0 !important; }
[data-theme="light"] .bg-green-900\/20 b.text-green-400 { color: #15803d !important; }
[data-theme="light"] .bg-blue-900\/20 { background-color: #eff6ff !important; border-color: #bfdbfe !important; }
[data-theme="light"] .bg-blue-900\/20 b.text-blue-400 { color: #1d4ed8 !important; }
[data-theme="light"] .bg-red-900\/20 { background-color: #fef2f2 !important; border-color: #fecaca !important; }
[data-theme="light"] .bg-red-900\/20 b.text-red-400 { color: #b91c1c !important; }
[data-theme="light"] .bg-green-900\/20 span.text-white,
[data-theme="light"] .bg-blue-900\/20 span.text-white,
[data-theme="light"] .bg-red-900\/20 span.text-white { color: #0f172a !important; }

/* --- 5. Actionable Picks & Watchlist --- */
[data-theme="light"] .bg-slate-900\/60,
[data-theme="light"] .bg-slate-900\/80 { 
    background-color: #ffffff !important; 
    border-color: #e2e8f0 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; 
}
[data-theme="light"] .markdown-content .text-gray-200, 
[data-theme="light"] .markdown-content .text-gray-300 { color: #334155 !important; }
[data-theme="light"] .bg-slate-800.text-gray-300 { 
    background-color: #f1f5f9 !important; 
    color: #475569 !important; 
    border-color: #cbd5e1 !important; 
}
[data-theme="light"] .bg-yellow-900\/20 { 
    background-color: #fffbeb !important; 
    border-color: #fde68a !important; 
    color: #92400e !important; 
}
[data-theme="light"] .bg-yellow-900\/20 b { color: #b45309 !important; }
/* --- Sửa màu nền khối ACTION cho Light Mode --- */
[data-theme="light"] .bg-yellow-950\/30 { 
    background-color: #f0fdf4 !important; /* Đổi nền xám thành xanh mint nhạt cực tươi */
    border-color: #86efac !important;     /* Viền xanh lá cây tươi */
}
[data-theme="light"] .bg-yellow-950\/30 span.text-green-400 { 
    color: #15803d !important;            /* Ép chữ "ƯU TIÊN GIẢI NGÂN..." thành xanh lá đậm sắc nét */
}
/* --- 6. Trigger thay đổi kịch bản --- */
[data-theme="light"] .bg-green-950\/30 { background-color: #f0fdf4 !important; border-color: #86efac !important; }
[data-theme="light"] .bg-red-950\/30 { background-color: #fef2f2 !important; border-color: #fca5a5 !important; }
[data-theme="light"] .bg-green-950\/30 b.text-green-400 { color: #166534 !important; }
[data-theme="light"] .bg-red-950\/30 b.text-red-400 { color: #991b1b !important; }

/* --- 7. Philosophy Box (Triết lý ProTrend) --- */
[data-theme="light"] .bg-slate-900\/80 p.text-gray-400 { color: #1e40af !important; } 
[data-theme="light"] .bg-slate-900\/80 span.text-gray-200 { color: #0f172a !important; font-weight: 600; }
[data-theme="light"] .bg-slate-900\/80 span.text-gray-500 { color: #94a3b8 !important; }
[data-theme="light"] .bg-slate-900\/80 b.text-green-400 { color: #15803d !important; }

/* --- 8. Admin Toolbar --- */
[data-theme="light"] select#history-selector { 
    background-color: #ffffff !important; 
    border-color: #cbd5e1 !important; 
    color: #0f172a !important; 
}
[data-theme="light"] select#history-selector:hover { background-color: #f8fafc !important; }
[data-theme="light"] .border-gray-700\/50 { border-color: #e2e8f0 !important; }
[data-theme="light"] span.text-gray-400 i.fa-calendar-alt { color: #64748b !important; }

/* --- 9. Khóa VIP Overlay (Hết hạn) --- */
[data-theme="light"] .max-w-\[850px\].bg-slate-900\/95 { 
    background-color: rgba(255, 255, 255, 0.95) !important; 
    border-color: #f59e0b !important; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important; 
}
[data-theme="light"] .max-w-\[850px\].bg-slate-900\/95 p.text-gray-300 { color: #334155 !important; }
[data-theme="light"] .max-w-\[850px\].bg-slate-900\/95 h3.text-yellow-500 { color: #d97706 !important; }
[data-theme="light"] .max-w-\[850px\].bg-slate-900\/95 i.fa-crown { color: #f59e0b !important; }

/* --- 10. Điểm nhấn hôm nay (Morning Cafe) --- */
[data-theme="light"] .article-container .bg-slate-900\/90 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .article-container .bg-slate-900\/90 p.text-gray-300 {
    color: #334155 !important;
}
[data-theme="light"] .article-container .bg-yellow-500 {
    background-color: #d97706 !important;
    color: #ffffff !important;
}
/* --- 10. Khối liên kết bối cảnh ngành (Nền xám bên dưới Bức tranh ngành) --- */
[data-theme="light"] .article-container p.bg-slate-900\/50 {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #b45309 !important; /* Chuyển chữ vàng chói sang màu cam đất đậm, dễ đọc trên nền sáng */
}

/* --- 11. Các dòng Kịch bản chiến lược (Mục 5) --- */
[data-theme="light"] .article-container li.bg-slate-800\/40 {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
[data-theme="light"] .article-container li.bg-slate-800\/40 b {
    color: #0f172a !important; /* Đổi tiêu đề trạng thái (Tích cực, Tiêu cực...) sang màu đen nhám sắc nét */
}
/* =========================================================
   27. MODULE: PROTREND ADVISOR MODAL (LIGHT MODE)
   ========================================================= */

/* --- 1. Nền Panel và Đường chia cắt --- */
[data-theme="light"] #panel-ai-story {
    background-color: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important; /* Vạch ngăn cách xám siêu nhạt với biểu đồ/chi tiết */
}

/* Khung Header của khu vực AI */
[data-theme="light"] #panel-ai-story > div[style*="border-bottom"] {
    border-bottom-color: #e2e8f0 !important;
}

/* --- 2. Tiêu đề Header (PROTREND ADVISOR & Icon) --- */
/* Đổi màu chữ PROTREND ADVISOR sang Xanh Navy đậm */
[data-theme="light"] #panel-ai-story h3[style*="color: #60a5fa"] {
    color: #1e40af !important; 
    font-weight: 800 !important;
}

/* Khối tròn bọc Icon cây bút */
[data-theme="light"] #panel-ai-story div[style*="background: rgba(59, 130, 246, 0.1)"] {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}
[data-theme="light"] #panel-ai-story div[style*="background: rgba(59, 130, 246, 0.1)"] i {
    color: #2563eb !important;
}

/* Chữ thời gian (Bản tin cuối ngày...) */
[data-theme="light"] #ai-story-time {
    color: #64748b !important; /* Xám dịu */
}

/* Nút phóng to / Thu nhỏ khung AI */
[data-theme="light"] #toggle-ai-width-btn {
    color: #94a3b8 !important;
}
[data-theme="light"] #toggle-ai-width-btn:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

/* --- 3. NỘI DUNG BÀI VIẾT (Markdown Content) --- */
/* Màu chữ nội dung chính (Đổi từ xám nhạt sang Xám đen Slate-700 để đọc lâu không mỏi mắt) */
[data-theme="light"] #ai-story-content {
    color: #334155 !important; 
}
[data-theme="light"] #ai-story-content p,
[data-theme="light"] #ai-story-content li {
    color: #334155 !important;
}

/* Chữ in đậm (Rất quan trọng cho các con số, mã CK) -> Đổi sang Đen nhám */
[data-theme="light"] #ai-story-content strong,
[data-theme="light"] #ai-story-content b {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Các Tiêu đề H3 sinh ra từ AI (TỔNG QUAN, CHIẾN LƯỢC...) */
[data-theme="light"] #ai-story-content h3 {
    color: #1d4ed8 !important; /* Màu Xanh Tech cực nét thay vì Vàng chói */
    border-left-color: #2563eb !important; /* Vạch dọc màu xanh */
    background-color: #f8fafc !important; /* Thêm nền xám cực nhẹ cho dòng tiêu đề để tạo khối phân cách */
    padding: 6px 10px !important;
    border-radius: 0 6px 6px 0 !important;
    margin-top: 22px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}

/* --- 4. TRẠNG THÁI EMPTY (Đang tải / Đang chờ biên tập) --- */
/* Icon xoay Loading */
[data-theme="light"] #ai-story-content .fa-circle-notch {
    color: #2563eb !important;
}

/* Box "ĐANG CHỜ BIÊN TẬP" khi AI chưa có bài */
[data-theme="light"] #ai-story-content .bg-\[\#1e293b\] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] #ai-story-content .bg-\[\#1e293b\] i {
    color: #3b82f6 !important;
}
[data-theme="light"] #ai-story-content h4 {
    color: #0f172a !important;
    text-shadow: none !important;
}
[data-theme="light"] #ai-story-content p.text-gray-500 {
    color: #64748b !important;
}
[data-theme="light"] #ai-story-content b.text-gray-400 {
    color: #1d4ed8 !important; /* Mã cổ phiếu trong câu thông báo chờ biên tập */
}
/* =========================================================
   28. MODULE: ADVANCED FILTER MODAL (LIGHT MODE TỐI ƯU HÓA)
   ========================================================= */

/* --- 1. MÀU NỀN CƠ BẢN --- */
/* Nền chính của Modal (Trắng tuyết) */
[data-theme="light"] #advanced-filter-modal .modal-content {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Tiêu đề Modal */
[data-theme="light"] #advanced-filter-modal .modal-header {
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] #advanced-filter-modal .modal-title {
    color: #1e40af !important; /* Xanh Navy cực sang */
    font-weight: 800 !important;
}
/* Nút Tắt (X) */
[data-theme="light"] #advanced-filter-modal .modal-close {
    color: #94a3b8 !important;
}
[data-theme="light"] #advanced-filter-modal .modal-close:hover {
    color: #ef4444 !important;
}

/* --- 2. CÁC KHỐI CHỨC NĂNG BÊN TRONG (SECTIONS) --- */
/* Thay nền gradient tối thui thành nền Trắng hơi xám (Slate-50) */
[data-theme="light"] #advanced-filter-modal .adv-section {
    background: #f8fafc !important; 
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
}

/* Tiêu đề của từng khối (1. Kích hoạt đồng pha, Hệ ngắn hạn...) */
[data-theme="light"] #advanced-filter-modal .adv-title {
    color: #334155 !important;
    border-bottom-color: #e2e8f0 !important;
    font-weight: 800 !important;
}
/* Màu icon tiêu đề (Xanh lá, Xanh Cyan, Tím) cho nó đậm và rõ hơn trên nền sáng */
[data-theme="light"] #advanced-filter-modal .adv-title i.text-green-400 { color: #16a34a !important; }
[data-theme="light"] #advanced-filter-modal .adv-title i.text-cyan-400 { color: #0284c7 !important; }
[data-theme="light"] #advanced-filter-modal .adv-title i.text-purple-400 { color: #7e22ce !important; }

/* Nhãn Text phụ (Động lượng TĂNG, Động lượng GIẢM, Trend, Sức mạnh...) */
[data-theme="light"] #advanced-filter-modal .adv-field-lbl {
    color: #64748b !important;
    font-weight: 700 !important;
}
/* Icon mũi tên trong nhãn phụ */
[data-theme="light"] #advanced-filter-modal .adv-field-lbl i.text-green-500 { color: #16a34a !important; }
[data-theme="light"] #advanced-filter-modal .adv-field-lbl i.text-red-500 { color: #dc2626 !important; }

/* --- 3. KIỂU DÁNG NÚT CHỌN (CHIP BUTTONS) --- */
/* Nút khi chưa được bấm (Trạng thái tắt) */
[data-theme="light"] #advanced-filter-modal .adv-chip span {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
[data-theme="light"] #advanced-filter-modal .adv-chip:hover span {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Nút KÍCH HOẠT MÀU XANH LÁ (Đồng pha Tăng) */
[data-theme="light"] #advanced-filter-modal .chip-up input:checked + span {
    background-color: #f0fdf4 !important; /* Xanh mint nhạt */
    border-color: #22c55e !important;    /* Viền Xanh lá */
    color: #15803d !important;           /* Chữ xanh lục đậm */
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2) !important;
}

/* Nút KÍCH HOẠT MÀU ĐỎ (Đồng pha Giảm) */
[data-theme="light"] #advanced-filter-modal .chip-down input:checked + span {
    background-color: #fef2f2 !important; /* Đỏ pastel nhạt */
    border-color: #ef4444 !important;    /* Viền đỏ */
    color: #b91c1c !important;           /* Chữ đỏ đậm */
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important;
}

/* Nút KÍCH HOẠT MÀU XANH DƯƠNG (Dòng tiền) */
[data-theme="light"] #advanced-filter-modal .chip-dt input:checked + span {
    background-color: #eff6ff !important; /* Xanh pastel nhạt */
    border-color: #3b82f6 !important;    /* Viền xanh blue */
    color: #1d4ed8 !important;           /* Chữ xanh đậm */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

/* --- 4. Ô NHẬP LIỆU & SELECT DROPDOWN --- */
/* Xóa nền xanh đen, biến thành khung trắng viền xám tinh tế */
[data-theme="light"] #advanced-filter-modal .adv-input {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
/* Hiệu ứng focus khi bấm vào */
[data-theme="light"] #advanced-filter-modal .adv-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
/* Màu placeholder (Min / Max) */
[data-theme="light"] #advanced-filter-modal .adv-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* --- 5. NÚT FOOTER CHỨC NĂNG --- */
[data-theme="light"] #advanced-filter-modal .modal-footer {
    border-top-color: #e2e8f0 !important;
}

/* Nút Xóa Lọc */
[data-theme="light"] #advanced-filter-modal #adv-modal-clear-btn {
    background-color: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}
[data-theme="light"] #advanced-filter-modal #adv-modal-clear-btn:hover {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
}

/* Nút Áp dụng */
[data-theme="light"] #advanced-filter-modal button[type="submit"] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; /* Xanh Tech chuẩn mực */
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}
[data-theme="light"] #advanced-filter-modal button[type="submit"]:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    transform: translateY(-1px);
}
/* =========================================================
   HOTFIX: MÀU SẮC MỤC TIÊU & CAPTION R:R BAR (LIGHT MODE)
   ========================================================= */

/* 1. Trả lại màu cho giá trị Target 1 và Target 2 khi đã chạm (Trị lỗi bị ép thành màu đen) */
[data-theme="light"] .sidebar-val.text-green-400 { 
    color: #15803d !important; /* Xanh lá đậm */
} 
[data-theme="light"] .sidebar-val.text-purple-400,
[data-theme="light"] #detail-sidebar-content .text-purple-400 { 
    color: #7e22ce !important; /* Tím đậm nét */
}

/* 2. Sửa màu chữ dòng mô tả dưới thanh R:R (Dư địa / Chặn lãi) */
[data-theme="light"] .rr-bar-caption {
    color: #475569 !important; /* Đổi sang xám đậm (Slate-600) cho sắc nét */
    background: #f1f5f9 !important; /* Nền xám nhạt để tách khối rõ ràng */
    font-weight: 600 !important;
}

/* 3. Tăng độ đậm cho các con số % bên trong dòng mô tả R:R Bar */
[data-theme="light"] .rr-bar-caption .text-green-400 { color: #15803d !important; } /* Dư địa Tăng - Xanh sẫm */
[data-theme="light"] .rr-bar-caption .text-red-400 { color: #b91c1c !important; } /* Cắt lỗ - Đỏ sậm */
[data-theme="light"] .rr-bar-caption .text-orange-400 { color: #c2410c !important; } /* Chặn lãi - Cam đất */
[data-theme="light"] .rr-bar-caption .text-yellow-400 { color: #b45309 !important; } /* Tỷ lệ R:R - Nâu cam */

/* =========================================================
   FIX LIGHT MODE: MỤC "ĐIỂM NHẤN HÔM NAY" (MORNING CAFE)
   ========================================================= */
[data-theme="light"] .article-container .bg-slate-900\/90 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .article-container .bg-slate-900\/90 p.text-gray-300 {
    color: #334155 !important; /* Đổi chữ xám nhạt thành xám đậm sắc nét */
}

/* Giữ nguyên màu nền vàng nổi bật của thẻ nhãn "Điểm nhấn hôm nay" */
[data-theme="light"] .article-container .bg-yellow-500 {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

/* =========================================================
   UX UPGRADE: BOTTOM BAR MOBILE CHO LIGHT MODE
   ========================================================= */

/* 1. Đổi nền Bottom Bar sang màu trắng, viền xám nhạt */
[data-theme="light"] #mobile-bottom-bar {
    background-color: #ffffff !important;
    border-top-color: #e2e8f0 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 2. Đổi màu chữ và icon của các nút (Chưa bấm) sang Xám đậm sắc nét */
[data-theme="light"] #mobile-bottom-bar a,
[data-theme="light"] #mobile-bottom-bar button {
    color: #64748b !important; /* Xám Slate-500 */
}

/* 3. Đổi màu khi ngón tay chạm vào */
[data-theme="light"] #mobile-bottom-bar a:hover,
[data-theme="light"] #mobile-bottom-bar button:hover {
    color: #0f172a !important; /* Đen nhám */
    background-color: #f8fafc !important; /* Hiệu ứng nền mờ khi chạm */
    border-radius: 8px;
}

/* 4. Đổi màu Tab đang được chọn (Active) sang màu Xanh Tech cực xịn */
/* Ghi đè lên class text-yellow-400 mặc định của Dark Mode */
[data-theme="light"] #mobile-bottom-bar a.text-yellow-400 {
    color: #2563eb !important; /* Xanh Blue đậm */
    font-weight: 700 !important;
}

/* Cập nhật màu cho Badge "LIVE" trên nền trắng cho hài hòa hơn */
[data-theme="light"] #mobile-bottom-bar .bg-red-600 {
    background-color: #ef4444 !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

/* =========================================================
   LIGHT MODE: NÚT CHIP LỌC NHANH (CHECKBOX) & SIÊU FA
   ========================================================= */

/* Dành cho PC */
[data-theme="light"] .filter-item label > div.hidden.md\:flex,
[data-theme="light"] #fa-filter-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="light"] .filter-item label:hover > div.hidden.md\:flex,
[data-theme="light"] #fa-filter-btn:hover {
    border-color: #3b82f6 !important;
    color: #2563eb !important;
}

[data-theme="light"] .filter-item input:checked + div.hidden.md\:flex {
    background-color: #fef3c7 !important; 
    border-color: #d97706 !important; 
    color: #92400e !important; 
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.2) !important;
}

/* Dành riêng cho Mobile */
@media (max-width: 768px) {
    [data-theme="light"] .mobile-chip-btn {
        background-color: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #475569 !important;
    }

    [data-theme="light"] #stronger-filter:checked ~ .mobile-chip-btn,
    [data-theme="light"] #rocket-filter:checked ~ .mobile-chip-btn,
    [data-theme="light"] #gtgd-filter:checked ~ .mobile-chip-btn {
        background-color: #fef3c7 !important; 
        border-color: #d97706 !important; 
        color: #92400e !important; 
        box-shadow: 0 0 8px rgba(217, 119, 6, 0.2) !important;
    }
}