/* =================================================================
   🔥 PHẦN 1: BIẾN CSS (CUSTOM PROPERTIES)
   Sử dụng để quản lý màu sắc và giá trị lặp lại.
   ================================================================= */
:root {
    /* Màu thương hiệu (Pink-Red) */
    --clr-primary: #ec4899;
    /* Pink 500 */
    --clr-dark: #be185d;
    /* Rose 700 */
    --clr-light: #f472b6;
    /* Pink 400 */
    --clr-shadow: rgba(236, 72, 153, 0.75);
    --clr-shadow-strong: rgba(236, 72, 153, 1);

    /* Zalo Color (Blue) */
    --clr-zalo: #3b82f6;
    /* Blue 500 */
    --clr-zalo-darker: #2563eb;
    /* Blue 600 - Mới thêm để tạo độ sâu cho bóng đổ*/
    --clr-zalo-shadow: rgba(59, 130, 246, 0.9);
    /* Tăng độ mờ (opacity) */

    /* Shadow mặc định */
    --shadow-base: 0 4px 15px 0 var(--clr-shadow);
    --shadow-hover: 0 8px 25px 0 var(--clr-shadow-strong);

    /* Animation */
    --anim-duration-base: 0.4s;
    --anim-easing-hover: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =================================================================
   🌍 PHẦN 2: STYLES TOÀN CỤC (GLOBAL & BASE STYLES)
   ================================================================= */
body {
    font-family: 'Inter', sans-serif;
}

section {
    /* Tối ưu hóa padding chung */
    padding-left: 2px;
    padding-right: 2px;
}

/* --- CTA Button Base Styles --- */
.cta-button {
    position: relative;
    overflow: hidden;
    transition: all var(--anim-duration-base) var(--anim-easing-hover);
    box-shadow: var(--shadow-base);
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    display: inline-block;

    /* Tối ưu hóa cho di động */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Giúp ngăn chặn double-tap zoom trên mobile */
}

/* Hover & Focus Effects (Desktop/Tablet) */
.cta-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-dark));
}

.cta-button:focus {
    outline: 3px solid rgba(236, 72, 153, 0.5);
    outline-offset: 2px;
}

.cta-button:active {
    /* Phản hồi nhanh cho click/touch */
    transform: translateY(-2px) scale(0.98);
    transition: all 0.1s ease;
}

/* Shimmer effect (Floating light) - Tái sử dụng logic shimmer-sweep */
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    /* Dùng animation khi có class .shimmer-flash, nếu không thì dùng hover */
}

.cta-button:hover::before {
    left: 100%;
}

/* Ripple effect (Click feedback) */
.cta-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.cta-button.clicked::after {
    width: 300px;
    height: 300px;
}

/* --- Hero Section Styling --- */
.hero-section {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- FAQ Accordion Styling --- */
.faq-question.active+.faq-answer {
    max-height: 200px;
    /* Giữ nguyên giá trị max-height */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* =================================================================
   🔑 PHẦN 3: KEYFRAME ANIMATIONS
   Tập trung tất cả Keyframe vào đây.
   ================================================================= */

/* --- General Animations (Desktop Default) --- */

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: var(--shadow-base);
    }

    50% {
        box-shadow: 0 4px 25px 0 var(--clr-shadow-strong);
    }
}

@keyframes bounce-attention {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes shake-attention {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px);
    }
}

@keyframes wiggle-attention {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-2deg);
    }

    75% {
        transform: rotate(2deg);
    }
}

@keyframes vibrate-attention {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-1px, -1px);
    }

    50% {
        transform: translate(1px, 1px);
    }

    75% {
        transform: translate(-1px, 1px);
    }
}

@keyframes float-gentle {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes rock-gentle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(0.5deg);
    }

    75% {
        transform: rotate(-0.5deg);
    }
}

/* --- Flash Effects --- */

