/* vmt-critical:start - Inline first-paint CSS is read from this stylesheet. */
.vmt-tet27-body {
	margin: 0;
	background: #fff;
}
html:has(.vmt-tet27) {
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
}
.vmt-tet27 {
	--forest-950: #101b3a;
	--forest-900: #a80002;
	--forest-100: #ffd6d6;
	/* White page; --sage is the light grey tint for alternating sections. */
	--sage: #f7f7f7;
	--paper: #fff;
	--paper-strong: #fff;
	--ink: #300001;
	--ink-soft: #8a4141;
	--accent: #f60002;
	--accent-hover: #c40001;
	--line: rgba(122, 0, 1, 0.14);
	--shadow: 0 24px 70px rgba(74, 0, 1, 0.14);
	--shadow-soft: 0 14px 38px rgba(74, 0, 1, 0.09);
	--radius-lg: 24px;
	--radius-md: 14px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	background: var(--paper);
	color: var(--ink);
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.vmt-tet27 *,
.vmt-tet27 *::before,
.vmt-tet27 *::after {
	box-sizing: border-box;
}
.vmt-tet27 a {
	color: inherit;
	text-decoration: none;
}
.vmt-tet27 button,
.vmt-tet27 input,
.vmt-tet27 select {
	font: inherit;
}
.vmt-tet27 button,
.vmt-tet27 input[type="button"],
.vmt-tet27 input[type="reset"],
.vmt-tet27 input[type="submit"] {
	appearance: none;
	margin: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: inherit;
	text-transform: none;
	text-shadow: none;
	transition: none;
	vertical-align: middle;
}
.vmt-tet27 input,
.vmt-tet27 select {
	margin: 0;
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
}
.vmt-tet27 h1,
.vmt-tet27 h2,
.vmt-tet27 h3 {
	margin: 0;
	color: inherit;
	text-wrap: balance;
}
.vmt-tet27 h1,
.vmt-tet27 h2 {
	font-family: "Libre Bodoni", serif;
}
.vmt-tet27 h3 {
	font-family: "Be Vietnam Pro", sans-serif;
	letter-spacing: -0.02em;
}
.vmt-tet27 p {
	text-wrap: pretty;
}
.vmt-tet27 ::selection {
	background: var(--accent);
	color: #fff;
}
.vmt-tet27 :focus-visible {
	outline: 3px solid rgba(246, 0, 2, 0.38);
	outline-offset: 4px;
}
.vmt-tet27 section {
	position: relative;
}
@keyframes vmtHeroEnter {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
/* Navigation: .vmt-tet27-nav-inner is the glass pill (fixed height) that holds the
 * logo + CTA, inset to match the hero content column. It is transparent over the
 * hero; the blurred glass fades in on scroll and the content pulls inward off its edge. */
.vmt-tet27-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	padding: 12px clamp(20px, 5.6vw, 76px);
	background: transparent;
	transform: translateY(0);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.vmt-tet27-nav.is-hidden {
	transform: translateY(-100%);
}
.vmt-tet27-nav-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.5),
		inset 0 0 0 1px rgba(255, 255, 255, 0.15),
		inset 0 -10px 24px rgba(255, 255, 255, 0.04),
		0 12px 40px rgba(0, 0, 0, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s;
}
.vmt-tet27-nav.is-scrolled .vmt-tet27-nav-inner::before {
	opacity: 1;
}
.admin-bar .vmt-tet27-nav {
	top: 32px;
}
@keyframes vmtNavFade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.vmt-tet27-nav-inner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	max-width: calc(1432px - 2 * clamp(20px, 5.6vw, 76px));
	margin: 0 auto;
	padding: 0;
	transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	animation: 0.18s ease-out backwards vmtNavFade;
}
.vmt-tet27-nav.is-scrolled .vmt-tet27-nav-inner {
	padding: 0 8px 0 20px;
}
.vmt-tet27-nav .brand {
	display: flex;
	align-items: center;
	color: #fffaf0;
	font-family: "Libre Bodoni", serif;
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -0.02em;
}
.vmt-tet27-nav .brand .logo-img {
	display: block;
	height: 50px;
	width: auto;
	transition: opacity 0.22s;
}
/* Over the red hero the plain logo sinks in, so the white-outlined version
   (logo-gold.webp) sits on top of it; JS adds .is-past-hero once the hero
   has scrolled out from under the nav and the plain logo takes over. At the
   same rendered height the two logos' artwork lines up with a 2px shift. */
.vmt-tet27-nav .brand {
	position: relative;
}
.vmt-tet27-nav .brand .logo-img--hero {
	position: absolute;
	top: 0;
	left: -2px;
}
.vmt-tet27-nav:not(.is-past-hero) .brand .logo-img:not(.logo-img--hero),
.vmt-tet27-nav.is-past-hero .brand .logo-img--hero {
	opacity: 0;
}
.vmt-tet27-nav .cta-pill,
.vmt-btn-gold,
.vmt-btn-dark,
.vmt-tet27-departure-row .book,
.vmt-tet27-sticky-tour .cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: var(--radius-md);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition:
		transform 0.25s var(--ease),
		background-color 0.25s var(--ease),
		color 0.25s var(--ease),
		border-color 0.25s var(--ease),
		box-shadow 0.25s var(--ease);
}
.vmt-tet27-nav .cta-pill {
	padding: 0 22px;
	border-radius: 9999px;
	background: #ff440be6;
	color: #fff;
	font-size: 14px;
}
.vmt-tet27-nav .cta-pill:hover {
	transform: scale(1.03);
}
.vmt-tet27-nav .cta-pill:active {
	transform: scale(0.97);
}

/* Hero */
.vmt-tet27-hero {
	display: grid;
	align-items: center;
	isolation: isolate;
	overflow: hidden;
	/* Bottom edge colour of hero-web.webp: fills any room the copy adds below the photo. */
	background: #fff;
}
/* Photo and copy share one grid cell: the hero is as tall as the whole photo
   (never cropped), and grows past it only if the copy needs more room. */
.vmt-tet27-hero-bg,
.vmt-tet27-hero-content {
	grid-area: 1 / 1;
}
.vmt-tet27-hero-bg {
	display: block;
	align-self: start;
	/* Keep the light hero copy readable while the image is downloading. */
	background: #c81020;
}
.vmt-tet27-hero-img {
	display: block;
	width: 100%;
	height: auto;
}
.vmt-tet27-hero-content {
	position: relative;
	z-index: 2;
	width: min(100%, 1432px);
	margin: 0 auto;
	padding: 104px clamp(20px, 5.6vw, 76px) 128px;
}
.vmt-tet27-hero-content {
	/* Hero copy sits straight on the photo (no darkening layer), so each line
	   carries its own crimson halo, tinted to the red artwork instead of black:
	   a tight contact edge for crisp letterforms + a soft wide glow for lift. */
	--hero-ink: 72, 0, 0;
}
.vmt-tet27-hero-content h1 {
	max-width: 780px;
	color: #fffaf0;
	font-size: clamp(58px, 7.4vw, 108px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	text-shadow:
		0 1px 1px rgba(var(--hero-ink), 0.5),
		0 3px 10px rgba(var(--hero-ink), 0.42),
		0 14px 44px rgba(var(--hero-ink), 0.38);
	animation: vmtHeroEnter 0.85s 0.12s both var(--ease);
}
.vmt-tet27-hero-sub {
	margin: 14px 0;
	color: #ffdb3d;
	font-family: "Libre Bodoni", serif;
	font-size: clamp(25px, 3vw, 40px);
	font-style: italic;
	font-weight: 600;
	line-height: 1.1;
	text-shadow:
		0 1px 1px rgba(var(--hero-ink), 0.6),
		0 2px 12px rgba(var(--hero-ink), 0.5);
	padding-bottom: 4px;
	animation: vmtHeroEnter 0.85s 0.19s both var(--ease);
}
.vmt-tet27-hero-desc {
	max-width: 52ch;
	margin: 0 0 26px;
	color: #fffaf0;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.005em;
	text-shadow:
		0 1px 2px rgba(var(--hero-ink), 0.65),
		0 2px 14px rgba(var(--hero-ink), 0.45);
	animation: vmtHeroEnter 0.85s 0.26s both var(--ease);
}
.vmt-tet27-hero-stats {
	width: fit-content;
	max-width: 100%;
	margin-bottom: 28px;
	padding: 16px 0;
	display: grid;
	grid-template-columns: repeat(3, max-content);
	border-top: 1px solid rgba(255, 250, 240, 0.4);
	border-bottom: 1px solid rgba(255, 250, 240, 0.4);
	animation: vmtHeroEnter 0.85s 0.33s both var(--ease);
}
.vmt-tet27-hero-stats > div {
	padding-right: 18px;
}
.vmt-tet27-hero-stats > div + div {
	padding-left: 18px;
	border-left: 1px solid rgba(255, 250, 240, 0.36);
}
.vmt-tet27-hero-stats > div:last-child {
	padding-right: 0;
}
.vmt-tet27-hero-stats .val {
	white-space: nowrap;
	color: #fffaf0;
	font-size: clamp(16px, 1.65vw, 23px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 1px 2px rgba(var(--hero-ink), 0.6),
		0 2px 12px rgba(var(--hero-ink), 0.42);
}
.vmt-btn-gold {
	min-height: 44px;
	padding: 0 25px;
	background: var(--accent);
	box-shadow: 0 12px 26px rgba(196, 0, 1, 0.22);
}
.vmt-btn-gold:hover {
	background: var(--accent-hover);
	color: #fff;
	transform: translateY(-2px);
}
.vmt-btn-gold:active,
.vmt-btn-dark:active {
	transform: scale(0.98);
}
.vmt-tet27 .vmt-btn-gold,
.vmt-tet27 .vmt-tet27-stay .vmt-btn-dark {
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--accent);
	font-size: 14px;
	box-shadow: none;
}
.vmt-tet27-stay .vmt-btn-dark:hover {
	background: var(--paper-strong);
	color: var(--accent-hover);
	transform: none;
}
.vmt-btn-dark {
	color: #fff;
}

/* vmt-critical:end */

/* Trust rail and shared sections */
.vmt-tet27-trust {
	z-index: 4;
	width: min(calc(100% - 40px), 1240px);
	margin: -54px auto 0;
	padding: 13px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid rgba(122, 0, 1, 0.1);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--shadow);
	backdrop-filter: blur(16px);
}
.vmt-tet27-trust .item {
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-left: 1px solid var(--line);
	color: var(--accent);
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
}
.vmt-tet27-trust .item:first-child {
	border-left: 0;
}
/* Number over label in every column. Sizes are fitted to the longest strings
   ("92.000+" ≈ 4.4em, "khách hàng tin tưởng" ≈ 10.6em wide) so neither line
   wraps: 4 columns from 860px, 2 × 2 below (see the 859px block). */
.vmt-tet27-trust .num {
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.vmt-tet27-trust .label {
	font-size: clamp(14px, 1.35vw, 17px);
	white-space: nowrap;
}
/* Red gradient type. Set on the number and the label separately (each is a
   single nowrap line), so every line gets the full gradient top to bottom
   rather than one gradient stretched over both. Browsers without text
   clipping keep the solid accent red from .item. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.vmt-tet27-trust .num,
	.vmt-tet27-trust .label,
	.vmt-tet27-countdown-title > span:first-child,
	.vmt-tet27-countdown-deadline strong,
	.vmt-tet27-diff-title .vmt-tet27-diff-count,
	.vmt-tet27-departure-row .price {
		background: linear-gradient(#f73737 0%, #d92322 80%, #bc0707 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
.vmt-tet27-countdown,
.vmt-tet27-pain,
.vmt-tet27-packages,
.vmt-tet27-stay,
.vmt-tet27-departures,
.vmt-tet27-visa,
.vmt-tet27-diff,
.vmt-tet27-gallery,
.vmt-tet27-testimonials,
.vmt-tet27-faq {
	padding: clamp(78px, 9vw, 132px) clamp(20px, 5.6vw, 76px);
}
.vmt-tet27-eyebrow {
	margin-bottom: 12px;
	color: var(--accent);
	font-size: 13px;
	font-style: italic;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}
.vmt-tet27-section-head {
	max-width: 1280px;
	margin: 0 auto clamp(34px, 5vw, 64px);
	text-align: left;
}
.vmt-tet27-section-head h2,
.vmt-tet27-section-head.on-cream h2 {
	color: var(--forest-950);
	font-size: clamp(38px, 5vw, 68px);
	font-weight: 520;
	line-height: 1.22;
	text-align: center;
}

/* Countdown */
.vmt-tet27-countdown {
	padding-top: clamp(112px, 12vw, 170px);
	background: var(--paper);
}
.vmt-tet27-countdown::before {
	content: "";
	max-width: 770px;
	position: absolute;
	inset: 30px 2% 28% 48%;
	border-radius: 44% 56% 35% 65%/44% 38% 62% 56%;
	background: rgba(255, 227, 199, 0.22);
}
.vmt-tet27-countdown-inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
	gap: 0;
	align-items: flex-start;
}
.vmt-tet27-countdown-copy {
	container-type: inline-size;
}
.vmt-tet27 .vmt-tet27-countdown-copy .vmt-tet27-countdown-title {
	margin-bottom: 18px;
	color: var(--ink);
	font-size: clamp(20px, 2.65vw, 48px);
	font-size: clamp(20px, 6.6cqi, 52px);
	font-weight: 550;
	line-height: 1.2;
	letter-spacing: -0.025em;
}
.vmt-tet27-countdown-title > span {
	display: block;
	white-space: nowrap;
}
.vmt-tet27-countdown-title > span:first-child {
	margin-bottom: 4px;
	color: var(--forest-900);
	font-size: 1.06em;
	font-weight: 650;
}
.vmt-tet27-countdown-title .vmt-tet27-countdown-amount {
	color: var(--accent);
	font-size: 1.2em;
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.035em;
}
@media (max-width: 859px) {
	.vmt-tet27 .vmt-tet27-countdown-copy .vmt-tet27-countdown-title {
		font-size: clamp(18px, calc(7.2vw - 2.88px), 52px);
		font-size: clamp(18px, 7.2cqi, 52px);
	}
}
.vmt-tet27-countdown-deadline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding-left: 14px;
	border-left: 3px solid var(--accent);
	color: var(--ink-soft);
	font-size: 14px;
}
.vmt-tet27-countdown-deadline strong {
	color: var(--forest-900);
	font-size: clamp(23px, 2.2vw, 28px);
	font-weight: 750;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.vmt-tet27 .vmt-tet27-countdown-cta {
	gap: 6px;
	min-height: 52px;
	margin-top: 24px;
	padding: 0 24px;
	border-color: var(--accent);
	background: var(--accent);
	color: var(--paper-strong);
	font-size: 15px;
	box-shadow: 0 8px 18px rgba(122, 0, 1, 0.12);
}
.vmt-tet27 .vmt-tet27-countdown-cta:hover {
	border-color: #ff0000;
	background: #ff0000;
	color: var(--paper-strong);
}
.vmt-tet27 .vmt-tet27-countdown-cta:focus-visible {
	outline: 2px solid var(--forest-900);
	outline-offset: 4px;
}
@media (max-width: 540px) {
	.vmt-tet27 .vmt-tet27-countdown-cta {
		justify-content: space-between;
		padding: 0 18px;
	}
}
.vmt-tet27-timer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.6vw, 20px);
	padding-top: 12px;
}
.vmt-tet27-timer .cell {
	position: relative;
	min-width: 0;
	container-type: inline-size;
	text-align: center;
}
/* Gold binding rings, like a Tet tear-off calendar: each ring rises over
   the top edge and runs down the front of the page into its punched hole. */
