/* Khối Phòng nổi bật – carousel-tall, kèm thẻ cao (parts/room-card-tall.php, cả trang /phong/ của mẫu biển, villa).
 * Mobile trước, mốc 640px / 1024px. Tệp này nạp trước rooms-featured.css nên quy tắc đè thẻ plain dùng 2 lớp. */

.vh-rt {
	position: relative;
}

.vh-rt__track {
	display: grid;
	gap: var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-rt__slide {
	display: flex;
	min-width: 0;
}

.vh-rt__slide > .vh-room-card {
	flex: 1 1 auto;
}

/* ---- 2–3 hạng: lưới tĩnh ---- */
@media (min-width: 640px) {
	.vh-rt--grid .vh-rt__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ---- Từ 4 hạng: dải vuốt ngang, thẻ sau ló ra để khách biết còn ---- */
.vh-rt--carousel .vh-rt__track {
	position: relative;
	display: flex;
	padding-bottom: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

/* Có JS mới giấu thanh cuộn (đã có nút và bộ đếm); không JS thì chuột vẫn kéo được thanh cuộn mảnh. */
.vh-js .vh-rt--carousel .vh-rt__track {
	scrollbar-width: none;
}

.vh-js .vh-rt--carousel .vh-rt__track::-webkit-scrollbar {
	display: none;
}

.vh-no-js .vh-rt--carousel .vh-rt__track {
	scrollbar-width: thin;
}

.vh-rt--carousel .vh-rt__slide {
	flex: 0 0 85%;
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.vh-rt--carousel .vh-rt__slide {
		flex-basis: calc((100% - var(--vh-card-gap)) / 2.15);
	}
}

@media (min-width: 1024px) {
	.vh-rt--carousel.vh-rt--card .vh-rt__slide {
		flex-basis: calc((100% - 2 * var(--vh-card-gap)) / 3);
	}

	.vh-rt--carousel.vh-rt--portrait .vh-rt__slide {
		flex-basis: calc((100% - var(--vh-card-gap)) / 2.4);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vh-rt__track {
		scroll-behavior: smooth;
	}
}

/* Nút mảnh + bộ đếm "1 / 4" dưới dải, căn phải. */
.vh-rt__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1rem;
}

.vh-rt.is-static .vh-rt__nav {
	display: none;
}

.vh-rt__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--vh-color-border-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--vh-color-text);
	cursor: pointer;
}

.vh-rt__btn .vh-i {
	stroke-width: 1.5;
}

.vh-rt__btn:hover {
	border-color: var(--vh-color-text);
}

.vh-rt__btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

/* Vòng đôi như mũi tên trên ảnh: đọc được trên nền sáng lẫn dải nền đậm của mẫu. */
.vh-rt__btn:focus-visible {
	outline: 2px solid var(--vh-color-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--vh-color-focus-on-deep);
}

.vh-rt__count {
	min-width: 4.5em;
	color: var(--vh-color-text);
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* ---- Thẻ cao kiểu card: ảnh 4:5 ---- */
.vh-room-card.vh-room-card--tall .vh-room-card__frame {
	aspect-ratio: 4 / 5;
}

.vh-room-card.vh-room-card--tall .vh-room-card__body {
	gap: 0.5rem;
}

.vh-room-card--tall .vh-room-card__specs {
	gap: 0.25rem 0.75rem;
}

.vh-room-card--tall .vh-room-card__foot {
	gap: 0.625rem;
}

/* ---- Thẻ cao kiểu chân dung: ảnh cao 80vh, chữ dưới ảnh, không khung thẻ ---- */
.vh-room-card.vh-room-card--tall-portrait {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.vh-room-card.vh-room-card--tall-portrait .vh-room-card__frame {
	aspect-ratio: auto;
	height: 70vh;
	height: min(70svh, 640px);
	min-height: 360px;
	border-radius: var(--vh-radius-media);
}

@media (min-width: 1024px) {
	.vh-room-card.vh-room-card--tall-portrait .vh-room-card__frame {
		height: 80vh;
		height: min(80svh, 880px);
	}
}

.vh-room-card.vh-room-card--tall-portrait .vh-room-card__body {
	gap: 0.375rem;
	padding: 1rem 0 0;
}

.vh-room-card--tall-portrait .vh-room-card__pager {
	padding-inline: 0;
}

/* ---- 1 hạng phòng: một khối rộng, ảnh trái chữ phải ---- */
@media (min-width: 768px) {
	.vh-rt--single .vh-room-card.vh-room-card--tall {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}

	.vh-rt--single .vh-room-card.vh-room-card--tall .vh-room-card__body {
		padding: clamp(24px, 4vw, 56px);
	}

	.vh-rt--single .vh-room-card--tall-portrait .vh-room-card__frame {
		height: min(80svh, 760px);
	}
}