/* Tour 2027 – tour-detail-2027.php (every tour when VMT_TOUR27 is on), loaded after site-2027.css and blocks-2027.css.
   The tour body is GoodLayers page builder output written by staff, so .vmt-tour-body restyles its elements
   (text boxes, titles, toggle boxes, galleries) instead of using classes of its own. */

/* Anchors (tabs, "#tu-van-tour") land below the fixed header and the sticky tab bar. */
html:has(.vmt-tour) {
	scroll-padding-top: 150px;
}
html:has(.vmt-tour):not(:has(.vmt-h27-header)) {
	scroll-padding-top: 96px;
}

.vmt-tour {
	--vmt-orange: var(--accent-strong);
	--vmt-orange-large: var(--accent);
	--vmt-green: #067d2e;
	--vmt-green-large: #059134;
	--vmt-tabs-h: 56px;
	/* Where sticky parts stop: under the fixed 2027 header. Flatsome's header (VMT_SITE27_SITEWIDE off) scrolls away,
	   so they stick to the top of the window there. */
	--vmt-sticky-top: var(--header-h);
}
body:not(:has(.vmt-h27-header)) .vmt-tour {
	--vmt-sticky-top: 0px;
}
.admin-bar .vmt-tour {
	--vmt-sticky-top: calc(var(--header-h) + 32px);
}
.admin-bar:not(:has(.vmt-h27-header)) .vmt-tour {
	--vmt-sticky-top: 32px;
}
/* WordPress's admin bar is 46px tall up to 782px (the 2027 header moves down with it, see site-2027.css) and
   scrolls away with the page below 601px. */
@media (max-width: 782px) {
	.admin-bar .vmt-tour {
		--vmt-sticky-top: calc(var(--header-h) + 46px);
	}
	.admin-bar:not(:has(.vmt-h27-header)) .vmt-tour {
		--vmt-sticky-top: 46px;
	}
}
@media (max-width: 600px) {
	.admin-bar:not(:has(.vmt-h27-header)) .vmt-tour {
		--vmt-sticky-top: 0px;
	}
}

/* ---------- Hero: breadcrumb, title, facts, cover photo ---------- */
.vmt-tour-hero {
	padding-top: clamp(20px, 3vw, 36px);
}
.vmt-tour-crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--ink-3);
	font-size: 14px;
	white-space: nowrap;
}
.vmt-tour-crumbs a {
	flex: none;
	color: var(--ink-2);
	transition: color 0.2s;
}
/* Always one line: the tour name (last) is cut with "..." when the line is too long for the screen. */
.vmt-tour-crumbs [aria-current] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vmt-h27 .vmt-tour-crumbs a:hover {
	color: var(--accent-strong);
}
.vmt-tour-crumbs .vmt-h27-icon {
	flex: none;
	width: 12px;
	height: 12px;
}
/* Full container width and a little smaller, so most titles fit on one line and the cover shows on arrival. */
.vmt-h27 .vmt-tour-title {
	margin: 10px 0 18px;
	font-size: clamp(26px, 3.1vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}
.vmt-tour-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}
/* Icon tile on the left over two rows: label, then value. */
.vmt-tour-facts li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	align-content: center;
	align-items: center;
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}
.vmt-tour-facts small {
	grid-column: 2;
	align-self: end;
	color: var(--ink-3);
	font-size: 13px;
	font-weight: 500;
}
.vmt-tour-fact-value {
	grid-column: 2;
	align-self: start;
}
.vmt-tour-fact-icon {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent);
}
.vmt-tour-fact-icon .vmt-h27-icon {
	width: 22px;
	height: 22px;
}
.vmt-tour-cover {
	margin-top: clamp(20px, 2.5vw, 28px);
	overflow: hidden;
	border-radius: 24px;
	background: var(--tint);
}
/* Hero images are often banners with text in them (ACF images): shown at their own ratio, so nothing is cut off.
   Only a tall fallback (the 4:3 featured image) is trimmed, to keep the content close to the top. */
.vmt-tour-cover img {
	width: 100%;
	height: auto;
	max-height: min(560px, 62vh);
	object-fit: cover;
}

/* ---------- Layout: content + consultation card ---------- */
.vmt-tour-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 380px);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
	margin-top: clamp(28px, 4vw, 48px);
}
.vmt-tour-main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}
.vmt-tour-aside {
	position: sticky;
	top: calc(var(--vmt-sticky-top) + 24px);
	grid-column: 2;
	grid-row: 1;
}