.vmt-tet27-timer .n::before,
.vmt-tet27-timer .n::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: -0.13em;
	left: calc(26.75% - var(--ring-w) / 2);
	width: var(--ring-w);
	height: calc(0.13em + var(--hole-y));
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(79, 50, 8, 0.55), transparent 32%),
		linear-gradient(
			90deg,
			#7a4f12,
			#f3d27a 34%,
			#fff3c4 46%,
			#d9a846 68%,
			#7f5210
		);
	box-shadow:
		0.02em 0.035em 0.03em rgba(58, 0, 1, 0.55),
		inset 0 -1px 1px rgba(40, 0, 1, 0.35);
}
.vmt-tet27-timer .n::after {
	left: calc(73.25% - var(--ring-w) / 2);
}
/* The turning page tugs the rings up, then they settle when it lands. */
.vmt-tet27-timer .n.vmt-flip.is-flipping::before,
.vmt-tet27-timer .n.vmt-flip.is-flipping::after {
	animation: vmtRingTug 0.9s both;
}
@keyframes vmtRingTug {
	0%,
	12% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-1.6cqi);
		animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.4);
	}
	72% {
		transform: translateY(1cqi);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
	}
	84% {
		transform: translateY(-0.4cqi);
	}
	100% {
		transform: translateY(0);
	}
}
.vmt-tet27-timer .n {
	--flip-h: 1.9em;
	--ring-w: 0.075em;
	--flip-radius: 0.14em;
	/* Libre Bodoni digits sit 0.065em above the line-box centre. */
	--flip-nudge: 0.02em;
	/* Ring holes line up with the gold binding on .cell. */
	--hole-y: 0.15em;
	--hole-r: 0.068em;
	/* Perforated header band above the digits. */
	--flip-band: 0.3em;
	--page-bg:
		radial-gradient(
			circle at 26.75% var(--hole-y),
			#240006 0 calc(var(--hole-r) * 0.45),
			#5e0412 var(--hole-r),
			transparent calc(var(--hole-r) + 0.5px)
		),
		radial-gradient(
			circle at 73.25% var(--hole-y),
			#240006 0 calc(var(--hole-r) * 0.45),
			#5e0412 var(--hole-r),
			transparent calc(var(--hole-r) + 0.5px)
		),
		linear-gradient(
			180deg,
			transparent var(--flip-band),
			rgba(58, 0, 1, 0.28) var(--flip-band),
			rgba(58, 0, 1, 0.28) calc(var(--flip-band) + 1px),
			rgba(255, 255, 255, 0.08) calc(var(--flip-band) + 1px),
			transparent calc(var(--flip-band) + 2px)
		),
		/* Same crimson range as the hero artwork (#e41f2e → #c81020 → #ab0e1c). */
		linear-gradient(180deg, #f22b37, #de1d2d 55%, #c41626);
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: var(--flip-h);
	border-radius: var(--flip-radius);
	background: var(--page-bg);
	box-shadow:
		0 2px 0 #a8101f,
		0 6px 0 -2px #cc1829,
		0 7px 0 -2px #8f0a1a,
		0 11px 0 -4px #b81324,
		0 12px 0 -4px #76071a,
		0 28px 34px -16px rgba(120, 6, 20, 0.42);
	color: #fffaf0;
	font-family: "Libre Bodoni", serif;
	font-size: clamp(40px, 5vw, 64px);
	font-size: 56cqi;
	font-variant-numeric: tabular-nums;
	line-height: calc(var(--flip-h) - var(--flip-band));
	text-align: center;
	padding-top: calc(var(--flip-band) + var(--flip-nudge));
	box-sizing: border-box;
}
.vmt-tet27-timer .secs .n {
	color: #ffd700;
}
.vmt-tet27-timer .u {
	margin-top: 22px;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

/* Tear-off calendar mechanics (DOM built in JS). The new page starts flat
   behind the binding, rises up behind the card, turns over the rings and
   lands in front, pivoting on the ring holes the whole way. */
.vmt-tet27-timer .n.vmt-flip {
	perspective: 9em;
}
.vmt-flip-value {
	display: block;
	color: transparent;
}
.vmt-flip-page,
.vmt-flip-front,
.vmt-flip-back {
	position: absolute;
	inset: 0;
	border-radius: var(--flip-radius);
}
.vmt-flip-page.is-under,
.vmt-flip-front {
	background: var(--page-bg);
}
.vmt-flip-page.is-leaf {
	display: none;
	z-index: 2;
	transform-origin: 50% var(--hole-y);
	transform-style: preserve-3d;
	will-change: transform;
}
.vmt-flip.is-flipping .vmt-flip-page.is-leaf {
	display: block;
}
.vmt-flip-front,
.vmt-flip-back {
	backface-visibility: hidden;
}
/* Back of the page, seen while it rises behind the card: same red stock,
   a touch deeper than the printed front. */
.vmt-flip-back {
	background:
		radial-gradient(
			circle at 26.75% calc(100% - var(--hole-y)),
			#240006 0 calc(var(--hole-r) * 0.45),
			#5e0412 var(--hole-r),
			transparent calc(var(--hole-r) + 0.5px)
		),
		radial-gradient(
			circle at 73.25% calc(100% - var(--hole-y)),
			#240006 0 calc(var(--hole-r) * 0.45),
			#5e0412 var(--hole-r),
			transparent calc(var(--hole-r) + 0.5px)
		),
		linear-gradient(180deg, #e42331, #ca1827 55%, #b01121);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	transform: rotateX(180deg);
}
/* Digits are centred in the area below the perforation, not the whole page. */
.vmt-flip-face {
	position: absolute;
	inset: var(--flip-band) 0 0;
	line-height: calc(var(--flip-h) - var(--flip-band));
	text-align: center;
	transform: translateY(var(--flip-nudge));
}
.vmt-flip-page.is-under::after,
.vmt-flip-front::after,
.vmt-flip-back::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}
.vmt-flip-front::after {
	background: linear-gradient(
		180deg,
		rgba(40, 0, 1, 0.25),
		rgba(40, 0, 1, 0.65)
	);
}
.vmt-flip-back::after {
	background: linear-gradient(
		180deg,
		rgba(40, 0, 1, 0.15),
		rgba(40, 0, 1, 0.55)
	);
}
/* Shadow the falling page casts on the one underneath. */
.vmt-flip-page.is-under::after {
	background: linear-gradient(
		180deg,
		rgba(40, 0, 1, 0.55),
		rgba(40, 0, 1, 0) 75%
	);
}
.vmt-flip.is-flipping .vmt-flip-page.is-leaf {
	animation: vmtPageTurn 0.9s both;
}
.vmt-flip.is-flipping .vmt-flip-back::after {
	animation: vmtPageBackShade 0.9s both;
}
.vmt-flip.is-flipping .vmt-flip-front::after {
	animation: vmtPageShade 0.9s both;
}
.vmt-flip.is-flipping .vmt-flip-page.is-under::after {
	animation: vmtPageCast 0.9s both;
}
/* 270deg = flat behind the rings (edge-on, invisible), 180deg = upright
   above the card showing its back, 0deg = resting in front. */
@keyframes vmtPageTurn {
	0% {
		transform: rotateX(270deg);
		animation-timing-function: cubic-bezier(0.3, 0, 0.6, 0.8);
	}
	38% {
		transform: rotateX(180deg);
		animation-timing-function: cubic-bezier(0.3, 0.3, 0.8, 0.55);
	}
	72% {
		transform: rotateX(0deg);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
	}
	85% {
		transform: rotateX(8deg);
		animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
	}
	100% {
		transform: rotateX(0deg);
	}
}
@keyframes vmtPageBackShade {
	0% {
		opacity: 1;
	}
	22%,
	40% {
		opacity: 0;
	}
	58%,
	100% {
		opacity: 1;
	}
}
@keyframes vmtPageShade {
	0%,
	55% {
		opacity: 1;
	}
	74%,
	100% {
		opacity: 0;
	}
}
@keyframes vmtPageCast {
	0%,
	48% {
		opacity: 0;
	}
	66% {
		opacity: 1;
	}
	80%,
	100% {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vmt-tet27-timer .n.vmt-flip.is-flipping::before,
	.vmt-tet27-timer .n.vmt-flip.is-flipping::after {
		animation: none;
	}
	.vmt-flip.is-flipping .vmt-flip-page.is-leaf {
		display: none;
	}
	.vmt-flip.is-flipping .vmt-flip-page.is-under::after {
		animation: none;
	}
}

/* Pain points */
.vmt-tet27-pain {
	max-width: 1432px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
	gap: clamp(36px, 6vw, 88px);
	align-items: center;
	background: var(--paper);
}
.vmt-tet27-pain-media {
	position: relative;
	/* Fixed height, capped on narrower screens so the framed photo (the right
	   ~69% of the artwork, ≈1.06 × height wide) always stays on screen; only
	   the petal trail may run past the left edge. */
	height: min(590px, 45vw - 12px, 62vw - 178px);
}
/* Cutout artwork at the box's full height, never cropped: pinned to the right
   edge, and when it is wider than the column it runs out past the left edge
   (the petal trail) instead of being clipped. The page's overflow-x: clip on
   .vmt-tet27 stops that from adding a horizontal scrollbar. */
.vmt-tet27-pain-img {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
}
.vmt-tet27-pain-list {
	display: flex;
	flex-direction: column;
}
.vmt-tet27-pain-list h2 {
	margin-bottom: 18px;
	color: var(--forest-950);
	font-size: clamp(36px, 4.2vw, 60px);
	font-weight: 520;
}
.vmt-tet27-pain-row {
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}
.vmt-tet27-pain-row:first-child {
	border-top: 1px solid var(--line);
}
.vmt-tet27-pain-row .pain {
	color: var(--forest-950);
	font-size: clamp(22px, 2.1vw, 31px);
	font-weight: 580;
	letter-spacing: -0.025em;
	transition:
		color 0.28s var(--ease),
		transform 0.32s var(--ease);
	will-change: transform;
}
.vmt-tet27-pain-row .solution {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
	transform: translate3d(0, -4px, 0);
	transition:
		grid-template-rows 0.38s var(--ease),
		margin-top 0.38s var(--ease),
		opacity 0.24s ease-out,
		transform 0.38s var(--ease);
	will-change: grid-template-rows, opacity, transform;
}
.vmt-tet27-pain-row .solution > span {
	min-height: 0;
	overflow: hidden;
}
.vmt-tet27-pain-row.is-active .pain {
	color: var(--accent);
	transform: translate3d(8px, 0, 0);
}
.vmt-tet27-pain-row.is-active .solution {
	grid-template-rows: 1fr;
	margin-top: 8px;
	opacity: 1;
	transform: none;
}

/* Packages */
.vmt-tet27-packages {
	background: var(--sage);
}
.vmt-tet27-package-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}
.vmt-tet27-package-card {
	position: relative;
	/* Same shape as the artwork (1080 × 1200), so background-size: cover
	   fills the card edge to edge without cropping, and all cards match. */
	aspect-ratio: 1080 / 1200;
	container-type: inline-size;
	/* Must be explicit. For a grid item with an aspect-ratio, "normal"
	   self-alignment is "start" in WebKit (iOS Safari) — shrink-to-fit — and
	   this card has no in-flow content (the copy is absolutely positioned,
	   and container-type zeroes its intrinsic width), so it collapsed to a
	   2px dot on iPhones. Chromium treats "normal" as stretch, hiding it. */
	justify-self: stretch;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--radius-lg);
	/* Size the art to the border box and never tile it: with the default
	   padding-box origin + repeat, the translucent border showed a sliver of
	   the opposite edge (blue sky along the bottom, dark edge on the right). */
	background-origin: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: var(--shadow-soft);
	isolation: isolate;
	transition:
		translate 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}
/* The scroll reveal (.vmt-reveal) outranks the transition above and pins
   transform to none, so the hover shadow snapped and the lift never ran.
   Keep the reveal on opacity/transform (with its stagger delay) and run the
   hover on the separate translate property + box-shadow, with no delay. */
.vmt-tet27.vmt-motion-ready .vmt-tet27-package-card.vmt-reveal {
	transition:
		opacity 1.3s var(--ease) var(--vmt-delay, 0ms),
		transform 1.3s var(--ease) var(--vmt-delay, 0ms),
		translate 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}
.vmt-tet27-package-card:nth-child(1) {
	background-image: url("../images/tour-my-tet-2027/S4-1.webp");
}
.vmt-tet27-package-card:nth-child(2) {
	background-image: url("../images/tour-my-tet-2027/S4-2.webp");
}
.vmt-tet27-package-card:nth-child(3) {
	background-image: url("../images/tour-my-tet-2027/S4-3.webp");
}
.vmt-tet27-package-card:hover {
	translate: 0 -7px;
	box-shadow: 0 30px 65px rgba(74, 0, 1, 0.2);
}
.vmt-tet27-package-card:focus-visible {
	outline: 3px solid #ffcf6b;
	outline-offset: 4px;
}
.vmt-tet27-package-card.recommended {
	border: 2px solid var(--paper-strong);
	box-shadow:
		0 0 0 1px rgba(96, 48, 24, 0.14),
		0 18px 36px rgba(74, 0, 1, 0.17),
		0 4px 12px rgba(74, 0, 1, 0.08);
}
.vmt-tet27-package-card.recommended:hover {
	box-shadow:
		0 0 0 1px rgba(96, 48, 24, 0.18),
		0 22px 42px rgba(74, 0, 1, 0.2),
		0 5px 14px rgba(74, 0, 1, 0.09);
}
/* A little more space and scale makes the campaign tour the focal point.
   Keep the artwork's aspect ratio and the existing narrow-screen grids. */
@media not all and (max-width: 1080px) {
	.vmt-tet27-package-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
		gap: 24px;
		align-items: center;
	}
	.vmt-tet27-package-card.recommended {
		margin-top: -6px;
		margin-bottom: 6px;
	}
}
.vmt-tet27-package-card .body {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	/* Bottom padding in cqw (the card is the container and keeps the art's
	   shape), so the copy always sits in the dark corner just above the red
	   carpet band, whatever the card size. */
	padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px) 32px;
	padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px) 9cqw;
	/* The photos carry no darkening layer: every line gets its own halo, a
	   deep crimson (matching the red carpet band at the bottom of the art)
	   rather than black — a tight contact edge for crisp letterforms plus a
	   soft wide glow to lift it off busy spots (faces, sky, white coats). */
	--card-ink: 44, 2, 8;
}
.vmt-tet27-package-card h3 {
	margin-bottom: 10px;
	color: #fffaf0;
	font-size: clamp(25px, 2.3vw, 36px);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-shadow:
		0 1px 1px rgba(var(--card-ink), 0.7),
		0 2px 10px rgba(var(--card-ink), 0.6),
		0 10px 34px rgba(var(--card-ink), 0.5);
}
.vmt-tet27-package-card .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: #fffaf0;
	font-size: 13px;
	font-weight: 600;
	text-shadow:
		0 1px 2px rgba(var(--card-ink), 0.85),
		0 0 12px rgba(var(--card-ink), 0.6);
}
.vmt-tet27-package-card .meta .price {
	color: #ffdb3d;
	font-weight: 800;
	line-height: inherit;
	/* Gold has the least contrast on light spots (white coats), so a denser halo. */
	text-shadow:
		0 1px 2px rgba(var(--card-ink), 0.95),
		0 0 6px rgba(var(--card-ink), 0.8),
		0 0 16px rgba(var(--card-ink), 0.6);
}

/* Narrow cards (phones ≤ ~380px, and 3-up just past 1080px) have less height
   for the copy, since the card keeps the artwork's shape: tighten the stack
   so it stays clear of the logo ribbon at the top of the art. */
@container (max-width: 340px) {
	.vmt-tet27-package-card .body {
		padding: 18px 18px 9cqw;
	}
	.vmt-tet27-package-card h3 {
		margin-bottom: 6px;
		font-size: 22px;
	}
	.vmt-tet27-package-card .meta {
		gap: 6px;
		font-size: 12px;
	}
}

