/**
 * Dark Mode Styles cho Lesson Playing Page
 * 
 * Cơ chế hoạt động:
 * - Thêm class "dark-mode" vào thẻ <html> để kích hoạt
 * - Sử dụng CSS Variables để dễ tùy chỉnh
 * - Tương thích với RTL và tất cả các component hiện có
 * 
 * @version 1.0.0
 * @author sonmarketing
 */

/* =====================================================
 * CSS VARIABLES CHO DARK MODE
 * ===================================================== */
html.dark-mode {
    /* Background colors */
    --dm-bg-primary: #0f172a;      /* Nền chính */
    --dm-bg-secondary: #1e293b;    /* Nền card, sidebar */
    --dm-bg-tertiary: #334155;     /* Nền input, hover */
    --dm-bg-elevated: #1e293b;     /* Nền elevated elements */
    
    /* Text colors */
    --dm-text-primary: #f8fafc;    /* Text chính */
    --dm-text-secondary: #94a3b8;  /* Text phụ */
    --dm-text-muted: #64748b;      /* Text mờ */
    
    /* Border colors */
    --dm-border: rgba(148, 163, 184, 0.15);
    --dm-border-light: rgba(148, 163, 184, 0.08);
    
    /* Brand color - giữ nguyên để nhận diện thương hiệu */
    --dm-brand: var(--brand-color, #754ffe);
    --dm-brand-hover: #8b5cf6;
    
    /* Accent colors */
    --dm-success: #22c55e;
    --dm-warning: #f59e0b;
    --dm-danger: #ef4444;
    
    /* Shadows */
    --dm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --dm-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --dm-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* =====================================================
 * GLOBAL OVERRIDES
 * ===================================================== */
html.dark-mode,
html.dark-mode body {
    background-color: var(--dm-bg-primary);
    color: var(--dm-text-primary);
}

/* =====================================================
 * HEADER / NAVBAR
 * ===================================================== */
html.dark-mode .header-sticky,
html.dark-mode .course-playing-header,
html.dark-mode header {
    background-color: var(--dm-bg-secondary) !important;
    border-bottom: 1px solid var(--dm-border);
    box-shadow: var(--dm-shadow-sm);
}

html.dark-mode .header-sticky .nav-link,
html.dark-mode header .nav-link,
html.dark-mode header a {
    color: var(--dm-text-primary);
}

html.dark-mode .header-sticky .nav-link:hover,
html.dark-mode header .nav-link:hover {
    color: var(--dm-brand);
}

/* Logo text và title */
html.dark-mode .course-title-header,
html.dark-mode .header-title {
    color: var(--dm-text-primary);
}

/* Progress bar trong header */
html.dark-mode .course-progress-header {
    background-color: var(--dm-bg-tertiary);
}

/* =====================================================
 * VIDEO CONTAINER / PLAYER
 * ===================================================== */
html.dark-mode .course-playing-content {
    background-color: transparent;
}

html.dark-mode .course-playing-content .video-container {
    background-color: #000;
    border: 1px solid var(--dm-border);
}

html.dark-mode .course-playing-content .thumb {
    background-color: var(--dm-bg-secondary);
}

/* Title và info bên dưới video */
html.dark-mode .course-playing-content .content .cp-title {
    color: var(--dm-text-primary);
}

html.dark-mode .course-playing-content .content .cp-info {
    color: var(--dm-text-secondary);
}

/* Description */
html.dark-mode .description,
html.dark-mode .description p {
    color: var(--dm-text-secondary);
}

/* =====================================================
 * SIDEBAR - COURSE CONTENT LIST
 * ===================================================== */
html.dark-mode .course-playing-sidebar {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-md);
}

html.dark-mode .course-playing-sidebar > .title {
    color: var(--dm-text-primary);
}

/* Accordion (Section/Module) */
html.dark-mode .custom-accordion .accordion-item {
    background-color: transparent;
    border-color: var(--dm-border);
}

html.dark-mode .custom-accordion .accordion-item .accordion-header .accordion-button {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
}

html.dark-mode .custom-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
}

html.dark-mode .custom-accordion .accordion-item .accordion-header .accordion-button::after {
    filter: brightness(0) invert(1);
}

html.dark-mode .custom-accordion .accordion-item .accordion-body {
    background-color: transparent;
}

/* Lesson items trong sidebar */
html.dark-mode .course-content-items .item {
    background-color: transparent;
}

