/* Trang du lịch 2027 – template-destination-2027.php, loaded after site-2027.css.
   The page body is UX Builder output (Flatsome markup), outside .vmt-h27, so Flatsome still styles its elements and
   this file only restyles them. Areas are recognised by what they contain, not by ids (Flatsome regenerates element
   ids on every render): featured boxes hold a countdown, tour boxes hold .info_product, the article is the text
   placed straight in a column. Editor colours/alignment arrive as classes from vmt_site27_map_inline_styles():
   .vmt-ta-center/right, .vmt-c-orange/green (brand shades), .vmt-c-light (white text from the old dark boxes). */

.vmt-dest-body {
	background: #ffffff;
}
.vmt-dest-content {
	/* Editor orange and green: exact logo colours on large text, a deeper shade of the same hue on small text. */
	--vmt-orange: var(--accent-strong); /* #c73205, 5.4:1 */
	--vmt-orange-large: var(--accent); /* #ff440b, logo */
	--vmt-green: #067d2e; /* 5.2:1 */
	--vmt-green-large: #059134; /* logo */
	--vmt-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E");
	--vmt-icon-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	--vmt-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	color: var(--ink-2);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Page rhythm ---------- */
/* Rows line up with the 2027 header at every width: the header container is 1200px of content inside the --gutter
   side padding; a row adds the 10px column padding from style.css, so it pads by the gutter minus those 10px. */
.vmt-dest-content .section-content > .row {
	max-width: calc(1200px + 2 * var(--gutter));
	padding-right: calc(var(--gutter) - 10px);
	padding-left: calc(var(--gutter) - 10px);
}
.vmt-dest-content .section-content > .section-title {
	max-width: calc(1200px + 2 * var(--gutter));
}
/* Section padding set in UX Builder (10-15px) is replaced by the design's spacing; !important beats the
   per-section <style> Flatsome prints. */
.vmt-dest-content .section {
	padding-top: clamp(48px, 7vw, 96px) !important;
	padding-bottom: clamp(48px, 7vw, 96px) !important;
}
.vmt-dest-content > .section:first-child {
	padding-top: clamp(32px, 4.5vw, 64px) !important;
}
.vmt-dest-content .section .section {
	padding-top: clamp(40px, 6vw, 80px) !important;
	padding-bottom: 0 !important;
}
/* Two white sections in a row would stack both paddings (about 200px of blank space); the second one starts closer.
   The tinted tour list keeps its full padding on both sides. */
.vmt-dest-content .section:not(:has(.info_product)) + .section:not(:has(.info_product)) {
	padding-top: clamp(16px, 2.5vw, 32px) !important;
}
/* :has() cannot be nested, so the section before is matched by what it holds: neither the featured boxes (followed by
   the tinted tour list, which needs the full gap) nor the tour list itself. */
.vmt-dest-content .section:not(:has(.info_product, .ux-timer)):has(+ .section) {
	padding-bottom: clamp(16px, 2.5vw, 32px) !important;
}
/* Columns given Flatsome's .p-0 in UX Builder (the schedule column, so the old table could run edge to edge) get the
   normal column padding back: the new cards and text line up with the rest of the page and keep a side margin on phones. */
.vmt-dest-content .col.p-0 {
	padding: 0 10px 30px !important; /* same as every other column (style.css sets .col to 0 10px 30px) */
}
.vmt-dest-content .section-bg-overlay {
	display: none;
}
/* The tour list sits on the light tint, like the tinted sections of the 2027 homepage. */
.vmt-dest-content .section:has(.info_product) {
	background: var(--tint) !important;
}

/* ---------- Section titles ([ux_html] h1/h2/h3.section-title, [title]) ---------- */
.vmt-dest-content .section-title {
	display: block;
	margin: 0 auto clamp(28px, 4vw, 44px);
	padding: 0 15px;
	font-family: var(--serif);
	font-size: clamp(28px, 3.2vw, 42px) !important; /* beats the inline size typed in UX Builder */
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: none;
	text-wrap: balance;
}
.vmt-dest-content h1.section-title {
	font-size: clamp(34px, 4.4vw, 56px) !important;
	line-height: 1.08;
}
.vmt-dest-content h3.section-title {
	font-size: clamp(24px, 2.4vw, 32px) !important;
}
.vmt-dest-content .section-title b {
	display: none;
}

/* ---------- Editor formatting (shared rules) ---------- */
/* The featured columns carry Flatsome's .dark (white text for the old dark fill). Every box is light now, so its text
   follows the surrounding colour. Placed before the colour classes below, which must win over it. */
.vmt-dest-content .dark :where(h1, h2, h3, h4, p, a, span, b, strong) {
	color: inherit;
}
.vmt-dest-content [style*="font-size"]:not(.ux-timer, .ux-timer *, .section-title) {
	font-size: inherit !important;
}
.vmt-dest-content span[style*="underline"] {
	text-decoration: none !important;
}
.vmt-dest-content .vmt-ta-center {
	text-align: center;
	text-align-last: center;
}
.vmt-dest-content .vmt-ta-right {
	text-align: right;
	text-align-last: right;
}
.vmt-dest-content .vmt-c-orange {
	color: var(--vmt-orange);
}
.vmt-dest-content .vmt-c-green {
	color: var(--vmt-green);
}
.vmt-dest-content :is(h1, h2, h3).vmt-c-orange,
.vmt-dest-content :is(h1, h2, h3) .vmt-c-orange {
	color: var(--vmt-orange-large);
}
.vmt-dest-content :is(h1, h2, h3).vmt-c-green,
.vmt-dest-content :is(h1, h2, h3) .vmt-c-green {
	color: var(--vmt-green-large);
}
/* White text was written for the old dark boxes; every box is light now, so it follows the surrounding text. */
.vmt-dest-content .vmt-c-light {
	color: inherit;
}
/* Bold text inside coloured text keeps the colour. */
.vmt-dest-content :where([class*="vmt-c-"], [style*="color"]) :where(strong, b) {
	color: inherit;
}
/* UX Builder preview: the builder inserts the HTML typed in each element from the browser, so the PHP mapping has not
   run on it. The colours that would be unreadable on the light boxes are approximated here so editors can read them:
   yellow shows as brand orange, white follows the surrounding text. Visitors never get the .ux-builder-iframe class. */
.ux-builder-iframe .vmt-dest-content :is([style*="#fafa02" i], [style*="#ffff00" i], [style*="255, 255, 0"]) {
	color: var(--vmt-orange) !important;
}
.ux-builder-iframe .vmt-dest-content :is(h1, h2, h3) :is([style*="#fafa02" i], [style*="#ffff00" i], [style*="255, 255, 0"]) {
	color: var(--vmt-orange-large) !important;
}
.ux-builder-iframe .vmt-dest-content :is([style*="color: #fff" i], [style*="color:#fff" i], [style*="#fafafa" i], [style*="255, 255, 255"]) {
	color: inherit !important;
}

/* ---------- Cards: shared surface (featured boxes and tour boxes) ---------- */
.vmt-dest-content .col-inner:has(> .box .ux-timer),
.vmt-dest-content .col-inner:has(> .box .info_product) {
	height: 100%;
	background: none !important; /* the dark column fill set in UX Builder */
	text-shadow: none;
}
.vmt-dest-content .box:has(.ux-timer),
.vmt-dest-content .box:has(.info_product) {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease),
		box-shadow 0.35s var(--ease);
}
.vmt-dest-content .box:has(.ux-timer) .box-image,
.vmt-dest-content .box:has(.info_product) .box-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.vmt-dest-content .box:has(.ux-timer) .box-image :is(a, div, img),
.vmt-dest-content .box:has(.info_product) .box-image :is(a, div, img) {
	display: block;
	width: 100%;
	height: 100%;
}
.vmt-dest-content .box:has(.ux-timer) .box-image img,
.vmt-dest-content .box:has(.info_product) .box-image img {
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}
.vmt-dest-content .box:has(.ux-timer) .box-image {
	aspect-ratio: 3 / 2;
}
.vmt-dest-content .box:has(.ux-timer) .box-image .overlay {
	display: none;
}
.vmt-dest-content .box:has(.ux-timer) .box-text,
.vmt-dest-content .box:has(.info_product) .box-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	background: var(--surface) !important; /* the black text background set in UX Builder */
	color: var(--ink-2);
}
/* Full width: Flatsome's .text-center centres child divs with auto margins, which shrinks them inside the flex box. */
.vmt-dest-content .box:has(.ux-timer) .box-text-inner,
.vmt-dest-content .box:has(.info_product) .box-text-inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
}
@media (hover: hover) and (pointer: fine) {
	.vmt-dest-content .box:has(.ux-timer):hover,
	.vmt-dest-content .box:has(.info_product):hover {
		box-shadow: var(--shadow);
		transform: translateY(-4px);
	}
	.vmt-dest-content .box:hover .box-image img {
		transform: scale(1.04);
	}
}

