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

/* Container cho text overlay - góc trái */
.box_slider {
    position: absolute;
    bottom: 0%;
    left: 5%;
    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;
}

/* Tiêu đề chính */
.box_slider h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    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: 'Mulish-Black';
}

/* Mô tả */
.desc_slider {
    font-size: 1.845rem;
    color: #f8f9fa;
    line-height: 1.5;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    opacity: 0;
    animation: fadeInLeft 0.8s ease-out 1.2s forwards;
}

/* ===========================================
   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: 2.5rem;
        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;
    }
}