/* =========================================================
   Category icon grid (homepage)
   ========================================================= */







.category-icon-img .icon-boat,
.category-icon-img .icon-package,
.category-icon-img .icon-crown,
.category-icon-img .icon-ticket {
	width: 30px;
	height: 30px;
}


/* =========================================================
   Hotel list cards (horizontal layout — khach-san.html only;
   tour.html / ve-tham-quan.html keep the grid ul.products cards)
   ========================================================= */
.hotel-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
}

.hotel-list-item {
	display: grid;
	grid-template-columns: 260px 1fr 200px;
	gap: 20px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 16px;
	transition: box-shadow 0.15s ease;
}
@media (max-width: 900px) {
	.hotel-list-item {
		grid-template-columns: 1fr;
	}
}

.hotel-list-item:hover {
	box-shadow: var(--shadow-md);
}

/* Wraps the thumb link + wishlist button so the heart can pin to the top
   corner of the PHOTO (matching the reference screenshot and every other
   card's .wishlist-btn placement site-wide) instead of sitting in the
   .hotel-list-actions column — it can't be a child of .hotel-list-thumb
   itself since that's an <a>, and a <button> nested inside an <a> is
   invalid HTML. This wrap is the actual 260px grid item now; .hotel-list-
   thumb fills it. */
.hotel-list-thumb-wrap {
	position: relative;
}

.hotel-list-thumb {
	position: relative;
	display: block;
	height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
}

.hotel-list-thumb .ph-thumb {
	height: 100%;
}

/* Real featured-image <img> from the_post_thumbnail() — unlike .ph-thumb
   (dev placeholder), this had no sizing rule at all, so it rendered at its
   own intrinsic aspect ratio instead of filling the box, leaving a blank/
   mismatched gap at the bottom of the thumbnail once real photos were
   uploaded. Match .ph-thumb's fill behavior: stretch to the wrap's full
   height/width and crop via object-fit instead of letterboxing. */
.hotel-list-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 900px) {
	.hotel-list-thumb .ph-thumb,
	.hotel-list-thumb img {
		aspect-ratio: 16 / 9;
	}
}

/* Sits on the photo like .product-badge (top-left pill) — reuses the same
   .badge-teal/.badge-green/.badge-pink/.badge-purple/.badge-orange color
   variants as tour.html/ve-tham-quan.html for the loại-chỗ-nghỉ category. */
.hotel-list-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.hotel-list-desc {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	line-height: 1.6;
	margin: 2px 0 4px;
}

.hotel-list-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hotel-list-name {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--color-primary);
}

.hotel-list-name:hover {
	color: var(--color-primary-dark);
}

.hotel-list-location {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--color-text-light);
}

.hotel-list-location .icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Star CLASS + location share one line right under the hotel name — the
   real guest review score (.review-score-row) gets its own line below
   instead, see archive-knt_hotel.php. .hotel-list-location no longer
   carries its own vertical margin now that it's nested in here. */
.hotel-list-stars-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 8px;
}

.hotel-list-stars-row .star-rating .icon-star {
	width: 15px;
	height: 15px;
}

.hotel-list-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: auto;
}

.hotel-list-amenity {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--color-text-light);
}

.hotel-list-amenity .icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.hotel-list-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
}
@media (max-width: 900px) {
	.hotel-list-actions {
		flex-direction: row-reverse;
		align-items: center;
	}
}
@media (max-width: 480px) {
	.hotel-list-actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* "Từ / [giá] / phòng/đêm" 3-line price block — same label-above-price
   pattern as .product-card-price-label/.product-card-price elsewhere, just
   with an extra unit line below since a hotel-list card is wide enough to
   afford it. The unit line only ever renders next to a REAL number
   (knt_store_has_real_price(), inc/fields.php) — never bolted onto the
   "Liên hệ" placeholder, which wouldn't make sense as "Liên hệ/phòng/đêm". */
.hotel-list-price {
	text-align: right;
}
@media (max-width: 480px) {
	.hotel-list-price {
		text-align: left;
	}
}

.hotel-list-price-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-light);
}

.hotel-list-price-value {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1.25;
}

.hotel-list-price-unit {
	display: block;
	font-size: 0.75rem;
	color: var(--color-text-light);
}

.hotel-list-cta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
@media (max-width: 900px) {
	.hotel-list-cta {
		flex-direction: row;
	}
}
@media (max-width: 480px) {
	.hotel-list-cta {
		flex-direction: column;
	}
}

.hotel-list-cta .btn {
	width: 100%;
	justify-content: center;
	padding: 10px 18px;
	font-size: 0.9375rem;
}

