/* =========================================================
   TỆP: public/assets/css/theme-mode.css
   PHIÊN BẢN: v3.0.0 (Chuyển đổi mượt mà & Quét màu thông minh)
========================================================= */

/* ==========================================
   0. HIỆU ỨNG CHUYỂN ĐỔI MƯỢT MÀ (CHỐNG CHỚP MẮT)
========================================== */
body,
div,
header,
nav,
footer,
section,
article,
aside,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
input,
textarea,
ul,
li {
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out !important;
}

/* Kích hoạt chế độ sáng (Light Mode) cơ bản */
body.light-theme {
    background-color: #f8fafc !important;
    /* Xám xanh rất nhạt, dịu mắt */
    color: #1e293b !important;
}

/* ==========================================
   1. QUÉT DIỆN RỘNG MỌI MÃ MÀU NỀN TỐI (BACKGROUNDS)
   Sử dụng Smart Selector để bắt mọi class bắt đầu bằng bg-[#0, #1, #2, #3...
========================================== */
body.light-theme [class*="bg-[#0"],
body.light-theme [class*="bg-[#1"],
body.light-theme [class*="bg-[#2"],
body.light-theme [class*="bg-[#3"],
body.light-theme .bg-black,
body.light-theme .bg-gray-800,
body.light-theme .bg-gray-900,
body.light-theme .bg-zinc-800,
body.light-theme .bg-zinc-900,
body.light-theme .bg-neutral-800,
body.light-theme .bg-neutral-900 {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Xử lý riêng cho Header và Menu Mobile có độ trong suốt */
body.light-theme header,
body.light-theme .site_header,
body.light-theme [class*="bg-[#0f0f0f]/9"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: #e2e8f0 !important;
}

body.light-theme #mobile-menu {
    background-color: #ffffff !important;
    border-right-color: #e2e8f0 !important;
}

/* ==========================================
   2. QUÉT DIỆN RỘNG MỌI ĐƯỜNG VIỀN TỐI (BORDERS)
========================================== */
body.light-theme [class*="border-[#0"],
body.light-theme [class*="border-[#1"],
body.light-theme [class*="border-[#2"],
body.light-theme [class*="border-[#3"],
body.light-theme [class*="border-[#4"],
body.light-theme [class*="border-[#5"],
body.light-theme .border-gray-800 {
    border-color: #e2e8f0 !important;
}

/* ==========================================
   3. ĐẢO NGƯỢC TOÀN BỘ MÀU CHỮ (TEXT & ICONS)
========================================== */
body.light-theme .text-white,
body.light-theme .text-gray-100,
body.light-theme .text-gray-200,
body.light-theme .text-gray-300,
body.light-theme .text-gray-400 {
    color: #0f172a !important;
    /* Chữ sáng/trắng chuyển thành xám đen đậm */
}

body.light-theme .text-gray-500,
body.light-theme .text-gray-600,
body.light-theme .text-gray-700 {
    color: #64748b !important;
    /* Chữ xám tối chuyển thành xám vừa */
}

/* Cứu hộ văn bản SEO Content trong bài viết/sản phẩm */
body.light-theme .seo-content,
body.light-theme .format-html,
body.light-theme .seo-content p,
body.light-theme .seo-content span,
body.light-theme .seo-content strong,
body.light-theme .seo-content b,
body.light-theme .seo-content li,
body.light-theme .format-html p,
body.light-theme .format-html span,
body.light-theme .format-html strong,
body.light-theme .format-html b,
body.light-theme .format-html li {
    color: #1e293b !important;
}

body.light-theme .seo-content blockquote,
body.light-theme .format-html blockquote {
    background-color: #f1f5f9 !important;
    /* Nền xám sáng cho trích dẫn */
    color: #334155 !important;
    border-left-color: #ea580c !important;
}

body.light-theme .seo-content h1,
body.light-theme .seo-content h2,
body.light-theme .seo-content h3,
body.light-theme .seo-content h4,
body.light-theme .format-html h1,
body.light-theme .format-html h2,
body.light-theme .format-html h3,
body.light-theme .format-html h4 {
    color: #0f172a !important;
}

/* ==========================================
   4. BẢO VỆ MÀU CAM THƯƠNG HIỆU NARO
========================================== */
body.light-theme .text-\[\#ea580c\] {
    color: #ea580c !important;
}

body.light-theme .bg-\[\#ea580c\] {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

body.light-theme .border-\[\#ea580c\] {
    border-color: #ea580c !important;
}

/* ==========================================
   5. KHUNG BẢNG (TABLE) TRONG BÀI VIẾT
========================================== */
body.light-theme .naro-table-wrapper,
body.light-theme .naro-virtual-frame {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 1px #e2e8f0 !important;
}

body.light-theme .naro-table-wrapper th,
body.light-theme .naro-virtual-frame th {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 2px solid #ea580c !important;
}

body.light-theme .naro-table-wrapper td,
body.light-theme .naro-virtual-frame td {
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-theme .naro-table-wrapper tbody tr:nth-child(odd) td,
body.light-theme .naro-virtual-frame tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}

body.light-theme .naro-table-wrapper tbody tr:nth-child(even) td,
body.light-theme .naro-virtual-frame tbody tr:nth-child(even) td {
    background-color: #f8fafc !important;
}

/* ==========================================
   6. CÁC FORM & INPUT NHẬP LIỆU
========================================== */
body.light-theme input,
body.light-theme textarea,
body.light-theme select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: #94a3b8 !important;
}

/* ==========================================
   7. HOVER EFFECTS (HIỆU ỨNG DI CHUỘT)
========================================== */
body.light-theme [class*="hover:bg-[#1"]:hover,
body.light-theme [class*="hover:bg-[#2"]:hover,
body.light-theme [class*="hover:bg-[#3"]:hover {
    background-color: #f1f5f9 !important;
}

body.light-theme [class*="hover:border-[#ea580c]"]:hover {
    border-color: #ea580c !important;
}