/*
Theme Name: Glassmorphism Mobile-First SEO Theme
Theme URI: https://chuyenlambangdaihoconline.com/
Author: Chuyên Gia AI SEO
Description: Thiết kế Mobile-First tối ưu Core Web Vitals tối đa, chống vỡ CLS, tăng tốc phản hồi INP, tích hợp nền kính thủy tinh mờ sâu độc quyền và xử lý triệt để chống tràn ảnh khỏi layout.
Version: 1.0.4
*/

/* DEFINE SYSTEM VARIABLES */
:root {
    --primary: #00e5ff;
    --primary-deep: #00a8cc;
    --bg-dark: #0a1128;
    --glass-bg: rgba(10, 25, 47, 0.72);
    --glass-border: rgba(0, 229, 255, 0.2);
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   RESET & LAYOUT CƠ BẢN (TƯ DUY MOBILE-FIRST PHẢN ỨNG NHANH)
   ========================================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    -webkit-tap-highlight-color: transparent; /* Tối ưu hóa trải nghiệm chạm Touch-friendly trên điện thoại */
}

body {
    font-family: var(--font-stack);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden; /* Ngăn chặn tuyệt đối hiện tượng cuộn ngang trình duyệt di động */
    background-image: radial-gradient(circle at 50% 0%, #102a45 0%, #0a1128 75%);
}

.container { 
    width: 100%; 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    max-width: 100%; 
}

a { 
    color: var(--primary); 
    text-decoration: none; 
    transition: color 0.2s ease; 
}
a:hover { 
    color: #fff; 
}

/* ==========================================================================
   CƠ CHẾ CHỐNG TRÀN VÀ VỠ LAYOUT HÌNH ẢNH TOÀN HỆ THỐNG (ANTI-BREAKOUT)
   ========================================================================== */
img, 
.wp-block-image img, 
.entry-content img, 
.single-post-content img,
.grid-item img,
.post-list-item img {
    max-width: 100% !important; /* Ép buộc ảnh không vượt quá chiều rộng khung cha bọc nó */
    height: auto !important;     /* Giữ đúng tỷ lệ ảnh gốc, ngăn chặn hiện tượng méo hoặc bẹt hình */
    box-sizing: border-box;
    display: block;
    content-visibility: auto;   /* Cơ chế Lazy-render của Core Web Vitals giúp tăng tốc LCP */
}

/* Triệt tiêu các thông số căn lề có thể gây phình layout của Gutenberg */
.wp-block-image, 
.wp-block-embed, 
figure {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
}

/* ==========================================================================
   THIẾT KẾ PHỐI MÀU XANH THỦY TINH HIỆN ĐẠI (GLASSMORPHISM COMPONENT)
   ========================================================================== */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    margin-bottom: 24px;
    overflow: hidden; /* Cắt bỏ mọi dữ liệu văn bản tràn viền nếu có lỗi */
}

.parallax-section {
    position: relative;
    background-attachment: scroll; /* Chuyển sang scroll để đạt tốc độ FPS tối đa trên Mobile cảm ứng */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
}

/* ==========================================================================
   CẤU TRÚC ĐIỀU HƯỚNG MENU CHUYÊN NGHIỆP ĐÃ KHẮC PHỤC LỖI CLICK
   ========================================================================== */
.glass-header {
    background: rgba(10, 17, 40, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky; 
    top: 0; 
    z-index: 1000;
}
.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 70px; 
    position: relative; 
}
.site-logo { 
    max-height: 45px; 
    width: auto; 
    object-fit: contain; 
}

/* Nút kích hoạt mở rộng thực đơn */
.menu-toggle {
    background: none; 
    border: none; 
    color: var(--primary); 
    cursor: pointer; 
    display: block;
    padding: 10px; 
    z-index: 1002;
    transition: transform 0.1s ease;
}
.menu-toggle:active { 
    transform: scale(0.92); 
}
/* Khung bọc danh sách thực đơn trên thiết bị di động */
#site-navigation-wrapper.main-nav {
    position: absolute; 
    top: 70px; 
    left: 0; 
    width: 100%;
    background: rgba(8, 15, 36, 0.98); 
    border-bottom: 3px solid var(--primary);
    padding: 15px 20px; 
    box-shadow: 0 25px 35px rgba(0,0,0,0.8);
    z-index: 1001;
    
    /* Thay đổi ở đây: Ẩn an toàn, không dùng display: none */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* Trạng thái hoạt động khi JavaScript gán class active thành công */
#site-navigation-wrapper.main-nav.active { 
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#site-navigation-wrapper.main-nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
}
#site-navigation-wrapper.main-nav li { 
    margin-bottom: 6px; 
    width: 100%; 
    display: block; 
}
#site-navigation-wrapper.main-nav a { 
    font-size: 1.05rem; 
    font-weight: 600; 
    display: block; 
    padding: 12px 0; 
    color: #fff; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

