/* Dual Image Slider Widget — hai lớp ảnh cùng hệ tọa độ (contain + %), mobile an toàn với nút nav */

.dual-image-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dual-image-slider-wrapper .swiper {
    position: relative;
    width: 100%;
    height: 100%;
}

.dual-image-slider-wrapper .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.dual-image-slider-wrapper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.slide-link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

/* Khung slide: hai ảnh absolute, cùng 100% ô — object-fit: contain giữ đúng tỉ lệ, overlay bám sản phẩm mọi kích thước màn */
.dual-image-slide {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: contain;
    object-position: var(--dual-slide-object-x, 50%) var(--dual-slide-object-y, 50%);
    pointer-events: none;
}

/* Wrapper: animation translate/scale theo % — không đè transform offset của Elementor trên img */
.slide-overlay-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.6s ease;
    will-change: transform;
}

.slide-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--dual-slide-object-x, 50%) var(--dual-slide-object-y, 50%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

/* object-position đồng bộ nền + overlay (class từ Elementor overlay_position) */
.dual-image-slide.overlay-pos-center {
    --dual-slide-object-x: 50%;
    --dual-slide-object-y: 50%;
}
.dual-image-slide.overlay-pos-top-left {
    --dual-slide-object-x: 0%;
    --dual-slide-object-y: 0%;
}
.dual-image-slide.overlay-pos-top-center {
    --dual-slide-object-x: 50%;
    --dual-slide-object-y: 0%;
}
.dual-image-slide.overlay-pos-top-right {
    --dual-slide-object-x: 100%;
    --dual-slide-object-y: 0%;
}
.dual-image-slide.overlay-pos-middle-left {
    --dual-slide-object-x: 0%;
    --dual-slide-object-y: 50%;
}
.dual-image-slide.overlay-pos-middle-right {
    --dual-slide-object-x: 100%;
    --dual-slide-object-y: 50%;
}
.dual-image-slide.overlay-pos-bottom-left {
    --dual-slide-object-x: 0%;
    --dual-slide-object-y: 100%;
}
.dual-image-slide.overlay-pos-bottom-center {
    --dual-slide-object-x: 50%;
    --dual-slide-object-y: 100%;
}
.dual-image-slide.overlay-pos-bottom-right {
    --dual-slide-object-x: 100%;
    --dual-slide-object-y: 100%;
}

/* Hiện overlay — opacity trên img */
.swiper-slide-active .overlay-anim-fade .slide-overlay-image {
    opacity: 1;
}

/* Animation định vị theo % trên holder (responsive; không dùng px cố định) */
.overlay-anim-slide-up .slide-overlay-holder {
    transform: translateY(12%);
}
.swiper-slide-active .overlay-anim-slide-up .slide-overlay-holder {
    transform: translateY(0);
}
.swiper-slide-active .overlay-anim-slide-up .slide-overlay-image {
    opacity: 1;
}

.overlay-anim-slide-down .slide-overlay-holder {
    transform: translateY(-12%);
}
.swiper-slide-active .overlay-anim-slide-down .slide-overlay-holder {
    transform: translateY(0);
}
.swiper-slide-active .overlay-anim-slide-down .slide-overlay-image {
    opacity: 1;
}

.overlay-anim-slide-left .slide-overlay-holder {
    transform: translateX(10%);
}
.swiper-slide-active .overlay-anim-slide-left .slide-overlay-holder {
    transform: translateX(0);
}
.swiper-slide-active .overlay-anim-slide-left .slide-overlay-image {
    opacity: 1;
}

.overlay-anim-slide-right .slide-overlay-holder {
    transform: translateX(-10%);
}
.swiper-slide-active .overlay-anim-slide-right .slide-overlay-holder {
    transform: translateX(0);
}
.swiper-slide-active .overlay-anim-slide-right .slide-overlay-image {
    opacity: 1;
}

.overlay-anim-zoom .slide-overlay-holder {
    transform: scale(0.92);
}
.swiper-slide-active .overlay-anim-zoom .slide-overlay-holder {
    transform: scale(1);
}
.swiper-slide-active .overlay-anim-zoom .slide-overlay-image {
    opacity: 1;
}

/* Navigation — desktop: giữ giữa dọc */
.dual-image-slider-wrapper .swiper-button-prev,
.dual-image-slider-wrapper .swiper-button-next {
    transition: opacity 0.3s ease, top 0.2s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dual-image-slider-wrapper .swiper-button-prev {
    left: 10px;
}

.dual-image-slider-wrapper .swiper-button-next {
    right: 10px;
}

.dual-image-slider-wrapper .swiper-button-prev::after,
.dual-image-slider-wrapper .swiper-button-next::after {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-transform: none !important;
    letter-spacing: 0;
    line-height: 1;
}

.dual-image-slider-wrapper .swiper-button-prev::after {
    content: '\2039';
}

.dual-image-slider-wrapper .swiper-button-next::after {
    content: '\203A';
}

.dual-image-slider-wrapper .swiper-button-prev:hover,
.dual-image-slider-wrapper .swiper-button-next:hover {
    opacity: 0.85;
}

/* Mobile: đưa mũi tên lên vùng trên (tránh chú thích thường nằm dưới / hai bên ly) */
@media (max-width: 767px) {
    .dual-image-slider-wrapper .swiper-button-prev,
    .dual-image-slider-wrapper .swiper-button-next {
        top: 18%;
        transform: translateY(-50%);
    }
    .dual-image-slider-wrapper .swiper-button-prev {
        left: 6px;
    }
    .dual-image-slider-wrapper .swiper-button-next {
        right: 6px;
    }
}

/* Pagination */
.dual-image-slider-wrapper .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}