/* ==========================================================================
   APHIM SUPER WARM CHAMPAGNE GOLD CINEMA THEME (IMAX & OSCAR INSPIRED)
   Warm Sand, Champagne Titanium & Rich Amber Gold Accents
   ========================================================================== */

html.light-mode {
    background-color: #f5f0e6 !important;
    background: #f5f0e6 !important;
    color: #1c1917 !important;
}
html.light-mode body {
    background-color: #f5f0e6 !important;
    background: #f5f0e6 !important;
    color: #1c1917 !important;
    padding-top: 64px !important;
}
@media (max-width: 1280px) {
    html.light-mode body {
        padding-top: 60px !important;
    }
}

/* Base Container Adjustments */
html.light-mode main {
    background-color: #f5f0e6 !important;
    background: #f5f0e6 !important;
    color: #1c1917 !important;
}

html.light-mode .profile-page-bg {
    background-color: transparent !important;
    background: transparent !important;
    color: #1c1917 !important;
}

html.light-mode main.movie-content-zone {
    margin-top: -64px !important;
    background-color: transparent !important;
    background: transparent !important;
    color: #1c1917 !important;
}
@media (max-width: 1280px) {
    html.light-mode main.movie-content-zone {
        margin-top: -60px !important;
    }
}

html.light-mode .movie-content-zone .app-container {
    padding-top: 88px !important;
    background-color: transparent !important;
    background: transparent !important;
}
@media (max-width: 1280px) {
    html.light-mode .movie-content-zone .app-container {
        padding-top: 80px !important;
    }
}

/* Watch Page Breadcrumb & Notice Banner Alignment in Light Mode */
html.light-mode .watch-breadcrumb-bar a,
html.light-mode .watch-breadcrumb-bar span:not(#watchBreadcrumbEpName) {
    color: #1c1917 !important;
}
html.light-mode .watch-breadcrumb-bar svg {
    color: #78716c !important;
}
html.light-mode #dismissibleNotice {
    background: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    color: #44403c !important;
    box-shadow: 0 2px 6px rgba(78, 64, 45, 0.05) !important;
    margin-bottom: 14px !important;
}
html.light-mode #dismissibleNotice span {
    color: #44403c !important;
}
html.light-mode #dismissibleNotice span.material-icons-round:not(.notice-close-btn span) {
    color: #d97706 !important;
}
html.light-mode #dismissibleNotice span.text-white,
html.light-mode #dismissibleNotice .notice-btn-highlight {
    color: #d97706 !important;
    font-weight: 700 !important;
}
html.light-mode #dismissibleNotice button,
html.light-mode #dismissibleNotice .notice-close-btn,
html.light-mode #dismissibleNotice .notice-close-btn span,
html.light-mode #dismissibleNotice button span {
    color: #57534e !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html.light-mode #dismissibleNotice button:hover,
html.light-mode #dismissibleNotice .notice-close-btn:hover,
html.light-mode #dismissibleNotice .notice-close-btn:hover span,
html.light-mode #dismissibleNotice button:hover span {
    color: #1c1917 !important;
    background: rgba(78, 64, 45, 0.08) !important;
    border-radius: 4px !important;
}

/* Watch Main Container Top Offset Alignment (Standard Spacing) */
html.light-mode main.watch-main-container,
main.watch-main-container {
    margin-top: 0 !important;
}

/* ==========================================================================
   1. UNIFIED WARM CHAMPAGNE HEADER (#sofa-header) & NAV PILL FIXES
   ========================================================================== */
html.light-mode #sofa-header,
html.light-mode header#sofa-header,
html.light-mode header {
    background: rgba(250, 247, 242, 0.98) !important;
    background-color: #faf7f2 !important;
    border-bottom: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 20px rgba(78, 64, 45, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

html.light-mode .sofa-header-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* FIX: Eliminate White Box Block Effect Behind Nav Pills & Header Links (Exclude Login Button) */
html.light-mode header a:not(.sofa-login-rect-btn),
html.light-mode #sofa-header a:not(.sofa-login-rect-btn),
html.light-mode .sofa-nav-links a,
html.light-mode .sofa-nav-item,
html.light-mode .nav-pill,
html.light-mode .sofa-dropdown,
html.light-mode .nav-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Header Login Button Box in Light Mode (Desktop & Mobile) */
html.light-mode #sofa-header .sofa-login-rect-btn,
html.light-mode header .sofa-login-rect-btn,
html.light-mode #authContainer .sofa-login-rect-btn,
html.light-mode .sofa-login-rect-btn {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    background-color: #fcd576 !important;
    color: #0d0f1a !important;
    -webkit-text-fill-color: #0d0f1a !important;
    font-weight: 800 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.3) !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

html.light-mode #sofa-header .sofa-login-rect-btn:hover,
html.light-mode header .sofa-login-rect-btn:hover,
html.light-mode #authContainer .sofa-login-rect-btn:hover,
html.light-mode .sofa-login-rect-btn:hover {
    background: linear-gradient(135deg, #ffe08c 0%, #d97706 100%) !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 5px 14px rgba(217, 119, 6, 0.45) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1280px) {
    html.light-mode #sofa-header .sofa-login-rect-btn,
    html.light-mode header .sofa-login-rect-btn,
    html.light-mode #authContainer .sofa-login-rect-btn,
    html.light-mode .sofa-login-rect-btn {
        height: 36px !important;
        padding: 0 16px !important;
        border-radius: 9999px !important;
    }
}

html.light-mode .nav-pill::before,
html.light-mode .nav-pill::after {
    display: none !important;
}

/* Header Hamburger Button & Icons */
html.light-mode .sofa-menu-btn {
    color: #1c1917 !important;
}
html.light-mode .sofa-menu-btn svg {
    stroke: #1c1917 !important;
}

/* Desktop Navigation Links */
html.light-mode .sofa-nav-item,
html.light-mode .nav-link-text,
html.light-mode .nav-text {
    color: #292524 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
}
html.light-mode .sofa-nav-item:hover,
html.light-mode .sofa-dropdown:hover .sofa-nav-item,
html.light-mode .nav-pill:hover .nav-text {
    color: #d97706 !important;
    background: transparent !important;
}

/* Dropdown Arrow Icons */
html.light-mode .sofa-dropdown-arrow {
    fill: #292524 !important;
}
html.light-mode .sofa-nav-item:hover .sofa-dropdown-arrow,
html.light-mode .sofa-dropdown:hover .sofa-dropdown-arrow {
    fill: #d97706 !important;
}

/* Navigation Dropdown Menus */
html.light-mode .sofa-dropdown-menu,
html.light-mode .dropdown-pill {
    background-color: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 16px 40px rgba(78, 64, 45, 0.15) !important;
}
html.light-mode .sofa-dropdown-link,
html.light-mode .dropdown-item {
    color: #44403c !important;
}
html.light-mode .sofa-dropdown-link:hover,
html.light-mode .dropdown-item:hover {
    background-color: #eae3d5 !important;
    color: #b45309 !important;
}

/* Header Search Form & Dropdown Overlay */
html.light-mode .sofa-desktop-search-form {
    background: #ece6da !important;
    border: 1px solid #d6cebf !important;
}
html.light-mode .sofa-desktop-search-form:focus-within {
    background: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 0 14px rgba(217, 119, 6, 0.25) !important;
}
html.light-mode .sofa-desktop-search-input,
html.light-mode .sofa-desktop-search-input:focus,
html.light-mode .sofa-desktop-search-input:focus-visible,
html.light-mode .sofa-desktop-search-input:active,
html.light-mode input.sofa-desktop-search-input,
html.light-mode form.sofa-desktop-search-form input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    color: #1c1917 !important;
}
html.light-mode .sofa-desktop-search-input::placeholder {
    color: #78716c !important;
}
html.light-mode .sofa-desktop-search-icon {
    color: #78716c !important;
}
html.light-mode .sofa-inner-filter-btn {
    background: #dfd7c6 !important;
    color: #44403c !important;
    border: 1px solid #d6cebf !important;
}

/* Mobile & Header Dropdown Search Overlay in Light Mode */
html.light-mode .sofa-mobile-search-overlay,
html.light-mode #sofa-mobile-search-overlay {
    background: rgba(250, 247, 242, 0.98) !important;
    background-color: #faf7f2 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid #e7e0d3 !important;
    box-shadow: 0 16px 40px rgba(78, 64, 45, 0.15) !important;
}

html.light-mode .sofa-mobile-search-inner-form,
html.light-mode #sofa-mobile-search-overlay .sofa-mobile-search-inner-form {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .sofa-mobile-search-inner-form:focus-within,
html.light-mode #sofa-mobile-search-overlay .sofa-mobile-search-inner-form:focus-within {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}

html.light-mode .sofa-mobile-search-input-icon,
html.light-mode #sofa-mobile-search-overlay .sofa-mobile-search-input-icon {
    color: #78716c !important;
}

html.light-mode .sofa-mobile-search-input-field,
html.light-mode #sofa-mobile-search-overlay input.sofa-mobile-search-input-field,
html.light-mode .sofa-mobile-search-inner-form input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

html.light-mode .sofa-mobile-search-input-field::placeholder,
html.light-mode #sofa-mobile-search-overlay input.sofa-mobile-search-input-field::placeholder,
html.light-mode .sofa-mobile-search-inner-form input::placeholder {
    color: #78716c !important;
    -webkit-text-fill-color: #78716c !important;
    opacity: 1 !important;
}

html.light-mode .sofa-mobile-search-close-btn,
html.light-mode #sofa-mobile-search-overlay .sofa-mobile-search-close-btn {
    background: #eae3d5 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
}

html.light-mode .sofa-mobile-search-close-btn:hover,
html.light-mode #sofa-mobile-search-overlay .sofa-mobile-search-close-btn:hover {
    background: #dfd7c6 !important;
    color: #d97706 !important;
}

/* Realtime Search Suggestion Dropdown Panel in Light Mode */
html.light-mode .ap-suggest-panel {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    border: 1.5px solid #d6cebf !important;
    box-shadow: 0 16px 45px rgba(78, 64, 45, 0.2) !important;
}

html.light-mode .ap-suggest-row {
    border-bottom: 1px solid #e7e0d3 !important;
}

html.light-mode .ap-suggest-row:hover,
html.light-mode .ap-suggest-row:focus {
    background: #eae3d5 !important;
}

html.light-mode .ap-suggest-thumb-box {
    background: #ffffff !important;
    border: 1px solid #d6cebf !important;
}

html.light-mode .ap-suggest-title {
    color: #1c1917 !important;
}

html.light-mode .ap-suggest-row:hover .ap-suggest-title {
    color: #b45309 !important;
}

html.light-mode .ap-suggest-en,
html.light-mode .ap-suggest-meta-row {
    color: #57534e !important;
}

html.light-mode .ap-suggest-footer {
    background: #eae3d5 !important;
    color: #b45309 !important;
    border-top: 1px solid #d6cebf !important;
}

html.light-mode .ap-suggest-footer:hover {
    background: #dfd7c6 !important;
    color: #d97706 !important;
}

/* Mobile Sidebar Drawer Menu in Light Mode */
html.light-mode .mobile-drawer,
html.light-mode #sofa-mobile-drawer {
    background: rgba(40, 32, 20, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .mobile-drawer-content,
html.light-mode #sofa-mobile-drawer .mobile-drawer-content {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right: 1px solid #e7e0d3 !important;
    box-shadow: 10px 0 40px rgba(78, 64, 45, 0.18) !important;
}

html.light-mode .drawer-close-btn,
html.light-mode #sofa-mobile-drawer .drawer-close-btn {
    background: #eae3d5 !important;
    background-color: #eae3d5 !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebf !important;
    font-weight: 700 !important;
}

html.light-mode .drawer-close-btn:hover,
html.light-mode #sofa-mobile-drawer .drawer-close-btn:hover {
    background: #dfd7c6 !important;
    color: #d97706 !important;
}

html.light-mode .drawer-accordion-group,
html.light-mode #sofa-mobile-drawer .drawer-accordion-group {
    border-top: 1px solid #e7e0d3 !important;
}

html.light-mode .drawer-accordion-item,
html.light-mode #sofa-mobile-drawer .drawer-accordion-item {
    border-bottom: 1px solid #e7e0d3 !important;
}

html.light-mode .drawer-accordion-header,
html.light-mode #sofa-mobile-drawer .drawer-accordion-header {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .drawer-accordion-item.active .drawer-accordion-header,
html.light-mode #sofa-mobile-drawer .drawer-accordion-item.active .drawer-accordion-header {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html.light-mode .drawer-accordion-icon,
html.light-mode #sofa-mobile-drawer .drawer-accordion-icon {
    fill: #57534e !important;
}

html.light-mode .drawer-accordion-item.active .drawer-accordion-icon,
html.light-mode #sofa-mobile-drawer .drawer-accordion-item.active .drawer-accordion-icon {
    fill: #b45309 !important;
}

html.light-mode .drawer-sub-link,
html.light-mode #sofa-mobile-drawer .drawer-sub-link {
    font-weight: 600 !important;
    filter: brightness(0.75) saturate(1.2);
}

html.light-mode .drawer-sub-link:hover,
html.light-mode #sofa-mobile-drawer .drawer-sub-link:hover {
    filter: brightness(0.5) saturate(1.5);
    text-decoration: underline !important;
}

html.light-mode .drawer-pill-btn,
html.light-mode #sofa-mobile-drawer .drawer-pill-btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    border: 1.5px solid #d6cebf !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .drawer-pill-btn:hover,
html.light-mode #sofa-mobile-drawer .drawer-pill-btn:hover {
    background: #fff7ed !important;
    background-color: #fff7ed !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
}



/* Circular Header Icons (Bell & User Profile) */
html.light-mode .sofa-icon-circle-btn {
    background-color: #ece6da !important;
    border: 1px solid #d6cebf !important;
    color: #292524 !important;
}
html.light-mode .sofa-icon-circle-btn:hover {
    background-color: #dfd7c6 !important;
}
html.light-mode .sofa-user-name,
html.light-mode .ap-user-name-text:not(.has-custom-name-color),
html.light-mode span.ap-user-name-text:not(.has-custom-name-color) {
    color: #1c1917 !important;
}

/* Keyframes for animated name gradients in Light Mode */
@keyframes nameGradientWave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes nameShimmerGlint {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes nameHueShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes nameGlitchCut {
    0%, 86%, 100% { transform: translate(0, 0) skewX(0deg); filter: brightness(1); }
    88% { transform: translate(-1.5px, 0.5px) skewX(-4deg); filter: brightness(1.35) contrast(1.2); }
    92% { transform: translate(1.5px, -0.5px) skewX(4deg); filter: brightness(1.45) contrast(1.25); }
    96% { transform: translate(0, 0) skewX(0deg); filter: brightness(1); }
}
@keyframes nameFlameFlicker {
    0%, 100% { background-position: 0% 50%; filter: brightness(1); }
    25% { background-position: 30% 50%; filter: brightness(1.25) contrast(1.15); }
    50% { background-position: 70% 50%; filter: brightness(1.1); }
    75% { background-position: 100% 50%; filter: brightness(1.35) contrast(1.2); }
}
@keyframes nameLightningFlash {
    0%, 82%, 100% { background-position: 0% 50%; filter: brightness(1); }
    85% { background-position: 50% 50%; filter: brightness(1.6) contrast(1.3); }
    88% { background-position: 20% 50%; filter: brightness(1.1); }
    91% { background-position: 100% 50%; filter: brightness(1.8) contrast(1.4); }
    95% { background-position: 100% 50%; filter: brightness(1.15); }
}
@keyframes nameDivineGlow {
    0%, 100% { filter: brightness(1) contrast(1.05); }
    50% { filter: brightness(1.35) contrast(1.2); }
}
@keyframes nameFrostSparkle {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3) contrast(1.15); }
}
@keyframes nameNeonPulse {
    0%, 100% { filter: brightness(1) contrast(1.05); }
    50% { filter: brightness(1.35) contrast(1.2); }
}
@keyframes nameVoidPulse {
    0%, 100% { filter: brightness(1) contrast(1.05); }
    50% { filter: brightness(1.35) contrast(1.2); }
}
@keyframes nameMatrixPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35) contrast(1.2); }
}

/* Light mode custom equipped name colors contrast boost (clean & crisp, no muddy blur) */
html.light-mode .has-custom-name-color:not(.ap-nc-color_default),
html.light-mode .ap-user-name-text.has-custom-name-color:not(.ap-nc-color_default),
html.light-mode .ap-dropdown-user-name.has-custom-name-color:not(.ap-nc-color_default),
html.light-mode .mm-user-name-text.has-custom-name-color:not(.ap-nc-color_default),
html.light-mode .sidebar-username.has-custom-name-color:not(.ap-nc-color_default),
html.light-mode .avatar-label.has-custom-name-color:not(.ap-nc-color_default),
html.light-mode .shop-name-text-render:not(.ap-nc-color_default) {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) !important;
    font-weight: 850 !important;
}

/* Light mode default white name becomes solid dark charcoal */
html.light-mode .ap-nc-color_default,
html.light-mode .ap-user-name-text.ap-nc-color_default,
html.light-mode .ap-dropdown-user-name.ap-nc-color_default,
html.light-mode .mm-user-name-text.ap-nc-color_default,
html.light-mode .sidebar-username.ap-nc-color_default,
html.light-mode .avatar-label.ap-nc-color_default,
html.light-mode .shop-name-text-render.ap-nc-color_default {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #1c1917 !important;
    color: #1c1917 !important;
    animation: none !important;
    filter: none !important;
    font-weight: 800 !important;
}