@keyframes menuSlideDown { 
    from { opacity: 0; transform: translateY(-8px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ==========================================================================
   CẤU TRÚC PHẦN TỬ TRANG CHỦ & CÁC KHỐI RICH SNIPPET
   ========================================================================== */
.hero-sec { padding: 45px 15px; text-align: center; }
.hero-sec h1 { font-size: 1.75rem; color: #fff; line-height: 1.3; margin-bottom: 15px; text-shadow: 0 0 8px var(--primary); }
.cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); color: #000;
    padding: 14px 25px; font-weight: 700; border-radius: 50px; font-size: 0.95rem;
    box-shadow: 0 0 15px var(--primary); border: none; cursor: pointer;
}

.snippet-title { font-size: 1.35rem; color: #fff; margin-bottom: 15px; border-left: 4px solid var(--primary); padding-left: 12px; }
.data-table {
    width: 100%; border-collapse: collapse; margin-top: 15px; background: rgba(0,0,0,0.25); border-radius: 8px; overflow: hidden; font-size: 0.85rem;
}
.data-table th, .data-table td { padding: 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.data-table th { background: rgba(0, 229, 255, 0.12); color: var(--primary); font-weight: 700; }

/* Thư viện ảnh lưới Grid chống tràn */
.image-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; 
    margin: 20px 0; 
    width: 100%; 
}
.grid-item { 
    border-radius: 8px; 
    overflow: hidden; 
    border: 1px solid var(--glass-border); 
    position: relative; 
    width: 100%; 
}
.grid-item img { 
    width: 100% !important; 
    height: 125px !important; 
    object-fit: cover; 
}

/* Danh sách tin bài dạng List và khối FAQ thả xuống */
.post-list-layout { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.post-list-item { display: flex; gap: 12px; align-items: center; width: 100%; }
.post-list-item img { width: 80px; height: 65px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

.faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 0; }
.faq-question { font-size: 0.95rem; color: #fff; font-weight: 600; }
.faq-answer { margin-top: 6px; color: var(--text-muted); font-size: 0.9rem; }

/* Tác giả E-E-AT & Thanh tìm kiếm gợi ý */
.expert-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 15px; }
.expert-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); }

.ajax-search-container { position: relative; width: 100%; }
.ajax-search-input { width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 8px; color: #fff; font-size: 0.9rem; }
.ajax-search-results { position: absolute; width: 100%; background: #070f26; z-index: 10; border-radius: 0 0 8px 8px; max-height: 220px; overflow-y: auto; border: 1px solid var(--glass-border); border-top: none; }
.ajax-search-results a { display: block; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #fff; font-size: 0.85rem; }

/* Chân trang và thanh tác vụ ghim chặt đáy màn hình di động */
.site-footer { background: #050b1a; border-top: 1px solid var(--glass-border); padding: 35px 0 85px; font-size: 0.85rem; }
.footer-cta-fixed {
    position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(10,25,47,0.95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--primary); display: flex; justify-content: center; padding: 10px 15px; z-index: 999;
}

/* Khung bọc cấu trúc cột */
.main-wrapper { display: grid; grid-template-columns: 100%; gap: 20px; width: 100%; }

/* ==========================================================================
   CẤU HÌNH ĐÁP ỨNG CHO MÀN HÌNH MÁY TÍNH (DESKTOP RESPONSIVE BREAKPOINT)
   ========================================================================== */
@media (min-width: 992px) {
    .container { max-width: 1200px; padding-right: 20px; padding-left: 20px; }
    
    /* Chuyển đổi trạng thái Menu từ Mobile sang Desktop dạng thanh ngang */
    .menu-toggle { display: none !important; }
    
    #site-navigation-wrapper.main-nav { 
        display: block !important; 
        position: static !important; 
        background: none !important; 
        width: auto !important; 
        padding: 0 !important; 
        border: none !important; 
        box-shadow: none !important; 
    }
    #site-navigation-wrapper.main-nav ul { display: flex !important; gap: 28px; }
    #site-navigation-wrapper.main-nav li { margin-bottom: 0 !important; width: auto !important; }
    #site-navigation-wrapper.main-nav a { border: none !important; padding: 0 !important; font-size: 0.95rem; }
    
    /* Mở rộng không gian hiển thị cho Desktop */
    .hero-sec { padding: 80px 0; background-attachment: fixed; } /* Kích hoạt hiệu ứng Parallax chuẩn chiều sâu trên PC */
    .hero-sec h1 { font-size: 3.2rem; }
    
    .snippet-title { font-size: 1.6rem; }
    .main-wrapper { grid-template-columns: 1fr 350px; gap: 24px; }
    
    /* Mở rộng thư viện lưới ảnh thành 4 cột sang trọng */
    .image-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .grid-item img { height: 175px !important; }
    
    .expert-profile { flex-direction: row; text-align: left; padding: 25px; gap: 20px; }
    .data-table th, .data-table td { padding: 14px; font-size: 0.95rem; }
    .site-footer { padding: 50px 0 35px; }
    
    /* Ẩn thanh tác vụ ghim dưới đáy khi lướt trên máy tính */
    .footer-cta-fixed { display: none !important; }
}