body {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    background: #010101;
}

.intro {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.intro-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.intro-text {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 1;
    text-align: center;
}

.intro-text h1 a {
    font-size: 1.6vw;
    display: inline-block;

    /* 1. Đưa toàn bộ cấu trúc nền và clip ra trạng thái bình thường */
    background: linear-gradient(120deg, #c07828, #ff7e10, #c1811a, #7a360c, #c1811a);
    background-size: 200% auto;
    background-position: 0% 50%;
    /* Vị trí mặc định ban đầu */

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 2. Dùng một lớp màu phủ (overlay) màu trắng ở trên, chỉnh transition cho nó */
    background-color: #fff;
    -webkit-text-fill-color: #fff;

    text-decoration: none;
    /* Thêm các thuộc tính background vào transition */
    transition: font-size 1s ease, filter 1s ease, -webkit-text-fill-color 1s ease, background-position 1s ease;
}

/* Hover mới bật gradient và chạy animation */
.intro-text h1 a:hover {
    /* 3. Khi hover, làm màu trắng biến mất để lộ lớp gradient phía dưới */
    -webkit-text-fill-color: transparent;

    font-size: 1.7vw;
    filter: drop-shadow(0 0 8px rgba(218, 131, 38, 0.5));

    /* Kích hoạt animation chạy vô hạn */
    animation: gradient-move 3s linear infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (max-width: 667px) {

    .intro-video {
        display: none;
    }

    .intro-video-mb {
        display: block !important;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }

    .intro-text {
        bottom: 28%;
    }

    .intro-text h1 a {
        font-size: 14px;
    }

    .intro-text h1 a:hover {
        font-size: 15px;
    }
}