[x-cloak] { display: none !important; }

/* Tùy chỉnh thanh cuộn mang màu vàng cát hệ sinh thái */
.custom-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f5f0e6; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d9a05b; border-radius: 4px; cursor: pointer;}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #c05621; }

/* Hiệu ứng kéo thả câu hỏi */
.dragging { opacity: 0.5; transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(43, 83, 41, 0.2); }
.drop-over { border-color: #2b5329; background-color: #e8f0e6; }

/* ==================================================== */
/* ĐỒNG BỘ GIAO DIỆN SANG CHẢNH (EMERALD & CHAMPAGNE)   */
/* ==================================================== */

/* 1. Định dạng lại thanh Mock Test (Khu vực thứ 2 trong main) ở cả 5 môn */
main[x-show="route === 'module'"] > div:nth-child(2) {
    /* Đổ dốc màu Ngọc Lục Bảo cực sang */
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%) !important; 
    /* Viền trái màu Vàng Champagne */
    border-left: 8px solid #c29b62 !important; 
    box-shadow: 0 10px 25px -5px rgba(19, 78, 74, 0.3) !important;
}

/* 2. Đổi màu chữ tiêu đề "Mock Test" thành Vàng Champagne */
main[x-show="route === 'module'"] > div:nth-child(2) h3 {
    color: #fde68a !important; /* Vàng sáng rực rỡ trên nền xanh tối */
    letter-spacing: 0.05em;
}

/* 3. Đổi màu chữ phụ thành trắng đục (ngọc trai) */
main[x-show="route === 'module'"] > div:nth-child(2) p {
    color: rgba(248, 250, 252, 0.9) !important; 
}

/* 4. Định dạng lại nút "Bắt đầu thi" trong thanh Mock Test */
main[x-show="route === 'module'"] > div:nth-child(2) button {
    background-color: #c29b62 !important; /* Vàng Champagne */
    color: #ffffff !important;
    box-shadow: 0 4px 15px -3px rgba(194, 155, 98, 0.5) !important;
    border: none !important;
    transition: all 0.3s ease;
}

main[x-show="route === 'module'"] > div:nth-child(2) button:hover {
    background-color: #f8fafc !important; /* Đưa chuột vào thì trắng sáng */
    color: #134e4a !important; /* Chữ xanh lục bảo */
    transform: translateY(-2px);
}

/* 5. Khử màu Nâu/Đỏ của các nút phụ (nếu có sót lại) */
button.text-earth, a.text-earth {
    color: #334155 !important; /* Xám than */
}

/* 6. Tinh chỉnh Scrollbar cho đồng bộ (Mỏng, thanh lịch) */
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9; 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* ==================================================== */
/* SIÊU PHẨM ROYAL EMERALD & HIỆU ỨNG ÁNH SÁNG CHẠY     */
/* ==================================================== */

/* 1. Thanh Header: Nền Lục bảo sẫm + Viền Vàng Champagne */
header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #0f766e 100%) !important;
    border-bottom: 4px solid #c29b62 !important;
    box-shadow: 0 4px 20px rgba(19, 78, 74, 0.4) !important;
}

/* 2. Hiệu ứng ánh sáng kim cương lướt ngang Header */
/* 1. Cập nhật thời gian Header 30s chạy 1 lần */
header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(253, 230, 138, 0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-35deg);
    /* Tăng tổng thời gian lên 30s */
    animation: diamond-sweep 30s infinite linear; 
    pointer-events: none;
}

@keyframes diamond-sweep {
    0% { left: -150%; }
    10% { left: 200%; } /* Lướt qua cực nhanh trong 3 giây (10% của 30s) */
    100% { left: 200%; } /* Dừng lại, nghỉ chờ suốt 27 giây còn lại */
}

/* 3. Khung Mock Test: Áp dụng dải sáng tương tự khi di chuột vào (Hover effect) */
main[x-show="route === 'module'"] > div:nth-child(2) {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%) !important; 
    border-left: 8px solid #c29b62 !important; 
    box-shadow: 0 10px 25px -5px rgba(19, 78, 74, 0.3) !important;
}

main[x-show="route === 'module'"] > div:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-45deg);
    transition: all 0.7s ease;
}

main[x-show="route === 'module'"] > div:nth-child(2):hover::after {
    left: 200%; /* Lướt qua khi hover */
}

/* ==================================================== */
/* ANIMATION CÚN CON CHẠY LON TON DƯỚI MÀN HÌNH         */
/* ==================================================== */
.running-puppy {
    position: fixed;
    bottom: 0px; 
    z-index: 9999;
    width: 65px; 
    pointer-events: none; 
    /* Tăng tổng thời gian lên 60s */
    animation: dog-run 60s infinite linear; 
}

