/* ===== Desktop (>= 1025px) ===== */
.hero-title {
    font-family: "Montserrat", sans-serif;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 20px); /* tự co giãn khoảng cách */
    font-size: clamp(3rem, 6vw, 10rem); /* tự co giãn chữ */
    font-weight: 1000;
    line-height: 1.1;
    text-transform: uppercase;
}

    .hero-title .anim-text {
        display: inline-block; /* nên dùng inline-block để gradient fit theo text */
        opacity: 0;
        transform: translateY(100px) scale(0.5);
        background: linear-gradient(90deg, #ffb300, #ff8c00, #ffb300);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent; /* bắt buộc với Webkit */
        color: transparent; /* fallback */

        animation: bounceIn 3s ease-out forwards, textShine 4s linear infinite, pulse 3s infinite;
    }


        /* Delay animation giữ nguyên */
        .hero-title .anim-text:nth-child(1) {
            animation-delay: 0.3s;
        }

        .hero-title .anim-text:nth-child(2) {
            animation-delay: 0.9s;
        }

        .hero-title .anim-text:nth-child(3) {
            animation-delay: 1.5s;
        }

/* ===== Tablet (768px ~ 1024px) ===== */
@media (max-width: 1024px) and (min-width: 768px) {
    .hero-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        gap: 12px; /* Khoảng cách nhỏ hơn */
    }

        .hero-title .anim-text {
            transform: translateY(70px) scale(0.6); /* dễ đọc hơn */
        }
}

/* ===== Mobile (< 768px) ===== */
@media (max-width: 767px) {
    .hero-title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        gap: 8px;
        line-height: 1.2;
        text-align: center; /* căn giữa trên mobile */
    }

        .hero-title .anim-text {
            transform: translateY(50px) scale(0.7); /* chữ to rõ hơn */
        }
}

/* ===== Keyframes: giữ nguyên như cũ ===== */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(120px) scale(0.5);
    }

    60% {
        opacity: 1;
        transform: translateY(-25px) scale(1.2);
    }

    80% {
        transform: translateY(12px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}