/* Khối Phòng nổi bật – rows, kèm thẻ nằm ngang (parts/room-card-row.php, cả trang /phong/ của mẫu phố, di sản, villa).
 * Điện thoại: ảnh trên, chữ dưới. Từ 1024px: ảnh 40–60% bề ngang, đổi bên xen kẽ.
 * Tệp này nạp trước rooms-featured.css nên quy tắc đè thẻ plain dùng 2 lớp. */

.vh-rr {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.vh-room-card.vh-room-card--row {
	height: auto;
}

.vh-room-card.vh-room-card--row .vh-room-card__frame {
	aspect-ratio: 3 / 2;
}

.vh-room-card.vh-room-card--row.vh-room-card--r43 .vh-room-card__frame {
	aspect-ratio: 4 / 3;
}

.vh-room-card--row .vh-room-card__side {
	min-width: 0;
}

.vh-room-card.vh-room-card--row .vh-room-card__body {
	gap: 0.75rem;
}

/* Khung viền trang trí lồng trong ảnh (mẫu di sản), không bắt chuột, không che nút. */
.vh-room-card__media--framed .vh-room-card__frame::before {
	content: "";
	position: absolute;
	inset: var(--vh-media-frame-inset, 10px);
	z-index: 1;
	border: 1px solid var(--vh-media-frame-color, var(--vh-color-on-deep));
	pointer-events: none;
}

.vh-room-card--m40 {
	--vh-rc-media: 40%;
}

.vh-room-card--m45 {
	--vh-rc-media: 45%;
}

.vh-room-card--m50 {
	--vh-rc-media: 50%;
}

.vh-room-card--m55 {
	--vh-rc-media: 55%;
}

.vh-room-card--m60 {
	--vh-rc-media: 60%;
}

@media (min-width: 1024px) {
	.vh-room-card.vh-room-card--row {
		display: grid;
		grid-template-columns: minmax(0, var(--vh-rc-media, 50%)) minmax(0, 1fr);
		align-items: center;
	}

	.vh-rr__item--rev .vh-room-card.vh-room-card--row {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--vh-rc-media, 50%));
	}

	.vh-rr__item--rev .vh-room-card--row .vh-room-card__side {
		order: 2;
	}

	.vh-room-card.vh-room-card--row .vh-room-card__body {
		justify-content: center;
		padding: clamp(24px, 3vw, 48px);
	}

	.vh-room-card--row .vh-room-card__pager {
		padding-bottom: 0.5rem;
	}
}

/* ---- Bảng thông số: mini-table (✓) và sổ cái chấm dẫn ---- */
.vh-rc-dl {
	display: grid;
	margin: 0;
}

.vh-rc-dl__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--vh-color-border);
	font-size: var(--vh-fs-small);
	line-height: 1.45;
}

.vh-rc-dl dt {
	color: var(--vh-color-muted);
}

.vh-rc-dl dd {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: var(--vh-color-text);
	font-weight: var(--vh-fw-medium);
	text-align: right;
}

.vh-rc-dl__check {
	width: 20px;
	height: 20px;
	color: var(--vh-color-success);
}

/* "Không cửa sổ" ghi thẳng và đậm. */
.vh-rc-dl__row--warn dd {
	font-weight: var(--vh-fw-bold);
}

@media (min-width: 640px) {
	.vh-rc-dl--mini-table {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}
}

/* Sổ cái: nhãn – chấm dẫn – giá trị, đường kẻ theo --vh-rule-style của mẫu. */
.vh-rc-dl--ledger .vh-rc-dl__row {
	border-bottom: 0;
}

.vh-rc-dl--ledger dt {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--vh-color-text);
	font-family: var(--vh-font-ui, var(--vh-font-body));
	letter-spacing: var(--vh-ls-label, 0.02em);
}

.vh-rc-dl--ledger dt::after {
	content: "";
	flex: 1 1 auto;
	min-width: 1.5rem;
	border-bottom: var(--vh-border-width, 1px) var(--vh-rule-style, dotted) var(--vh-color-ornament, var(--vh-color-border-strong));
	transform: translateY(-0.25em);
}

.vh-rc-dl--ledger dd {
	flex: none;
	max-width: 60%;
}

.vh-rr--ledger .vh-room-card__name {
	font-variation-settings: var(--vh-heading-variation, normal);
}

/* Link bảng so sánh trên trang /phong/. */
.vh-rr__compare {
	margin: 1.5rem 0 0;
}

.vh-rr__compare .vh-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
}