@keyframes dog-run {
    0% { left: -150px; opacity: 1; }
    15% { left: 110vw; opacity: 1; } /* Thong dong chạy từ trái qua phải mất 9 giây (15% của 60s) */
    16% { left: 110vw; opacity: 0; } /* Tàng hình khi đã ra khỏi màn hình */
    99% { left: -150px; opacity: 0; } /* Bay về vạch xuất phát trong trạng thái tàng hình */
    100% { left: -150px; opacity: 1; } /* Hiện hình lại để chuẩn bị cho chu kỳ của phút tiếp theo */
}
/* ==================================================== */
/* SIÊU PHẨM EDTECH LUXURY: NGỌC LỤC BẢO & TRỐNG ĐỒNG   */
/* ==================================================== */

/* 1. NỀN THẠCH ANH (QUARTZ) KẾT HỢP TRỐNG ĐỒNG ĐÔNG SƠN MỜ */
body {
    background-color: #f8fafc !important;
    background-image: 
        /* Lớp 1 & 2: Hạt ánh sáng trôi nổi (Bokeh) */
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 0%, transparent 5%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.6) 0%, transparent 4%),
        /* Lớp 3: Họa tiết Trống Đồng Đông Sơn (Được khắc chìm màu xám khói, mờ 3%) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23334155' stroke-width='1' stroke-dasharray='4 4' opacity='0.03'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%23334155' stroke-width='1.5' opacity='0.02'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%23334155' stroke-width='2' stroke-dasharray='2 6' opacity='0.03'/%3E%3Cpolygon points='50,42 56,54 44,54' fill='%23334155' opacity='0.03'/%3E%3C/svg%3E"),
        /* Lớp 4: Nền đá cẩm thạch / thạch anh trắng */
        url('https://images.unsplash.com/photo-1588824368595-c27fb5626cc9?q=80&w=1920&auto=format&fit=crop') !important;
    
    background-size: 100px 100px, 150px 150px, 300px 300px, cover !important;
    background-blend-mode: screen, screen, multiply, normal !important;
    background-attachment: fixed !important;
}

/* 2. CÁC THẺ KỸ NĂNG: BIẾN THÀNH ĐÁ QUÝ ĐA DIỆN (FACETED GEMS) */
/* Áp dụng cho mọi thẻ <a> nằm trong grid ở phần main */
main .grid > a {
    position: relative;
    overflow: hidden;
    /* Loại bỏ nền trắng nhàm chán */
    background-color: transparent !important;
    
    /* Mix 3 lớp: Vệt sáng cắt góc + Trống Đồng mờ bên trong + Nền Lục Bảo */
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23ffffff' stroke-width='1' stroke-dasharray='4 4' opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='2 6' opacity='0.05'/%3E%3Cpolygon points='50,42 56,54 44,54' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #0f766e 100%) !important;
    
    background-size: cover, 150px 150px, cover !important;
    background-position: center center !important;
    background-blend-mode: overlay, overlay, normal !important;
    
    /* Vát viền kim cương (Beveled Edges) */
    border: 1px solid #8b6914 !important;
    border-top: 2px solid #fde68a !important;
    border-bottom: 6px solid #c29b62 !important;
    border-radius: 1.5rem !important;
    
    /* Đổ bóng sâu 3D */
    box-shadow: inset 0 2px 5px rgba(253, 230, 138, 0.4), 
                inset 0 -3px 8px rgba(0,0,0,0.6), 
                0 15px 25px -5px rgba(19, 78, 74, 0.4) !important;
                
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Ánh sáng lướt qua thẻ kỹ năng khi hover */
main .grid > a::before {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(253, 230, 138, 0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-45deg);
    transition: all 0.7s ease;
    pointer-events: none;
}
main .grid > a:hover::before {
    left: 200%;
}

main .grid > a:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.5), 
                0 25px 40px -10px rgba(19, 78, 74, 0.6) !important;
    border-top: 2px solid #ffffff !important;
}

/* 3. ICON (EMOJI) TRÊN THẺ BIẾN THÀNH VÀNG KIM CƯƠNG */
main .grid > a div.text-5xl, main .grid > a div.text-6xl, main .grid > a div.text-7xl {
    /* Ép bộ lọc màu (filter) để biến icon thường thành ánh vàng Champagne sắc nét */
    filter: sepia(1) hue-rotate(-15deg) saturate(3) brightness(1.2) drop-shadow(0 5px 8px rgba(0,0,0,0.6)) !important;
    transition: transform 0.4s ease !important;
}

