html, body {
    max-width: 100vw;
    overflow-x: clip; 
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body { font-family: 'Lexend', sans-serif; background: radial-gradient(circle at top right, #fff4e6, #ffffff 70%); min-height: 100vh; }
.glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(251, 146, 60, 0.1); }

.tab-panel { display: none; animation: fadeIn 0.3s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.nav-btn.active { color: #ef4444 !important; background: #fee2e2; font-weight: 700; border-radius: 999px; }
.mobile-nav-btn.active { color: #ef4444 !important; background: #fee2e2; border-left: 4px solid #ef4444; font-weight: 700; }

.prose-custom h1 { font-size: 1.8rem; font-weight: 800; color: #111; margin: 1rem 0; border-bottom: 2px solid #f97316; padding-bottom: 5px; }
.prose-custom p { margin-bottom: 1rem; line-height: 1.7; }
.prose-custom code { background: #fee2e2; color: #991b1b; padding: 2px 5px; border-radius: 4px; font-size: 0.9em; }
.prose-custom blockquote { border-left: 4px solid #f97316; padding-left: 1rem; font-style: italic; color: #555; }

/* =========================================
   HIỆU ỨNG MENU SỔ XUỐNG (DROPDOWN POP)
========================================= */
#desktop-nav {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#mobile-menu:not(.hidden) {
    animation: menuPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top right;
}

@keyframes menuPop {
    0% { opacity: 0; transform: scale(0.8) translateY(-15px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.mobile-nav-btn {
    margin: 0 8px;
    border-radius: 12px;
    width: calc(100% - 16px) !important;
    transition: all 0.2s ease;
}
.mobile-nav-btn:hover { transform: translateX(4px); }

#mobile-nav {
    max-height: 410px; 
    overflow-y: auto;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

#mobile-nav::-webkit-scrollbar { width: 4px; }
#mobile-nav::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
#mobile-nav::-webkit-scrollbar-thumb { background-color: rgba(249, 115, 22, 0.3); border-radius: 10px; }

/* =========================================
   HIỆU ỨNG HEADER TÀNG HÌNH VÀ LOGO BAY
========================================= */
#main-header, body.dark-mode #main-header {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: all 0.4s ease;
}

.header-scrolled {
    background-color: transparent !important;
    pointer-events: none; 
}

.header-scrolled #main-logo-wrapper,
.header-scrolled button {
    pointer-events: auto;
}

.logo-wrapper {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform-origin: right center;
}
.header-scrolled .logo-wrapper {
    transform: translateX(calc(100vw - 100px)) scale(0.1);
    opacity: 0;
}
@media (min-width: 768px) {
    .header-scrolled .logo-wrapper { transform: translateX(40vw) scale(0.1); }
}

#mobile-menu-btn {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-scrolled #mobile-menu-btn {
    border-color: rgba(249, 115, 22, 0.6) !important; 
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.25) !important; 
    color: rgba(249, 115, 22, 1) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .header-scrolled #mobile-menu-btn {
    border-color: rgba(45, 212, 191, 0.6) !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.25) !important;
    color: rgba(45, 212, 191, 1) !important;
    background-color: rgba(30, 41, 59, 0.9) !important;
}

.header-scrolled #mobile-menu {
    pointer-events: auto !important;
}

/* =========================================
   GLOBAL DARK MODE (BẢN VÁ LỖI TOÀN DIỆN MỚI NHẤT)
========================================= */
/* 1. Nền tổng thể của toàn bộ trang */
body.dark-mode { 
    background: radial-gradient(circle at top right, #1e293b, #0f172a 70%) !important; 
    color: #f8fafc !important; 
}

/* 2. Thẻ kính Glass-card mờ ảo */
body.dark-mode .glass-card { 
    background: rgba(30, 41, 59, 0.6) !important; 
    border-color: rgba(255, 255, 255, 0.08) !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; 
}

/* 3. BẮT BỆNH: Ép tất cả các màu nền Sáng, Pastel (Cam, Xanh, Đỏ...) thành màu Tối đồng bộ */
body.dark-mode .bg-white, body.dark-mode .bg-white\/90, body.dark-mode .bg-white\/80, body.dark-mode .bg-white\/60, body.dark-mode .bg-white\/50, 
body.dark-mode .bg-slate-50, body.dark-mode .bg-slate-100, body.dark-mode .bg-gray-50, body.dark-mode .bg-gray-100,
body.dark-mode .bg-orange-50, body.dark-mode .bg-orange-50\/50, body.dark-mode .bg-orange-50\/30, body.dark-mode .bg-orange-100,
body.dark-mode .bg-red-50, body.dark-mode .bg-red-50\/50, body.dark-mode .bg-red-100,
body.dark-mode .bg-emerald-50, body.dark-mode .bg-emerald-50\/50, body.dark-mode .bg-emerald-50\/30, body.dark-mode .bg-emerald-100,
body.dark-mode .bg-cyan-50, body.dark-mode .bg-cyan-50\/50, body.dark-mode .bg-cyan-100,
body.dark-mode .bg-blue-50, body.dark-mode .bg-blue-50\/50, body.dark-mode .bg-blue-100,
body.dark-mode .bg-yellow-50, body.dark-mode .bg-yellow-50\/50, body.dark-mode .bg-yellow-100,
body.dark-mode .bg-pink-50, body.dark-mode .bg-pink-50\/50, body.dark-mode .bg-pink-100,
body.dark-mode .bg-purple-50, body.dark-mode .bg-purple-50\/50, body.dark-mode .bg-purple-100,
body.dark-mode .bg-indigo-50, body.dark-mode .bg-indigo-50\/50, body.dark-mode .bg-indigo-100 {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
}

body.dark-mode .bg-\[\#e3eaf1\], body.dark-mode .bg-\[\#eaf0f6\] { 
    background-image: linear-gradient(to bottom right, #1e293b, #0f172a) !important; 
    border-color: #334155 !important; 
}

/* 4. Đảo chữ màu Tối thành màu Sáng (Trắng/Xám nhạt) */
body.dark-mode .text-slate-800, body.dark-mode .text-slate-700, 
body.dark-mode .text-gray-800, body.dark-mode .text-gray-700, 
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { 
    color: #f8fafc !important; 
}

body.dark-mode .text-slate-600, body.dark-mode .text-slate-500, body.dark-mode .text-slate-400, 
body.dark-mode .text-gray-600, body.dark-mode .text-gray-500, body.dark-mode .text-gray-400 { 
    color: #94a3b8 !important; 
}

/* 5. Khung nhập liệu (Input, Select, Textarea) */
body.dark-mode select, body.dark-mode input, body.dark-mode textarea { 
    background-color: rgba(15, 23, 42, 0.6) !important; 
    color: #f8fafc !important; 
    border-color: #334155 !important; 
}
body.dark-mode select:focus, body.dark-mode input:focus, body.dark-mode textarea:focus { 
    border-color: #f97316 !important; 
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important; 
}

/* 6. Chi tiết nhỏ khác */
body.dark-mode #mobile-menu { background-color: rgba(15, 23, 42, 0.95) !important; border-color: #475569 !important; }
body.dark-mode #dark-mode-btn { background-color: #334155 !important; color: #f8fafc !important; }
body.dark-mode #dark-mode-btn:hover { background-color: #475569 !important; color: #f97316 !important; }
body.dark-mode #moon-shadow { background-color: #0f172a !important; }
body.dark-mode #mobile-nav::-webkit-scrollbar-thumb { background-color: rgba(45, 212, 191, 0.3); }
/* ========================================= */
/* BẦU TRỜI SAO GLOBAL CHO DARK MODE         */
/* ========================================= */
#global-star-bg {
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    width: 100vw; 
    height: 100vh;
    z-index: -999; /* Nằm dưới cùng, tuyệt đối không che tool hay hộp thoại */
    pointer-events: none; /* Bỏ qua mọi tương tác chuột, không gây liệt nút bấm */
    overflow: hidden;
    background: transparent; /* Trong suốt, giữ nguyên màu nền dark mode hiện tại của web */
    opacity: 0; /* Mặc định ẨN ở chế độ nền sáng */
    transition: opacity 0.8s ease-in-out; /* Hiện ra mượt mà khi bật Dark Mode */
}

/* HIỂN THỊ KHI BẬT DARK MODE */
html.dark #global-star-bg, 
body.dark-mode #global-star-bg {
    opacity: 1;
}

.global-star {
    position: absolute;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    animation: global-twinkle infinite alternate;
}

/* Hiệu ứng nhấp nháy tỏa sáng nhẹ nhàng */
@keyframes global-twinkle {
    0% { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 rgba(255,255,255,0); }
    50% { opacity: 0.6; transform: scale(1); box-shadow: 0 0 5px rgba(255,255,255,0.3); }
    100% { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 rgba(255,255,255,0); }
}