/* Tabs (departure calendar) */
.vmt-tet27-compare-tabs {
	position: relative;
	isolation: isolate;
	width: fit-content;
	margin: 0 auto 24px;
	padding: 5px;
	display: flex;
	gap: 4px;
	border-radius: 18px;
	background: var(--sage);
}
.vmt-tet27-compare-tabs::before {
	content: "";
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
	z-index: 0;
	width: var(--vmt-compare-indicator-width, 0px);
	border-radius: 13px;
	background: var(--accent);
	box-shadow: 0 7px 18px rgba(74, 0, 1, 0.15);
	opacity: 0;
	transform: translate3d(var(--vmt-compare-indicator-x, 5px), 0, 0);
	transition:
		transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.18s ease;
}
.vmt-tet27-compare-tabs.has-sliding-indicator::before {
	opacity: 1;
}
.vmt-tet27-compare-tabs button {
	position: relative;
	z-index: 1;
	min-height: 36px;
	padding: 0 20px;
	border: 0;
	border-radius: 13px;
	background: transparent;
	color: var(--forest-900);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition:
		background 0.25s var(--ease),
		color 0.25s var(--ease),
		transform 0.25s var(--ease);
}
.vmt-tet27-compare-tabs button:hover {
	transform: translateY(-1px);
}
.vmt-tet27-compare-tabs button.is-active {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 7px 18px rgba(74, 0, 1, 0.15);
}
.vmt-tet27-compare-tabs.has-sliding-indicator button.is-active {
	background: transparent;
	box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
	.vmt-tet27-compare-tabs::before {
		transition: none;
	}
}

/* Feature images */
.vmt-tet27-tet-banner,
.vmt-tet27-final {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-position: center;
	background-size: cover;
}
/* Neutral scrim behind the copy only: dark on the text side, gone well before
   the focal point, so the photo keeps its colours. Each section sets its own
   eased gradient (no hard edge or banding) to fit its layout. z-index -1 stays
   above the photo thanks to the section's isolation. */
.vmt-tet27-tet-banner::before,
.vmt-tet27-final::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.vmt-tet27-destinations-section h2 {
	padding: 64px clamp(20px, 5.6vw, 76px) 18px;
	color: var(--forest-950);
	font-size: clamp(40px, 4.2vw, 60px);
	font-weight: 520;
	text-align: center;
}

/* Destination rail */
.vmt-tet27-destinations {
	padding: 18px clamp(20px, 5.6vw, 76px) clamp(80px, 9vw, 132px);
	/* Card width; the height follows from the 4:5 photo ratio. */
	--vmt-dest-w: 330px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--vmt-dest-w);
	gap: 16px;
	overflow-x: auto;
	background: var(--paper);
	scroll-snap-type: x mandatory;
}

/* Horizontal rails stay scrollable without exposing a browser scrollbar.
   Touch devices keep native swiping; fine pointers gain grab-to-scroll in JS. */
.vmt-tet27-destinations,
.vmt-tet27-gallery-track,
.vmt-tet27-testimonial-track {
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
}
.vmt-tet27-destinations::-webkit-scrollbar,
.vmt-tet27-gallery-track::-webkit-scrollbar,
.vmt-tet27-testimonial-track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
@media (hover: hover) and (pointer: fine) {
	.vmt-tet27-destinations.is-horizontal-scroll,
	.vmt-tet27-gallery-track.is-horizontal-scroll,
	.vmt-tet27-testimonial-track.is-horizontal-scroll {
		cursor: grab;
	}
	.vmt-tet27-destinations.is-dragging,
	.vmt-tet27-gallery-track.is-dragging,
	.vmt-tet27-testimonial-track.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}
}
@media (min-width: 1200px) {
	.vmt-tet27-destinations,
	.vmt-tet27-gallery-track,
	.vmt-tet27-testimonial-track {
		scroll-snap-type: none;
		scroll-behavior: auto;
	}
	.vmt-tet27-destinations.is-dragging,
	.vmt-tet27-gallery-track.is-dragging,
	.vmt-tet27-testimonial-track.is-dragging {
		scroll-behavior: auto;
	}
}
.vmt-tet27-dest-hero {
	position: relative;
	/* Same shape as the S5 photos (800 × 1000), so background-size: cover
	   shows the whole picture with nothing cropped at any card size. */
	aspect-ratio: 4 / 5;
	container-type: inline-size;
	/* Explicit for iOS Safari: see .vmt-tet27-package-card. */
	justify-self: stretch;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-position: center;
	background-size: cover;
	scroll-snap-align: center;
}
/* Photos follow $vmt_destinations order: LA, Las Vegas, Grand Canyon,
   San Francisco, New York, Washington D.C., Philadelphia. */
.vmt-tet27-dest-hero:nth-child(1) {
	background-image: url("../images/tour-my-tet-2027/S5-1.webp");
}
.vmt-tet27-dest-hero:nth-child(2) {
	background-image: url("../images/tour-my-tet-2027/S5-2.webp");
}
.vmt-tet27-dest-hero:nth-child(3) {
	background-image: url("../images/tour-my-tet-2027/S5-3.webp");
}
.vmt-tet27-dest-hero:nth-child(4) {
	background-image: url("../images/tour-my-tet-2027/S5-4.webp");
}
.vmt-tet27-dest-hero:nth-child(5) {
	background-image: url("../images/tour-my-tet-2027/S5-5.webp");
}
.vmt-tet27-dest-hero:nth-child(6) {
	background-image: url("../images/tour-my-tet-2027/S5-6.webp");
}
.vmt-tet27-dest-hero:nth-child(7) {
	background-image: url("../images/tour-my-tet-2027/S5-7.webp");
}
.vmt-tet27-dest-hero .overlay {
	position: absolute;
	inset: 0;
	/* The S5 photos are bright daylight (sky, white stone, water), so the
	   bottom third is shaded firmly enough for the tagline, then fades out
	   before the landmark. */
	background: linear-gradient(
		0deg,
		rgba(17, 17, 17, 0.78) 0%,
		rgba(17, 17, 17, 0.5) 24%,
		rgba(17, 17, 17, 0.14) 44%,
		transparent 60%
	);
}
.vmt-tet27-dest-hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	padding: 24px;
	padding: 8cqw;
	box-sizing: border-box;
}
.vmt-tet27 .vmt-tet27-dest-hero-content h3 {
	margin-bottom: 6px;
	color: #fffaf0;
	/* One line on every card: the longest title ("Washington D.C.") is
	   ~7.93em wide, and 10cqw × 7.93 ≈ 79cqw fits the 84cqw left between the
	   8cqw paddings with a little slack. Retune if a longer title is added. */
	/* The global ".vmt-tet27 h3 { max-width: 78% }" would box the title
	   narrower than its one line. */
	max-width: none;
	font-size: 26px;
	font-size: 10cqw;
	font-weight: 680;
	letter-spacing: -0.035em;
	line-height: 1.03;
	white-space: nowrap;
	text-shadow: 0 2px 14px rgba(17, 17, 17, 0.45);
}
.vmt-tet27 .vmt-tet27-dest-hero-content p {
	max-width: 46ch;
	margin: 0;
	color: rgba(255, 250, 240, 0.92);
	font-size: clamp(12px, 0.65vw, 15px);
	line-height: 1.5;
	text-wrap: pretty;
	text-shadow: 0 1px 6px rgba(17, 17, 17, 0.55);
}

/* Tet banner and stay */
.vmt-tet27-tet-banner {
	min-height: 82dvh;
	display: flex;
	align-items: center;
	background-image: url("../images/tour-my-tet-2027/tet-family-reunion.webp");
	background-position: right top;
}
/* Scrim (base rule under "Feature images"): fades left → right, clear before
   the faces; phones flip it to bottom → top. */
.vmt-tet27-tet-banner::before {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.44) 16%,
		rgba(0, 0, 0, 0.32) 32%,
		rgba(0, 0, 0, 0.18) 46%,
		rgba(0, 0, 0, 0.07) 58%,
		rgba(0, 0, 0, 0) 70%
	);
}
.vmt-tet27-tet-banner-content {
	width: min(100%, 1432px);
	margin: 0 auto;
	padding: 80px clamp(20px, 5.6vw, 76px);
	/* A light scrim (above) does the heavy lifting; each line still carries
	   its own halo, tinted a deep warm brown to match the wood and the
	   burgundy clothes in the photo rather than black. */
	--tet-ink: 52, 16, 8;
}
/* Small gold type over the bright wall and window: the densest halo. */
.vmt-tet27-tet-banner-content .vmt-tet27-eyebrow {
	color: #ffd700;
	text-shadow:
		0 1px 2px rgba(var(--tet-ink), 0.9),
		0 0 6px rgba(var(--tet-ink), 0.7),
		0 0 16px rgba(var(--tet-ink), 0.5);
}
.vmt-tet27-tet-banner-content h2 {
	max-width: 740px;
	margin-bottom: 18px;
	color: #fffaf0;
	font-size: clamp(48px, 6vw, 82px);
	font-weight: 600;
	line-height: 1.22;
	text-shadow:
		0 1px 2px rgba(var(--tet-ink), 0.6),
		0 3px 12px rgba(var(--tet-ink), 0.5),
		0 14px 44px rgba(var(--tet-ink), 0.4);
}
.vmt-tet27-tet-banner-content p {
	max-width: 50ch;
	margin: 0;
	color: #fffaf0;
	font-size: 16px;
	/* Body-size copy: a touch bolder with a denser halo than the heading. */
	font-weight: 600;
	text-shadow:
		0 1px 2px rgba(var(--tet-ink), 0.85),
		0 0 8px rgba(var(--tet-ink), 0.55),
		0 2px 20px rgba(var(--tet-ink), 0.45);
}
.vmt-tet27 .vmt-tet27-stay {
	padding: clamp(32px, 4vw, 48px) clamp(20px, 5.6vw, 76px);
	background: var(--paper);
}
.vmt-tet27-stay-inner {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}
.vmt-tet27-stay-inner h2 {
	margin-bottom: 22px;
	color: var(--forest-950);
	font-size: clamp(38px, 6vw, 66px);
	font-weight: 520;
	line-height: 1.2;
	text-wrap: balance;
}
.vmt-tet27-stay-stats {
	margin-bottom: 22px;
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: center;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.vmt-tet27-stay-stats > div:not(.sep) {
	padding: 16px 12px;
}
.vmt-tet27-stay-stats .val {
	color: var(--forest-950);
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 750;
}
.vmt-tet27-stay-stats .lbl {
	color: var(--ink-soft);
	font-size: 12px;
}
.vmt-tet27-stay-stats .sep {
	color: var(--accent);
	font-size: 18px;
}
.vmt-btn-dark {
	min-height: 44px;
	padding: 0 24px;
	background: var(--accent);
}
.vmt-btn-dark:hover {
	background: var(--accent-hover);
	color: #fff;
	transform: translateY(-2px);
}

/* Price, departures, visa */
.vmt-tet27-departures {
	background: var(--sage);
}
/* Heading spans the same 1280px column as the nav and other sections; only
   the date table keeps its narrower reading width. */
.vmt-tet27-departures-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.vmt-tet27-departure-list {
	max-width: 1040px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper-strong);
}
.vmt-tet27-departure-row {
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid var(--line);
	transition: background 0.25s var(--ease);
}
.vmt-tet27-departure-row:last-child {
	border-bottom: 0;
}
.vmt-tet27-departure-row:hover {
	background: var(--sage);
}
.vmt-tet27-departure-row .left {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 auto;
}
.vmt-tet27-departure-row .date {
	min-width: 112px;
	color: var(--forest-950);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.vmt-tet27-departure-row .tour {
	color: var(--forest-950);
	font-weight: 700;
}
.vmt-tet27-departure-row .meta {
	color: var(--ink-soft);
	font-size: 12px;
}
/* On narrow rows break after the "·", never inside "Từ 129.900.000đ". */
.vmt-tet27-departure-row .duration,
.vmt-tet27-departure-row .price {
	white-space: nowrap;
}
.vmt-tet27-departure-row .price {
	color: var(--accent);
}
.vmt-tet27-departure-row .right {
	display: flex;
	align-items: center;
	gap: 18px;
}
.vmt-tet27-departure-row .book {
	white-space: nowrap;
	min-height: 36px;
	padding: 0 17px;
	border: 1px solid var(--accent);
	color: var(--accent);
	font-size: 12px;
}
.vmt-tet27-departure-row .book:hover {
	background: var(--accent);
	color: #fff;
}
/* Desktop: date, tour, duration, price and button share one line in
   fixed columns, so the middle of each row is used and every row lines up.
   The wrappers step aside (display: contents) to make their children the grid
   cells; tablet and mobile keep the two-line "duration · price" layout. */
@media (min-width: 1081px) {
	.vmt-tet27-departure-row {
		display: grid;
		grid-template-columns:
			112px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr)
			auto;
		align-items: center;
		column-gap: clamp(20px, 2.6vw, 40px);
		padding: 22px 28px;
	}
	.vmt-tet27-departure-row .left,
	.vmt-tet27-departure-row .info,
	.vmt-tet27-departure-row .meta,
	.vmt-tet27-departure-row .right {
		display: contents;
	}
	.vmt-tet27-departure-row .sep {
		display: none;
	}
	.vmt-tet27-departure-row .tour {
		font-size: 17px;
	}
	.vmt-tet27-departure-row .duration {
		color: var(--ink-soft);
		font-size: 14px;
	}
	.vmt-tet27-departure-row .price {
		font-size: 15px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}
}
.vmt-tet27-visa {
	background: var(--paper);
}
.vmt-tet27-visa-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.vmt-tet27-visa-head {
	max-width: 720px;
}
.vmt-tet27-visa-head h2 {
	margin-bottom: 12px;
	color: var(--forest-950);
	font-size: clamp(42px, 5.3vw, 72px);
	font-weight: 520;
	line-height: 1.12;
	/* Where it wraps (tablet, mobile), split into two even lines. */
	text-wrap: balance;
}
.vmt-tet27-visa-head p {
	margin: 0;
	color: var(--ink-soft);
}
/* Visa cards: one photo card per step, then photo-only cards. This grid is
   the fallback; the scroll scene (search "Visa scroll scene") restacks them. */
.vmt-tet27-visa-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 20px;
}
.vmt-tet27-visa-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	/* A tight edge plus a long soft drop, so a card reads clearly as lying on
	   top of the title it slides over. */
	box-shadow:
		0 1px 2px rgba(74, 0, 1, 0.08),
		0 26px 56px -20px rgba(74, 0, 1, 0.34);
}
/* Always the whole photo: the box follows the image's own ratio (from its
   width/height attributes), never a crop. */
