/* ===========================================================================
   image-compare.css — Frontend (trang public) — v1.2
   Slider so sánh ảnh Before/After. Tối ưu mobile.
   Cấu hình đọc từ class + data-start (--icv-start cho CSS fallback).
   =========================================================================== */

/* Khung ngoài: kích thước do ảnh BEFORE quyết định */
.image-compare,
.icv {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    overflow: hidden;
    border-radius: 8px;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;            /* mobile: không scroll khi kéo slider */
    -webkit-touch-callout: none;
}

/* Ảnh SAU (after) = NỀN, quyết định tỉ lệ khung (luôn thấy bên phải) */
.icv .icv__img--after,
.image-compare .icv__img--after {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Trước khi JS init: ẩn ảnh TRƯỚC để tránh đè/nhấp nháy (after làm nền hiển thị) */
.image-compare:not(.icv) .icv__img--before { display: none; }

/* Lớp cắt ảnh TRƯỚC (phủ bên trái). Vị trí mặc định từ --icv-start (CSS fallback) */
.icv .icv__clip {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--icv-start, 50%);
    height: 100%;
    overflow: hidden;
    will-change: width, height;
    line-height: 0;
	    background: #fff;
}
.icv--vertical .icv__clip {
    width: 100%;
    height: var(--icv-start, 50%);
}

/* Ảnh TRƯỚC bên trong: kích thước cố định = khung (JS set width/height px).
   Vì .icv__clip hẹp dần + overflow:hidden, ảnh KHÔNG co theo wrapper,
   nên max-width:none và KHÔNG dùng width:100% (sẽ bị wrapper kéo hẹp). */
.icv .icv__clip .icv__img--before {
    display: block;
    max-width: none;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ---- Thanh kéo + nút tròn ---- */
.icv .icv__handle {
    position: absolute;
    top: 0;
    left: var(--icv-start, 50%);
    width: 2px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .45);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 5;
    will-change: left, top;
}
.icv--vertical .icv__handle {
    top: var(--icv-start, 50%);
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    cursor: ns-resize;
}

/* Nút tròn ở giữa thanh */
.icv .icv__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 0;
}
.icv--vertical .icv__circle { transform: translate(-50%, -50%) rotate(90deg); }

/* 2 mũi tên trong nút */
.icv .icv__arrow {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.icv .icv__arrow--1 { border-right: 7px solid #555; }
.icv .icv__arrow--2 { border-left: 7px solid #555; }

/* Khi đang kéo: nút to nhẹ + đậm bóng */
.icv.is-dragging .icv__circle { box-shadow: 0 2px 10px rgba(0, 0, 0, .55); }

/* ---- Nhãn Before / After ---- */
.icv .icv__label {
    position: absolute;
    bottom: 12px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 4px;
    z-index: 4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity .15s ease;
}
.icv .icv__label--before { left: 12px; }   /* ảnh TRƯỚC: góc trái */
.icv .icv__label--after  { right: 12px; }  /* ảnh SAU: góc phải */

/* =========================== MOBILE =========================== */
@media (max-width: 640px) {
    .icv .icv__circle { width: 46px; height: 46px; }   /* vùng chạm lớn hơn */
    .icv .icv__arrow {
        border-top-width: 6px;
        border-bottom-width: 6px;
    }
    .icv .icv__arrow--1 { border-right-width: 8px; }
    .icv .icv__arrow--2 { border-left-width: 8px; }
    .icv .icv__handle { width: 3px; }
    .icv--vertical .icv__handle { height: 3px; }
    .icv .icv__label {
        bottom: 8px;
        padding: 3px 8px;
        font-size: 12px;
    }
    .icv .icv__label--before { left: 8px; }
    .icv .icv__label--after  { right: 8px; }
}

/* Con trỏ rõ ràng khi rê (desktop, chế độ hover) */
@media (hover: hover) and (pointer: fine) {
    .icv { cursor: ew-resize; }
    .icv--vertical { cursor: ns-resize; }
}