/* ---------- Consultation card ---------- */
.vmt-tour-card {
	padding: 24px;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}
/* Same price style as the homepage tour cards: list price struck through above, sale price in red. */
.vmt-tour-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}
.vmt-tour-price-label {
	margin-bottom: 2px;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 500;
}
.vmt-tour-price del {
	color: var(--ink-3);
	font-size: 14px;
}
.vmt-tour-price strong {
	color: #ff0000;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
}
/* No price: an invitation, not a sale price, so it stays in the brand orange. */
.vmt-tour-price strong.vmt-tour-price-ask {
	color: var(--accent-strong);
	font-size: 26px;
}
.vmt-tour-price-note {
	margin-top: 6px;
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.5;
}
.vmt-tour-views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: var(--ink-3);
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.vmt-tour-views .vmt-h27-icon {
	width: 16px;
	height: 16px;
}
.vmt-tour-form {
	padding-top: 18px;
}
.vmt-tour-form-title {
	margin-bottom: 12px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
}

/* Contact Form 7 "Tư Vấn Tour" (CF7's own stylesheet is switched off site-wide). */
.vmt-tour-form .wpcf7 form > p,
.vmt-tour-form .wpcf7 label {
	display: block;
	margin: 0 0 10px;
}
.vmt-tour-form .hidden-fields-container {
	display: none;
}
.vmt-tour-form .wpcf7-form-control-wrap {
	display: block;
}
/* "form.wpcf7-form" outranks style.css, which gives every CF7 field a 2px #ff8178 bottom border. */
.vmt-tour-form form.wpcf7-form :is(input[type="text"], input[type="tel"], input[type="email"], textarea) {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(35, 32, 29, 0.18);
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: none;
	color: var(--ink);
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming into the field */
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.vmt-tour-form :is(input, textarea)::placeholder {
	color: var(--ink-3);
	opacity: 1;
}
.vmt-tour-form form.wpcf7-form :is(input[type="text"], input[type="tel"], input[type="email"], textarea):focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(255, 68, 11, 0.18);
	outline: 0;
}
.vmt-tour-form input[type="submit"] {
	width: 100%;
	height: 50px;
	margin: 4px 0 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition:
		background 0.25s,
		transform 0.25s var(--ease);
}
.vmt-tour-form input[type="submit"]:hover {
	background: var(--accent-strong);
	transform: translateY(-1px);
}
.vmt-tour-form input[type="submit"]:active {
	transform: translateY(1px) scale(0.99);
}
.vmt-tour-form .wpcf7-spinner {
	display: none;
}
.vmt-tour-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: #b42318;
	font-size: 13.5px;
}
/* CF7's stylesheet normally hides the empty message box until the form has been sent. */
.vmt-tour-form .wpcf7 form:is(.init, .resetting, .submitting) .wpcf7-response-output {
	display: none;
}
.vmt-tour-form .wpcf7-response-output {
	margin: 10px 0 0 !important;
	padding: 10px 12px !important;
	border-radius: var(--radius-sm);
	font-size: 14px;
	line-height: 1.5;
}
.vmt-tour-card-links {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}
.vmt-tour-card-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 14px;
	border-radius: var(--radius-sm);
	background: var(--tint);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	transition:
		background 0.25s,
		color 0.25s;
}
.vmt-tour-card-links a:hover {
	background: var(--accent-soft);
	color: var(--accent-strong);
}
.vmt-tour-card-links .vmt-h27-icon {
	width: 18px;
	height: 18px;
	color: var(--accent);
}
.vmt-tour-call {
	font-variant-numeric: tabular-nums;
}

/* ---------- Tab bar (built by tour-2027.js from the builder's content navigation) ----------
   Full width between the cover and the content. It sticks inside .vmt-tour-sections (content + featured tours), so
   it stays on screen down to the last tab and leaves before the footer. */
