/*
Theme Name:   Klukfoontour (Astra Child)
Theme URI:    https://www.klukfoontour.com/
Description:  Child theme ของ Astra สำหรับ klukfoontour.com — เก็บ CSS และ template override ทั้งหมดไว้ที่นี่ ไม่ต้องกลัว Astra อัปเดตแล้วงานหาย
Author:       Metha
Template:     astra
Version:      1.21.0
Text Domain:  klukfoon-child
*/

/* ==========================================================================
   โทเคนดีไซน์ — ถอดมาจากเว็บเดิม klukfoontour.com ตรงตัว

   ลูกค้าต้องการให้หน้าใหม่หน้าตาเหมือนเดิมมากที่สุด ค่าทุกตัวข้างล่างนี้
   จึงอ่านมาจาก computed style ของหน้า /phusoidao บนเว็บจริง ไม่ได้ตั้งขึ้นเอง

     ฟอนต์        Prompt น้ำหนัก 300 เป็นตัวเนื้อความ 700 เป็นตัวหนา
     เนื้อความ     17px สี #0a0a0a
     หัวข้อบล็อก   แถบดำเต็มความกว้าง ตัวหนังสือขาว 18px หนา สูงรวม 64px
     ความกว้าง     เนื้อหา 1080px
     ปุ่มติดต่อ     แคปซูล 280x45 · LINE #09b811 · Messenger #3b5998

   เว็บเดิมทำใน Duda จึงมีจุดไม่สม่ำเสมออยู่บ้าง เช่นแถบหัวข้อมีทั้ง #000
   สูง 64px และ #161616 สูง 50px ตรงนี้รวบให้เหลือแบบเดียว
   ========================================================================== */

/* hero กว้าง 100vw ซึ่งนับรวมแถบเลื่อนด้วย จึงกว้างเกินพื้นที่จริง ~15px
   ทำให้หน้าเลื่อนแนวนอนได้นิดหน่อย ผู้ใช้มือถือจะรู้สึกว่าหน้า "แกว่ง"

   ใช้ clip ไม่ใช่ hidden เพราะ hidden จะทำให้ html กลายเป็น scroll container
   แล้ว position:sticky ข้างในหยุดทำงาน ส่วน clip ตัดอย่างเดียวไม่สร้าง container */
html {
	overflow-x: clip;
}

/* พื้นหลังเว็บสีขาวเต็มทุกหน้า

   Astra ตั้งค่าเริ่มต้นเป็น #f5f5f5 แล้ววางกล่องเนื้อหาสีขาวทับ ทำให้เห็น
   เป็นขอบเทารอบหน้า ซึ่งเว็บเดิมไม่มี — หน้าที่ใช้ template ของ Elementor
   (หน้าแรก /intertrip /privacy) ขาวอยู่แล้ว แต่ trip / trip_month / review
   ที่ผ่าน Theme Builder ไม่ได้ขาวด้วย เลยดูไม่เหมือนกันทั้งเว็บ

   ทำงานคู่กับ filter astra_get_content_layout ใน functions.php
   ตัวนั้นเอากล่องออก ตัวนี้เอาพื้นเทาออก ต้องมีทั้งคู่ถึงจะได้ผล */
body,
body.ast-separate-container {
	background-color: #fff;
}

:root {
	--klf-ink: #0a0a0a;
	--klf-ink-strong: #000;
	--klf-muted: #747474;
	--klf-line: #e2e2e2;
	--klf-surface: #fff;
	--klf-surface-alt: #f5f5f5;
	--klf-bar: #000;
	--klf-bar-text: #fff;
	--klf-line-green: #09b811;
	--klf-messenger: #3b5998;
	--klf-slate: #617379;

	--klf-font: "Prompt", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* เว็บเดิมใช้ 18px · ลูกค้าเลือก 17px เอง เล็กลงหนึ่งขั้นให้อ่านสบายขึ้น
	   จุดเดียวที่ต้องแก้ ทุกบล็อกอ้างโทเคนนี้หมด */
	--klf-text: 17px;
	--klf-text-sm: 16px;

	/* ระยะบรรทัดเป็น "อัตราส่วน" ที่วัดมาจากเว็บเดิม ไม่ใช่ค่าที่ตั้งเอง

	   เว็บเดิมไม่ได้กำหนด line-height เลย ปล่อยเป็น normal ซึ่งฟอนต์ Prompt
	   คำนวณออกมาเป็น 28px ที่ขนาด 18px = อัตราส่วน 1.556

	   ของเดิมผมตั้ง 1.75 ซึ่งเป็นค่าที่อ่านสบายตามตำราทั่วไป แต่ทำให้
	   ตัวหนังสือห่างกว่าเว็บเดิม 12.5% ลูกค้าเลยรู้สึกว่าโปร่งเกินและอ่านยาก

	   พอย่อตัวอักษรเหลือ 17px อัตราส่วนนี้ให้ระยะบรรทัด 26.5px (เดิม 28px)
	   คงอัตราส่วนไว้ไม่ใช่คงตัวเลข 28px เพราะถ้าตรึงที่ 28px กับตัวอักษร
	   ที่เล็กลง จะกลายเป็นโปร่งขึ้นกว่าเดิม ซึ่งเป็นสิ่งที่ลูกค้าบ่นไว้ตั้งแต่ต้น

	   ใช้ตัวเลขแทน normal เพราะ normal ขึ้นกับฟอนต์ที่โหลดได้จริง
	   ถ้าวันหนึ่ง Prompt โหลดไม่ขึ้น ระยะบรรทัดจะเปลี่ยนตามฟอนต์สำรอง */
	--klf-lh: 1.556;
	--klf-width: 1080px;
}

/* ==========================================================================
   ฐานตัวอักษร

   เว็บเดิมใช้ Prompt น้ำหนัก 300 ทั้งหน้า ซึ่งบางกว่าค่าเริ่มต้นของ Astra มาก
   ถ้าไม่บังคับตรงนี้ หน้าใหม่จะดูหนากว่าเดิมทันทีที่เอาไปเทียบข้างกัน
   ========================================================================== */

body,
.klf-block {
	font-family: var(--klf-font);
	font-weight: 300;
	font-size: var(--klf-text);
	line-height: var(--klf-lh);
	color: var(--klf-ink);
}

body {
	background: var(--klf-surface);
}

.klf-block strong,
.klf-block b {
	font-weight: 700;
	color: var(--klf-ink-strong);
}

/* ==========================================================================
   บล็อกและหัวข้อ

   แถบหัวข้อสีดำคือเอกลักษณ์ของเว็บนี้ — ค่าทริป / รอบเดินทาง / ติดต่อสอบถาม
   บนเว็บเดิมเป็นแถบดำเต็มความกว้างทั้งหมด
   ========================================================================== */

.klf-block {
	margin-block: 0 30px;
}

.klf-block__heading {
	margin: 0 0 20px;
	padding: 16px;
	background: var(--klf-bar);
	color: var(--klf-bar-text);
	font-family: var(--klf-font);
	font-size: var(--klf-text);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0;
	border-radius: 0;
}

/* กล่องเตือนตอนแก้ไข — ผู้เข้าชมไม่เห็น */
.klf-block__empty {
	padding: 12px 16px;
	border: 1px dashed var(--klf-line);
	color: var(--klf-muted);
	font-size: var(--klf-text-sm);
}