/* Light mode default avatar badge (clean, unadorned circular avatar) */
html.light-mode .ap-avatar-no-frame {
    border: 2px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Light mode default banner (clean neutral slate-to-gray) */
html.light-mode .ap-banner-banner_default,
html.light-mode .sidebar-cover.ap-banner-banner_default,
html.light-mode .avatar-panel-cover.ap-banner-banner_default {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Shop card text safety for light mode */
html.light-mode .shop-item-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
}
html.light-mode .shop-item-name {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 2px !important;
}

/* Light mode vibrant luminous gradients with active animations for all 24 equipped name colors */
/* Phổ thông (5) */
html.light-mode .ap-nc-color_gold { background-image: linear-gradient(90deg, #b45309, #d97706, #f59e0b, #fef08a, #f59e0b, #d97706, #b45309) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameShimmerGlint 3s linear infinite !important; }
html.light-mode .ap-nc-color_silver { background-image: linear-gradient(90deg, #475569, #64748b, #94a3b8, #cbd5e1, #94a3b8, #64748b, #475569) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameShimmerGlint 2.8s linear infinite !important; }
html.light-mode .ap-nc-color_cyan { background-image: linear-gradient(90deg, #0284c7, #0ea5e9, #38bdf8, #67e8f9, #38bdf8, #0ea5e9, #0284c7) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2.2s linear infinite !important; }
html.light-mode .ap-nc-color_pink { background-image: linear-gradient(90deg, #be185d, #db2777, #ec4899, #f472b6, #ec4899, #db2777, #be185d) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2s linear infinite, nameNeonPulse 2.5s ease-in-out infinite !important; }
/* Hiếm (7) */
html.light-mode .ap-nc-color_purple { background-image: linear-gradient(90deg, #6b21a8, #7e22ce, #a855f7, #c084fc, #a855f7, #7e22ce, #6b21a8) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2.4s linear infinite !important; }
html.light-mode .ap-nc-color_fire { background-image: linear-gradient(90deg, #b91c1c, #dc2626, #ea580c, #f97316, #ea580c, #dc2626, #b91c1c) !important; background-size: 250% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameFlameFlicker 2s ease-in-out infinite !important; }
html.light-mode .ap-nc-color_amber { background-image: linear-gradient(90deg, #b45309, #d97706, #f59e0b, #fbbf24, #f59e0b, #d97706, #b45309) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameShimmerGlint 2.5s linear infinite !important; }
html.light-mode .ap-nc-color_ocean { background-image: linear-gradient(90deg, #1d4ed8, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb, #1d4ed8) !important; background-size: 250% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2.5s linear infinite !important; }
html.light-mode .ap-nc-color_sakura { background-image: linear-gradient(90deg, #9d174d, #be185d, #ec4899, #f472b6, #ec4899, #be185d, #9d174d) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2.2s linear infinite !important; }
html.light-mode .ap-nc-color_frost { background-image: linear-gradient(90deg, #0369a1, #0284c7, #38bdf8, #bae6fd, #38bdf8, #0284c7, #0369a1) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2.2s linear infinite, nameFrostSparkle 3s ease-in-out infinite !important; }
html.light-mode .ap-nc-color_lime { background-image: linear-gradient(90deg, #4d7c0f, #65a30d, #84cc16, #a3e635, #84cc16, #65a30d, #4d7c0f) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2.1s linear infinite !important; }
/* Sử Thi (7) */
html.light-mode .ap-nc-color_emerald { background-image: linear-gradient(90deg, #047857, #059669, #10b981, #34d399, #10b981, #059669, #047857) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2s linear infinite !important; }
html.light-mode .ap-nc-color_aurora { background-image: linear-gradient(90deg, #dc2626, #ea580c, #e11d48, #f43f5e, #e11d48, #ea580c, #dc2626) !important; background-size: 250% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 1.6s linear infinite !important; }
html.light-mode .ap-nc-color_thunder { background-image: linear-gradient(90deg, #0284c7, #38bdf8, #eab308, #facc15, #38bdf8, #0284c7) !important; background-size: 250% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameLightningFlash 2.5s infinite !important; }
html.light-mode .ap-nc-color_dark_magic { background-image: linear-gradient(90deg, #4c1d95, #6d28d9, #8b5cf6, #c084fc, #8b5cf6, #6d28d9, #4c1d95) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameVoidPulse 3s ease-in-out infinite !important; }
html.light-mode .ap-nc-color_mythic_plat { background-image: linear-gradient(90deg, #334155, #475569, #94a3b8, #cbd5e1, #94a3b8, #475569, #334155) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2s linear infinite, nameGlitchCut 3.5s infinite !important; }
html.light-mode .ap-nc-color_ruby { background-image: linear-gradient(90deg, #881337, #be123c, #e11d48, #fb7185, #e11d48, #be123c, #881337) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameShimmerGlint 2.4s linear infinite !important; }
html.light-mode .ap-nc-color_gradient_sunset { background-image: linear-gradient(90deg, #d97706, #dc2626, #ec4899, #8b5cf6, #ec4899, #dc2626, #d97706) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 2s linear infinite !important; }
/* Huyền Thoại (5) */
html.light-mode .ap-nc-color_rainbow { background-image: linear-gradient(90deg, #dc2626, #d97706, #16a34a, #0284c7, #2563eb, #7c3aed, #db2777, #dc2626) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 1.8s linear infinite, nameHueShift 6s linear infinite !important; }
html.light-mode .ap-nc-color_galaxy_shift { background-image: linear-gradient(90deg, #7c3aed, #0284c7, #db2777, #f43f5e, #6366f1, #7c3aed) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 1.5s linear infinite !important; }
html.light-mode .ap-nc-color_matrix { background-image: linear-gradient(90deg, #15803d, #22c55e, #4ade80, #86efac, #4ade80, #22c55e, #15803d) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameGradientWave 1.4s linear infinite, nameMatrixPulse 2.2s ease-in-out infinite !important; }
html.light-mode .ap-nc-color_emperor { background-image: linear-gradient(90deg, #78350f, #b45309, #f59e0b, #fde047, #f59e0b, #b45309, #78350f) !important; background-size: 250% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameShimmerGlint 2s linear infinite, nameDivineGlow 2.5s ease-in-out infinite !important; }
html.light-mode .ap-nc-color_divine_light { background-image: linear-gradient(90deg, #b45309, #d97706, #f59e0b, #fef08a, #f59e0b, #d97706, #b45309) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: nameShimmerGlint 1.8s linear infinite, nameDivineGlow 2.2s ease-in-out infinite !important; }
html.light-mode .ap-user-chevron-icon {
    color: #78716c !important;
    fill: none !important;
    stroke: currentColor !important;
}
html.light-mode .ap-user-bar-trigger:hover .ap-user-chevron-icon,
html.light-mode .nav-profile-dropdown.is-open .ap-user-chevron-icon {
    color: #d97706 !important;
}
html.light-mode .ap-user-dropdown-menu {
    background: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 20px 60px rgba(78, 64, 45, 0.2) !important;
}
html.light-mode .ap-user-dropdown-menu span,
html.light-mode .ap-user-dropdown-menu a span {
    color: #1c1917 !important;
}
html.light-mode .ap-user-dropdown-menu a {
    background: #eae3d5 !important;
    border-color: #d6cebf !important;
}
html.light-mode .ap-user-dropdown-menu a:hover {
    background: #dfd7c6 !important;
}

/* ==========================================================================
   2. SECTION HEADERS & "XEM TẤT CẢ >" BUTTONS OVERRIDES
   ========================================================================== */
html.light-mode .section-header-title,
html.light-mode .motchill-section-title {
    color: #1c1917 !important;
    text-shadow: none !important;
}
html.light-mode .section-header-title span.highlight,
html.light-mode .motchill-section-title span.highlight {
    color: #d97706 !important;
}

/* Filter & Listing Page Titles in Light Mode (Phim Hành Động, Phim Bộ, Thể Loại Phim) */
html.light-mode #pageTitle,
html.light-mode h1#pageTitle,
html.light-mode h1[style*="fcd576"],
html.light-mode h1.text-\[\#fcd576\] {
    color: #b45309 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* "Xem tất cả >" Pill Buttons & Section Links (Excluding Header Links & Footer) */
html.light-mode .section-header-link,
html.light-mode .see-all-btn,
html.light-mode .view-all-btn,
html.light-mode .btn-see-all,
html.light-mode .motchill-see-all,
html.light-mode .danh-sach-btn,
html.light-mode main .section-header a[href*="/danh-sach"] {
    background: #e8e0d0 !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebf !important;
}
html.light-mode .section-header-link:hover,
html.light-mode .see-all-btn:hover,
html.light-mode .view-all-btn:hover,
html.light-mode .btn-see-all:hover,
html.light-mode .motchill-see-all:hover,
html.light-mode .danh-sach-btn:hover,
html.light-mode main .section-header a[href*="/danh-sach"]:hover {
    background: #d9d0bc !important;
    color: #000000 !important;
    border-color: #b8ad99 !important;
}

/* Section Header Filter Tabs */
html.light-mode .section-header-tab.inactive {
    background: #e8e0d0 !important;
    color: #44403c !important;
    border: 1px solid #d6cebf !important;
}
html.light-mode .section-header-tab.inactive:hover {
    background: #dfd7c6 !important;
    color: #1c1917 !important;
}
html.light-mode .section-header-tab.active {
    background: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

/* Movie Poster Photo Overlay Titles (Titles inside landscape photo overlays on Home Page) */
html.light-mode .card-bottom-overlay .card-title-vi,
html.light-mode .landscape-poster-wrap .card-title-vi,
html.light-mode .phimmoi-title-vi {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85) !important;
    font-weight: 700 !important;
}

html.light-mode .card-bottom-overlay .card-title-en,
html.light-mode .landscape-poster-wrap .card-title-en,
html.light-mode .phimmoi-title-en {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Movie Titles & Subtitles Sitting BELOW Poster Photos on Cream Page Background (Filter Pages, De Cu, Grids) */
html.light-mode .grid-title-vi,
html.light-mode .grid-title-wrap .grid-title-vi,
html.light-mode .de-cu-card .de-cu-title-vi,
html.light-mode .de-cu-title-wrap .de-cu-title-vi,
html.light-mode .de-cu-title-vi,
html.light-mode .motchill-title-vi,
html.light-mode .motchill-movie-card .motchill-title-vi {
    color: #1c1917 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

html.light-mode .grid-title-en,
html.light-mode .grid-title-wrap .grid-title-en,
html.light-mode .de-cu-card .de-cu-title-en,
html.light-mode .de-cu-title-wrap .de-cu-title-en,
html.light-mode .de-cu-title-en,
html.light-mode .motchill-title-en,
html.light-mode .motchill-movie-card .motchill-title-en {
    color: #78716c !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

html.light-mode .card-bottom-overlay,
html.light-mode .phimmoi-card-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.88) 100%) !important;
}

/* Movie Cards Base Background & Border (Transparent card container directly on page background) */
html.light-mode .normal-card-item,
html.light-mode .featured-card-item,
html.light-mode .de-cu-card,
html.light-mode .grid-movie-card,
html.light-mode .grid-poster-wrap,
html.light-mode .motchill-movie-card,
html.light-mode .motchill-poster-wrap,
html.light-mode .motchill-feature-card,
html.light-mode .movie-card,
html.light-mode .movie-card-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html.light-mode .normal-card-item:hover,
html.light-mode .featured-card-item:hover,
html.light-mode .de-cu-card:hover,
html.light-mode .grid-movie-card:hover,
html.light-mode .motchill-movie-card:hover,
html.light-mode .motchill-feature-card:hover,
html.light-mode .movie-card:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html.light-mode .grid-movie-card img,
html.light-mode .grid-poster-wrap img,
html.light-mode .motchill-movie-card img,
html.light-mode .motchill-poster-wrap img,
html.light-mode .landscape-poster-wrap img,
html.light-mode .de-cu-poster-wrap img,
html.light-mode .normal-card-item img,
html.light-mode .featured-card-item img,
html.light-mode .de-cu-card img {
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.08) !important;
    border-radius: 10px !important;
}
html.light-mode .normal-card-item:hover,
html.light-mode .featured-card-item:hover,
html.light-mode .de-cu-card:hover,
html.light-mode .grid-movie-card:hover,
html.light-mode .motchill-movie-card:hover,
html.light-mode .motchill-feature-card:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   3. PROFILE & DASHBOARD PAGE OVERRIDES (/profile)
   ========================================================================== */
html.light-mode .profile-page-bg {
    background: #f5f0e6 !important;
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(217, 119, 6, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 90% 70%, rgba(180, 83, 9, 0.05) 0%, transparent 50%) !important;
    color: #1c1917 !important;
}

html.light-mode .profile-sidebar .sidebar-card,
html.light-mode .sidebar-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 10px 30px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode .sidebar-cover:not(.has-custom-banner):not([style*="background"]) {
    background: linear-gradient(135deg, #fdfbf7 0%, #f3eee3 45%, #d6cebf 100%) !important;
}

html.light-mode .sidebar-avatar {
    border-color: #ffffff !important;
}

html.light-mode .sidebar-username:not([class*="ap-nc-"]):not([style*="background"]) {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #1c1917 !important;
    color: #1c1917 !important;
}

html.light-mode .sidebar-email {
    color: #78716c !important;
}

html.light-mode .sidebar-level-box,
html.light-mode .sidebar-stats {
    background: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
}

html.light-mode .stat-value {
    color: #d97706 !important;
}
html.light-mode .stat-label {
    color: #78716c !important;
}


html.light-mode .sidebar-logout {
    background: #fee2e2 !important;
    border: none !important;
    box-shadow: none !important;
    color: #dc2626 !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
}
html.light-mode .sidebar-logout:hover {
    background: #fca5a5 !important;
    color: #991b1b !important;
    border: none !important;
    box-shadow: none !important;
}

/* Profile Main Content Panel Cards */
html.light-mode .content-header {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 20px rgba(78, 64, 45, 0.05) !important;
}
html.light-mode .content-header-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html.light-mode .content-header-sub {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.light-mode .panel-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 10px 30px rgba(78, 64, 45, 0.06) !important;
    color: #1c1917 !important;
}

/* Inputs, Textareas, Selects & Labels in Profile & Forms */
html.light-mode input.form-control,
html.light-mode textarea.form-control,
html.light-mode select.form-control,
html.light-mode .form-input,
html.light-mode input[type="text"]:not(.sofa-desktop-search-input):not(.sofa-mobile-search-input-field):not(#notifSearchInput),
html.light-mode input[type="email"],
html.light-mode input[type="password"],
html.light-mode input[type="number"] {
    background-color: #ffffff !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebf !important;
}
html.light-mode input:not(#notifSearchInput):not(.sofa-desktop-search-input):not(.sofa-mobile-search-input-field):not(.sofa-desktop-search-form input):focus,
html.light-mode textarea:focus,
html.light-mode select:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}
html.light-mode .form-label,
html.light-mode label {
    color: #44403c !important;
    font-weight: 700 !important;
}

/* Device Table & Cards in Profile & Watch Page */
html.light-mode .device-card,
html.light-mode .device-item,
html.light-mode #main-movie-info-card,
html.light-mode .wallet-card,
html.light-mode .bg-[#151722],
html.light-mode .bg-[#1a1c24],
html.light-mode .bg-[#202332] {
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 20px rgba(78, 64, 45, 0.06) !important;
}

/* General Typography & Utility Colors in Light Mode */
html.light-mode h1, 
html.light-mode h2, 
html.light-mode h3, 
html.light-mode h4, 
html.light-mode h5, 
html.light-mode h6 {
    color: #1c1917 !important;
}

html.light-mode .text-gray-400,
html.light-mode .text-gray-300,
html.light-mode .text-gray-200,
html.light-mode .text-slate-400,
html.light-mode .text-slate-300 {
    color: #57534e !important;
}

html.light-mode .text-white {
    color: #1c1917 !important;
}

/* Page Input Pagination */
html.light-mode .page-input-dark,
html.light-mode input#pageInput {
    background-color: #ffffff !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebf !important;
}

/* ==========================================================================
   4. MOVIE DETAIL & WATCH PAGE OVERRIDES (/phim & /xem-phim)
   ========================================================================== */

/* Movie Detail Page (/phim) - Clean Light Mode Theme */
html.light-mode main.movie-content-zone {
    background: transparent !important;
    background-color: transparent !important;
}

html.light-mode .movie-content-zone::before {
    display: none !important;
}

html.light-mode .cinematic-gold-title {
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    text-shadow: none !important;
}

html.light-mode .cinematic-sub-title {
    color: #d97706 !important;
    -webkit-text-fill-color: #d97706 !important;
    text-shadow: none !important;
}

html.light-mode .movie-detail-card,
html.light-mode .movie-actions-container {
    color: #1c1917 !important;
}

/* Movie Action Buttons & Icons in Light Mode */
html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn),
html.light-mode .movie-actions-container a:not(#watchNowBtn) {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn) svg,
html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn) svg path,
html.light-mode .movie-actions-container a:not(#watchNowBtn) svg,
html.light-mode .movie-actions-container a:not(#watchNowBtn) svg path {
    fill: #1c1917 !important;
    color: #1c1917 !important;
}

html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn) span,
html.light-mode .movie-actions-container a:not(#watchNowBtn) span {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn):hover,
html.light-mode .movie-actions-container a:not(#watchNowBtn):hover {
    background-color: #fef8ee !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn):hover svg,
html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn):hover svg path,
html.light-mode .movie-actions-container button:not(#watchNowBtn):not(#headerRatingBtn):hover span,
html.light-mode .movie-actions-container a:not(#watchNowBtn):hover span {
    fill: #d97706 !important;
    color: #d97706 !important;
}

/* Active Favorite Button in Light Mode */
html.light-mode #favoriteMovieBtn.is-favorite-active,
html.light-mode #favoriteMovieBtn.is-favorite-active span {
    color: #ef4444 !important;
}
html.light-mode #favoriteMovieBtn.is-favorite-active svg,
html.light-mode #favoriteMovieBtn.is-favorite-active svg path {
    fill: #ef4444 !important;
    color: #ef4444 !important;
}

/* Episode Search Input & Sort Buttons */
html.light-mode #search-episode-input-desktop,
html.light-mode #search-episode-input-mobile,
html.light-mode #episode-search-container input,
html.light-mode input[id*="search-episode"] {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode #search-episode-input-desktop::placeholder,
html.light-mode #search-episode-input-mobile::placeholder,
html.light-mode #episode-search-container input::placeholder {
    color: #78716c !important;
}

html.light-mode #sort-episodes-btn-desktop,
html.light-mode #sort-episodes-btn-mobile,
html.light-mode #episode-search-container button {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.05) !important;
}

/* High-Contrast Episode Buttons (Desktop, Mobile, Watch Page) */
html.light-mode #episodes-desktop a,
html.light-mode #episodes-mobile a,
html.light-mode #episode-list a,
html.light-mode #episode-list button,
html.light-mode .ep-btn,
html.light-mode a.server-episode-item {
    background-color: #ffffff !important;
    color: #1c1917 !important;
    border: 1.5px solid #d6cebf !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(78, 64, 45, 0.06) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* Episode Button Icons (Crisp Black on Light Mode) */
html.light-mode #episodes-desktop a svg,
html.light-mode #episodes-mobile a svg,
html.light-mode #episode-list a svg,
html.light-mode #episode-list button svg,
html.light-mode .ep-btn svg,
html.light-mode a.server-episode-item svg,
html.light-mode .ep-grid-btn svg {
    fill: #1c1917 !important;
    color: #1c1917 !important;
}

html.light-mode #episodes-desktop a svg path,
html.light-mode #episodes-mobile a svg path,
html.light-mode #episode-list a svg path,
html.light-mode #episode-list button svg path,
html.light-mode .ep-btn svg path,
html.light-mode a.server-episode-item svg path,
html.light-mode .ep-grid-btn svg path {
    fill: #1c1917 !important;
    color: #1c1917 !important;
}

/* Episode Button Hover Icons */
html.light-mode #episodes-desktop a:hover svg,
html.light-mode #episodes-mobile a:hover svg,
html.light-mode #episode-list a:hover svg,
html.light-mode #episode-list button:hover svg,
html.light-mode .ep-btn:hover svg,
html.light-mode a.server-episode-item:hover svg,
html.light-mode #episodes-desktop a:hover svg path,
html.light-mode #episodes-mobile a:hover svg path,
html.light-mode #episode-list a:hover svg path,
html.light-mode #episode-list button:hover svg path,
html.light-mode .ep-btn:hover svg path,
html.light-mode a.server-episode-item:hover svg path {
    fill: #d97706 !important;
    color: #d97706 !important;
}

/* Episode Button Hover */
html.light-mode #episodes-desktop a:hover,
html.light-mode #episodes-mobile a:hover,
html.light-mode #episode-list a:hover,
html.light-mode #episode-list button:hover,
html.light-mode .ep-btn:hover,
html.light-mode a.server-episode-item:hover {
    background-color: #fef8ee !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15) !important;
}

/* Active Episode Button */
html.light-mode #episodes-desktop a.active,
html.light-mode #episodes-mobile a.active,
html.light-mode #episode-list a.active,
html.light-mode #episode-list button.active,
html.light-mode .ep-btn.active,
html.light-mode a.server-episode-item.active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important;
}

html.light-mode #episodes-desktop a.active svg,
html.light-mode #episodes-mobile a.active svg,
html.light-mode #episode-list a.active svg,
html.light-mode #episode-list button.active svg,
html.light-mode .ep-btn.active svg,
html.light-mode a.server-episode-item.active svg,
html.light-mode #episodes-desktop a.active svg path,
html.light-mode #episodes-mobile a.active svg path,
html.light-mode #episode-list a.active svg path,
html.light-mode #episode-list button.active svg path,
html.light-mode .ep-btn.active svg path,
html.light-mode a.server-episode-item.active svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Server Selection Buttons (Vietsub, Lồng Tiếng, Nguồn 1, Nguồn 2) */
html.light-mode #server-list-desktop button,
html.light-mode #server-list-mobile button,
html.light-mode #server-list button {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(78, 64, 45, 0.05) !important;
}
html.light-mode #server-list-desktop button:hover,
html.light-mode #server-list-mobile button:hover,
html.light-mode #server-list button:hover {
    background-color: #fef8ee !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

/* ==========================================================================
   5. FOOTER OVERRIDES
   ========================================================================== */
/* ==========================================================================
   5. TOP WEEKLY SIDEBAR & MOVIE META DETAIL CARDS
   ========================================================================== */

/* Breadcrumb Links Fix for Light Mode */
html.light-mode .movie-content-zone div[class*="whitespace-nowrap"] a,
html.light-mode .movie-content-zone div[class*="whitespace-nowrap"] span,
html.light-mode .movie-content-zone #breadcrumb-category,
html.light-mode .movie-content-zone #breadcrumb-movie-name {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #1c1917 !important;
    fill: #1c1917 !important;
    stroke: #1c1917 !important;
    text-shadow: none !important;
}

html.light-mode .movie-content-zone div[class*="whitespace-nowrap"] a {
    color: #78716c !important;
}

html.light-mode .movie-content-zone div[class*="whitespace-nowrap"] a:hover {
    color: #d97706 !important;
}

/* Watch Page Breadcrumb Fix - Dark Black Text on Cream Background (Match Image 1) */
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar,
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar a,
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar span,
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar svg,
html.light-mode main:not(.movie-content-zone) #breadcrumb-category,
html.light-mode main:not(.movie-content-zone) #breadcrumb-movie-name {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #1c1917 !important;
    fill: #1c1917 !important;
    stroke: #1c1917 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Let the banner color softly flow into the light-mode breadcrumb row. */
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar {
    position: relative;
    isolation: isolate;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
}

/* Keep the light watch page background even; the accent belongs to the breadcrumb only. */
html.light-mode main.watch-main-container {
    background: transparent !important;
    background-image: none !important;
}
html.light-mode main.watch-main-container::before {
    display: none !important;
}
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar::before {
    display: none;
}
html.light-mode main:not(.movie-content-zone) #watchBreadcrumbEpName {
    color: #d97706 !important;
    font-weight: 800 !important;
}
html.light-mode main:not(.movie-content-zone) .watch-breadcrumb-bar a:hover,
html.light-mode main:not(.movie-content-zone) #breadcrumb-category:hover {
    color: #d97706 !important;
}

/* Watch Page Dismissible Warning Notice Banner */
html.light-mode #dismissibleNotice {
    background: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    color: #44403c !important;
    box-shadow: 0 2px 10px rgba(78, 64, 45, 0.05) !important;
}
html.light-mode #dismissibleNotice span {
    color: #44403c !important;
}
html.light-mode #dismissibleNotice span.material-icons-round:not(.notice-close-btn span) {
    color: #d97706 !important;
}
html.light-mode #dismissibleNotice span.text-white,
html.light-mode #dismissibleNotice .notice-btn-highlight {
    color: #d97706 !important;
    font-weight: 700 !important;
}
html.light-mode #dismissibleNotice button,
html.light-mode #dismissibleNotice .notice-close-btn,
html.light-mode #dismissibleNotice .notice-close-btn span,
html.light-mode #dismissibleNotice button span {
    color: #57534e !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html.light-mode #dismissibleNotice button:hover,
html.light-mode #dismissibleNotice .notice-close-btn:hover,
html.light-mode #dismissibleNotice .notice-close-btn:hover span,
html.light-mode #dismissibleNotice button:hover span {
    color: #1c1917 !important;
    background: rgba(78, 64, 45, 0.08) !important;
    border-radius: 4px !important;
}

/* Watch Page SVAP Version Container & Notice Banner in Light Mode */
html.light-mode #watch-versions-container .svap-notice-banner,
html.light-mode #watch-versions-container div[class*="bg-white"],
html.light-mode .svap-notice-banner {
    background-color: #faf7f2 !important;
    background: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    color: #44403c !important;
    box-shadow: 0 2px 10px rgba(78, 64, 45, 0.05) !important;
    border-radius: 10px !important;
}

html.light-mode #watch-versions-container .svap-notice-banner span,
html.light-mode #watch-versions-container div[class*="bg-white"] span:not(.material-icons-round),
html.light-mode .svap-notice-banner span:not(.material-icons-round) {
    color: #44403c !important;
    font-weight: 500 !important;
}

html.light-mode #watch-versions-container .svap-notice-banner .material-icons-round,
html.light-mode #watch-versions-container div[class*="bg-white"] .material-icons-round,
html.light-mode .svap-notice-banner .material-icons-round {
    color: #d97706 !important;
}

/* Watch Page Server Tabs & Episode List Buttons in Light Mode (Matching User Image) */
html.light-mode .server-group-label,
html.light-mode .server-group-label span {
    color: #1c1917 !important;
}
html.light-mode .server-group-label span[style*="background"] {
    background: #e7e0d3 !important;
    color: #44403c !important;
}

/* Active Server Tab Button (Vibrant Amber/Orange Fill) */
html.light-mode .server-tab-btn.active,
html.light-mode button.server-tab-btn.active {
    background: linear-gradient(135deg, #ea580c 0%, #d97706 100%) !important;
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
    transform: scale(1.02) !important;
}

html.light-mode .server-tab-btn.active .server-tab-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html.light-mode .server-tab-btn.active .server-tab-badge {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 9999px !important;
    padding: 2px 8px !important;
}

html.light-mode .server-tab-btn.active .server-tab-dot {
    background: #fef08a !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    border: none !important;
}

html.light-mode .server-tab-btn.active .server-tab-count,
html.light-mode .server-tab-btn.active span {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Inactive Server Tab Button (Clean White Card + Warm Beige Border + Cream Badge) */
html.light-mode .server-tab-btn:not(.active),
html.light-mode button.server-tab-btn:not(.active) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1c1917 !important;
    border: 1px solid #dcd4c5 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode .server-tab-btn:not(.active):hover {
    background: #faf5ed !important;
    border-color: #d97706 !important;
}

html.light-mode .server-tab-btn:not(.active) .server-tab-title {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .server-tab-btn:not(.active) .server-tab-badge {
    background: #f3ebd9 !important;
    color: #1c1917 !important;
    border: 1px solid #e5dccb !important;
    border-radius: 9999px !important;
    padding: 2px 8px !important;
}

html.light-mode .server-tab-btn:not(.active) .server-tab-dot {
    background: transparent !important;
    border: 1.5px solid #78716c !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
}

html.light-mode .server-tab-btn:not(.active) .server-tab-count {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

/* Episode List Grid Buttons in Light Mode */
html.light-mode #episode-list button:not(.active) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(78, 64, 45, 0.04) !important;
}

html.light-mode #episode-list button:not(.active):hover {
    background: #faf5ed !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

html.light-mode #episode-list button.active {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    background-color: #fcd576 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
}

/* Episode Search Input & Sort Button in Light Mode */
html.light-mode #search-episode-input {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
}

html.light-mode #search-episode-input::placeholder {
    color: #78716c !important;
}

html.light-mode #sort-episodes-btn {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #292524 !important;
}

html.light-mode #sort-episodes-btn:hover {
    background: #faf5ed !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

/* Universal Pagination Container & Input Box in Light Mode (Matching Warm Sand Theme) */
html.light-mode #paginationWrap {
    color: #1c1917 !important;
}

/* Outer Pill Capsule Container */
html.light-mode #paginationWrap > div,
html.light-mode #paginationWrap div[class*="rounded-full"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #dcd4c5 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.06) !important;
}

/* Page Input Box [ 1 ] - Fixed Off-Tone Dark Background */
html.light-mode #pageInput,
html.light-mode input#pageInput,
html.light-mode input.page-input-dark {
    background: #faf5ed !important;
    background-color: #faf5ed !important;
    color: #1c1917 !important;
    border: 1px solid #dcd4c5 !important;
    font-weight: 800 !important;
    box-shadow: inset 0 1px 2px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode #pageInput:focus,
html.light-mode input#pageInput:focus {
    background: #ffffff !important;
    border-color: #d97706 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important;
}

/* Circular Navigation Arrow Buttons (< >) */
html.light-mode #prevPageBtn,
html.light-mode #nextPageBtn,
html.light-mode #topPrevPageBtn,
html.light-mode #topNextPageBtn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #dcd4c5 !important;
    color: #1c1917 !important;
    box-shadow: 0 2px 6px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode #prevPageBtn:hover:not(:disabled),
html.light-mode #nextPageBtn:hover:not(:disabled),
html.light-mode #topPrevPageBtn:hover:not(:disabled),
html.light-mode #topNextPageBtn:hover:not(:disabled) {
    background: #faf5ed !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

html.light-mode #prevPageBtn svg,
html.light-mode #nextPageBtn svg,
html.light-mode #topPrevPageBtn svg,
html.light-mode #topNextPageBtn svg {
    color: #1c1917 !important;
    stroke: #1c1917 !important;
}

html.light-mode #prevPageBtn:hover:not(:disabled) svg,
html.light-mode #nextPageBtn:hover:not(:disabled) svg,
html.light-mode #topPrevPageBtn:hover:not(:disabled) svg,
html.light-mode #topNextPageBtn:hover:not(:disabled) svg {
    color: #d97706 !important;
    stroke: #d97706 !important;
}

/* Text labels "Trang", "/", "1249" */
html.light-mode #paginationWrap span,
html.light-mode #topQuickPageWrap,
html.light-mode #topQuickPageWrap span {
    color: #1c1917 !important;
}
html.light-mode #topCurrentPage,
html.light-mode #topTotalPages,
html.light-mode #totalPagesText {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

/* Watch Page Movie Info Sidebar Card Fix (Match Image 2) */
html.light-mode #main-movie-info-card,
html.light-mode .movie-info-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 20px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode #sidebar-movie-title,
html.light-mode h2#sidebar-movie-title {
    color: #1c1917 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

html.light-mode #sidebar-origin-title,
html.light-mode h3#sidebar-origin-title {
    color: #57534e !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

html.light-mode #sidebar-description-text,
html.light-mode p#sidebar-description-text {
    color: #44403c !important;
    text-shadow: none !important;
}

html.light-mode #sidebar-genres-row span {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode #sidebar-info-link,
#sidebar-info-link {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html.light-mode #sidebar-info-link span,
html.light-mode #sidebar-info-link svg {
    color: #d97706 !important;
    stroke: #d97706 !important;
    fill: none !important;
    font-weight: 800 !important;
}

html.light-mode #sidebar-cast-section h3 {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode #sidebar-cast span,
html.light-mode .cast-name {
    color: #44403c !important;
}

html.light-mode #sidebarFavoriteMovieBtn,
html.light-mode #sidebarSaveMovieBtn {
    background-color: #f5f0e6 !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
}

/* Watch Page Player Control Bar Below Video (Match Image 3) */
html.light-mode .player-ctrl-bar,
.player-ctrl-bar {
    background: #090a0f !important;
    background-color: #090a0f !important;
    color: #ffffff !important;
}

html.light-mode .player-ctrl-item,
.player-ctrl-item {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.light-mode .player-ctrl-item span,
.player-ctrl-item span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.light-mode .player-ctrl-item svg,
.player-ctrl-item svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Player Control Bar (Toolbar directly under video player on /xem-phim) - Borderless & Single Row Alignment */
html.light-mode .player-ctrl-bar,
.player-ctrl-bar {
    background: #090a0f !important;
    border: none !important;
    box-shadow: none !important;
}

@media (min-width: 640px) {
    html.light-mode .player-ctrl-bar-container,
    .player-ctrl-bar-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    html.light-mode .player-ctrl-bar-toggles-row,
    .player-ctrl-bar-toggles-row,
    html.light-mode .player-ctrl-bar-actions-row,
    .player-ctrl-bar-actions-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
}

html.light-mode .player-ctrl-bar-actions-row button,
html.light-mode .player-ctrl-bar-actions-row a,
html.light-mode .player-ctrl-bar-actions-row #favoriteMovieBtn,
html.light-mode .player-ctrl-bar-actions-row #saveMovieBtn,
.player-ctrl-bar-actions-row button,
.player-ctrl-bar-actions-row a,
.player-ctrl-bar-actions-row #favoriteMovieBtn,
.player-ctrl-bar-actions-row #saveMovieBtn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
}

html.light-mode .player-ctrl-bar-actions-row button:hover,
html.light-mode .player-ctrl-bar-actions-row a:hover,
.player-ctrl-bar-actions-row button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    box-shadow: none !important;
}

html.light-mode .player-ctrl-bar-actions-row button span,
html.light-mode .player-ctrl-bar-actions-row a span,
.player-ctrl-bar-actions-row button span,
.player-ctrl-bar-actions-row a span {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    line-height: 1 !important;
    display: inline-block !important;
}

html.light-mode .player-ctrl-bar-actions-row button svg,
html.light-mode .player-ctrl-bar-actions-row a svg,
.player-ctrl-bar-actions-row button svg,
.player-ctrl-bar-actions-row a svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Top Weekly Sidebar in Light Mode - Trophy Icon in Black */
html.light-mode .ap-top-weekly-title,
html.light-mode .ap-top-weekly-header h3 {
    color: #1c1917 !important;
}
html.light-mode .ap-top-weekly-title svg,
html.light-mode .ap-top-weekly-header svg,
html.light-mode .ap-top-weekly-trophy-icon,
html.light-mode .ap-top-weekly-title svg path,
html.light-mode .ap-top-weekly-header svg path {
    fill: #1c1917 !important;
    color: #1c1917 !important;
}
html.light-mode .ap-top-weekly-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.05) !important;
}
html.light-mode .ap-top-weekly-card.rank-1 {
    background: linear-gradient(135deg, #fffdf8 0%, #fff8e7 100%) !important;
    border: 1.5px solid #fcd576 !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.15) !important;
}
html.light-mode .ap-top-weekly-card.rank-2 {
    background: linear-gradient(135deg, #f8fcff 0%, #e0f2fe 100%) !important;
    border: 1.5px solid #38bdf8 !important;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15) !important;
}
html.light-mode .ap-top-weekly-card.rank-3 {
    background: linear-gradient(135deg, #fffaf5 0%, #ffedd5 100%) !important;
    border: 1.5px solid #fb923c !important;
    box-shadow: 0 4px 16px rgba(251, 146, 60, 0.15) !important;
}
html.light-mode .ap-top-weekly-name {
    color: #1c1917 !important;
    font-weight: 700 !important;
}
html.light-mode .ap-top-weekly-origin {
    color: #78716c !important;
}
html.light-mode .ap-top-weekly-meta,
html.light-mode .ap-top-weekly-badge,
html.light-mode .ap-top-weekly-ep {
    color: #57534e !important;
}
html.light-mode .ap-top-weekly-rank {
    -webkit-text-stroke: 1.5px #78716c !important;
    text-stroke: 1.5px #78716c !important;
    color: rgba(120, 113, 108, 0.15) !important;
}
html.light-mode .ap-top-weekly-rank.rank-1 {
    -webkit-text-stroke: 1.8px #d97706 !important;
    text-stroke: 1.8px #d97706 !important;
    color: rgba(217, 119, 6, 0.2) !important;
}
html.light-mode .ap-top-weekly-rank.rank-2 {
    -webkit-text-stroke: 1.8px #0284c7 !important;
    text-stroke: 1.8px #0284c7 !important;
    color: rgba(2, 132, 199, 0.2) !important;
}
html.light-mode .ap-top-weekly-rank.rank-3 {
    -webkit-text-stroke: 1.8px #ea580c !important;
    text-stroke: 1.8px #ea580c !important;
    color: rgba(234, 88, 12, 0.2) !important;
}

/* Action Buttons in Movie Detail Hero (Lưu phim, Thêm vào, Chia sẻ, Bình luận - Bold Dark Text #1c1917) */
html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn),
html.light-mode .movie-actions-container a:not(.cinematic-gold-btn):not(#headerRatingBtn),
html.light-mode .movie-actions-container #favoriteMovieBtn,
html.light-mode .movie-actions-container #saveMovieBtn {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn) span,
html.light-mode .movie-actions-container a:not(.cinematic-gold-btn):not(#headerRatingBtn) span,
html.light-mode .movie-actions-container #favoriteMovieBtn span,
html.light-mode .movie-actions-container #saveMovieBtn span {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn) svg,
html.light-mode .movie-actions-container a:not(.cinematic-gold-btn):not(#headerRatingBtn) svg,
html.light-mode .movie-actions-container #favoriteMovieBtn svg,
html.light-mode .movie-actions-container #saveMovieBtn svg {
    fill: #1c1917 !important;
}

html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn):hover,
html.light-mode .movie-actions-container a:not(.cinematic-gold-btn):not(#headerRatingBtn):hover {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: #d97706 !important;
}
html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn):hover span {
    color: #d97706 !important;
}
html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn):hover svg {
    fill: #d97706 !important;
}

/* "XEM NGAY" Gold Button Text & Icon - Rich Amber Gold Gradient & Bold Dark Text (#0d0f1a) */
html.light-mode .cinematic-gold-btn,
html.light-mode #watchNowBtn,
html.light-mode a.cinematic-gold-btn,
html.light-mode button.cinematic-gold-btn {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 48%, #d97706 100%) !important;
    background-color: #f59e0b !important;
    color: #0d0f1a !important;
    -webkit-text-fill-color: #0d0f1a !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 6px 22px rgba(217, 119, 6, 0.45), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .cinematic-gold-btn:hover,
html.light-mode #watchNowBtn:hover,
html.light-mode a.cinematic-gold-btn:hover,
html.light-mode button.cinematic-gold-btn:hover {
    background: linear-gradient(135deg, #ffe08c 0%, #f59e0b 48%, #b45309 100%) !important;
    box-shadow: 0 8px 26px rgba(217, 119, 6, 0.6) !important;
}

html.light-mode .cinematic-gold-btn span,
html.light-mode #watchNowBtn span,
html.light-mode a.cinematic-gold-btn span,
html.light-mode button.cinematic-gold-btn span {
    color: #0d0f1a !important;
    -webkit-text-fill-color: #0d0f1a !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
}

html.light-mode .cinematic-gold-btn svg,
html.light-mode #watchNowBtn svg,
html.light-mode a.cinematic-gold-btn svg,
html.light-mode button.cinematic-gold-btn svg,
html.light-mode #watchNowBtn svg[style*="fill"] {
    fill: #0d0f1a !important;
    color: #0d0f1a !important;
}


/* Movie Meta Info Cards Base Container (Border-Free, Crisp White Card Integration) */
html.light-mode .movie-meta-card,
html.light-mode div[style*="cardStyle"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.06) !important;
    border-radius: 14px !important;
}

/* Card Headers (h4) */
html.light-mode div[style*="cardStyle"] h4,
html.light-mode [class*="meta-card"] h4 {
    color: #1c1917 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* Top Right Count & Status Badges (ONGOING, FULL, TV, RATING, Count numbers) */
html.light-mode div[style*="cardStyle"] span.rounded-full {
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Card 1: Thể loại (Blue theme) */
html.light-mode div[style*="cardStyle"]:nth-child(1) h4 { color: #1d4ed8 !important; }
html.light-mode div[style*="cardStyle"]:nth-child(1) span.rounded-full {
    background-color: #dbeafe !important;
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}
html.light-mode div[style*="cardStyle"]:nth-child(1) a,
html.light-mode div[style*="cardStyle"]:nth-child(1) span[style*="border"] {
    background-color: #eff6ff !important;
    background: #eff6ff !important;
    border: 1.5px solid #93c5fd !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Card 2: Quốc gia (Purple theme) */
html.light-mode div[style*="cardStyle"]:nth-child(2) h4 { color: #7e22ce !important; }
html.light-mode div[style*="cardStyle"]:nth-child(2) span.rounded-full {
    background-color: #f3e8ff !important;
    background: #f3e8ff !important;
    color: #6b21a8 !important;
    border: 1px solid #e9d5ff !important;
}
html.light-mode div[style*="cardStyle"]:nth-child(2) a,
html.light-mode div[style*="cardStyle"]:nth-child(2) span[style*="border"] {
    background-color: #faf5ff !important;
    background: #faf5ff !important;
    border: 1.5px solid #c084fc !important;
    color: #7e22ce !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Card 3: Thông tin (Green theme) */
html.light-mode div[style*="cardStyle"]:nth-child(3) h4 { color: #15803d !important; }
html.light-mode div[style*="cardStyle"]:nth-child(3) span.rounded-full {
    background-color: #dcfce7 !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Card 4: TMDB (Sky Blue theme) */
html.light-mode div[style*="cardStyle"]:nth-child(4) span.rounded-full {
    background-color: #e0f2fe !important;
    background: #e0f2fe !important;
    color: #075985 !important;
    border: 1px solid #bae6fd !important;
}

/* Card 5: IMDb (Amber Gold theme) */
html.light-mode div[style*="cardStyle"]:nth-child(5) span.rounded-full {
    background-color: #fef3c7 !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

/* Card 6: Đạo diễn (Orange theme) */
html.light-mode div[style*="cardStyle"]:nth-child(6) h4 { color: #c2410c !important; }
html.light-mode div[style*="cardStyle"]:nth-child(6) span.rounded-full {
    background-color: #ffedd5 !important;
    background: #ffedd5 !important;
    color: #9a3412 !important;
    border: 1px solid #fed7aa !important;
}
html.light-mode div[style*="cardStyle"]:nth-child(6) span[style*="border"] {
    background-color: #fff7ed !important;
    background: #fff7ed !important;
    border: 1.5px solid #fb923c !important;
    color: #c2410c !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* General Tag Pill Buttons inside Meta Cards */
html.light-mode div[style*="tagsWrapperStyle"] a,
html.light-mode div[style*="tagsWrapperStyle"] span {
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: 0 1px 4px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode div[style*="tagsWrapperStyle"] a:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Info Labels & Highlight Values Fix inside Meta Cards */
html.light-mode div[style*="textInfoWrapperStyle"] {
    color: #57534e !important;
    text-shadow: none !important;
}
html.light-mode div[style*="textInfoWrapperStyle"] div {
    color: #57534e !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}
html.light-mode div[style*="textInfoWrapperStyle"] span {
    text-shadow: none !important;
}
html.light-mode div[style*="textInfoWrapperStyle"] span.text-white {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

/* Episode Status Highlight Text ("Tập 13", "FULL") - Deep Emerald Green (Non-glaring) */
html.light-mode span[style*="color: #4ade80"],
html.light-mode span[style*="color:#4ade80"] {
    color: #15803d !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* TMDB Rating Highlight Text ("8.8") - Deep Oceanic Blue (Non-glaring) */
html.light-mode span[style*="color: #38bdf8"],
html.light-mode span[style*="color:#38bdf8"] {
    color: #0369a1 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* IMDb Rating Highlight Text ("N/A", "8.5") - Deep Amber Gold (Legible, Non-glaring) */
html.light-mode span[style*="color: #fde047"],
html.light-mode span[style*="color:#fde047"] {
    color: #b45309 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html.light-mode .text-gray-400,
html.light-mode .text-gray-500,
html.light-mode .text-slate-400,
html.light-mode .text-slate-500 {
    color: #57534e !important;
}

/* ==========================================================================
   6. MOVIE DETAIL TABS, SERVER LABEL & COMMENTS/RATING SECTION
   ========================================================================== */

/* Movie Detail Main Navigation Tabs (Tập phim, Gallery, OST, Diễn viên, Đề xuất) - 100% Crisp White over Hero Backdrop */
html.light-mode .ap-movie-tab-system .ap-tab-btn,
html.light-mode #tab-btn-episodes,
html.light-mode #tab-btn-gallery,
html.light-mode #tab-btn-ost,
html.light-mode #tab-btn-cast,
html.light-mode #tab-btn-recommend {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    padding: 8px 4px !important;
    box-shadow: none !important;
}

html.light-mode .ap-movie-tab-system .ap-tab-btn:hover,
html.light-mode #tab-btn-episodes:hover,
html.light-mode #tab-btn-gallery:hover,
html.light-mode #tab-btn-ost:hover,
html.light-mode #tab-btn-cast:hover,
html.light-mode #tab-btn-recommend:hover {
    color: #fcd576 !important;
}

html.light-mode .ap-movie-tab-system .ap-tab-btn.active,
html.light-mode #tab-btn-episodes.active,
html.light-mode #tab-btn-gallery.active,
html.light-mode #tab-btn-ost.active,
html.light-mode #tab-btn-cast.active,
html.light-mode #tab-btn-recommend.active {
    background: transparent !important;
    background-color: transparent !important;
    color: #fcd576 !important;
    border: none !important;
    border-bottom: 3px solid #fcd576 !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(252, 213, 118, 0.4) !important;
    box-shadow: none !important;
}

/* Server Label ("MÁY CHỦ :") - Crisp White over Hero Backdrop */
html.light-mode span[style*="MÁY CHỦ"],
html.light-mode div.flex.items-center.mr-2 span {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Server Selection Section (DANH SÁCH TẬP) in Light Mode */
html.light-mode #server-list > div > div:first-child,
html.light-mode #server-list > div > div:first-child span {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode #server-list > div > div:first-child span[style*="background"] {
    background: #e7e0d3 !important;
    color: #1c1917 !important;
}

html.light-mode #server-list-desktop button,
html.light-mode #server-list-mobile button,
html.light-mode [id*="server-list"] button {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.08) !important;
    text-shadow: none !important;
}

html.light-mode #server-list-desktop button span:first-child,
html.light-mode #server-list-mobile button span:first-child,
html.light-mode [id*="server-list"] button span:first-child {
    color: #1c1917 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Episode Count Badge Pill inside Inactive Server Buttons */
html.light-mode #server-list button span[style*="background"],
html.light-mode [id*="server-list"] button span[style*="background"] {
    background-color: #f5f0e6 !important;
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
}

html.light-mode #server-list button span[style*="background"] span,
html.light-mode [id*="server-list"] button span[style*="background"] span {
    color: #1c1917 !important;
}

/* Active Server Button in Watch Page */
html.light-mode #server-list button[style*="9bb0ff"],
html.light-mode #server-list button[style*="rgb(155, 176, 255)"] {
    background-color: #d97706 !important;
    background: #d97706 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

html.light-mode #server-list button[style*="9bb0ff"] span,
html.light-mode #server-list button[style*="rgb(155, 176, 255)"] span {
    color: #ffffff !important;
}

html.light-mode #server-list button[style*="9bb0ff"] span[style*="background"],
html.light-mode #server-list button[style*="rgb(155, 176, 255)"] span[style*="background"] {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Character Counter Position & Empty List Message Centering Fix */
.ap-char-count,
html.light-mode .ap-char-count {
    right: 24px !important;
    top: 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #78716c !important;
    user-select: none !important;
    z-index: 5 !important;
}

html.light-mode .ap-cmt-list,
.ap-cmt-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

html.light-mode .ap-cmt-empty-msg,
.ap-cmt-empty-msg {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 20px !important;
    margin: 0 auto !important;
    color: #78716c !important;
    font-weight: 600 !important;
}

/* Comment Section Outer Wrapper - Borderless & Clean (Match Hình 1) */
html.light-mode .ap-cmt-wrapper,
html.light-mode #comments-section,
html.light-mode .ap-cmt-input-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Comment Form Textarea Container - Border-Free Clean Light Box */
html.light-mode .ap-cmt-wrapper div[style*="background: #181a24"],
html.light-mode .ap-cmt-wrapper div[style*="background:#181a24"],
html.light-mode .ap-cmt-wrapper div[style*="background: #181a26"],
html.light-mode .ap-cmt-input-container div[style*="background"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 2px 12px rgba(78, 64, 45, 0.04) !important;
    border-radius: 14px !important;
    color: #1c1917 !important;
}

/* Comment Textarea */
html.light-mode .ap-cmt-textarea,
html.light-mode textarea#ap-input-main {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    border: 1px solid #d6cebf !important;
    border-radius: 10px !important;
    color: #1c1917 !important;
    padding: 10px 14px !important;
}
html.light-mode .ap-cmt-textarea::placeholder,
html.light-mode textarea#ap-input-main::placeholder {
    color: #78716c !important;
}

/* Inner Divider & Bottom Toolbar */
html.light-mode .ap-cmt-wrapper div[style*="border-top"] {
    border-top: 1px solid #e7e0d3 !important;
}

html.light-mode .ap-toggle-track {
    background: #e7e0d3 !important;
    border: 1px solid #d6cebf !important;
}

html.light-mode .ap-spoiler-label {
    color: #44403c !important;
    font-weight: 600 !important;
}

html.light-mode .ap-btn-ava span,
html.light-mode .ap-send-btn span {
    color: #d97706 !important;
    font-weight: 700 !important;
}
html.light-mode .ap-send-btn svg {
    fill: #d97706 !important;
}

/* Comment List & Header */
html.light-mode .ap-cmt-header-wrap h3,
html.light-mode #ap-cmt-count-span {
    color: #1c1917 !important;
}
html.light-mode .ap-cmt-header-wrap svg {
    fill: #1c1917 !important;
}

html.light-mode .ap-cmt-text {
    color: #292524 !important;
}

html.light-mode .ap-cmt-time,
html.light-mode .ap-cmt-guest p {
    color: #78716c !important;
}

html.light-mode .ap-cmt-item {
    border-bottom: none !important;
    background: transparent !important;
}
html.light-mode .ap-cmt-item:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Comment & Rating Tab Toggle Bar (Bình luận / Đánh giá) handled in unified block */

/* Floating Back-To-Top & Feedback Buttons */
html.light-mode #back-to-top,
html.light-mode #sofa-back-to-top,
html.light-mode .floating-feedback-btn,
html.light-mode button[id*="back-to-top"] {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.15) !important;
}
html.light-mode #back-to-top svg,
html.light-mode #sofa-back-to-top svg,
html.light-mode .floating-feedback-btn svg {
    fill: #1c1917 !important;
}

/* Footer Overrides */
html.light-mode footer.aphim-footer {
    background-image: none !important;
    background: #ede6d8 !important;
    border-top: 1px solid #e0d7c5 !important;
    color: #57534e !important;
}
html.light-mode footer.aphim-footer::before {
    display: none !important;
}
html.light-mode .az-btn {
    background: #dfd7c6 !important;
    border: 1px solid #d6cebf !important;
    color: #292524 !important;
}
html.light-mode .az-btn:hover,
html.light-mode .az-btn.active {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}
html.light-mode .footer-social-icons a {
    background: #dfd7c6 !important;
    border: 1px solid #d6cebf !important;
    color: #292524 !important;
}

/* ==========================================================================
   BẢNG XẾP HẠNG PHIM HOT IN LIGHT MODE (Cream Theme Adaptation)
   ========================================================================== */
html.light-mode .ranking-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.05) !important;
    border-radius: 14px !important;
}

html.light-mode .ranking-card:hover {
    background: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.15) !important;
}

/* Rank 1, 2, 3 Luxury Highlight Cards in Light Mode */
html.light-mode .ranking-card-1 {
    background: linear-gradient(135deg, #ffffff 50%, #e0f2fe 100%) !important;
    border: 1.5px solid #38bdf8 !important;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15) !important;
}
html.light-mode .ranking-card-2 {
    background: linear-gradient(135deg, #ffffff 50%, #ffe4e6 100%) !important;
    border: 1.5px solid #f43f5e !important;
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.15) !important;
}
html.light-mode .ranking-card-3 {
    background: linear-gradient(135deg, #ffffff 50%, #fef3c7 100%) !important;
    border: 1.5px solid #eab308 !important;
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.15) !important;
}

html.light-mode .ranking-title-vi {
    color: #1c1917 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html.light-mode .ranking-title-en {
    color: #78716c !important;
    text-shadow: none !important;
}

/* Rank Numbers Stroke in Light Mode */
html.light-mode .ranking-num {
    -webkit-text-stroke: 2px #78716c !important;
    color: transparent !important;
}
html.light-mode .ranking-num-1 {
    -webkit-text-stroke: 2.2px #0284c7 !important;
}
html.light-mode .ranking-num-2 {
    -webkit-text-stroke: 2.2px #e11d48 !important;
}
html.light-mode .ranking-num-3 {
    -webkit-text-stroke: 2.2px #d97706 !important;
}

html.light-mode .ranking-poster-box {
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.1) !important;
}

html.light-mode .ranking-badge-pill.badge-vs {
    background: #e6f4ea !important;
    color: #166534 !important;
    border: 1px solid #b7e1cd !important;
}

html.light-mode .ranking-badge-pill.badge-tm {
    background: #fce8e6 !important;
    color: #991b1b !important;
    border: 1px solid #f5c2c7 !important;
}

/* Footer App Download Section in Light Mode */
html.light-mode .footer-col-right h3 {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .app-btn {
    background-color: #1c1917 !important;
    background: #1c1917 !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

html.light-mode .app-btn:hover {
    background-color: #27272a !important;
    background: #27272a !important;
    border-color: #d97706 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

html.light-mode .app-btn .app-btn-text-small {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.light-mode .app-btn .app-btn-text-large {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html.light-mode .app-btn svg {
    fill: #ffffff !important;
}

/* Remove dark outer borders from movie poster images/cards in Light Mode */
html.light-mode .motchill-movie-card,
html.light-mode .motchill-poster-wrap,
html.light-mode .landscape-poster-wrap,
html.light-mode .de-cu-poster-wrap,
html.light-mode .movie-card,
html.light-mode .normal-card-item,
html.light-mode .featured-card-item,
html.light-mode .de-cu-card,
html.light-mode .grid-movie-card {
    border: none !important;
    box-shadow: 0 2px 10px rgba(78, 64, 45, 0.08) !important;
    outline: none !important;
}

html.light-mode .motchill-movie-card img,
html.light-mode .motchill-poster-wrap img,
html.light-mode .landscape-poster-wrap img,
html.light-mode .de-cu-poster-wrap img,
html.light-mode .normal-card-item img,
html.light-mode .featured-card-item img,
html.light-mode .de-cu-card img {
    border: none !important;
    outline: none !important;
}

/* ==========================================================================
   FAQ SECTION (CÂU HỎI THƯỜNG GẶP) IN LIGHT MODE
   ========================================================================== */
html.light-mode .faq-section h2,
html.light-mode h2[style*="CÂU HỎI THƯỜNG GẶP"] {
    color: #1c1917 !important;
}

html.light-mode .faq-section p {
    color: #57534e !important;
}

html.light-mode .faq-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.05) !important;
    border-radius: 12px !important;
}

html.light-mode .faq-card:hover {
    border-color: #d97706 !important;
}

html.light-mode .faq-btn span {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .faq-chevron {
    fill: #78716c !important;
    color: #78716c !important;
}

html.light-mode .faq-body {
    border-top: 1px solid #e7e0d3 !important;
    background: #faf7f2 !important;
}

html.light-mode .faq-body p {
    color: #44403c !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   PAGINATION CONTROLS (TOP QUICK & BOTTOM PAGINATION) IN LIGHT MODE
   ========================================================================== */

/* Top Quick Pagination Bar */
html.light-mode #topQuickPageWrap,
html.light-mode #topQuickPageWrap span {
    color: #57534e !important;
}

html.light-mode #topQuickPageWrap #topCurrentPage,
html.light-mode #topQuickPageWrap #topTotalPages {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode #topPrevPageBtn,
html.light-mode #topNextPageBtn {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode #topPrevPageBtn:hover,
html.light-mode #topNextPageBtn:hover {
    background-color: #fdfaf5 !important;
    background: #fdfaf5 !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

html.light-mode #topPrevPageBtn svg,
html.light-mode #topNextPageBtn svg {
    stroke: #1c1917 !important;
    color: #1c1917 !important;
}

html.light-mode #topPrevPageBtn:hover svg,
html.light-mode #topNextPageBtn:hover svg {
    stroke: #d97706 !important;
    color: #d97706 !important;
}

/* Bottom Pagination Bar */
html.light-mode #paginationWrap {
    color: #1c1917 !important;
}

html.light-mode #prevPageBtn,
html.light-mode #nextPageBtn {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 12px rgba(78, 64, 45, 0.1) !important;
}

html.light-mode #prevPageBtn:hover,
html.light-mode #nextPageBtn:hover {
    background-color: #fdfaf5 !important;
    background: #fdfaf5 !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

html.light-mode #prevPageBtn svg,
html.light-mode #nextPageBtn svg {
    stroke: #1c1917 !important;
    color: #1c1917 !important;
}

html.light-mode #prevPageBtn:hover svg,
html.light-mode #nextPageBtn:hover svg {
    stroke: #d97706 !important;
    color: #d97706 !important;
}

/* Central Pill Container for Page Number Input */
html.light-mode #paginationWrap > div.rounded-full,
html.light-mode #paginationWrap div[class*="rounded-full"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 12px rgba(78, 64, 45, 0.1) !important;
}

html.light-mode #paginationWrap > div.rounded-full span,
html.light-mode #paginationWrap div[class*="rounded-full"] span {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode #paginationWrap #totalPagesText {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

/* Input Box inside Pagination Pill */
html.light-mode #pageInput,
html.light-mode input#pageInput,
html.light-mode input.page-input-dark {
    background-color: #f5f0e6 !important;
    background: #f5f0e6 !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 900 !important;
}

html.light-mode #pageInput:focus,
html.light-mode input#pageInput:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25) !important;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR LIGHT MODE OVERRIDES
   ========================================================================== */
html.light-mode #bottom-nav-dock {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Curved Background Dock SVG - Clean top shadow without dark bleed inside notch dip */
html.light-mode .bn-bg-svg {
    filter: drop-shadow(0 -3px 8px rgba(78, 64, 45, 0.08)) !important;
}

html.light-mode .bn-bg-svg path {
    fill: #faf7f2 !important;
    stroke: #e7e0d3 !important;
    stroke-width: 1px !important;
}

/* Tab Items (Labels & Side Icons) */
html.light-mode .bn-tab {
    color: #57534e !important;
    text-shadow: none !important;
}

html.light-mode .bn-tab-label {
    color: #57534e !important;
    font-weight: 600 !important;
}

html.light-mode .bn-tab-icon {
    color: #57534e !important;
}

html.light-mode .bn-tab-icon path,
html.light-mode .bn-tab-icon circle {
    stroke: #57534e !important;
}

html.light-mode .bn-tab-icon circle {
    fill: #faf7f2 !important;
}

/* Active Tab Accent (Amber Gold #d97706) */
html.light-mode .bn-tab.active,
html.light-mode .bn-tab.active .bn-tab-label {
    color: #d97706 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html.light-mode .bn-tab.active .bn-tab-icon {
    color: #d97706 !important;
}

html.light-mode .bn-tab.active .bn-tab-icon path,
html.light-mode .bn-tab.active .bn-tab-icon circle {
    stroke: #d97706 !important;
    stroke-width: 1.8 !important;
}

html.light-mode .bn-tab.active .bn-tab-icon circle {
    fill: #fef8ee !important;
}

/* Center Floating Home Circle (Warm Gold & Pure White Border - No dark bottom shadow bleed) */
html.light-mode .bn-center-circle {
    background: linear-gradient(135deg, #FFEFA6 0%, #FCD576 45%, #D69F3D 100%) !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.45) !important;
}

html.light-mode .bn-center-icon path {
    stroke: #1c1917 !important;
    stroke-width: 2.4 !important;
}

html.light-mode #bn-tab-account {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   MOVIE METADATA CARDS 6-GRID LIGHT MODE OVERRIDES (Desktop / Phim.ejs)
   ========================================================================== */
html.light-mode #movie-metadata-container div[style*="background-color: rgba"],
html.light-mode #movie-metadata-container .shadow-xl {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.08) !important;
}

/* Eliminate all dark text-shadows inside the cards to remove blurry effect */
html.light-mode #movie-metadata-container * {
    text-shadow: none !important;
}

/* Card Headers & Dividers */
html.light-mode #movie-metadata-container div[style*="border-bottom"] {
    border-bottom-color: #e7e0d3 !important;
}

/* Category Card (Card 1) Light Mode Overrides */
html.light-mode #movie-metadata-container h4[style*="60a5fa"] {
    color: #1d4ed8 !important;
    font-weight: 800 !important;
}
html.light-mode #movie-metadata-container a[href*="category"],
html.light-mode #movie-metadata-container span[style*="93c5fd"] {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 700 !important;
}
html.light-mode #movie-metadata-container a[href*="category"]:hover {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

/* Country Card (Card 2) Light Mode Overrides */
html.light-mode #movie-metadata-container h4[style*="c084fc"] {
    color: #7e22ce !important;
    font-weight: 800 !important;
}
html.light-mode #movie-metadata-container a[href*="country"],
html.light-mode #movie-metadata-container span[style*="d8b4fe"] {
    background-color: #faf5ff !important;
    color: #6b21a8 !important;
    border: 1px solid #e9d5ff !important;
    font-weight: 700 !important;
}
html.light-mode #movie-metadata-container a[href*="country"]:hover {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
}

/* Info Card (Card 3) Light Mode Overrides */
html.light-mode #movie-metadata-container h4[style*="4ade80"] {
    color: #15803d !important;
    font-weight: 800 !important;
}

/* TMDB Card (Card 4) & IMDb Card (Card 5) Headers & Badges */
html.light-mode #movie-metadata-container span[style*="background-color: rgba(14,165,233"] {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}
html.light-mode #movie-metadata-container span[style*="background-color: rgba(234,179,8"] {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}
html.light-mode #movie-metadata-container span[style*="background-color: rgba(34,197,94"] {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}
html.light-mode #movie-metadata-container span[style*="background-color: rgba(59,130,246"] {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}
html.light-mode #movie-metadata-container span[style*="background-color: rgba(168,85,247"] {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
}
html.light-mode #movie-metadata-container span[style*="background-color: rgba(249,115,22"] {
    background-color: #ffedd5 !important;
    color: #c2410c !important;
}

/* Text Labels & Values inside Info/TMDB/IMDb Cards */
html.light-mode #movie-metadata-container .text-gray-200,
html.light-mode #movie-metadata-container div.flex > span:first-child {
    color: #44403c !important;
    font-weight: 700 !important;
}

html.light-mode #movie-metadata-container .text-white,
html.light-mode #movie-metadata-container span.text-white,
html.light-mode #movie-metadata-container div.flex > span.font-semibold {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode #movie-metadata-container span[style*="color: #4ade80"],
html.light-mode #movie-metadata-container span[style*="4ade80"] {
    color: #16a34a !important;
    font-weight: 900 !important;
}

html.light-mode #movie-metadata-container span[style*="color: #38bdf8"] {
    color: #0284c7 !important;
    font-weight: 900 !important;
}

html.light-mode #movie-metadata-container span[style*="color: #fde047"] {
    color: #d97706 !important;
    font-weight: 900 !important;
}

html.light-mode #movie-metadata-container .text-gray-400 {
    color: #78716c !important;
}

/* Director Card (Card 6) Light Mode Overrides */
html.light-mode #movie-metadata-container h4[style*="fb923c"] {
    color: #c2410c !important;
    font-weight: 800 !important;
}
html.light-mode #movie-metadata-container span[style*="fed7aa"],
html.light-mode #movie-metadata-container span[style*="background-color: rgba(249,115,22,0.1)"] {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   AUTH MODAL LIGHT MODE OVERRIDES (#ap-auth-modal / Login & Register Popup)
   ========================================================================== */
html.light-mode #ap-auth-backdrop {
    background: rgba(40, 32, 20, 0.55) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

html.light-mode #ap-auth-modal {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 24px 70px rgba(78, 64, 45, 0.25) !important;
}

html.light-mode #ap-auth-modal::before {
    border: 1px solid #e7e0d3 !important;
    box-shadow: none !important;
}

/* Modal Inputs in Light Mode - High contrast black text & dark charcoal placeholders */
html.light-mode .ap-auth-input,
html.light-mode input.ap-auth-input,
html.light-mode #ap-auth-modal input:not([type="checkbox"]),
html.light-mode #ap-auth-form input:not([type="checkbox"]) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    opacity: 1 !important;
}

/* Placeholders in Light Mode - Deep Charcoal Black (#57534e) */
html.light-mode .ap-auth-input::placeholder,
html.light-mode input.ap-auth-input::placeholder,
html.light-mode #ap-auth-modal input:not([type="checkbox"])::placeholder,
html.light-mode #ap-auth-form input:not([type="checkbox"])::placeholder {
    color: #57534e !important;
    -webkit-text-fill-color: #57534e !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

html.light-mode .ap-auth-input::-webkit-input-placeholder,
html.light-mode input.ap-auth-input::-webkit-input-placeholder,
html.light-mode #ap-auth-modal input:not([type="checkbox"])::-webkit-input-placeholder,
html.light-mode #ap-auth-form input:not([type="checkbox"])::-webkit-input-placeholder {
    color: #57534e !important;
    -webkit-text-fill-color: #57534e !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

html.light-mode .ap-auth-input::-moz-placeholder,
html.light-mode input.ap-auth-input::-moz-placeholder,
html.light-mode #ap-auth-modal input:not([type="checkbox"])::-moz-placeholder,
html.light-mode #ap-auth-form input:not([type="checkbox"])::-moz-placeholder {
    color: #57534e !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

html.light-mode .ap-auth-input:-ms-input-placeholder,
html.light-mode input.ap-auth-input:-ms-input-placeholder,
html.light-mode #ap-auth-modal input:not([type="checkbox"]):-ms-input-placeholder,
html.light-mode #ap-auth-form input:not([type="checkbox"]):-ms-input-placeholder {
    color: #57534e !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

html.light-mode .ap-auth-input:focus,
html.light-mode input.ap-auth-input:focus,
html.light-mode #ap-auth-modal input:not([type="checkbox"]):focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #d97706 !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}

/* Autofill Light Mode Fix */
html.light-mode input.ap-auth-input:-webkit-autofill,
html.light-mode input.ap-auth-input:-webkit-autofill:hover,
html.light-mode input.ap-auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1c1917 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Password Eye Icon Button in Light Mode */
html.light-mode .ap-pwd-toggle-btn {
    color: #57534e !important;
}

html.light-mode .ap-pwd-toggle-btn:hover {
    color: #d97706 !important;
}

/* Segmented Tab Switcher (Đăng nhập / Đăng ký) in Light Mode */
html.light-mode .ap-auth-tabs-wrap {
    background: #eae3d5 !important;
    border: 1px solid #d6cebf !important;
}

html.light-mode .ap-auth-tab-btn {
    color: #57534e !important;
}

html.light-mode .ap-auth-tab-btn.active {
    background: #ffffff !important;
    color: #1c1917 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.12) !important;
}

/* Subtitle & Gold Links in Light Mode */
html.light-mode .ap-auth-subtitle {
    color: #57534e !important;
}

html.light-mode .ap-gold-link {
    color: #b45309 !important;
    font-weight: 700 !important;
}

html.light-mode .ap-gold-link:hover {
    color: #d97706 !important;
}

html.light-mode .ap-forgot-link {
    color: #57534e !important;
    font-weight: 600 !important;
}

html.light-mode #ap-field-remember-label {
    color: #44403c !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

html.light-mode #ap-field-remember {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    accent-color: #d97706 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    cursor: pointer !important;
    border: 1.5px solid #d97706 !important;
    background: transparent !important;
    background-color: transparent !important;
}

html.light-mode .ap-forgot-link:hover {
    color: #d97706 !important;
}

/* Close Button X in Light Mode */
html.light-mode .ap-auth-close {
    background: #eae3d5 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
}

html.light-mode .ap-auth-close:hover {
    background: #dfd7c6 !important;
    color: #d97706 !important;
}

/* Submit Button in Light Mode */
html.light-mode .ap-auth-submit-btn {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    color: #0d0f1a !important;
    -webkit-text-fill-color: #0d0f1a !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
    text-shadow: none !important;
}

html.light-mode .ap-auth-submit-btn:hover {
    background: linear-gradient(135deg, #ffe08c 0%, #d97706 100%) !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5) !important;
}

/* Left Poster Column Text in Light Mode - Always Crisp White on top of Movie Poster Image */
html.light-mode .ap-auth-poster-title,
html.light-mode #ap-auth-modal .ap-auth-poster-title,
html.light-mode #ap-auth-poster-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

html.light-mode .ap-auth-poster-sub,
html.light-mode #ap-auth-modal .ap-auth-poster-sub,
html.light-mode #ap-auth-poster-sub {
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Floating Side Dock Light Mode Overrides (Back to top & Collapsed handle) */
html.light-mode .fd-btn-top {
    background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    border-right: none !important;
    color: #d97706 !important;
    box-shadow: -6px 8px 22px rgba(78, 64, 45, 0.14) !important;
    border-radius: 20px 0 0 20px !important;
}

html.light-mode .fd-btn-top:hover {
    background: #ffffff !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
    box-shadow: -8px 10px 28px rgba(217, 119, 6, 0.22) !important;
}

html.light-mode .fd-btn-top svg {
    color: #d97706 !important;
    stroke: #d97706 !important;
}

html.light-mode .fd-handle {
    background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    border-right: none !important;
    box-shadow: -6px 8px 24px rgba(78, 64, 45, 0.14) !important;
    padding: 10px 4px 10px 4px !important;
    border-radius: 22px 0 0 22px !important;
}

html.light-mode .fd-handle:hover {
    background: #ffffff !important;
    border-color: #d6cebf !important;
    box-shadow: -8px 10px 28px rgba(217, 119, 6, 0.22) !important;
}

html.light-mode .fd-handle .fd-indicator {
    width: 4px !important;
    height: 18px !important;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    border-radius: 99px !important;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.4) !important;
}

html.light-mode .fd-handle .fd-handle-icon {
    color: #d97706 !important;
    stroke: #d97706 !important;
}

/* Comment / Rating Section Light Mode Overrides */
html.light-mode #comments-section h2,
html.light-mode #comments-section h3,
html.light-mode .ap-cmt-header-wrap h3 {
    color: #1c1917 !important;
}

html.light-mode #comments-section svg,
html.light-mode .ap-cmt-header-wrap svg {
    fill: #1c1917 !important;
    color: #1c1917 !important;
}

/* Comment / Rating Tab Switcher Box - Elevated Luxury White Active Pill */
html.light-mode .ap-cmt-tabs-wrap,
html.light-mode .ap-cmt-header-wrap .inline-flex,
html.light-mode .ap-cmt-header-wrap div[class*="inline-flex"],
html.light-mode #comments-section .flex.gap-2 {
    background: #e4ddd0 !important;
    background-color: #e4ddd0 !important;
    border: 1px solid #d6cebf !important;
    border-radius: 10px !important;
    padding: 3px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .ap-cmt-tab-btn,
html.light-mode #ap-tab-cmt,
html.light-mode #ap-tab-rating {
    border-radius: 7px !important;
    padding: 5px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #57534e !important;
    -webkit-text-fill-color: #57534e !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Elevated Active Pill - Pure White Card with Soft Drop Shadow & Crisp Dark Text */
html.light-mode .ap-cmt-tab-btn.active,
html.light-mode #ap-tab-cmt.active,
html.light-mode #ap-tab-rating.active,
html.light-mode #ap-tab-cmt.bg-white,
html.light-mode #ap-tab-rating.bg-white,
html.light-mode #ap-tab-cmt[class*="bg-white"],
html.light-mode #ap-tab-rating[class*="bg-white"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    font-weight: 800 !important;
    border: 1px solid #d6cebf !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-0.5px) !important;
}

/* Comment Login Prompt Text & Link */
html.light-mode #comments-section p.text-gray-400,
html.light-mode .ap-cmt-input-container > div.text-gray-400,
html.light-mode .ap-cmt-input-container .text-gray-400 {
    color: #57534e !important;
}

html.light-mode #comments-section span.text-\[\#fcd576\],
html.light-mode .ap-cmt-input-container span.text-\[\#fcd576\],
html.light-mode span[onclick*="showAuthModal"] {
    color: #b45309 !important;
    font-weight: 700 !important;
}

/* Comment Textarea Container & Fields */
html.light-mode .ap-cmt-input-container div[style*="background: #181a24"],
html.light-mode #comments-section .space-y-4.bg-\[\#313646\],
html.light-mode div.space-y-4.bg-\[\#313646\] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.06) !important;
    color: #1c1917 !important;
}

html.light-mode .ap-cmt-textarea,
html.light-mode #commentInput,
html.light-mode #ap-input-main {
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    font-weight: 600 !important;
}

html.light-mode .ap-cmt-textarea::placeholder,
html.light-mode #commentInput::placeholder,
html.light-mode #ap-input-main::placeholder {
    color: #78716c !important;
    -webkit-text-fill-color: #78716c !important;
    opacity: 1 !important;
}

html.light-mode .ap-char-count,
html.light-mode #ap-count-main {
    color: #78716c !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE PAGE LIGHT MODE COMPREHENSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Page Background & Main Layout */
html.light-mode .profile-page-bg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #1c1917 !important;
    position: relative !important;
    overflow-x: hidden !important;
}

html.light-mode .profile-layout {
    position: relative !important;
    z-index: 5 !important;
}

@media (min-width: 1024px) {
    html.light-mode .profile-sidebar {
        position: static !important;
        top: auto !important;
        width: 270px !important;
        flex: 0 0 270px !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
        z-index: 5 !important;
    }
    html.light-mode .profile-sidebar .sidebar-card,
    html.light-mode .sidebar-card {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
        flex: 1 1 auto !important;
    }
}
html.light-mode .sidebar-logout-wrap {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}
@media (max-width: 1023px) {
    html.light-mode .profile-sidebar {
        position: relative !important;
        top: auto !important;
        z-index: 5 !important;
    }
}

html.light-mode main.profile-content,
html.light-mode .profile-content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    z-index: 5 !important;
}

html.light-mode .sidebar-card,
html.light-mode .content-header,
html.light-mode .panel-card {
    position: relative !important;
    z-index: 5 !important;
}

/* 2. Sidebar Container & Avatar */
html.light-mode .sidebar-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 8px 30px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .sidebar-banner-header {
    border-bottom: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .sidebar-cover:not(.has-custom-banner):not([style*="background"]) {
    background: linear-gradient(135deg, #fdfbf7 0%, #f3eee3 45%, #d6cebf 100%) !important;
}

html.light-mode .sidebar-avatar {
    border-color: #ffffff !important;
}

html.light-mode .sidebar-username:not([class*="ap-nc-"]):not([style*="background"]) {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.light-mode .sidebar-email {
    color: #475569 !important;
    font-weight: 650 !important;
    font-size: 12.5px !important;
}

html.light-mode .sidebar-badge {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}

html.light-mode .sidebar-level-box,
html.light-mode .sidebar-stats {
    background: #f9f6f0 !important;
    border: 1px solid #e7e0d3 !important;
}

html.light-mode .level-box-header,
html.light-mode .stat-label {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode #sidebarXpTxt {
    color: #44403c !important;
    font-weight: 700 !important;
}

html.light-mode .level-box-title {
    color: #92400e !important;
    font-weight: 800 !important;
}

html.light-mode .stat-value {
    color: #92400e !important;
    font-weight: 900 !important;
}

html.light-mode .level-progress-bar {
    background: #e7e0d3 !important;
}

/* 3. Sidebar Navigation Links */
html.light-mode .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    gap: 0 !important;
    padding: 4px 12px 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html.light-mode .sidebar-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html.light-mode .sidebar-nav-item {
    color: #292524 !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    padding: 3px 12px 3px 3px !important;
    border-radius: 12px !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 35px !important;
    max-height: 42px !important;
    transform: none !important;
}

html.light-mode .sidebar-nav-item > span:not(.nav-icon-badge) {
    color: #292524 !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

html.light-mode .sidebar-nav-item * {
    pointer-events: none !important;
}

html.light-mode .nav-icon-badge,
html.light-mode .sidebar-nav-item .nav-icon-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    transform: none !important;
}

html.light-mode .sidebar-nav-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #0c0a09 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html.light-mode .sidebar-nav-item:hover > span:not(.nav-icon-badge) {
    color: #0c0a09 !important;
}

html.light-mode .sidebar-nav-item:hover .nav-icon-badge,
html.light-mode .sidebar-nav-item.active .nav-icon-badge {
    transform: none !important;
    box-shadow: none !important;
}

html.light-mode .sidebar-nav-item.active {
    font-weight: 800 !important;
    box-shadow: none !important;
    transform: none !important;
}

html.light-mode .sidebar-nav-item.active > span:not(.nav-icon-badge) {
    color: inherit !important;
    font-weight: 800 !important;
}

/* Light Mode Individual Themed Active States (Matching Icon Badge Colors) */
html.light-mode #snav-account.active {
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
}
html.light-mode #snav-account.active .nav-icon-badge {
    background: #e0e7ff !important;
    border-color: #a5b4fc !important;
    color: #4f46e5 !important;
}

html.light-mode #snav-shop.active {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}
html.light-mode #snav-shop.active .nav-icon-badge {
    background: #fde68a !important;
    border-color: #fcd34d !important;
    color: #b45309 !important;
}

html.light-mode #snav-favorites.active {
    background: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
}
html.light-mode #snav-favorites.active .nav-icon-badge {
    background: #fecdd3 !important;
    border-color: #fda4af !important;
    color: #e11d48 !important;
}

html.light-mode #snav-history.active {
    background: #dcfce7 !important;
    border: 1px solid #bbf7d0 !important;
    color: #15803d !important;
}
html.light-mode #snav-history.active .nav-icon-badge {
    background: #bbf7d0 !important;
    border-color: #86efac !important;
    color: #16a34a !important;
}

html.light-mode #snav-watchlist.active {
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    color: #0369a1 !important;
}
html.light-mode #snav-watchlist.active .nav-icon-badge {
    background: #bae6fd !important;
    border-color: #7dd3fc !important;
    color: #0284c7 !important;
}

