/* Lịch khởi hành 2027 – template-schedule-2027.php, after destination-2027.css (which styles the UX Builder
   content, the article text and the TablePress schedules). Here: the page title, the jump link, the tools above a
   schedule (assets/js/schedule-2027.js), past and filtered departures, the sticky table header, the closing CTA. */

.vmt-lkh-content {
	/* Sticky offset: the fixed 2027 header, plus the admin bar for logged-in staff. */
	--vmt-lkh-top: var(--header-h);
}
.admin-bar .vmt-lkh-content {
	--vmt-lkh-top: calc(var(--header-h) + 32px);
}
@media (max-width: 782px) {
	.admin-bar .vmt-lkh-content {
		--vmt-lkh-top: calc(var(--header-h) + 46px);
	}
}

/* ---------- Page title ---------- */
/* Staff type the title as a plain heading in a column (h1, or h2 on two pages): it reads as the page title. */
.vmt-lkh-content .col-inner > h1,
.vmt-lkh-content > .section:first-child .col-inner > h2:first-child {
	max-width: 900px;
	margin: 0 auto 0.5em;
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.vmt-lkh-content .col-inner > h1 :where(strong, b) {
	font-weight: inherit;
}
/* Same breathing room under the header on every page, whatever padding staff gave the first section or row
   (Flatsome prints it in a per-section <style> with an id selector, hence !important). */
.vmt-lkh-content > :is(.section, .row):first-child {
	padding-top: clamp(28px, 4vw, 48px) !important;
}

/* ---------- Jump to the schedule ---------- */
.vmt-lkh-content .vmt-lkh-jump {
	display: flex;
	justify-content: center;
	max-width: none;
	margin: 0 0 1.4em;
}
.vmt-lkh-jump a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--accent);
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.vmt-lkh-jump a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--vmt-icon-caret) center / contain no-repeat;
	mask: var(--vmt-icon-caret) center / contain no-repeat;
}
.vmt-lkh-jump a:hover {
	background: var(--accent-strong);
}
.vmt-lkh-content .vmt-dest-table--schedule {
	scroll-margin-top: calc(var(--vmt-lkh-top) + 96px); /* lands with the tools above it in view */
}

/* ---------- Tools above a schedule ---------- */
.vmt-lkh-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 24px 0 -8px;
}
.vmt-lkh-search {
	position: relative;
	flex: 1 1 260px;
	max-width: 360px;
}
.vmt-lkh-search::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 18px;
	height: 18px;
	background: var(--ink-3);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%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='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}
.vmt-lkh-content .vmt-lkh-search input[type="search"] {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 16px 0 44px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #ffffff;
	box-shadow: none;
	color: var(--ink);
	font-size: 15px;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.vmt-lkh-content .vmt-lkh-search input[type="search"]::placeholder {
	color: var(--ink-3);
}
.vmt-lkh-content .vmt-lkh-search input[type="search"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}
/* Month chips: one row that scrolls sideways on phones. */
.vmt-lkh-months {
	display: flex;
	flex: 1 1 100%;
	gap: 8px;
	order: 3;
	margin: 0 calc(-1 * var(--gutter));
	padding: 2px var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}
.vmt-lkh-months::-webkit-scrollbar {
	display: none;
}
.vmt-lkh-content .vmt-lkh-chip {
	flex: none;
	min-height: 38px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #ffffff;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.vmt-lkh-content .vmt-lkh-chip:hover {
	border-color: var(--accent);
	color: var(--accent-strong);
}
.vmt-lkh-content .vmt-lkh-chip[aria-pressed="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: #ffffff;
}
.vmt-lkh-count {
	margin: 0 0 0 auto;
	color: var(--ink-2);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.vmt-lkh-empty {
	margin: 16px 0 24px;
	padding: 24px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	color: var(--ink-2);
	text-align: center;
}
.vmt-lkh-content .vmt-lkh-empty button {
	margin: 0 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent-strong);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}
@media (min-width: 768px) {
	.vmt-lkh-months {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* ---------- Filtered and past departures ---------- */
/* Rows hidden by the filter: beats the phone card layout (display: grid in destination-2027.css). */
.vmt-lkh-content .vmt-dest-table--schedule tr[hidden],
.vmt-lkh-content .vmt-sched-item[hidden] {
	display: none !important;
}
.vmt-lkh-content .vmt-dest-table--schedule tr.vmt-lkh-dim > td:not(.column-1, .column-2, .column-3),
.vmt-lkh-content .vmt-sched-dates li.vmt-lkh-dim {
	opacity: 0.4;
}
/* Departure already gone: kept in the table (staff remove it when they update it), dimmed and marked. */
.vmt-lkh-content .vmt-dest-table--schedule td.vmt-lkh-past,
.vmt-lkh-content .vmt-sched-dates li.vmt-lkh-past {
	color: var(--ink-3) !important;
}
.vmt-lkh-content .vmt-dest-table--schedule td.vmt-lkh-past::after,
.vmt-lkh-content .vmt-sched-dates li.vmt-lkh-past .vmt-sched-date::after {
	content: "Đã khởi hành";
	display: block;
	margin-top: 2px;
	color: var(--ink-3);
	font-size: 12px;
}

/* ---------- Sticky table header (desktop: the table fits, so the wrapper need not scroll) ---------- */
/* overflow: clip keeps the rounded corners without making a scroll box, which would stop the header sticking. */
@media (min-width: 1024px) {
	.vmt-lkh-content .vmt-dest-table--schedule {
		overflow: clip;
	}
	.vmt-lkh-content .vmt-dest-table--schedule .tablepress thead th {
		position: sticky;
		top: var(--vmt-lkh-top);
		z-index: 2;
	}
}

/* ---------- Closing CTA (pages without a form of their own) ---------- */
.vmt-lkh-cta {
	background: #ffffff;
}
/* The page content above already ends with its own section padding. */
.vmt-lkh-cta > .vmt-h27-cta {
	padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vmt-lkh-jump a,
	.vmt-lkh-content .vmt-lkh-chip,
	.vmt-lkh-content .vmt-lkh-search input[type="search"] {
		transition: none;
	}
}