/* ===== LIGHT MODE COMPLETE OVERRIDE ===== */
/* Version 3.0 - Fixed sidebar + improved contrast */

/* ===== GLOBAL OVERRIDES ===== */
:root {
    --bg-dark: #f5f7fa !important;
    --bg-card: rgba(255, 255, 255, 0.92) !important;
    --bg-card-hover: rgba(255, 255, 255, 1) !important;
    --text-white: #1a1a2e !important;
    --text-light: rgba(26, 26, 46, 0.9) !important;
    --text-muted: rgba(26, 26, 46, 0.6) !important;
    --text-dark: rgba(26, 26, 46, 0.5) !important;
    --border-light: rgba(26, 26, 46, 0.12) !important;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

body {
    background: #f5f7fa !important;
    color: #1a1a2e !important;
}

/* ===== FORCE SIDEBAR LIGHT MODE ===== */
.sidebar,
aside.sidebar,
#sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right: 1px solid rgba(26, 26, 46, 0.1) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.04) !important;
}

.sidebar *,
aside.sidebar *,
#sidebar * {
    color: #1a1a2e;
}

.sidebar .sidebar-header,
.sidebar-header {
    border-bottom: 1px solid rgba(26, 26, 46, 0.1) !important;
    background: transparent !important;
}

.sidebar .sidebar-brand,
.sidebar-brand {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sidebar .sidebar-actions,
.sidebar-actions {
    background: transparent !important;
}

.sidebar .btn-download-main {
    color: #0a0a0f !important;
}

.sidebar .btn-login-main,
.sidebar .btn-account-main,
.sidebar a.btn-login-main,
.sidebar a.btn-account-main {
    background: rgba(26, 26, 46, 0.06) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
}

.sidebar .btn-login-main:hover,
.sidebar .btn-account-main:hover {
    background: rgba(26, 26, 46, 0.1) !important;
}

.sidebar .btn-logout {
    color: rgba(26, 26, 46, 0.7) !important;
}

.sidebar .btn-community,
.sidebar a.btn-community {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
}

.sidebar .btn-community:hover {
    background: #ffffff !important;
    border-color: #667eea !important;
    color: #667eea !important;
}

/* Sidebar Menu */
.sidebar .sidebar-menu,
.sidebar-menu,
.sidebar nav {
    background: transparent !important;
}

.sidebar .menu-section,
.menu-section {
    background: transparent !important;
}

.sidebar .menu-header,
.menu-header {
    background: transparent !important;
}

.sidebar .menu-header:hover,
.menu-header:hover {
    background: rgba(26, 26, 46, 0.04) !important;
}

.sidebar .menu-title,
.menu-title {
    color: #1a1a2e !important;
}

.sidebar .menu-arrow,
.menu-arrow {
    color: rgba(26, 26, 46, 0.5) !important;
}

.sidebar .menu-items,
.menu-items {
    background: rgba(26, 26, 46, 0.03) !important;
}

.sidebar .menu-item,
.menu-item,
.sidebar a.menu-item {
    color: rgba(26, 26, 46, 0.7) !important;
}

.sidebar .menu-item::before,
.menu-item::before {
    background: rgba(26, 26, 46, 0.3) !important;
}

.sidebar .menu-item:hover,
.menu-item:hover {
    color: #1a1a2e !important;
    background: rgba(26, 26, 46, 0.06) !important;
}

.sidebar .menu-item:hover::before,
.menu-item:hover::before {
    background: #667eea !important;
}

/* Menu icon - keep gradient background */
.sidebar .menu-icon,
.menu-icon {
    color: #ffffff !important;
}

/* Sidebar close button */
.sidebar .sidebar-close-btn,
.sidebar-close-btn {
    background: rgba(26, 26, 46, 0.06) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

.sidebar .sidebar-close-btn:hover,
.sidebar-close-btn:hover {
    background: rgba(26, 26, 46, 0.12) !important;
}

/* ===== ANIMATED BACKGROUND ===== */
.bg-animated {
    background: #f5f7fa !important;
}

.bg-animated::before {
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(102, 126, 234, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 0%, rgba(240, 147, 251, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(56, 239, 125, 0.03) 0%, transparent 50%) !important;
}

.orb-1 { background: rgba(102, 126, 234, 0.06) !important; }
.orb-2 { background: rgba(240, 147, 251, 0.04) !important; }
.orb-3 { background: rgba(56, 239, 125, 0.03) !important; }

.grid-pattern {
    background-image: 
        linear-gradient(rgba(26, 26, 46, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 46, 0.03) 1px, transparent 1px) !important;
}

/* ===== SIDEBAR ===== */
.sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-right: 1px solid rgba(26, 26, 46, 0.1) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05) !important;
}

.sidebar-header {
    border-bottom: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.sidebar-brand {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.sidebar-close-btn {
    background: rgba(26, 26, 46, 0.06) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

.sidebar-close-btn:hover {
    background: rgba(26, 26, 46, 0.12) !important;
}

/* Menu */
.menu-header:hover {
    background: rgba(26, 26, 46, 0.04) !important;
}

.menu-title {
    color: #1a1a2e !important;
}

.menu-arrow {
    color: rgba(26, 26, 46, 0.5) !important;
}

.menu-items {
    background: rgba(26, 26, 46, 0.03) !important;
}

.menu-item {
    color: rgba(26, 26, 46, 0.7) !important;
}

.menu-item::before {
    background: rgba(26, 26, 46, 0.3) !important;
}

.menu-item:hover {
    color: #1a1a2e !important;
    background: rgba(26, 26, 46, 0.06) !important;
}

/* Buttons */
.btn-community {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(26, 26, 46, 0.15) !important;
}

.btn-community:hover {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ===== MOBILE HEADER ===== */
.mobile-header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(26, 26, 46, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.mobile-menu-btn {
    background: rgba(26, 26, 46, 0.05) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

.mobile-menu-btn:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* ===== HERO CARD ===== */
.hero-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

.hero-text h1 {
    color: #1a1a2e !important;
}

.hero-text p {
    color: rgba(26, 26, 46, 0.7) !important;
}

.hero-status {
    color: #10b981 !important;
}

.hero-btn-secondary {
    background: rgba(26, 26, 46, 0.06) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
}

.hero-btn-secondary:hover {
    background: rgba(26, 26, 46, 0.12) !important;
}

/* ===== BANNER/SLIDESHOW ===== */
.banner-slide,
.slide-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.banner-slide h2,
.banner-slide h3,
.slide-title {
    color: #ffffff !important;
}

.banner-slide p,
.slide-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Slider nav buttons */
.slide-nav,
.slider-nav,
.banner-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
    color: #1a1a2e !important;
}

.slide-nav:hover,
.slider-nav:hover,
.banner-nav:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* ===== GLASS CARDS ===== */
.glass-card,
.content-section {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(26, 26, 46, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* ===== NEWS CARDS ===== */
.news-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.news-card:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

.news-card-title {
    color: #1a1a2e !important;
}

.news-card-excerpt {
    color: rgba(26, 26, 46, 0.65) !important;
}

.news-card-footer {
    border-top: 1px solid rgba(26, 26, 46, 0.08) !important;
    color: rgba(26, 26, 46, 0.55) !important;
}

.card-meta {
    color: rgba(26, 26, 46, 0.55) !important;
}

.news-card-image .no-image {
    color: rgba(26, 26, 46, 0.2) !important;
}

/* ===== SECTION TITLES ===== */
.section-title,
.page-title,
.card-title {
    color: #1a1a2e !important;
}

.section-subtitle {
    color: rgba(26, 26, 46, 0.6) !important;
}

/* ===== FORMS ===== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background: #ffffff !important;
    border: 1px solid rgba(26, 26, 46, 0.15) !important;
    color: #1a1a2e !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(26, 26, 46, 0.45) !important;
}

/* ===== BUTTONS ===== */
.btn-login-main,
.btn-action-secondary {
    background: rgba(26, 26, 46, 0.06) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
}

.btn-login-main:hover,
.btn-action-secondary:hover {
    background: rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

/* Colored buttons keep white text */
.btn-download-main,
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
[class*="gradient-"],
.menu-icon {
    color: #ffffff !important;
}

/* "Xem thêm" button */
.load-more-btn,
.btn-load-more,
.view-more-btn {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid rgba(26, 26, 46, 0.15) !important;
    color: #1a1a2e !important;
}

.load-more-btn:hover,
.btn-load-more:hover,
.view-more-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: #ffffff !important;
}

/* ===== TABLES ===== */
.table,
table {
    color: #1a1a2e !important;
}

.table th,
.table td,
table th,
table td {
    border-color: rgba(26, 26, 46, 0.08) !important;
    color: #1a1a2e !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(26, 26, 46, 0.025) !important;
}

/* ===== BXH (LEADERBOARD) ===== */
.bxh-card {
    background: rgba(255, 255, 255, 0.95) !important;
}

.bxh-card-title {
    color: #1a1a2e !important;
}

.bxh-card-sub {
    color: rgba(26, 26, 46, 0.6) !important;
}

.bxh-table-wrap {
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.bxh-table .bxh-name {
    color: #1a1a2e !important;
}

.bxh-empty {
    color: rgba(26, 26, 46, 0.6) !important;
}

.rank-badge {
    background: rgba(26, 26, 46, 0.06) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

/* ===== GIFTCODE ===== */
.giftcode-card {
    background: rgba(255, 255, 255, 0.95) !important;
}

.giftcode-card-head {
    border-bottom: 1px solid rgba(26, 26, 46, 0.08) !important;
}

.giftcode-title {
    color: #1a1a2e !important;
}

.giftcode-sub {
    color: rgba(26, 26, 46, 0.65) !important;
}

.giftcode-code {
    background: rgba(26, 26, 46, 0.05) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

.gift-item {
    background: rgba(26, 26, 46, 0.03) !important;
    border: 1px solid rgba(26, 26, 46, 0.08) !important;
}

.gift-item-name {
    color: #1a1a2e !important;
}

.gift-pill {
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    background: rgba(26, 26, 46, 0.04) !important;
}

.gift-empty {
    background: rgba(26, 26, 46, 0.03) !important;
    border: 1px dashed rgba(26, 26, 46, 0.15) !important;
    color: rgba(26, 26, 46, 0.6) !important;
}

.giftcode-note {
    border-top: 1px solid rgba(26, 26, 46, 0.08) !important;
    color: rgba(26, 26, 46, 0.7) !important;
}

/* ===== MODALS ===== */
.modal-overlay {
    background: rgba(26, 26, 46, 0.4) !important;
}

.modal-content,
.ws-modal-dialog {
    background: rgba(255, 255, 255, 0.99) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

.modal-header,
.ws-modal-header {
    border-bottom: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.modal-header h3,
.ws-modal-title {
    color: #1a1a2e !important;
}

.ws-modal-counter {
    color: rgba(26, 26, 46, 0.6) !important;
}

.modal-close,
.ws-modal-close {
    background: rgba(26, 26, 46, 0.06) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

.modal-close:hover,
.ws-modal-close:hover {
    background: rgba(26, 26, 46, 0.12) !important;
}

.modal-body {
    color: #1a1a2e !important;
}

.modal-footer {
    border-top: 1px solid rgba(26, 26, 46, 0.08) !important;
    background: rgba(26, 26, 46, 0.02) !important;
}

.ws-modal-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    color: #1a1a2e !important;
}

.ws-modal-nav:hover {
    background: #ffffff !important;
}

.ws-modal-img {
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.ws-modal-thumbs {
    border-top: 1px solid rgba(26, 26, 46, 0.08) !important;
}

.ws-thumb {
    background: rgba(26, 26, 46, 0.04) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
}

/* ===== DOWNLOAD SECTIONS ===== */
.dl-section {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.dl-header {
    color: #1a1a2e !important;
}

.dl-header:hover {
    background: rgba(26, 26, 46, 0.04) !important;
}

.dl-title {
    color: #1a1a2e !important;
}

.dl-arrow {
    color: rgba(26, 26, 46, 0.5) !important;
}

.dl-items {
    background: rgba(26, 26, 46, 0.02) !important;
    border-top: 1px solid rgba(26, 26, 46, 0.08) !important;
}

.dl-item {
    color: rgba(26, 26, 46, 0.8) !important;
    border-bottom: 1px solid rgba(26, 26, 46, 0.06) !important;
}

.dl-item:hover {
    background: rgba(26, 26, 46, 0.04) !important;
    color: var(--primary) !important;
}

/* ===== ALERTS ===== */
.alert {
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
    color: #1a1a2e !important;
}

.alert-info {
    background: rgba(102, 126, 234, 0.08) !important;
    border-color: rgba(102, 126, 234, 0.2) !important;
}

.alert-success {
    background: rgba(56, 239, 125, 0.08) !important;
    border-color: rgba(56, 239, 125, 0.2) !important;
}

.alert-warning {
    background: rgba(242, 201, 76, 0.08) !important;
    border-color: rgba(242, 201, 76, 0.2) !important;
}

.alert-danger {
    background: rgba(244, 92, 67, 0.08) !important;
    border-color: rgba(244, 92, 67, 0.2) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 46, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 46, 0.3);
}

/* ===== SELECTION ===== */
::selection {
    background: rgba(102, 126, 234, 0.2);
    color: #1a1a2e;
}

/* ===== LINKS ===== */
a {
    color: #1a1a2e;
}

a:hover {
    color: var(--primary);
}

/* ===== MISC TEXT OVERRIDES ===== */
p, span, div, li {
    color: inherit;
}

/* Force dark text on light backgrounds */
.content-section p,
.content-section span,
.content-section div,
.glass-card p,
.glass-card span {
    color: rgba(26, 26, 46, 0.85);
}

/* Time/meta info */
.time,
.date,
.meta,
.views,
[class*="time"],
[class*="date"],
[class*="meta"],
[class*="view"] {
    color: rgba(26, 26, 46, 0.55) !important;
}

/* Icons in cards */
.news-card i,
.glass-card i,
.card-meta i {
    color: rgba(26, 26, 46, 0.5) !important;
}

/* ===== FIX WHITE TEXT ON WHITE BG ===== */
/* These elements had rgba(255,255,255,...) colors */
[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: white"],
[style*="color:white"] {
    /* Don't override inline white text - it's likely on colored background */
}

/* User info sections */
.user-info,
.account-info,
.profile-info {
    color: #1a1a2e !important;
}

.user-name,
.account-name {
    color: #1a1a2e !important;
}

.user-level,
.account-level {
    color: rgba(26, 26, 46, 0.7) !important;
}

/* Stats */
.stat-value,
.stat-number {
    color: #1a1a2e !important;
}

.stat-label {
    color: rgba(26, 26, 46, 0.6) !important;
}

/* ===== WEBSHOP ===== */
.product-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.product-name {
    color: #1a1a2e !important;
}

.product-price {
    color: var(--primary) !important;
}

.product-desc {
    color: rgba(26, 26, 46, 0.65) !important;
}

/* ===== LOGIN/REGISTER PAGES ===== */
.login-card,
.register-card,
.auth-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(26, 26, 46, 0.1) !important;
}

.login-title,
.register-title,
.auth-title {
    color: #1a1a2e !important;
}

.form-label,
label {
    color: rgba(26, 26, 46, 0.8) !important;
}

/* ===== FOOTER ===== */
footer,
.footer {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(26, 26, 46, 0.1) !important;
    color: rgba(26, 26, 46, 0.7) !important;
}

.footer a {
    color: rgba(26, 26, 46, 0.7) !important;
}

.footer a:hover {
    color: var(--primary) !important;
}

/* ===== SLIDESHOW SPECIFIC FIX ===== */
.slideshow-container .slide h2,
.slideshow-container .slide h3,
.carousel-caption h2,
.carousel-caption h3,
.banner-content h2,
.banner-content h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.slideshow-container .slide p,
.carousel-caption p,
.banner-content p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
}

/* =========================
   VIDEO PAGES - FULL WIDTH
   ========================= */
.page-videos .page-container {
    max-width: none !important;
    width: 100% !important;
    padding: 20px 30px !important;
}

.page-videos .content-section {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.page-videos .videos-grid {
    width: 100% !important;
    max-width: none !important;
}