.vmt-tet27-visa-card-img {
	display: block;
	width: 100%;
	height: auto;
}
.vmt-tet27-visa-card-body {
	padding: 18px 20px 20px;
}
.vmt-tet27-visa-card .n {
	margin-bottom: 8px;
	color: var(--accent);
	font-size: 13px;
	font-weight: 800;
}
.vmt-tet27-visa-card .t {
	margin-bottom: 6px;
	color: var(--forest-950);
	font-size: 17px;
	font-weight: 750;
	line-height: 1.3;
}
.vmt-tet27-visa-card .d {
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

/* Difference */
.vmt-tet27-diff {
	--vmt-diff-progress: 100%;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 88% 28%,
			rgba(255, 255, 255, 0.76) 0,
			rgba(255, 255, 255, 0.28) 22%,
			transparent 48%
		),
		linear-gradient(118deg, var(--sage) 0%, #f9f9f9 64%, #fbfbfb 100%);
}
.vmt-tet27-diff-inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 740px) minmax(220px, 1fr);
	gap: clamp(28px, 3.75vw, 54px);
	align-items: center;
}
.vmt-tet27-diff-content {
	position: relative;
	z-index: 2;
	min-width: 0;
}
.vmt-tet27-diff-head {
	margin-bottom: 38px;
	container-type: inline-size;
}
.vmt-tet27-diff-head h2 {
	max-width: 720px;
	color: var(--forest-950);
	font-size: clamp(40px, 5vw, 66px);
	font-weight: 520;
	line-height: 1.12;
}
.vmt-tet27-diff-title .vmt-tet27-diff-count {
	color: var(--accent);
	font-size: 1.12em;
	font-weight: 700;
	line-height: 1.05;
	white-space: nowrap;
}
@media (min-width: 860px) {
	.vmt-tet27-diff-title > span:last-child {
		display: inline-block;
		max-width: 100%;
	}
}
@media not all and (min-width: 860px) {
	.vmt-tet27 .vmt-tet27-diff-head .vmt-tet27-diff-title {
		font-size: clamp(18px, calc(6.7vw - 2.68px), 34px);
		font-size: clamp(18px, 6.7cqi, 34px);
		line-height: 1.3;
		letter-spacing: -0.02em;
	}
	.vmt-tet27-diff-title > span {
		display: block;
		white-space: nowrap;
	}
	.vmt-tet27-diff-title > span:first-child {
		margin-bottom: 3px;
	}
}
@supports not (font-size: 1cqi) {
	@media (min-width: 640px) and (max-width: 859px) {
		.vmt-tet27 .vmt-tet27-diff-head .vmt-tet27-diff-title {
			font-size: clamp(18px, calc(4.824vw - 1.9296px), 34px);
		}
	}
}
.vmt-tet27-diff-panel {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}
.vmt-tet27-diff-panel .head-row .col {
	padding: 17px 22px;
	background: var(--sage);
	color: var(--forest-900);
	font-size: 17px;
	font-weight: 800;
	text-align: center;
}
.vmt-tet27-diff-base,
.vmt-tet27-diff-overlay {
	display: flex;
	flex-direction: column;
}
.vmt-tet27-diff-base .row,
.vmt-tet27-diff-overlay .row {
	padding: 22px;
	display: grid;
	grid-template-columns: minmax(120px, 26%) minmax(0, 1fr);
	align-items: start;
	column-gap: 18px;
	border-top: 1px solid var(--line);
	background: var(--paper-strong);
}
.vmt-tet27-diff-base .row .label,
.vmt-tet27-diff-overlay .row .label {
	color: var(--forest-950);
	font-size: 13px;
	font-weight: 800;
	text-align: left;
}
.vmt-tet27-diff-base .row .val,
.vmt-tet27-diff-overlay .row .val {
	min-width: 0;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: left;
}
.vmt-tet27-diff-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	clip-path: inset(0 0% 0 0);
}
.vmt-tet27-diff-overlay .head-row .col {
	background: var(--forest-900);
	color: #fff;
}
.vmt-tet27-diff-overlay .row {
	border-color: rgba(255, 255, 255, 0.12);
	background: var(--forest-900);
}
.vmt-tet27-diff-overlay .row .label {
	color: #fffaf0;
}
.vmt-tet27-diff-overlay .row .val {
	color: rgba(255, 250, 240, 0.75);
}
.vmt-tet27-diff-slider {
	width: 100%;
	height: 28px;
	margin-top: 15px;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: ew-resize;
}
.vmt-tet27-diff-slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--accent) 0 var(--vmt-diff-progress),
		rgba(122, 0, 1, 0.14) var(--vmt-diff-progress) 100%
	);
}
.vmt-tet27-diff-slider::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -7px;
	appearance: none;
	-webkit-appearance: none;
	border: 4px solid var(--paper-strong);
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 3px 12px rgba(122, 0, 1, 0.22);
}
.vmt-tet27-diff-slider::-moz-range-track {
	height: 4px;
	border: 0;
	border-radius: 999px;
	background: rgba(122, 0, 1, 0.14);
}
.vmt-tet27-diff-slider::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--accent);
}
.vmt-tet27-diff-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 4px solid var(--paper-strong);
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 3px 12px rgba(122, 0, 1, 0.22);
}
.vmt-tet27-diff-slider:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 999px;
}
.vmt-tet27-diff-labels {
	margin-top: -3px;
	display: flex;
	justify-content: space-between;
	color: var(--ink-soft);
	font-size: 11px;
}
.vmt-tet27-diff-visual {
	position: relative;
	align-self: stretch;
	min-height: 520px;
	isolation: isolate;
	pointer-events: none;
}
.vmt-tet27-diff-visual::before {
	content: "";
	position: absolute;
	inset: 8% -18% 3% -15%;
	z-index: -1;
	border-radius: 49% 51% 42% 58%/55% 45% 55% 45%;
	background: radial-gradient(
		circle at 58% 38%,
		rgba(255, 255, 255, 0.9),
		rgba(255, 255, 255, 0.28) 38%,
		transparent 72%
	);
}
.vmt-tet27-diff-art {
	position: absolute;
	right: -52px;
	bottom: -88px;
	width: min(430px, 35vw);
	max-width: none;
	height: auto;
	-webkit-mask-image: radial-gradient(
		ellipse 74% 72% at 61% 55%,
		#000 50%,
		rgba(0, 0, 0, 0.82) 68%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse 74% 72% at 61% 55%,
		#000 50%,
		rgba(0, 0, 0, 0.82) 68%,
		transparent 100%
	);
}
.vmt-tet27-diff-art-base {
	opacity: 0.2;
	filter: grayscale(1) saturate(0.2) contrast(0.82)
		drop-shadow(0 24px 36px rgba(122, 0, 1, 0.1));
}
.vmt-tet27-diff-art-color {
	opacity: 0.86;
	clip-path: inset(0 calc(100% - var(--vmt-diff-progress)) 0 0);
	transition: clip-path 0.1s linear;
}

/* Gallery */
.vmt-tet27-gallery {
	padding-left: 0;
	padding-right: 0;
	background: var(--sage);
}
.vmt-tet27-gallery-head {
	max-width: 1432px;
	margin: 0 auto 42px;
	padding: 0 clamp(20px, 5.6vw, 76px);
}
.vmt-tet27-gallery-head h2 {
	max-width: 720px;
	color: var(--forest-950);
	font-size: clamp(42px, 5.3vw, 72px);
	font-weight: 520;
	line-height: 1.12;
}
.vmt-tet27-gallery-track {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	overflow-x: auto;
	padding: 0 clamp(20px, 5.6vw, 76px) 22px;
	scroll-snap-type: x mandatory;
}
.vmt-tet27-gallery-card {
	position: relative;
	flex: 0 0 clamp(260px, 30vw, 410px);
	/* Same shape as the S6 photos (1200 × 904), so background-size: cover
	   shows every photo whole at any card size. */
	aspect-ratio: 1200 / 904;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-position: center;
	background-size: cover;
	scroll-snap-align: start;
}
/* Only a low band behind the label (bottom 18px, one or two 14px lines) is
   shaded; together with the label's own text-shadow that is enough to read
   it, and the rest of the photo keeps its original colours. */
.vmt-tet27-gallery-card::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: min(88px, 45%);
	background: linear-gradient(
		0deg,
		rgba(17, 17, 17, 0.5) 0%,
		rgba(17, 17, 17, 0.34) 40%,
		rgba(17, 17, 17, 0.1) 75%,
		transparent 100%
	);
}
/* Photos follow $vmt_gallery_labels order (S6-1 … S6-10). */
.vmt-tet27-gallery-card:nth-child(1) {
	background-image: url("../images/tour-my-tet-2027/S6-1.webp");
}
.vmt-tet27-gallery-card:nth-child(2) {
	background-image: url("../images/tour-my-tet-2027/S6-2.webp");
}
.vmt-tet27-gallery-card:nth-child(3) {
	background-image: url("../images/tour-my-tet-2027/S6-3.webp");
}
.vmt-tet27-gallery-card:nth-child(4) {
	background-image: url("../images/tour-my-tet-2027/S6-4.webp");
}
.vmt-tet27-gallery-card:nth-child(5) {
	background-image: url("../images/tour-my-tet-2027/S6-5.webp");
}
.vmt-tet27-gallery-card:nth-child(6) {
	background-image: url("../images/tour-my-tet-2027/S6-6.webp");
}
.vmt-tet27-gallery-card:nth-child(7) {
	background-image: url("../images/tour-my-tet-2027/S6-7.webp");
}
.vmt-tet27-gallery-card:nth-child(8) {
	background-image: url("../images/tour-my-tet-2027/S6-8.webp");
}
.vmt-tet27-gallery-card:nth-child(9) {
	background-image: url("../images/tour-my-tet-2027/S6-9.webp");
}
.vmt-tet27-gallery-card:nth-child(10) {
	background-image: url("../images/tour-my-tet-2027/S6-10.webp");
}
.vmt-tet27-gallery-card .label {
	position: absolute;
	left: 22px;
	/* Keeps the longer place names off the card edge on the smallest phones. */
	right: 22px;
	bottom: 18px;
	z-index: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 750;
	text-shadow:
		0 1px 2px rgba(17, 17, 17, 0.6),
		0 0 10px rgba(17, 17, 17, 0.4);
}
/* When a label must wrap, break after the comma, never inside the city. */
.vmt-tet27-gallery-card .label .city {
	white-space: nowrap;
}

/* Testimonials, FAQ */
.vmt-tet27-testimonials {
	padding-left: 0;
	padding-right: 0;
	background: var(--paper);
}
.vmt-tet27-testimonials-head {
	max-width: 1432px;
	margin: 0 auto 40px;
	padding: 0 clamp(20px, 5.6vw, 76px);
}
.vmt-tet27-testimonials-head h2 {
	color: var(--forest-950);
	font-size: clamp(42px, 5.2vw, 70px);
	font-weight: 520;
	line-height: 1.12;
}
.vmt-tet27-testimonial-carousel {
	position: relative;
	max-width: 1432px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5.6vw, 76px);
}
.vmt-tet27 .vmt-tet27-testimonial-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	margin: 0;
	padding: 0;
	max-width: none;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}
.vmt-tet27 .vmt-tet27-testimonial-track.is-dragging {
	scroll-snap-type: none;
}
.vmt-tet27 .vmt-tet27-review-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper-strong);
	color: var(--forest-950);
	transform: translateY(-50%);
	transition:
		background 0.2s,
		color 0.2s,
		border-color 0.2s;
}
.vmt-tet27 .vmt-tet27-review-arrow svg {
	display: block;
	width: 18px;
	height: 18px;
}
/* Optical balance: the open side of a chevron carries more visual weight. */
.vmt-tet27 .vmt-tet27-review-arrow.prev svg {
	transform: translateX(-1px);
}
.vmt-tet27 .vmt-tet27-review-arrow.next svg {
	transform: translateX(1px);
}
/* Desktop releases are eased by JS; native snap would jump before that animation. */
@media (min-width: 860px) {
	.vmt-tet27 .vmt-tet27-testimonial-track {
		scroll-snap-type: none;
	}
}
.vmt-tet27 .vmt-tet27-review-arrow.prev {
	left: 4px;
}
.vmt-tet27 .vmt-tet27-review-arrow.next {
	right: 4px;
}
.vmt-tet27 .vmt-tet27-review-arrow:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}
.vmt-tet27 .vmt-tet27-review-arrow:focus-visible,
.vmt-tet27-testimonial-track:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}
.vmt-tet27 .vmt-tet27-review-arrow:active {
	transform: translateY(-50%) scale(0.95);
}
.vmt-tet27-testimonial-card {
	flex: 0 0 calc((100% - 32px) / 3);
	scroll-snap-align: start;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper-strong);
}
.vmt-tet27-testimonial-card .thumb {
	/* Same shape as the S7 photos (1200 × 904) instead of a fixed height, so
	   background-size: cover shows the whole photo (logo corner included) at
	   any card width. The thumb is a plain block, so the ratio needs no grid
	   alignment help. */
	aspect-ratio: 1200 / 904;
	background-position: center;
	background-size: cover;
}
.vmt-tet27-testimonial-card[data-review-photo="1"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-1.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="2"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-2.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="3"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-3.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="4"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-4.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="5"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-5.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="6"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-6.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="7"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-7.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="8"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-8.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="9"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-9.webp");
}
.vmt-tet27-testimonial-card[data-review-photo="10"] .thumb {
	background-image: url("../images/tour-my-tet-2027/S7-10.webp");
}
.vmt-tet27-testimonial-card .body {
	padding: 24px;
}
.vmt-tet27-testimonial-card .quote {
	margin: 0 0 14px;
	color: var(--forest-950);
	font-family: "Libre Bodoni", serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.45;
}
.vmt-tet27-testimonial-card .name {
	color: var(--accent);
	font-size: 12px;
	font-weight: 750;
}
.vmt-tet27-faq {
	overflow-anchor: none;
}
.vmt-tet27-faq-inner {
	max-width: 900px;
	margin: 0 auto;
}
.vmt-tet27-faq-inner h2 {
	margin-bottom: 44px;
	color: var(--forest-950);
	font-size: clamp(42px, 5.2vw, 70px);
	font-weight: 520;
	line-height: 1.12;
	text-align: center;
}
.vmt-tet27-faq-item {
	border-bottom: 1px solid var(--line);
}
.vmt-tet27-faq-item:first-child {
	border-top: 1px solid var(--line);
}
.vmt-tet27-faq-item button {
	width: 100%;
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	border: 0;
	background: transparent;
	color: var(--forest-950);
	font-size: 19px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.vmt-tet27-faq-item .icon {
	color: var(--accent);
	font-size: 22px;
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vmt-tet27-faq-item .answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 240ms ease,
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vmt-tet27-faq-item .answer {
	min-height: 0;
	overflow: hidden;
	max-width: 68ch;
	margin: 0;
	color: var(--ink-soft);
	font-size: 17px;
}
.vmt-tet27-faq-item .answer::after {
	content: "";
	display: block;
	height: 22px;
}
.vmt-tet27-faq-item.is-open .answer-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}
.vmt-tet27-faq-item.is-open .icon {
	transform: rotate(180deg);
}

/* Final CTA, form, footer */
.vmt-tet27-final {
	min-height: 90dvh;
	display: flex;
	align-items: center;
	background-image: url("../images/tour-my-tet-2027/bg-contact-full.webp");
}
/* Scrim (base rule under "Feature images"): copy on the left, form on the
   right with its own opaque card, so only the left needs it. Clears sooner
   than the Tết banner's because the statue stands near the middle. Phones
   flip it to top → bottom. */
.vmt-tet27-final::before {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.44) 16%,
		rgba(0, 0, 0, 0.32) 30%,
		rgba(0, 0, 0, 0.18) 42%,
		rgba(0, 0, 0, 0.07) 52%,
		rgba(0, 0, 0, 0) 62%
	);
}
.vmt-tet27-final-inner {
	width: min(100%, 1432px);
	margin: 0 auto;
	padding: 90px clamp(20px, 5.6vw, 76px);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.78fr);
	gap: clamp(40px, 7vw, 100px);
	align-items: center;
}
.vmt-tet27-final-copy {
	/* A light scrim (on the section) does the heavy lifting; each line still
	   carries its own halo, tinted deep navy to match the sky and harbour
	   rather than black — a tight contact edge for crisp letterforms plus a
	   soft wide glow to lift the copy off the white clouds. */
	--final-ink: 8, 30, 58;
}
.vmt-tet27-final-copy h2 {
	margin-bottom: 18px;
	color: #fffaf0;
	font-size: clamp(50px, 6vw, 82px);
	font-weight: 600;
	line-height: 1.22;
	text-shadow:
		0 1px 2px rgba(var(--final-ink), 0.6),
		0 3px 12px rgba(var(--final-ink), 0.5),
		0 14px 44px rgba(var(--final-ink), 0.4);
}
.vmt-tet27-final-copy p {
	max-width: 48ch;
	margin: 0;
	color: #fffaf0;
	/* Body-size copy has the least weight against the white clouds, so it is
	   set a touch bolder with a denser halo than the heading. */
	font-weight: 600;
	text-shadow:
		0 1px 2px rgba(var(--final-ink), 0.85),
		0 0 8px rgba(var(--final-ink), 0.55),
		0 2px 20px rgba(var(--final-ink), 0.45);
}
/* Direct contact under the final CTA copy: solid brand-colour pills. */
.vmt-tet27-contact {
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
}
.vmt-tet27-contact li {
	margin: 0;
}
.vmt-tet27 .vmt-tet27-contact-link {
	min-height: 46px;
	padding: 0 18px 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255, 250, 240, 0.34);
	border-radius: 9999px;
	background: rgba(255, 250, 240, 0.1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fffaf0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color 0.2s,
		border-color 0.2s,
		transform 0.2s;
}
.vmt-tet27 .vmt-tet27-contact-link:hover,
.vmt-tet27 .vmt-tet27-contact-link:focus-visible {
	border-color: rgba(255, 250, 240, 0.6);
	background: rgba(255, 250, 240, 0.2);
	color: #fffaf0;
	transform: translateY(-1px);
}
.vmt-tet27 .vmt-tet27-contact-link:active {
	transform: translateY(0) scale(0.98);
}
/* Per-channel colours: each pill is filled with its own brand colour.
   --c-bg / --c-bg-hover can be any background (colour or gradient). */
