/* CSS đặc biệt cho mobile dark/light theme */

@media (max-width: 767px) {
    /* Tất cả các phần tử cho mobile dark mode */
    html.dark-theme body, body.dark {
        background-color: #18191a !important;
        color: #e4e6eb !important;
    }

    html.dark-theme .content, 
    html.dark-theme .main_content,
    html.dark-theme .box,
    html.dark-theme .div_middle,
    html.dark-theme section,
    html.dark-theme .list-story,
    html.dark-theme .story-list,
    html.dark-theme .story-item,
    body.dark .content,
    body.dark .main_content,
    body.dark .box,
    body.dark .div_middle, 
    body.dark section,
    body.dark .list-story,
    body.dark .story-list,
    body.dark .story-item {
        background-color: #18191a !important;
        color: #e4e6eb !important;
    }

    html.dark-theme .module_box,
    html.dark-theme .advanced-search-container,
    body.dark .module_box,
    body.dark .advanced-search-container {
        background-color: #18191a !important;
        color: #e4e6eb !important;
    }

    /* Mobile bottom menu */
    html.dark-theme .nav_menu,
    body.dark .nav_menu {
        background-color: #242526 !important;
        color: #e4e6eb !important;
    }
    
    /* Mobile box styles */
    html.dark-theme .box, 
    html.dark-theme .story-list,
    html.dark-theme .module-title,
    body.dark .box,
    body.dark .story-list,
    body.dark .module-title {
        background-color: #242526 !important;
    }
    
    /* Story items trong light mode */
    html.light-theme body, body.light {
        background-color: #fff !important;
        color: #333 !important;
    }

    html.light-theme .content, 
    html.light-theme .main_content,
    html.light-theme .box,
    html.light-theme .div_middle, 
    html.light-theme section,
    html.light-theme .list-story,
    html.light-theme .story-list,
    html.light-theme .story-item,
    body.light .content,
    body.light .main_content,
    body.light .box,
    body.light .div_middle, 
    body.light section,
    body.light .list-story,
    body.light .story-list,
    body.light .story-item {
        background-color: #fff !important;
        color: #333 !important;
    }
    
    /* Thiết lập font chữ và visibility cho mobile */
    html.dark-theme, body.dark, 
    html.light-theme, body.light {
        visibility: visible !important;
    }
    
    /* Force update cho các phần tử động được thêm vào sau bằng AJAX */
    html.dark-theme [class*="lazy-"],
    html.dark-theme [class*="ajax-"],
    html.dark-theme [class*="dynamic-"],
    body.dark [class*="lazy-"],
    body.dark [class*="ajax-"],
    body.dark [class*="dynamic-"] {
        background-color: #18191a !important;
        color: #e4e6eb !important;
    }
    
    html.light-theme [class*="lazy-"],
    html.light-theme [class*="ajax-"],
    html.light-theme [class*="dynamic-"],
    body.light [class*="lazy-"],
    body.light [class*="ajax-"],
    body.light [class*="dynamic-"] {
        background-color: #fff !important;
        color: #333 !important;
    }
    
    /* Tối ưu dark mode cho trang tìm kiếm nâng cao */
    html.dark-theme .story-list-bl01,
    html.dark-theme .advsearch-form,
    html.dark-theme .genre-item,
    html.dark-theme #story-list li,
    body.dark .story-list-bl01,
    body.dark .advsearch-form,
    body.dark .genre-item,
    body.dark #story-list li {
        background-color: #242526 !important;
        border-color: #3a3b3c !important;
    }
    
    html.dark-theme .story-list-bl01 .btn-collapse,
    body.dark .story-list-bl01 .btn-collapse {
        background-color: #3a3b3c !important;
        border-color: #444546 !important;
        color: #e4e6eb !important;
    }
    
    html.dark-theme .genre-item span.icon-tick,
    body.dark .genre-item span.icon-tick {
        background-color: #45bd63 !important;
    }
    
    html.dark-theme .genre-item span.icon-cross,
    body.dark .genre-item span.icon-cross {
        background-color: #fa383e !important;
    }
    
    html.dark-theme .genre-item span.icon-checkbox,
    body.dark .genre-item span.icon-checkbox {
        background-color: #3a3b3c !important;
    }
    
    html.dark-theme .story-list-bl01 select,
    body.dark .story-list-bl01 select {
        background-color: #3a3b3c !important;
        border-color: #444546 !important;
        color: #e4e6eb !important;
    }
    
    html.dark-theme .btn-search,
    body.dark .btn-search {
        background-color: #0084ff !important;
        border-color: #0078e7 !important;
    }
    
    html.dark-theme .btn-reset,
    body.dark .btn-reset {
        background-color: #3a3b3c !important;
        border-color: #444546 !important;
        color: #e4e6eb !important;
    }
    
    /* Màu cho phân trang dark mode */
    html.dark-theme .page_redirect .pagination li a,
    body.dark .page_redirect .pagination li a {
        background-color: #3a3b3c !important;
        border-color: #444546 !important;
        color: #e4e6eb !important;
    }
    
    html.dark-theme .page_redirect .pagination li.active a,
    body.dark .page_redirect .pagination li.active a {
        background-color: #0084ff !important;
        border-color: #0078e7 !important;
    }
    
    /* Light mode cho trang tìm kiếm nâng cao */
    html.light-theme .story-list-bl01,
    html.light-theme .advsearch-form,
    html.light-theme .genre-item,
    html.light-theme #story-list li,
    body.light .story-list-bl01,
    body.light .advsearch-form,
    body.light .genre-item,
    body.light #story-list li {
        background-color: #fff !important;
        border-color: #e5e5e5 !important;
    }
    
    html.light-theme .story-list-bl01 .btn-collapse,
    body.light .story-list-bl01 .btn-collapse {
        background-color: #f18121 !important;
        border-color: #e67616 !important;
        color: #fff !important;
    }
}