/*
 * Bảng giá (rate-table, CONTRACT-RATES §6.1): matrix (hàng = hạng phòng, cột = đơn vị) và stay-length (thẻ theo đơn vị).
 * Điện thoại trước: matrix mobile=cards hiện thẻ dl, ẩn bảng (display:none nên máy đọc không đọc hai lần);
 * mobile=scroll giữ bảng cuộn ngang, cột tên phòng dính bên trái. Chỉ dùng biến thiết kế.
 */

/* ---------- Số tiền dùng chung (cũng dùng ở long-stay) ---------- */
.vh-rt-amt {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	white-space: nowrap;
}

.vh-rt-amt__v {
	font-family: var(--vh-font-price, inherit);
	font-weight: var(--vh-fw-price, var(--vh-fw-bold));
	font-variant-numeric: var(--vh-num-price, tabular-nums);
}

.vh-rt-amt__per {
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

/* ---------- Tab cơ sở ---------- */
.vh-rtab__tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 var(--vh-card-gap);
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.vh-rtab__tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 16px;
	border: 1px solid var(--vh-color-border-strong);
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	font: inherit;
	font-weight: var(--vh-fw-medium);
	cursor: pointer;
}

.vh-rtab__tab .vh-i {
	width: 18px;
	height: 18px;
	color: var(--vh-color-muted);
}

.vh-rtab__tab[aria-selected="true"] {
	border-color: var(--vh-color-primary);
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
}

.vh-rtab__tab[aria-selected="true"] .vh-i {
	color: currentColor;
}

/* ---------- Nhóm (cơ sở) ---------- */
.vh-rtab__group + .vh-rtab__group {
	margin-top: calc(var(--vh-card-gap) * 1.5);
}

.vh-rtab.is-tabs .vh-rtab__group + .vh-rtab__group {
	margin-top: 0;
}

/* Có tab thì tên cơ sở đã ở tab: bỏ tiêu đề lặp. */
.vh-rtab.is-tabs .vh-rtab__gtitle {
	display: none;
}

.vh-rtab__group:focus-visible {
	outline-offset: 4px;
}

.vh-rtab__gtitle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 12px;
}

.vh-rtab__gtitle .vh-i {
	align-self: center;
	color: var(--vh-color-primary);
}

.vh-rtab__glm {
	color: var(--vh-color-muted);
	font-family: var(--vh-font-body);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-body);
}

/* ---------- Bảng ---------- */
.vh-rtab__scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
}

.vh-rtab__table {
	width: 100%;
	min-width: 36rem;
	table-layout: fixed; /* các bảng cơ sở cùng chia cột theo <colgroup>, hàng tiêu đề thẳng cột nhau */
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.vh-rtab__table th,
.vh-rtab__table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--vh-color-border);
	text-align: left;
	vertical-align: top;
}

.vh-rtab__table tbody tr:last-child > * {
	border-bottom: 0;
}

.vh-rtab__table thead th {
	background: var(--vh-color-surface);
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	white-space: nowrap;
}

.vh-rtab__table thead th .vh-i {
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -3px;
}

.vh-rtab__table td {
	white-space: nowrap;
}

.vh-rtab__table td .vh-rt-amt__v {
	font-size: 1.0625rem;
}

/* Cột tên phòng dính bên trái khi bảng cuộn ngang. */
.vh-rtab__table .vh-rtab__rh {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 10rem;
	background: var(--vh-color-card);
	box-shadow: 1px 0 0 var(--vh-color-border);
	white-space: normal;
}

.vh-rtab__table thead .vh-rtab__rh {
	background: var(--vh-color-surface);
}

.vh-rtab__table .vh-rtab__act {
	width: 1%;
	text-align: right;
}

.vh-rtab__room {
	display: block;
	color: var(--vh-color-text);
	font-weight: var(--vh-fw-bold);
}