/* 4. TEXT KỸ NĂNG: ÁNH KIM CƯƠNG CHẠY */
main .grid > a h2, main .grid > a h3 {
    background: linear-gradient(90deg, #c29b62 0%, #fde68a 30%, #ffffff 50%, #fde68a 70%, #c29b62 100%) !important;
    background-size: 200% auto !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: text-shine 4s infinite linear !important;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.6) !important;
}

/* Phụ đề màu ngọc trai bên trong thẻ */
main .grid > a p {
    color: rgba(248, 250, 252, 0.9) !important;
    font-weight: 500 !important;
}

/* 5. GIAO DIỆN HEADER & BANNER (GIỮ NGUYÊN ĐỘ LẤP LÁNH) */
header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #0f766e 100%) !important;
    border-bottom: 4px solid #c29b62 !important;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.4), 0 4px 20px rgba(19, 78, 74, 0.4) !important;
}

/* Ánh sáng chạy 30s/lần trên Header */
header::after {
    content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(253, 230, 138, 0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-35deg);
    animation: diamond-sweep 30s infinite linear; 
    pointer-events: none;
}

/* Chữ Logo và Header lấp lánh */
header a.font-black, header h1, main h2.text-primary, main h2.text-earth {
    background: linear-gradient(90deg, #c29b62 0%, #fde68a 30%, #ffffff 50%, #fde68a 70%, #c29b62 100%);
    background-size: 200% auto;
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-shine 4s infinite linear;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}

@keyframes text-shine { to { background-position: 200% center; } }
@keyframes diamond-sweep {
    0% { left: -150%; }
    10% { left: 200%; } 
    100% { left: 200%; }
}

/* 6. NÚT BẤM "BẮT ĐẦU THI" / "THI NGAY BÂY GIỜ" (ĐÍNH ĐÁ) */
main button.bg-secondary, main button.bg-primary, a[href="/aptis/full-test"] {
    position: relative; overflow: hidden;
    background: linear-gradient(145deg, #d4af37, #aa8021) !important;
    color: #ffffff !important;
    border: 1px solid #fde68a !important;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.8), inset -1px -1px 3px rgba(0,0,0,0.4), 0 4px 10px rgba(194, 155, 98, 0.3) !important;
}

main button.bg-secondary::before, main button.bg-primary::before, a[href="/aptis/full-test"]::before,
main button.bg-secondary::after, main button.bg-primary::after, a[href="/aptis/full-test"]::after {
    content: ''; position: absolute; width: 4px; height: 4px; background: #ffffff; border-radius: 50%;
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.9);
}
main button.bg-secondary::before, main button.bg-primary::before, a[href="/aptis/full-test"]::before { top: 6px; left: 6px; }
main button.bg-secondary::after, main button.bg-primary::after, a[href="/aptis/full-test"]::after { bottom: 6px; right: 6px; }

main button.bg-secondary:hover, main button.bg-primary:hover, a[href="/aptis/full-test"]:hover {
    background: linear-gradient(145deg, #fde68a, #d4af37) !important; color: #042f2e !important; transform: translateY(-2px);
}

/* 7. CÚN CON LỄ TÂN (60s/lần) */
.running-puppy {
    position: fixed;
    bottom: 0px; 
    z-index: 9999;
    width: 90px; /* Sếp có thể tăng giảm số này để cho Boss to/nhỏ tùy ý */
    pointer-events: none; 
    animation: dog-run 60s infinite linear; 
}

.running-puppy {
    position: fixed;
    bottom: 0px; 
    z-index: 9999;
    /* CHỈNH ĐỘ TO NHỎ TẠI ĐÂY */
    /* Sếp giảm xuống khoảng 40px - 50px là vừa xinh, cực kỳ tinh tế */
    width: 35px; 
    
    pointer-events: none; 
    animation: dog-run 60s infinite linear; 
}

@keyframes dog-run {
    /* Xuất phát từ lề trái */
    0% { left: -150px; opacity: 1; transform: scaleX(1); }
    
    /* Chạy lon ton sang lề phải mất 9 giây (15% của 60s) */
    15% { left: 110vw; opacity: 1; transform: scaleX(1); } 
    
    /* Tàng hình ngay khi ra khỏi màn hình */
    16% { left: 110vw; opacity: 0; }
    
    /* Dịch chuyển về vạch xuất phát trong lúc tàng hình */
    99% { left: -150px; opacity: 0; transform: scaleX(1); }
    
    /* Chuẩn bị chạy vòng mới */
    100% { left: -150px; opacity: 1; transform: scaleX(1); }
}