/* ===========================================
   SLIDER TITLE & DESCRIPTION ANIMATIONS - SIMPLE
   =========================================== */

/* Container cho text overlay - góc trái */
.box_slider {
    position: absolute;
    bottom: 0%;

    transform: translateY(-50%);
    z-index: 10;
    text-align: left;
    padding: 10px 40px;
    border-radius: 10px;
    max-width: 80%;
    opacity: 0;
    animation: slideInLeft 0.8s ease-out 0.5s forwards;
}

.box_slider h3 {
    font-size: 44px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
    opacity: 0;
    animation: fadeInLeft 0.8s ease-out 0.8s forwards;
    font-family: 'Montserrat-Bold';
    text-transform: uppercase;
}

/* Mô tả */
.desc_slider {
    text-transform: uppercase;
    color: #f8f9fa;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    opacity: 0;
    animation: fadeInLeft 0.8s ease-out 1.2s forwards;
    font-size: 26px;
    font-family: 'Montserrat-REgular';
}

/* ===========================================
   ANIMATIONS - SIMPLE
   =========================================== */

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

/* Tablet */
@media (max-width: 768px) {
    video#getVideo {
        aspect-ratio: 600 / 620 !important;
    }

    .box_slider {
        left: 3%;
        padding: 25px 0px;
        max-width: 90%;
    }

    .box_slider h3 {
        font-size: 2rem;
        margin-bottom: 12px;
    }

    .desc_slider {
        font-size: 1rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .box_slider {
        left: 3%;
        padding: 25px 0px;
        max-width: 100%;
        transform: translateY(0) !important;
    }

    .box_slider h3 {
        font-size: 1rem;
        margin-bottom: 7px;
    }

    .desc_slider {
        font-size: 0.7rem;
    }
}