a.vh-rtab__room {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a.vh-rtab__room:hover {
	color: var(--vh-color-primary);
}

.vh-rtab__sub {
	display: block;
	margin-top: 2px;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-body);
	white-space: normal;
}

.vh-rtab__na {
	color: var(--vh-color-muted);
}

/* ---------- Thẻ điện thoại ---------- */
.vh-rtab__cards {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-rtab--m-cards .vh-rtab__scroll {
	display: none;
}

.vh-rtab__card {
	display: grid;
	gap: 8px;
	padding: var(--vh-card-pad);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
}

.vh-rtab__cname {
	margin: 0;
	font-family: var(--vh-font-heading);
	font-size: 1.125rem;
	line-height: var(--vh-lh-heading);
}

.vh-rtab__card > .vh-rtab__sub {
	margin: -4px 0 0;
}

.vh-rtab__dl {
	display: grid;
	margin: 0;
}

.vh-rtab__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 8px 0;
	border-top: 1px solid var(--vh-color-border);
}

.vh-rtab__row dt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-rtab__row dt .vh-i {
	width: 18px;
	height: 18px;
}

.vh-rtab__row dd {
	margin: 0;
	text-align: right;
}

.vh-rtab__row dd .vh-rt-amt__v {
	font-size: 1.125rem;
}

/* ---------- Chân bảng ---------- */
.vh-rtab__foot {
	display: grid;
	gap: 8px;
	margin-top: var(--vh-card-gap);
}

.vh-rtab__rules {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vh-fs-small);
}

.vh-rtab__rules li {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
}

.vh-rtab__rules .vh-i {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--vh-color-primary);
}

.vh-rtab__note,
.vh-rtab__tax {
	margin: 0;
}

.vh-rtab__note {
	font-size: var(--vh-fs-small);
}

/* ---------- stay-length: thẻ theo đơn vị ---------- */
.vh-rtab__units {
	display: grid;
	gap: var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-rtab__unit {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--vh-card-pad);
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-card);
	box-shadow: var(--vh-shadow-card);
}

.vh-rtab__uname {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.vh-rtab__uic {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
}

.vh-rtab__blurb {
	margin: 0;
	color: var(--vh-color-muted);
}

.vh-rtab__from {
	margin: 4px 0 0;
}

.vh-rtab__from .vh-price__value {
	font-size: var(--vh-fs-price);
}

.vh-rtab__facts,
.vh-rtab__incl,
.vh-rtab__rooms {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vh-fs-small);
}

.vh-rtab__facts li,
.vh-rtab__incl li,
.vh-rtab__deposit {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.vh-rtab__facts .vh-i,
.vh-rtab__incl .vh-i,
.vh-rtab__deposit .vh-i {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--vh-color-primary);
}

.vh-rtab__incl-t {
	margin: 4px 0 0;
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-bold);
}

.vh-rtab__deposit {
	margin: 0;
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
}

.vh-rtab__rooms {
	padding-top: 8px;
	border-top: 1px solid var(--vh-color-border);
}

.vh-rtab__rooms li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.vh-rtab__rprice {
	white-space: nowrap;
}

.vh-rtab__cta {
	margin-top: auto;
}

.vh-rtab--stay .vh-rtab__note,
.vh-rtab--stay .vh-rtab__tax {
	margin-top: 12px;
}

@media (min-width: 640px) {
	.vh-rtab__units--2,
	.vh-rtab__units--3,
	.vh-rtab__units--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.vh-rtab--m-cards .vh-rtab__scroll {
		display: block;
	}

	.vh-rtab--m-cards .vh-rtab__cards {
		display: none;
	}

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

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

	.vh-rtab__units--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Độ rộng cột chung cho mọi bảng trong matrix (table-layout: fixed): cột tên phòng, các cột giá chia đều phần còn lại. */
.vh-rtab__table .vh-rtab__col-rh {
	width: 32%;
}

.vh-rtab__table .vh-rtab__col-act {
	width: 6.5rem;
}