.vmt-tour-tabs {
	position: sticky;
	top: var(--vmt-sticky-top);
	z-index: 5;
	margin-top: clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--line);
	background: #fff;
}
.vmt-tour-tabs[hidden] {
	display: none;
}
.vmt-tour-tabs-list {
	position: relative;
	display: flex;
	gap: 4px;
	height: var(--vmt-tabs-h);
	overflow-x: auto;
	scrollbar-width: none;
}
.vmt-tour-tabs-list::-webkit-scrollbar {
	display: none;
}
/* Page builder sliders give their arrows a z-index: keep them (and everything else in the content) under the bar. */
.vmt-tour-layout,
.vmt-tour-related {
	isolation: isolate;
}
/* Under the bar the content starts closer: the bar already separates it from the cover. */
.vmt-tour-js .vmt-tour-layout {
	margin-top: clamp(20px, 2.5vw, 32px);
}
/* The consultation card sticks under the bar while there is one. */
.vmt-tour-js .vmt-tour-aside {
	top: calc(var(--vmt-sticky-top) + var(--vmt-tabs-h) + 24px);
}
.vmt-tour-tabs a {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	padding: 0 14px;
	color: var(--ink-2);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: color 0.2s;
}
.vmt-tour-tabs a::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: -1px;
	left: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transition: transform 0.35s var(--ease);
}
.vmt-h27 .vmt-tour-tabs a:hover,
.vmt-tour-tabs a[aria-current="true"] {
	color: var(--ink);
}
.vmt-tour-tabs a[aria-current="true"]::after {
	transform: scaleX(1);
}
/* The first label lines up with the content below. */
.vmt-tour-tabs a:first-child {
	padding-left: 0;
}
.vmt-tour-tabs a:first-child::after {
	left: 0;
}
/* The builder's own navigation is replaced by the bar above once the script has run. */
.vmt-tour-js .vmt-tour-body .tourmaster-content-navigation-item-wrap {
	display: none;
}

/* ---------- Tour body: GoodLayers page builder ---------- */
.vmt-tour-body {
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.75;
	overflow-wrap: break-word;
}
/* The builder's sections, containers and paddings collapse into the content column. */
.vmt-tour-body :is(.gdlr-core-pbf-wrapper, .gdlr-core-pbf-section) {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}
.vmt-tour-body :is(.gdlr-core-container, .gdlr-core-pbf-wrapper-container, .gdlr-core-pbf-section-container) {
	width: auto;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.vmt-tour-body .gdlr-core-pbf-background-wrap {
	display: none;
}
.vmt-tour-body .gdlr-core-item-pdlr {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
.vmt-tour-body .gdlr-core-item-pdb {
	padding-bottom: 20px !important;
}
.vmt-tour-body .gdlr-core-pbf-element {
	width: 100%;
}
/* Sections the tabs point at start a little apart. */
.vmt-tour-body .gdlr-core-pbf-wrapper[id] + .gdlr-core-pbf-wrapper[id],
.vmt-tour-body .gdlr-core-pbf-wrapper[id]:not(:first-child) {
	margin-top: clamp(28px, 4vw, 44px) !important;
}

/* Text boxes (Classic Editor HTML) */
.vmt-tour-body [style*="font-size"]:not(.gdlr-core-title-item-title) {
	font-size: inherit !important;
}
.vmt-tour-body :where(p, ul, ol, figure, blockquote, table) {
	margin: 0 0 1em;
}
.vmt-tour-body :where(p, li) {
	text-align: left;
	text-wrap: pretty;
}
@media (min-width: 768px) {
	.vmt-tour-body :where(p, li) {
		text-align: justify;
		text-align-last: left;
	}
}
.vmt-tour-body .vmt-ta-center {
	text-align: center;
	text-align-last: center;
}
.vmt-tour-body .vmt-ta-right {
	text-align: right;
	text-align-last: right;
}
.vmt-tour-body :where(h2, h3, h4, h5) {
	margin: 1.6em 0 0.6em;
	color: var(--ink);
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}
.vmt-tour-body .gdlr-core-text-box-item-content > :first-child {
	margin-top: 0;
}
.vmt-tour-body .gdlr-core-text-box-item-content > :last-child {
	margin-bottom: 0;
}
.vmt-tour-body h2 {
	font-size: clamp(25px, 2.4vw, 32px);
}
.vmt-tour-body h3 {
	font-size: clamp(20px, 1.8vw, 24px);
}
.vmt-tour-body h4 {
	font-size: 19px;
}
.vmt-tour-body :where(h2, h3, h4) :where(strong, b) {
	font-weight: inherit;
}
.vmt-tour-body :where(strong, b) {
	color: var(--ink);
	font-weight: 600;
}
.vmt-tour-body :where([class*="vmt-c-"], [style*="color"]) :where(strong, b) {
	color: inherit;
}
.vmt-tour-body .vmt-c-orange {
	color: var(--vmt-orange);
}
.vmt-tour-body .vmt-c-green {
	color: var(--vmt-green);
}
.vmt-tour-body :is(h2, h3) :is(.vmt-c-orange),
.vmt-tour-body :is(h2, h3).vmt-c-orange {
	color: var(--vmt-orange-large);
}
.vmt-tour-body :is(h2, h3) :is(.vmt-c-green),
.vmt-tour-body :is(h2, h3).vmt-c-green {
	color: var(--vmt-green-large);
}
.vmt-tour-body .vmt-c-light {
	color: inherit;
}
.vmt-tour-body a[href]:not(.gdlr-core-ilightbox, .flex-prev, .flex-next, .tourmaster-content-navigation-tab) {
	color: var(--accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.vmt-tour-body ul {
	padding: 0;
}
.vmt-tour-body ul > li {
	position: relative;
	margin-bottom: 0.45em;
	padding-left: 1.5em;
	list-style: none;
}
.vmt-tour-body ul > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0.3em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}
.vmt-tour-body ol {
	padding-left: 1.4em;
}
.vmt-tour-body ol > li {
	margin-bottom: 0.45em;
	list-style: decimal;
}
.vmt-tour-body .flexslider ul > li {
	padding: 0;
}
.vmt-tour-body .flexslider ul > li::before {
	display: none;
}
.vmt-tour-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}
.vmt-tour-body .wp-caption {
	width: auto !important;
	max-width: 100%;
	margin: 1.6em 0;
}
.vmt-tour-body .wp-caption .wp-caption-text {
	margin-top: 10px;
	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;
}
.vmt-tour-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}
.vmt-tour-body :where(th, td) {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.vmt-tour-body iframe {
	max-width: 100%;
	border: 0;
	border-radius: var(--radius);
}

/* Section titles (GoodLayers title element with an icon: "Hình ảnh", "Ghi chú"...) */
.vmt-tour-body .gdlr-core-title-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px !important;
}
.vmt-tour-body .gdlr-core-title-item-left-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 !important;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent) !important;
	font-size: 18px !important;
	float: none !important;
}
.vmt-tour-body .gdlr-core-title-item-left-icon-wrap {
	overflow: visible;
	margin: 0 !important;
}
.vmt-tour-body .gdlr-core-title-item-title {
	margin: 0 !important;
	color: var(--ink) !important;
	font-family: var(--serif) !important;
	font-size: clamp(23px, 2.2vw, 28px) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em !important;
}
.vmt-tour-body .gdlr-core-title-item-title-divider {
	display: none;
}