.vmt-tet27 .vmt-tet27-contact-link.is-hotline {
	--c-bg: var(--accent);
	--c-bg-hover: #ff0000;
	font-variant-numeric: tabular-nums;
}
.vmt-tet27 .vmt-tet27-contact-link.is-zalo {
	--c-bg: #0068ff;
	--c-bg-hover: #0052cc;
}
.vmt-tet27 .vmt-tet27-contact-link.is-messenger {
	--c-bg: linear-gradient(45deg, #0a7cff 0%, #a033ff 55%, #ff5c87 100%);
	--c-bg-hover: linear-gradient(45deg, #0066d6 0%, #8a1fe8 55%, #f0426f 100%);
}
.vmt-tet27 .vmt-tet27-contact-link.is-hotline,
.vmt-tet27 .vmt-tet27-contact-link.is-zalo,
.vmt-tet27 .vmt-tet27-contact-link.is-messenger {
	border-color: transparent;
	background: var(--c-bg);
	/* Size gradients to the border box, otherwise they tile into the
	   transparent 1px border and show the opposite end colour at the edges. */
	background-origin: border-box;
	/* Solid pills on the bright, only lightly scrimmed photo: a navy lift
	   keeps them off the white clouds. */
	box-shadow:
		0 1px 2px rgba(8, 30, 58, 0.25),
		0 12px 26px -12px rgba(8, 30, 58, 0.6);
}
.vmt-tet27 .vmt-tet27-contact-link.is-hotline:hover,
.vmt-tet27 .vmt-tet27-contact-link.is-hotline:focus-visible,
.vmt-tet27 .vmt-tet27-contact-link.is-zalo:hover,
.vmt-tet27 .vmt-tet27-contact-link.is-zalo:focus-visible,
.vmt-tet27 .vmt-tet27-contact-link.is-messenger:hover,
.vmt-tet27 .vmt-tet27-contact-link.is-messenger:focus-visible {
	border-color: transparent;
	background: var(--c-bg-hover);
	background-origin: border-box;
}
.vmt-tet27-contact-link .icon {
	flex: none;
}
.vmt-tet27-final-form-wrap {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--shadow);
	backdrop-filter: blur(18px);
}
.vmt-tet27-final-selected-note {
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--forest-100);
	color: var(--forest-900);
	font-size: 12px;
	font-weight: 700;
}
.vmt-tet27 .vmt-tet27-form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.vmt-tet27 .vmt-tet27-form input::placeholder {
	color: #9a7256;
	opacity: 1;
}
.vmt-tet27 .vmt-tet27-form select option {
	color: var(--forest-950);
}
/* CF7 compatibility: scoped above the child theme's global CF7 selectors. */
.vmt-tet27 .vmt-tet27-final-form-wrap .wpcf7 {
	color: inherit;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .vmt-tet27-cf7-field,
.vmt-tet27 .vmt-tet27-form.wpcf7-form .vmt-tet27-cf7-submit,
.vmt-tet27 .vmt-tet27-form.wpcf7-form p {
	margin: 0;
	padding: 0;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .hidden-fields-container,
.vmt-tet27 .vmt-tet27-form.wpcf7-form > p:empty {
	display: none;
}
.vmt-tet27
	.vmt-tet27-form.wpcf7-form
	input:not([type="hidden"]):not([type="submit"]),
.vmt-tet27 .vmt-tet27-form.wpcf7-form select {
	width: 100%;
	height: 49px;
	min-height: 49px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(122, 0, 1, 0.22);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var(--forest-950);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
}
@media (max-width: 859px), (hover: none) and (pointer: coarse) {
	.vmt-tet27
		.vmt-tet27-form.wpcf7-form
		input:not([type="hidden"]):not([type="submit"]),
	.vmt-tet27 .vmt-tet27-form.wpcf7-form select {
		font-size: 16px;
	}
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form select:has(option[value=""]:checked) {
	color: #9a7256;
}
.vmt-tet27 form.vmt-tet27-form.wpcf7-form .wpcf7-form-control:focus {
	border-color: var(--accent);
	box-shadow: none;
	outline: 3px solid rgba(246, 0, 2, 0.15);
}
.vmt-tet27
	form.vmt-tet27-form.wpcf7-form
	.wpcf7-form-control[aria-invalid="true"] {
	border-color: #c62828;
	outline: 3px solid rgba(198, 40, 40, 0.14);
}
.vmt-tet27 form.vmt-tet27-form.wpcf7-form input[type="submit"] {
	width: 100%;
	height: auto;
	min-height: 44px;
	margin: 3px 0 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--accent);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition:
		transform 0.25s var(--ease),
		background 0.25s var(--ease),
		opacity 0.25s;
}
.vmt-tet27 form.vmt-tet27-form.wpcf7-form input[type="submit"]:hover {
	background: #ff0000;
	transform: translateY(-2px);
}
.vmt-tet27 form.vmt-tet27-form.wpcf7-form input[type="submit"]:disabled,
.vmt-tet27 form.vmt-tet27-form.wpcf7-form.submitting input[type="submit"] {
	opacity: 0.55;
	cursor: wait;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .vmt-tet27-cf7-submit {
	position: relative;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .wpcf7-spinner {
	display: block !important; /* Child theme hides every CF7 spinner globally. */
	position: absolute;
	top: 50%;
	right: 12px;
	width: 16px;
	height: 16px;
	margin: -7px 0 0;
	pointer-events: none;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .wpcf7-not-valid-tip {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #9c2f24;
	font-size: 12px;
	line-height: 1.5;
	opacity: 1;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .wpcf7-not-valid-tip::after {
	display: none;
}
.vmt-tet27 .vmt-tet27-form.wpcf7-form .wpcf7-response-output {
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.5;
}
.vmt-tet27 .vmt-tet27-final-form-wrap .vmt-tet27-cf7-zalo {
	min-height: 44px;
	margin-top: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--accent);
	border-radius: 12px;
	color: var(--accent);
	font-size: 13px;
	font-weight: 750;
}
.vmt-tet27 .vmt-tet27-final-form-wrap .vmt-tet27-cf7-zalo:hover {
	background: var(--accent);
	color: #fff;
}
.vmt-tet27 .vmt-tet27-final-form-wrap .vmt-tet27-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.vmt-tet27-footer {
	padding: 64px clamp(20px, 5.6vw, 76px) 96px;
	background: #000;
	color: #fffaf0;
}
.vmt-tet27-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	column-gap: clamp(40px, 5vw, 80px);
	row-gap: 40px;
	align-items: start;
}
.vmt-tet27-footer-brand {
	min-width: 0;
	color: #fffaf0;
}
.vmt-tet27-footer-offices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	padding-top: 8px;
}
.vmt-tet27 .vmt-tet27-footer-office h3 {
	max-width: none;
	margin: 0 0 18px;
	color: rgba(255, 250, 240, 0.6);
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}
.vmt-tet27-footer-office address {
	margin: 0;
	color: #fffaf0;
	font-size: 14px;
	font-style: normal;
	line-height: 1.8;
}
.vmt-tet27-footer-office a {
	display: block;
	color: inherit;
	font: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.vmt-tet27-footer-address-end {
	white-space: nowrap;
}
.vmt-tet27-footer-map-icon {
	display: inline-block;
	font-size: 0.8em;
	white-space: nowrap;
	transition: transform 0.2s;
}
.vmt-tet27-footer-office a:hover {
	color: #ffd700;
	text-decoration: none;
}
.vmt-tet27-footer-office a:hover .vmt-tet27-footer-map-icon {
	transform: translate(2px, -2px);
}
.vmt-tet27-footer-office a:active {
	color: #fff;
}
.vmt-tet27-footer-office a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
.vmt-tet27-footer-trust {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	column-gap: clamp(40px, 5vw, 80px);
	align-items: start;
}
.vmt-tet27 .vmt-tet27-footer-trust-group h3 {
	margin: 0 0 20px;
	color: #fffaf0;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}
.vmt-tet27-footer-awards,
.vmt-tet27-footer-certifications {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
}
.vmt-tet27-footer-awards img {
	display: block;
	width: auto;
	height: 72px;
	object-fit: contain;
}
.vmt-tet27-footer-awards {
	max-width: 440px;
}
.vmt-tet27-footer-certifications img {
	display: block;
	object-fit: contain;
}
.vmt-tet27-footer-sale-noti {
	width: 200px;
	max-width: 100%;
	height: auto;
}
.vmt-tet27-footer-dmca {
	display: inline-block;
	width: auto;
	height: 1.25em;
	margin-left: 6px;
	vertical-align: -0.15em;
	object-fit: contain;
}
.vmt-tet27-footer-copyright-end {
	white-space: nowrap;
}
.vmt-tet27-footer-badge-link {
	max-width: 100%;
	text-decoration: none;
	transition: opacity 0.2s;
}
.vmt-tet27-footer-badge-link:hover {
	opacity: 0.85;
	text-decoration: none;
}
.vmt-tet27-footer-badge-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
.vmt-tet27-footer-bottom {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-top: 24px;
	font-size: 11px;
}
.vmt-tet27-footer-license {
	max-width: none;
	margin: 0;
	color: rgba(255, 250, 240, 0.65);
	font-size: 11px;
	line-height: 1.8;
	white-space: nowrap;
}
/* Existing contact links below the logo. */
.vmt-tet27-footer-social {
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
	list-style: none;
}
.vmt-tet27-footer-social li {
	margin: 0;
}
.vmt-tet27-footer-social a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 250, 240, 0.28);
	border-radius: 50%;
	color: #fffaf0;
	transition:
		background-color 0.2s,
		border-color 0.2s,
		color 0.2s;
}
.vmt-tet27-footer-social a:hover,
.vmt-tet27-footer-social a:focus-visible {
	border-color: transparent;
	background: var(--c-bg);
	background-origin: border-box;
	color: #fff;
}
/* Footer hover fill per channel (same brand colours as the CTA pills). */
.vmt-tet27-footer-social .is-hotline {
	--c-bg: var(--accent);
}
.vmt-tet27-footer-social .is-zalo {
	--c-bg: #0068ff;
}
.vmt-tet27-footer-social .is-messenger {
	--c-bg: linear-gradient(45deg, #0a7cff 0%, #a033ff 55%, #ff5c87 100%);
}
.vmt-tet27-footer-brand .logo-img {
	display: block;
	width: auto;
	height: 56px;
}
.vmt-tet27-footer-copyright {
	max-width: 100%;
	color: rgba(255, 250, 240, 0.65);
	font-size: 11px;
	line-height: 1.8;
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 1200px) {
	.vmt-tet27-footer-bottom {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 18px;
	}
	.vmt-tet27-footer-license {
		flex-basis: 100%;
	}
}
@media (max-width: 1024px) {
	.vmt-tet27-footer-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		column-gap: 32px;
	}
	.vmt-tet27-footer-trust {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		column-gap: 32px;
	}
	.vmt-tet27-footer-offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.vmt-tet27-footer-office:last-child {
		grid-column: 1 / -1;
	}
}
@media (max-width: 767px) {
	.vmt-tet27-footer-license {
		white-space: normal;
	}
}
@media (max-width: 700px) {
	.vmt-tet27-footer {
		padding: 44px 24px 108px;
	}
	.vmt-tet27-footer-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 36px;
	}
	.vmt-tet27-footer-offices {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 0;
		gap: 28px;
	}
	.vmt-tet27-footer-office h3 {
		margin-bottom: 12px;
	}
	.vmt-tet27-footer-office address {
		font-size: 13px;
		line-height: 1.8;
	}
	.vmt-tet27-footer-trust {
		grid-column: 1;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.vmt-tet27-footer-awards {
		gap: 22px;
	}
	.vmt-tet27-footer-awards img {
		height: 64px;
	}
	.vmt-tet27-footer-certifications {
		gap: 20px;
	}
	.vmt-tet27-footer-bottom {
		gap: 14px;
		padding-top: 24px;
	}
	.vmt-tet27-footer-copyright {
		text-align: left;
		white-space: normal;
	}
}
@media (max-width: 360px) {
	.vmt-tet27-footer-awards {
		gap: 16px;
	}
	.vmt-tet27-footer-awards img {
		height: 56px;
	}
}
.vmt-tet27-sticky-tour {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 75;
	max-width: min(430px, calc(100vw - 40px));
	padding: 11px 12px 11px 16px;
	display: none;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--shadow);
	backdrop-filter: blur(14px);
}
.vmt-tet27-sticky-tour.is-visible {
	display: flex;
}
.vmt-tet27-sticky-tour .info {
	flex: 1;
	min-width: 0;
}
.vmt-tet27-sticky-tour .k {
	color: var(--ink-soft);
	font-size: 10px;
}
.vmt-tet27-sticky-tour .v {
	overflow: hidden;
	color: var(--forest-950);
	font-size: 12px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vmt-tet27-sticky-tour .cta {
	min-height: 34px;
	padding: 0 14px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
}
.vmt-tet27-sticky-tour .close {
	padding: 5px;
	border: 0;
	background: transparent;
	color: var(--ink-soft);
	font-size: 18px;
	cursor: pointer;
}
/* IntersectionObserver motion */
.vmt-tet27.vmt-motion-ready .vmt-reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition:
		opacity 1.3s var(--ease),
		transform 1.3s var(--ease);
	transition-delay: var(--vmt-delay, 0ms);
}
.vmt-tet27.vmt-motion-ready .vmt-reveal.is-in-view {
	opacity: 1;
	transform: none;
}
/* Sections reveal their content, not themselves (data-vmt-reveal="content"):
   the background is in place from the first pixel, so a section rising into
   view (e.g. under the pinned visa title) reads as one solid sheet, and only
   what sits on it fades up. Same 1.3s / 26px as every other reveal. Keyframes
   with a "from" only animate back to each child's own opacity, and the offset
   uses the separate translate property, so children with their own opacity
   or transform (the faded cutouts in stay / departures) keep them. */
@media (prefers-reduced-motion: no-preference) {
	.vmt-tet27[data-vmt-reveal="content"].vmt-motion-ready section.vmt-reveal {
		opacity: 1;
		transform: none;
	}
	.vmt-tet27[data-vmt-reveal="content"].vmt-motion-ready
		section.vmt-reveal:not(.is-in-view)
		> * {
		opacity: 0;
	}
	.vmt-tet27[data-vmt-reveal="content"].vmt-motion-ready
		section.vmt-reveal.is-in-view
		> * {
		animation: vmtTet27ContentIn 1.3s var(--ease) var(--vmt-delay, 0ms)
			backwards;
	}
}
@keyframes vmtTet27ContentIn {
	from {
		opacity: 0;
		translate: 0 26px;
	}
}

@media (max-width: 1080px) {
	.vmt-tet27-package-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Third card on its own row, centred at the same width as the others. */
	.vmt-tet27-package-card:nth-child(3) {
		grid-column: 1/-1;
		justify-self: center;
		width: calc((100% - 18px) / 2);
	}
	.vmt-tet27-final-inner {
		grid-template-columns: 1fr 420px;
	}
}
@media (max-width: 859px) {
	/* vmt-critical-mobile:start */
	.vmt-tet27-nav {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.vmt-tet27-nav-inner {
		height: 52px;
	}
	.vmt-tet27-nav.is-scrolled .vmt-tet27-nav-inner {
		padding: 0 8px 0 10px;
	}
	.admin-bar .vmt-tet27-nav {
		top: 46px;
	}
	.vmt-tet27-nav .brand {
		font-size: 18px;
	}
	.vmt-tet27-nav .brand .logo-img {
		height: 46px;
	}
	.vmt-tet27-nav .cta-pill {
		min-height: 36px;
		padding: 0 14px;
		font-size: 12px;
	}
	.vmt-tet27-hero {
		align-items: end;
		/* Bottom edge colour of hero-mobi.webp. */
		background: #840000;
	}
	.vmt-tet27-hero-content {
		padding: 94px 20px 66px;
	}
	.vmt-tet27-hero-content h1 {
		font-size: clamp(50px, 16vw, 68px);
	}
	.vmt-tet27-hero-sub {
		margin: 10px 0;
		font-size: 27px;
	}
	.vmt-tet27-hero-desc {
		margin-bottom: 18px;
		font-size: 14px;
		line-height: 1.55;
	}
	.vmt-tet27-hero-stats {
		margin-bottom: 18px;
		padding: 12px 0;
	}
	.vmt-tet27-hero-stats > div {
		padding-right: 8px;
	}
	.vmt-tet27-hero-stats > div + div {
		padding-left: 8px;
	}
	.vmt-tet27-hero-stats .val {
		font-size: 14px;
	}
	.vmt-btn-gold {
		flex: 1 1 calc(50% - 4px);
		min-height: 40px;
		padding: 0 12px;
		font-size: 12px;
	}
	/* vmt-critical-mobile:end */
	.vmt-tet27-trust {
		width: calc(100% - 24px);
		margin-top: -58px;
		padding: 7px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vmt-tet27-trust .item {
		padding: 12px 4px;
		gap: 5px;
		border-left: 0;
	}
	/* 2 × 2: divider between the columns and between the two rows. */
	.vmt-tet27-trust .item:nth-child(even) {
		border-left: 1px solid var(--line);
	}
	.vmt-tet27-trust .item:nth-child(-n + 2) {
		border-bottom: 1px solid var(--line);
	}
	/* Fits a ~133px column at 320px wide; grows to the max from ~425px. */
	.vmt-tet27-trust .num {
		font-size: clamp(24px, 7.4vw, 30px);
	}
	.vmt-tet27-trust .label {
		font-size: clamp(11.5px, 3.3vw, 14px);
	}
	.vmt-tet27-countdown,
	.vmt-tet27-pain,
	.vmt-tet27-packages,
	.vmt-tet27-stay,
	.vmt-tet27-departures,
	.vmt-tet27-visa,
	.vmt-tet27-diff,
	.vmt-tet27-gallery,
	.vmt-tet27-testimonials,
	.vmt-tet27-faq {
		padding: 74px 20px;
	}
	.vmt-tet27-countdown::before {
		inset: 38% -30% 0 24%;
	}
	.vmt-tet27-countdown-inner {
		grid-template-columns: 1fr;
	}
	.vmt-tet27-timer {
		gap: 10px;
	}
	.vmt-tet27-timer .u {
		margin-top: 18px;
		font-size: 10px;
		letter-spacing: 0.14em;
	}
	.vmt-tet27-pain {
		grid-template-columns: 1fr;
	}
	.vmt-tet27-pain-row .solution {
		grid-template-rows: 1fr;
		margin-top: 8px;
		opacity: 1;
		transform: none;
	}
	.vmt-tet27-package-grid {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
	}
	.vmt-tet27-package-card:nth-child(3) {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}
	.vmt-tet27-compare-tabs {
		width: fit-content;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		overflow: visible;
		justify-content: center;
	}
	.vmt-tet27-compare-tabs button {
		flex: 0 0 auto;
	}
	.vmt-tet27-destinations {
		/* Also capped by the viewport height (minus the fixed nav), so a whole
		   card fits on screen on landscape phones too. */
		--vmt-dest-w: min(84vw, 420px, calc((100dvh - 96px) * 4 / 5));
		padding: 10px 20px 74px;
	}
	.vmt-tet27-tet-banner {
		background-position: 88% top;
	}
	/* The copy sits at the bottom here: fade bottom → top. Densest under the
	   body line (over the red clothes), clear by the top fifth where the faces are. */
	.vmt-tet27-tet-banner::before {
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.58) 0%,
			rgba(0, 0, 0, 0.5) 15%,
			rgba(0, 0, 0, 0.36) 32%,
			rgba(0, 0, 0, 0.2) 48%,
			rgba(0, 0, 0, 0.08) 62%,
			rgba(0, 0, 0, 0.02) 74%,
			rgba(0, 0, 0, 0) 82%
		);
	}
	.vmt-tet27-tet-banner-content {
		align-self: flex-end;
		padding: 60px 20px;
	}
	.vmt-tet27-visa-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vmt-tet27 .vmt-tet27-testimonial-card {
		flex-basis: 82vw;
		scroll-snap-align: center;
	}
	.vmt-tet27 .vmt-tet27-review-arrow {
		display: none;
	}
	/* Phones, tablets and landscape phones: 82vw (a peek of the next photo),
	   capped at 460px on tablets and by the screen height (minus the fixed
	   nav) so a whole photo always fits on screen. The desktop clamp would
	   bottom out at 260px here. */
	.vmt-tet27-gallery-card {
		flex-basis: min(82vw, 460px, calc((100dvh - 96px) * 1200 / 904));
	}
	.vmt-tet27-final {
		min-height: auto;
		/* The tall single-column section scales the 16:9 photo to its height
		   (≈4–5× the screen width on phones), so a few percent moves a lot:
		   42% puts the Statue of Liberty at ~70% across (80% at 320px), clear
		   of the left-aligned copy and under the lightest part of the overlay. */
		background-position: 38% center;
	}
	/* Copy on top, form below: fade top → bottom. Densest over the clouds
	   behind the heading and body line, clear by the form card (~53% down). */
	.vmt-tet27-final::before {
		background: linear-gradient(
			115deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.48) 10%,
			rgba(0, 0, 0, 0.36) 20%,
			rgba(0, 0, 0, 0.22) 30%,
			rgba(0, 0, 0, 0.1) 40%,
			rgba(0, 0, 0, 0.03) 50%,
			rgba(0, 0, 0, 0) 60%
		);
	}
	.vmt-tet27-final-inner {
		padding: 82px 20px 96px;
		grid-template-columns: 1fr;
	}
	.vmt-tet27-final-form-wrap {
		width: 100%;
	}
	.vmt-tet27-sticky-tour {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
	.vmt-tet27-faq-item button {
		font-size: 17px;
	}
}
@media (max-width: 540px) {
	.vmt-tet27-stay-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.vmt-tet27-stay-stats .sep {
		display: none;
	}
	.vmt-tet27-stay-stats > div:not(.sep) {
		padding: 14px 4px;
	}
	.vmt-tet27-stay-stats .val {
		font-size: clamp(15px, 4.4vw, 20px);
		white-space: nowrap;
	}
	.vmt-tet27-departure-row {
		align-items: flex-start;
	}
	.vmt-tet27-departure-row .left {
		align-items: flex-start;
	}
	.vmt-tet27-departure-row .right {
		justify-content: space-between;
	}
	.vmt-tet27-visa-cards {
		grid-template-columns: 1fr;
	}
	.vmt-tet27-diff-base .row,
	.vmt-tet27-diff-overlay .row {
		min-height: 90px;
		flex-direction: column;
		gap: 4px;
	}
	.vmt-tet27-diff-base .row .label,
	.vmt-tet27-diff-overlay .row .label {
		flex-basis: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	/* vmt-critical-motion:start */
	.vmt-tet27 *,
	.vmt-tet27 *::before,
	.vmt-tet27 *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	/* vmt-critical-motion:end */
	.vmt-tet27.vmt-motion-ready .vmt-reveal {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-transparency: reduce) {
	.vmt-tet27-nav-inner::before,
	.vmt-tet27-trust,
	.vmt-tet27-final-form-wrap,
	.vmt-tet27-sticky-tour {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Final responsive rhythm pass — scoped after theme and component rules. */
.vmt-tet27 h3 {
	line-height: 1.25;
	max-width: 72%;
}

@media (min-width: 860px) {
	.vmt-tet27 .vmt-tet27-departures,
	.vmt-tet27 .vmt-tet27-visa,
	.vmt-tet27 .vmt-tet27-diff,
	.vmt-tet27 .vmt-tet27-gallery,
	.vmt-tet27 .vmt-tet27-testimonials,
	.vmt-tet27 .vmt-tet27-faq {
		padding-top: 84px;
		padding-bottom: 92px;
	}
	.vmt-tet27 .vmt-tet27-pain {
		padding-top: 0;
		padding-bottom: 92px;
	}
	.vmt-tet27 .vmt-tet27-packages {
		padding-top: 70px;
		padding-bottom: 60px;
	}
	.vmt-tet27 .vmt-tet27-countdown {
		padding-top: clamp(112px, 9vw, 128px);
		padding-bottom: 96px;
	}
	.vmt-tet27-countdown-inner {
		min-height: clamp(340px, 30vw, 420px);
	}
	.vmt-tet27 .vmt-tet27-destinations {
		padding-top: 14px;
		padding-bottom: 96px;
	}
	.vmt-tet27 .vmt-tet27-section-head {
		margin-bottom: clamp(34px, 3.5vw, 48px);
	}
	.vmt-tet27 .vmt-tet27-tet-banner {
		min-height: min(90dvh, 1360px);
	}
	.vmt-tet27 .vmt-tet27-gallery-head,
	.vmt-tet27 .vmt-tet27-testimonials-head {
		margin-bottom: 32px;
	}
	.vmt-tet27 .vmt-tet27-faq-inner h2 {
		margin-bottom: 34px;
	}
}

@media (max-width: 859px) {
	.vmt-tet27 .vmt-tet27-countdown,
	.vmt-tet27 .vmt-tet27-pain,
	.vmt-tet27 .vmt-tet27-packages,
	.vmt-tet27 .vmt-tet27-departures,
	.vmt-tet27 .vmt-tet27-visa,
	.vmt-tet27 .vmt-tet27-diff,
	.vmt-tet27 .vmt-tet27-gallery,
	.vmt-tet27 .vmt-tet27-testimonials,
	.vmt-tet27 .vmt-tet27-faq {
		padding-top: 60px;
		padding-bottom: 68px;
	}
	.vmt-tet27 .vmt-tet27-countdown {
		padding-top: 96px;
	}
	.vmt-tet27 .vmt-tet27-section-head {
		margin-bottom: 36px;
	}
	.vmt-tet27 .vmt-tet27-pain-media {
		height: min(400px, 90vw - 24px);
	}
	.vmt-tet27-destinations-section h2 {
		padding-top: 32px;
	}
	.vmt-tet27 .vmt-tet27-destinations {
		padding-top: 10px;
		padding-bottom: 64px;
	}
	.vmt-tet27 .vmt-tet27-tet-banner {
		min-height: 70dvh;
	}
	.vmt-tet27 .vmt-tet27-tet-banner-content {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.vmt-tet27 .vmt-tet27-visa-head,
	.vmt-tet27 .vmt-tet27-gallery-head,
	.vmt-tet27 .vmt-tet27-testimonials-head {
		margin-bottom: 32px;
	}
	.vmt-tet27 .vmt-tet27-faq-inner h2 {
		margin-bottom: 32px;
	}
	.vmt-tet27 .vmt-tet27-final-inner {
		padding-top: 68px;
		padding-bottom: 82px;
	}
}

@media (max-width: 540px) {
	.vmt-tet27 .vmt-tet27-countdown,
	.vmt-tet27 .vmt-tet27-pain,
	.vmt-tet27 .vmt-tet27-packages,
	.vmt-tet27 .vmt-tet27-departures,
	.vmt-tet27 .vmt-tet27-visa,
	.vmt-tet27 .vmt-tet27-diff,
	.vmt-tet27 .vmt-tet27-gallery,
	.vmt-tet27 .vmt-tet27-testimonials,
	.vmt-tet27 .vmt-tet27-faq {
		padding-top: 56px;
		padding-bottom: 64px;
	}
	.vmt-tet27 .vmt-tet27-countdown {
		padding-top: 92px;
	}
	.vmt-tet27 .vmt-tet27-section-head h2,
	.vmt-tet27 .vmt-tet27-countdown-copy h2,
	.vmt-tet27 .vmt-tet27-visa-head h2,
	.vmt-tet27 .vmt-tet27-diff-head h2,
	.vmt-tet27 .vmt-tet27-gallery-head h2,
	.vmt-tet27 .vmt-tet27-testimonials-head h2,
	.vmt-tet27 .vmt-tet27-faq-inner h2 {
		font-size: 36px;
	}
	.vmt-tet27 .vmt-tet27-tet-banner-content h2,
	.vmt-tet27 .vmt-tet27-final-copy h2 {
		font-size: 44px;
		line-height: 1.22;
	}
	.vmt-tet27 .vmt-tet27-pain-media {
		height: min(360px, 90vw - 24px);
	}
	.vmt-tet27 .vmt-tet27-departure-row {
		flex-direction: column;
		gap: 12px;
	}
	.vmt-tet27 .vmt-tet27-departure-row .left {
		width: 100%;
		gap: 14px;
	}
	.vmt-tet27 .vmt-tet27-departure-row .date {
		flex: 0 0 96px;
		min-width: 96px;
		white-space: nowrap;
		line-height: 1.35;
	}
	.vmt-tet27 .vmt-tet27-departure-row .right {
		width: calc(100% - 110px);
		margin-left: 110px;
		padding-left: 0;
		gap: 8px;
	}
}

/* Phone gallery: full-width swipe rail with a centred photo and neighbour peeks. */
@media (max-width: 540px) {
	.vmt-tet27 .vmt-tet27-gallery {
		padding-left: 0;
		padding-right: 0;
	}
	.vmt-tet27 .vmt-tet27-gallery-head {
		text-align: center;
	}
	.vmt-tet27 .vmt-tet27-gallery-head h2 {
		font-size: clamp(24px, 7.4vw, 32px);
		line-height: 1.2;
	}
	.vmt-tet27 .vmt-tet27-gallery-track {
		gap: 16px;
		padding-left: 8vw;
		padding-right: 8vw;
	}
	.vmt-tet27 .vmt-tet27-gallery-card {
		flex-basis: 84vw;
		scroll-snap-align: center;
	}
}

/* Contextual transparent imagery inspired by premium international travel editorial layouts. */
.vmt-tet27 .vmt-tet27-visual-cutout {
	display: block;
	max-width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
.vmt-tet27 .vmt-tet27-countdown-copy,
.vmt-tet27 .vmt-tet27-timer {
	position: relative;
	z-index: 2;
}
.vmt-tet27 .vmt-tet27-countdown-art {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 40px;
	width: clamp(160px, 26vw, 370px);
	transform: translateX(-33%);
	filter: drop-shadow(0 24px 30px rgba(74, 0, 1, 0.14));
}
.vmt-tet27 .vmt-tet27-departures {
	overflow: hidden;
}
.vmt-tet27 .vmt-tet27-departures-inner {
	position: relative;
	z-index: 1;
}
.vmt-tet27 .vmt-tet27-departures .vmt-tet27-section-head {
	min-height: 220px;
	padding-right: min(44vw, 520px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vmt-tet27 .vmt-tet27-departures-art {
	position: absolute;
	z-index: 0;
	top: 32px;
	/* Right edge lines up with the 1280px content column / nav. */
	right: max(clamp(20px, 5.6vw, 76px), calc((100% - 1280px) / 2));
	width: min(48vw, 620px);
	filter: drop-shadow(0 26px 34px rgba(74, 0, 1, 0.1));
}
/* Two-column head (title left, art right): start the title on the same
   left edge as the nav logo instead of centring it in its column. */
@media (min-width: 860px) {
	.vmt-tet27 .vmt-tet27-departures .vmt-tet27-section-head h2 {
		text-align: left;
	}
}
/* Wide desktops: the fixed-size title and art leave a ~170px hole between
   them, so grow both with the viewport. The title scales 60px (at 1200px) to
   76px (~1440px); the art caps at 660px; its top is set so its centre sits
   on the title's (head starts 84px down and is 220px tall; art is 1600x686). */
@media (min-width: 1200px) {
	.vmt-tet27 .vmt-tet27-departures .vmt-tet27-section-head h2 {
		font-size: clamp(60px, calc(60px + (100vw - 1200px) * 0.067), 76px);
	}
	/* The taller art needs more room above the tabs. */
	.vmt-tet27 .vmt-tet27-departures .vmt-tet27-section-head {
		margin-bottom: 100px;
	}
	.vmt-tet27 .vmt-tet27-departures-art {
		top: calc(164px - min(48vw, 660px) * 0.2144);
		width: min(48vw, 660px);
	}
}
.vmt-tet27 .vmt-tet27-visa-inner {
	position: relative;
}
.vmt-tet27 .vmt-tet27-visa-head {
	position: relative;
	z-index: 1;
	min-height: 235px;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vmt-tet27 .vmt-tet27-visa-art {
	position: absolute;
	z-index: 0;
	top: -58px;
	right: -12px;
	width: min(39vw, 430px);
	filter: drop-shadow(0 28px 36px rgba(74, 0, 1, 0.12));
}
/* Visa scroll scene: the title block (with the art) pins under the fixed nav
   while the cards, in normal flow below it, scroll up over it and off the top
   of the screen. A screen-high run-out after the last card then lets the next
   section rise into the space under the still-pinned title; the title lets go
   once that section reaches its normal place, so the hand-off lands on the
   ordinary page layout with no jump. Plain sticky + native scroll, no JS in
   the scroll path, so it keeps iOS momentum and 120Hz smoothness.
   Off (cards fall back to the grid) for reduced motion and for screens too
   short to show the title and a card, such as landscape phones. */
.vmt-tet27 .vmt-tet27-visa-scene {
	/* Where the title pins: nav (80px) + the art's 58px overhang above the
	   title block + 8px, so the top of the art clears the nav. */
	--visa-pin-top: 146px;
	max-width: 1280px;
	margin: 0 auto;
}
.admin-bar .vmt-tet27 .vmt-tet27-visa-scene {
	--visa-pin-top: 178px;
}
.vmt-tet27 .vmt-tet27-visa-stage {
	position: relative;
	z-index: 0;
}
.vmt-tet27 .vmt-tet27-visa-cards {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) {
	.vmt-tet27 .vmt-tet27-visa-stage {
		position: sticky;
		top: var(--visa-pin-top);
	}
	.vmt-tet27 .vmt-tet27-visa-cards {
		/* Desktop: step card width, and how far each card tucks up beside the
		   previous one (they sit in different lanes, see below). */
		--visa-card-w: clamp(350px, 32vw, 460px);
		--visa-card-step: calc(var(--visa-card-w) * -0.39);
		--visa-photo-step: var(--visa-card-step);
		/* Lead-in: once the title pins, it reads clean for a short stretch
		   before the first card reaches it. */
		padding-top: clamp(40px, 16svh, 180px);
		/* Run-out: the next section starts rising from the bottom edge just
		   as the last card leaves through the top (no dead stretch), and the
		   title stays pinned until that section sits right under it. */
		padding-bottom: calc(100svh - var(--visa-pin-top));
		display: flex;
		flex-direction: column;
		/* Spacing comes from the card margins alone. */
		gap: 0;
	}
	.vmt-tet27 .vmt-tet27-visa-card {
		width: var(--visa-card-w);
		margin-left: calc((100% - var(--visa-card-w)) * var(--visa-lane, 0));
	}
	.vmt-tet27 .vmt-tet27-visa-card + .vmt-tet27-visa-card {
		margin-top: var(--visa-card-step);
	}
	/* The closing customer photos are side-by-side collages with no text, so
	   they run larger than the step cards to keep both halves readable. */
	.vmt-tet27 .vmt-tet27-visa-card.is-photo {
		--visa-card-w: clamp(380px, 34vw, 490px);
	}
	.vmt-tet27 .vmt-tet27-visa-card + .vmt-tet27-visa-card.is-photo {
		margin-top: var(--visa-photo-step);
	}
	/* Zigzag lanes, 0 = left edge … 1 = right edge: three lanes for the steps,
	   then the two photos framing the end, left and right. Neighbours are
	   always far enough apart (down to 1081px) to share rows without
	   touching. */
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(1) {
		--visa-lane: 0.02;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(2) {
		--visa-lane: 0.98;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(3) {
		--visa-lane: 0.22;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(4) {
		--visa-lane: 0.94;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(5) {
		--visa-lane: 0.04;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(6) {
		--visa-lane: 0.96;
	}
}
/* Desktop: one even top-to-top rhythm for all six cards, so the gap between
   two cards on the same side is the same all the way down. Step bodies share
   one height (room for the longest description), making every step card
   equally tall; the second photo then drops by that same step instead of
   by the shorter first photo, which left it nearly touching card 04. */
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) and (min-width: 1081px) {
	.vmt-tet27 .vmt-tet27-visa-cards {
		/* Step card width, readable on the photo cards (which override
		   --visa-card-w for themselves). */
		--visa-step-w: var(--visa-card-w);
		/* Description lines to make room for: the longest one wraps to three
		   below ~1180px, two above. */
		--visa-desc-lines: 2;
		/* At least the natural body height (padding 38 + number 20.8 + gaps 14
		   + title 22.1 + 21 per description line), so every body is exactly
		   this tall. */
		--visa-body-h: calc(95px + var(--visa-desc-lines) * 21px);
	}
	.vmt-tet27 .vmt-tet27-visa-card-body {
		min-height: var(--visa-body-h);
	}
	/* Step pitch (step height + step overlap) minus the first photo's height;
	   image heights follow the 720×542 photos, both inside 1px borders. */
	.vmt-tet27 .vmt-tet27-visa-card.is-photo + .vmt-tet27-visa-card.is-photo {
		margin-top: calc(
			(var(--visa-step-w) - var(--visa-card-w)) * 542 / 720 +
				var(--visa-body-h) + var(--visa-card-step)
		);
	}
}
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) and (min-width: 1081px) and (max-width: 1179px) {
	.vmt-tet27 .vmt-tet27-visa-cards {
		--visa-desc-lines: 3;
	}
}
/* Tablets: two lanes, left / right. Step cards still tuck up side by side;
   the wider photos would touch, so they stack with a gap instead. */
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) and (max-width: 1080px) {
	.vmt-tet27 .vmt-tet27-visa-cards {
		--visa-card-w: min(46%, 440px);
		--visa-photo-step: 40px;
	}
	.vmt-tet27 .vmt-tet27-visa-card.is-photo {
		--visa-card-w: min(60%, 460px);
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(odd) {
		--visa-lane: 0.04;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(even) {
		--visa-lane: 0.96;
	}
}
/* Below 860px the art sits under the text instead of above it, so the
   title pins right under the 64px nav. */
@media (max-width: 859px) {
	.vmt-tet27 .vmt-tet27-visa-scene {
		--visa-pin-top: 76px;
	}
	.admin-bar .vmt-tet27 .vmt-tet27-visa-scene {
		--visa-pin-top: 122px;
	}
}
/* Phones: cards too wide to share a row, so they stack with a gap; step
   cards offset left / right for the zigzag, the closing photos full width. */
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) and (max-width: 600px) {
	.vmt-tet27 .vmt-tet27-visa-cards {
		--visa-card-w: 80%;
		--visa-card-step: 40px;
		--visa-photo-step: 40px;
	}
	.vmt-tet27 .vmt-tet27-visa-card.is-photo {
		--visa-card-w: 100%;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(odd) {
		--visa-lane: 0;
	}
	.vmt-tet27 .vmt-tet27-visa-card:nth-child(even) {
		--visa-lane: 1;
	}
}
/* Desktop, where the art sits beside the title: the title runs on one line,
   sized to the room left of the art, and the title block shares the art's
   vertical centre. (Below 1081px the art fades behind or hides, and the
   title wraps.) */
@media (min-width: 1081px) {
	.vmt-tet27 .vmt-tet27-visa-inner {
		/* Trimmed below ~1344px so the one-line title keeps a real size. */
		--visa-art-w: min(32vw, 360px);
	}
	.vmt-tet27 .vmt-tet27-visa-art {
		width: var(--visa-art-w);
	}
	.vmt-tet27 .vmt-tet27-visa-head {
		/* Ends 32px short of the art, which hangs 12px past the right edge. */
		max-width: calc(100% - var(--visa-art-w) - 20px);
		/* The art (900×790) spans -58px … -58px + 790/900 of its width; this
		   height puts the title block on the same vertical centre. */
		min-height: calc(var(--visa-art-w) * 790 / 900 - 116px);
		container-type: inline-size;
	}
	.vmt-tet27 .vmt-tet27-visa-head h2 {
		/* "Chuyên Visa Mỹ Đậu Đến 98%" is ~13.72em wide: fill the head width
		   (with a little slack), capped at the usual section-title size. */
		font-size: min(72px, 100cqw / 14.1);
		white-space: nowrap;
	}
}
.vmt-tet27 .vmt-tet27-faq {
	isolation: isolate;
	overflow: hidden;
	background: var(--sage);
}
.vmt-tet27 .vmt-tet27-faq-inner {
	position: relative;
	z-index: 1;
}
.vmt-tet27 .vmt-tet27-faq-art {
	position: absolute;
	z-index: 0;
	left: 50%;
	transform: translateX(-50%);
	bottom: -50px;
	width: 120%;
	max-width: none;
	opacity: 0.12;
	filter: saturate(0.48) contrast(0.88);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 0, 0, 0.7) 22%,
		#000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 0, 0, 0.7) 22%,
		#000 100%
	);
}

@media (min-width: 860px) and (max-width: 1080px) {
	.vmt-tet27 .vmt-tet27-countdown-art {
		left: 48.5%;
		width: 320px;
	}
	.vmt-tet27 .vmt-tet27-departures .vmt-tet27-section-head {
		min-height: 180px;
		padding-right: 43vw;
	}
	.vmt-tet27 .vmt-tet27-departures-art {
		top: 54px;
		width: 46vw;
		opacity: 0.72;
		filter: saturate(0.72) contrast(0.94);
		-webkit-mask-image: linear-gradient(
			110deg,
			transparent 0%,
			rgba(0, 0, 0, 0.72) 18%,
			#000 48%,
			rgba(0, 0, 0, 0.84) 78%,
			transparent 100%
		);
		mask-image: linear-gradient(
			110deg,
			transparent 0%,
			rgba(0, 0, 0, 0.72) 18%,
			#000 48%,
			rgba(0, 0, 0, 0.84) 78%,
			transparent 100%
		);
	}
	.vmt-tet27 .vmt-tet27-visa-head {
		max-width: 600px;
		min-height: 0;
		margin-bottom: 40px;
	}
	.vmt-tet27 .vmt-tet27-visa-art {
		right: -84px;
		width: 340px;
	}
}

@media (max-width: 859px) {
	/* Visa art: in flow under the title and description, filling the space
	   the pinned title block leaves on phones and tablets. Capped by screen
	   height so the pinned block never swallows a short phone screen. */
	.vmt-tet27 .vmt-tet27-visa-art {
		position: static;
		width: min(100%, 340px, 30svh * 900 / 790);
		margin: 8px auto 0;
	}
	.vmt-tet27 .vmt-tet27-countdown {
		overflow: hidden;
	}
	.vmt-tet27 .vmt-tet27-countdown-inner {
		isolation: isolate;
		gap: 28px;
	}
	.vmt-tet27 .vmt-tet27-timer {
		width: 100%;
		max-width: 560px;
	}
	.vmt-tet27 .vmt-tet27-countdown-art {
		position: absolute;
		z-index: 1;
		right: -20px;
		bottom: 28px;
		left: auto;
		width: 190px;
		margin: 0;
		opacity: 1;
		transform: none;
	}
	.vmt-tet27 .vmt-tet27-departures .vmt-tet27-section-head {
		position: relative;
		z-index: 2;
		min-height: 0;
		padding-right: 0;
	}
	.vmt-tet27 .vmt-tet27-departures-art {
		position: absolute;
		z-index: 0;
		top: -50px;
		right: -28%;
		width: 125%;
		max-width: none;
		margin: 0;
		opacity: 0.2;
		filter: saturate(0.52) contrast(0.9);
		-webkit-mask-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.62) 54%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.62) 54%,
			transparent 100%
		);
	}
	.vmt-tet27 .vmt-tet27-visa-head {
		min-height: 0;
		margin-bottom: 10px;
	}
	.vmt-tet27 .vmt-tet27-faq-art {
		bottom: -60px;
		width: 450vw;
	}
}

@media (max-width: 540px) {
	.vmt-tet27 .vmt-tet27-countdown-inner {
		gap: 24px;
	}
	/* Keep the artwork below the full-width offer CTA and above the timer. */
	.vmt-tet27 .vmt-tet27-countdown-art {
		position: relative;
		justify-self: end;
		right: -16px;
		bottom: auto;
		width: 150px;
		margin: -16px 0 -26px;
		opacity: 1;
	}
	.vmt-tet27 .vmt-tet27-departures-art {
		top: 18px;
		right: -44%;
		width: 140%;
		opacity: 0.18;
	}
}

@media (max-width: 1199px) {
	.vmt-tet27 .vmt-tet27-diff-inner {
		max-width: 900px;
		display: block;
		isolation: isolate;
	}
	.vmt-tet27 .vmt-tet27-diff-head {
		position: relative;
		z-index: 2;
		max-width: 72%;
	}
	.vmt-tet27 .vmt-tet27-diff-visual {
		position: absolute;
		z-index: 0;
		top: -48px;
		right: -70px;
		width: 390px;
		height: 290px;
		min-height: 0;
		opacity: 0.6;
	}
	.vmt-tet27 .vmt-tet27-diff-visual::before {
		inset: 2% -4% -4% 8%;
	}
	.vmt-tet27 .vmt-tet27-diff-art {
		right: 0;
		bottom: auto;
		top: -98px;
		width: 350px;
	}
	.vmt-tet27 .vmt-tet27-diff-art-base {
		opacity: 0.12;
	}
	.vmt-tet27 .vmt-tet27-diff-art-color {
		opacity: 0.34;
	}
}

@media (max-width: 639px) {
	.vmt-tet27 .vmt-tet27-diff-head {
		max-width: none;
		margin-bottom: 28px;
	}
	.vmt-tet27 .vmt-tet27-diff-visual {
		display: none;
	}
	.vmt-tet27 .vmt-tet27-diff-panel .head-row .col {
		padding: 15px 18px;
	}
	.vmt-tet27 .vmt-tet27-diff-base .row,
	.vmt-tet27 .vmt-tet27-diff-overlay .row {
		height: 76px;
		min-height: 76px;
		padding: 15px 18px;
		display: grid;
		grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
		align-items: start;
		gap: 12px;
	}
	.vmt-tet27 .vmt-tet27-diff-base .row .label,
	.vmt-tet27 .vmt-tet27-diff-overlay .row .label {
		min-width: 0;
		flex-basis: auto;
		line-height: 1.38;
	}
	.vmt-tet27 .vmt-tet27-diff-base .row .val,
	.vmt-tet27 .vmt-tet27-diff-overlay .row .val {
		line-height: 1.42;
	}
	.vmt-tet27 .vmt-tet27-diff-slider {
		margin-top: 12px;
	}
}

/* Desktop scroll scene: hold the comparison in view while vertical scroll
   progressively reveals Vietmytravel. Touch layouts, and short viewports too
   short to fit the pinned content without clipping it, keep their natural flow. */
@media (min-width: 1200px) and (min-height: 820px) and (prefers-reduced-motion: no-preference) {
	.vmt-tet27 .vmt-tet27-diff {
		min-height: 200dvh;
		padding-top: 0;
		padding-bottom: 0;
		overflow-x: clip;
		overflow-y: visible;
	}

	.vmt-tet27 .vmt-tet27-diff-inner {
		position: sticky;
		top: 0;
		min-height: 100dvh;
		padding-top: clamp(84px, 9vh, 112px);
		padding-bottom: clamp(52px, 7vh, 84px);
		box-sizing: border-box;
	}
}

/* Keep the decorative cutout level with the table instead of letting it
   stretch to the full pinned viewport height. */
@media (min-width: 1200px) {
	.vmt-tet27 .vmt-tet27-diff-inner {
		grid-template-rows: auto auto;
		align-content: center;
		row-gap: 0;
	}

	.vmt-tet27 .vmt-tet27-diff-content {
		display: contents;
	}

	.vmt-tet27 .vmt-tet27-diff-head {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		z-index: 2;
	}

	.vmt-tet27 .vmt-tet27-diff-panel {
		grid-column: 1;
		grid-row: 2;
		z-index: 2;
	}

	.vmt-tet27 .vmt-tet27-diff-visual {
		grid-column: 2;
		grid-row: 2;
		min-height: 0;
		align-self: stretch;
	}

	.vmt-tet27 .vmt-tet27-diff-art {
		right: -16px;
		bottom: 0;
		width: min(380px, 32vw);
	}

	/* Only visible on short viewports where the pinned scroll scene below is
	   skipped; keep the manual slider anchored under the table, not wherever
	   grid auto-placement would otherwise put it. */
	.vmt-tet27 .vmt-tet27-diff-slider {
		grid-column: 1;
		grid-row: 3;
	}

	.vmt-tet27 .vmt-tet27-diff-labels {
		grid-column: 1;
		grid-row: 4;
	}
}

/* Wide but short viewports (e.g. a short laptop window) skip the pinned
   scroll scene above, so keep the manually draggable slider available
   instead of hiding it. */
@media (min-width: 1200px) and (min-height: 820px) {
	.vmt-tet27 .vmt-tet27-diff-slider,
	.vmt-tet27 .vmt-tet27-diff-labels {
		display: none;
	}
}

@keyframes vmtTet27DiffScrollReveal {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@supports (animation-timeline: view()) {
	@media (min-width: 1200px) and (min-height: 820px) and (prefers-reduced-motion: no-preference) {
		.vmt-tet27 .vmt-tet27-diff {
			view-timeline-name: --vmt-tet27-diff-scroll;
			view-timeline-axis: block;
		}

		.vmt-tet27 .vmt-tet27-diff-overlay,
		.vmt-tet27 .vmt-tet27-diff-art-color {
			animation: vmtTet27DiffScrollReveal linear both;
			animation-timeline: --vmt-tet27-diff-scroll;
			animation-range: cover 33.333% cover 66.667%;
			transition: none;
		}
	}
}

/* Desktop gallery uses a free-scrolling rail. Keep the card-by-card snap on
   touch layouts, but do not let the later base gallery rules re-enable it. */
@media (min-width: 1200px) {
	.vmt-tet27 .vmt-tet27-gallery-track {
		scroll-snap-type: none;
		scroll-behavior: auto;
	}

	.vmt-tet27 .vmt-tet27-gallery-card {
		scroll-snap-align: none;
	}
}

/* Desktop: "Vì Sao Khách Hàng Chọn Chúng Tôi?" and "Hình Ảnh Thực Tế Cùng
   Du Khách" run on a single line. The diff heading spans both grid columns
   (its art sits in the row below); the gallery heading drops its mobile <br>. */
@media (min-width: 1200px) {
	.vmt-tet27 .vmt-tet27-diff-head {
		grid-column: 1 / -1;
	}
	.vmt-tet27 .vmt-tet27-diff-head h2,
	.vmt-tet27 .vmt-tet27-gallery-head h2 {
		max-width: none;
	}
	.vmt-tet27 .vmt-tet27-br-compact {
		display: none;
	}
}

/* Desktop horizontal-pan scenes (destinations, gallery). JS measures how far
   the rail overflows, sets --vmt-pan-distance and adds .is-pan-ready; the
   section then grows by that distance while its content stays pinned, so each
   pixel of vertical scroll moves the rail one pixel sideways. Sizes follow the
   viewport height so the pinned view fits any desktop window. Tablet, mobile,
   reduced motion and no-JS keep the plain swipe/drag rails. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
	/* One vertical rhythm for both scenes, all from the viewport height:
	   equal space above the title and below the rail (--vmt-pan-pad, which
	   also clears the 80px nav when it slides back in on scroll-up), a clear
	   gap between title and rail (--vmt-pan-gap), and a little slack split
	   top/bottom. The card height is whatever the viewport has left, so the
	   block stays balanced at any desktop window height. */
	.vmt-tet27 [data-vmt-pan].is-pan-ready {
		--vmt-pan-pad: clamp(72px, 9vh, 104px);
		--vmt-pan-gap: clamp(28px, 5vh, 56px);
		--vmt-pan-slack: 4vh;
		--vmt-pan-title-lh: 1.15;
		/* Viewport height left for the cards once the title is known. */
		--vmt-pan-room: calc(
			100dvh - 2 * var(--vmt-pan-pad) - var(--vmt-pan-gap) -
				var(--vmt-pan-slack) - var(--vmt-pan-title) * var(--vmt-pan-title-lh)
		);
		height: calc(100dvh + var(--vmt-pan-distance, 0px));
		padding-top: 0;
		padding-bottom: 0;
	}
	.vmt-tet27 .is-pan-ready .vmt-tet27-pan-sticky {
		position: sticky;
		top: 0;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--vmt-pan-pad) 0;
		overflow: hidden;
		box-sizing: border-box;
	}
	.vmt-tet27 .is-pan-ready .vmt-tet27-pan-sticky h2 {
		font-size: var(--vmt-pan-title);
		line-height: var(--vmt-pan-title-lh);
		/* Sized to fit one line from 1200px up; never let it wrap. */
		white-space: nowrap;
	}
	.vmt-tet27 .is-pan-ready [data-vmt-pan-track] {
		flex: 0 0 auto;
		overflow: visible;
		padding-top: 0;
		padding-bottom: 0;
		cursor: auto;
		will-change: transform;
	}

	/* Destinations */
	.vmt-tet27 .vmt-tet27-destinations-section.is-pan-ready {
		--vmt-pan-title: clamp(36px, min(4.2vw, 6.5vh), 60px);
	}
	.vmt-tet27 .vmt-tet27-destinations-section.is-pan-ready h2 {
		padding: 0 clamp(20px, 5.6vw, 76px) var(--vmt-pan-gap);
	}
	.vmt-tet27 .is-pan-ready .vmt-tet27-destinations {
		/* Max 720px tall stays within the 800 × 1000 source photos. */
		--vmt-dest-w: calc(clamp(260px, var(--vmt-pan-room), 720px) * 4 / 5);
	}

	/* Gallery: title centred like the destinations scene, since the rail
	   below starts at the page gutter, not under a left-aligned title. */
	.vmt-tet27 .vmt-tet27-gallery.is-pan-ready {
		--vmt-pan-title: clamp(36px, min(5.3vw, 7.2vh), 72px);
	}
	.vmt-tet27 .vmt-tet27-gallery.is-pan-ready .vmt-tet27-gallery-head {
		width: 100%;
		margin-bottom: var(--vmt-pan-gap);
		box-sizing: border-box;
		text-align: center;
	}
	/* The width is spelled out from the photo ratio rather than left to
	   aspect-ratio on an auto-width flex item. Max 700px tall stays within the
	   1200 × 904 source photos. */
	.vmt-tet27 .is-pan-ready .vmt-tet27-gallery-card {
		--vmt-gallery-h: clamp(210px, var(--vmt-pan-room), 700px);
		flex: 0 0 auto;
		width: calc(var(--vmt-gallery-h) * 1200 / 904);
		height: var(--vmt-gallery-h);
	}
}

/* Pan curve (mirrored by panEase() in JS): smoothstep-velocity ramps over
   the first and last 25%, constant speed between, so the rail eases out of
   rest and back into it with no jump in speed or acceleration. linear() is
   sampled from that curve because no single cubic-bezier can express it. */
@keyframes vmtTet27Pan {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--vmt-pan-distance, 0px)), 0, 0);
	}
}

/* Scroll-driven version runs off the main thread where supported; elsewhere
   the JS fallback writes the same transform. */
@supports (animation-timeline: view()) {
	@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
		.vmt-tet27 [data-vmt-pan].is-pan-ready {
			view-timeline-name: --vmt-tet27-pan;
			view-timeline-axis: block;
			/* The page's scroll-padding-top (for the fixed nav) would otherwise
			   start the pan ~90px before the section actually pins. */
			view-timeline-inset: 0;
		}
		.vmt-tet27 .is-pan-ready [data-vmt-pan-track] {
			animation: vmtTet27Pan both;
			animation-timing-function: linear(
				0,
				0.0003 2.5%,
				0.0024 5%,
				0.0076 7.5%,
				0.0171 10%,
				0.0312 12.5%,
				0.0504 15%,
				0.0743 17.5%,
				0.1024 20%,
				0.1337 22.5%,
				0.1667 25%,
				0.8333 75%,
				0.8664 77.5%,
				0.8976 80%,
				0.9257 82.5%,
				0.9496 85%,
				0.9688 87.5%,
				0.9829 90%,
				0.9924 92.5%,
				0.9976 95%,
				0.9997 97.5%,
				1
			);
			animation-timeline: --vmt-tet27-pan;
			/* Start drifting 35vh before the pin and finish 35vh after it
			   releases, so the handoff between vertical and sideways motion
			   blends instead of snapping. */
			animation-range: contain -35vh contain calc(100% + 35vh);
		}
	}
}

/* Footer band */
.footer-band {
	aspect-ratio: 16 / 9;
	background-color: #f7f7f7; /* = --sage, matches the FAQ above */
	width: 100%;
	position: relative;
	overflow: hidden;
	overflow-anchor: none;
}

.footer-band .footer-fade-top,
.footer-band .footer-fg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.footer-band .footer-fade-top {
	--footer-fade: linear-gradient(
		to bottom,
		#0000 0%,
		#00000007 6%,
		#0000001b 12%,
		#00000037 18%,
		#0000005a 24%,
		#00000080 30%,
		#000000a5 36%,
		#000000c8 42%,
		#000000e4 48%,
		#000000f8 54%,
		#000 60%
	);
	-webkit-mask-image: var(--footer-fade);
	mask-image: var(--footer-fade);
}

.footer-band .footer-band-mask {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 50%;
	--footer-mask: linear-gradient(
		to bottom,
		#000 0%,
		#000000f8 10%,
		#000000e4 20%,
		#000000c8 30%,
		#000000a5 40%,
		#00000080 50%,
		#0000005a 60%,
		#00000037 70%,
		#0000001b 80%,
		#00000007 90%,
		#0000 100%
	);
	background-color: #f7f7f7; /* = --sage, matches the FAQ above */
	-webkit-mask-image: var(--footer-mask);
	mask-image: var(--footer-mask);
	pointer-events: none;
}

.footer-band .footer-vietmytravel {
	position: absolute;
	left: 50%;
	top: 25%;
	width: 82%;
	max-width: 1318px;
	transform: translateX(-50%);
	aspect-ratio: 992 / 260;
	background-color: #ff440be6;
	-webkit-mask: url("../images/tour-my-tet-2027/vietmytravel.svg") 50% / contain
		no-repeat;
	mask: url("../images/tour-my-tet-2027/vietmytravel.svg") 50% / contain
		no-repeat;
}

.footer-band .footer-grain {
	pointer-events: none;
	opacity: 0.55;
	mix-blend-mode: soft-light;
	will-change: transform;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	animation: 0.6s step-end infinite footer-grain;
	position: absolute;
	inset: -50%;
}

@keyframes footer-grain {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(-3%, -4%);
	}
	20% {
		transform: translate(3%, 2%);
	}
	30% {
		transform: translate(-4%, 3%);
	}
	40% {
		transform: translate(2%, -3%);
	}
	50% {
		transform: translate(-2%, 4%);
	}
	60% {
		transform: translate(4%, -2%);
	}
	70% {
		transform: translate(-3%, -3%);
	}
	80% {
		transform: translate(2%, 4%);
	}
	90% {
		transform: translate(-4%, -2%);
	}
	100% {
		transform: translate(0);
	}
}

.footer-band .footer-band-visible-mobile {
	display: block;
}

.footer-band .footer-band-visible-desktop {
	display: none;
}

@media (min-width: 640px) {
	.footer-band .footer-vietmytravel {
		top: 15%;
		width: 69%;
	}

	.footer-band .footer-band-visible-mobile {
		display: none;
	}

	.footer-band .footer-band-visible-desktop {
		display: block;
	}
}

@media (max-width: 639px) {
	.footer-band {
		aspect-ratio: 402 / 675;
	}
}

/* Click fireworks overlay */
#vmt-tet27-fireworks {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 99999;
}

/* Custom paper-airplane cursor */
.vmt-tet27-body {
	cursor:
		image-set(
				url("../images/tour-my-tet-2027/paper-airplane-3d-cursor-cursor.png") 4x
			)
			0 0,
		auto;
}
.vmt-tet27-body a,
.vmt-tet27-body button,
.vmt-tet27-body input,
.vmt-tet27-body select,
.vmt-tet27-body label,
.vmt-tet27-body [role="button"],
.vmt-tet27-body [data-vmt-pain-row] {
	cursor:
		image-set(
				url("../images/tour-my-tet-2027/paper-airplane-3d-cursor-pointer.png")
					4x
			)
			0 0,
		pointer;
}

/* Hero petals: hoa mai / hoa đào drifting down the hero sky, above the photo
   and below the copy (z-index 2). Decorative, never clickable, and hidden
   entirely when the visitor prefers reduced motion. */
.vmt-tet27-hero-petals {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}
.vmt-tet27-petal {
	position: absolute;
	top: -32px;
	width: 16px;
	aspect-ratio: 30 / 26;
	background: url("../images/tour-my-tet-2027/hoamai.webp") center / contain
		no-repeat;
	opacity: 0;
}
.vmt-tet27-petal:nth-child(even) {
	aspect-ratio: 1;
	background-image: url("../images/tour-my-tet-2027/hoadao.webp");
}
.vmt-tet27-petal.p1 {
	left: 6%;
	width: 16px;
}
.vmt-tet27-petal.p2 {
	left: 19%;
	width: 12px;
}
.vmt-tet27-petal.p3 {
	left: 33%;
	width: 19px;
}
.vmt-tet27-petal.p4 {
	left: 47%;
	width: 13px;
}
.vmt-tet27-petal.p5 {
	left: 60%;
	width: 17px;
}
.vmt-tet27-petal.p6 {
	left: 72%;
	width: 11px;
}
.vmt-tet27-petal.p7 {
	left: 84%;
	width: 15px;
}
.vmt-tet27-petal.p8 {
	left: 94%;
	width: 12px;
}
@media (min-width: 860px) {
	.vmt-tet27-petal {
		scale: 1.3;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.vmt-tet27-petal {
		animation: vmtTetPetal 13s linear infinite;
	}
	.vmt-tet27-petal.p1 {
		animation-duration: 12s;
		animation-delay: -1s;
	}
	.vmt-tet27-petal.p2 {
		animation-duration: 15s;
		animation-delay: -7s;
	}
	.vmt-tet27-petal.p3 {
		animation-duration: 11s;
		animation-delay: -4s;
	}
	.vmt-tet27-petal.p4 {
		animation-duration: 14s;
		animation-delay: -10s;
	}
	.vmt-tet27-petal.p5 {
		animation-duration: 12.5s;
		animation-delay: -2.5s;
	}
	.vmt-tet27-petal.p6 {
		animation-duration: 16s;
		animation-delay: -12s;
	}
	.vmt-tet27-petal.p7 {
		animation-duration: 13.5s;
		animation-delay: -6s;
	}
	.vmt-tet27-petal.p8 {
		animation-duration: 11.5s;
		animation-delay: -9s;
	}
}
@keyframes vmtTetPetal {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	8% {
		opacity: 0.95;
	}
	50% {
		transform: translate3d(26px, 52vh, 0) rotate(220deg);
	}
	88% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
		transform: translate3d(-14px, 104vh, 0) rotate(460deg);
	}
}

/* Phone reviews match the full-width gallery rail. */
@media (max-width: 540px) {
	.vmt-tet27 .vmt-tet27-testimonials {
		padding-left: 0;
		padding-right: 0;
	}
	.vmt-tet27 .vmt-tet27-testimonial-carousel {
		padding: 0;
	}
	.vmt-tet27 .vmt-tet27-testimonial-track {
		padding: 0 8vw;
	}
	.vmt-tet27 .vmt-tet27-testimonial-card {
		flex-basis: 84vw;
	}
}