/* =========================================================
   Catalog product cards — tour/ticket/transfer/hotel listing
   ========================================================= */
ul.products {
	max-width: var(--container-width);
	margin: 0 auto;
}

ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* WooCommerce's core stylesheet puts a float clearfix on ul.products
   (::before/::after { content:" "; display:table; }) for its classic
   float-based grid. display:table isn't display:none, so those two
   pseudo-elements are themselves rendered as grid items here — the
   ::before one lands in track 1, silently pushing every real product
   one cell to the right (most visible with few products, where the
   first cell just looks empty). Grid doesn't need a clearfix at all. */
ul.products::before,
ul.products::after {
	display: none !important;
}

/* "Related products" rows (on tour/hotel/ticket detail pages) always show
   exactly 4 items, so they keep the fixed 4-column grid instead of the
   general 3-column shop default (which leaves the 4th card orphaned alone
   on a second row). */
#tour-related ul.products,
#hotel-related ul.products,
#ticket-related ul.products {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
	ul.products,
	#tour-related ul.products,
	#hotel-related ul.products,
	#ticket-related ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 782px) {
	ul.products,
	#tour-related ul.products,
	#hotel-related ul.products,
	#ticket-related ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}
@media (max-width: 480px) {
	ul.products,
	#tour-related ul.products,
	#hotel-related ul.products,
	#ticket-related ul.products {
		grid-template-columns: 1fr;
	}
}

/* NOTE: this fixed-4-column override is currently INERT on the live site.
   knt_store_home_product_row() (functions.php) renders the homepage's
   #tours/#tickets/#hotels rows as a `ul.products.products-scroll`
   horizontal-scroll carousel of up to 12 items, and
   `ul.products.products-scroll { display:flex !important }` below always
   wins over this rule's `grid-template-columns` (that selector has equal
   specificity and comes later in the file). Left in place as harmless dead
   code — do not treat its presence as evidence the homepage rows are a
   fixed grid. */
#tours ul.products,
#tickets ul.products,
#hotels ul.products {
	grid-template-columns: repeat(4, 1fr);
}
.products-carousel {
	position: relative;
	/* Horizontal inset matching the nav buttons' overlap reach (44px button
	   at left:-18px/right:-18px spans 26px into the row — see below) so the
	   prev/next arrows sit in this blank gutter instead of stamping over
	   part of the first/last product card's photo. Symmetric on both sides
	   so the row stays centered under its own arrows even though it's now
	   inset a bit from the section title above it. */
	padding: 0 30px;
}
@media (max-width: 900px) {
	/* Full-bleed breakout (see the big comment above) — .products-carousel
	   sits inside .container's 20px side padding, and without this its
	   child ul.products.products-scroll's own scroll viewport was bounded
	   by that same 20px inset, so a card being actively dragged hit a hard
	   clip there instead of sliding smoothly to the true screen edge. */
	.products-carousel {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 0;
	}
}

ul.products.products-scroll {
	display: flex !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	scrollbar-width: none;
}
@media (max-width: 900px) and (min-width: 601px) {
	ul.products.products-scroll {
		gap: 20px;
		scroll-padding-left: 20px;
		scroll-padding-right: 20px;
	}
}
@media (max-width: 600px) {
	/* !important on display/scroll-snap-type here is required, not
	   decorative — the base ul.products.products-scroll rule (main.css,
	   near ul.products's own definition) sets `display: flex !important`
	   (needed there to beat WooCommerce's core stylesheet) and
	   `scroll-snap-type: x mandatory` carries no !important of its own but
	   is still worth pinning down explicitly. Without !important here, the
	   viewport stays `display: flex` with native scroll-snap still active
	   despite this rule "winning" on paper —
	   .knt-swipe-track's own `transform: translateX()` was computing
	   correctly (confirmed via getComputedStyle) but never actually
	   repositioning the rendered slides, because the outer element was
	   still acting as a live overflow-x:auto scroll container, not the
	   inert block-level viewport this whole design assumes JS fully owns
	   positioning for. */
	ul.products.products-scroll {
		display: block !important;
		overflow: hidden;
		overflow-x: hidden;
		scroll-snap-type: none !important;
		touch-action: pan-y;
		position: relative;
	}
}

ul.products.products-scroll::-webkit-scrollbar {
	display: none;
}

ul.products.products-scroll li.product-card {
	flex: 0 0 calc((100% - 3 * 24px) / 4);
	scroll-snap-align: start;
}
@media (max-width: 900px) and (min-width: 601px) {
	ul.products.products-scroll li.product-card {
		flex: 0 0 60% !important;
	}
}

