/* Khối Hình ảnh – then-and-now: so sánh Xưa/Nay bằng thanh kéo (JS), tắt JS thì hai ảnh đặt cạnh nhau. */

.vh-tn {
	display: grid;
	gap: var(--vh-card-gap);
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	padding: 0;
	list-style: none;
}

.vh-tn__item {
	min-width: 0;
}

.vh-tn__fig {
	display: grid;
	gap: 0.625rem;
	margin: 0;
}

/* Không JS: hai ô cạnh nhau, mỗi ô có nhãn Xưa/Nay. */
.vh-tn__stage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.vh-tn__pane {
	position: relative;
	overflow: hidden;
	border-radius: var(--vh-radius-media);
	background: var(--vh-color-surface);
}

.vh-tn__pane > .vh-img,
.vh-tn__pane > .vh-ph {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.vh-tn__pane .vh-img {
	object-fit: cover;
}

/* Ảnh Xưa: lọc lưu trữ của mẫu (thang xám + sepia), mẫu đổi được qua --vh-media-filter-archive. */
.vh-tn__pane--before .vh-img {
	filter: var(--vh-media-filter-archive, grayscale(0.6) sepia(0.35));
}

/* Nhãn trên ảnh: nền đặc dựng từ --vh-color-overlay (R12), chữ trắng. */
.vh-tn__tag {
	position: absolute;
	top: 0.75rem;
	z-index: 2;
	padding: 0.25rem 0.625rem;
	border-radius: var(--vh-radius-chip);
	background: rgba(var(--vh-color-overlay) / 0.8);
	color: var(--vh-white);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.3;
}

.vh-tn__tag--before {
	left: 0.75rem;
}

.vh-tn__tag--after {
	right: 0.75rem;
}

.vh-tn__handle,
.vh-tn__range {
	display: none;
}

/* Có JS: hai ảnh chồng lên nhau, ảnh Nay cắt theo --vh-tn-pos. */
.vh-tn__fig.is-slider .vh-tn__stage {
	display: block;
	border-radius: var(--vh-radius-media);
}

.vh-tn__fig.is-slider .vh-tn__pane--before {
	border-radius: var(--vh-radius-media);
}

.vh-tn__fig.is-slider .vh-tn__pane--after {
	position: absolute;
	inset: 0;
	border-radius: var(--vh-radius-media);
	clip-path: inset(0 0 0 var(--vh-tn-pos, 50%));
}

.vh-tn__fig.is-slider .vh-tn__pane--after > .vh-img,
.vh-tn__fig.is-slider .vh-tn__pane--after > .vh-ph {
	height: 100%;
}

.vh-tn__fig.is-slider .vh-tn__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--vh-tn-pos, 50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0;
	pointer-events: none;
}

/* Vạch chia trắng + núm tròn 44px có hai mũi tên. */
.vh-tn__fig.is-slider .vh-tn__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--vh-white);
	box-shadow: 0 0 0 1px rgba(var(--vh-color-overlay) / 0.5);
}

.vh-tn__fig.is-slider .vh-tn__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: var(--vh-white);
	box-shadow: var(--vh-shadow-card);
}

.vh-tn__fig.is-slider .vh-tn__handle .vh-i {
	position: relative;
	z-index: 1;
	flex: none;
	width: 16px;
	height: 16px;
	color: rgb(var(--vh-color-overlay));
}

/* Thanh kéo thật phủ cả ảnh (trong suốt): kéo ở đâu cũng được, phím ← → Home End. */
.vh-tn__fig.is-slider .vh-tn__range {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

/* Thanh kéo trong suốt nên vẽ focus lên núm và khung ảnh: vòng đôi đậm + trắng (G1). */
.vh-tn__fig.is-slider .vh-tn__stage:has(.vh-tn__range:focus-visible) .vh-tn__handle::after {
	box-shadow: 0 0 0 2px var(--vh-white), 0 0 0 4px var(--vh-color-focus), var(--vh-shadow-card);
}

.vh-tn__fig.is-slider .vh-tn__stage:has(.vh-tn__range:focus-visible) {
	outline: 2px solid var(--vh-color-focus);
	outline-offset: 4px;
	box-shadow: 0 0 0 2px var(--vh-white);
}

.vh-tn__cap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	line-height: var(--vh-lh-body);
}

.vh-tn__cap-text {
	color: var(--vh-color-text);
	font-weight: var(--vh-fw-medium);
}

.vh-tn__note {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.375rem;
}

.vh-tn__note .vh-i {
	flex: none;
	margin-top: 0.2em;
}

@media (min-width: 1024px) {
	.vh-tn--n2,
	.vh-tn--n3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vh-tn--n1 .vh-tn__item {
		max-width: 60rem;
	}

	.vh-tn--n3 .vh-tn__item:first-child {
		grid-column: 1 / -1;
	}
}