/* === RESPONSIVE MULTI-ITEM CAROUSEL === */
@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }

    .carousel-inner-multi .active + .carousel-item,
    .carousel-inner-multi .active + .carousel-item + .carousel-item,
    .carousel-inner-multi .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner-multi .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner-multi .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner-multi .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner-multi .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner-multi .carousel-item-next,
    .carousel-inner-multi .carousel-item-prev.carousel-item-right {
        position: relative;
        transform: translate3d(0, 0, 0);
        visibility: visible;
        display: block;
    }

    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }
}

/* Col-md-4 hiển thị 4 item */
@media (min-width: 768px) and (max-width: 991px) {
    .carousel-inner-multi .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        display: block;
        visibility: visible;
    }
}

/* Col-sm-6 hiển thị 3 item */
@media (min-width: 576px) and (max-width: 768px) {
    .carousel-inner-multi .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        display: block;
        visibility: visible;
    }
}

/* Col-lg-3 hiển thị 5 item */
@media (min-width: 991px) {
    .carousel-inner-multi .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        display: block;
        visibility: visible;
    }
}

/* Col-lg-4 hiển thị 3 item */
@media (min-width: 991px) {
    .carousel-inner-multi .active.col-lg-4.carousel-item + .carousel-item,
    .carousel-inner-multi .active.col-lg-4.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: auto;
        display: block;
        visibility: visible;
    }
}


/* === CUSTOM NAVIGATION ARROWS === */
.carousel-control-prev,
.carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: orange;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: relative;
    transition: all 0.2s ease-in-out;
}

    .carousel-control-prev-icon::before,
    .carousel-control-next-icon::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 16px;
        color: orange;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .carousel-control-prev-icon::before {
        content: '\f104'; /* fa-chevron-left */
    }

    .carousel-control-next-icon::before {
        content: '\f105'; /* fa-chevron-right */
    }

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: #ffc107;
}

/* === FADE EFFECT === */
.carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

    .carousel.carousel-fade .carousel-item.active {
        opacity: 1 !important;
    }

/* === INDICATOR STYLE === */
.carousel-indicators li {
    background-color: #0426ae;
}