*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;

    background:linear-gradient(
        180deg,
        #071c1b 0%,
        #031211 50%,
        #000000 100%
    );
}

.wrapper{
    width:100vw;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#000;
}

.banner-box{
    position:relative;

    height:100vh;
    width:auto;

    display:inline-block;
}

.banner{
    height:100%;
    width:auto;

    max-width:100%;
    object-fit:contain;

    display:block;
}


/* =========================
   KHU VỰC BUTTON
========================= */

.buttons{
    position:absolute;

    left:50%;
    top:75%;

    transform:translate(-50%,-50%);

    width:78%;

    display:flex;
    flex-direction:column;

    gap:18px;
}


/* =========================
   BUTTON
========================= */

.btn{
    width:100%;
    height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
    overflow:hidden;

    text-decoration:none;
    color:#ffffff;

    font-size:clamp(20px,3vw,32px);
    font-weight:bold;

    border-radius:50px;

    /*
       Màu mới:
       xanh đen -> teal đậm -> xanh đen
    */
    background:linear-gradient(
        90deg,
        #021817 0%,
        #064542 45%,
        #08706b 70%,
        #073a37 100%
    );

    border:1px solid rgba(55,210,190,.28);

    box-shadow:
        0 8px 25px rgba(0,0,0,.55),
        inset 0 1px 1px rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* =========================
   VỆT SÁNG CHẠY TRÊN BUTTON
========================= */

.btn::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transform:skewX(-20deg);

    animation:buttonShine 4s infinite;
}

@keyframes buttonShine{

    0%{
        left:-120%;
    }

    35%{
        left:130%;
    }

    100%{
        left:130%;
    }
}


/* =========================
   HOVER BUTTON
========================= */

.btn:hover{
    transform:scale(1.035);

    box-shadow:
        0 10px 30px rgba(0,0,0,.65),
        0 0 18px rgba(0,190,175,.22),
        inset 0 1px 1px rgba(255,255,255,.1);
}


/* =========================
   VÒNG TRÒN MŨI TÊN
========================= */

.arrow-circle{
    position:absolute;

    left:8px;

    width:54px;
    height:54px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #00b7b0,
        #008c8b
    );

    display:flex;
    justify-content:center;
    align-items:center;

    color:#003b3b;

    font-size:28px;
    font-weight:bold;

    box-shadow:
        0 0 10px rgba(0,210,195,.55),
        0 0 22px rgba(0,180,170,.25);

    z-index:2;

    /*
       Mũi tên chuyển động liên tục
    */
    animation:
        arrowMove 1.5s ease-in-out infinite,
        arrowGlow 2s ease-in-out infinite;
}


/* =========================
   MŨI TÊN NHÚN SANG PHẢI
========================= */

@keyframes arrowMove{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(5px);
    }

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


/* =========================
   VÒNG TRÒN PHÁT SÁNG
========================= */

@keyframes arrowGlow{

    0%{
        box-shadow:
            0 0 8px rgba(0,210,195,.45),
            0 0 15px rgba(0,180,170,.15);
    }

    50%{
        box-shadow:
            0 0 15px rgba(0,230,215,.8),
            0 0 28px rgba(0,190,180,.35);
    }

    100%{
        box-shadow:
            0 0 8px rgba(0,210,195,.45),
            0 0 15px rgba(0,180,170,.15);
    }
}


/* =========================
   HOVER VÀO MŨI TÊN
========================= */

.btn:hover .arrow-circle{
    animation:
        arrowHover .55s ease-in-out infinite alternate,
        arrowGlow .8s ease-in-out infinite;
}

@keyframes arrowHover{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(8px);
    }
}


/* =========================
   ĐIỆN THOẠI
========================= */

@media (max-width:768px){

    .banner-box{
        height:100vh;
    }

    .buttons{
        width:72%;
        top:75%;

        gap:16px;
    }

    .btn{
        height:54px;

        font-size:20px;

        border-radius:40px;
    }

    .arrow-circle{
        left:6px;

        width:38px;
        height:38px;

        font-size:18px;
    }
}


/* =========================
   MÀN HÌNH LỚN
========================= */

@media (min-width:1200px){

    .buttons{
        width:78%;
    }

    .btn{
        height:72px;

        font-size:32px;
    }

    .arrow-circle{
        width:54px;
        height:54px;
    }
}