/* ==========================================================================
   รอบเดินทาง

   เว็บเดิมเป็นบรรทัดข้อความเรียงกันเฉยๆ ไม่ใช่การ์ด จึงคงหน้าตาแบบนั้นไว้
   เพิ่มแค่เส้นคั่นบางๆ กับป้ายสถานะ เพราะเว็บเดิมพิมพ์สถานะปนในข้อความ
   ทำให้อ่านยากเมื่อมีหลายรอบ
   ========================================================================== */

.klf-departures__month {
	margin: 24px 0 6px;
	font-family: var(--klf-font);
	font-size: var(--klf-text);
	font-weight: 700;
	color: #070707;
	line-height: var(--klf-lh);
}

.klf-departures__month:first-of-type {
	margin-top: 0;
}

.klf-departures__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.klf-departures__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--klf-line);
}

.klf-departures__item:last-child {
	border-bottom: 0;
}

/* วันที่ไม่ต้องหนา — ให้หัวข้อเดือนเป็นตัวหนาอยู่ตัวเดียว

   ของเดิมหนาทั้งเดือนและทุกวันที่ พอทริปหนึ่งมีสิบกว่ารอบก็กลายเป็น
   ตัวหนาเรียงกันทั้งหน้า สายตาไล่หาไม่เจอว่าเดือนใหม่เริ่มตรงไหน

   ใช้ 400 ไม่ใช่ 300 ของ body เพราะเป็นบรรทัดข้อมูลที่คนกวาดตาอ่าน
   น้ำหนักเท่ากับวันที่ในบล็อกทริปว่างหน้าแรก จะได้เป็นชุดเดียวกันทั้งเว็บ */
.klf-departures__date {
	font-weight: 400;
	color: var(--klf-ink-strong);
	margin-inline-end: auto;
}

/* รอบที่เต็มหรือปิดแล้วทำให้จางลง ไม่ต้องแตะน้ำหนักซ้ำเพราะ 400 เท่ากันอยู่แล้ว */
.klf-departures__item--full .klf-departures__date,
.klf-departures__item--closed .klf-departures__date {
	color: var(--klf-muted);
}

.klf-departures__tag,
.klf-departures__status {
	font-size: 14px;
	line-height: 22px;
	padding-inline: 10px;
	border-radius: 50px;
	white-space: nowrap;
}

.klf-departures__tag {
	border: 1px solid var(--klf-line);
	color: var(--klf-muted);
}

.klf-departures__status {
	font-weight: 700;
}

.klf-departures__status[data-status="open"] {
	background: var(--klf-line-green);
	color: #fff;
}

.klf-departures__status[data-status="few"] {
	background: #f0a500;
	color: #fff;
}

.klf-departures__status[data-status="full"],
.klf-departures__status[data-status="closed"] {
	background: var(--klf-surface-alt);
	color: var(--klf-muted);
}

.klf-departures__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.klf-departures__note {
	flex-basis: 100%;
	font-size: var(--klf-text-sm);
	color: var(--klf-muted);
}

/* ==========================================================================
   กำหนดการเดินทาง

   เว็บเดิมหัวข้อวันเป็นตัวหนา 18px แล้วตามด้วยบรรทัด "19.30น นัดพบ..."
   คงรูปแบบนั้นไว้ แต่แยกเวลากับกิจกรรมเป็นสองคอลัมน์ให้เวลาตรงกันทุกบรรทัด
   ========================================================================== */

.klf-itinerary__day {
	padding-block: 10px;
	border-bottom: 1px solid var(--klf-line);
}

.klf-itinerary__day:last-child {
	border-bottom: 0;
}

.klf-itinerary__label {
	margin: 0;
	font-family: var(--klf-font);
	font-size: var(--klf-text);
	font-weight: 700;
	color: var(--klf-ink-strong);
	line-height: var(--klf-lh);
	cursor: pointer;
}

details.klf-itinerary__day > summary.klf-itinerary__label::marker {
	color: var(--klf-muted);
}

.klf-itinerary__note {
	font-weight: 300;
	color: var(--klf-muted);
	font-size: var(--klf-text-sm);
}

.klf-itinerary__schedule {
	margin: 8px 0 4px;
	padding: 0;
	list-style: none;
}

.klf-itinerary__slot {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 2px 14px;
	align-items: baseline;
	padding-block: 3px;
}

.klf-itinerary__time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--klf-ink-strong);
}

@media (max-width: 480px) {
	.klf-itinerary__slot {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   ค่าทริป
   ========================================================================== */

.klf-price-list__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0 0 14px;
}

.klf-price-list__amount {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--klf-ink-strong);
	font-variant-numeric: tabular-nums;
}

.klf-price-list__unit {
	color: var(--klf-muted);
}

.klf-price-list__join {
	font-size: var(--klf-text-sm);
	color: var(--klf-muted);
}

.klf-price-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.klf-price-list__item {
	position: relative;
	padding: 4px 0 4px 26px;
}

.klf-price-list__item::before {
	position: absolute;
	inset-inline-start: 0;
	content: "\2713";
	font-weight: 700;
	color: var(--klf-ink-strong);
}

.klf-price-list--excludes .klf-price-list__item::before {
	content: "\2715";
	color: var(--klf-muted);
}

/* ==========================================================================
   คำถามที่พบบ่อย
   ========================================================================== */

.klf-faq__item {
	border-bottom: 1px solid var(--klf-line);
}

.klf-faq__item:last-of-type {
	border-bottom: 0;
}

/* เว็บเดิมวางเครื่องหมาย + / - ไว้ขวาสุด ไม่ใช่สามเหลี่ยมหน้าข้อความแบบที่
   เบราว์เซอร์ให้มาเอง จึงปิดเครื่องหมายเดิมแล้ววาดใหม่ด้วย ::after */
.klf-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	font-weight: 700;
	color: var(--klf-ink-strong);
	cursor: pointer;
	list-style: none;
}

/* ต้องปิดสองทาง — ::marker ใช้ได้กับเบราว์เซอร์ใหม่
   ส่วน Safari รุ่นเก่ายังวาดสามเหลี่ยมผ่าน pseudo-element ของตัวเอง */
.klf-faq__question::marker {
	content: "";
}

.klf-faq__question::-webkit-details-marker {
	display: none;
}

.klf-faq__question::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--klf-muted);
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
}

.klf-faq__item[open] > .klf-faq__question::after {
	content: "−";
}

.klf-faq__answer {
	padding-block-end: 14px;
}

.klf-faq__answer > :first-child {
	margin-block-start: 0;
}

/* ==========================================================================
   ข้อความยาว
   ========================================================================== */

.klf-rich-text__body > :first-child {
	margin-block-start: 0;
}

.klf-rich-text__body > :last-child {
	margin-block-end: 0;
}

.klf-rich-text__body p {
	margin-block: 0 14px;
}

.klf-rich-text__body ul,
.klf-rich-text__body ol {
	margin-block: 0 14px;
	padding-inline-start: 24px;
}

/* ==========================================================================
   ปุ่มติดต่อจองทริป

   เว็บเดิมเป็นแคปซูล 280x45 สีประจำแอป วางเรียงกัน
   ========================================================================== */

.klf-contact__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klf-contact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 280px;
	max-width: 100%;
	min-height: 45px;
	padding: 0 20px;
	border-radius: 50px;
	color: #fff;
	font-family: var(--klf-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: filter 150ms ease, transform 150ms ease;
}

