.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* =========================================================
   Generic breadcrumb — used above listing/archive pages
   (same visual pattern as .policy-breadcrumb, kept separate so
   listing pages don't depend on the policy-page component)
   ========================================================= */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin: 14px 0;
	overflow: hidden;
}

.breadcrumb a {
	color: var(--color-text-light);
	flex-shrink: 0;
}

.breadcrumb a:hover {
	color: var(--color-primary);
}

/* The "/" separators — plain <span> siblings of the links/current item,
   no class of their own — must never shrink or wrap either, or a long
   current-page title could squeeze one down to nothing before
   .breadcrumb-current's own ellipsis ever kicks in. */
.breadcrumb > span:not(.breadcrumb-current) {
	flex-shrink: 0;
}

/* Truncate with an ellipsis instead of wrapping to 2-3 lines — this is
   always the current page's own title, so it's the one breadcrumb segment
   long enough to need it; "Trang chủ"/category segments stay short and
   fully visible. min-width:0 is required for a flex item to actually
   shrink below its text's content width, or text-overflow:ellipsis never
   gets the chance to apply. */
.breadcrumb-current {
	color: var(--color-primary);
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* =========================================================
   Section shell — used site-wide (homepage sections AND
   single-knt-shell.php's "related items" section on every product-detail
   page), so this stays always-loaded rather than gated to
   pages/home.css's per-page-type condition.
   ========================================================= */
/* Homepage anchor-jump targets ("Khám phá tour" -> #tours, "Xem cẩm
   nang" -> #guide) need scroll-margin-top so the sticky site-header
   doesn't cover the top of whichever section the browser scrolls to
   (search this file for --header-height). */
.home-section {
	padding: 56px 0;
	scroll-margin-top: var(--header-height, 117px);
}
@media (max-width: 782px) {
	/* 28px top/bottom (56px between adjacent sections) matches the
	   "app-like, not a scaled-down desktop site" spacing used throughout
	   the mobile layout. */
	.home-section {
		padding: 28px 0;
	}
}

.section-alt {
	background: var(--color-bg-alt);
}

/* =========================================================
   Shop hero (photo banner + floating badge). Same photo/gradient
   technique as .hero-photo, just shorter, plus a corner info badge (and,
   on tour.html/template-lien-he.php, a row of feature callouts via
   .shop-hero-features). Used by the 4 catalog archives (tour/ticket/
   transfer/hotel — pages/catalog.css's own gated load), but ALSO by
   template-lien-he.php, template-cam-nang.php, and category.php — none of
   which enqueue pages/catalog.css — so this stays always-loaded here
   rather than gated to one page type's own CSS file (same reasoning as
   .home-section above).
   ========================================================= */
.shop-hero {
	position: relative;
	min-height: 340px;
	color: #fff;
	overflow: hidden;
	background-color: var(--color-primary-dark);
}

.shop-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.shop-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 20, 23, 0.25) 0%, rgba(9, 20, 23, 0.78) 100%);
}

.shop-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 340px;
	/* Longhand — same `padding: Ta 0 Tb` trap as .shop-layout. This
	   element also carries the .container class in markup
	   (tour/khach-san/ve-tham-quan/dich-vu/lien-he.html all use
	   `class="container shop-hero-inner"`), so a horizontal 0 here wipes out
	   .container's own `padding: 0 20px` and pins the hero title/badge/search
	   card flush against the viewport edge. */
	padding-top: 60px;
	padding-bottom: 40px;
}

.shop-hero-title {
	margin: 0 0 6px;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}
@media (max-width: 782px) {
	.shop-hero-title {
		font-size: 1.375rem;
	}
}

.shop-hero-subtitle {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.0625rem;
	/* .shop-hero-badge floats position:absolute on the right (desktop only,
	   see the breakpoint below) and isn't part of normal flow, so it never
	   pushes/wraps this text on its own — a long enough subtitle runs
	   underneath the badge's translucent glass panel instead of stopping
	   short of it. Cap the width so it always wraps clear of the badge's
	   column — a long subtitle (e.g. lien-he.html's) can otherwise reach
	   under the badge, unlike shorter subtitles on other .shop-hero pages. */
	max-width: 640px;
}
@media (max-width: 782px) {
	.shop-hero-subtitle {
		font-size: 0.875rem;
	}
}

.shop-hero-badge {
	position: absolute;
	z-index: 3;
	/* .shop-hero-inner's content (title/subtitle/features) is vertically
	   centered via flex justify-content:center — center the badge the same
	   way instead of pinning it near the top, so both sides line up. */
	top: 50%;
	transform: translateY(-50%);
	/* .shop-hero is full-bleed but the rest of the page content sits inside
	   the var(--container-width) .container — align the badge's right edge
	   to that same content edge instead of the raw viewport edge, or it
	   drifts further right than everything else on wide screens. */
	right: max(20px, calc((100% - var(--container-width)) / 2 + 20px));
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: var(--radius);
	padding: 12px 18px;
	color: #fff;
}
@media (max-width: 900px) {
	.shop-hero-badge {
		position: static;
		transform: none;
		display: inline-flex;
		margin: 0 0 16px;
	}
}
@media (max-width: 782px) {
	/* Hidden on mobile to reclaim hero height — it
	   only restates the destination name/tagline the H1 (.shop-hero-title)
	   already says just above it, so it's pure vertical cost with no new
	   info at phone widths. Overrides the ≤900px rule above that collapses
	   it to a static inline-flex pill; this block loads after that one so
	   it wins at the same specificity. */
	.shop-hero-badge {
		display: none;
	}
}