/* Itinerary: toggle boxes, one per day */
.vmt-tour-body .gdlr-core-toggle-box-item-tab {
	position: relative;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius);
	background: var(--surface) !important;
	transition:
		border-color 0.3s,
		box-shadow 0.3s;
}
/* The rule above outranks the shared reveal's transition (blocks-2027.css): restore it while the card is revealed,
   or the days pop in with no rise. */
.vmt-h27-js .vmt-tour-body .gdlr-core-toggle-box-item-tab[data-vmt-reveal] {
	transition:
		opacity 1s cubic-bezier(0.33, 1, 0.68, 1),
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.3s,
		box-shadow 0.3s;
}
.vmt-tour-body .gdlr-core-toggle-box-item-tab.gdlr-core-active {
	border-color: transparent !important;
	box-shadow: var(--shadow-sm);
}
.vmt-tour-body .gdlr-core-toggle-box-item-icon {
	display: none !important;
}
/* The old theme draws a dashed timeline, an orange dot per day and a peach answer background: the cards replace them
   (the title's ::before becomes the round button behind the chevron, below). */
.vmt-tour-body .gdlr-core-toggle-box-item::before {
	display: none !important;
}
.vmt-tour-body .gdlr-core-toggle-box-item-content {
	background: none !important;
}
.vmt-tour-body .gdlr-core-toggle-box-item-content-wrapper {
	margin: 0 !important;
	padding: 0 !important;
}
.vmt-tour-body .gdlr-core-toggle-box-item-title {
	position: relative;
	margin: 0 !important;
	padding: 18px 64px 18px 20px !important;
	border: 0 !important;
	background: none !important;
	color: var(--ink) !important;
	font-family: var(--sans) !important;
	font-size: 16.5px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-wrap: pretty; /* long day titles run the full card width, not balanced into two short lines */
	cursor: pointer;
}
/* Round button (same as the homepage's round arrow buttons) with a chevron (Phosphor caret-down as a mask) that
   turns up when the day is open. The !important values override the old theme's dot on this ::before. */
