/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {



	/* "Khám phá theo sở thích của bạn" hidden entirely on mobile — its
	   Tour/Vé/Khách Sạn cards now lead their own homepage row instead
	   (.product-card-lead above), so this whole section is redundant
	   there. See knt_store_shortcode_discover()'s
	   docblock (inc/shortcodes.php) for the accepted Dịch Vụ/transfer
	   trade-off. */
	.discover-section {
		display: none;
	}






	/* Same grid min-width issue as .guide-main: .shop-main is a grid item of
	   .shop-layout's single 1fr column, so its default min-width:auto still
	   sizes it (and the 1fr track) to its content's min-content width.
	   .shop-toolbar-controls's own overflow-x:auto lower down breaks the
	   chain for ITS OWN box, but that alone isn't enough — .shop-main's
	   min-content still bubbles up through it and forces the whole column
	   (and document body) 12-30px wider than the viewport (e.g.
	   khach-san.html's two-select toolbar). min-width:0 here is the actual
	   fix; keep it even though .shop-toolbar-controls also has its own. */
	.shop-main {
		min-width: 0;
	}


	.shop-sidebar.is-open {
		transform: translateY(0);
	}


	.shop-filter-toggle .icon {
		width: 15px;
		height: 15px;
	}


	.shop-filter-close .bar {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 2px;
		background: var(--color-text);
	}

	.shop-filter-close .bar:first-child {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.shop-filter-close .bar:last-child {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	body.shop-filter-open {
		overflow: hidden;
	}





	/* Mobile-only swap: sidebar's per-package quantity/total goes away (the
	   sidebar isn't sticky here any more, and it's the same reason the
	   per-package "Chọn" bottom sheet exists at all) and the sheet's own
	   trigger/tab come back. Opposite of the desktop-default rules near
	   .ticket-package-choose-btn above. */
	.booking-card-package-tiers {
		display: none;
	}



	/* Same swap, one level up: when packages exist the WHOLE sidebar card
	   goes away on mobile — it otherwise renders as a disconnected
	   price/date/CTA block at the bottom of the page, below
	   the package list whose own "Chọn" sheet already carries all of that
	   (including its own date field, added alongside the qty steppers).
	   Desktop is untouched — .booking-card-packages has no special rule
	   above 900px, so it stays the only picker there, same as before. */
	.booking-card-packages {
		display: none;
	}

	/* The rule above empties .tour-sidebar's content, but .tour-sidebar
	   itself is still a real grid row in .tour-layout — its 48px `gap`
	   (main.css) stays reserved between .tour-main and this now-empty row
	   even at 0 height, showing up as a big dead patch of white space right
	   below whatever the last content section is. Drop the whole row from
	   the grid instead of just emptying it — :has() already
	   used elsewhere in this file (.ticket-package-card) for the same
	   "style a parent by its child" need. */
	.tour-sidebar:has(.booking-card-packages) {
		display: none;
	}









	/* .hero-search-float-wrap's negative margin-top (desktop: pulls the card up
	   over the hero photo's bottom edge, where .shop-hero-badge floats absolute
	   over the photo too) instead overlapped the now-static, in-flow badge above
	   once .shop-hero-badge collapsed to static at this breakpoint — the badge's
	   own margin-bottom already provides the gap, so cancel the pull-up here.
	   Higher specificity than the generic .hero-search-float-wrap rule below (and
	   the ≤782px one), so this wins at every width the badge is static. Scoped to
	   .shop-hero specifically so the homepage hero (.hero-photo + .hero-search-
	   float-wrap, unaffected) isn't touched. */
	.shop-hero + .hero-search-float-wrap {
		margin-top: 0;
	}








	/* Card-tile redesign — was a plain icon+text horizontal row that reads
	   as sparse/spread out once it collapses to 1-2 columns on mobile; now a
	   compact colorful tile per badge (icon in a tinted circle on top,
	   title, desc — stacked vertically), matching the reference. Desktop
	   keeps the original horizontal row untouched — this is scoped inside
	   this ≤900px block only. 4 pastel tones cycle by position;
	   khach-san.html's 3-badge strip (#khach-san-trust, single column
	   above) just never reaches the 4th. */
	.trust-badges-grid .trust-badge {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
		border-radius: var(--radius-lg);
		background: #eaf3fb;
	}

	.trust-badges-grid .trust-badge:nth-child(4n+2) {
		background: #e7f7ee;
	}

	.trust-badges-grid .trust-badge:nth-child(4n+3) {
		background: #fdf2e3;
	}

	.trust-badges-grid .trust-badge:nth-child(4n+4) {
		background: #efecfb;
	}

	.trust-badges-grid .trust-badge-icon {
		width: 52px;
		height: 52px;
		background: rgba(255, 255, 255, 0.65);
		color: #2f7fd1;
	}

	.trust-badges-grid .trust-badge:nth-child(4n+2) .trust-badge-icon {
		color: #1fa971;
	}

	.trust-badges-grid .trust-badge:nth-child(4n+3) .trust-badge-icon {
		color: #e0982a;
	}

	.trust-badges-grid .trust-badge:nth-child(4n+4) .trust-badge-icon {
		color: #7a63d1;
	}

	.trust-badges-grid .trust-badge-icon .icon {
		width: 26px;
		height: 26px;
	}

	.trust-badges-grid .trust-badge strong {
		font-size: 0.9375rem;
	}

	.trust-badges-grid .trust-badge p {
		font-size: 0.8125rem;
	}

}

/* Tablet range only (601-900px) — the native flex+scroll-snap carousel
   still runs here (nav arrows visible down to 900px would be cramped, so
   .products-nav is hidden by the ≤900px block above regardless, but the
   row is still a plain touch-scrollable strip, not the JS drag carousel
   below, which only activates ≤600px). One card fills ~60% of the row,
   next one peeking, matching the same full-bleed + scroll-padding
   technique as .discover-grid's ≤600px rule. Scoped with a min-width so
   it does NOT reach true mobile widths — a "flex ... !important" here
   would otherwise permanently block kntInitSwipeCarousel() (main.js)
   from setting each slide's width via inline style below 600px, since an
   author !important stylesheet rule always wins over an inline style,
   even one set by JS after the fact. */
@media (max-width: 900px) and (min-width: 601px) {

	ul.products.products-scroll::before {
		content: "";
		display: block !important;
		flex: 0 0 20px;
	}

}

/* Custom drag/momentum center-mode carousel (kntInitSwipeCarousel(),
   main.js) replaces the native flex+scroll-snap system above for these
   3 homepage rows at true mobile widths — the same treatment already used
   for #goi-ve's package cards and .tour-gallery's photo strip.
   ul.products.products-scroll becomes a plain fixed
   viewport — JS inserts its own `.knt-swipe-track` child and drives
   everything via transform: translateX(), so none of the scroll-snap/
   scroll-padding/spacer machinery in the tablet-only block above is
   relevant here (nor even reachable — that block is scoped to
   min-width:601px specifically so it can't fight the JS's own inline
   flex-width here). This also sidesteps the whole class of "edge-card
   centering" bugs that machinery existed for in the first place: the
   JS's targetX() can freely translate the track into negative/
   overflowing positions to center the very first or last slide, which a
   native scrollLeft (never negative) fundamentally can't do. See
   kntInitSwipeCarousel()'s own comment in main.js for the full drag/
   velocity/easing design, and .tour-gallery's identical ≤600px rule
   further down for the same pattern already proven out there. */
@media (max-width: 600px) {

	ul.products.products-scroll::before {
		display: none !important;
	}
}

/* This ≤600px block must stay positioned after the ≤900px block above,
   which also sets `.tour-gallery { height: 320px }` (shared by every
   catalog type since the gallery unification, formerly a separate
   `.hotel-gallery` rule) — equal specificity means source order decides,
   and the narrower breakpoint doesn't automatically "win". Any FUTURE
   mobile override for `.tour-gallery` must go here too, not above the
   ≤900px block, or it'll silently lose the same way. */
@media (max-width: 600px) {


	.knt-lightbox-mobile-close {
		/* A real flex-layout child of the bar, not a separate position:fixed
		   element with a hand-picked `top` — top:50%/translateY(-50%) keeps
		   this centered against the bar's real (var(--header-height)) height
		   automatically, with nothing to recalculate if that number ever
		   changes. */
		position: absolute;
		top: 50%;
		left: 12px;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 999px;
		background: var(--color-bg-alt);
		color: var(--color-text);
		font-size: 1.75rem;
		line-height: 1;
		cursor: pointer;
	}

	.knt-lightbox-mobile-title {
		font-weight: 700;
		font-size: 1rem;
		color: var(--color-text);
	}


	/* openLightbox()'s scrollIntoView({block:'start'}) (main.js) has no idea
	   .knt-lightbox-mobile-head is sticky on top of this same scroll area —
	   without this, the tapped-open item's top edge lands flush with the
	   scrollport's own top, which is exactly where the sticky head sits,
	   so it visibly covers/crops the top slice of that photo. Same
	   fix, same reason, as .page-content's own scroll-margin-top for the
	   site's main sticky header — matches .knt-lightbox-mobile-head's own
	   fixed 56px height (above) plus a little breathing room. */
	.knt-lightbox-mobile-item {
		scroll-margin-top: 68px;
	}

	.knt-lightbox-mobile-item img,
	.knt-lightbox-mobile-item video {
		display: block;
		width: 100%;
		/* Matches the outer gallery's own mobile radius
		   (.tour-gallery-main/-thumb use var(--radius), 14px, further down
		   this same ≤600px block) instead of --radius-lg (22px). */
		border-radius: var(--radius);
	}




}

@media (max-width: 782px) {






@media (max-width: 782px) {
	.guide-teaser-desc {
		display: none;
	}
}


	.section-head-v2 .section-eyebrow {
		display: none;
	}

	.section-head-v2 .section-title + p {
		display: none;
	}

	/* With the eyebrow/description gone, the only thing competing with
	   .section-head-v2-cta for room is the title text itself — force
	   nowrap on the row (above) and let this column shrink instead of
	   pushing the CTA to its own line the way `flex-wrap: wrap` did.
	   min-width:0 is required for it to actually shrink below the
	   title's own content width; the
	   title's own font-size then comes down enough (below) that most
	   section titles fit on one line anyway, wrapping to a second line
	   in its own column rather than the CTA link ever moving. */
	.section-head-v2 > div:not(.section-head-v2-cta) {
		min-width: 0;
		flex: 1;
	}















	.main-navigation.is-open {
		transform: translateX(0);
	}


	.nav-drawer-brand {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	.nav-drawer-brand-logo {
		height: 34px;
		width: auto;
		flex-shrink: 0;
	}

	.nav-drawer-brand-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.25;
	}

	.nav-drawer-brand-name {
		font-weight: 800;
		font-size: 1rem;
		color: var(--color-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-drawer-brand-tagline {
		font-size: 0.6875rem;
		font-weight: 600;
		color: var(--color-text-light);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: var(--color-bg-alt);
		border: 0;
		cursor: pointer;
		position: relative;
	}

	.nav-close .bar {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 2px;
		background: var(--color-text);
	}

	.nav-close .bar:first-child {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.nav-close .bar:last-child {
		transform: translate(-50%, -50%) rotate(-45deg);
	}


	.nav-backdrop.is-open {
		display: block;
	}

	body.nav-open {
		overflow: hidden;
	}





	.nav-section-label:first-child {
		padding-top: 2px;
	}


	.nav-item-label {
		flex: 1;
		min-width: 0;
	}

	/* Static right-facing caret for flat items (Khách Sạn/Vé Tham Quan/
	   Xe Đưa Đón/Cẩm Nang/Liên Hệ) — same rotated-border-corner technique
	   as .menu-chevron below, just a fixed 45deg instead of a toggled
	   state, and thinner/lighter since it's not a tap target itself. */
	.nav-item-arrow {
		width: 7px;
		height: 7px;
		border-top: 1.5px solid var(--color-border);
		border-right: 1.5px solid var(--color-border);
		transform: rotate(45deg);
		flex-shrink: 0;
		margin-left: auto;
	}

	/* "Tour Phú Quốc" — the one item with a sub-menu — gets a distinct
	   tinted panel instead of the old small-caps category-label styling,
	   matching the reference screenshot's highlighted accordion row. */
	.primary-menu > li.menu-item-has-children > a {
		background: rgba(14, 124, 134, 0.08);
		border-radius: 12px;
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--color-text);
	}

	.primary-menu > li.menu-item-has-children.is-collapsed > a {
		border-radius: 12px;
	}

	.primary-menu > li.menu-item-has-children:not(.is-collapsed) > a {
		border-radius: 12px 12px 0 0;
	}


	.menu-item-has-children.is-collapsed .sub-menu {
		display: none;
	}

	.primary-menu .sub-menu li + li {
		border-top: 1px solid rgba(14, 124, 134, 0.16);
	}



	.menu-item-has-children.is-collapsed .menu-chevron {
		transform: rotate(135deg);
	}


	.nav-drawer-footer .btn {
		flex: 1;
		justify-content: center;
		padding: 10px 12px;
		font-size: 0.875rem;
	}

	/* Account has no real destination yet (see docs) — drop it from the
	   header. Wishlist stays visible here since the bottom nav (its other
	   mobile entry point) is disabled. Booking is reachable via the
	   in-page CTAs on tour/hotel/ticket pages instead of a header button. */
	.header-actions .account-link {
		display: none;
	}

	.category-nav-pills {
		padding: 10px 0;
	}

	.hero {
		padding: 40px 0 60px;
	}




	.hero-photo-actions .btn,
	.hero-photo-actions .btn-ghost-white {
		padding: 10px 16px;
		font-size: 0.875rem;
		white-space: nowrap;
	}






	.section-head-v2-cta .btn {
		width: 100%;
		text-align: center;
	}

	.hero-search {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-search-btn {
		justify-content: center;
	}




	/* NOT 14px — gap must stay equal to scroll-padding (20px, set at the
	   900px breakpoint above and not overridden here) or the "reveal a
	   blank gutter at rest" trick breaks (see that breakpoint's big
	   comment). flex-basis/margin are likewise untouched here — the 900px
	   values already scale correctly to this width. */



	.shop-toolbar-controls {
		display: flex;
		align-items: center;
		gap: 10px;
		/* Flex version of the grid min-width/min-height issue: a flex item's
		   default min-width:auto refuses to shrink below its content's
		   min-content width, so the two <select>s' combined width can
		   override this 100% and leak horizontal overflow onto the whole
		   page instead of staying inside this row's own scroll area (e.g.
		   khach-san.html's two-select toolbar). min-width:0 lets width:100% actually hold and
		   pushes the overflow into this element's own scrollbar instead. */
		width: 100%;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.shop-toolbar-controls::-webkit-scrollbar {
		display: none;
	}


	.shop-sort label {
		display: none;
	}






	/* Bottom nav intentionally disabled on mobile — stays
	   display: none from the base rule below; no longer un-hidden here.
	   .mobile-nav-item/.mobile-nav-label rules removed as dead CSS along
	   with it. body.has-mobile-nav keeps its base padding-bottom: 0, and
	   .back-to-top keeps its default 24px position — both no longer need
	   to clear a bar that isn't shown. */
}

@media (max-width: 480px) {

	/* No separate override needed here — the 782px breakpoint's
	   %-based flex-basis (exactly 2 cards filling the row) already scales
	   down correctly to this width too. */






}

/* =========================================================================
   HOMEPAGE REDESIGN
   New sections only: header utility-bar CTA/login, hero copy/script/badge,
   search-card tabs, "discover" bento grid, tour/hotel bestseller layout,
   dark travel-style row, ticket-highlight grid, journey-map section,
   stats+partners row, footer newsletter column. All new class names —
   existing shared classes (.hero-search-card, .trust-badges-grid,
   .partners-marquee, etc., reused by tour.html/khach-san.html/
   ve-tham-quan.html/dich-vu.html) are left untouched.
   ========================================================================= */

/* ---- New line icons (mask + currentColor, same technique as the rest of
   the icon system — see docs/design-system.md) ---- */
.icon-bed,
.icon-palm,
.icon-family,
.icon-diving,
.icon-lotus {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon-bed {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 18v2M21 18v2'/%3E%3Cpath d='M3 12V8a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M3 18v2M21 18v2'/%3E%3Cpath d='M3 12V8a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}

.icon-palm {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V10'/%3E%3Cpath d='M12 10c-2-3-6-3-8-1 2 1 4 1 8 1z'/%3E%3Cpath d='M12 10c2-3 6-3 8-1-2 1-4 1-8 1z'/%3E%3Cpath d='M12 10c-1-3-1-6 1-8 1 2 1 5 0 8z'/%3E%3Cpath d='M12 10c1-3 3-5 5-5 0 2-2 4-5 5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V10'/%3E%3Cpath d='M12 10c-2-3-6-3-8-1 2 1 4 1 8 1z'/%3E%3Cpath d='M12 10c2-3 6-3 8-1-2 1-4 1-8 1z'/%3E%3Cpath d='M12 10c-1-3-1-6 1-8 1 2 1 5 0 8z'/%3E%3Cpath d='M12 10c1-3 3-5 5-5 0 2-2 4-5 5z'/%3E%3C/svg%3E");
}

.icon-family {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='2.2'/%3E%3Cpath d='M4 19v-2a4 4 0 0 1 4-4 4 4 0 0 1 4 4v2'/%3E%3Ccircle cx='17' cy='8' r='1.8'/%3E%3Cpath d='M14.5 19v-1.5a3 3 0 0 1 3-3 3 3 0 0 1 3 3V19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='2.2'/%3E%3Cpath d='M4 19v-2a4 4 0 0 1 4-4 4 4 0 0 1 4 4v2'/%3E%3Ccircle cx='17' cy='8' r='1.8'/%3E%3Cpath d='M14.5 19v-1.5a3 3 0 0 1 3-3 3 3 0 0 1 3 3V19'/%3E%3C/svg%3E");
}

.icon-diving {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a8 5 0 0 1 16 0c0 3-2 5-4 5h-1a2 2 0 0 1-2-2 2 2 0 0 0-2 0 2 2 0 0 1-2 2H8c-2 0-4-2-4-5z'/%3E%3Cpath d='M15 6l3-3M18 3v3h3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a8 5 0 0 1 16 0c0 3-2 5-4 5h-1a2 2 0 0 1-2-2 2 2 0 0 0-2 0 2 2 0 0 1-2 2H8c-2 0-4-2-4-5z'/%3E%3Cpath d='M15 6l3-3M18 3v3h3'/%3E%3C/svg%3E");
}

.icon-lotus {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c-4-1-6-4-6-8 3 0 5 1.5 6 4 1-2.5 3-4 6-4 0 4-2 7-6 8z'/%3E%3Cpath d='M12 12c0-3 1-6 3-8-3 0-5 2-5 5M12 12c0-3-1-6-3-8 3 0 5 2 5 5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c-4-1-6-4-6-8 3 0 5 1.5 6 4 1-2.5 3-4 6-4 0 4-2 7-6 8z'/%3E%3Cpath d='M12 12c0-3 1-6 3-8-3 0-5 2-5 5M12 12c0-3-1-6-3-8 3 0 5 2 5 5'/%3E%3C/svg%3E");
}

/* Simple right-pointing play triangle inside a translucent circle — CSS
   border-triangle trick (design-system.md convention for simple glyphs),
   not an emoji ▶ or a new SVG mask. Used in the hero's "Xem video" ghost
   button only. */
.icon-play-tri {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	flex-shrink: 0;
}

.icon-play-tri::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid #fff;
	margin-left: 2px;
}

/* ---- Reusable "eyebrow with a short underline accent" — the mockup uses
   this on every new section head (discover/travel-style/tickets/journey/
   hotel), on both light and dark backgrounds. Modifier on the existing
   .section-eyebrow class, not a change to it, so every OTHER page's plain
   eyebrow (no underline) is unaffected. ---- */
.section-eyebrow--underline {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 14px;
}

.section-eyebrow--underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent);
}

.section-eyebrow--underline.is-on-dark {
	color: #ffd699;
}

/* Decorative handwritten-style accents (hero script, discover/journey-map
   overlay text) — Dancing Script loaded alongside Inter in index.html's
   <head>. */
.knt-script {
	font-family: 'Dancing Script', cursive;
	line-height: 1.25;
}

/* =========================================================
   Trust badges — shared across the homepage and archive-knt_hotel.php's
   own trust strip, so this stays always-loaded rather than gated to
   pages/home.css's per-page-type condition.
   ========================================================= */
.trust-badges {
	padding: 50px 0;
	background: var(--color-bg-alt);
}

/* Homepage-only override: this trust-badges strip sits directly below
   #hotels, which is itself .section-alt (var(--color-bg-alt)) — sharing
   the same grey here made the two sections blend into one block with no
   visible boundary. Scoped by id (same pattern as #khach-san-trust's own
   grid-column override just below) rather than editing the shared rule,
   since khach-san.html's own .trust-badges strip correctly follows a
   plain-white content area there and still wants the grey. */
#home-trust-badges {
	background: var(--color-bg);
}

.trust-badges-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.trust-badges-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 782px) {
	/* Stays 2 columns (was 1fr) — the redesigned colorful card style (see
	   the trust-badge rules near .trust-badge-icon) reads as "spread
	   out"/sparse as a full-width single column; a 2x2 tile grid holds up
	   better at this width. */
	.trust-badges-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* khach-san.html's bottom strip only has 3 badges, not the homepage's 4 —
   scoped by id rather than editing the shared rule above. A fixed-column
   grid must match its item count exactly or the last item orphans with
   empty space beside it. */
#khach-san-trust .trust-badges-grid {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	/* 3 items in the 2-col rule above would orphan the 3rd alone in its own
	   row, so khach-san.html's 3-badge strip drops straight to a single
	   column here instead. */
	#khach-san-trust .trust-badges-grid {
		grid-template-columns: 1fr;
	}
}

.trust-badge {
	display: flex;
	gap: 14px;
	align-items: center;
}

.trust-badge .icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.trust-badge-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.trust-badge-icon .icon {
	width: 22px;
	height: 22px;
}

.trust-badge strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1rem;
}

.trust-badge p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-light);
}