html.dark-mode .course-content-items .item:hover {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .course-content-items .item .left .title {
    color: var(--dm-text-secondary);
}

html.dark-mode .course-content-items .item:hover .left .title {
    color: var(--dm-text-primary);
}

html.dark-mode .course-content-items .item .left .icon {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .course-content-items .item .duration {
    color: var(--dm-text-muted);
}

/* Active lesson */
html.dark-mode .course-content-items .item.active {
    background-color: var(--dm-brand);
}

html.dark-mode .course-content-items .item.active .left .title {
    color: #fff;
}

html.dark-mode .course-content-items .item.active .left .icon {
    background-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .course-content-items .item.active .duration {
    color: rgba(255, 255, 255, 0.9);
}

/* Locked lesson */
html.dark-mode .course-content-items .item.lock .left .icon::before {
    filter: brightness(0) invert(0.6);
}

/* =====================================================
 * TABS (Bài học, Mới nhất, Đã lưu, Thông báo, Bài viết)
 * ===================================================== */
html.dark-mode .ct-tabs-custom-one {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .ct-tabs-custom-one button.nav-link {
    color: var(--dm-text-secondary);
}

html.dark-mode .ct-tabs-custom-one button.nav-link.active,
html.dark-mode .ct-tabs-custom-one button.nav-link:hover {
    color: var(--dm-brand);
}

/* Tab content panels */
html.dark-mode .tab-pane {
    color: var(--dm-text-secondary);
}

/* =====================================================
 * SIDEBAR TABS (Tiến độ, Q&A, Ghi chú, Thông báo, v.v.)
 * ===================================================== */
html.dark-mode .sidebar-tabs-header {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .sidebar-tabs-content {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
}

/* =====================================================
 * SIDEBAR TABS NAVIGATION (sidebar-tabs.css override)
 * Bài học, Mới nhất, Đã lưu, Thông báo, Bài viết
 * ===================================================== */
html.dark-mode .sidebar-tabs-nav {
    background-color: var(--dm-bg-secondary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .sidebar-tab-btn {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .sidebar-tab-btn:hover {
    color: var(--dm-brand) !important;
    background-color: rgba(117, 79, 254, 0.1) !important;
}

html.dark-mode .sidebar-tab-btn.active {
    color: var(--dm-brand) !important;
    border-bottom-color: var(--dm-brand) !important;
}

/* Tab pane content */
html.dark-mode .sidebar-tab-pane {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
}

/* Loading skeleton trong dark mode */
html.dark-mode .skeleton-item {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .skeleton-thumb,
html.dark-mode .skeleton-line {
    background: linear-gradient(90deg, var(--dm-bg-tertiary) 25%, #475569 50%, var(--dm-bg-tertiary) 75%);
    background-size: 200% 100%;
}

/* Empty state */
html.dark-mode .sidebar-tab-empty,
html.dark-mode .sidebar-empty-state {
    color: var(--dm-text-secondary);
}

html.dark-mode .sidebar-tab-empty-icon {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .sidebar-tab-empty-icon i {
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-tab-empty-title {
    color: var(--dm-text-primary);
}

html.dark-mode .sidebar-tab-empty-text {
    color: var(--dm-text-secondary);
}

html.dark-mode .sidebar-empty-state i {
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-empty-state p {
    color: var(--dm-text-secondary);
}

/* Lesson item trong tab */
html.dark-mode .sidebar-lesson-item {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .sidebar-lesson-item:hover {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .sidebar-lesson-title {
    color: var(--dm-text-primary);
}

html.dark-mode .sidebar-lesson-meta {
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-lesson-thumb {
    background-color: var(--dm-bg-tertiary);
}

/* Blog item */
html.dark-mode .sidebar-blog-item {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .sidebar-blog-item:hover {
    background-color: var(--dm-bg-tertiary);
}

/* Blog item text */
html.dark-mode .sidebar-blog-title {
    color: var(--dm-text-primary);
}

html.dark-mode .sidebar-blog-category {
    color: var(--dm-brand);
}

html.dark-mode .sidebar-blog-date {
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-blog-thumb {
    background-color: var(--dm-bg-tertiary);
}

/* =====================================================
 * BLOG SECTIONS (Bài viết liên quan, Bài viết mới nhất)
 * ===================================================== */
html.dark-mode .sidebar-blogs-section {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .sidebar-blogs-section-header {
    color: var(--dm-text-secondary);
}

html.dark-mode .sidebar-blogs-section-header i {
    color: var(--dm-brand);
}

html.dark-mode .sidebar-blogs-view-all {
    background-color: rgba(117, 79, 254, 0.1);
    color: var(--dm-brand);
}

html.dark-mode .sidebar-blogs-view-all:hover {
    background-color: rgba(117, 79, 254, 0.2);
}

/* =====================================================
 * ANNOUNCEMENTS (Thông báo) TAB
 * ===================================================== */
html.dark-mode .sidebar-announcements-list {
    background-color: transparent;
}

html.dark-mode .sidebar-announcement-item {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .sidebar-announcement-item:hover {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .sidebar-announcement-title {
    color: var(--dm-text-primary);
}

html.dark-mode .sidebar-announcement-date {
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-announcement-arrow {
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-announcement-item:hover .sidebar-announcement-arrow {
    color: var(--dm-brand);
}

/* Pinned announcement - vẫn giữ màu vàng nhưng tối hơn */
html.dark-mode .sidebar-announcement-item.is-pinned {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
    border-left-color: #f59e0b;
}

html.dark-mode .sidebar-announcement-item.is-pinned:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.2) 100%);
}

/* Unread indicator */
html.dark-mode .sidebar-announcement-item.is-unread::before {
    background-color: #ef4444;
}

/* Announcement modal */
html.dark-mode .announcement-modal-content {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .announcement-modal-body {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
}

/* Bookmark button */
html.dark-mode .lesson-bookmark-btn {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-muted);
}

html.dark-mode .lesson-bookmark-btn:hover {
    color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.15);
}

/* Completed indicator */
html.dark-mode .sidebar-lesson-completed {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-muted);
}

html.dark-mode .sidebar-lesson-completed:hover {
    background-color: rgba(117, 79, 254, 0.2);
    color: var(--dm-brand);
}

/* =====================================================
 * LESSON HEADER INFO (bên dưới video player)
 * Module name, lesson title, badges
 * ===================================================== */
html.dark-mode .lesson-header-info {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .lesson-header-info h5 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .lesson-header-info .section-name {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .lesson-header-info .section-name i {
    color: var(--dm-text-muted);
}

/* Badges trong lesson header */
html.dark-mode .lesson-head-badges .badge {
    box-shadow: none;
}

html.dark-mode .lesson-access-badge.badge-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

html.dark-mode .lesson-access-badge.badge-important {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

/* =====================================================
 * LESSON LIST ITEMS (Accordion content)
 * ===================================================== */
html.dark-mode .lesson-list-link {
    background-color: transparent;
    border-color: var(--dm-border) !important;
}

html.dark-mode .lesson-list-link:hover {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-brand) !important;
}

html.dark-mode .lesson-list-link .lesson-title {
    color: var(--dm-text-primary);
}

html.dark-mode .lesson-list-link .lesson-duration {
    color: var(--dm-text-muted);
}

html.dark-mode .lesson-list-link .lesson-badge {
    box-shadow: none;
}

/* Active lesson trong list */
html.dark-mode .course-content-items .item.active .lesson-list-link {
    border-color: var(--dm-brand) !important;
    background-color: rgba(117, 79, 254, 0.08);
}

html.dark-mode .course-content-items .item.active .lesson-list-link .lesson-title {
    color: var(--dm-brand);
}

/* =====================================================
 * LESSON PROGRESS BAR (Video progress)
 * ===================================================== */
html.dark-mode .lesson-progress-container {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .lesson-progress-bar-wrapper {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .lesson-progress-info {
    color: var(--dm-text-secondary);
}

html.dark-mode .lesson-progress-text {
    color: var(--dm-text-primary);
}

/* =====================================================
 * FORMS & INPUTS
 * ===================================================== */
html.dark-mode .form-control,
html.dark-mode .forum-input,
html.dark-mode .s_search input,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html.dark-mode .form-control::placeholder,
html.dark-mode .forum-input::placeholder,
html.dark-mode .s_search input::placeholder {
    color: var(--dm-text-muted);
}

html.dark-mode .form-control:focus,
html.dark-mode .forum-input:focus,
html.dark-mode .s_search input:focus {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-brand);
    color: var(--dm-text-primary);
    box-shadow: 0 0 0 3px rgba(117, 79, 254, 0.15);
}

/* =====================================================
 * BUTTONS
 * ===================================================== */
html.dark-mode .btn-primary,
html.dark-mode .forum-btn {
    background-color: var(--dm-brand);
    border-color: var(--dm-brand);
    color: #fff;
}

html.dark-mode .btn-primary:hover,
html.dark-mode .forum-btn:hover {
    background-color: var(--dm-brand-hover);
    border-color: var(--dm-brand-hover);
}

html.dark-mode .btn-outline-primary {
    color: var(--dm-brand);
    border-color: var(--dm-brand);
    background-color: transparent;
}

html.dark-mode .btn-outline-primary:hover {
    background-color: var(--dm-brand);
    color: #fff;
}

html.dark-mode .btn-secondary,
html.dark-mode .btn-light {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-light:hover {
    background-color: var(--dm-bg-primary);
    border-color: var(--dm-border);
}

/* =====================================================
 * FORUM / Q&A SECTION
 * ===================================================== */
html.dark-mode .tab-forum .f-title,
html.dark-mode .forum-form .f-subtitle,
html.dark-mode .forum-lists li .f-subtitle {
    color: var(--dm-text-primary);
}

html.dark-mode .forum-lists li {
    border-top-color: var(--dm-border);
}

html.dark-mode .forum-item .user .name {
    color: var(--dm-text-primary);
}

html.dark-mode .forum-item .user .date {
    color: var(--dm-text-muted);
}

html.dark-mode .forum-item .forum-text {
    color: var(--dm-text-secondary);
}

html.dark-mode .forum-item .reaction-reply .item .no {
    color: var(--dm-brand);
}

html.dark-mode .forum-item .reaction-reply .item .icon svg path {
    fill: var(--dm-text-muted);
}

html.dark-mode .forum-item .reaction-reply .item:has(.no) .icon svg path {
    fill: var(--dm-brand);
}

/* =====================================================
 * ASSIGNMENT SECTION
 * ===================================================== */
html.dark-mode .tab-assignments > .title,
html.dark-mode .assignment-item .subtitle {
    color: var(--dm-text-primary);
}

html.dark-mode .assignment-item .text {
    color: var(--dm-text-secondary);
}

html.dark-mode .assignment-list li {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .assignment-item .date {
    color: var(--dm-text-muted);
}

html.dark-mode .assignment-item .date span {
    color: var(--dm-text-primary);
}

html.dark-mode .assignment-item .status-mark {
    border-top-color: var(--dm-border);
}

html.dark-mode .assignment-item .status-mark .ass-mark {
    color: var(--dm-text-primary);
}

/* =====================================================
 * CERTIFICATE SECTION
 * ===================================================== */
html.dark-mode .tab-certificate .c-progress {
    border-color: var(--dm-success);
    color: var(--dm-text-primary);
}

html.dark-mode .tab-certificate .content .title {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border);
}

html.dark-mode .tab-certificate .content .c-info {
    color: var(--dm-text-secondary);
}

/* =====================================================
 * USER DROPDOWN MENU
 * ===================================================== */
html.dark-mode .menu_pro_tgl_bg {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-lg);
}

html.dark-mode .menu_pro_tgl_bg .path-pos::after {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .user-images {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .user-info h4 {
    color: var(--dm-text-primary);
}

html.dark-mode .user-info p {
    color: var(--dm-text-muted);
}

html.dark-mode .user-dropdown-menu-item a {
    color: var(--dm-text-primary);
}

html.dark-mode .user-dropdown-menu-item a:hover,
html.dark-mode .user-dropdown-menu-item a:focus {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-brand) !important;
    border-left-color: var(--dm-brand) !important;
}

html.dark-mode .user-dropdown-menu-item svg {
    stroke: var(--dm-text-muted) !important;
}

html.dark-mode .user-dropdown-menu-item a:hover svg,
html.dark-mode .user-dropdown-menu-item a:focus svg {
    stroke: var(--dm-brand) !important;
}

/* =====================================================
 * NOTIFICATION DROPDOWN
 * ===================================================== */
html.dark-mode .menu_pro_wish {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-lg);
}

html.dark-mode .notify-item {
    border-bottom-color: var(--dm-border-light);
}

html.dark-mode .notify-item:hover {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .notify-item.unread {
    background-color: rgba(117, 79, 254, 0.1);
}

html.dark-mode .notify-item .notify-icon {
    background-color: rgba(117, 79, 254, 0.15);
}

html.dark-mode .notify-item .notify-details {
    color: var(--dm-text-primary);
}

html.dark-mode .notify-item .notify-details small {
    color: var(--dm-text-muted);
}

html.dark-mode .notify-item .user-msg {
    color: var(--dm-text-secondary);
}

html.dark-mode .menu_pro_wish .menu_pro_btn {
    border-top-color: var(--dm-border);
}

/* =====================================================
 * LOCKED LESSON OVERLAY
 * ===================================================== */
html.dark-mode .locked-lesson-overlay {
    background: linear-gradient(145deg, #0f172a 0%, #020617 100%);
}

html.dark-mode .locked-lesson-overlay__title {
    color: #fff;
}

html.dark-mode .locked-lesson-overlay__desc {
    color: rgba(255, 255, 255, 0.9);
}

html.dark-mode .locked-card {
    background-color: var(--dm-bg-secondary);
    border: 1px solid var(--dm-border);
    box-shadow: var(--dm-shadow-lg);
}

html.dark-mode .locked-card h3,
html.dark-mode .locked-card h4,
html.dark-mode .locked-card h5,
html.dark-mode .locked-card h6 {
    color: var(--dm-text-primary);
}

html.dark-mode .locked-card small {
    color: var(--dm-text-secondary);
}

html.dark-mode .locked-card i {
    color: var(--dm-text-primary);
}

/* =====================================================
 * LIVE CLASS (Zoom/Meet)
 * ===================================================== */
html.dark-mode #live-class-content {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .live_class {
    color: var(--dm-text-primary);
}

html.dark-mode .live_class_note {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: var(--dm-warning);
    color: #fbbf24;
}

/* =====================================================
 * BADGES & TAGS
 * ===================================================== */
html.dark-mode .badge-free,
html.dark-mode .badge.bg-success-soft {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: var(--dm-success) !important;
}

html.dark-mode .badge.bg-warning-soft {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--dm-warning) !important;
}

/* Badge Premium - nền đặc, chữ trắng rõ ràng */
html.dark-mode .badge-premium,
html.dark-mode .sidebar-lesson-badge.badge-premium,
html.dark-mode .lesson-access-badge.badge-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
}

/* Sidebar Lesson Badges - đảm bảo rõ ràng trong dark mode */
html.dark-mode .sidebar-lesson-badge.badge-new {
    background: #3b82f6 !important;
    color: #fff !important;
}

html.dark-mode .sidebar-lesson-badge.badge-free {
    background: #10b981 !important;
    color: #fff !important;
}

html.dark-mode .sidebar-lesson-badge.badge-coming-soon,
html.dark-mode .coming-soon-badge {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #9ca3af !important;
    border: 1px solid rgba(107, 114, 128, 0.3) !important;
}

html.dark-mode .sidebar-lesson-badge.badge-important {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
}

html.dark-mode .badge.bg-primary-soft {
    background-color: rgba(117, 79, 254, 0.15) !important;
    color: var(--dm-brand) !important;
}

html.dark-mode .badge.bg-danger-soft {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--dm-danger) !important;
}

/* =====================================================
 * SCROLLBAR STYLING
 * ===================================================== */
html.dark-mode ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-primary);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-bg-tertiary);
    border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Firefox */
html.dark-mode {
    scrollbar-color: var(--dm-bg-tertiary) var(--dm-bg-primary);
    scrollbar-width: thin;
}

/* Sidebar scrollbar - nhỏ gọn hơn */
html.dark-mode .sidebar-tabs-content::-webkit-scrollbar,
html.dark-mode .course-playing-sidebar::-webkit-scrollbar,
html.dark-mode .custom-accordion::-webkit-scrollbar {
    width: 4px !important;
}

html.dark-mode .sidebar-tabs-content::-webkit-scrollbar-track,
html.dark-mode .course-playing-sidebar::-webkit-scrollbar-track,
html.dark-mode .custom-accordion::-webkit-scrollbar-track {
    background: transparent !important;
}

html.dark-mode .sidebar-tabs-content::-webkit-scrollbar-thumb,
html.dark-mode .course-playing-sidebar::-webkit-scrollbar-thumb,
html.dark-mode .custom-accordion::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3) !important;
    border-radius: 2px !important;
}

html.dark-mode .sidebar-tabs-content::-webkit-scrollbar-thumb:hover,
html.dark-mode .course-playing-sidebar::-webkit-scrollbar-thumb:hover,
html.dark-mode .custom-accordion::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5) !important;
}

/* Firefox - sidebar */
html.dark-mode .sidebar-tabs-content,
html.dark-mode .course-playing-sidebar,
html.dark-mode .custom-accordion {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent !important;
}

/* =====================================================
 * CARDS & BOXES
 * ===================================================== */
html.dark-mode .card {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .card-header {
    background-color: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html.dark-mode .card-body {
    color: var(--dm-text-secondary);
}

html.dark-mode .card-footer {
    background-color: var(--dm-bg-tertiary);
    border-top-color: var(--dm-border);
}

/* =====================================================
 * MODALS
 * ===================================================== */
html.dark-mode .modal-content {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .modal-header {
    background-color: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
}

html.dark-mode .modal-header .modal-title {
    color: var(--dm-text-primary);
}

html.dark-mode .modal-header .btn-close {
    filter: invert(1);
}

html.dark-mode .modal-body {
    color: var(--dm-text-secondary);
}

html.dark-mode .modal-footer {
    border-top-color: var(--dm-border);
}

/* =====================================================
 * ALERTS & MESSAGES
 * ===================================================== */
html.dark-mode .alert {
    border-color: var(--dm-border);
}

html.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

html.dark-mode .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

html.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

html.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* =====================================================
 * TOOLTIPS & POPOVERS
 * ===================================================== */
html.dark-mode .tooltip-inner {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border);
}

html.dark-mode .popover {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .popover-header {
    background-color: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html.dark-mode .popover-body {
    color: var(--dm-text-secondary);
}

/* =====================================================
 * PROGRESS BARS
 * ===================================================== */
html.dark-mode .progress {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .progress-bar {
    background-color: var(--dm-brand);
}

/* =====================================================
 * DARK MODE TOGGLE BUTTON
 * ===================================================== */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 0;
    margin: 0;
}

.dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

.dark-mode-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Light mode: hiện icon mặt trăng (moon) */
.dark-mode-toggle .icon-moon {
    display: block;
}

.dark-mode-toggle .icon-sun {
    display: none;
}

/* Dark mode: hiện icon mặt trời (sun), ẩn mặt trăng */
html.dark-mode .dark-mode-toggle .icon-moon {
    display: none;
}

html.dark-mode .dark-mode-toggle .icon-sun {
    display: block;
}

html.dark-mode .dark-mode-toggle {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .dark-mode-toggle:hover {
    background-color: rgba(251, 191, 36, 0.2);
}

/* =====================================================
 * LESSON HEADER ACTIONS - Đồng bộ kích thước và khoảng cách
 * ===================================================== */
.lesson-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lesson-header-actions .btn,
.lesson-header-actions .dark-mode-toggle,
.lesson-header-actions .menu_wisth_tgl,
.lesson-header-actions .menu_pro_tgl img {
    flex-shrink: 0;
}

.lesson-header-notification.wisth_tgl_div,
.lesson-header-profile.menu_pro_tgl_div {
    margin: 0;
}

/* =====================================================
 * TOASTR NOTIFICATIONS
 * ===================================================== */
html.dark-mode .toast-success {
    background-color: rgba(34, 197, 94, 0.9) !important;
}

html.dark-mode .toast-error {
    background-color: rgba(239, 68, 68, 0.9) !important;
}

html.dark-mode .toast-warning {
    background-color: rgba(245, 158, 11, 0.9) !important;
}

html.dark-mode .toast-info {
    background-color: rgba(59, 130, 246, 0.9) !important;
}

/* =====================================================
 * SUMMERNOTE EDITOR
 * ===================================================== */
html.dark-mode .note-editor {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .note-editor .note-toolbar {
    background-color: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
}

html.dark-mode .note-editor .note-editing-area .note-editable {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
}

html.dark-mode .note-editor .note-btn {
    background-color: transparent;
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html.dark-mode .note-editor .note-btn:hover {
    background-color: var(--dm-bg-primary);
}

/* =====================================================
 * PLYR VIDEO PLAYER
 * ===================================================== */
html.dark-mode .plyr--video {
    background-color: #000;
}

html.dark-mode .plyr__controls {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

/* =====================================================
 * FOMO NOTIFICATIONS
 * ===================================================== */
html.dark-mode .fomo-notification {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Giữ nguyên background color của icon (inline style) */

html.dark-mode .fomo-notification .fomo-content {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .fomo-notification .fomo-message {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .fomo-notification .fomo-time {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .fomo-notification .fomo-close {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .fomo-notification .fomo-close:hover {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .fomo-notification:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* =====================================================
 * FLOATING POPUP (Zalo, Toast, etc.)
 * ===================================================== */
html.dark-mode .lms-floating-popup .popup-card {
    background-color: var(--dm-bg-secondary) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .lms-floating-popup .popup-body {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .lms-floating-popup .popup-body a {
    color: #60a5fa !important;
}

html.dark-mode .lms-floating-popup .popup-footer {
    background-color: var(--dm-bg-tertiary) !important;
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .lms-floating-popup .popup-checkbox {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .lms-floating-popup .popup-image-wrapper {
    background-color: var(--dm-bg-tertiary) !important;
}

/* =====================================================
 * LESSON RATING
 * ===================================================== */
html.dark-mode .lesson-rating-container {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .lesson-rating-container .rating-title {
    color: var(--dm-text-primary);
}

html.dark-mode .lesson-rating-container .rating-description {
    color: var(--dm-text-secondary);
}

/* =====================================================
 * VIDEO TRACKER PROGRESS
 * ===================================================== */
html.dark-mode .video-progress-container {
    background-color: var(--dm-bg-tertiary);
}

/* =====================================================
 * TRANSITION CHO SMOOTH TOGGLE
 * ===================================================== */
html.dark-mode *,
html *,
body *,
html.dark-mode *::before,
html.dark-mode *::after {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.2s ease,
                box-shadow 0.3s ease;
}

/* Loại trừ các phần tử không cần transition */
html.dark-mode video,
html.dark-mode iframe,
html.dark-mode .plyr,
html.dark-mode .plyr *,
html.dark-mode img,
html.dark-mode canvas {
    transition: none;
}

/* =====================================================
 * EXTRA: Một số element đặc biệt
 * ===================================================== */

/* Section count badge */
html.dark-mode .section-lesson-count {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-secondary);
}

/* Xong badge (completed) */
html.dark-mode .completion-badge {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--dm-success);
}

/* Text selections */
html.dark-mode ::selection {
    background-color: rgba(117, 79, 254, 0.3);
    color: #fff;
}

html.dark-mode ::-moz-selection {
    background-color: rgba(117, 79, 254, 0.3);
    color: #fff;
}

/* Horizontal rules */
html.dark-mode hr {
    border-color: var(--dm-border);
}

/* Tables */
html.dark-mode table {
    border-color: var(--dm-border);
}

html.dark-mode th {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

html.dark-mode td {
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

html.dark-mode tbody tr:hover {
    background-color: var(--dm-bg-tertiary);
}

/* Blockquotes */
html.dark-mode blockquote {
    background-color: var(--dm-bg-tertiary);
    border-left-color: var(--dm-brand);
    color: var(--dm-text-secondary);
}

/* Code blocks */
html.dark-mode code {
    background-color: var(--dm-bg-tertiary);
    color: #f472b6;
}

html.dark-mode pre {
    background-color: var(--dm-bg-primary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

/* Links */
html.dark-mode a:not(.btn):not(.nav-link):not(.user-dropdown-menu-item a) {
    color: var(--dm-brand);
}

html.dark-mode a:not(.btn):not(.nav-link):hover {
    color: var(--dm-brand-hover);
}

/* =====================================================
 * COURSE PLAYING MAIN CONTENT AREA
 * ===================================================== */
html.dark-mode .course-playing {
    background-color: var(--dm-bg-primary);
}

html.dark-mode .course-playing-content {
    background-color: transparent;
}

/* =====================================================
 * LESSON CONTENT SLOT
 * ===================================================== */
html.dark-mode #lesson-media-slot {
    background-color: transparent;
}

/* =====================================================
 * COMPLETION BADGE TRONG SIDEBAR
 * ===================================================== */
html.dark-mode .lesson-completion-badge,
html.dark-mode .section-completion-badge {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--dm-success);
}

html.dark-mode .lesson-completion-badge.completed,
html.dark-mode .section-completion-badge.completed {
    background-color: var(--dm-success);
    color: #fff;
}

/* =====================================================
 * ALICEBLUE BACKGROUNDS -> DARK
 * ===================================================== */
html.dark-mode .custom-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--dm-bg-tertiary) !important;
}

/* =====================================================
 * MODULE/SECTION HEADERS IN ACCORDION
 * ===================================================== */
html.dark-mode .section-header,
html.dark-mode .module-header {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

html.dark-mode .section-title,
html.dark-mode .module-title {
    color: var(--dm-text-primary);
}

html.dark-mode .section-subtitle,
html.dark-mode .module-subtitle,
html.dark-mode .section-meta {
    color: var(--dm-text-muted);
}

/* =====================================================
 * DURATION / TIME BADGES
 * ===================================================== */
html.dark-mode .duration-badge,
html.dark-mode .time-badge,
html.dark-mode .lesson-time {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* =====================================================
 * ADDITIONAL LESSON LIST STYLES
 * ===================================================== */
html.dark-mode .lesson-item,
html.dark-mode .lesson-row {
    border-color: var(--dm-border);
}

html.dark-mode .lesson-item:hover,
html.dark-mode .lesson-row:hover {
    background-color: var(--dm-bg-tertiary);
}

html.dark-mode .lesson-item .lesson-name,
html.dark-mode .lesson-row .lesson-name {
    color: var(--dm-text-primary);
}

html.dark-mode .lesson-item .lesson-info,
html.dark-mode .lesson-row .lesson-info {
    color: var(--dm-text-muted);
}

/* =====================================================
 * LIVE CLASS NOTE
 * ===================================================== */
html.dark-mode .live_class_note {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

/* =====================================================
 * DESCRIPTION CONTENT
 * ===================================================== */
html.dark-mode .description,
html.dark-mode .description p,
html.dark-mode .description div,
html.dark-mode .lesson-description {
    color: var(--dm-text-secondary);
}

html.dark-mode .description a,
html.dark-mode .lesson-description a {
    color: var(--dm-brand);
}

/* =====================================================
 * COURSE INFO BADGES / PROGRESS
 * ===================================================== */
html.dark-mode .progress-info,
html.dark-mode .course-progress-info {
    color: var(--dm-text-secondary);
}

/* =====================================================
 * AI CHAT WIDGET (nếu có)
 * ===================================================== */
html.dark-mode .ai-chat-widget {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow-lg);
}

html.dark-mode .ai-chat-messages {
    background-color: var(--dm-bg-primary);
}

html.dark-mode .ai-chat-input {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

/* =====================================================
 * FLOATING ACTION BUTTONS
 * ===================================================== */
html.dark-mode .floating-btn,
html.dark-mode .fab-button {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-shadow-md);
}

html.dark-mode .floating-btn:hover,
html.dark-mode .fab-button:hover {
    background-color: var(--dm-bg-tertiary);
}

/* =====================================================
 * BOOKMARK TOAST
 * ===================================================== */
html.dark-mode .bookmark-toast {
    background-color: var(--dm-bg-tertiary);
    box-shadow: var(--dm-shadow-lg);
}

/* =====================================================
 * SIDEBAR CONTENT SCROLLABLE AREA
 * ===================================================== */
html.dark-mode .sidebar-tabs-content {
    background-color: var(--dm-bg-secondary) !important;
}

/* =====================================================
 * ADDITIONAL OVERRIDES FOR SIDEBAR
 * ===================================================== */
html.dark-mode .course-playing-sidebar {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .course-playing-sidebar > .title {
    color: var(--dm-text-primary) !important;
}

/* =====================================================
 * ACCORDION IMPROVEMENTS
 * ===================================================== */
html.dark-mode .accordion {
    --bs-accordion-bg: var(--dm-bg-secondary);
    --bs-accordion-border-color: var(--dm-border);
    --bs-accordion-btn-bg: var(--dm-bg-secondary);
    --bs-accordion-btn-color: var(--dm-text-primary);
    --bs-accordion-active-bg: var(--dm-bg-tertiary);
    --bs-accordion-active-color: var(--dm-text-primary);
}

html.dark-mode .accordion-button {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .accordion-body {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
}

html.dark-mode .accordion-item {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border) !important;
}

/* =====================================================
 * TEXT COLOR OVERRIDES
 * ===================================================== */
html.dark-mode .text-dark {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .text-secondary {
    color: var(--dm-text-secondary) !important;
}

/* =====================================================
 * BACKGROUND COLOR OVERRIDES
 * ===================================================== */
html.dark-mode .bg-white {
    background-color: var(--dm-bg-secondary) !important;
}

html.dark-mode .bg-light {
    background-color: var(--dm-bg-tertiary) !important;
}

/* =====================================================
 * BORDER OVERRIDES
 * ===================================================== */
html.dark-mode .border {
    border-color: var(--dm-border) !important;
}

html.dark-mode .border-bottom {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .border-top {
    border-top-color: var(--dm-border) !important;
}

/* =====================================================
 * GENERAL SECTION HEADERS
 * ===================================================== */
html.dark-mode h1, 
html.dark-mode h2, 
html.dark-mode h3, 
html.dark-mode h4, 
html.dark-mode h5, 
html.dark-mode h6 {
    color: var(--dm-text-primary);
}

/* =====================================================
 * DATE / TIME STYLES
 * ===================================================== */
html.dark-mode time,
html.dark-mode .date,
html.dark-mode .time,
html.dark-mode .datetime {
    color: var(--dm-text-muted);
}

/* =====================================================
 * CATEGORY TAGS
 * ===================================================== */
html.dark-mode .category-tag,
html.dark-mode .category-label {
    color: var(--dm-brand);
}

/* =====================================================
 * LESSON RATING MODAL (Đánh giá bài học)
 * ===================================================== */
html.dark-mode .lesson-rating-modal {
    background-color: var(--dm-bg-secondary) !important;
    box-shadow: var(--dm-shadow-lg);
}

html.dark-mode .lesson-rating-modal .rating-header h4 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .lesson-rating-modal .rating-header p {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .lesson-rating-modal .rating-header .rating-subtitle {
    color: var(--dm-text-muted) !important;
}

/* Stars - giữ màu vàng */
html.dark-mode .lesson-rating-stars .star {
    color: var(--dm-bg-tertiary);
}

html.dark-mode .lesson-rating-stars .star.active,
html.dark-mode .lesson-rating-stars .star.hover {
    color: #f59e0b;
}

/* Rating label */
html.dark-mode .lesson-rating-label {
    color: var(--dm-success);
}

/* Textarea */
html.dark-mode .lesson-rating-textarea {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .lesson-rating-textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .lesson-rating-textarea:focus {
    border-color: var(--dm-brand) !important;
    box-shadow: 0 0 0 3px rgba(117, 79, 254, 0.2) !important;
}

/* Skip button */
html.dark-mode .lesson-rating-btn-skip {
    color: var(--dm-text-secondary) !important;
    background-color: transparent !important;
}

html.dark-mode .lesson-rating-btn-skip:hover {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

/* Success state */
html.dark-mode .lesson-rating-success h4 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .lesson-rating-success p {
    color: var(--dm-text-secondary) !important;
}

/* =====================================================
 * ANNOUNCEMENT DETAIL MODAL (Modal thông báo chi tiết)
 * ===================================================== */
html.dark-mode .announcement-modal-content,
html.dark-mode #announcementDetailModal .modal-content {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .announcement-modal-body,
html.dark-mode #announcementDetailModal .modal-body {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-secondary) !important;
}

html.dark-mode #announcementDetailModal .modal-header {
    background-color: var(--dm-brand) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode #announcementDetailModal .modal-footer {
    background-color: var(--dm-bg-secondary) !important;
    border-top-color: var(--dm-border) !important;
}

/* Announcement content */
html.dark-mode .announcement-detail-title,
html.dark-mode .announcement-modal-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .announcement-detail-date,
html.dark-mode .announcement-modal-date {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .announcement-detail-content,
html.dark-mode .announcement-modal-content-text,
html.dark-mode .announcement-content {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .announcement-detail-content p,
html.dark-mode .announcement-modal-content-text p {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .announcement-detail-content a,
html.dark-mode .announcement-modal-content-text a {
    color: var(--dm-brand) !important;
}

/* Close button trong modal header trắng */
html.dark-mode #announcementDetailModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Modal footer button */
html.dark-mode #announcementDetailModal .btn-secondary,
html.dark-mode .announcement-modal-close {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode #announcementDetailModal .btn-secondary:hover,
html.dark-mode .announcement-modal-close:hover {
    background-color: var(--dm-bg-primary) !important;
}

/* =====================================================
 * GENERAL BOOTSTRAP MODAL DARK MODE
 * ===================================================== */
html.dark-mode .modal-content {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary);
}

html.dark-mode .modal-header {
    background-color: var(--dm-bg-tertiary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .modal-header .modal-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .modal-body {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .modal-footer {
    background-color: var(--dm-bg-secondary) !important;
    border-top-color: var(--dm-border) !important;
}

/* =====================================================
 * AFFILIATE MODAL (Chia Sẻ & Kiếm Tiền)
 * ===================================================== */
html.dark-mode #affiliateEarnModal .modal-content {
    background-color: var(--dm-bg-secondary) !important;
}

html.dark-mode #affiliateEarnModal .modal-header {
    background-color: var(--dm-bg-secondary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode #affiliateEarnModal .modal-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode #affiliateEarnModal .modal-body {
    background-color: var(--dm-bg-secondary) !important;
}

html.dark-mode #affiliateEarnModal .form-label {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode #affiliateEarnModal .form-control {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* Commission Info Box */
html.dark-mode #affiliateEarnModal [style*="linear-gradient(135deg, #e3f2fd"] {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.2) 0%, rgba(21, 128, 61, 0.2) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode #affiliateEarnModal [style*="color: #1976d2"],
html.dark-mode #affiliateEarnModal [style*="color: #1565c0"] {
    color: #60a5fa !important;
}

html.dark-mode #affiliateEarnModal [style*="color: #2e7d32"],
html.dark-mode #affiliateEarnModal [style*="color: #1b5e20"] {
    color: #4ade80 !important;
}

/* How It Works Box */
html.dark-mode #affiliateEarnModal [style*="background: #f8f9fa"] {
    background-color: var(--dm-bg-tertiary) !important;
}

html.dark-mode #affiliateEarnModal [style*="color: #333"] {
    color: var(--dm-text-primary) !important;
}

html.dark-mode #affiliateEarnModal [style*="color: #666"] {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode #affiliateEarnModal ol {
    color: var(--dm-text-secondary) !important;
}

/* Stats Box */
html.dark-mode #affiliateEarnModal [style*="background: #fff3cd"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark-mode #affiliateEarnModal [style*="font-weight: 700"][style*="color: #333"] {
    color: var(--dm-text-primary) !important;
}

/* Buttons */
html.dark-mode #affiliateEarnModal .btn-outline-dark {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    background-color: transparent !important;
}

html.dark-mode #affiliateEarnModal .btn-outline-dark:hover {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode #affiliateEarnModal .btn-dark {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
}

/* =====================================================
 * AI CHAT WIDGET (Trợ giảng AI)
 * ===================================================== */
html.dark-mode .ai-chat-panel {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow-lg) !important;
}

html.dark-mode .ai-chat-head {
    background-color: var(--dm-bg-tertiary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .ai-chat-head .title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .ai-chat-head .meta,
html.dark-mode .ai-remaining {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .ai-close,
html.dark-mode .ai-expand-btn {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .ai-close:hover,
html.dark-mode .ai-expand-btn:hover {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .ai-chat-body {
    background-color: var(--dm-bg-secondary) !important;
}

/* Chat messages */
html.dark-mode .ai-msg.user {
    background-color: rgba(117, 79, 254, 0.2) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .ai-msg.bot {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .ai-msg .ai-ts {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .ai-msg code {
    background-color: var(--dm-bg-primary) !important;
    color: #f472b6 !important;
}

/* Input area */
html.dark-mode .ai-chat-input {
    background-color: var(--dm-bg-secondary) !important;
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .ai-chat-input input {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .ai-chat-input input::placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .ai-chat-input input:focus {
    border-color: var(--dm-brand) !important;
    box-shadow: 0 0 0 2px rgba(117, 79, 254, 0.2) !important;
}

/* Typing indicator */
html.dark-mode .ai-typing {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .typing-dots span {
    background-color: var(--dm-text-muted) !important;
}

/* Upgrade bar */
html.dark-mode .ai-chat-upgrade {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-top-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

/* Footnote */
html.dark-mode .ai-chat-footnote {
    color: var(--dm-text-muted) !important;
}

/* Error message */
html.dark-mode .ai-error {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Disabled hint */
html.dark-mode .ai-disabled-hint {
    color: var(--dm-text-muted) !important;
}

/* Badge */
html.dark-mode .ai-badge.free {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
}

html.dark-mode .ai-badge.premium {
    background-color: rgba(132, 204, 22, 0.15) !important;
    color: #a3e635 !important;
}

/* Chat tip tooltip */
html.dark-mode .ai-chat-tip {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: var(--dm-shadow-lg) !important;
}

html.dark-mode .ai-chat-tip .tip-close {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .ai-chat-tip .tip-close:hover {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .ai-chat-tip:after {
    border-color: transparent transparent transparent var(--dm-bg-secondary) !important;
}

/* =====================================================
 * PAID LESSON / COMING SOON OVERLAY
 * ===================================================== */
html.dark-mode .paid-lesson-overlay__panel {
    background: rgba(30, 41, 59, 0.95) !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .paid-lesson-overlay__lesson-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .paid-lesson-overlay__message {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .paid-lesson-overlay .badge.bg-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .paid-lesson-overlay__actions .btn-secondary {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .paid-lesson-overlay__actions .btn-secondary:hover {
    background-color: #475569 !important;
}

html.dark-mode .paid-lesson-overlay__thumb {
    border-color: var(--dm-border) !important;
}

/* Coming soon countdown */
html.dark-mode .coming-soon-countdown {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .coming-soon-countdown span {
    color: var(--dm-text-primary) !important;
}
/* =====================================================
 * TRIAL EXPIRED MODAL (Modal hết hạn học thử)
 * ===================================================== */
html.dark-mode .trial-expired-overlay {
    background: rgba(15, 23, 42, 0.92);
}

html.dark-mode .trial-expired-modal {
    background: var(--dm-bg-secondary);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

html.dark-mode .trial-expired-body {
    background: var(--dm-bg-secondary);
}

html.dark-mode .trial-expired-course {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

html.dark-mode .trial-expired-course-info h4 {
    color: var(--dm-text-primary);
}

html.dark-mode .trial-expired-course-info .badge {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

html.dark-mode .trial-expired-message p {
    color: var(--dm-text-secondary);
}

html.dark-mode .trial-expired-message strong {
    color: var(--dm-text-primary);
}

html.dark-mode .trial-expired-benefits {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

html.dark-mode .trial-expired-benefits h5 {
    color: #4ade80;
}

html.dark-mode .trial-expired-benefits li {
    color: #86efac;
}

html.dark-mode .trial-expired-btn-secondary {
    color: var(--dm-text-secondary);
}

html.dark-mode .trial-expired-btn-secondary:hover {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
}

/* =====================================================
 * SUCCESS MODAL (Modal thành công)
 * ===================================================== */
html.dark-mode .success-modal,
html.dark-mode .swal2-popup {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .swal2-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .swal2-html-container,
html.dark-mode .swal2-content {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .success-message-box {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}
/* =====================================================
 * UPGRADE SUCCESS MODAL (course/oto purchase confirmation)
 * Modal card stays light by design; in dark-mode, force the
 * inner item card and headings to remain readable.
 * ===================================================== */
html.dark-mode .upgrade-success-modal .upgrade-success-content {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary);
}

html.dark-mode .upgrade-success-modal .purchased-items {
    border-bottom-color: var(--dm-border);
}

html.dark-mode .upgrade-success-modal .purchased-items h3 {
    color: var(--dm-text-primary);
}

html.dark-mode .upgrade-success-modal .purchased-item {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

html.dark-mode .upgrade-success-modal .purchased-item:hover {
    background: var(--dm-bg-elevated);
}

html.dark-mode .upgrade-success-modal .item-info h4 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .upgrade-success-modal .item-type {
    color: var(--dm-text-secondary);
}

/* Keep OTO golden card readable: dark text stays on the gold gradient */
html.dark-mode .upgrade-success-modal .purchased-item.purchased-oto .item-info h4 {
    color: #1f2937 !important;
}

html.dark-mode .upgrade-success-modal .purchased-item.purchased-oto .item-type {
    color: #4b5563;
}