/*
 * Khối Ưu đãi – type-card: thẻ chữ dựng quanh một con số lớn.
 * certificate (#5: viền đôi, hoa văn góc, serif) | poster (#6: con số cỡ display, nền giấy / mực / màu chính xen kẽ)
 * | note (#7: giấy note pastel, góc gấp, nghiêng ±1,5° chỉ trên máy tính). Mobile trước, mốc 640px / 1024px.
 */

.vh-oft-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-oft {
	position: relative;
	display: flex;
	min-width: 0;
	color: var(--vh-color-text);
	container-type: inline-size; /* con số lớn co theo bề rộng thẻ (cqi) */
}

.vh-oft__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: clamp(20px, 4vw, 32px);
}

.vh-oft__kicker {
	margin: 0;
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-bold);
	text-transform: var(--vh-label-transform, none);
	letter-spacing: var(--vh-ls-label, 0);
}

.vh-oft__figure {
	margin: 0;
	--vh-oft-fig-max: clamp(3rem, 2.25rem + 3.5vw, 5rem);
	max-width: 100%;
	font-family: var(--vh-font-heading);
	font-size: var(--vh-oft-fig-max);
	/* Không bao giờ ngắt giữa con số ("−50.000 ₫", "−20%"): một dòng, cỡ chữ thu lại vừa bề rộng thẻ
	   (bề rộng thẻ − lề trong − viền) / (số ký tự × ~0,7em mỗi ký tự). --vh-oft-chars do type-card.php đặt. */
	font-size: min(var(--vh-oft-fig-max), calc((100cqi - 2 * clamp(20px, 4vw, 32px) - 16px) / (var(--vh-oft-chars, 6) * 0.7)));
	font-weight: var(--vh-fw-heading);
	font-variation-settings: var(--vh-heading-variation, normal);
	font-variant-numeric: lining-nums;
	line-height: 1;
	white-space: nowrap;
	overflow-wrap: normal;
}

.vh-oft__title {
	margin: 0;
	font-family: var(--vh-font-heading);
	font-size: var(--vh-fs-h3);
	font-weight: var(--vh-fw-heading);
	line-height: max(1.25, var(--vh-lh-heading));
	overflow-wrap: anywhere;
}

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

.vh-oft__text {
	margin: 0;
	line-height: var(--vh-lh-body);
}

.vh-oft__incl {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vh-fs-small);
}

.vh-oft__incl li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.vh-oft__incl .vh-i {
	flex: none;
	width: 18px;
	height: 18px;
}

.vh-oft__valid,
.vh-oft__rooms {
	margin: 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-oft__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin-top: auto;
	padding-top: 0.75rem;
}

.vh-oft__btn .vh-i,
.vh-oft__link .vh-i {
	flex: none;
}

/* ---------- certificate: viền đôi, hoa văn góc, canh giữa ---------- */

.vh-oft--certificate {
	border: 4px double var(--vh-color-border-strong);
	border-radius: 0;
	background: var(--vh-color-card);
	text-align: center;
}

.vh-oft--certificate .vh-oft__inner {
	align-items: center;
	margin: 6px;
	border: 1px solid var(--vh-color-border);
}

.vh-oft--certificate .vh-oft__kicker,
.vh-oft--certificate .vh-oft__figure {
	color: var(--vh-color-accent-ink);
}

.vh-oft--certificate .vh-oft__incl li {
	justify-content: center;
}

.vh-oft--certificate .vh-oft__actions {
	justify-content: center;
}

/* Hoa văn góc: hình thoi nhỏ đặt trên mép khung, màu trang trí của mẫu. */
.vh-oft__corner {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1px solid var(--vh-color-ornament, var(--vh-color-border-strong));
	background: var(--vh-color-card);
	transform: rotate(45deg);
}

.vh-oft__corner--tl {
	top: -8px;
	left: -8px;
}

.vh-oft__corner--tr {
	top: -8px;
	right: -8px;
}

.vh-oft__corner--bl {
	bottom: -8px;
	left: -8px;
}

.vh-oft__corner--br {
	right: -8px;
	bottom: -8px;
}

/* ---------- poster: nền xen kẽ giấy / mực / màu chính ---------- */

.vh-oft--poster {
	border-radius: var(--vh-radius-card);
}

.vh-oft--poster .vh-oft__figure {
	--vh-oft-fig-max: clamp(4rem, 2.5rem + 6vw, 7.5rem);
	letter-spacing: -0.03em;
}

.vh-oft--paper {
	border: var(--vh-border-width, 1px) solid var(--vh-color-text);
	background: var(--vh-color-card);
}

.vh-oft--ink {
	--vh-ring: var(--vh-color-focus-on-deep);
	--vh-color-muted: var(--vh-color-muted-on-deep);
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
}

.vh-oft--brand {
	--vh-ring: var(--vh-color-focus-on-deep);
	--vh-color-muted: var(--vh-color-on-primary);
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
}

/* Nút trên nền mực / màu chính: nền sáng, chữ màu nền thẻ (cặp màu đã đạt tương phản của mẫu). */
.vh-oft--ink .vh-oft__btn {
	--vh-btn-bg: var(--vh-color-on-deep);
	--vh-btn-fg: var(--vh-color-deep);
}

.vh-oft--brand .vh-oft__btn {
	--vh-btn-bg: var(--vh-color-on-primary);
	--vh-btn-fg: var(--vh-color-primary);
}

.vh-oft--ink .vh-sv-code,
.vh-oft--brand .vh-sv-code {
	--vh-color-muted: var(--vh-color-text);
}

/* ---------- note: giấy note pastel, góc gấp ---------- */

.vh-oft--note {
	--vh-color-muted: var(--vh-color-text);
	--vh-ring: var(--vh-color-text);
	background: var(--vh-oft-paper, var(--vh-color-accent));
	box-shadow: var(--vh-shadow-card);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

/* Góc gấp: tam giác tối nhẹ ở góc dưới phải. */
.vh-oft--note::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, rgb(var(--vh-color-overlay) / 0.18) 50%, transparent 50%);
}

.vh-oft--paper-1 {
	--vh-oft-paper: var(--vh-color-fun-1, var(--vh-color-accent));
}

.vh-oft--paper-2 {
	--vh-oft-paper: var(--vh-color-fun-2, var(--vh-color-surface));
}

.vh-oft--paper-3 {
	--vh-oft-paper: var(--vh-color-fun-3, var(--vh-color-accent));
}

.vh-oft--paper-4 {
	--vh-oft-paper: var(--vh-color-fun-4, var(--vh-color-surface));
}

.vh-oft--note .vh-oft__figure {
	font-family: var(--vh-font-accent, var(--vh-font-heading));
}

.vh-oft__link {
	color: var(--vh-color-text);
	text-decoration-color: currentColor;
}

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

	.vh-oft-list--n1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.vh-oft-list--n1 .vh-oft__inner {
		padding: clamp(28px, 5vw, 56px);
	}
}

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

	/* Giấy note nghiêng nhẹ xen kẽ, chỉ trên máy tính. */
	.vh-oft--note:nth-child(odd) {
		transform: rotate(-1.5deg);
	}

	.vh-oft--note:nth-child(even) {
		transform: rotate(1.5deg);
	}

	.vh-oft--note:focus-within {
		transform: none;
	}
}