/*
 * Ở dài ngày (long-stay, CONTRACT-RATES §6.3): split (thông tin trái, form phải) và band (dải có nút mở bảng trượt).
 * Bảng trượt #vh-long-stay in ở wp_footer nhưng CSS ở đây: trang có khối long-stay thì tệp này luôn được nạp.
 */

.vh-lstay__grid {
	display: grid;
	gap: calc(var(--vh-card-gap) * 1.5);
	align-items: start;
}

.vh-lstay__info {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.vh-lstay__t {
	margin: 12px 0 0;
}

/* ---------- Lợi ích ---------- */
.vh-lstay__benefits {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-lstay__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.vh-lstay__bic {
	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-lstay__bt {
	display: block;
	font-weight: var(--vh-fw-bold);
}

.vh-lstay__bx {
	display: block;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

/* ---------- Giá tháng ---------- */
.vh-lstay__prices {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vh-color-border);
}

.vh-lstay__price {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--vh-color-border);
}

.vh-lstay__pname {
	font-weight: var(--vh-fw-bold);
}

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

.vh-lstay__pval {
	text-align: right;
}

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

.vh-lstay__pmeta {
	grid-column: 1 / -1;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-lstay__incl-t {
	margin: 0;
	font-weight: var(--vh-fw-bold);
}

.vh-lstay__incl,
.vh-lstay__tlist {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-lstay__incl li,
.vh-lstay__tlist li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.vh-lstay__incl .vh-i,
.vh-lstay__tlist .vh-i {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--vh-color-primary);
}

.vh-lstay__info > .vh-small {
	margin: 0;
}

/* ---------- Điều khoản ---------- */
.vh-lstay__terms {
	display: grid;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--vh-color-border);
}

.vh-lstay__term {
	display: grid;
	gap: 2px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--vh-color-border);
}

.vh-lstay__term dt {
	font-weight: var(--vh-fw-bold);
}

.vh-lstay__term dd {
	margin: 0;
}

/* ---------- Các bước ---------- */
.vh-lstay__steps {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vh-ls-step;
}

.vh-lstay__steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	counter-increment: vh-ls-step;
}

.vh-lstay__steps li::before {
	content: counter(vh-ls-step);
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
	font-weight: var(--vh-fw-bold);
	font-variant-numeric: tabular-nums;
}

.vh-lstay__steps li span {
	padding-top: 4px;
}

/* ---------- Câu tạm trú ---------- */
.vh-lstay__res {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--vh-color-border);
	border-left: 4px solid var(--vh-color-primary);
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-surface);
}

.vh-lstay__res .vh-i {
	flex: 0 0 auto;
	color: var(--vh-color-primary);
}

/* ---------- Form ---------- */
.vh-lstay__aside {
	min-width: 0;
}

.vh-lstay__box,
.vh-lstay__aside--cta {
	display: grid;
	gap: 14px;
	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-lstay__aside--cta > * {
	margin: 0;
}

.vh-lstay__ftitle {
	margin: 0;
}

.vh-lstay__flead,
.vh-lstay__fnote,
.vh-lstay__demo {
	margin: 0;
}

.vh-lstay__form {
	display: grid;
	gap: 14px;
}

/* Ô ngày, số tháng cần đủ rộng: điện thoại hẹp và khung form hẹp (bảng trượt) xếp một cột. */
@media (max-width: 559px) {
	.vh-lstay__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vh-lstay__alt {
	display: grid;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--vh-color-border);
}

.vh-lstay__alt > p {
	margin: 0;
}

.vh-lstay__alt .vh-row {
	flex-wrap: wrap;
	gap: 8px;
}

/* Bảng trượt: form nằm trong thân cuộn được. */
.vh-lstay-sheet__body {
	padding: 4px 20px 20px;
}

.vh-lstay-sheet__body .vh-lstay__box {
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* ---------- band ---------- */
.vh-lstay__band {
	display: grid;
	gap: 16px;
	padding: calc(var(--vh-card-pad) * 1.25);
	border-radius: var(--vh-radius-panel, var(--vh-radius-card));
}

.vh-lstay--paper .vh-lstay__band {
	border: 1px solid var(--vh-color-border);
	background: var(--vh-color-surface);
}

.vh-lstay--solid .vh-lstay__band {
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
}

.vh-lstay--dark .vh-lstay__band {
	--vh-ring: var(--vh-color-focus-on-deep);
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
}

.vh-lstay__btext > * {
	margin: 0;
}

.vh-lstay__btext > * + * {
	margin-top: 8px;
}

.vh-lstay__btitle {
	color: inherit;
}

.vh-lstay--solid .vh-eyebrow,
.vh-lstay--solid .vh-lead,
.vh-lstay--solid .vh-price__from,
.vh-lstay--solid .vh-price__unit,
.vh-lstay--solid .vh-price__note,
.vh-lstay--solid .vh-price__value {
	color: inherit;
}

.vh-lstay--dark .vh-eyebrow {
	color: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
}

.vh-lstay--dark .vh-lead,
.vh-lstay--dark .vh-price__from,
.vh-lstay--dark .vh-price__unit,
.vh-lstay--dark .vh-price__note {
	color: var(--vh-color-muted-on-deep);
}

.vh-lstay--dark .vh-price__value {
	color: var(--vh-color-on-deep);
}

.vh-lstay__bside {
	display: grid;
	gap: 12px;
	justify-items: start;
}

.vh-lstay__bprice {
	margin: 0;
}

/* Nút chính trên nền màu chính: đảo màu để không chìm vào nền. */
.vh-lstay--solid .vh-lstay__bbtn {
	--vh-btn-bg: var(--vh-color-on-primary);
	--vh-btn-fg: var(--vh-color-primary);
	--vh-btn-bd: var(--vh-color-on-primary);
}

.vh-lstay--dark .vh-lstay__bbtn {
	--vh-btn-bg: var(--vh-color-book-bg-on-deep, var(--vh-color-primary));
	--vh-btn-fg: var(--vh-color-on-book-on-deep, var(--vh-color-on-primary));
	--vh-btn-bd: var(--vh-color-book-bg-on-deep, var(--vh-color-primary));
}

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

	.vh-lstay__term {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
}

@media (min-width: 768px) {
	.vh-lstay__band {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 24px 40px;
	}

	.vh-lstay__bside {
		justify-items: end;
		text-align: right;
	}

	.vh-lstay__bprice {
		justify-content: flex-end;
	}
}

@media (min-width: 1024px) {
	.vh-lstay--has-form .vh-lstay__grid,
	.vh-lstay__grid:has(.vh-lstay__aside) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.vh-lstay__aside {
		position: sticky;
		top: calc(var(--vh-header-h) + 16px);
	}
}