/**
 * Banner Ads Styles
 * CSS cho banner ads carousel và display
 */
.banner-ads-container {
    position: relative;
    width: 100%;
    min-height: 50px; /* Để tránh layout shift khi load */
}

.banner-ads-loading {
    color: #6c757d;
    font-size: 0.875rem;
}

.banner-ads-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.banner-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.banner-content {
    background: #fff;
}

.banner-content p {
    padding: 10px;
    margin: 0;
}

.banner-single {
    width: 100%;
}

#bannerCarousel {
    position: relative;
}

#bannerCarousel.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

#bannerCarousel.carousel-fade .carousel-item.active,
#bannerCarousel.carousel-fade .carousel-item-next.carousel-item-start,
#bannerCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
}

#bannerCarousel.carousel-fade .active.carousel-item-start,
#bannerCarousel.carousel-fade .active.carousel-item-end {
    opacity: 0;
}

#bannerCarousel.carousel-fade .carousel-item-next:not(.carousel-item-start),
#bannerCarousel.carousel-fade .carousel-item-prev:not(.carousel-item-end) {
    opacity: 0;
}

#bannerCarousel .carousel-control-prev,
#bannerCarousel .carousel-control-next {
    width: 5%;
    opacity: 0.5;
    transition: opacity 0.2s;
}

#bannerCarousel .carousel-control-prev:hover,
#bannerCarousel .carousel-control-next:hover {
    opacity: 1;
}

#bannerCarousel .carousel-indicators {
    margin-bottom: 1rem;
}

#bannerCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 4px;
}