.vmt-tour-body .gdlr-core-toggle-box-item-title::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;
	left: auto !important;
	width: 34px !important;
	height: 34px !important;
	margin: -17px 0 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--tint) !important;
	transition: background 0.25s;
}
.vmt-tour-body .gdlr-core-toggle-box-item-title:hover::before,
.vmt-tour-body .gdlr-core-active > .gdlr-core-toggle-box-item-content-wrapper > .gdlr-core-toggle-box-item-title::before {
	background: var(--accent-soft) !important;
}
/* !important: style.css places this ::after with "h4.gdlr-core-toggle-box-item-title::after" (top: 16px). */
.vmt-tour-body .gdlr-core-toggle-box-item-title::after {
	content: "";
	position: absolute;
	top: 50% !important;
	right: 25px !important;
	width: 16px;
	height: 16px;
	margin-top: -8px !important;
	background: var(--ink-2);
	-webkit-mask: 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") center / contain no-repeat;
	mask: 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") center / contain no-repeat;
	transition:
		transform 0.35s var(--ease),
		background 0.2s;
}
.vmt-tour-body .gdlr-core-toggle-box-item-title:hover::after {
	background: var(--accent-strong);
}
.vmt-tour-body .gdlr-core-active > .gdlr-core-toggle-box-item-content-wrapper > .gdlr-core-toggle-box-item-title::after {
	background: var(--accent-strong);
	transform: rotate(180deg);
}
/* Photos inside a day card: a smaller radius than the card, so the two corners do not look doubled. */
.vmt-tour-body .gdlr-core-toggle-box-item-content img {
	border-radius: var(--radius-sm);
}
.vmt-tour-body .gdlr-core-toggle-box-item-content {
	padding: 0 20px 20px !important;
	font-size: 16.5px;
}
.vmt-tour-body .gdlr-core-toggle-box-item-content > :last-child {
	margin-bottom: 0;
}

/* Galleries (slider) */
.vmt-tour-body .gdlr-core-gallery-item .flexslider {
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--tint);
}
.vmt-tour-body .gdlr-core-gallery-item img {
	width: 100%;
	border-radius: 0;
}
/* Slides of mixed ratios would leave grey bands beside the narrower photos: every slide fills one 4:3 frame. */
.vmt-tour-body .gdlr-core-gallery-item .flexslider .slides > li {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.vmt-tour-body .gdlr-core-gallery-item .flexslider .slides > li :is(.gdlr-core-gallery-list, a) {
	height: 100%;
}
/* !important: style.css sets "#photo .gdlr-core-flexslider img" to 550px high with object-fit: contain, which is
   what letterboxed the photos. */
.vmt-tour-body .gdlr-core-gallery-item .flexslider .slides img {
	height: 100% !important;
	object-fit: cover !important;
}
/* Grid galleries: the column padding removed above is what spaced the photos, so they get a small gap back. */
.vmt-tour-body .gdlr-core-gallery-item-style-grid {
	margin: 0 -4px;
}
.vmt-tour-body .gdlr-core-gallery-item-style-grid .gdlr-core-item-list {
	padding: 4px !important;
}
.vmt-tour-body .gdlr-core-gallery-item-style-grid img {
	border-radius: var(--radius-sm);
}

/* ---------- Featured tours: Tour Master's grid, as 2027 tour cards (same look as the homepage's) ---------- */
.vmt-tour-related {
	margin-top: clamp(48px, 7vw, 96px);
	padding: clamp(48px, 7vw, 88px) 0;
	background: var(--tint);
}
.vmt-tour-related .has-block:empty {
	display: none;
}
.vmt-tour-related :is(.tourmaster-single-related-tour, .tourmaster-container) {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}
.vmt-h27 .vmt-tour-related .tourmaster-single-related-tour-title {
	margin: 0 0 clamp(24px, 3vw, 36px) !important;
	padding: 0 !important;
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
}
.vmt-tour-related .tourmaster-tour-item-holder {
	display: grid !important; /* Tour Master's stylesheet keeps it a block of floated columns */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 !important;
}
/* Clearfix pseudo-elements would become empty grid cells. */
.vmt-tour-related .tourmaster-tour-item-holder::before,
.vmt-tour-related .tourmaster-tour-item-holder::after {
	display: none !important;
}
.vmt-tour-related .gdlr-core-item-list {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}
.vmt-tour-related .tourmaster-tour-grid {
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
.vmt-tour-related .tourmaster-tour-grid-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius) !important;
	background: var(--surface) !important;
	box-shadow: var(--shadow-sm) !important;
	transition:
		transform 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}