.products-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 4;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
@media (max-width: 900px) {
	.products-nav {
		display: none;
	}
}

.products-nav:hover {
	background: var(--color-bg-alt);
}

.products-nav:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.products-nav-prev {
	left: -18px;
}

.products-nav-next {
	right: -18px;
}

.products-nav-icon {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.products-nav-icon-prev {
	border-right: 8px solid var(--color-primary-dark);
	margin-right: 2px;
}

.products-nav-icon-next {
	border-left: 8px solid var(--color-primary-dark);
	margin-left: 2px;
}

ul.products li.product-card {
	list-style: none;
	/* WooCommerce's own core stylesheet (woocommerce.css) sets float:left +
	   width:30.75% on li.product for its classic float-based 3-column grid.
	   That still applies here because our card also carries the "product"
	   class WC targets — without this reset, floated li's use shrink-to-fit
	   sizing and ignore our CSS Grid's 1fr track width entirely, so cards
	   render at ~30% width regardless of how many items are in the row
	   (most visible with 1-2 products, where the card floats tiny on the
	   left with a large empty gap beside it). WooCommerce's selector
	   (.woocommerce ul.products li.product) has 3 classes vs our 2, so it
	   wins the cascade on specificity alone regardless of load order —
	   !important is required here, not optional. */
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.product-card-inner {
	position: relative;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.product-card-inner:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.product-card-thumb {
	position: relative;
	display: block;
}

.product-card-thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Placeholder thumbs for local dev before real photos are uploaded */
.ph-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: flex-end;
	padding: 10px;
	color: rgba(255, 255, 255, 0.95);
	font-size: 0.75rem;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.ph-1 { background: linear-gradient(135deg, #0e7c86, #2fb6c2); }
.ph-2 { background: linear-gradient(135deg, #f7931e, #ffb95c); }
.ph-3 { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.ph-4 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.ph-5 { background: linear-gradient(135deg, #059669, #34d399); }
.ph-6 { background: linear-gradient(135deg, #d92d20, #f87171); }
.ph-7 { background: linear-gradient(135deg, #0891b2, #67e8f9); }
.ph-8 { background: linear-gradient(135deg, #ca8a04, #fde047); color: #1f2937; text-shadow: none; }

.product-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	z-index: 2;
}

.badge-sale {
	background: var(--color-danger);
	color: #fff;
}

.badge-featured {
	background: #fff;
	color: var(--color-primary-dark);
}

/* Solid category-color badges (tour.html) — reuse the same hues already
   established by the .ph-1–.ph-8 placeholder gradients, just as flat fills. */
.badge-teal {
	background: var(--color-primary);
	color: #fff;
}

.badge-green {
	background: #059669;
	color: #fff;
}

.badge-pink {
	background: #db2777;
	color: #fff;
}

.badge-purple {
	background: #7c3aed;
	color: #fff;
}

.badge-orange {
	background: var(--color-accent);
	color: #1f2937;
}

.badge-blue {
	background: #2563eb;
	color: #fff;
}

.wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.product-card-body {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.product-card-title {
	color: var(--color-text);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--color-text-light);
}

.stars {
	display: inline-flex;
	gap: 1px;
	color: #f5a623;
	font-size: 0.875rem;
}

.star::before {
	content: "\2605";
}

.star-empty::before {
	color: var(--color-border);
}

.star-half {
	position: relative;
	color: var(--color-border);
}

.star-half::after {
	content: "\2605";
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	color: #f5a623;
}

.no-rating {
	font-size: 0.75rem;
	color: var(--color-text-light);
}

/* Real customer review score (knt_store_render_review_badge(), inc/fields.php)
   — a Booking.com-style colored number badge + word label + count.
   Renders nothing at all when a listing has no real score set, so it never
   collides with .no-rating/.product-card-meta above; a card either shows
   this row OR falls through to whatever it already showed. */
.review-score-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 8px;
}

.review-score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 28px;
	padding: 0 6px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 800;
	font-size: 0.875rem;
	border-radius: 6px;
	flex-shrink: 0;
}

.review-score-info {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.review-score-label {
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--color-text);
}

.review-score-count {
	font-size: 0.75rem;
	color: var(--color-text-light);
}

/* Icon + text meta list — richer alternative to .product-card-rating/.no-rating
   for cards that have real schedule/duration/group-type descriptors (tour.html) */
/* min-height reserves room for 2 .product-card-meta-item rows (~20.8px
   each + the 6px gap between them) even when a card only has 1 — cards
   share a horizontal-scroll row with default align-items:stretch, so
   every card in the row is already forced to the tallest card's height
   regardless; the real bug was .product-card-price-row's margin-top:auto
   (further down) then pushing the price all the way to the bottom of
   that stretched box, turning "one card has less meta" into a large,
   very visible empty gap between the meta line and the price on cards
   whose meta list is shorter (e.g. some tickets show a "X ngày" validity
   line and some don't). Reserving the 2-row
   height here means every card's own meta block is already tall enough
   before stretch ever needs to kick in, so the gap lands evenly (mostly
   invisible) instead of concentrating between two specific lines. */
.product-card-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 47px;
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin: 2px 0 4px;
}

.product-card-meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.product-card-meta-item .icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.product-card-price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.product-card-price {
	color: var(--color-accent);
	font-weight: 800;
	font-size: 1.125rem;
}

.product-card-price-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--color-text-light);
	margin-bottom: 2px;
}

.product-card-price del {
	color: var(--color-text-light);
	font-weight: 400;
	font-size: 0.875rem;
	margin-right: 6px;
}

.product-card-price ins {
	text-decoration: none;
}

.product-card-btn.button {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 900;
}

.product-card-btn.button:hover {
	background: var(--color-accent-light);
}

/* Mobile-only lead/"Xem thêm" cards prepended/appended to each homepage
   featured row (knt_store_home_product_row(), functions.php) — each row
   opens with a card in the [knt_discover] style (the photo fills the
   whole card, text overlaid on a gradient, not a separate white body like
   a normal .product-card) and closes with a plain "Xem thêm" card, both
   the SAME SIZE as the real product cards beside them. Both are real
   `<li class="product-card ...">` so they inherit the exact same
   flex-basis as their siblings (ul.products.products-scroll's @media
   rules) automatically — hidden here by default (desktop keeps the
   plain product-only row) and only shown at the same ≤900px breakpoint
   where that row becomes the mobile "2 up" carousel. */
.product-card-lead,
.product-card-more {
	display: none;
}

/* li.product-card has no min-width:0 (flex-shrink:0 on desktop, and the
   mobile flex-basis override doesn't touch grow/shrink either), so unlike
   its siblings (whose own content — a line-clamped title, wrapping text —
   never hits this), .product-card-lead's .discover-card-badge pill (nowrap
   text) refuses to shrink below its own content width and pushes the card
   wider than the other cards in the row. min-width:0 lets it actually
   respect the shared flex-basis instead. */
.product-card-lead,
.product-card-more {
	min-width: 0;
}
@media (max-width: 900px) {
	/* Shown only here — see the base display:none
	   rule (near .product-card-more-label above) for the full reasoning. */
	.product-card-lead,
	.product-card-more {
		display: block;
	}
}

/* .discover-card normally gets its height from [knt_discover]'s own
   grid/flex sizing (knt_store_shortcode_discover()) — reused here inside
   a plain li instead, so it needs an explicit height to actually fill
   the li's own (flex-stretched, matching its photo+body siblings) height
   rather than collapsing to near-zero, since all its content
   (background image, badge, text) is absolutely positioned against
   .discover-card's own box. */
.product-card-lead .discover-card {
	height: 100%;
	min-height: 0;
}

/* Drop the small description line on the lead card specifically (badge +
   title + arrow is enough at this card's smaller "2 up" mobile size); the
   standalone [knt_discover]
   section (desktop, and its own bigger cards) keeps its description as
   before, this only hides it in the product-row lead-card context. */
.product-card-lead .discover-card-desc {
	display: none;
}

.product-card-more-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	border-radius: var(--radius-lg);
	/* White, not --color-bg-alt — this card sits inside .products-scroll on
	   a .section-alt row, whose
	   own section background IS --color-bg-alt, so the two were rendering
	   as the same grey and the card read as empty space rather than a
	   tappable tile. Matches the real product cards' own white
	   background/shadow instead of a dashed placeholder look. */
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	color: var(--color-primary-dark);
	text-align: center;
	padding: 20px;
}

.product-card-more-link:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

.product-card-more-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
}

.product-card-more-label {
	font-size: 0.9375rem;
	font-weight: 700;
}

/* =========================================================
   Section head with eyebrow + right-aligned CTA
   ========================================================= */
.section-head-v2 {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 1.6em;
	flex-wrap: wrap;
}
@media (max-width: 782px) {
	/* On mobile, .section-head-v2 (the "Tour nổi bật tại Phú Quốc" etc. row
	   above every homepage product carousel) reads as just a title with a
	   "Xem tất cả" link beside it — drop the small-caps eyebrow ("Được Lựa
	   Chọn Nhiều") and the descriptive sentence underneath, both pure
	   decoration once the title itself already says what the row is.
	   .section-title + p targets that description precisely (a plain,
	   class-less <p> immediately after the title in the markup) without
	   needing a new class — an adjacent-sibling combinator, not
	   :nth-of-type, since that breaks if a sibling is ever inserted before
	   it. */
	.section-head-v2 {
		align-items: center;
		flex-wrap: nowrap;
	}
}

.section-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 8px;
}

.section-head-v2 .section-title {
	text-align: left;
	margin-bottom: 6px;
}
@media (max-width: 782px) {
	/* .section-title's own margin-bottom:6px (base rule, meant to make
	   room for the description paragraph that used to sit right under it
	   on desktop) is an asymmetric margin on a flex child, which defeats
	   align-items:center once that description is hidden here — flexbox
	   centers the full margin box, so a bottom-only margin on the title
	   (and none on .section-head-v2-cta) pushes the title visibly above
	   center relative to the CTA link beside it. Zero it in this
	   now-margin-free mobile context instead of fighting it with a manual
	   offset. */
	.section-head-v2 .section-title {
		font-size: 1.0625rem;
		margin-bottom: 0;
	}
}

/* No max-width here (was 520px) — narrower than this paragraph's natural
   one-line length, forcing an unwanted wrap on every .section-head-v2
   instance (Tour/Vé/Khách Sạn homepage rows) even though the flex row had
   plenty of spare width beside the CTA link. Sizing to content keeps it on
   one line on desktop; on narrow mobile widths the container is already
   narrower than the text, so it still wraps there same as before. */
.section-head-v2 p {
	color: var(--color-text-light);
	margin: 0;
}

.section-head-v2-cta {
	flex-shrink: 0;
}

.link-more {
	font-size: 0.875rem;
	font-weight: 750;
	color: var(--color-accent);
	white-space: nowrap;
}

.link-more:hover {
	text-decoration: underline;
}

/* =========================================================
   Section heading family — used site-wide (every single-*.php detail
   page's "related items" head via single-knt-shell.php, template-cam-
   nang.php, template-dat-tour.php, single.php, etc., not just the
   homepage), so this stays always-loaded rather than gated to
   pages/home.css's per-page-type condition.
   ========================================================= */
.section-title {
	font-size: 1.875rem;
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: 1.2em;
}
@media (max-width: 782px) {
	.section-title {
		font-size: 1.375rem;
	}
}

.section-title + .section-subtitle {
	margin-top: -1.8em;
}

.section-subtitle {
	text-align: center;
	color: var(--color-text-light);
	font-size: 0.95rem;
	max-width: 560px;
	margin: 0 auto 1.6em;
}
@media (max-width: 782px) {
	/* Long intro paragraphs trimmed on mobile — the heading/eyebrow above
	   each already says enough, and the full sentence just adds scroll
	   length on a narrow screen. Hidden by class rather than a blanket
	   "section-head-v2 p" selector so each is scoped to the one paragraph
	   it was requested for, not every subtitle sitewide. */
	.section-subtitle {
		display: none;
	}
}

.section-cta {
	text-align: center;
	margin-top: 2em;
}

/* =========================================================
   Blog/guide post card — used by template-cam-nang.php, category.php,
   single.php's "related posts" (via template-parts/guide-post-grid.php),
   AND the homepage's Cẩm Nang teaser (inc/shortcodes.php), so this stays
   always-loaded rather than gated to any one pages/*.css file.
   ========================================================= */
/* max size on the minmax() track (not 1fr) + justify-content: start so a
   lone card (or any count under a full row) keeps a normal card width
   instead of stretching to fill the whole row — hit this with only 1
   Cẩm Nang post seeded so far, will recur on other catalog archives
   while content is still being filled in. */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
	justify-content: start;
	gap: 24px;
}

.post-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.post-card-thumb {
	position: relative;
	display: block;
}
.post-card-thumb {
	position: relative;
}

.post-card-thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Category badge overlaid on the thumb (cam-nang.html) — same absolute
   top-left pill + color-variant system as .product-badge. */
.post-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary-dark);
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.post-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--color-accent);
	color: #1f2937;
	font-size: 0.6875rem;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 999px;
	z-index: 2;
}

.post-card-body {
	padding: 18px;
}

.post-card-title {
	font-size: 1.125rem;
	margin-bottom: 0.4em;
}

.post-card-excerpt {
	color: var(--color-text-light);
	font-size: 0.875rem;
	margin-bottom: 10px;
}

/* Icon + text meta row (date, read-time) — same pattern as
   .product-card-meta, kept as its own class so the markup reads as a blog
   post rather than a product. */
.post-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin-bottom: 10px;
}

.post-card-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.post-card-meta-item .icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}