/**
 * NTV Theme — Block "So sánh ảnh (Before/After)" — style hiển thị ngoài site.
 * File riêng (không gộp vào main.css) vì chỉ enqueue trên trang thực sự dùng block này.
 */

.ntv-before-after {
	margin: 20px 0;
}

.ntv-before-after__frame {
	position: relative;
	width: 100%;
	/* KHÔNG ép aspect-ratio cố định — chiều cao khung tự thích ứng theo đúng tỉ lệ
	   thật của ảnh "sau" (ảnh ở luồng bình thường bên dưới), tránh crop ảnh khi tỉ lệ
	   thật không phải 4:3. Ảnh "trước" overlay lên trên qua JS/absolute positioning. */
	overflow: hidden;
	border-radius: 4px;
	background: #F0F0F0;
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
}

.ntv-before-after__img {
	display: block;
	width: 100%;
	pointer-events: none;
}

/* Ảnh "sau": luồng bình thường (không absolute) — chính ảnh này quyết định chiều
   cao thật của khung theo đúng tỉ lệ gốc (không object-fit:cover nên không bị crop).
   PHP có in kèm width/height (khi lấy được từ Media Library) để trình duyệt biết
   trước tỉ lệ, tránh layout nhảy lúc ảnh đang tải. */
.ntv-before-after__img--after {
	height: auto;
}

.ntv-before-after__before-wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
}

/* Ảnh "trước" giữ NGUYÊN chiều rộng bằng khung (set qua JS, không phải %) — chỉ có
   khung bọc (.before-wrap) bị cắt hẹp dần, tạo hiệu ứng "lộ dần" đúng vị trí thay vì
   ảnh bị co giãn/méo theo % chiều rộng khung bọc. object-fit:cover ở đây chỉ là lưới
   an toàn cho trường hợp 2 ảnh không khớp TUYỆT ĐỐI kích thước với nhau. */
.ntv-before-after__before-wrap .ntv-before-after__img--before {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	object-fit: cover;
	max-width: none;
}

.ntv-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #FFFFFF;
	transform: translateX(-50%);
	cursor: ew-resize;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.ntv-before-after__handle-grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--ntv-color-primary, #264C84);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ntv-before-after__frame.is-hover .ntv-before-after__handle-grip {
	transform: translate(-50%, -50%) scale(1.1);
}

.ntv-before-after__label {
	position: absolute;
	bottom: 10px;
	padding: 3px 10px;
	background: rgba(0, 0, 0, 0.6);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	/* KHÔNG ép uppercase — hiện đúng nguyên văn nhãn người dùng nhập (VD: tên sản phẩm). */
	border-radius: 3px;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.15s ease;
}
/* JS bật/tắt class này theo vị trí thanh trượt — chỉ hiện nhãn của bên ảnh đang lộ
   nhiều hơn, ẩn nhãn bên còn lại. */
.ntv-before-after__label.is-hidden {
	opacity: 0;
}
.ntv-before-after__label--before { left: 10px; }
.ntv-before-after__label--after { right: 10px; }

.ntv-before-after__desc {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ntv-color-text, #5E5E5E);
}