.klf-contact__btn:hover,
.klf-contact__btn:focus-visible {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.klf-contact__btn:focus-visible {
	outline: 2px solid var(--klf-ink-strong);
	outline-offset: 2px;
}

.klf-contact__btn--line {
	background: var(--klf-line-green);
}

.klf-contact__btn--messenger {
	background: var(--klf-messenger);
}

/* ==========================================================================
   ลดการเคลื่อนไหวตามที่ผู้ใช้ตั้งไว้
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.klf-block *,
	.klf-block *::before,
	.klf-contact__btn {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   มือถือ
   ========================================================================== */

@media (max-width: 600px) {
	/* ไม่ย่อขนาดตัวอักษรลงอีกบนมือถือ — ใช้ 17px เท่ากับเดสก์ท็อป
	   ตัวหนังสือไทยเล็กกว่านี้บนจอมือถืออ่านยากขึ้นจริง ไม่ใช่ประหยัดที่ */

	.klf-block__heading {
		padding: 12px 14px;
	}

	/* บนมือถือให้ปุ่มเรียงลงและกว้างเท่ากันทั้งคู่
	   ตัว li เป็น flex item ถ้าไม่สั่งกว้าง มันจะหดตามความยาวข้อความ
	   ทำให้ปุ่มสองอันขนาดไม่เท่ากัน ดูไม่เรียบร้อย */
	.klf-contact__list {
		flex-direction: column;
	}

	.klf-contact__list > li {
		width: 100%;
	}

	.klf-contact__btn {
		width: 100%;
	}
}

/* ==========================================================================
   รายการทริปประจำเดือน

   เว็บเดิมเรียงเป็นบรรทัด: วันที่+ชื่อทริป แล้วคำโปรย แล้วลิงก์สีเทา
   คงรูปแบบนั้นไว้ เพิ่มแค่เส้นคั่นให้แยกรายการออกจากกันชัดขึ้น
   ========================================================================== */

.klf-month__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.klf-month__item {
	padding: 14px 0;
	border-bottom: 1px solid var(--klf-line);
}

.klf-month__item:last-child {
	border-bottom: 0;
}

/* ---------- รูปย่อในแถวรายการ ----------

   วัดจากเว็บเดิม (/tripoctober, /intertrip): กล่อง 130x85 ชิดซ้าย
   ห่างข้อความ 10px รูปเต็มกรอบแบบ cover ไม่มีมุมโค้ง
   ขนาดเท่ากันทุกความกว้างจอ เว็บเดิมไม่ย่อรูปบนมือถือ

   ใช้ float ไม่ใช่ flex เพราะเว็บเดิมเป็น float และพฤติกรรมต่างกันจริง:
   บนจอกว้าง คำโปรยอยู่ข้างรูป แต่บนมือถือคำโปรยไหลลงไปใต้รูป
   ถ้าใช้ flex คำโปรยจะถูกบีบอยู่ในคอลัมน์แคบๆ ข้างรูปตลอด ซึ่งไม่เหมือนต้นฉบับ

   ชื่อทริปเป็น display:flex จึงสร้าง BFC ของตัวเอง กล่องมันจะหลบ float
   ไปอยู่ข้างรูปเสมอ ไม่ไหลลงใต้รูปแบบคำโปรย — ตรงกับต้นฉบับพอดี */

.klf-month__thumb {
	float: left;
	width: 130px;
	height: 85px;
	margin: 0 10px 4px 0;
	overflow: hidden;
	background: var(--klf-line);
}

.klf-month__thumb-img,
.klf-month__thumb-none {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* flow-root ทำให้แถวสูงคลุมรูปเสมอ แม้ข้อความจะสั้นกว่ารูป
   ไม่งั้นเส้นคั่นด้านล่างจะขึ้นไปพาดกลางรูป */
.klf-month__item--thumb {
	display: flow-root;
}

.klf-month__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	color: var(--klf-ink-strong);
	text-decoration: none;
}

.klf-month__link:hover .klf-month__name,
.klf-month__link:focus-visible .klf-month__name {
	text-decoration: underline;
}

.klf-month__date {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.klf-month__name {
	font-weight: 700;
	color: var(--klf-ink-strong);
}

.klf-month__excerpt {
	display: block;
	margin-top: 2px;
	color: var(--klf-ink);
	font-size: var(--klf-text-sm);
}

/* ลิงก์ "กดดูรายละเอียด" เว็บเดิมเป็นตัวหนังสือสีเทา และมีข้อความบนหน้า
   บอกผู้ใช้ให้กดตรงนี้ จึงต้องคงสีเทาไว้ แต่ขีดเส้นใต้เพิ่มให้เห็นว่าคลิกได้ */
.klf-month__more {
	display: inline-block;
	margin-top: 4px;
	color: var(--klf-muted);
	font-size: var(--klf-text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.klf-month__more:hover,
.klf-month__more:focus-visible {
	color: var(--klf-ink-strong);
}

/* รอบที่เดินทางไปแล้ว — ยังแสดงอยู่เพราะหน้ารายเดือนที่ผูกปีต้องไม่ว่างเปล่า
   แต่ทำให้จางลงเพื่อไม่ให้สับสนกับรอบที่ยังจองได้ */
.klf-month__item--past {
	opacity: 0.55;
}

.klf-month__item--past .klf-month__date::after {
	content: " (เดินทางแล้ว)";
	font-weight: 400;
	font-size: var(--klf-text-sm);
	color: var(--klf-muted);
}

/* หัวข้อเดือนคั่นในหน้าที่ลิสต์หลายเดือน (/intertrip, หน้าแรก) */
.klf-month__group {
	margin: 26px 0 8px;
	font-family: var(--klf-font);
	font-size: var(--klf-text);
	font-weight: 700;
	color: #070707;
	line-height: var(--klf-lh);
}

.klf-month__group:first-of-type {
	margin-top: 0;
}

/* ---------- ป้ายท้ายชื่อทริป ----------

   ที่นั่งเหลือ / นับถอยหลังปิดรับ / สถานะรอบ ใช้ทรงเดียวกันหมด
   ต่างกันแค่สี จะได้อ่านเป็นชุดเดียวไม่ใช่ของสามอันที่บังเอิญอยู่ข้างกัน */

.klf-badge {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 8px;
	padding-inline: 10px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	white-space: nowrap;
}

/* ยังว่างสบายๆ — เขียวเดียวกับปุ่มไลน์ ให้รู้สึกว่าเป็นสีของแบรนด์ */
.klf-badge--seat {
	background: #e8f5e9;
	color: #1b5e20;
}

/* เหลือน้อย — ส้ม ไม่ใช่แดง เพราะแดงควรเก็บไว้ให้เรื่องที่ทำอะไรไม่ได้แล้ว */
.klf-badge--low {
	background: #fff3e0;
	color: #b35309;
}

/* นับถอยหลัง — ตัวเลขต้องกว้างเท่ากันทุกหลัก ไม่งั้นป้ายจะขยับทุกวินาที */
.klf-badge--count {
	background: var(--klf-surface-alt);
	color: var(--klf-ink);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
}

.klf-badge--status[data-status="few"] {
	background: #f0a500;
	color: #fff;
}

.klf-badge--status[data-status="full"],
.klf-badge--status[data-status="closed"] {
	background: var(--klf-surface-alt);
	color: var(--klf-muted);
}

/* ข้อความแทนบล็อกเมื่อยังไม่มีทริปในช่วงนั้น */
.klf-month__none {
	margin: 0;
	color: var(--klf-muted);
}

/* ==========================================================================
   หน้าแรก — ลอกจากเว็บเดิม

   hero รูปเต็มความกว้าง สูง 516px ตัวหนังสือขาวกลางภาพ
   ตามด้วยปุ่มโซเชียลวงกลม 68px แล้วบล็อกทริปว่างสัปดาห์จัดกลาง
   ========================================================================== */

.klf-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 516px;
	padding: 40px 20px;

	/* ทะลุกรอบเนื้อหา 1080px ออกไปเต็มความกว้างจอเหมือนเว็บเดิม
	   ใช้วิธีนี้เพราะได้ผลไม่ว่าธีมหรือ Elementor จะห่อไว้กี่ชั้น

	   หมายเหตุ: 100vw นับรวมแถบเลื่อนด้วย บนเดสก์ท็อปจึงกว้างเกิน body ~15px
	   แล้วโดน overflow-x:hidden ของ body ตัดทิ้ง ผลคือขอบขวาของภาพถูกครอป
	   ไปนิดหน่อย ซึ่งไม่มีผลกับภาพแบบ cover และไม่ทำให้เกิดแถบเลื่อนแนวนอน

	   เคยลองเปลี่ยนเป็น width:auto แล้ว ได้ผลเท่ากันเป๊ะ (กว้าง 100vw เหมือนเดิม)
	   เพราะ margin ติดลบคิดจาก 50vw อยู่ดี จึงไม่ต้องเสียเวลาเปลี่ยนอีก */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	text-align: center;
	background-position: center;
	background-size: cover;
}

/* ---------- สไลด์พื้นหลังแบบจางสลับ (ลอกจากเว็บเดิม) ----------

   เว็บเดิมสร้างด้วย Duda ใช้คลาส .bgGallerySlide สลับรูป 4 ใบ
   วัดค่าจริงจากหน้าเว็บต้นฉบับได้ transition: opacity .75s ease-in-out
   และค้างรูปละราว 5 วินาที จึงใช้ค่าเดียวกันเป๊ะ

   ทุกใบซ้อนทับกันหมด แล้วคุม opacity เอา — ไม่สลับ background-image ของ
   ก้อนเดียว เพราะแบบนั้นจะกระพริบตอนรูปใหม่ยังโหลดไม่เสร็จ

   รูปใบแรกฝังมาจาก <style> ที่ธีมพิมพ์ใน <head> (ดู functions.php)
   ใบที่เหลือ JS ใส่ให้ทีหลัง จะได้ไม่แย่งแบนด์วิดท์กับรูปแรกซึ่งเป็น LCP */

.klf-hero__slides {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
}

.klf-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-position: center;
	background-size: cover;
	transition: opacity 0.75s ease-in-out;
}

.klf-hero__slide.is-active {
	opacity: 1;
}

/* ฝ้าดำบางๆ ให้ตัวหนังสือขาวอ่านออกทุกจุดของภาพ ไม่ว่ารูปจะสว่างตรงไหน */
.klf-hero::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
	background: rgba(0, 0, 0, 0.28);
}

/* ต้องระบุ z-index ให้ครบทั้งสามชั้น (สไลด์ 0 / ฝ้า 1 / ตัวหนังสือ 2)
   ถ้าปล่อยว่าง สไลด์ที่เป็น absolute จะวาดทับ ::before แล้วฝ้าดำหาย */
.klf-hero > *:not(.klf-hero__slides) {
	position: relative;
	z-index: 2;
}

.klf-hero__title,
.klf-hero__tagline {
	margin: 0;
	color: #fff;
	font-family: var(--klf-font);
	font-weight: 700;
	line-height: 1.5;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.klf-hero__title {
	font-size: clamp(22px, 3.4vw, 32px);
}

.klf-hero__tagline {
	font-size: clamp(16px, 2vw, 20px);
}

/* ---------- ปุ่มโซเชียลวงกลม ---------- */

.klf-social {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.klf-social__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
	transition: transform 150ms ease, filter 150ms ease;
}

.klf-social__btn:hover,
.klf-social__btn:focus-visible {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-2px);
}

.klf-social__btn--facebook { background: #1877f2; }
.klf-social__btn--line     { background: #19ca04; }

/* Instagram ไม่มีสีเดียว แบรนด์บังคับใช้ไล่เฉดมุมซ้ายล่างขึ้นขวาบน
   ถ้าใช้สีทึบสีเดียวจะดูเป็นของปลอมทันที */
.klf-social__btn--instagram {
	background: radial-gradient(circle at 30% 107%,
		#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* TikTok เป็นดำล้วน ไอคอนเป็นสีขาวธรรมดา
   (โลโก้ทางการมีเงาฟ้า-ชมพูเหลื่อมกัน แต่ที่ 34px มองไม่ออก
    กลายเป็นขอบเบลอเฉยๆ จึงใช้ทรงเดียวสีขาวชัดกว่า) */
.klf-social__btn--tiktok { background: #010101; }

.klf-social__btn svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
}

/* Instagram เป็นไอคอนลายเส้น ไม่ใช่รูปทึบเหมือนอีกสามอัน
   กฎด้านบนเทสีทั้ง svg จึงต้องสั่งทับเฉพาะปุ่มนี้

   แยกด้วยชนิดแท็ก: rect กับ circle คือเส้น ส่วน path คือจุดมุมที่ต้องทึบ
   ไม่ใช้ class เพราะ Elementor อาจกรอง attribute แปลกๆ ในกล่องข้อความทิ้ง */
.klf-social__btn--instagram svg rect,
.klf-social__btn--instagram svg circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* ---------- บล็อกทริปว่างสัปดาห์ ---------- */

.klf-weekly {
	text-align: center;
}

.klf-weekly .klf-block__heading {
	background: none;
	color: var(--klf-ink-strong);
	font-size: clamp(24px, 3.2vw, 32px);
	padding: 0;
	margin-bottom: 14px;
	text-align: center;
}

/* แถวเป็นการ์ดกดได้ ไม่ใช่ตัวหนังสือลอยๆ

   ของเดิมทั้งบรรทัดเป็นลิงก์อยู่แล้ว แต่เป็นตัวดำล้วนจัดกลาง ไม่มีเส้นใต้
   ไม่เปลี่ยนสีตอนชี้ และคำว่า "ดูรายละเอียด" ถูกสั่งซ่อนไว้เฉพาะบล็อกนี้
   ผู้ใช้จึงไม่มีทางรู้เลยว่ากดได้ ตรงนี้แก้ให้เห็นชัดว่าเป็นของกดได้ */

.klf-weekly .klf-month__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: start;
}

.klf-weekly .klf-month__item {
	position: relative;
	padding: 14px 18px;
	border: 1px solid var(--klf-line);
	border-inline-start: 3px solid var(--klf-line-green);
	border-radius: 8px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* แถวที่เหลือน้อยเปลี่ยนแถบซ้ายเป็นส้ม ให้กวาดตาเจอก่อนแถวอื่น
   :has ใช้ได้ทุกเบราว์เซอร์หลักแล้ว ถ้าเบราว์เซอร์เก่าไม่รองรับ
   ก็แค่ได้แถบเขียวเหมือนแถวปกติ ไม่พัง */
.klf-weekly .klf-month__item:has(.klf-badge--low) {
	border-inline-start-color: #e08600;
}

.klf-weekly .klf-month__item:hover,
.klf-weekly .klf-month__item:focus-within {
	border-color: var(--klf-ink-strong);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

/* ลิงก์คลุมทั้งแถว กดตรงไหนก็เข้าได้ ไม่ต้องเล็งตัวหนังสือ
   ใช้ ::after ขยายพื้นที่กด แทนการเอา <a> ครอบทั้ง <li>
   ซึ่งจะทำให้โครง HTML ของ widget ต่างจากหน้าอื่นโดยไม่จำเป็น */
.klf-weekly .klf-month__link::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: inherit;
}

.klf-weekly .klf-month__link {
	flex-wrap: wrap;
	justify-content: flex-start;
}

.klf-weekly .klf-month__name {
	text-decoration: underline;
	text-decoration-color: var(--klf-line);
	text-underline-offset: 4px;
	transition: text-decoration-color 150ms ease;
}

.klf-weekly .klf-month__item:hover .klf-month__name {
	text-decoration-color: currentColor;
}

.klf-weekly .klf-month__date {
	margin-inline-end: 0;
	color: var(--klf-muted);
	font-weight: 400;
}

/* "ดูรายละเอียด" — ของเดิมสั่งซ่อนไว้ ซึ่งคือต้นเหตุที่ไม่มีใครรู้ว่ากดได้ */
.klf-weekly .klf-month__more {
	display: inline-block;
	color: var(--klf-ink-strong);
	font-weight: 500;
}

.klf-weekly .klf-month__excerpt {
	display: none;
}

@media (max-width: 560px) {
	.klf-weekly .klf-month__item { padding: 12px 14px; }

	/* จอแคบ ป้ายขึ้นบรรทัดใหม่แทนที่จะบีบชื่อทริปจนขึ้นบรรทัดละคำ */
	.klf-weekly .klf-badge { margin-inline-start: 0; margin-top: 6px; }

	/* ช่วงวันที่ที่คร่อมสองเดือน เช่น "29 กันยายน - 1 ตุลาคม 2569" กว้าง 216px
	   แต่ข้างรูปย่อบนจอ 375px เหลือที่แค่ 165px ถ้าคง nowrap ไว้จะทะลุออก
	   นอกกรอบการ์ด ยอมให้ตัดบรรทัดดีกว่า — ย่อฟอนต์ไม่ช่วย ต้องเหลือ 13px
	   ถึงจะพอ ซึ่งเล็กจนอ่านไม่ออก */
	.klf-month__date { white-space: normal; }
}

/* ---------- การ์ดทริป ---------- */

.klf-month__list--cards {
	display: grid;
	grid-template-columns: repeat(var(--klf-cols, 3), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klf-card__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--klf-ink-strong);
	text-decoration: none;
}

.klf-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--klf-surface-alt);
}

.klf-card__media img,
.klf-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms var(--klf-ease, ease);
}

.klf-card__link:hover .klf-card__media img {
	transform: scale(1.04);
}

.klf-card__date {
	font-size: var(--klf-text-sm);
	color: var(--klf-muted);
	font-variant-numeric: tabular-nums;
}

/* การ์ดที่ไม่มีวันในชุดที่ใบอื่นมี — widget พิมพ์ span ว่างมาให้กันที่ไว้
   span ว่างสูง 0 เอง ต้องยัด nbsp เข้าไปถึงจะกินความสูงหนึ่งบรรทัด
   ชื่อทริปทุกใบในแถวจึงเริ่มที่ระดับเดียวกัน */
.klf-card__date:empty::before {
	content: " ";
}

.klf-card__title {
	font-weight: 700;
	line-height: 1.5;
}

.klf-card__link:hover .klf-card__title,
.klf-card__link:focus-visible .klf-card__title {
	text-decoration: underline;
}

.klf-card--past {
	opacity: 0.55;
}

/* ---------- เมนูหลัก (แถบบนสุด) ----------

   เมนูมี 8 รายการและชื่อเป็นภาษาไทยที่ยาวเกือบทุกอัน ("ทริปพฤศจิกายน" 156px)
   ของเดิม 18px + เว้นข้างละ 18px รวมกันกว้าง 1047px แต่ที่ว่างจริงมี 944px
   จึงตกลงไปสองบรรทัด

   ใช้ clamp ไม่ใช่ค่าคงที่ เพราะที่ว่างของแถบเมนูหดตามความกว้างจอ
   ค่าคงที่ที่พอดีจอ 1565px จะกลับไปตกบรรทัดอีกบนจอ 1280px
   เพดานบน 16px คือ "เล็กลงหนึ่งขั้น" พื้น 14px คือเล็กสุดที่ยังอ่านสบาย
   จอที่แคบกว่านั้น Astra สลับไปเมนูแฮมเบอร์เกอร์ให้เองอยู่แล้ว

   เจาะจงที่ #ast-hf-menu-1 ซึ่งเป็นเมนูแถบบนของจอใหญ่เท่านั้น
   เมนูในลิ้นชักของมือถือเป็นคนละก้อน (#ast-hf-mobile-menu) ยังใช้ขนาดเดิม
   เพราะที่นั่นเรียงลงเป็นแนวตั้ง ไม่มีปัญหาเรื่องความกว้าง */

#ast-hf-menu-1 > .menu-item > .menu-link {
	font-size: 16px;
	padding-inline: 12px;
}

/* ไล่ลดเป็นขั้นตามความกว้างจอ
   ตัวเลขมาจากการวัดจริง ไม่ได้กะเอา — เมนูแปดรายการกินที่เท่าไหร่ที่ขนาดไหน
   เทียบกับที่ว่างระหว่างโลโก้กับขอบขวา ทุกขั้นคือจุดที่เริ่มตกบรรทัด

   ไม่ใช้ clamp กับ vw เพราะอ่านค่าออกมาตรวจยาก และเวลาจะแก้ทีหลังต้องมานั่ง
   คำนวณย้อนว่าจอกว้างเท่านี้ได้ฟอนต์กี่ px — เขียนเป็นขั้นแบบนี้เปิดดูรู้เลย

   ต่ำกว่า 921px Astra สลับไปเมนูแฮมเบอร์เกอร์เอง ไม่ต้องไล่ลดต่อ */

@media (max-width: 1199px) {
	#ast-hf-menu-1 > .menu-item > .menu-link { font-size: 15px; padding-inline: 10px; }
}

@media (max-width: 1100px) {
	#ast-hf-menu-1 > .menu-item > .menu-link { font-size: 14px; padding-inline: 8px; }
}

@media (max-width: 1030px) {
	#ast-hf-menu-1 > .menu-item > .menu-link { font-size: 13px; padding-inline: 6px; }
}

@media (max-width: 955px) {
	#ast-hf-menu-1 > .menu-item > .menu-link { font-size: 12px; padding-inline: 5px; }
}

/* ---------- ไอคอนหน้าหัวข้อ section ของหน้าแรก ----------

   วาดด้วย mask ไม่ใช่ background-image เพราะหัวข้อบนเว็บนี้มีสองแบบ
   แถบดำตัวหนังสือขาว กับพื้นขาวตัวหนังสือดำ · mask + currentColor
   ทำให้ไอคอนเปลี่ยนสีตามตัวหนังสือเอง ไม่ต้องทำไฟล์สองชุด

   SVG ฝังเป็น data URI ในไฟล์นี้ ไม่ใช่ไฟล์แยก — หกไอคอนรวมกันไม่ถึง 3KB
   แต่ถ้าแยกไฟล์จะกลายเป็น 6 request ที่บล็อกการวาดหัวข้อครึ่งหน้าแรก

   จำกัดไว้ที่ .home อย่างเดียว — บล็อกติดต่อกับบล็อกรายเดือนใช้ซ้ำใน
   หน้าทริป 95 หน้าและหน้ารวมรายเดือน ถ้าไม่กั้นจะเปลี่ยนหน้าตาทั้งเว็บ
   ทั้งที่โจทย์พูดถึงหน้าแรก · อยากให้ทั้งเว็บใช้ด้วย ถอด .home ออกบรรทัดเดียว */

/* ปฏิทิน — บล็อกนี้พูดถึงวันที่ในสัปดาห์นี้ */
.home .klf-month--all {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2216%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%2010h18M8%203v4M16%203v4%22/%3E%3C/svg%3E");
}

/* ภูเขา — ทริปเดินป่าในประเทศ */
.home .klf-month--domestic {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2%2020%209%207l4.5%207.5L16%2011l6%209z%22/%3E%3C/svg%3E");
}

/* ลูกโลก — ต่างประเทศ */
.home .klf-month--international {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M3%2012h18%22/%3E%3Cpath%20d=%22M12%203c2.7%203.4%202.7%2014.6%200%2018-2.7-3.4-2.7-14.6%200-18z%22/%3E%3C/svg%3E");
}

/* ใบไม้ — ฤดูกาล ไม่ผูกกับฤดูใดฤดูหนึ่ง */
.home .klf-taxtrips--season {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%203c0%2010-5.5%2015-13%2015H4C4%208%209.5%203%2017%203h3z%22/%3E%3Cpath%20d=%22M4%2021C7.5%2014.5%2012%209.5%2018%206%22/%3E%3C/svg%3E");
}

/* คนหลายคน — รวมทีมกันจอง */
.home .klf-taxtrips--team {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%228%22%20r=%223.5%22/%3E%3Cpath%20d=%22M2.5%2020c0-3.6%202.9-6.5%206.5-6.5s6.5%202.9%206.5%206.5%22/%3E%3Cpath%20d=%22M16.5%205a3.5%203.5%200%200%201%200%206%22/%3E%3Cpath%20d=%22M18%2013.8c2.1%201%203.5%203.1%203.5%206.2%22/%3E%3C/svg%3E");
}

/* กรอบข้อความ — ทักแชทมาคุย */
/* ตารางสี่ช่อง — รวมทุกอย่างไว้ที่เดียว */
.home .klf-alltrips {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%227.5%22%20height=%227.5%22%20rx=%221.5%22/%3E%3Crect%20x=%2213.5%22%20y=%223%22%20width=%227.5%22%20height=%227.5%22%20rx=%221.5%22/%3E%3Crect%20x=%223%22%20y=%2213.5%22%20width=%227.5%22%20height=%227.5%22%20rx=%221.5%22/%3E%3Crect%20x=%2213.5%22%20y=%2213.5%22%20width=%227.5%22%20height=%227.5%22%20rx=%221.5%22/%3E%3C/svg%3E");
}

.home .klf-contact {
	--klf-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5.5%204h14A1.5%201.5%200%200%201%2021%205.5v9a1.5%201.5%200%200%201-1.5%201.5H9.5L4%2020.5V5.5A1.5%201.5%200%200%201%205.5%204z%22/%3E%3C/svg%3E");
}

.home .klf-month > .klf-block__heading,
.home .klf-taxtrips > .klf-block__heading,
.home .klf-alltrips > .klf-block__heading,
.home .klf-contact > .klf-block__heading {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* หัวข้อบล็อกทริปว่างเป็นแบบจัดกลาง ไม่มีแถบดำ — flex ทำให้ text-align
   ที่ตั้งไว้ไม่มีผล ต้องสั่งจัดกลางด้วย justify-content แทน */
.home .klf-weekly .klf-block__heading {
	justify-content: center;
}

.home .klf-month > .klf-block__heading::before,
.home .klf-taxtrips > .klf-block__heading::before,
.home .klf-alltrips > .klf-block__heading::before,
.home .klf-contact > .klf-block__heading::before {
	content: "";
	/* ผูกขนาดกับตัวอักษร หัวข้อ 18px ได้ไอคอน 23px หัวข้อ 32px ได้ 40px
	   ไม่ต้องมาไล่ตั้งขนาดรายบล็อก */
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat var(--klf-icon);
	mask: center / contain no-repeat var(--klf-icon);
}

@media (max-width: 560px) {
	.home .klf-month > .klf-block__heading,
	.home .klf-taxtrips > .klf-block__heading,
	.home .klf-alltrips > .klf-block__heading,
	.home .klf-contact > .klf-block__heading {
		gap: 8px;
	}
}

/* ---------- ทริปทั้งหมด + ปุ่มโหลดเพิ่มเติม ----------

   การ์ดที่ยังไม่ถึงคิวถูกพิมพ์มาในหน้าแล้วแต่ซ่อนไว้ ปุ่มแค่ถอดคลาสนี้ออก
   ใช้ display:none ไม่ใช่ visibility เพราะต้องไม่กินพื้นที่ในกริด
   และต้องไม่ถูก Tab เข้าไปโดนตอนที่ยังมองไม่เห็น */

.klf-card--more {
	display: none;
}

.klf-alltrips__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.klf-more {
	padding: 11px 42px;
	border: 1px solid var(--klf-ink-strong);
	border-radius: 50px;
	background: none;
	color: var(--klf-ink-strong);
	font-family: var(--klf-font);
	font-size: var(--klf-text-sm);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

.klf-more:hover,
.klf-more:focus-visible {
	background: var(--klf-ink-strong);
	color: #fff;
}

.klf-alltrips__link {
	color: var(--klf-muted);
	font-size: var(--klf-text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.klf-alltrips__link:hover,
.klf-alltrips__link:focus-visible {
	color: var(--klf-ink-strong);
}

/* ---------- ทริปตามหมวด (ฤดูกาล / ฟอร์มทีมจอง) ----------

   ใช้การ์ดชุดเดียวกับบล็อกรายเดือน ต่างกันแค่หัวข้อหมวดคั่น
   เว้นมากกว่าหัวข้อเดือนอยู่บ้าง เพราะคั่นระหว่างตารางการ์ด
   ไม่ใช่ระหว่างรายการบรรทัด ถ้าใช้ระยะเดียวกันหัวข้อจะติดรูปแถวบน */

.klf-taxtrips .klf-month__group {
	margin-top: 34px;
	/* หัวข้อหมวดวางกลางและตัวใหญ่กว่าหัวข้อเดือน เพราะมันคั่นชุดการ์ดเต็มแถว
	   ไม่ใช่คั่นรายการบรรทัด ถ้าชิดซ้าย 18px เท่ากันจะจมหายไปกับชื่อทริป

	   ตัวเลขใหญ่กว่าหัวข้อบล็อก (18px) แต่ลำดับความสำคัญไม่สลับ
	   เพราะหัวข้อบล็อกได้น้ำหนักจากแถบดำเต็มความกว้าง ไม่ได้จากขนาดตัวอักษร */
	text-align: center;
	font-size: 22px;
	margin-bottom: 14px;
}

.klf-taxtrips .klf-month__group:first-of-type {
	margin-top: 0;
}

/* เส้นคั่นระหว่างหมวด — สี #e2e2e2 เดียวกับ divider ของ Elementor ในหน้าบริการ
   จะได้เป็นเส้นแบบเดียวกันทั้งเว็บ ไม่ใช่เส้นใหม่ที่บังเอิญคล้ายกัน

   ทำเป็น border-top ของหัวข้อ ไม่ใช่ <hr> แยกใน PHP เพราะหมวดไหนไม่มีทริป
   หัวข้อนั้นจะไม่ถูกพิมพ์ออกมาเลย ถ้าเส้นเป็นชิ้นของตัวเองจะเหลือเส้นลอยค้าง
   ผูกติดกับหัวข้อแล้วเส้นหายไปพร้อมกันเสมอ

   :not(:first-of-type) กันเส้นซ้ำใต้แถบดำของหัวข้อบล็อก */
.klf-taxtrips .klf-month__group:not(:first-of-type) {
	padding-top: 28px;
	border-top: 1px solid var(--klf-line);
}

@media (max-width: 560px) {
	.klf-taxtrips .klf-month__group {
		font-size: 20px;
	}

	.klf-taxtrips .klf-month__group:not(:first-of-type) {
		padding-top: 22px;
	}
}

@media (max-width: 880px) {
	.klf-month__list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.klf-month__list--cards { grid-template-columns: 1fr; }

	.klf-hero { min-height: 380px; }
	.klf-social__btn { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.klf-card__media img { transition: none; }
	.klf-card__link:hover .klf-card__media img { transform: none; }

	/* JS จะไม่เริ่มหมุนสไลด์อยู่แล้ว บรรทัดนี้กันเผื่อกรณีที่ผู้ใช้
	   เปลี่ยนค่าระบบหลังหน้าโหลดเสร็จ — ค้างรูปแรกไว้เฉยๆ */
	.klf-hero__slide { transition: none; }
}

/* ---------- แกลเลอรี่รูปทริป ----------

   เว็บเดิมวางไว้ล่างสุดก่อนส่วนติดต่อ เป็นตาราง 4 คอลัมน์รูปจัตุรัส
   กดแล้วขยายได้ ตรงนี้ทำตามนั้น

   aspect-ratio 1/1 ทำให้ทุกช่องเท่ากันโดยไม่ต้องรู้สัดส่วนรูปต้นฉบับ
   ซึ่งในแกลเลอรี่ชุดเดียวมีทั้งแนวตั้งแนวนอนปนกัน */

.klf-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--klf-cols, 4), minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klf-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: var(--klf-surface-alt);
}

.klf-gallery__item a {
	display: block;
	line-height: 0;
}

.klf-gallery__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 200ms ease;
}

.klf-gallery__item a:hover .klf-gallery__img,
.klf-gallery__item a:focus-visible .klf-gallery__img {
	transform: scale(1.04);
}

@media (max-width: 880px) {
	.klf-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	/* สองคอลัมน์บนมือถือ ไม่ใช่คอลัมน์เดียว
	   รูปเดียวเต็มจอทำให้ต้องเลื่อนยาวมากกว่าจะดูครบสิบกว่ารูป */
	.klf-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.klf-gallery__img { transition: none; }
	.klf-gallery__item a:hover .klf-gallery__img { transform: none; }
}

/* ---------- หน้าผลค้นหา ----------

   คำโปรยถูกตัดเหลือ 120 ตัวอักษรมาจากปลั๊กอินแล้ว (ดู inc/search.php)
   แต่ตัวอักษรไทยกว้างไม่เท่ากัน 120 ตัวจึงยังกินได้ 4 หรือ 5 บรรทัด
   line-clamp ล็อกให้จบที่ 4 บรรทัดเสมอ การ์ดทุกใบจึงสูงเท่ากันจริง

   ตั้ง min-height ไว้ด้วย เพราะทริปที่คำโปรยสั้นมากจะได้ไม่ยุบจนการ์ด
   ในแถวเดียวกันเหลื่อมกัน */

.search-results .ast-excerpt-container {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	min-height: calc(4em * var(--klf-lh, 1.556));
	overflow: hidden;
}

/* ชื่อทริปยาวไม่เท่ากัน บางอันบรรทัดเดียว บางอันสองบรรทัด
   ทำให้การ์ดทั้งแถวถูกดันสูงตามใบที่ชื่อยาวสุด แถวข้างล่างเลยเตี้ยกว่า

   จองที่ไว้สองบรรทัดเสมอ แถวไหนก็สูงเท่ากันหมด
   ชื่อที่ยาวเกินสองบรรทัดถูกตัดด้วยจุดไข่ปลา — ยอมได้เพราะการ์ดเป็นแค่
   ตัวอย่าง กดเข้าไปก็เห็นชื่อเต็มอยู่ดี */
.search-results .entry-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;

	/* ชื่อทริปสูงบรรทัดละ 26px จากฟอนต์ 20px = line-height 1.3
	   2em (40px) จึงไม่พอสองบรรทัด ต้อง 2.6em (52px)

	   ประกาศซ้ำด้วยหน่วย lh ให้เบราว์เซอร์ที่รองรับใช้ค่านั้นแทน
	   จะได้ตามไปเองถ้าวันหนึ่งมีคนแก้ line-height */
	min-height: 2.6em;
	min-height: 2lh;
}

/* ---------- แถบเกี่ยวกับเราท้ายเว็บ ----------

   เว็บเดิมไม่มีส่วนนี้ ลูกค้าขอเพิ่มใหม่
   วางไว้บนแถวข้อมูลบริษัท คั่นด้วยเส้นบางๆ ไม่ใช้พื้นหลังสีทึบ
   เพราะทั้งเว็บเป็นพื้นขาวหมด ถ้าจู่ๆ ท้ายเว็บเป็นแถบสีจะดูหลุดออกมา */

.klf-about {
	padding: 44px 20px 36px;
	border-top: 1px solid var(--klf-line);
	text-align: center;
}

.klf-about__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	margin-inline: auto;
}

/* ตราวงกลมเดียวกับไอคอนเว็บ ใส่ alt ว่างเพราะเป็นของประดับ
   ชื่อบริษัทอยู่ในข้อความใต้ภาพอยู่แล้ว ไม่ต้องให้โปรแกรมอ่านซ้ำ */
.klf-about__mark {
	width: 72px;
	height: 72px;
	margin-bottom: 2px;
}

.klf-about__heading {
	margin: 0;
	color: var(--klf-ink-strong);
	font-family: var(--klf-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.klf-about__slogan {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.klf-about__slogan-en {
	color: var(--klf-ink-strong);
	font-weight: 700;
	font-size: clamp(18px, 2.4vw, 22px);
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.klf-about__slogan-th {
	color: var(--klf-ink);
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.6;
}

.klf-about__text {
	margin: 6px 0 0;
	color: var(--klf-muted);
	font-size: var(--klf-text-sm);
	line-height: 1.8;
}

@media (max-width: 560px) {
	.klf-about { padding: 32px 18px 26px; }
	.klf-about__mark { width: 60px; height: 60px; }
}

/* ---------- แถบชิปเลือกเดือน ---------- */

.klf-chips__label {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--klf-ink-strong);
	text-align: center;
}

/* ---------- การ์ดลิงก์หน้ารวมรายเดือน ("คลุกฝุ่นทริป") ----------

   เว็บเดิมพิมพ์ชื่อเดือนทับไว้ในไฟล์รูปเลย ตรงนี้วางเป็นข้อความทับด้วย CSS
   หน้าตาเหมือนกันแต่ไม่ต้องสั่งกราฟิกใหม่ทุกเดือน

   สัดส่วน 3:2 เท่ากับรูปต้นฉบับของเว็บเดิม (640x427) และเท่ากับการ์ดทริป
   ในบล็อกอื่น ๆ ของหน้านี้ */

.klf-mlinks__grid {
	display: grid;
	grid-template-columns: repeat(var(--klf-cols, 4), minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ตรึงสีทุกสถานะของลิงก์ไว้ที่ขาว
   ตัวการ์ดเป็นรูปเต็มใบ ถ้าวันหนึ่งมีปลั๊กอินหรือธีมมาตั้งสีลิงก์ที่เยี่ยมชมแล้ว
   หรือสีตอน hover ตัวหนังสือจะเปลี่ยนสีไปคาอยู่บนรูป — :visited มีค่าความจำเพาะ
   สูงกว่า .klf-mlink__link เฉย ๆ เขียนดักไว้เลยจะได้ไม่ต้องมาไล่หาทีหลัง */
.klf-mlink__link,
.klf-mlink__link:link,
.klf-mlink__link:visited,
.klf-mlink__link:hover,
.klf-mlink__link:focus,
.klf-mlink__link:active {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	color: #fff;
	text-decoration: none;
}

.klf-mlink__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

.klf-mlink__media,
.klf-mlink__media img,
.klf-mlink__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.klf-mlink__placeholder {
	background: var(--klf-surface-alt);
}

.klf-mlink__media img {
	transition: transform 350ms var(--klf-ease, ease);
}

.klf-mlink__link:hover .klf-mlink__media img {
	transform: scale(1.05);
}

/* ม่านทึบทับรูป — รูปทริปเป็นภาพถ่ายจริงที่สว่างไม่เท่ากันทุกใบ
   บางใบเป็นท้องฟ้าโล่งตรงกลางพอดี ตัวหนังสือขาวจะจมหายไปเลย
   ม่านต้องเข้มพอสำหรับใบที่สว่างที่สุด ไม่ใช่ใบที่เข้มที่สุด */
.klf-mlink__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px;
	text-align: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.52));
	transition: background 250ms var(--klf-ease, ease);
}

/* ตอน hover รูปขยายเข้ามา ส่วนที่อยู่หลังตัวหนังสือเปลี่ยนไปจากตอนอยู่นิ่ง
   เข้มม่านขึ้นอีกขั้นด้วย hover จะได้ "อ่านง่ายขึ้น" ไม่ใช่อ่านยากลง */
.klf-mlink__link:hover .klf-mlink__caption,
.klf-mlink__link:focus-visible .klf-mlink__caption {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.62));
}

.klf-mlink__th {
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 400;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.5);
}

