/* Container chính */
.mcl-carousel-container {
    position: relative;
    
    /* [NÂNG CẤP] Logic giới hạn lề trái:
       - Sử dụng biến --mcl-offset-left được truyền từ PHP.
       - margin-left: Đẩy toàn bộ khung sang phải một khoảng %.
       - width: Giảm chiều rộng tương ứng để slider không bị tràn ra mép phải màn hình.
       - overflow: hidden: Cắt bỏ (ẩn) bất kỳ phần logo nào trượt ra khỏi vùng khung này (phía bên trái).
    */
    margin-left: var(--mcl-offset-left, 0%);
    width: calc(100% - var(--mcl-offset-left, 0%)) !important;
    
    overflow: hidden;
    padding: 20px 0;
    
    /* Ẩn để fix lỗi FOUC (hiện to đùng lúc đầu chưa load JS) */
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
}

/* Khi JS Swiper đã khởi tạo xong thì hiện lên */
.mcl-carousel-container.swiper-initialized {
    opacity: 1;
    visibility: visible;
}

/* Style Slide */
.swiper-slide {
    /* Đảm bảo slide canh giữa nội dung */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style Logo Item */
.mcl-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%; /* Chiếm hết slide */
    
    /* Chiều cao theo cài đặt */
    height: var(--mcl-logo-height, 80px); 
    transition: all 0.3s ease;
}

.mcl-logo-item img {
    /* [QUAN TRỌNG] Giới hạn ảnh không bao giờ vượt quá khung */
    height: var(--mcl-logo-height, 80px) !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    
    /* Hiệu ứng trắng đen mặc định */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hiệu ứng khi di chuột vào: Hiện màu và đậm lên */
.mcl-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Đảm bảo flex layout cho wrapper của Swiper */
.swiper-wrapper {
    align-items: center;
    display: flex; 
}

.swiper-slide-duplicate {
    transition: opacity 0.3s ease;
}