/* Ken Burns Effect Styles */
.hero-ken-burns {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 8s ease-out;
}

.heroSwiper .swiper-slide-active .hero-ken-burns {
    animation: kenburns-effect 8s ease-out forwards;
}

@keyframes kenburns-effect {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.hero-content-wrapper { position: relative; z-index: 2; }

.hero-content-wrapper h1, .hero-content-wrapper p, .hero-content-wrapper .btn {
    opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out;
}

.swiper-slide-active .hero-content-wrapper h1,
.swiper-slide-active .hero-content-wrapper p,
.swiper-slide-active .hero-content-wrapper .btn {
    opacity: 1; transform: translateY(0);
}

.swiper-slide-active .hero-content-wrapper h1 { transition-delay: 0.4s; }
.swiper-slide-active .hero-content-wrapper p { transition-delay: 0.7s; }
.swiper-slide-active .hero-content-wrapper .btn { transition-delay: 1s; }

--- /dev/null
+++ b/c:\xampp\htdocs\hoaBienHotel\assets\js\home.js
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector(".heroSwiper")) {
        new Swiper(".heroSwiper", {
            effect: "fade", fadeEffect: { crossFade: true },
            loop: true, autoplay: { delay: 5000, disableOnInteraction: false },
            pagination: { el: ".swiper-pagination", clickable: true },
            navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
        });
    }
    if (document.querySelector(".roomSwiper")) {
        new Swiper(".roomSwiper", {
            slidesPerView: 1, spaceBetween: 20, loop: false,
            pagination: { el: ".swiper-pagination", clickable: true },
            navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
            breakpoints: { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }
        });
    }
});