/* ==============================================================
   VBCI.VN MASTER DESIGN SYSTEM - MULTI-THEME ENGINE
   Bộ Theme Đa Dạng: Obsidian Dark, Tokyo Night, Monokai Pro, Cyber Red, Light Gold
   Chuẩn màu Metallic Gold sang trọng & Đổi 100% Background
   ============================================================== */

/* ==============================================================
   1. ĐỊNH NGHĨA BIẾN MÀU CHO TỪNG THEME
   ============================================================== */

/* THEME 1: OBSIDIAN DARK (Mặc định - Đậm chất Antigravity / Obsidian) */
:root,
body.theme-obsidian,
body.dark-theme {
    --vbci-bg-body: #0d1117;
    --vbci-header-bg: #161b22;
    --vbci-header-text: #f0f6fc;
    --vbci-header-border: #d4af37; /* Metallic Gold */
    --vbci-card-bg: #161b22;
    --vbci-card-border: #30363d;
    --vbci-card-glow: rgba(0, 0, 0, 0.4);
    --vbci-banner-bg: #1c2128;
    --vbci-banner-border: #30363d;
    --vbci-text-main: #f0f6fc;
    --vbci-text-muted: #8b949e;
    --vbci-title-accent: #d4af37; /* Metallic Gold */
    --vbci-gold-accent: #d4af37;  /* Metallic Gold ánh kim */
    --vbci-gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
    --vbci-green-buy: #2ea043;
    --vbci-red-sell: #f85149;
    --vbci-subnav-bg: #161b22;
    --vbci-subnav-btn: #21262d;
    --vbci-subnav-btn-active: #d4af37;
    --vbci-subnav-btn-active-text: #0d1117;
    --vbci-table-stripe: rgba(255, 255, 255, 0.02);
    --vbci-table-hover: rgba(212, 175, 55, 0.08);
}