.klf-mlink__en {
	font-size: clamp(13px, 1.3vw, 16px);
	font-weight: 300;
	letter-spacing: 0.18em;
	/* letter-spacing ดันตัวอักษรตัวสุดท้ายเกินกึ่งกลางไปทางขวา
	   เยื้องกลับมาครึ่งหนึ่งให้เข้าแกนเดียวกับบรรทัดไทยข้างบน */
	text-indent: 0.18em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.5);
}

.klf-chips__label {
	margin-bottom: 14px;
}

@media (max-width: 880px) {
	.klf-mlinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
	.klf-mlinks__grid { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.klf-mlink__media img { transition: none; }
	.klf-mlink__link:hover .klf-mlink__media img { transform: none; }
}

/* ---------- ช่องค้นหาทริป ----------
   เว็บเดิมวางไว้ใต้ tagline ใน hero — แคปซูลพื้นใส ขอบขาว 2px ตัวหนังสือขาว */

.klf-search {
	position: relative;
	display: flex;
	align-items: center;
	width: min(373px, 100%);
	margin: 14px auto 0;
}

/* ต้องใช้ .klf-search นำหน้าเพื่อเอาชนะกฎ input[type=search] ของ Astra
   ที่ประกาศทีหลังและตั้ง background ขาว กับ border-radius 4px ทับ
   และต้องระบุ background เอง เพราะถ้าไม่ระบุจะได้พื้นขาวทึบของ Astra มาแทน */
.klf-search .klf-search__input {
	width: 100%;
	height: 35px;
	min-height: 35px;
	margin: 0;
	padding: 0 42px 0 16px;
	border-radius: 25px;
	box-shadow: none;
	font-family: var(--klf-font);
	font-size: 14px;
	line-height: 1.4;
	background: transparent;
	transition: border-color 150ms ease, background 150ms ease;
	appearance: none;
}

/* กากบาทล้างค่าของ Safari/Chrome ทับปุ่มแว่นขยายพอดี เอาออก */
.klf-search__input::-webkit-search-cancel-button { display: none; }

.klf-search .klf-search__btn {
	position: absolute;
	inset-inline-end: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.klf-search__btn svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* บนรูป hero */
.klf-search.klf-search--light .klf-search__input {
	border: 2px solid #fff;
	color: #fff;
}

.klf-search.klf-search--light .klf-search__input::placeholder {
	color: rgba(255, 255, 255, 0.85);
}

.klf-search.klf-search--light .klf-search__input:focus {
	outline: none;
	background: rgba(0, 0, 0, 0.25);
	border-color: #fff;
}

.klf-search--light .klf-search .klf-search__btn { color: #fff; }

/* บนพื้นขาว */
.klf-search.klf-search--dark .klf-search__input {
	border: 2px solid var(--klf-line);
	color: var(--klf-ink);
}

.klf-search.klf-search--dark .klf-search__input::placeholder { color: var(--klf-muted); }

.klf-search.klf-search--dark .klf-search__input:focus {
	outline: none;
	border-color: var(--klf-ink-strong);
}

.klf-search--dark .klf-search .klf-search__btn { color: var(--klf-ink-strong); }

.klf-search__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   ปิด smooth scroll

   Elementor ตั้ง html { scroll-behavior: smooth } ไว้ใน frontend.css
   (ครอบด้วย @media prefers-reduced-motion: no-preference)

   ใช้ :root แทน html เพราะ specificity สูงกว่า (0,1,0 > 0,0,1)
   จึงชนะแน่นอนไม่ว่าไฟล์ CSS ของใครจะโหลดก่อนหลัง — ไม่ต้องพึ่ง !important

   ผลข้างเคียงที่ตั้งใจ: การกดลิงก์ที่กระโดดไปหัวข้อในหน้าเดียวกัน
   จะเด้งไปทันทีแทนการไถลนุ่มๆ
   ========================================================================== */

:root {
	scroll-behavior: auto;
}

/* ==========================================================================
   หน้ารีวิวทริป

   เว็บเดิมเป็นบทความภาพ — รูปใหญ่เต็มความกว้างเนื้อหา (1017px) สลับกับข้อความ
   เรียงลงมาคอลัมน์เดียว ไม่มีกรอบ ไม่มีมุมมน
   ========================================================================== */

.klf-review__figure {
	margin: 24px 0;
}

.klf-review__figure img,
.klf-review__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* ข้อความในรีวิวใช้สเกลเดียวกับทั้งเว็บ */
.entry-content .klf-review__figure + p,
.elementor-widget-theme-post-content p {
	margin-block: 0 14px;
}

.elementor-widget-theme-post-content h2 {
	margin: 28px 0 10px;
	font-family: var(--klf-font);
	font-size: var(--klf-text);
	font-weight: 700;
	color: var(--klf-ink-strong);
	line-height: var(--klf-lh);
}

@media (max-width: 600px) {
	.klf-review__figure {
		margin: 18px 0;
	}
}