:root {
            --font-primary: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --font-hero: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --font-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
        }

        html, body { 
            font-family: var(--font-primary); 
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            scroll-padding-top: 4rem;
        }
        @media (min-width: 1024px) {
            html { scroll-padding-top: 4.5rem; }
        }

        /* Tiêu đề chính h1, h2, h3 dùng Barlow thanh thoát, giảm độ dày thô */
        h1, h2, h3, h4, .font-display, .font-hero {
            font-family: var(--font-primary);
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        /* Giảm độ dày text để giao diện thanh thoát, tinh tế, không bị cộm chữ */
        .font-black {
            font-weight: 700 !important;
        }
        .font-extrabold {
            font-weight: 600 !important;
        }

        .font-serif, .font-quote, h1.font-serif {
            font-family: var(--font-serif);
            font-style: italic;
        }

        .glass-nav {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.85);
        }
        
        .card-lift {
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .card-lift:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.08), 0 8px 12px -4px rgba(0, 0, 0, 0.03);
        }

        .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        [x-cloak] { display: none !important; }

        /* Classes 2-Row Carousel - Drag & Smooth Loop (PA1) */
        .classes-scroll-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
            user-select: none;
            -webkit-user-select: none;
            cursor: grab;
            scroll-behavior: auto;
            touch-action: pan-y;
        }
        .classes-scroll-container::-webkit-scrollbar {
            display: none;
        }
        .classes-scroll-container.is-dragging {
            cursor: grabbing;
        }

        /* Infinite Marquee Gallery - Dual Track Seamless Loop */
        @keyframes marquee-loop {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        .animate-marquee-loop {
            display: flex;
            animation: marquee-loop 85s linear infinite;
            will-change: transform;
        }
        /* Khoảnh Khắc Đẹp: Giữ chuyển động chạy liên tục mượt mà ngay cả khi lia chuột vào */
        .marquee-wrapper .animate-marquee-loop,
        .marquee-wrapper:hover .animate-marquee-loop {
            animation-play-state: running !important;
        }

        @media (prefers-reduced-motion: reduce) {
            .animate-marquee-loop {
                animation: none !important;
                overflow-x: auto;
            }
        }

        /* Ambient Blobs */
        @keyframes float-blob {
            0%, 100% { transform: translate(0px, 0px) scale(1); }
            50% { transform: translate(20px, -20px) scale(1.05); }
        }
        .animate-float-blob {
            animation: float-blob 10s ease-in-out infinite;
        }

        /* Gentle floating animation for Saint Jerome (very slow & subtle) */
        @keyframes saint-float {
            0%, 100% {
                transform: translateY(0px) scale(1);
            }
            50% {
                transform: translateY(-8px) scale(1.015);
            }
        }
        .animate-saint-float {
            animation: saint-float 6.5s ease-in-out infinite;
            will-change: transform;
        }

        /* Subtle pulsing divine aura */
        @keyframes divine-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.45;
            }
            50% {
                transform: scale(1.15);
                opacity: 0.85;
            }
        }
        .animate-divine-pulse {
            animation: divine-pulse 4.8s ease-in-out infinite;
            will-change: transform, opacity;
        }

        @keyframes slow-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-slow-spin {
            animation: slow-spin 140s linear infinite;
            will-change: transform;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.2; transform: scale(0.85); }
            50% { opacity: 0.85; transform: scale(1.15); }
        }
        .animate-twinkle {
            animation: twinkle 3.8s ease-in-out infinite;
        }
        @keyframes twinkle-delay {
            0%, 100% { opacity: 0.2; transform: scale(0.85); }
            50% { opacity: 0.85; transform: scale(1.15); }
        }
        .animate-twinkle-delay {
            animation: twinkle 4.6s ease-in-out infinite 1.9s;
        }

        /* Hero Dynamic Entrance Animations */
        @keyframes heroFadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-28px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes heroFadeInRight {
            from {
                opacity: 0;
                transform: translateX(28px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes heroZoomIn {
            from {
                opacity: 0;
                transform: scale(0.92) translateY(14px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        .animate-hero-fade-left {
            animation: heroFadeInLeft 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .animate-hero-fade-right {
            animation: heroFadeInRight 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
        }
        .animate-hero-zoom {
            animation: heroZoomIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
        }

        /* Hero Atmospheric Animated Background (Nền chuyển động ấm áp, sinh động) */
        @keyframes heroOrbDrift1 {
            0%, 100% { transform: translate(0px, 0px) scale(1); }
            35% { transform: translate(45px, -35px) scale(1.1); }
            70% { transform: translate(-30px, 25px) scale(0.95); }
        }
        @keyframes heroOrbDrift2 {
            0%, 100% { transform: translate(0px, 0px) scale(1); }
            40% { transform: translate(-45px, -30px) scale(1.12); }
            75% { transform: translate(35px, 35px) scale(0.92); }
        }
        @keyframes heroOrbDrift3 {
            0%, 100% { transform: translate(0px, 0px) scale(1); opacity: 0.45; }
            50% { transform: translate(25px, -20px) scale(1.18); opacity: 0.75; }
        }
        @keyframes heroFloatSpeck {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            25% { opacity: 0.75; }
            75% { opacity: 0.75; }
            100% { transform: translateY(-75px) translateX(25px); opacity: 0; }
        }
        @keyframes heroFloatSpeckRev {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            30% { opacity: 0.8; }
            70% { opacity: 0.8; }
            100% { transform: translateY(-85px) translateX(-22px); opacity: 0; }
        }
        .animate-hero-orb-1 {
            animation: heroOrbDrift1 18s ease-in-out infinite;
            will-change: transform;
        }
        .animate-hero-orb-2 {
            animation: heroOrbDrift2 24s ease-in-out infinite;
            will-change: transform;
        }
        .animate-hero-orb-3 {
            animation: heroOrbDrift3 12s ease-in-out infinite;
            will-change: transform, opacity;
        }
        .animate-speck-1 { animation: heroFloatSpeck 7s ease-in-out infinite; }
        .animate-speck-2 { animation: heroFloatSpeck 9.5s ease-in-out infinite 2.5s; }
        .animate-speck-3 { animation: heroFloatSpeck 8.2s ease-in-out infinite 4.8s; }
        .animate-speck-4 { animation: heroFloatSpeckRev 7.8s ease-in-out infinite 1.2s; }
        .animate-speck-5 { animation: heroFloatSpeck 10.5s ease-in-out infinite 3.5s; }
        .animate-speck-6 { animation: heroFloatSpeckRev 8.5s ease-in-out infinite 4.2s; }
        .animate-speck-7 { animation: heroFloatSpeck 11s ease-in-out infinite 6.0s; }
        .animate-speck-8 { animation: heroFloatSpeckRev 9.2s ease-in-out infinite 0.8s; }
        .animate-speck-9 { animation: heroFloatSpeck 8.8s ease-in-out infinite 3.0s; }
        .animate-speck-10 { animation: heroFloatSpeckRev 10.2s ease-in-out infinite 5.2s; }

        /* Hero 2.0 TNTT Dynamic Keyframes */
        @keyframes hero-fade-up {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-hero-fade-up {
            animation: hero-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        @keyframes hero-scale-in {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(10px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        .animate-hero-scale-in {
            animation: hero-scale-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Scroll Reveal: Cố định vị trí và hiển thị tự nhiên, triệt tiêu hoàn toàn rung giật/nhảy trang (Zero CLS) */
        .scroll-reveal, .scroll-reveal-scale {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
        .scroll-reveal.is-revealed, .scroll-reveal-scale.is-revealed {
            opacity: 1 !important;
            transform: none !important;
        }

        .scroll-reveal-delay-1 { transition-delay: 0.12s; }
        .scroll-reveal-delay-2 { transition-delay: 0.24s; }
        .scroll-reveal-delay-3 { transition-delay: 0.36s; }
/* =================================================================== */
/* HERO BACKGROUND & SACRED ATMOSPHERE (STANDALONE CSS - GUARANTEED)   */
/* =================================================================== */

.hero-sacred-bg {
    background: linear-gradient(180deg, #E6F1FC 0%, #F4F9FE 40%, #E3EDF9 100%);
    position: relative;
}

.hero-divine-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 60% at 50% 38%, rgba(255, 255, 255, 0.95) 0%, rgba(225, 241, 255, 0.75) 45%, rgba(206, 229, 252, 0.35) 75%, transparent 100%);
    pointer-events: none;
}

.hero-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#2563EB 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.08;
    pointer-events: none;
}

/* Celestial Sunburst Ring (Vòng kinh tuyến thiên thể xoay siêu chậm phía sau Thánh) */
.saint-sunburst-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}
@media (min-width: 640px) {
    .saint-sunburst-ring {
        width: 500px;
        height: 500px;
    }
}
@media (min-width: 1024px) {
    .saint-sunburst-ring {
        width: 580px;
        height: 580px;
    }
}
@media (min-width: 1280px) {
    .saint-sunburst-ring {
        width: 640px;
        height: 640px;
    }
}

/* Cathedral Arch for Saint Jerome */
.cathedral-arch-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.cathedral-arch-outer {
    width: 200px;
    height: 275px;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(239, 246, 255, 0.55) 55%, rgba(219, 234, 254, 0.08) 100%);
    border-top: 2.5px solid rgba(147, 197, 253, 0.95);
    border-left: 2.5px solid rgba(147, 197, 253, 0.95);
    border-right: 2.5px solid rgba(147, 197, 253, 0.95);
    border-bottom: none;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12), inset 0 3px 12px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    mask-image: linear-gradient(to bottom, black 72%, transparent 98%);
    -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 98%);
}

@media (min-width: 640px) {
    .cathedral-arch-outer {
        width: 260px;
        height: 350px;
    }
}
@media (min-width: 1024px) {
    .cathedral-arch-outer {
        width: 300px;
        height: 415px;
    }
}
@media (min-width: 1280px) {
    .cathedral-arch-outer {
        width: 335px;
        height: 445px;
    }
}

.cathedral-arch-inner {
    width: 88%;
    height: 94%;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.75) 0%, rgba(239, 246, 255, 0.35) 60%, transparent 100%);
    border-top: 1.5px solid rgba(96, 165, 250, 0.85);
    border-left: 1.5px solid rgba(96, 165, 250, 0.85);
    border-right: 1.5px solid rgba(96, 165, 250, 0.85);
    border-bottom: none;
    box-shadow: inset 0 4px 16px rgba(37, 99, 235, 0.1);
}

.saint-halo-glow {
    position: absolute;
    top: 10px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.7) 0%, rgba(245, 158, 11, 0.35) 45%, transparent 72%);
    filter: blur(20px);
    animation: divine-pulse 4.8s ease-in-out infinite;
    pointer-events: none;
}
@media (min-width: 640px) {
    .saint-halo-glow {
        width: 220px;
        height: 220px;
    }
}
@media (min-width: 1024px) {
    .saint-halo-glow {
        top: 15px;
        width: 260px;
        height: 260px;
        filter: blur(24px);
    }
}

/* Anti-Download Shield for Saint Image */
.saint-shield-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Glassmorphism Motto Card (Khung Chủ Đề Kính Mờ Đậm Nét) */
.motto-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.20) 100%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 14px 35px -8px rgba(16, 44, 82, 0.10), 0 2px 8px rgba(255, 255, 255, 0.6) inset, inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
}