/* THEME 2: TOKYO NIGHT (Huyền bí, phong cách lập trình viên cao cấp) */
body.theme-tokyo {
    --vbci-bg-body: #13141f;
    --vbci-header-bg: #1a1b26;
    --vbci-header-text: #c0caf5;
    --vbci-header-border: #7aa2f7;
    --vbci-card-bg: #1a1b26;
    --vbci-card-border: #292e42;
    --vbci-card-glow: rgba(122, 162, 247, 0.08);
    --vbci-banner-bg: #1f2335;
    --vbci-banner-border: #292e42;
    --vbci-text-main: #c0caf5;
    --vbci-text-muted: #787c99;
    --vbci-title-accent: #7aa2f7;
    --vbci-gold-accent: #e0af68; /* Tokyo Warm Gold */
    --vbci-gold-gradient: linear-gradient(135deg, #e0af68, #bb9af7);
    --vbci-green-buy: #9ece6a;
    --vbci-red-sell: #f7768e;
    --vbci-subnav-bg: #1a1b26;
    --vbci-subnav-btn: #24283b;
    --vbci-subnav-btn-active: #7aa2f7;
    --vbci-subnav-btn-active-text: #13141f;
    --vbci-table-stripe: rgba(255, 255, 255, 0.02);
    --vbci-table-hover: rgba(122, 162, 247, 0.1);
}

/* THEME 3: MONOKAI PRO (Kinh điển thế giới công nghệ) */
body.theme-monokai {
    --vbci-bg-body: #1e1f1c;
    --vbci-header-bg: #272822;
    --vbci-header-text: #f8f8f2;
    --vbci-header-border: #a6e22e;
    --vbci-card-bg: #272822;
    --vbci-card-border: #3e3d32;
    --vbci-card-glow: rgba(0, 0, 0, 0.3);
    --vbci-banner-bg: #32332c;
    --vbci-banner-border: #49483e;
    --vbci-text-main: #f8f8f2;
    --vbci-text-muted: #75715e;
    --vbci-title-accent: #e6db74;
    --vbci-gold-accent: #e6db74;
    --vbci-gold-gradient: linear-gradient(135deg, #e6db74, #a6e22e);
    --vbci-green-buy: #a6e22e;
    --vbci-red-sell: #f92672;
    --vbci-subnav-bg: #272822;
    --vbci-subnav-btn: #383830;
    --vbci-subnav-btn-active: #e6db74;
    --vbci-subnav-btn-active-text: #1e1f1c;
    --vbci-table-stripe: rgba(255, 255, 255, 0.02);
    --vbci-table-hover: rgba(230, 219, 116, 0.1);
}

/* THEME 4: CYBER RED (Đúng ảnh số 2 của anh - Quyền lực & Táo bạo) */
body.theme-cyber-red {
    --vbci-bg-body: #18080a;
    --vbci-header-bg: #250c0f;
    --vbci-header-text: #ffe5e8;
    --vbci-header-border: #ff3355;
    --vbci-card-bg: #250c0f;
    --vbci-card-border: #42161b;
    --vbci-card-glow: rgba(255, 51, 85, 0.12);
    --vbci-banner-bg: #331014;
    --vbci-banner-border: #521c23;
    --vbci-text-main: #ffe5e8;
    --vbci-text-muted: #a66a71;
    --vbci-title-accent: #ff4d6d;
    --vbci-gold-accent: #ffb703;
    --vbci-gold-gradient: linear-gradient(135deg, #ff4d6d, #ffb703);
    --vbci-green-buy: #00f5d4;
    --vbci-red-sell: #ff3355;
    --vbci-subnav-bg: #250c0f;
    --vbci-subnav-btn: #3a1318;
    --vbci-subnav-btn-active: #ff3355;
    --vbci-subnav-btn-active-text: #ffffff;
    --vbci-table-stripe: rgba(255, 255, 255, 0.02);
    --vbci-table-hover: rgba(255, 51, 85, 0.12);
}

/* THEME 5: LIGHT GOLD (Giao diện Sáng Hoàng Gia) */
body.theme-light {
    --vbci-bg-body: #f8fafc;
    --vbci-header-bg: #ffffff;
    --vbci-header-text: #1a1a1a;
    --vbci-header-border: #d4af37;
    --vbci-card-bg: #ffffff;
    --vbci-card-border: #e2e8f0;
    --vbci-card-glow: rgba(0, 0, 0, 0.05);
    --vbci-banner-bg: #f8fafc;
    --vbci-banner-border: #e2e8f0;
    --vbci-text-main: #0f172a;
    --vbci-text-muted: #64748b;
    --vbci-title-accent: #00315e;
    --vbci-gold-accent: #b38728;
    --vbci-gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 50%, #b38728 100%);
    --vbci-green-buy: #16a34a;
    --vbci-red-sell: #dc2626;
    --vbci-subnav-bg: #ffffff;
    --vbci-subnav-btn: #f1f5f9;
    --vbci-subnav-btn-active: #d4af37;
    --vbci-subnav-btn-active-text: #ffffff;
    --vbci-table-stripe: #f8fafc;
    --vbci-table-hover: rgba(212, 175, 55, 0.08);
}

/* ==============================================================
   2. GLOBAL BODY & RESET TẬN GỐC
   ============================================================== */
body {
    background-color: var(--vbci-bg-body) !important;
    color: var(--vbci-text-main) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

/* Khắc phục triệt để các class Bootstrap cứng gây loang màu trắng */
.bg-light,
.bg-white {
    background-color: var(--vbci-card-bg) !important;
    color: var(--vbci-text-main) !important;
}

.text-dark,
.text-body {
    color: var(--vbci-text-main) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--vbci-card-border) !important;
}

/* ==============================================================
   3. HEADER & MENU CHÍNH
   ============================================================== */
#header-top {
    background-color: var(--vbci-header-bg) !important;
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 2px solid var(--vbci-header-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.vbci-logo-title {
    color: var(--vbci-header-text) !important;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.vbci-logo-title span.text-gold {
    color: var(--vbci-gold-accent) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.vbci-main-nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.vbci-main-nav li a {
    display: inline-block;
    color: var(--vbci-header-text) !important;
    font-weight: 700;
    font-size: 0.93rem;
    padding: 12px 18px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.25s ease;
    opacity: 0.85;
}

.vbci-main-nav li.active a,
.vbci-main-nav li a:hover {
    opacity: 1;
    color: var(--vbci-title-accent) !important;
    border-bottom: 3px solid var(--vbci-title-accent);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

/* Dropdown Chọn Theme Thông Minh */
.theme-select-dropdown {
    background-color: var(--vbci-card-bg);
    color: var(--vbci-text-main);
    border: 1px solid var(--vbci-card-border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.theme-select-dropdown:focus {
    border-color: var(--vbci-gold-accent);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}

/* ==============================================================
   4. SUB-NAV TABS & BỘ LỌC
   ============================================================== */
.vbci-sub-nav {
    background-color: var(--vbci-subnav-bg) !important;
    border-bottom: 1px solid var(--vbci-card-border);
    padding: 8px 0;
}

.vbci-sub-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 2px 0;
}

.vbci-filter-btn {
    background-color: var(--vbci-subnav-btn);
    color: var(--vbci-text-muted) !important;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vbci-filter-btn:hover {
    color: var(--vbci-text-main) !important;
    text-decoration: none;
    border-color: var(--vbci-card-border);
}

.vbci-filter-btn.active {
    background-color: var(--vbci-subnav-btn-active) !important;
    color: var(--vbci-subnav-btn-active-text) !important;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ==============================================================
   5. CARDS & PANELS (KHỐI THÔNG TIN)
   ============================================================== */
.brand-card-block {
    background-color: var(--vbci-card-bg) !important;
    border: 1px solid var(--vbci-card-border) !important;
    border-radius: 10px;
    box-shadow: 0 4px 18px var(--vbci-card-glow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.brand-card-block:hover {
    transform: translateY(-2px);
    border-color: var(--vbci-gold-accent) !important;
}

.brand-card-title {
    color: var(--vbci-title-accent) !important;
    font-weight: 800;
}

.sidebar-box {
    background-color: var(--vbci-card-bg) !important;
    border: 1px solid var(--vbci-card-border) !important;
    border-radius: 10px;
    box-shadow: 0 4px 18px var(--vbci-card-glow);
    margin-bottom: 20px;
}

/* Khung Banner Tài Trợ - Khắc phục vĩnh viễn lỗi vệt trắng */
.sponsor-banner-box {
    background-color: var(--vbci-banner-bg) !important;
    border: 1px dashed var(--vbci-banner-border) !important;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: background-color 0.25s ease;
}

.sponsor-banner-box h6 {
    color: var(--vbci-text-main) !important;
}

/* ==============================================================
   6. BẢNG DỮ LIỆU & TIỆN ÍCH
   ============================================================== */
.table {
    color: var(--vbci-text-main) !important;
}

.table thead th {
    background-color: var(--vbci-subnav-btn) !important;
    color: var(--vbci-text-muted) !important;
    border-color: var(--vbci-card-border) !important;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

.table td {
    border-color: var(--vbci-card-border) !important;
    vertical-align: middle !important;
    font-size: 0.93rem;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--vbci-table-stripe) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--vbci-table-hover) !important;
}

/* Giá Mua / Bán chuẩn màu */
.price-buy,
.text-success {
    color: var(--vbci-green-buy) !important;
}

.price-sell,
.text-danger {
    color: var(--vbci-red-sell) !important;
}

.text-gold {
    color: var(--vbci-gold-accent) !important;
}

/* Form Controls */
.form-control {
    background-color: var(--vbci-banner-bg) !important;
    border-color: var(--vbci-card-border) !important;
    color: var(--vbci-text-main) !important;
}

.form-control:focus {
    border-color: var(--vbci-gold-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
    color: var(--vbci-text-main) !important;
}

/* Footer đồng bộ */
footer {
    background-color: var(--vbci-header-bg) !important;
    border-color: var(--vbci-card-border) !important;
    color: var(--vbci-text-muted) !important;
}