/* ---------- Featured boxes (first section: image, title, offer, call button + countdown) ---------- */
.vmt-dest-content .box:has(.ux-timer) .box-text {
	padding: 24px 24px 22px;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.6;
}
.vmt-dest-content .box:has(.ux-timer) h3 {
	margin-bottom: 8px;
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(21px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}
.vmt-dest-content .box:has(.ux-timer) h3 :is(b, strong) {
	font-weight: inherit;
}
.vmt-dest-content .box:has(.ux-timer) .box-text p {
	margin-bottom: 0;
}
.vmt-dest-content .box:has(.ux-timer) .box-text-inner > :has(+ .row-collapse) {
	margin-bottom: 18px;
}
/* Call button + countdown, pinned to the bottom of the card. */
.vmt-dest-content .box:has(.ux-timer) .row-collapse {
	margin-top: auto !important;
	padding-top: 18px;
}
.vmt-dest-content .box:has(.ux-timer) .row-collapse::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	border-top: 1px solid var(--line);
}
.vmt-dest-content .box:has(.ux-timer) .row-collapse {
	position: relative;
}
.vmt-dest-content .box:has(.ux-timer) .row-collapse .col {
	padding-bottom: 0;
}
.vmt-dest-content .box:has(.ux-timer) .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px !important; /* the 10px radius typed in UX Builder */
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1;
	transition:
		background 0.25s,
		transform 0.25s var(--ease),
		box-shadow 0.25s;
}
.vmt-dest-content .box:has(.ux-timer) .button:hover {
	background: var(--accent-strong);
	box-shadow: 0 10px 24px rgba(199, 50, 5, 0.22);
	transform: translateY(-1px);
}
.vmt-dest-content .box:has(.ux-timer) .button:active {
	box-shadow: none;
	transform: translateY(1px) scale(0.98);
}
/* Countdown: brand green (deeper shade, its unit labels are small text); !important beats Flatsome's per-timer <style>. */
.vmt-dest-content .ux-timer {
	padding-left: 10px;
}
.vmt-dest-content .ux-timer span {
	border-radius: 8px;
	background-color: var(--vmt-green) !important;
	box-shadow: none !important;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.vmt-dest-content .ux-timer span strong {
	opacity: 0.85;
}

/* ---------- Tour boxes (tour list: image, name, duration, price, details link) ---------- */
.vmt-dest-content .box:has(.info_product) .box-text {
	padding: 18px 20px 20px;
	text-align: left;
}
.vmt-dest-content .box:has(.info_product) h3 {
	margin-bottom: 6px;
	color: var(--ink);
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}
.vmt-dest-content .box:has(.info_product) h3 :is(b, strong) {
	font-weight: inherit;
}
.vmt-dest-content .box:has(.info_product) h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vmt-dest-content .info_product {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	text-align: left;
}
.vmt-dest-content .info_product > p,
.vmt-dest-content .info_product > .item {
	margin: 0 0 14px;
}
.vmt-dest-content .info_product .item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	float: none;
	width: auto;
	padding: 0;
	border: 0;
	color: var(--ink-2);
	font-size: 14px;
	text-align: left;
}
/* Clock icon drawn from the Phosphor set used by the 2027 header: Font Awesome is not loaded on these pages. */
.vmt-dest-content .info_product .fa-clock-o {
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--ink-3);
	-webkit-mask: var(--vmt-icon-clock) center / contain no-repeat;
	mask: var(--vmt-icon-clock) center / contain no-repeat;
}
.vmt-dest-content .info_product .property-info {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: auto;
	padding-top: 14px;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	background: none;
}
.vmt-dest-content .info_product .property-info::before {
	content: none;
}
.vmt-dest-content .info_product .text_price {
	display: block;
	float: none;
	width: auto;
	height: auto;
	padding: 0;
	overflow: visible;
	color: var(--ink-3);
	font-size: 13px;
	line-height: 1.25;
}
/* "Giá" on top, the price on its own line below. The price is always typed inside a span, sometimes as several bold
   runs ("10" + "9,900,000"), so the span moves to its own line and the runs inside stay joined. */