.vmt-tour-related .tourmaster-tour-grid-inner:hover {
	box-shadow: var(--shadow) !important;
	transform: translateY(-4px);
}
.vmt-tour-related .tourmaster-tour-thumbnail {
	aspect-ratio: 4 / 3;
	margin: 0 !important;
	overflow: hidden;
}
.vmt-tour-related .tourmaster-tour-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}
.vmt-tour-related .tourmaster-tour-grid-inner:hover .tourmaster-tour-thumbnail img {
	transform: scale(1.04);
}
/* .tourmaster-tour-grid outranks style.css (7px !important). */
.vmt-tour-related .tourmaster-tour-grid .tourmaster-tour-content-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 20px !important;
}
.vmt-h27 .vmt-tour-related .tourmaster-tour-title {
	order: 0;
	margin: 0 0 12px !important;
	color: var(--ink);
	font-family: var(--serif);
	font-size: 20px !important;
	font-weight: 600;
	line-height: 1.28;
	text-wrap: pretty;
}
.vmt-h27 .vmt-tour-related .tourmaster-tour-title a:hover {
	color: var(--accent-strong);
}
.vmt-tour-related .tourmaster-tour-info-wrap {
	order: 1;
	display: grid;
	gap: 6px;
	margin: 0 0 16px !important;
}
.vmt-tour-related .tourmaster-tour-info {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.45;
}
.vmt-h27 .vmt-tour-related .tourmaster-tour-info i {
	flex: none;
	width: 16px;
	margin: 0 !important;
	color: var(--accent) !important; /* Tour Master's custom stylesheet paints them blue */
	font-size: 15px;
}
/* Price at the foot of the card, like the homepage: list price struck through above, sale price in red. */
.vmt-tour-related .tourmaster-tour-price-wrap {
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: auto 0 0 !important;
	padding: 14px 0 0 !important;
	float: none !important;
	border-top: 1px solid var(--line);
	text-align: left !important;
	font-variant-numeric: tabular-nums;
}
.vmt-tour-related .tourmaster-tour-price .tourmaster-head {
	display: none;
}
/* .vmt-h27 prefix: style.css paints these #ff6600 at the same specificity otherwise. */
.vmt-h27 .vmt-tour-related .tourmaster-tour-price-wrap :is(.tourmaster-tour-price, .tourmaster-tour-discount-price) {
	margin: 0 !important;
	color: #ff0000;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}
.vmt-h27 .vmt-tour-related .tourmaster-discount .tourmaster-tour-price,
.vmt-h27 .vmt-tour-related .tourmaster-discount .tourmaster-tour-price .tourmaster-tail {
	color: var(--ink-3);
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
}
.vmt-tour-related .tourmaster-tour-rating-empty {
	display: none;
}

/* ---------- Slider arrows (page builder galleries, featured-tour photos) ----------
   GoodLayers positions the li (top 50%, pulled up 24px for its own arrow), not the link: the li is centred on the
   button size here and the link has no offset of its own. */
.vmt-tour .flex-direction-nav li {
	top: 50% !important;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 !important;
}
.vmt-tour .flex-direction-nav a {
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94) !important;
	box-shadow: var(--shadow-sm);
	color: var(--ink) !important;
	font-size: 0;
	line-height: 1 !important;
	text-align: center !important;
	opacity: 1 !important;
	transition:
		background 0.25s,
		color 0.25s,
		transform 0.25s var(--ease);
}
.vmt-tour .flex-direction-nav a:hover {
	background: var(--accent) !important;
	color: #fff !important;
}
.vmt-tour .flex-direction-nav a:active {
	transform: scale(0.96);
}
.vmt-tour .flex-direction-nav a i {
	display: block;
	margin: 0 !important;
	font-size: 20px;
	line-height: 1;
}
.vmt-tour-related .flex-direction-nav li {
	width: 36px;
	height: 36px;
	margin-top: -18px !important;
}
.vmt-tour-related .flex-direction-nav a {
	width: 36px !important;
	height: 36px !important;
}