@keyframes flash-light {

    0%,
    100% {
        box-shadow: var(--shadow-base);
        background: var(--clr-primary);
    }

    25% {
        box-shadow: 0 8px 30px 0 var(--clr-shadow-strong);
        background: linear-gradient(135deg, var(--clr-primary), var(--clr-light));
    }

    50% {
        box-shadow: 0 12px 40px 0 var(--clr-shadow-strong);
        background: linear-gradient(135deg, var(--clr-light), #fb7185);
    }

    75% {
        box-shadow: 0 8px 30px 0 var(--clr-shadow-strong);
        background: linear-gradient(135deg, #fb7185, var(--clr-primary));
    }
}

@keyframes rapid-flash {

    0%,
    100% {
        box-shadow: var(--shadow-base);
        background: var(--clr-primary);
    }

    50% {
        box-shadow: 0 10px 35px 0 rgba(255, 255, 255, 0.8), 0 0 20px 0 var(--clr-shadow-strong);
        background: linear-gradient(135deg, #ffffff, var(--clr-primary));
    }
}

@keyframes shimmer-flash {

    0%,
    100% {
        box-shadow: var(--shadow-base);
    }

    50% {
        box-shadow: var(--shadow-hover);
    }
}

@keyframes shimmer-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes neon-flash {

    0%,
    100% {
        box-shadow: var(--shadow-base);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px 0 var(--clr-shadow-strong), 0 0 40px 0 rgba(236, 72, 153, 0.8);
        text-shadow: 0 0 10px rgba(255, 255, 255, 1);
    }
}

@keyframes rainbow-flash {

    0%,
    100% {
        box-shadow: var(--shadow-base);
        background: var(--clr-primary);
    }

    16.66% {
        box-shadow: 0 8px 25px 0 rgba(255, 0, 0, 0.8);
        background: #ff0000;
    }

    33.33% {
        box-shadow: 0 8px 25px 0 rgba(255, 165, 0, 0.8);
        background: #ffa500;
    }

    50% {
        box-shadow: 0 8px 25px 0 rgba(255, 255, 0, 0.8);
        background: #ffff00;
    }

    66.66% {
        box-shadow: 0 8px 25px 0 rgba(0, 255, 0, 0.8);
        background: #00ff00;
    }

    83.33% {
        box-shadow: 0 8px 25px 0 rgba(0, 0, 255, 0.8);
        background: #0000ff;
    }
}

/* --- CTA Classes --- */
.cta-button.pulse {
    animation: pulse-glow 2s infinite;
}

.cta-button.bounce {
    animation: bounce-attention 1s ease-in-out;
}

.cta-button.shake {
    animation: shake-attention 0.8s ease-in-out;
}

.cta-button.wiggle {
    animation: wiggle-attention 1.2s ease-in-out;
}

.cta-button.vibrate {
    animation: vibrate-attention 0.5s ease-in-out;
}

.cta-button.float {
    animation: float-gentle 3s ease-in-out infinite;
}

.cta-button.rock {
    animation: rock-gentle 4s ease-in-out infinite;
}

.cta-button.flash {
    animation: flash-light 2s ease-in-out infinite;
}

.cta-button.rapid-flash {
    animation: rapid-flash 1s ease-in-out infinite;
}

.cta-button.shimmer-flash {
    animation: shimmer-flash 3s ease-in-out infinite;

    /* Áp dụng shimmer sweep cho pseudo element */
    .cta-button.shimmer-flash::before {
        content: '';
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        animation: shimmer-sweep 2s ease-in-out infinite;
    }
}

.cta-button.neon-flash {
    animation: neon-flash 2.5s ease-in-out infinite;
}

.cta-button.rainbow-flash {
    animation: rainbow-flash 4s ease-in-out infinite;
}


/* --- Zalo Button Animation --- */

@keyframes pulse-zalo-shadow {
    0% {
        /* Bắt đầu với bóng đổ mạnh, rõ */
        box-shadow: 0 0 0 0 var(--clr-zalo-shadow), 0 0 10px rgba(0, 0, 0, 0.4);
        transform: scale(1);
    }

    50% {
        /* Tăng nhẹ kích thước và bóng đổ phát tán */
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0), 0 0 25px var(--clr-zalo-darker);
        transform: scale(1.1);
    }

    100% {
        /* Trở về trạng thái ban đầu */
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 0 10px rgba(0, 0, 0, 0.4);
        transform: scale(1);
    }
}

.pulse-zalo {
    /* Set up the initial pulse/shadow */
    box-shadow: 0 0 0 0 var(--clr-zalo-shadow);
    /* Tái sử dụng shake-attention */
    animation: pulse-zalo-shadow 2s infinite, shake-attention 4s ease-in-out infinite 2s;
}


/* =================================================================
   🛠️ PHẦN 4: UTILITY CLASSES
   Các lớp tiện ích không liên quan đến CTA.
   ================================================================= */
.gold-border {
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #FBBF24, #D97706);
}

.gold-text {
    background: -webkit-linear-gradient(#FBBF24, #D97706);
    background: linear-gradient(#FBBF24, #D97706);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =================================================================
   📱 PHẦN 5: RESPONSIVE & ACCESSIBILITY
   Tối ưu hóa cho mobile và người dùng ưu tiên giảm chuyển động.
   ================================================================= */

/* --- Mobile Animation Keyframes (Giảm cường độ và khoảng cách) --- */

@keyframes pulse-glow-mobile {

    0%,
    100% {
        box-shadow: 0 4px 15px 0 rgba(236, 72, 153, 0.6);
    }

    50% {
        box-shadow: 0 4px 20px 0 rgba(236, 72, 153, 0.8);
    }
}

@keyframes shake-mobile {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

@keyframes wiggle-mobile {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(1deg);
    }
}

/* Flash/Shimmer Mobile Keyframes (Sử dụng chung cho Flash/Rapid/Neon/Shimmer) */
@keyframes flash-shimmer-mobile {

    0%,
    100% {
        box-shadow: 0 4px 15px 0 rgba(236, 72, 153, 0.6);
    }

    50% {
        box-shadow: 0 6px 20px 0 rgba(236, 72, 153, 0.9);
    }
}

@keyframes rapid-flash-mobile {

    0%,
    100% {
        box-shadow: 0 4px 15px 0 rgba(236, 72, 153, 0.6);
    }

    50% {
        box-shadow: 0 6px 20px 0 rgba(255, 255, 255, 0.6), 0 0 15px 0 rgba(236, 72, 153, 0.8);
    }
}

@keyframes pulse-zalo-shadow-mobile {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8), 0 0 5px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0), 0 0 15px var(--clr-zalo-darker);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8), 0 0 5px rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 768px) {
    .hero-section {
        background-attachment: scroll;
        min-height: 80vh;
    }

    /* --- CTA Mobile Overrides --- */

    .cta-button:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 6px 20px 0 rgba(236, 72, 153, 0.85);
        /* Giảm độ mạnh shadow */
    }

    .cta-button:active {
        transform: translateY(0) scale(0.99);
    }

    /* Optimize ripple effect for touch devices */
    .cta-button::after {
        transition: width 0.2s ease, height 0.2s ease;
    }

    .cta-button.clicked::after {
        width: 200px;
        height: 200px;
    }

    /* --- Apply Mobile Animations --- */
    .cta-button.pulse {
        animation: pulse-glow-mobile 3s infinite;
    }

    .cta-button.shake {
        animation: shake-mobile 0.6s ease-in-out;
    }

    .cta-button.wiggle {
        animation: wiggle-mobile 1s ease-in-out;
    }

    /* Áp dụng keyframe chung cho các hiệu ứng flash/neon/shimmer */
    .cta-button.flash,
    .cta-button.neon-flash,
    .cta-button.shimmer-flash {
        animation: flash-shimmer-mobile 3s ease-in-out infinite;
    }

    .cta-button.rapid-flash {
        animation: rapid-flash-mobile 2s ease-in-out infinite;
    }

    /* Mobile optimization for Zalo button */
    .pulse-zalo {
        animation: pulse-zalo-shadow-mobile 2.5s infinite, shake-mobile 5s ease-in-out infinite 2s;
    }
}

/* --- Tối ưu hóa cho người dùng ưu tiên giảm chuyển động (Accessibility) --- */
@media (prefers-reduced-motion: reduce) {
    .cta-button {
        transition: none !important;
        animation: none !important;
    }

    .cta-button:hover {
        transform: none !important;
    }

    .cta-button::before,
    .cta-button::after {
        display: none !important;
    }

    /* Đảm bảo các animation Zalo cũng bị tắt */
    .pulse-zalo {
        animation: none !important;
    }
}

/* =================================================================
   🆕 PHẦN 6: CẬP NHẬT MỚI NHẤT
   Thêm các style mới nhất ở đây.
   ================================================================= */
#lucky-popup-modal {
    /* Đảm bảo nằm trên mọi thứ, kể cả floating buttons */
    z-index: 100;
}

/* #lucky-popup-content {
} */