.shop-hero-badge-icon {
	flex-shrink: 0;
	display: flex;
}

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

.shop-hero-badge-title {
	font-weight: 800;
	font-size: 1rem;
}

.shop-hero-badge-sub {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.85);
}

/* Row of feature callouts along the bottom of the hero (tour.html, template-lien-he.php) */
.shop-hero-features {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* Same glass-card treatment as .shop-hero-badge, just pill-shaped and per-item */
.shop-hero-feature {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: var(--radius);
	padding: 6px 12px;
}

.shop-hero-feature .icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* =========================================================
   Generic page/post content shell — used by every non-catalog/non-home
   page type (template-chinh-sach.php, template-cam-nang.php, single.php,
   category.php, archive.php, search.php, 404.php, the default page.php
   via template-parts/content-page.php), not just the blog/guide pages —
   so this stays always-loaded rather than gated to pages/guide.css's
   per-page-type condition (moved out of there 2026-09-16 after
   template-chinh-sach.php — which never loads pages/guide.css — turned
   out to depend on it too).
   ========================================================= */
.page-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-top: 40px;
	padding-bottom: 60px;
}

body:not(.no-sidebar) .page-layout {
	grid-template-columns: 2.5fr 1fr;
}
@media (max-width: 900px) {
	body:not(.no-sidebar) .page-layout {
		grid-template-columns: 1fr;
	}
}

.page-header {
	margin-bottom: 2em;
}

.page-title {
	font-size: 2rem;
}

.page-content .entry-title {
	font-size: 2rem;
	max-width: 760px;
}

.single-post,
.page-content {
	max-width: 100%;
}

/* Offset for the sticky site-header, so a scrollIntoView/anchor jump to this
   element doesn't land underneath it. `--header-height` is set live by
   main.js (ResizeObserver on .site-header) instead of a hardcoded guess,
   since the header's rendered height varies by breakpoint/admin-bar state.
   The 117px fallback only matters for the instant before main.js runs. */
.page-content {
	scroll-margin-top: var(--header-height, 117px);
}

.entry-content {
	font-size: 1rem;
	max-width: 760px;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.4em;
}

.entry-content h2 {
	font-size: 1.5rem;
}

.entry-content h3 {
	font-size: 1.125rem;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 0.4em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 0.9375rem;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--color-border);
	padding: 10px 12px;
	text-align: left;
}

.entry-content table th {
	background: var(--color-bg-alt);
}

.legal-placeholder {
	color: var(--color-danger);
	font-style: italic;
}

.legal-updated {
	color: var(--color-text-light);
	font-size: 0.875rem;
	margin-bottom: 2em;
}

.post-thumb-full img {
	border-radius: var(--radius);
	margin-bottom: 1.5em;
}

/* Sidebar widget title + plain vertical link list — used by
   template-parts/guide-sidebar.php (pages/guide.css context) AND
   template-lien-he.php's own sidebar cards (which don't load guide.css),
   same always-loaded reasoning as the rest of this section. Only the
   base rules live here; guide.css keeps its own more specific
   `.widget-area .widget`/`.widget .btn` rules that only apply inside the
   guide-sidebar's own wrapper. */
.widget-title {
	font-size: 1.125rem;
	margin-bottom: 0.8em;
}

.widget-title .icon {
	width: 17px;
	height: 17px;
	vertical-align: -2px;
}

.widget-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.widget-list a {
	display: block;
	padding: 8px 0;
	color: var(--color-text);
	font-size: 0.9375rem;
}

.widget-list a:hover {
	color: var(--color-primary);
}

/* =========================================================
   Contact widget with social-link row (light background version of
   .footer-social-link, which assumes a dark footer bg) + bottom sidebar
   promo tile. Used by template-parts/guide-sidebar.php (Cẩm Nang/blog
   pages, which load pages/guide.css) AND template-lien-he.php (which
   doesn't) — always-loaded here for the same reason as the page/entry
   content shell above.
   ========================================================= */
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	font-size: 0.8125rem;
}

.social-link-zalo {
	background: #0068ff;
}

.social-link-whatsapp {
	background: #25d366;
}

.social-link-messenger {
	background: #6366f1;
}

.social-links-row {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

/* Bottom sidebar promo tile */
.guide-promo {
	position: relative;
	display: block;
	min-height: 160px;
	border-radius: var(--radius);
	overflow: hidden;
	color: #fff;
}

.guide-promo-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.guide-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 20, 23, 0.35) 0%, rgba(9, 20, 23, 0.85) 100%);
}

.guide-promo-body {
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.guide-promo-title {
	font-weight: 700;
	font-size: 0.9375rem;
}

.guide-promo-title strong {
	display: block;
	color: var(--color-accent-light);
	font-size: 1.0625rem;
}

.guide-promo-arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}