/* Đặt container của widget */
.custom-acf-gallery-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    background-color: transparent;
    border-radius: 0px;
    padding-bottom: 80px; /* Tạo khoảng trống cho pagination */
}

/* Slider chính */
.custom-acf-gallery-slider .main-slider {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.custom-acf-gallery-slider .main-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pagination */
.custom-acf-gallery-slider .swiper-pagination {
    position: absolute !important; /* Bắt buộc dùng !important nếu bị ghi đè */
    bottom: 190px !important; /* Đảm bảo vị trí */
    left: 50% !important; /* Đặt giữa */
    transform: translateX(-50%) !important; /* Căn giữa */
    z-index: 10; /* Đảm bảo hiển thị trên cùng */
    text-align: center;
}


.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 5px;
    background: #FFE7C8 !important;
    border-radius: 50%;
    opacity: 1 !Important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ECB23D !important;
}

/* Thumbnail Slider */
.custom-acf-gallery-slider .thumbnail-slider {
    margin-top: 40px; /* Khoảng cách giữa slider chính và thumbnail */
    width: calc(100% - 100px); /* Giảm kích thước để chừa chỗ cho nút Prev/Next */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden; /* Ẩn nội dung tràn */
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-acf-gallery-slider .thumbnail-slider .swiper-wrapper {
    display: flex;
    justify-content: flex-start; /* Đảm bảo không ghi đè trung tâm Swiper */
    width: auto; /* Để Swiper tính toán tự động */
    transition: transform 0.3s ease; /* Giữ lại hiệu ứng mượt mà */
}

/* Wrapper của thumbnail */
.custom-acf-gallery-slider .thumbnail-slider .swiper-wrapper {
    display: contents; /* Đảm bảo các thumbnail nằm ngang */
    justify-content: space-between; /* Căn giữa các slide thumbnail */
    width: 100%; /* Đảm bảo wrapper không bị tự động cắt width */
    transition: none !important; /* Loại bỏ hiệu ứng dư thừa */
    
}

/* Thumbnail Slide */
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide {
    width: 140px; /* Kích thước cố định cho mỗi thumbnail */
    height: 100px;
    margin-right: 10px;
    overflow: hidden; /* Ẩn nội dung tràn */
    cursor: pointer;
}

.custom-acf-gallery-slider .thumbnail-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh không bị biến dạng */
    z-index: 0; /* Đặt ảnh nằm dưới lớp phủ */
}

/* Nút điều hướng (Next/Prev) */
.custom-acf-gallery-slider .thumbnail-slider .swiper-button-prev,
.custom-acf-gallery-slider .thumbnail-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 20px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #924F26 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Nút Prev */
.custom-acf-gallery-slider .thumbnail-slider .swiper-button-prev {
    left: -50px; /* Đặt vị trí bên ngoài thumbnail */
}

/* Nút Next */
.custom-acf-gallery-slider .thumbnail-slider .swiper-button-next {
    right: -50px; /* Đặt vị trí bên ngoài thumbnail */
}

/* Hiệu ứng hover cho nút điều hướng */
.custom-acf-gallery-slider .thumbnail-slider .swiper-button-prev:hover,
.custom-acf-gallery-slider .thumbnail-slider .swiper-button-next:hover {
    background: #ff4500; /* Đổi màu nền khi hover */
    color: #fff; /* Đổi màu icon khi hover */
}

/* Thumbnail slider khi hover */
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide:hover {
    opacity: 0.8; /* Làm mờ thumbnail khi hover */
    transform: scale(1.05); /* Phóng to nhẹ */
    transition: all 0.3s ease-in-out;
}

/* Đảm bảo nút điều hướng không bị tràn */
.custom-acf-gallery-slider {
    overflow: visible; /* Nút điều hướng không bị cắt */
}

/* Căn chỉnh thumbnail để không tràn */
.custom-acf-gallery-slider .thumbnail-wrapper {
    overflow: visible; /* Đảm bảo các nút Prev/Next nằm ngoài vùng tràn */
    position: relative;
    width: 100%;
}

/* Thêm lớp mờ mặc định cho thumbnail */
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide {
    position: relative; /* Để thêm lớp mờ */
    width: 140px; /* Chiều rộng cố định */
    height: 100px; /* Chiều cao cố định */
    margin-right: 10px; /* Khoảng cách giữa các thumbnail */
    overflow: hidden;
    cursor: pointer;
}