/* ---------- Tablets and phones: one column, the card before the content ---------- */
@media (max-width: 1023px) {
	.vmt-tour-layout {
		grid-template-columns: minmax(0, 1fr);
		max-width: calc(760px + 2 * var(--gutter));
	}
	.vmt-tour-aside,
	.vmt-tour-main {
		grid-column: 1;
		grid-row: auto;
	}
	.vmt-tour-aside {
		position: static;
	}
	.vmt-tour-hero .vmt-h27-container {
		max-width: calc(760px + 2 * var(--gutter));
	}
}
@media (max-width: 767px) {
	html:has(.vmt-tour) {
		scroll-padding-top: 136px;
	}
	/* Phones: a tinted 2-column panel, each fact as on desktop (icon left, label over value on its right). */
	.vmt-tour-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 14px;
		padding: 16px;
		border-radius: var(--radius);
		background: var(--tint);
	}
	/* Fixed icon column, so a long value never squeezes the icon; rows stay at the top when a neighbour cell is
	   taller. */
	.vmt-tour-facts li {
		grid-template-columns: 34px minmax(0, 1fr);
		align-content: start;
		column-gap: 10px;
		min-width: 0;
		font-size: 15px;
	}
	.vmt-tour-fact-icon {
		align-self: start;
		width: 34px;
		min-width: 34px;
		height: 34px;
		border-radius: var(--radius-sm);
		background: #fff;
	}
	.vmt-tour-fact-icon .vmt-h27-icon {
		flex: none;
		width: 19px;
		height: 19px;
	}
	/* Tabs scroll sideways edge to edge instead of being cut at the gutters. */
	.vmt-tour-tabs-list {
		margin-right: calc(-1 * var(--gutter));
		margin-left: calc(-1 * var(--gutter));
		padding: 0 var(--gutter);
	}
	/* Slider arrows as a pair in the bottom right corner: smaller, off the subject, under the thumb. */
	/* GoodLayers positions the li (centred on each side), not the link. */
	.vmt-tour-body .flex-direction-nav li {
		top: auto !important;
		bottom: 12px !important;
		width: 36px;
		height: 36px;
		margin: 0 !important;
	}
	.vmt-tour-body .flex-direction-nav .flex-nav-prev {
		right: 56px !important;
		left: auto !important;
	}
	.vmt-tour-body .flex-direction-nav .flex-nav-next {
		right: 12px !important;
		left: auto !important;
	}
	.vmt-tour-body .flex-direction-nav a {
		width: 36px !important;
		height: 36px !important;
		margin: 0 !important;
	}
	.vmt-tour-body .flex-direction-nav a i {
		font-size: 18px;
	}
	.vmt-tour-cover {
		border-radius: var(--radius);
	}
	.vmt-tour-cover img {
		max-height: 480px;
	}
	.vmt-tour-card {
		padding: 20px;
	}
	.vmt-tour-body {
		font-size: 16.5px;
	}
	.vmt-tour-body .gdlr-core-toggle-box-item-title {
		padding: 16px 58px 16px 16px !important;
		font-size: 16px !important;
	}
	.vmt-tour-body .gdlr-core-toggle-box-item-title::before {
		right: 12px !important;
	}
	.vmt-tour-body .gdlr-core-toggle-box-item-title::after {
		right: 21px !important;
	}
}
/* Featured tours on tablets and phones: a row to swipe through instead of cramped columns or a tall stack. */
@media (max-width: 1023px) {
	.vmt-tour-related .tourmaster-tour-item-holder {
		grid-template-columns: none;
		grid-auto-columns: 46%;
		grid-auto-flow: column;
		gap: 16px;
		margin: 0 calc(-1 * var(--gutter)) !important;
		padding: 4px var(--gutter) 12px;
		overflow-x: auto;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.vmt-tour-related .tourmaster-tour-item-holder::-webkit-scrollbar {
		display: none;
	}
	.vmt-tour-related .gdlr-core-item-list {
		scroll-snap-align: start;
	}
}
@media (max-width: 767px) {
	.vmt-tour-related .tourmaster-tour-item-holder {
		grid-auto-columns: 82%;
	}
	.vmt-tour-body .gdlr-core-toggle-box-item-content {
		padding: 0 16px 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vmt-tour-tabs a::after,
	.vmt-tour-body .gdlr-core-toggle-box-item-title::after,
	.vmt-tour-form input[type="submit"] {
		transition: none;
	}
}
