/* wwwroot/css/banner.css */

/* Hàng chứa 3 banner */
.banner-section .row {
    margin-top: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* Giữ 3 banner trên cùng 1 hàng ở desktop */
    gap: 10px; /* Khoảng cách giữa các banner */
}

/* Banner chính */
.banner-main {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: contain;
}

/* Banner phụ trái/phải */
.banner-side {
    width: 250px;
    max-width: 100%;
    height: auto;
    max-height: 450px;
    display: block;
    transition: transform 0.2s ease-out;
}

    .banner-side:hover {
        animation: floatUpDown 1s ease-in-out infinite;
    }

/* Hiệu ứng nhấp nhô */
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

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

/* Nhãn khuyến mãi */
.banner-label {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #0072ff;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: .5rem;
    font-weight: 600;
    transition: background 0.3s;
}

    .banner-label:hover {
        background: #0050cc;
    }

/* Nút prev/next carousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
}

/* Tablet: ẩn banner phụ, thu nhỏ banner chính */
@media (max-width: 992px) {
    .banner-section .row {
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .banner-side {
        display: none !important;
    }

    .banner-main {
        max-height: 300px;
    }
}

/* Mobile: thu nhỏ banner chính hơn nữa */
@media (max-width: 768px) {
    .banner-main {
        max-height: 200px;
    }
}