.vmt-dest-content .info_product .text_price span:has(> strong) {
	display: block;
	margin-top: 4px;
	white-space: nowrap;
}
.vmt-dest-content .info_product .text_price strong {
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.vmt-dest-content .info_product .text_detail {
	float: none;
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	color: var(--accent-strong);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
	white-space: nowrap;
}
.vmt-dest-content .info_product .text_detail a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit !important;
}
.vmt-dest-content .info_product .text_detail a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--vmt-icon-arrow) center / contain no-repeat;
	mask: var(--vmt-icon-arrow) center / contain no-repeat;
	transition: transform 0.3s var(--ease);
}
.vmt-dest-content .box:hover .text_detail a::after {
	transform: translateX(3px);
}
.vmt-dest-content .info_product .text_detail a:hover {
	color: var(--accent) !important;
}

/* ---------- Article (text placed straight in a column: headings, paragraphs, lists, captioned images) ---------- */
.vmt-dest-content .col-inner > :where(h2, h3, h4, h5, p, ul, ol, blockquote, .wp-caption, figure, .wpcf7, .vmt-dest-table, .section-title) {
	max-width: 820px;
	margin-right: auto;
	margin-left: auto;
}
.vmt-dest-content .col-inner > :where(h2, h3, h4) {
	color: var(--ink);
	font-family: var(--serif);
	font-weight: 600;
	text-wrap: balance;
}
.vmt-dest-content .col-inner > :where(h2, h3, h4) :where(strong, b) {
	font-weight: inherit;
}
.vmt-dest-content .col-inner > h2 {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.vmt-dest-content .col-inner > h3 {
	margin-top: 2em;
	margin-bottom: 0.55em;
	font-size: clamp(21px, 2vw, 25px);
	line-height: 1.3;
}
.vmt-dest-content .col-inner > h4 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	font-family: var(--sans);
	font-size: 18px;
	line-height: 1.4;
}
.vmt-dest-content .col-inner > :where(h2, h3, h4):first-child {
	margin-top: 0;
}
.vmt-dest-content .col-inner > :where(p, ul, ol) {
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.75;
	text-wrap: pretty;
}
.vmt-dest-content .col-inner > :where(p, ul, ol) :where(strong, b) {
	color: var(--ink);
	font-weight: 600;
}
.vmt-dest-content .col-inner > :where(p, ul, ol) a[href] {
	color: var(--accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.vmt-dest-content .col-inner > :where(p, ul, ol) a[href]:hover {
	color: var(--accent);
}
.vmt-dest-content .col-inner > :where(ul, ol) {
	padding-left: 0;
}
.vmt-dest-content .col-inner > ul > li {
	position: relative;
	margin-left: 0;
	padding-left: 1.6em;
	list-style: none;
}
.vmt-dest-content .col-inner > ul > li + li {
	margin-top: 0.5em;
}
.vmt-dest-content .col-inner > ul > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0.3em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}
/* Alignment: body text justified from 768px, left below, unless the editor set centre/right. */
.vmt-dest-content .col-inner > :where(p, ul, ol) :where(li),
.vmt-dest-content .col-inner > p {
	text-align: left;
}
@media (min-width: 768px) {
	.vmt-dest-content .col-inner > :where(p, ul, ol) :where(li),
	.vmt-dest-content .col-inner > p {
		text-align: justify;
		text-align-last: left;
	}
}
.vmt-dest-content .col-inner > .vmt-ta-center {
	text-align: center;
	text-align-last: center;
}
/* Images: [caption] figures carry an inline pixel width from WordPress; let them follow the column. */
.vmt-dest-content .col-inner > .wp-caption {
	width: auto !important;
	margin-top: 2em;
	margin-bottom: 2em;
}
.vmt-dest-content .col-inner > .wp-caption img,
.vmt-dest-content .col-inner > p > img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
/* Captions are always centred under their image (2027 rule, whatever the editor set) and use --ink-2:
   --ink-3 is only 3.7:1 at this size. */
.vmt-dest-content .col-inner > .wp-caption .wp-caption-text {
	margin-top: 12px;
	padding: 0;
	background: none;
	color: var(--ink-2);
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
	text-align: center;
	text-align-last: center;
}

/* ---------- Schedule (TablePress, wrapped in .vmt-dest-table by destination.php) ---------- */
.vmt-dest-content .vmt-dest-table {
	margin-top: 24px;
	margin-bottom: 24px;
	overflow-x: auto;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overscroll-behavior-x: contain;
}
.vmt-dest-content .col-inner > .vmt-dest-table {
	max-width: none;
}
/* The line staff write right under a schedule ("Hoặc để lại thông tin bên dưới…") reads as a note to the table:
   centred and a size smaller, an exception to the justified body text (approved). */
.vmt-dest-content .col-inner > .vmt-dest-table + p {
	margin-top: 16px;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	text-align-last: center;
	text-wrap: balance;
}
.vmt-dest-content .vmt-dest-table .tablepress {
	min-width: 760px;
	margin: 0;
	border-collapse: collapse;
	font-size: 14.5px;
}
.vmt-dest-content .vmt-dest-table .tablepress :is(th, td) {
	height: auto !important;
	padding: 12px 14px !important;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	font-weight: 400; /* style.css bolds .table-lkh .column-5, which is the date column in most tables */
	text-align: center;
	vertical-align: middle;
}
/* STT (row numbers) says nothing a visitor needs; hidden, not removed, see vmt_dest27_schedule_classes(). */
.vmt-dest-content .vmt-dest-table--numbered .tablepress .column-1 {
	display: none;
}
.vmt-dest-content .vmt-dest-table .tablepress thead th {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	border-bottom: 0;
	background: var(--ink) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
}
.vmt-dest-content .vmt-dest-table .tablepress thead .vmt-c-light {
	color: #fff;
}
/* Almost every cell arrives bold from Excel; the weight follows the column instead (tour 600, price 700, rest regular). */
.vmt-dest-content .vmt-dest-table .tablepress td :is(strong, b) {
	font-weight: inherit;
}
/* Each tour is a group of rows starting with the row that has the STT cell (merged over the tour's dates, or a single
   row for a one-date tour); a stronger line marks where the next tour starts. */
.vmt-dest-content .vmt-dest-table .tablepress tbody tr:has(> td.column-1):not(:first-child) > td {
	border-top: 1px solid rgba(35, 32, 29, 0.22);
}
.vmt-dest-content .vmt-dest-table .tablepress td.column-2 {
	color: var(--ink);
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
}
.vmt-dest-content .vmt-dest-table .tablepress td.column-2 a {
	color: inherit;
	text-decoration: none;
}
.vmt-dest-content .vmt-dest-table .tablepress td.column-2 a:hover {
	color: var(--accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vmt-dest-content .vmt-dest-table .tablepress :is(td.column-4, td.column-5) {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* TablePress "Chỉnh sửa" link, shown to logged-in staff only, in the table caption. */
.vmt-dest-content .vmt-dest-table .tablepress caption {
	padding: 8px 14px;
	caption-side: bottom;
	font-size: 13px;
	text-align: center;
	white-space: nowrap;
}
/* The price column is 5 in the US table and 4 in the others (destination.php reads it from the header row). */
.vmt-dest-content .vmt-dest-table--price-4 .tablepress td.column-4,
.vmt-dest-content .vmt-dest-table--price-5 .tablepress td.column-5 {
	font-weight: 700;
}

/* Phones (B): a schedule becomes one card per tour (name, duration, then one "date | price" line per departure).
   Used as is when JavaScript is off; destination-2027.js normally replaces it with the folded list below (C). */
@media (max-width: 767px) {
	.vmt-dest-content .vmt-dest-table--schedule {
		overflow: visible;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress,
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody {
		display: block;
		min-width: 0;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress thead {
		display: none;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress caption {
		display: block;
		padding: 0 0 8px;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody tr {
		display: grid;
		grid-auto-flow: row dense;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 0 16px;
		padding: 9px 18px;
		border-right: 1px solid var(--line);
		border-left: 1px solid var(--line);
		background: var(--surface);
		box-shadow: inset 0 1px 0 var(--line);
	}
	/* Rows fully covered by merged cells (some Canada departures span several rows) hold nothing. */
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody tr:not(:has(> td)) {
		display: none;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody tr:has(> td.column-1) {
		margin-top: 14px;
		padding-top: 18px;
		border-top: 1px solid var(--line);
		border-radius: var(--radius) var(--radius) 0 0;
		box-shadow: none;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody tr:first-child {
		margin-top: 0;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody tr:is(:last-child, :has(+ tr > td.column-1)) {
		padding-bottom: 16px;
		border-bottom: 1px solid var(--line);
		border-radius: 0 0 var(--radius) var(--radius);
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress tbody tr:has(> td.column-1):is(:last-child, :has(+ tr > td.column-1)) {
		border-radius: var(--radius);
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		text-align: left;
		white-space: normal;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress td.column-1 {
		display: none;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress td.column-2 {
		grid-column: 1 / -1;
		font-size: 15.5px;
		line-height: 1.4;
	}
	.vmt-dest-content .vmt-dest-table--schedule .tablepress td.column-3 {
		grid-column: 1 / -1;
		margin: 4px 0 8px;
		padding-bottom: 10px !important;
		border-bottom: 1px solid var(--line) !important;
		color: var(--ink-3);
		font-size: 13.5px;
	}
	.vmt-dest-content .vmt-dest-table--price-4 .tablepress td.column-4,
	.vmt-dest-content .vmt-dest-table--price-5 .tablepress td.column-5 {
		grid-column: 2;
		text-align: right;
		white-space: nowrap;
	}
	.vmt-dest-content .vmt-dest-table--price-4 .tablepress td.column-5,
	.vmt-dest-content .vmt-dest-table--price-5 .tablepress td.column-4 {
		grid-column: 1;
	}
}

/* Phones (C): folded list built by destination-2027.js from the same table, one <details> per tour. */
.vmt-dest-content .vmt-sched {
	display: none;
}
@media (max-width: 767px) {
	.vmt-dest-content .vmt-dest-table--schedule.is-folded .tablepress {
		display: none;
	}
	.vmt-dest-content .vmt-dest-table--schedule.is-folded .vmt-sched {
		display: grid;
		gap: 12px;
	}
}
.vmt-dest-content .vmt-sched-item {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: box-shadow 0.25s var(--ease);
}
.vmt-dest-content .vmt-sched-item[open] {
	box-shadow: var(--shadow-sm);
}
.vmt-dest-content .vmt-sched-item summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	padding: 16px 18px;
	list-style: none;
	cursor: pointer;
}
.vmt-dest-content .vmt-sched-item summary::-webkit-details-marker {
	display: none;
}
.vmt-dest-content .vmt-sched-item summary:hover .vmt-sched-chevron,
.vmt-dest-content .vmt-sched-item[open] .vmt-sched-chevron {
	background: var(--accent-soft);
}
.vmt-dest-content .vmt-sched-item summary:active .vmt-sched-chevron {
	transform: scale(0.92);
}
.vmt-dest-content .vmt-sched-item[open] summary:active .vmt-sched-chevron {
	transform: rotate(180deg) scale(0.92);
}
.vmt-dest-content .vmt-sched-item summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}
.vmt-dest-content .vmt-sched-name {
	color: var(--ink);
	font-family: var(--serif);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.35;
}
.vmt-dest-content .vmt-sched-route {
	grid-column: 1;
	color: var(--ink-3);
	font-size: 13px;
	line-height: 1.4;
}
.vmt-dest-content .vmt-sched-chevron {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tint);
	transition:
		transform 0.38s var(--ease),
		background-color 0.25s;
}
.vmt-dest-content .vmt-sched-chevron::before {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--ink-2);
	-webkit-mask: var(--vmt-icon-caret) center / contain no-repeat;
	mask: var(--vmt-icon-caret) center / contain no-repeat;
}
.vmt-dest-content .vmt-sched-item[open] .vmt-sched-chevron {
	transform: rotate(180deg);
}
/* While the body slides closed the item is still [open]; the chevron and shadow already go back. */
.vmt-dest-content .vmt-sched-item.is-closing .vmt-sched-chevron {
	background: var(--tint);
	transform: none;
}
.vmt-dest-content .vmt-sched-item.is-closing {
	box-shadow: none;
}
.vmt-dest-content .vmt-sched-meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	color: var(--ink-2);
	font-size: 13.5px;
}
.vmt-dest-content .vmt-sched-facts {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.vmt-dest-content .vmt-sched-facts::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: var(--ink-3);
	-webkit-mask: var(--vmt-icon-clock) center / contain no-repeat;
	mask: var(--vmt-icon-clock) center / contain no-repeat;
}
.vmt-dest-content .vmt-sched-from {
	color: var(--ink-3);
	white-space: nowrap;
}
/* Tour prices in sale red, as on the 2027 homepage. */
.vmt-dest-content .vmt-sched-from strong {
	color: #ff0000;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.vmt-dest-content .vmt-sched-dates {
	margin: 0;
	padding: 2px 18px 6px;
	border-top: 1px solid var(--line);
	list-style: none;
}
.vmt-dest-content .vmt-sched-dates li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}
.vmt-dest-content .vmt-sched-dates li + li {
	border-top: 1px solid var(--line);
}
.vmt-dest-content .vmt-sched-date {
	color: var(--ink);
}
.vmt-dest-content .vmt-sched-price {
	color: #ff0000;
	font-weight: 700;
	white-space: nowrap;
}
.vmt-dest-content .vmt-sched-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 18px 16px;
	padding: 11px 0;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-size: 14.5px;
	font-weight: 600;
}
.vmt-dest-content .vmt-sched-link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--vmt-icon-arrow) center / contain no-repeat;
	mask: var(--vmt-icon-arrow) center / contain no-repeat;
}
.vmt-dest-content .vmt-sched-link:hover {
	color: var(--accent);
}

/* ---------- Consultation form (Contact Form 7 in the content) ---------- */
/* Contact Form 7's own stylesheet is switched off site-wide (functions.php), so its hidden fields need hiding here. */
.vmt-dest-content .wpcf7 .hidden-fields-container {
	display: none;
}
.vmt-dest-content .col-inner > .wpcf7 {
	max-width: 560px;
	padding: clamp(20px, 3vw, 32px);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.vmt-dest-content .wpcf7 p {
	margin-bottom: 12px;
}
.vmt-dest-content .wpcf7 .wpcf7-form-control:is(.wpcf7-text, .wpcf7-textarea, .wpcf7-select) {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid rgba(35, 32, 29, 0.18);
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: none;
	color: var(--ink);
	font-size: 15.5px;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.vmt-dest-content .wpcf7 .wpcf7-textarea {
	height: auto;
	min-height: 120px;
	padding-top: 12px;
}
.vmt-dest-content .wpcf7 .wpcf7-form-control::placeholder {
	color: var(--ink-3);
	opacity: 1;
}
.vmt-dest-content .wpcf7 .wpcf7-form-control:is(.wpcf7-text, .wpcf7-textarea, .wpcf7-select):focus {
	border-color: var(--accent);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(255, 68, 11, 0.16);
}
.vmt-dest-content .wpcf7 .wpcf7-submit {
	width: 100%;
	height: 50px;
	margin: 4px 0 0;
	border: 0;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition:
		background 0.25s,
		transform 0.25s var(--ease);
}
.vmt-dest-content .wpcf7 .wpcf7-submit:hover {
	background: var(--accent-strong);
}
.vmt-dest-content .wpcf7 .wpcf7-submit:active {
	transform: translateY(1px) scale(0.99);
}

/* ---------- Small screens ---------- */
@media (max-width: 549px) {
	.vmt-dest-content .col-inner > :where(p, ul, ol) {
		font-size: 16.5px;
	}
	.vmt-dest-content .box:has(.ux-timer) .box-text {
		padding: 20px 18px 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vmt-dest-content .box,
	.vmt-dest-content .box-image img,
	.vmt-dest-content .text_detail a::after,
	.vmt-dest-content .button {
		transition: none;
	}
}