/* Lớp phủ mờ */
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #924F27; /* Màu lớp phủ */
    opacity: 0.7; /* Độ trong suốt */
    transition: opacity 0.3s ease; /* Hiệu ứng khi hover hoặc active */
    z-index: 1; /* Đảm bảo lớp mờ ở trên hình */
}

/* Khi hover vào thumbnail */
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide:hover::before,
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide-thumb-active::before {
    opacity: 0; /* Loại bỏ lớp mờ khi hover hoặc active */
}
.custom-acf-gallery-slider .thumbnail-slider .swiper-slide-active::before{
     opacity: 0;
}
.custom-acf-gallery-slider .thumbnail-prev,
.custom-acf-gallery-slider .thumbnail-next {
    color: #924F26; /* Màu sắc của icon */
    background: none; /* Xóa background nếu có */
    border: none; /* Xóa border nếu có */
    outline: none; /* Xóa viền focus nếu có */
}

.swiper-button-next:after,.swiper-button-prev:after{
    font-size: 30px !important;
}

/* Điều chỉnh thumbnail cho mobile */
@media (max-width: 768px) {
    .custom-acf-gallery-slider .thumbnail-slider .swiper-slide {
        width: auto; /* Đảm bảo slide không bị ép kích thước */
    }

    .custom-acf-gallery-slider .thumbnail-prev,
    .custom-acf-gallery-slider .thumbnail-next {
        font-size: 14px; /* Nhỏ hơn trên mobile */
    }
    .custom-acf-gallery-slider .thumbnail-slider {
    margin-top: 30px;
    width: calc(100% - 19px);
}
    .custom-acf-gallery-slider .swiper-pagination {
    position: absolute !important;
    bottom: 183px !important;
}

.custom-acf-gallery-slider .swiper-button-prev{
    left: -20px;
}
.custom-acf-gallery-slider .swiper-button-next{
    right: -20px;
} 
}

@media (max-width: 480px) {
    .custom-acf-gallery-slider .thumbnail-slider {
        margin-left: 10px; /* Căn giữa tốt hơn */
        margin-right: 10px;
    }

    .custom-acf-gallery-slider .thumbnail-prev,
    .custom-acf-gallery-slider .thumbnail-next {
        font-size: 12px; /* Nhỏ hơn nữa trên màn hình nhỏ */
    }
    .custom-acf-gallery-slider .thumbnail-slider {
    margin-top: 30px;
    width: calc(100% - 19px);
}
    .custom-acf-gallery-slider .swiper-pagination {
    position: absolute !important;
    bottom: 183px !important;
}
.custom-acf-gallery-slider .swiper-button-prev{
    left: -20px;
}
.custom-acf-gallery-slider .swiper-button-next{
    right: -20px;
} 
}

//* Đảm bảo slider chính được định vị tương đối */
.custom-acf-gallery-slider .main-slider {
    position: relative; /* Định vị tương đối để icon bám vào slider */
}

/* Định vị icon phóng to */
.custom-acf-gallery-slider .slider-zoom-icon {
    position: absolute; /* Định vị tuyệt đối bên trong slider chính */
    bottom: 10px; /* Cách đáy slider lớn 10px */
    right: 10px; /* Cách mép phải slider lớn 10px */
    z-index: 20; /* Ưu tiên icon nằm trên các thành phần khác */
    width: 24px; /* Kích thước icon */
    height: 24px;
    cursor: pointer; /* Con trỏ pointer khi hover */
    display: flex; /* Để canh giữa hình ảnh */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease; /* Hiệu ứng hover */
}

/* Hình ảnh bên trong icon */
.custom-acf-gallery-slider .slider-zoom-icon img {
    width: 100%; /* Hình ảnh chiếm toàn bộ container */
    height: 100%;
    object-fit: cover; /* Đảm bảo hình ảnh vừa khít */
    border-radius: 50%; /* Làm tròn hình ảnh */
    transition: transform 0.3s ease; /* Hiệu ứng phóng to */
}

/* Hiệu ứng hover */
.custom-acf-gallery-slider .slider-zoom-icon:hover img {
    transform: scale(1.2); /* Phóng to hình ảnh khi hover */
}