html.light-mode #snav-cinema.active {
    background: #f3e8ff !important;
    border: 1px solid #e9d5ff !important;
    color: #7e22ce !important;
}
html.light-mode #snav-cinema.active .nav-icon-badge {
    background: #e9d5ff !important;
    border-color: #d8b4fe !important;
    color: #9333ea !important;
}

html.light-mode #snav-achievements.active {
    background: #ffedd5 !important;
    border: 1px solid #fed7aa !important;
    color: #c2410c !important;
}
html.light-mode #snav-achievements.active .nav-icon-badge {
    background: #fed7aa !important;
    border-color: #fdba74 !important;
    color: #ea580c !important;
}

html.light-mode #snav-settings.active {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
html.light-mode #snav-settings.active .nav-icon-badge {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

/* Light Mode Nav Icon Badges (Synchronized 100% with Image 1 Dropdown Menu) */
html.light-mode #snav-account .nav-icon-badge { background: #e0e7ff !important; border: 1px solid #c7d2fe !important; color: #6366f1 !important; }
html.light-mode #snav-shop .nav-icon-badge { background: #fef3c7 !important; border: 1px solid #fde68a !important; color: #d97706 !important; }
html.light-mode #snav-favorites .nav-icon-badge { background: #ffe4e6 !important; border: 1px solid #fecdd3 !important; color: #f43f5e !important; }
html.light-mode #snav-history .nav-icon-badge { background: #dcfce7 !important; border: 1px solid #bbf7d0 !important; color: #10b981 !important; }
html.light-mode #snav-watchlist .nav-icon-badge { background: #e0f2fe !important; border: 1px solid #bae6fd !important; color: #0284c7 !important; }
html.light-mode #snav-cinema .nav-icon-badge { background: #f3e8ff !important; border: 1px solid #e9d5ff !important; color: #a855f7 !important; }
html.light-mode #snav-achievements .nav-icon-badge { background: #ffedd5 !important; border: 1px solid #fed7aa !important; color: #f59e0b !important; }
html.light-mode #snav-settings .nav-icon-badge { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #64748b !important; }
html.light-mode #snav-notifications .nav-icon-badge { background: #e0e7ff !important; border: 1px solid #c7d2fe !important; color: #6366f1 !important; }
html.light-mode .logout-badge { background: #fee2e2 !important; border: 1px solid #fca5a5 !important; color: #dc2626 !important; }

html.light-mode .sidebar-nav-item .nav-icon {
    color: inherit !important;
}

html.light-mode .sidebar-logout {
    background: #fee2e2 !important;
    border: none !important;
    box-shadow: none !important;
    color: #dc2626 !important;
    padding: 3px 12px 3px 3px !important;
    gap: 9px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

html.light-mode .sidebar-logout:hover {
    background: #fca5a5 !important;
    color: #991b1b !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Content Header & Main Panel Cards */
html.light-mode .content-header {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode .content-header-title {
    color: #1c1917 !important;
    font-weight: 900 !important;
}

html.light-mode .content-header-sub {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .content-header-badge {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

html.light-mode .daily-bonus-btn {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #fcd576, #f59e0b) !important;
    color: #1a1000 !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25) !important;
}

html.light-mode .panel-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 8px 30px rgba(78, 64, 45, 0.08) !important;
    color: #1c1917 !important;
}

/* 5. Devices Section Overrides (Image 1 Fixes) */
html.light-mode .devices-container {
    background: #fdfbf7 !important;
    border-top: 1px solid #e7e0d3 !important;
}

html.light-mode .devices-title {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .devices-sub {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .btn-logout-all {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
}

html.light-mode .btn-logout-all:hover {
    background: #fca5a5 !important;
    color: #991b1b !important;
}

html.light-mode .device-item {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode .device-item:hover {
    background: #fffdf9 !important;
    border-color: #fcd576 !important;
}

html.light-mode .device-name {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .device-meta {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .device-badge-active {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
    font-weight: 700 !important;
}

html.light-mode .device-badge-saved {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #44403c !important;
    font-weight: 700 !important;
}

html.light-mode .device-badge-tv {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}

/* 6. Right Profile Sidebar & Account Info Overrides (Image 2 Fixes) */
html.light-mode .avatar-panel {
    border: 1.5px solid #e7e0d3 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(180, 140, 100, 0.08) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html.light-mode .avatar-panel-cover:not([class*="ap-banner-"]):not([style*="background"]) {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #f97316 100%) !important;
}

html.light-mode .avatar-label {
    color: #1c1917 !important;
    font-size: 17.5px !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
}

html.light-mode .avatar-sublabel {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .btn-avatar-compact {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .btn-avatar-vip {
    background: #22c55e !important;
    color: #0b1d11 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
}
html.light-mode .btn-avatar-vip:hover {
    background: #16a34a !important;
}

/* User Avatar Logo Protection inside Avatar Panel */
html.light-mode .user-avatar-inner,
html.light-mode .avatar-large .user-avatar-inner,
html.light-mode .user-avatar-frame-wrap .user-avatar-inner,
html.light-mode .avatar-large .ap-user-avatar-badge {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    color: #1a1000 !important;
    border: none !important;
}

/* Wallet Card Box inside Avatar Panel */
html.light-mode .avatar-panel .avatar-wallet-box,
html.light-mode .avatar-wallet-box {
    background: linear-gradient(135deg, #fffdf8 0%, #fff8e7 100%) !important;
    border: 1.5px solid #fcd576 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.1) !important;
}

html.light-mode .avatar-panel .avatar-wallet-title,
html.light-mode .avatar-wallet-title,
html.light-mode .avatar-wallet-box .avatar-wallet-title,
html.light-mode .avatar-panel div[style*="color:#fcd576"],
html.light-mode .avatar-wallet-box div[style*="color:#fcd576"] {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html.light-mode .avatar-panel .avatar-wallet-balance,
html.light-mode .avatar-wallet-balance,
html.light-mode .avatar-wallet-box .avatar-wallet-balance,
html.light-mode .avatar-panel .avatar-wallet-val,
html.light-mode .avatar-wallet-val,
html.light-mode .avatar-wallet-box .avatar-wallet-val,
html.light-mode .avatar-wallet-box div[style*="color:#ffffff"],
html.light-mode .avatar-panel div[style*="color:#ffffff"] {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.light-mode .avatar-panel .avatar-wallet-unit,
html.light-mode .avatar-wallet-unit,
html.light-mode .avatar-wallet-box .avatar-wallet-unit,
html.light-mode .avatar-wallet-box span[style*="color:#fcd576"],
html.light-mode .avatar-panel span[style*="color:#fcd576"] {
    color: #b45309 !important;
    font-weight: 800 !important;
}

/* Account SSL Verification Box */
html.light-mode .avatar-panel div[style*="rgba(34,197,94"] {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}

html.light-mode .avatar-panel div[style*="color:#4ade80"] {
    color: #15803d !important;
    font-weight: 800 !important;
}

html.light-mode .avatar-panel div[style*="color:#64748b"] {
    color: #166534 !important;
    font-weight: 600 !important;
}

/* 7. Personal Info Form & Settings Overrides (Image 3 Fixes) */
html.light-mode .form-label,
html.light-mode .settings-title {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .form-input {
    background: #ffffff !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 600 !important;
}

html.light-mode .form-input:focus {
    border-color: #fcd576 !important;
    box-shadow: 0 0 0 3px rgba(252, 213, 118, 0.25) !important;
}

html.light-mode .gender-option {
    background: #ffffff !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .gender-option:hover {
    background: #fdfbf7 !important;
    border-color: #fcd576 !important;
}

/* "Công khai trang cá nhân" Toggle Row */
html.light-mode .form-section div[style*="border-top"] div[style*="color:#e2e8f0"],
html.light-mode div[style*="font-size:13px;font-weight:700;color:#e2e8f0"] {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .form-section div[style*="border-top"] div[style*="color:#64748b"],
html.light-mode div[style*="font-size:11px;color:#64748b"] {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .form-section div[style*="border-top"] {
    border-top-color: #e7e0d3 !important;
}

/* 8. Movie Cards & Grid in Watch History / Favorites / Watchlist (Image 4 Fixes) */
html.light-mode .movie-poster-wrap {
    background: #eae3d5 !important;
    border: 1px solid #d6cebf !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.1) !important;
}

html.light-mode .movie-card:hover .movie-poster-wrap {
    border-color: #fcd576 !important;
    box-shadow: 0 8px 22px rgba(78, 64, 45, 0.2) !important;
}

/* Movie Progress Text (e.g. Tập 01 · 0m / 120m) */
html.light-mode .movie-info div[style*="color:#94a3b8"] {
    color: #44403c !important;
    font-weight: 700 !important;
}

/* Movie Title below poster (Quý Ông Thế Giới Ng..., Sếp Chính Là Thần T...) */
html.light-mode .movie-info .movie-title,
html.light-mode .movie-info div[style*="color:#f8fafc"] {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

/* Movie Subtitle / Year below title */
html.light-mode .movie-info div[style*="color:#64748b"] {
    color: #57534e !important;
    font-weight: 650 !important;
}

/* Progress line bar background */
html.light-mode .movie-card div[style*="background:rgba(255,255,255,0.12)"] {
    background: #eae3d5 !important;
}

/* Panel Header Text (Favorites / History / Playlists count text) */
html.light-mode .panel-card h2,
html.light-mode .panel-card h3,
html.light-mode .panel-card h4 {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .panel-card div[style*="color:#94a3b8"],
html.light-mode .panel-card span[style*="color:#94a3b8"] {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .panel-card span[style*="background:rgba(255,255,255,0.05)"] {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #44403c !important;
    font-weight: 650 !important;
}

/* Shop Cards in Light Mode */
html.light-mode .shop-card {
    background: #fdfbf7 !important;
    border: 1px solid #e7e0d3 !important;
}

html.light-mode .shop-card:hover {
    background: #ffffff !important;
    border-color: #fcd576 !important;
    box-shadow: 0 8px 24px rgba(78, 64, 45, 0.1) !important;
}

html.light-mode .shop-card-title {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .shop-card-desc {
    color: #44403c !important;
    font-weight: 550 !important;
}

html.light-mode .shop-price {
    color: #b45309 !important;
    font-weight: 900 !important;
}

html.light-mode .shop-card-footer {
    border-top-color: #e7e0d3 !important;
}

/* Achievements in Light Mode */
html.light-mode .achievements-header-title {
    color: #1c1917 !important;
}

html.light-mode .achievements-header-sub,
html.light-mode .stat-card-label {
    color: #44403c !important;
    font-weight: 650 !important;
}

html.light-mode .achievement-stat-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
}

html.light-mode .stat-card-val {
    color: #1c1917 !important;
}

html.light-mode .achievement-card.unlocked {
    background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 1.5px solid #86efac !important;
}

html.light-mode .achievement-card.unlocked .achievement-title {
    color: #1c1917 !important;
}

html.light-mode .achievement-card.locked {
    background: #fdfbf7 !important;
    border: 1px solid #e7e0d3 !important;
}

html.light-mode .achievement-card.locked .achievement-title {
    color: #44403c !important;
    font-weight: 700 !important;
}

html.light-mode .achievement-desc {
    color: #57534e !important;
    font-weight: 550 !important;
}

/* Settings Tab Cards in Light Mode */
html.light-mode div[style*="background: rgba(22, 25, 37, 0.95)"] {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode div[style*="font-size: 17px; font-weight: 800; color: #ffffff"] {
    color: #1c1917 !important;
}

html.light-mode div[style*="font-size: 13px; color: #94a3b8"] {
    color: #44403c !important;
    font-weight: 600 !important;
}

/* Notifications List in Light Mode */
html.light-mode .notif-item {
    border-bottom: 1px solid #e7e0d3 !important;
}

html.light-mode .notif-item.unread {
    background: #fffdf8 !important;
}

html.light-mode .notif-item div[style*="font-size:13.5px"] {
    color: #1c1917 !important;
}

html.light-mode .notif-item div[style*="font-size:12px;color:#64748b"] {
    color: #44403c !important;
    font-weight: 600 !important;
}

/* 9. Playlist Tab Light Mode Overrides (Grid Cards & Detail View) */
html.light-mode .playlist-back-btn {
    color: #44403c !important;
    font-weight: 650 !important;
}
html.light-mode .playlist-back-btn:hover {
    color: #d97706 !important;
}

html.light-mode .playlist-info-card,
html.light-mode .playlist-movies-area {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode .playlist-tag-badge {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}

html.light-mode .playlist-count-text {
    color: #57534e !important;
}

html.light-mode .playlist-detail-title {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .playlist-detail-desc {
    color: #78716c !important;
}

html.light-mode .playlist-edit-btn {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
}
html.light-mode .playlist-edit-btn:hover {
    background: #eae3d5 !important;
}

html.light-mode .playlist-delete-btn {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
}
html.light-mode .playlist-delete-btn:hover {
    background: #fca5a5 !important;
    color: #991b1b !important;
}

html.light-mode .playlist-movie-poster-wrap {
    background: #eae3d5 !important;
    border: 1px solid #d6cebf !important;
}

html.light-mode .playlist-movie-name {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .playlist-movie-year {
    color: #78716c !important;
}

html.light-mode .playlist-empty-text {
    color: #57534e !important;
}

/* Playlist Grid Cards in List View */
html.light-mode .playlist-grid-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode .playlist-grid-card:hover {
    background: #fffdf9 !important;
    border-color: #fcd576 !important;
    box-shadow: 0 8px 24px rgba(78, 64, 45, 0.12) !important;
}

html.light-mode .playlist-card-thumb-area {
    background: #f5f0e6 !important;
    border: 1px solid #e7e0d3 !important;
}

html.light-mode .playlist-card-title {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .playlist-card-desc {
    color: #57534e !important;
}

html.light-mode .playlist-card-footer {
    border-top-color: #e7e0d3 !important;
}

html.light-mode .playlist-card-count {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #57534e !important;
    font-weight: 700 !important;
}

html.light-mode .playlist-mini-edit {
    background: #f5f0e6 !important;
    color: #57534e !important;
}
html.light-mode .playlist-mini-edit:hover {
    background: #eae3d5 !important;
    color: #1c1917 !important;
}

html.light-mode .playlist-mini-delete {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
html.light-mode .playlist-mini-delete:hover {
    background: #fca5a5 !important;
    color: #991b1b !important;
}

/* 10. Create Playlist Modal Light Mode Overrides (Image 1 Fixes) */
html.light-mode .ap-modal-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 24px 60px rgba(78, 64, 45, 0.22) !important;
    color: #1c1917 !important;
}

html.light-mode .ap-modal-title {
    color: #1c1917 !important;
    font-weight: 900 !important;
}

html.light-mode .ap-modal-sub {
    color: #57534e !important;
}

html.light-mode .ap-modal-label {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .ap-modal-input,
html.light-mode .ap-modal-textarea {
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 600 !important;
}

html.light-mode .ap-modal-input::placeholder,
html.light-mode .ap-modal-textarea::placeholder {
    color: #78716c !important;
    opacity: 1 !important;
}

html.light-mode .ap-modal-input:focus,
html.light-mode .ap-modal-textarea:focus {
    border-color: #fcd576 !important;
    box-shadow: 0 0 0 3px rgba(252, 213, 118, 0.25) !important;
    background: #fffdf9 !important;
}

html.light-mode .ap-modal-cancel-btn {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .ap-modal-cancel-btn:hover {
    background: #eae3d5 !important;
}

html.light-mode .ap-modal-close-btn {
    color: #57534e !important;
}

html.light-mode .ap-modal-close-btn:hover {
    color: #d97706 !important;
}

/* 11. Settings Tab & Quality Preference Buttons Light Mode (Image 2 Fixes) */
html.light-mode .settings-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode .settings-row {
    border-bottom-color: #e7e0d3 !important;
}

html.light-mode .setting-item-title {
    color: #1c1917 !important;
    font-weight: 800 !important;
}

html.light-mode .setting-item-desc {
    color: #57534e !important;
    font-weight: 500 !important;
}

html.light-mode .quality-option-btn {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #57534e !important;
    font-weight: 700 !important;
}

html.light-mode .quality-option-btn:hover {
    background: #eae3d5 !important;
    color: #1c1917 !important;
}

html.light-mode .quality-option-btn.active {
    background: #fef3c7 !important;
    border: 1.5px solid #fde68a !important;
    color: #b45309 !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.15) !important;
}

/* 12. Achievements Tab Stat & Badge Cards Light Mode (Image 3 Fixes) */
html.light-mode .achievement-val-text {
    color: #1c1917 !important;
    font-weight: 900 !important;
}

html.light-mode .achievement-total-text {
    color: #57534e !important;
    font-weight: 700 !important;
}

html.light-mode .badge-status-tag.unlocked {
    background: #e0e7ff !important;
    border: 1px solid #a5b4fc !important;
    color: #3730a3 !important;
    font-weight: 800 !important;
}

html.light-mode .badge-status-tag.locked {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #78716c !important;
    font-weight: 700 !important;
}

html.light-mode .achievement-reward {
    color: #57534e !important;
    font-weight: 600 !important;
}

html.light-mode .achievement-reward-pts {
    color: #15803d !important;
    font-weight: 800 !important;
}

/* 13. Profile Page Action Buttons (Đổi mật khẩu, Lưu thay đổi, Giới tính radio) */
html.light-mode .btn-secondary,
html.light-mode .btn-change-password-toggle {
    background: #f5f0e6 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .btn-secondary:hover,
html.light-mode .btn-change-password-toggle:hover {
    background: #eae3d5 !important;
    color: #d97706 !important;
    border-color: #fcd576 !important;
}

html.light-mode .btn-primary,
html.light-mode .btn-save-profile {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    color: #0d0f1a !important;
    -webkit-text-fill-color: #0d0f1a !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

html.light-mode .btn-primary:hover,
html.light-mode .btn-save-profile:hover {
    background: linear-gradient(135deg, #ffe08c 0%, #d97706 100%) !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5) !important;
}

html.light-mode .password-card-container {
    background: #ffffff !important;
    border: 1.5px solid #e7e0d3 !important;
    box-shadow: 0 4px 18px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode .password-card-container .form-input {
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
}

html.light-mode .password-card-container .form-input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

html.light-mode .avatar-panel {
    background: #ffffff !important;
    border: 1.5px solid #e7e0d3 !important;
    box-shadow: 0 4px 20px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .avatar-panel-cover {
    border-bottom: 1px solid #e7e0d3 !important;
}

/* Gender Radio Options (Nam, Nữ, Khác) */
html.light-mode .gender-option {
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

html.light-mode .gender-option:hover {
    background: #fdfbf7 !important;
    border-color: #fcd576 !important;
}

html.light-mode .gender-option input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #d6cebf !important;
    border-radius: 50% !important;
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: inline-grid !important;
    place-content: center !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

html.light-mode .gender-option input[type="radio"]::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    background-color: #f59e0b !important;
}

html.light-mode .gender-option input[type="radio"]:checked {
    border-color: #f59e0b !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html.light-mode .gender-option input[type="radio"]:checked::before {
    transform: scale(1) !important;
}

html.light-mode .gender-option:has(input[type="radio"]:checked),
html.light-mode .gender-option:has(input:checked) {
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

html.light-mode .privacy-toggle-box {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light-mode .privacy-toggle-box span {
    color: #475569 !important;
}

/* ==========================================================================
   14. ITEM SHOP (CỬA HÀNG VẬT PHẨM) LIGHT MODE OVERRIDES
   ========================================================================== */
html.light-mode .shop-main-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html.light-mode .shop-header-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.light-mode .shop-header-sub {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.light-mode .shop-balance-card {
    background: #fffdf8 !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.12) !important;
}

html.light-mode .shop-balance-card .shop-coin-amount,
html.light-mode .shop-coin-amount {
    color: #b45309 !important;
    font-weight: 900 !important;
}

/* Light Mode for Header Coin Chip */
html.light-mode .header-coin-chip {
    background: #fffdf5 !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15) !important;
}
html.light-mode .header-coin-chip:hover {
    border-color: #d97706 !important;
    box-shadow: 0 3px 12px rgba(217, 119, 6, 0.22) !important;
}
html.light-mode .header-coin-val {
    color: #b45309 !important;
    font-weight: 900 !important;
}
html.light-mode .header-coin-unit {
    color: #b45309 !important;
    font-weight: 800 !important;
}

/* Light Mode for Floating Seed Demo FAB */
html.light-mode .seed-demo-fab {
    background: linear-gradient(135deg, #ffffff 0%, #fdf4ff 100%) !important;
    border: 1.5px solid #d8b4fe !important;
    border-right: none !important;
    color: #9333ea !important;
    box-shadow: -4px 6px 18px rgba(147, 51, 234, 0.18) !important;
}
html.light-mode .seed-demo-fab:hover {
    background: #faf5ff !important;
    border-color: #c084fc !important;
    color: #7e22ce !important;
    box-shadow: -6px 10px 24px rgba(147, 51, 234, 0.28) !important;
}

/* Desktop Light Mode (min-width: 1024px): 100% keep original desktop styles */
@media (min-width: 1024px) {
    html.light-mode .mobile-profile-back-btn,
    html.light-mode #mobileProfileBackBtn {
        display: none !important;
    }
    html.light-mode .header-coin-chip,
    html.light-mode #headerCoinChip {
        display: none !important;
    }
    html.light-mode .seed-demo-fab,
    html.light-mode #seedDemoFab {
        display: none !important;
    }
    html.light-mode .seed-demo-btn,
    html.light-mode #headerSeedDemoBtn {
        display: inline-flex !important;
        background: #fdf4ff !important;
        border: 1px solid #d8b4fe !important;
        color: #9333ea !important;
        box-shadow: 0 2px 8px rgba(147, 51, 234, 0.1) !important;
    }
    html.light-mode .daily-bonus-btn,
    html.light-mode #headerDailyBonusBtn {
        display: inline-flex !important;
    }
    html.light-mode .content-header-badge,
    html.light-mode #headerBadge {
        display: inline-flex !important;
    }

    /* Classic Desktop Underline Shop Tabs */
    html.light-mode .shop-tabs-bar {
        background: transparent !important;
        border: none !important;
        border-bottom: 1.5px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 0 0 2px 0 !important;
        border-radius: 0 !important;
        gap: 24px !important;
        width: 100% !important;
    }
    html.light-mode .shop-cat-tab {
        flex: none !important;
        width: auto !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2.5px solid transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px 0 3px 0 !important;
        color: #64748b !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }
    html.light-mode .shop-cat-tab:hover {
        color: #0f172a !important;
        background: transparent !important;
    }
    html.light-mode .shop-cat-tab.active {
        background: transparent !important;
        border: none !important;
        border-bottom: 2.5px solid #6366f1 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #0f172a !important;
        font-weight: 800 !important;
    }
    html.light-mode .shop-cat-tab .shop-tab-icon {
        display: none !important;
    }
    html.light-mode .shop-cat-tab .shop-tab-title {
        font-size: 13.5px !important;
        color: inherit !important;
        font-weight: inherit !important;
    }
    html.light-mode .shop-cat-tab .shop-tab-badge {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-left: 4px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: inherit !important;
        opacity: 0.7 !important;
    }
}

/* Mobile Light Mode for Shop Segmented Pill Tabs (max-width: 1023px) */
@media (max-width: 1023px) {
    html.light-mode .shop-main-panel {
        padding: 12px 10px !important;
    }
    html.light-mode .shop-tabs-bar {
        background: #e2e8f0 !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        padding: 5px !important;
        border-radius: 14px !important;
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html.light-mode .shop-tabs-bar::-webkit-scrollbar {
        display: none !important;
    }
    html.light-mode .shop-cat-tab {
        color: #475569 !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        flex: 1 1 0 !important;
        min-width: max-content !important;
        padding: 8px 13px !important;
        gap: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: 1px solid transparent !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    html.light-mode .shop-cat-tab .shop-tab-icon {
        display: none !important;
    }
    html.light-mode .shop-cat-tab .shop-tab-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
    }
    html.light-mode .shop-cat-tab:hover {
        color: #0f172a !important;
        background: rgba(255, 255, 255, 0.65) !important;
    }
    html.light-mode .shop-cat-tab .shop-tab-badge {
        background: rgba(0, 0, 0, 0.07) !important;
        color: #475569 !important;
        border: none !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        padding: 2px 7px !important;
        border-radius: 10px !important;
        line-height: 1.2 !important;
        flex-shrink: 0 !important;
        margin-left: 2px !important;
    }
    html.light-mode .shop-cat-tab.active {
        background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
        color: #1a1000 !important;
        border: 1px solid #d97706 !important;
        box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35) !important;
        font-weight: 900 !important;
    }
    html.light-mode .shop-cat-tab.active .shop-tab-title {
        color: #1a1000 !important;
        font-weight: 900 !important;
    }
    html.light-mode .shop-cat-tab.active .shop-tab-badge {
        background: rgba(0, 0, 0, 0.22) !important;
        color: #1a1000 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        font-weight: 900 !important;
    }
}

/* Light Mode Rarity Sub-Pills */
html.light-mode .shop-pill-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .shop-pill-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
html.light-mode .shop-pill-btn.active {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    border: 1px solid #d97706 !important;
    color: #1a1000 !important;
    font-weight: 900 !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
}
html.light-mode .shop-pill-btn.pill-owned {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #15803d !important;
    font-weight: 700 !important;
}
html.light-mode .shop-pill-btn.pill-owned.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* Light Mode Search Input */
html.light-mode #shop-search-input {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode #shop-search-input::placeholder {
    color: #64748b !important;
}

/* Page Counter & Info Labels in Light Mode */
html.light-mode .shop-page-info-bar {
    color: #475569 !important;
    font-weight: 650 !important;
}
html.light-mode .shop-page-info-bar span {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light-mode .shop-item-card {
    background: #fdfbf7 !important;
    border: 1.5px solid #e7e0d3 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode .shop-item-card.equipped {
    border: 2px solid #6366f1 !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.2) !important;
}

html.light-mode .shop-preview-box {
    background: linear-gradient(135deg, #f7f2e8 0%, #ebe2d2 100%) !important;
    border: 1px solid #e4dac8 !important;
    box-shadow: inset 0 2px 6px rgba(120, 100, 70, 0.08) !important;
}

/* Do NOT override the text gradient/animation inside the chip */
html.light-mode .shop-name-text-render {
    color: unset !important;
    background-color: unset !important;
}

html.light-mode .shop-rarity-tag {
    color: #475569 !important;
    font-weight: 800 !important;
}

html.light-mode .shop-item-name {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.light-mode .shop-btn-equipped {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
    font-weight: 800 !important;
}

html.light-mode .shop-btn-equip {
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .shop-btn-equip:hover {
    background: #f5f0e6 !important;
    border-color: #6366f1 !important;
    color: #4338ca !important;
}

html.light-mode .shop-corner-badge {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

html.light-mode .shop-page-nav-btn {
    background: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode .shop-page-nav-btn[disabled] {
    background: #f0eae1 !important;
    border-color: #e2d9c8 !important;
    color: #a8a29e !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
}

html.light-mode .shop-page-nav-btn:not([disabled]):hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

html.light-mode .shop-btn-buy {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 50%, #d97706 100%) !important;
    color: #1a1000 !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

/* Shop Cutting-Edge Keyframe Animations */
@keyframes shopSpinGlow {
    0% { transform: rotate(0deg); box-shadow: 0 0 16px #6366f1, 0 0 28px #ec4899; }
    50% { transform: rotate(180deg); box-shadow: 0 0 28px #3b82f6, 0 0 38px #8b5cf6; }
    100% { transform: rotate(360deg); box-shadow: 0 0 16px #6366f1, 0 0 28px #ec4899; }
}

@keyframes shopPulseGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.65); transform: scale(1); }
    50% { box-shadow: 0 0 28px rgba(245, 158, 11, 0.95); transform: scale(1.04); }
}

@keyframes shopFireFlicker {
    0%, 100% { box-shadow: 0 0 16px #ef4444, 0 0 32px #f97316; border-color: #ef4444; }
    50% { box-shadow: 0 0 28px #f59e0b, 0 0 48px #dc2626; border-color: #f59e0b; }
}

@keyframes shopRainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shopDiamondShine {
    0%, 100% { border-color: #38bdf8; box-shadow: 0 0 16px #38bdf8, inset 0 0 10px #ffffff; }
    50% { border-color: #e0f2fe; box-shadow: 0 0 30px #7dd3fc, inset 0 0 20px #38bdf8; }
}

/* ==========================================================================
   CUSTOM EQUIPPED SIDEBAR BANNER COVERS (Dark & Light Mode)
   ========================================================================== */
.sidebar-cover-wrap {
    position: relative !important;
    height: 105px !important;
    min-height: 105px !important;
    border-radius: 20px 20px 16px 16px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.light-mode .sidebar-cover-wrap {
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.08) !important;
    border-bottom: 1px solid #e7e0d3 !important;
}
.sidebar-cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: inherit !important;
    transition: background 0.3s ease, background-size 0.3s ease;
}
.sidebar-avatar-wrap {
    margin-top: -54px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
}
html.light-mode .sidebar-avatar {
    border-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(78, 64, 45, 0.15) !important;
}
.user-avatar-frame-wrap img {
    filter: none !important;
    -webkit-filter: none !important;
}
.sidebar-user-info {
    padding: 4px 16px 6px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.sidebar-username {
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    width: 100% !important;
}
.sidebar-email {
    text-align: center !important;
    width: 100% !important;
}
.sidebar-badge {
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.sidebar-cover.has-custom-banner {
    background-size: cover !important;
}
.sidebar-cover.ap-banner-banner_default,
html.light-mode .sidebar-cover.ap-banner-banner_default {
    background: linear-gradient(135deg, #2d3748 0%, #1e293b 50%, #0f172a 100%) !important;
}
.sidebar-cover.ap-banner-banner_gold,
html.light-mode .sidebar-cover.ap-banner-banner_gold {
    background: linear-gradient(135deg, #78350f 0%, #b45309 35%, #f59e0b 70%, #fef08a 100%) !important;
}
.sidebar-cover.ap-banner-banner_forest,
html.light-mode .sidebar-cover.ap-banner-banner_forest {
    background: linear-gradient(135deg, #064e3b 0%, #047857 35%, #10b981 70%, #6ee7b7 100%) !important;
}
.sidebar-cover.ap-banner-banner_cyber,
html.light-mode .sidebar-cover.ap-banner-banner_cyber {
    background: linear-gradient(135deg, #3b0764 0%, #6b21a8 35%, #a855f7 70%, #38bdf8 100%) !important;
}
.sidebar-cover.ap-banner-banner_sakura,
html.light-mode .sidebar-cover.ap-banner-banner_sakura {
    background: linear-gradient(135deg, #831843 0%, #be185d 35%, #ec4899 70%, #fbcfe8 100%) !important;
}
.sidebar-cover.ap-banner-banner_sunset,
html.light-mode .sidebar-cover.ap-banner-banner_sunset {
    background: linear-gradient(135deg, #1e1b4b 0%, #431407 30%, #ea580c 70%, #fcd34d 100%) !important;
}
.sidebar-cover.ap-banner-banner_space,
html.light-mode .sidebar-cover.ap-banner-banner_space {
    background: linear-gradient(135deg, #020617 0%, #1e1b4b 35%, #4338ca 70%, #818cf8 100%) !important;
}
.sidebar-cover.ap-banner-banner_meteor,
html.light-mode .sidebar-cover.ap-banner-banner_meteor {
    background: linear-gradient(135deg, #450a0a 0%, #991b1b 35%, #ea580c 70%, #fde047 100%) !important;
}
.sidebar-cover.ap-banner-banner_cinema,
html.light-mode .sidebar-cover.ap-banner-banner_cinema {
    background: linear-gradient(135deg, #450a0a 0%, #b91c1c 30%, #f59e0b 70%, #fef08a 100%) !important;
    background-size: 200% 200% !important;
    animation: shopRainbowShift 4s ease infinite !important;
}

/* Mobile Header: Hide username & KEEP chevron next to avatar in light mode */
@media (max-width: 768px) {
    html.light-mode #userNavProfile {
        gap: 8px !important;
    }
    html.light-mode .ap-user-bar-trigger .ap-user-name-text,
    html.light-mode span.ap-user-name-text {
        display: none !important;
    }
    html.light-mode .ap-user-bar-trigger .ap-user-chevron-icon,
    html.light-mode .ap-user-chevron-icon {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        margin-left: 1px !important;
        margin-right: 2px !important;
        color: #475569 !important;
        flex-shrink: 0 !important;
    }
    html.light-mode .nav-profile-dropdown.is-open .ap-user-chevron-icon {
        color: #d97706 !important;
    }
    html.light-mode .ap-user-bar-trigger {
        display: inline-flex !important;
        align-items: center !important;
        padding: 2px 6px 2px 2px !important;
        gap: 4px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 9999px !important;
    }
}

/* ─── Light Mode Mobile Profile Back Button & Details ─── */
@media (max-width: 1023px) {
    html.light-mode .mobile-profile-back-btn {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        color: #1e293b !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    html.light-mode .mobile-profile-back-btn:active {
        background: #f1f5f9 !important;
        transform: scale(0.95);
    }
}

html.light-mode .sidebar-nav-item span {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.light-mode .sidebar-nav-item:hover span,
html.light-mode .sidebar-nav-item.active span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* ─── Light Mode Profile Sub-Header & Movie Cards V2 ─── */
html.light-mode .panel-sub-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #fdfbf7 !important;
}

html.light-mode .panel-sub-title {
    color: #1e293b !important;
}

html.light-mode .panel-sub-badge {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-mode .panel-sub-clear-btn {
    background: #ffffff !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
}

html.light-mode .panel-sub-clear-btn:hover {
    background: #fef2f2 !important;
}

html.light-mode .playlist-sub-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #fdfbf7 !important;
}

html.light-mode .playlist-btn-seed {
    background: #ffffff !important;
    color: #b45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

html.light-mode .playlist-btn-create {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

/* ─── Light Mode Cinema Schedule Genre Filter Pills & Refresh Button ─── */
html.light-mode .cine-genre-scroll-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fdfbf7 !important;
}

html.light-mode .cine-genre-pill {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .cine-genre-pill:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

html.light-mode .cine-genre-pill.active {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.25) !important;
}

html.light-mode .cinema-refresh-btn {
    background: #ffffff !important;
    color: #b45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .cinema-refresh-btn:hover {
    background: #fffbeb !important;
}

/* ─── Light Mode Account Form Inputs & Date Picker ─── */
html.light-mode .account-form-grid input,
html.light-mode .account-form-grid textarea,
html.light-mode .form-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
}

html.light-mode input[type="date"] {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
}

html.light-mode .gender-option {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
}

html.light-mode .privacy-toggle-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .privacy-toggle-box span {
    color: #1e293b !important;
}

html.light-mode .movie-card {
    background: transparent !important;
}

html.light-mode .movie-poster-wrap {
    background: #e2e8f0 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .movie-title {
    color: #1e293b !important;
}

html.light-mode .movie-subtitle {
    color: #64748b !important;
}

html.light-mode .movie-card-remove-btn {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .movie-card-remove-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

html.light-mode .tab-movies-pagination-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
}

/* ==========================================================================
   ACHIEVEMENTS & BADGES SYSTEM (LIGHT MODE)
   ========================================================================== */
html.light-mode .achievements-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #fefcf8 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .hero-level-emblem {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    border: 2px solid #f59e0b !important;
    color: #1a1000 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
}

html.light-mode .hero-rank-name {
    color: #0f172a !important;
}

html.light-mode .hero-xp-counter {
    color: #64748b !important;
}

html.light-mode .hero-progress-meta {
    color: #475569 !important;
}

html.light-mode .hero-progress-nums strong {
    color: #b45309 !important;
}

html.light-mode .hero-progress-track {
    background: #e2e8f0 !important;
}

html.light-mode .hero-progress-fill {
    background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

html.light-mode .achievement-stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

html.light-mode .achievement-stat-card:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
}

html.light-mode .stat-card-label {
    color: #64748b !important;
}

html.light-mode .stat-card-val {
    color: #0f172a !important;
}

html.light-mode .achievement-val-text {
    color: #4338ca !important;
}

html.light-mode .achievement-total-text {
    color: #94a3b8 !important;
}

html.light-mode .achieve-filter-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

html.light-mode .achieve-filter-pill:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light-mode .achieve-filter-pill.active {
    background: linear-gradient(135deg, #fcd576 0%, #f59e0b 100%) !important;
    border-color: #d97706 !important;
    color: #1a1000 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

html.light-mode .achieve-pill-count {
    background: rgba(0, 0, 0, 0.06) !important;
    color: inherit !important;
}

html.light-mode .achieve-filter-pill.active .achieve-pill-count {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #1a1000 !important;
}

/* ─── Ultra High-Contrast Light Mode Achievement Styling ─── */
html.light-mode .achievement-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .achievement-card.unlocked {
    background: linear-gradient(155deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 1.5px solid #22c55e !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12) !important;
}

html.light-mode .achievement-card.unlocked:hover {
    border-color: #16a34a !important;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.2) !important;
}

html.light-mode .achievement-card.locked {
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    opacity: 1 !important;
}

html.light-mode .achievement-card.locked:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

html.light-mode .achievement-code-tag {
    color: #64748b !important;
    font-weight: 800 !important;
}

html.light-mode .achievement-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light-mode .achievement-card.locked .achievement-title {
    color: #1e293b !important;
    font-weight: 800 !important;
}

html.light-mode .achievement-desc {
    color: #475569 !important;
    font-weight: 600 !important;
}

html.light-mode .badge-status-tag.unlocked {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
    font-weight: 800 !important;
}

html.light-mode .badge-status-tag.locked {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 800 !important;
}

html.light-mode .achievement-card.unlocked .achievement-icon-box {
    background: #dcfce7 !important;
    border: 1.5px solid #86efac !important;
    color: #15803d !important;
}

html.light-mode .achievement-card.locked .achievement-icon-box {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

html.light-mode .reward-label {
    color: #64748b !important;
    font-weight: 600 !important;
}

html.light-mode .reward-xp {
    color: #15803d !important;
    font-weight: 800 !important;
}

html.light-mode .reward-xu {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html.light-mode .reward-badge-name {
    color: #64748b !important;
    font-weight: 600 !important;
}

html.light-mode .achievement-progress-track {
    background: #e2e8f0 !important;
}

html.light-mode .achievements-sub-title {
    color: #0f172a !important;
}

html.light-mode .achievements-sub-badge {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}

/* ══════════════════════════════════════════════════════════════ */
/* ─── FILTER PANEL LIGHT MODE (BỘ LỌC TÌM KIẾM TRÊN NỀN SÁNG) ─── */
/* ══════════════════════════════════════════════════════════════ */
html.light-mode #filterPanel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode #filterPanel h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light-mode .custom-dropdown-trigger {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

html.light-mode .custom-dropdown-trigger:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html.light-mode .custom-dropdown-trigger > span:first-child {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light-mode .filter-dropdown-val,
html.light-mode [id^="label_filter"] {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html.light-mode .filter-dropdown-chevron,
html.light-mode .dropdown-chevron {
    color: #b45309 !important;
    stroke: #b45309 !important;
}

html.light-mode .custom-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

html.light-mode .custom-dropdown-menu .dropdown-option {
    color: #334155 !important;
}

html.light-mode .custom-dropdown-menu .dropdown-option:hover {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

html.light-mode .custom-dropdown-menu .dropdown-option.bg-\[\#2c3048\] {
    background: #fef3c7 !important;
    color: #b45309 !important;
    font-weight: 800 !important;
}

html.light-mode .inactive-filter-btn {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
}

html.light-mode .inactive-filter-btn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

html.light-mode .active-filter-btn {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: 1px solid #d97706 !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

html.light-mode button[onclick="resetFilterPanel()"] {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

html.light-mode button[onclick="resetFilterPanel()"]:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ─── WATCH-TO-EARN & BREADCRUMB LIGHT MODE ─── */
html.light-mode .watch-to-earn-pill {
    background: #fffbeb !important;
    border: 1.5px solid #d97706 !important;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.15) !important;
}

html.light-mode .watch-to-earn-pill:hover {
    background: #fef3c7 !important;
}

html.light-mode .watch-to-earn-text {
    color: #78350f !important;
    font-weight: 900 !important;
}

html.light-mode .watch-to-earn-dot {
    background: #b45309 !important;
    box-shadow: 0 0 6px #b45309 !important;
}

html.light-mode #watchBreadcrumbEpName {
    color: #b45309 !important;
    font-weight: 900 !important;
}

/* 📱 Mobile: Không để viền bọc */
@media (max-width: 768px) {
    html.light-mode .watch-to-earn-pill,
    .watch-to-earn-pill {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   15. MOVIE DETAIL PAGE (/phim) LIGHT MODE OVERRIDES
   Warm Cinema Champagne Cream Theme (#f5f0e6)
   ========================================================================== */
html.light-mode body.page-phim-detail {
    background-color: #f5f0e6 !important;
    background: #f5f0e6 !important;
    color: #1c1917 !important;
}

html.light-mode .page-phim-detail .ambient-bg {
    display: none !important;
}

html.light-mode .page-phim-detail main.movie-content-zone {
    background: transparent !important;
    color: #1c1917 !important;
}

/* Titles & Info Headers */
html.light-mode .cinematic-gold-title {
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    text-shadow: none !important;
}

html.light-mode .cinematic-sub-title {
    color: #b45309 !important;
    text-shadow: none !important;
}

html.light-mode .movie-info-container {
    color: #57534e !important;
}

html.light-mode .movie-info-container .text-gray-300,
html.light-mode .movie-info-container .text-gray-500 {
    color: #78716c !important;
}

html.light-mode #breadcrumb-movie-name {
    color: #1c1917 !important;
    text-shadow: none !important;
}

html.light-mode .cinematic-gold-rating {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15) !important;
    text-shadow: none !important;
}

/* Action Buttons */
html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn) {
    background: #ffffff !important;
    color: #1c1917 !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn):hover {
    background: #fbf8f2 !important;
    border-color: #d6cebf !important;
    transform: translateY(-1px) !important;
}

html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn) svg {
    fill: #1c1917 !important;
}

html.light-mode .movie-actions-container button:not(.cinematic-gold-btn):not(#headerRatingBtn) span {
    color: #1c1917 !important;
    font-weight: 600 !important;
}

/* Tab Navigation */
html.light-mode .ap-tab-btn {
    color: #78716c !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

html.light-mode .ap-tab-btn:hover {
    color: #1c1917 !important;
}

html.light-mode .ap-tab-btn.active {
    color: #d97706 !important;
    border-color: #d97706 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

html.light-mode .ap-movie-tab-system div[class*="border-b"] {
    border-bottom-color: #e7e0d3 !important;
}

/* Episodes Grid & Buttons */
html.light-mode #episodes-desktop a,
html.light-mode #episodes-mobile a,
html.light-mode .ep-btn,
html.light-mode #server-list-desktop button,
html.light-mode #server-list-mobile button {
    background: #ffffff !important;
    color: #1c1917 !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 1px 4px rgba(78, 64, 45, 0.04) !important;
    font-weight: 600 !important;
}

html.light-mode #episodes-desktop a:hover,
html.light-mode #episodes-mobile a:hover,
html.light-mode .ep-btn:hover {
    background: #fffbeb !important;
    border-color: #fcd576 !important;
    color: #b45309 !important;
}

html.light-mode #episodes-desktop a.active,
html.light-mode #episodes-mobile a.active,
html.light-mode .ep-btn.active,
html.light-mode #server-list-desktop button.active,
html.light-mode #server-list-mobile button.active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #78350f !important;
    font-weight: 800 !important;
    border-color: #d97706 !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.22) !important;
}

html.light-mode #search-episode-input-desktop,
html.light-mode #search-episode-input-mobile {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
}

html.light-mode #toggleMoreMovieInfoBtn {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #b45309 !important;
    box-shadow: 0 2px 6px rgba(78, 64, 45, 0.08) !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    width: auto !important;
    max-width: max-content !important;
    height: auto !important;
}

html.light-mode #toggleMoreMovieInfoBtn:hover {
    background: #fef3c7 !important;
}

html.light-mode #toggleMoreMovieInfoBtn svg {
    color: #b45309 !important;
    stroke: #b45309 !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    flex-shrink: 0 !important;
}

/* Content, Headings & Cast Row */
html.light-mode #movie-content-section h2,
html.light-mode #movie-cast-side-section h2,
html.light-mode .ap-tab-panel h3,
html.light-mode h2.text-xl,
html.light-mode h2.text-lg {
    color: #1c1917 !important;
}

html.light-mode #movie-content {
    color: #44403c !important;
    font-weight: 450 !important;
}

html.light-mode #movie-cast-side-grid .actor-avatar-container {
    background: #ffffff !important;
    border: 2px solid #e7e0d3 !important;
    box-shadow: 0 4px 12px rgba(78, 64, 45, 0.08) !important;
}

html.light-mode #movie-cast-side-grid span,
html.light-mode #movie-cast-side-grid div[data-actor-name] span {
    color: #1c1917 !important;
    font-weight: 600 !important;
}

html.light-mode #movie-cast-side-grid .actor-initials {
    color: #b45309 !important;
    background: #fef3c7 !important;
    font-weight: 800 !important;
}

/* Top Weekly Sidebar */
html.light-mode .ap-top-weekly-title {
    color: #1c1917 !important;
}

html.light-mode .ap-top-weekly-title svg {
    color: #d97706 !important;
    fill: #d97706 !important;
}

html.light-mode .ap-top-weekly-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 2px 8px rgba(78, 64, 45, 0.04) !important;
}

html.light-mode .ap-top-weekly-card.rank-1 {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
    border: 1.5px solid #fcd576 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.12) !important;
}

html.light-mode .ap-top-weekly-card.rank-2 {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
    border: 1.5px solid #7dd3fc !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1) !important;
}

html.light-mode .ap-top-weekly-card.rank-3 {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%) !important;
    border: 1.5px solid #fdba74 !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.1) !important;
}

html.light-mode .ap-top-weekly-item:hover .ap-top-weekly-card {
    background: #fbf8f2 !important;
    border-color: #d6cebf !important;
}

html.light-mode .ap-top-weekly-name {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode .ap-top-weekly-item:hover .ap-top-weekly-name {
    color: #d97706 !important;
}

html.light-mode .ap-top-weekly-origin,
html.light-mode .ap-top-weekly-meta,
html.light-mode .ap-top-weekly-badge {
    color: #78716c !important;
}

html.light-mode .ap-top-weekly-rank {
    -webkit-text-stroke: 1.5px #a8a29e !important;
    text-stroke: 1.5px #a8a29e !important;
    color: transparent !important;
}

html.light-mode .ap-top-weekly-rank.rank-1 {
    -webkit-text-stroke: 1.8px #d97706 !important;
    text-stroke: 1.8px #d97706 !important;
    color: rgba(217, 119, 6, 0.18) !important;
    filter: none !important;
}

html.light-mode .ap-top-weekly-rank.rank-2 {
    -webkit-text-stroke: 1.8px #0284c7 !important;
    text-stroke: 1.8px #0284c7 !important;
    color: rgba(2, 132, 199, 0.18) !important;
    filter: none !important;
}

html.light-mode .ap-top-weekly-rank.rank-3 {
    -webkit-text-stroke: 1.8px #ea580c !important;
    text-stroke: 1.8px #ea580c !important;
    color: rgba(234, 88, 12, 0.18) !important;
    filter: none !important;
}

/* Reaction Card & Comments */
html.light-mode #movie-reaction-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 20px rgba(78, 64, 45, 0.06) !important;
}

html.light-mode #movie-reaction-card p.text-gray-200 {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode #movie-reaction-card p.text-gray-400 {
    color: #78716c !important;
}

html.light-mode #movie-reaction-card button span:last-child {
    color: #57534e !important;
}

html.light-mode #sidebar-rating-score {
    color: #92400e !important;
}

html.light-mode #comments-section {
    background: transparent !important;
    color: #1c1917 !important;
}

html.light-mode #comments-section textarea {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
}

html.light-mode #comments-section textarea:focus {
    background: #ffffff !important;
    border-color: #d97706 !important;
    outline: none !important;
}

html.light-mode #comments-section .comment-item,
html.light-mode #comments-section .comment-card {
    background: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    color: #1c1917 !important;
}

html.light-mode #comments-section .comment-author {
    color: #1c1917 !important;
    font-weight: 700 !important;
}

html.light-mode #comments-section .comment-text {
    color: #44403c !important;
}

html.light-mode #comments-section .comment-time {
    color: #a8a29e !important;
}

/* ── PRESET AVATAR GALLERY MODAL (Light Mode) ── */
html.light-mode #presetAvatarModal {
    background: rgba(15, 23, 42, 0.6) !important;
}
html.light-mode #presetAvatarModal .preset-modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}
html.light-mode #presetAvatarModal .preset-modal-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}
html.light-mode #presetAvatarModal .preset-modal-sub {
    color: #64748b !important;
}
html.light-mode #presetAvatarModal .preset-modal-close-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
html.light-mode #presetAvatarModal .preset-modal-close-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
html.light-mode #presetAvatarModal .preset-tab-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
    font-weight: 700 !important;
}
html.light-mode #presetAvatarModal .preset-tab-btn.active {
    background: #0f172a !important;
    color: #fcd576 !important;
    border-color: #0f172a !important;
}
html.light-mode #presetAvatarModal .preset-avatar-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
}
html.light-mode #presetAvatarModal .preset-avatar-card:hover {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
}
html.light-mode #presetAvatarModal .preset-avatar-name {
    color: #1e293b !important;
    font-weight: 700 !important;
}
html.light-mode #presetAvatarModal .preset-modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}
html.light-mode #presetAvatarModal .preset-footer-sync {
    color: #475569 !important;
    font-weight: 600 !important;
}
html.light-mode #presetAvatarModal .preset-btn-upload-custom {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
}
html.light-mode #presetAvatarModal .preset-btn-upload-custom:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

/* Light Mode Playlist Cards */
html.light-mode .playlist-grid-card,
body.light-mode .playlist-grid-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode .playlist-grid-card:hover,
body.light-mode .playlist-grid-card:hover {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px);
}
html.light-mode .playlist-card-thumb-area,
body.light-mode .playlist-card-thumb-area {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
html.light-mode .playlist-grid-card h4,
body.light-mode .playlist-grid-card h4 {
    color: #0f172a !important;
}
html.light-mode .playlist-grid-card p,
body.light-mode .playlist-grid-card p {
    color: #64748b !important;
}
html.light-mode .playlist-grid-card span,
body.light-mode .playlist-grid-card span {
    color: #475569 !important;
}

/* ==========================================================================
   STATIC INFORMATION & POLICY PAGES IN LIGHT MODE (Cream Theme Adaptation)
   (/hoi-dap, /chinh-sach-bao-mat, /dieu-khoan-su-dung, /gioi-thieu, /lien-he)
   ========================================================================== */

/* Hero Headers */
html.light-mode main section.static-hero-section,
html.light-mode main section[class*="from-[#1c1e2b]"] {
    background-image: none !important;
    background: linear-gradient(180deg, #ede6d8 0%, #f5f0e6 100%) !important;
    border-bottom: 1px solid #e0d7c5 !important;
}

html.light-mode main h1,
html.light-mode main .static-page-title {
    color: #1c1917 !important;
}

html.light-mode main .static-page-desc,
html.light-mode main .static-hero-section p {
    color: #57534e !important;
}

html.light-mode main .static-pill-badge,
html.light-mode main div[class*="rounded-full"][class*="uppercase"] {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fcd34d !important;
}

/* Static Cards (Privacy, Terms, About, Contact, FAQ) */
html.light-mode main .static-card,
html.light-mode main .bg-\[\#1f212d\],
html.light-mode main .bg-\[\#20222d\] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 4px 16px rgba(78, 64, 45, 0.05) !important;
}

html.light-mode main .static-card:hover,
html.light-mode main .bg-\[\#1f212d\]:hover,
html.light-mode main .bg-\[\#20222d\]:hover {
    border-color: #d97706 !important;
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.1) !important;
}

/* Headings & Text Inside Cards */
html.light-mode main .static-card-title,
html.light-mode main .static-item-title,
html.light-mode main h2,
html.light-mode main h3 {
    color: #1c1917 !important;
}

html.light-mode main p,
html.light-mode main li,
html.light-mode main .text-gray-300 {
    color: #44403c !important;
}

html.light-mode main .text-gray-400,
html.light-mode main .static-item-sub {
    color: #78716c !important;
}

html.light-mode main strong.text-white {
    color: #1c1917 !important;
}

html.light-mode main strong.text-\[\#fcd576\],
html.light-mode main .text-\[\#fcd576\] {
    color: #b45309 !important;
}

/* Sub-boxes (e.g. DMCA info, Cookie note, expanded accordion body) */
html.light-mode main .static-sub-box,
html.light-mode main .bg-\[\#181921\],
html.light-mode main .about-expand-body {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    border: 1px solid #e7e0d3 !important;
    color: #44403c !important;
}

/* Section Dividers on About / Static Pages */
html.light-mode main .border-white\/10,
html.light-mode main .border-white\/5 {
    border-color: #e7e0d3 !important;
}

/* Number Badges & Buttons in About Page */
html.light-mode main div[class*="rounded-lg"][class*="bg-[#fcd576]/10"] {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

html.light-mode main button[class*="bg-white/5"] {
    background: #f5efe6 !important;
    color: #b45309 !important;
    border: 1px solid #e7e0d3 !important;
}
html.light-mode main button[class*="bg-white/5"]:hover {
    background: #fde68a !important;
    color: #92400e !important;
}

/* Contact Form Elements */
html.light-mode #contactForm input,
html.light-mode #contactForm select,
html.light-mode #contactForm textarea {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    border: 1px solid #d6cebf !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
}

html.light-mode #contactForm input:focus,
html.light-mode #contactForm select:focus,
html.light-mode #contactForm textarea:focus {
    background: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

html.light-mode #contactForm label {
    color: #57534e !important;
    font-weight: 700 !important;
}

html.light-mode #contactSuccessMsg {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

/* FAQ Search & Banner */
html.light-mode #faqSearchInput {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
}
html.light-mode #faqSearchInput:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

html.light-mode .static-banner-box {
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%) !important;
    border: 1px solid #fcd34d !important;
    box-shadow: 0 8px 30px rgba(217, 119, 6, 0.08) !important;
}

/* Footer Description Links in Light Mode */
html.light-mode footer.aphim-footer p a,
html.light-mode footer.aphim-footer .footer-desc-text a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    text-decoration: underline !important;
    display: inline !important;
}

/* Report Movie Modal in Light Mode */
html.light-mode #reportMovieModal {
    background: rgba(0, 0, 0, 0.65) !important;
}

html.light-mode #reportMovieModalCard {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e7e0d3 !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25) !important;
    color: #1c1917 !important;
}

html.light-mode #reportModalHeader {
    border-bottom: 1px solid #e7e0d3 !important;
}

html.light-mode #reportModalTitle {
    color: #1c1917 !important;
}

html.light-mode .report-modal-label {
    color: #57534e !important;
    font-weight: 700 !important;
}

html.light-mode #reportMovieTitleDisplay {
    background: #faf7f2 !important;
    border: 1px solid #d6cebf !important;
    color: #b45309 !important;
}

html.light-mode #reportIssueDropdownBtn {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
}

html.light-mode #reportIssueDropdownBtn:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

html.light-mode #reportIssueDropdownMenu {
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .report-issue-option {
    color: #292524 !important;
    -webkit-text-fill-color: #292524 !important;
}

html.light-mode .report-issue-option:hover,
html.light-mode .report-issue-option.active-issue-option {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
}

html.light-mode #reportIssueDesc {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d6cebf !important;
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
}

html.light-mode #reportIssueDesc:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

html.light-mode .report-btn-cancel {
    background: #f5efe6 !important;
    color: #57534e !important;
    border: 1px solid #d6cebf !important;
}
html.light-mode .report-btn-cancel:hover {
    background: #e8e0d0 !important;
    color: #1c1917 !important;
}

html.light-mode #reportSuccessTitle {
    color: #1c1917 !important;
}

html.light-mode #reportSuccessDesc {
    color: #57534e !important;
}

html.light-mode .report-btn-close {
    background: #f5efe6 !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebf !important;
}