/* =============================================================================
   site.css — สไตล์ที่ใช้ "ทั้งเว็บ" (ธีม v0.9.0 · Phase 1)
   header · แถบบนสุด · เมนู · footer · base typography

   แยกออกมาจาก home2.css ตอนทำ header/footer ให้เป็นของทั้งเว็บ (6 ก.ย. 2026)
   -> ทุกหน้า/บทความได้หน้าตาเดียวกับหน้าแรก โดยไม่ต้องโหลด CSS ของหน้าแรกมาด้วย

   ผูกกับคลาส .kf-site (ใส่ให้ทุกหน้าผ่าน body_class ยกเว้น /home-v1/)
   ============================================================================= */

/* ---------- ฟอนต์ทั้งเว็บ ----------
   อยู่ที่ตัวแปร 2 ตัวนี้ที่เดียว — ที่อื่นเรียก var() หมด (รวม inline style ที่ generator สร้าง)
   10 ก.ย. 2026 JoJho เคาะ: ค่าเริ่มต้น = Google Sans ทั้งหัวข้อและเนื้อหา
   ของเดิม (ทาง C ที่ลูกค้าเคาะ 25 ส.ค.) = Prompt เนื้อหา · Trirong หัวข้อ — สลับดูได้จากปุ่มมุมล่างซ้าย

   🔴 ต้องนิยามที่ :root เท่านั้น ห้ามย้ายไปไว้ใน body
      เคยไว้ที่ `body.kf-site` แล้วสวิตช์ไม่ทำงาน เพราะค่าที่ตั้งบน body
      บังค่าที่สวิตช์เขียนทับไว้บน html สำหรับ body และลูกทั้งหมด
      (นิยามที่ :root ยังครอบหน้าที่ไม่มีคลาส kf-site ด้วย) */
:root {
	--kf-font-body: 'Google Sans', system-ui, sans-serif;
	--kf-font-head: 'Google Sans', system-ui, sans-serif;
}

/* ---------- base (ยกจาก <helmet> ของดีไซน์ Compact) ---------- */
body.kf-site *,
body.kf-site *::before,
body.kf-site *::after { box-sizing: border-box; }

body.kf-site {
	margin: 0;
	background: #fff;
	color: #131313;
	font-family: var(--kf-font-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

body.kf-site a { color: inherit; text-decoration: none; }
/* 🔴 ใช้ :where(:hover) ไม่ใช่ :hover เฉย ๆ — ตั้งใจ "ลดน้ำหนัก" ของกฎนี้
   เดิม `body.kf-site a:hover` = (0,2,2) ซึ่ง **แรงกว่าปุ่มในเนื้อหา** อย่าง
   `body.kf-catalog .kf-cat-btn-primary` = (0,2,1)
   -> พอเอาเมาส์ชี้ปุ่มพื้นฟ้า ตัวอักษรขาวถูกทับเป็น #0284b0 = อ่านไม่ออก "สีจม"
      (ปุ่มใน footer ไม่เป็น เพราะเขียน color เป็น inline style ซึ่งชนะทุกกฎ)
   :where() มีน้ำหนัก 0 -> กฎนี้เหลือ (0,1,2) = เป็นแค่ค่าเริ่มต้นของลิงก์ทั่วไป
   อะไรที่ตั้งสีของตัวเองไว้ (ปุ่ม/ชิป/การ์ด) จึงชนะเสมอ ไม่ต้องไล่ใส่ :hover ทีละปุ่ม
   ⚠️ เบราว์เซอร์เก่ามาก ๆ ที่ไม่รู้จัก :where() จะข้ามกฎนี้ไป = ลิงก์ธรรมดาไม่เปลี่ยนสีตอน hover
      ยอมได้ เพราะเครื่องที่ไม่รองรับคือจอสัมผัสซึ่งไม่มี hover อยู่แล้ว */
body.kf-site a:where(:hover) { color: #0284b0; }
body.kf-site img { max-width: 100%; }

/* ---------- hover ที่ runtime ของดีไซน์ inject มา (.scp0-.scp3) ----------
   ต้นฉบับเก็บไว้ที่ build-home2/compact-hover.css
   .scp0 ใช้กับปุ่ม CTA ในเมนู จึงต้องอยู่ในไฟล์ระดับเว็บ */
body.kf-site .scp0:hover { background: rgb(0, 146, 200) !important; color: rgb(255, 255, 255) !important; }
body.kf-site .scp1:hover { border-color: rgb(0, 174, 239) !important; color: rgb(2, 132, 176) !important; }
body.kf-site .scp2:hover { border-color: rgb(0, 174, 239) !important; }
body.kf-site .scp3:hover { border-color: rgb(255, 255, 255) !important; color: rgb(255, 255, 255) !important; }

/* =============================================================================
   RESPONSIVE — แทน applyResponsive() ของดีไซน์ (JS อ่าน innerWidth)
   ============================================================================= */

/* 🔴 breakpoint ของเมนู = 1024px (ดีไซน์ต้นทางใช้ 860)
   เหตุผล: Phase 1 เพิ่มลิงก์ "เครื่องใช้ไฟฟ้า" เป็นลิงก์ที่ 7 + ปุ่ม CTA
   วัดจริงแล้ว -> ที่ 880px header สูงจาก 69 เป็น 90px (เริ่มอึดอัด)
                  ที่ 1000px ยังพอดี (สูงคงที่ 69px เหลือที่ว่าง 37px)
   ใช้ 1024 เพื่อกันเหนียว · ต่ำกว่านั้นใช้แฮมเบอร์เกอร์ซึ่งทำงานได้ดีอยู่แล้ว
   ถ้าลด/เพิ่มรายการเมนู ให้วัดใหม่แล้วปรับตัวเลขนี้ */
body.kf-site #kfNav    { display: flex; }
body.kf-site #kfBurger { display: none; }

@media (max-width: 1023px) {
	body.kf-site #kfNav    { display: none; }
	body.kf-site #kfBurger { display: flex; }
}

/* ---------------------------------------------------------------------------
   SUBMENU 1 ชั้น (1 ต.ค. 2026 — JoJho ขอให้ "ไอเดีย" เป็น submenu)
   🔑 ไม่ใช้ JS เลย — เปิดด้วย :hover (เมาส์) และ :focus-within (คีย์บอร์ด Tab)
      ตัวแม่ยังเป็นลิงก์จริง กดเข้าหน้าตัวเองได้ ไม่ใช่ปุ่มเปล่า
   โผล่เฉพาะจอ >= 1024px เพราะต่ำกว่านั้นเมนูเป็นแฮมเบอร์เกอร์ (เยื้องเอาในลิ้นชัก)
   --------------------------------------------------------------------------- */
body.kf-site .kf-navitem { position: relative; display: inline-flex; align-items: center; }
body.kf-site .kf-navtop  { display: inline-flex; align-items: center; gap: 5px; }

body.kf-site .kf-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4.5px solid currentColor;
	opacity: .5;
	transition: transform .15s, opacity .15s;
}
body.kf-site .kf-navitem:hover .kf-caret,
body.kf-site .kf-navitem:focus-within .kf-caret { opacity: 1; transform: rotate(180deg); }

body.kf-site .kf-sub {
	position: absolute;
	top: 100%;
	left: -10px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	min-width: 230px;
	/* เว้นช่องบนไว้ 8px ให้เมาส์ลากลงมาได้โดยแผงไม่ปิดก่อน */
	margin-top: 8px;
	padding: 6px;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(16, 31, 51, .13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	/* visibility เป็น discrete — ถ้า transition มันตรง ๆ แผงจะกดได้จริงก็ต่อเมื่ออนิเมชันจบ (ช้าไป 150ms)
	   -> เปิด = visibility 0s ทันที · ปิด = หน่วงไว้จนกว่าจะจางหมด */
	transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
/* สะพานใส ๆ คลุมช่องว่าง 8px ระหว่างตัวแม่กับแผง กันแผงปิดตอนเมาส์ผ่านช่องว่าง */
body.kf-site .kf-sub::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}
body.kf-site .kf-navitem:hover .kf-sub,
body.kf-site .kf-navitem:focus-within .kf-sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .15s, transform .15s, visibility 0s;
}

body.kf-site .kf-sub a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
	color: #1c2126;
	text-decoration: none;
}
body.kf-site .kf-sub a:hover         { background: #f4f8fb; color: #00AEEF; }
body.kf-site .kf-sub a[aria-current] { color: #00AEEF; font-weight: 500; }

/* อยู่หน้าลูก -> ตัวแม่ติดสีด้วย คนจะได้รู้ว่าอยู่สาขาไหน */
body.kf-site .kf-current-parent { color: #00AEEF; }

/* ของที่ซ่อนบนจอเล็ก (ดีไซน์ใช้ innerWidth < 640) */
body.kf-site [data-hide-sm]    { display: inline; }
body.kf-site img[data-hide-sm] { display: block; }

@media (max-width: 639px) {
	body.kf-site [data-hide-sm] { display: none !important; }
}

/* หน้าปัจจุบันในเมนู */
body.kf-site .kf-current { color: #0284b0; }

/* =============================================================================
   แถบหัวหน้า (page head band) — 7 ก.ย. 2026
   JoJho: "ระหว่าง main menu กับ content มันดูโล้น ๆ ไปหน่อย"
   ทำ 3 ชั้นพร้อมกัน: เส้นคั่นใต้ header + breadcrumb + แถบพื้นอ่อนที่มีชื่อหน้า
   ============================================================================= */

/* (1) เส้นคั่นใต้ header — แก้ปัญหา "ขาวชนขาว" ระหว่างหัวเว็บกับเนื้อหา
   ไม่ใส่บนหน้าแรก เพราะฮีโร่ของดีไซน์ต่อกับ header พอดีอยู่แล้ว */
body.kf-site:not(.kf-home2) header { border-bottom: 1px solid #ededed; }

/* (3) ตัวแถบ — ภาพครัวจริง + overlay ไล่เฉด (JoJho สั่ง 8 ก.ย. "ให้ดูเป็นธีมเดียวกับ above footer")
   รูปมาจาก `--kf-phead-img` ที่ PHP ใส่ให้เป็น inline style -> **เปลี่ยนตามแต่ละหน้าได้** (kf_page_head_image())

   overlay ไล่เฉดจากซ้ายเข้ม -> ขวาอ่อน แทนที่จะทึบเท่ากันทั้งแถบ เพราะ:
     · ซ้ายเป็นที่อยู่ของ breadcrumb + ชื่อหน้า -> ต้องเข้มพอให้ตัวหนังสือขาวอ่านชัด
     · ขวาปล่อยให้เห็นภาพครัวมากขึ้น -> **แก้ปัญหา "ทางขวาดูโล่ง" ที่ JoJho ทักไว้ไปในตัว**
   ค่า rgba(10,12,13,...) ตัวเดียวกับแถบ CTA เหนือ footer เพื่อให้เป็นธีมเดียวกันจริง ๆ */
body.kf-site .kf-phead {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background:
		/* มือถือ: แถบแคบ ตัวหนังสือกินเกือบเต็มความกว้าง -> ไล่เฉดน้อยกว่า ให้ยังอ่านชัดทั้งแถบ */
		linear-gradient(90deg, rgba(10,12,13,.90) 0%, rgba(10,12,13,.74) 62%, rgba(10,12,13,.58) 100%),
		var(--kf-phead-img, none) center center / cover no-repeat,
		#1b2226;                       /* สีสำรอง เผื่อรูปโหลดไม่ขึ้น ตัวหนังสือขาวจะได้ยังอ่านออก */
	padding: 18px clamp(16px, 3vw, 26px) 22px;
	margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* (2) breadcrumb */
/* ตัวหนังสือบนแถบเป็นสีขาวทั้งหมด เพราะพื้นหลังเป็นภาพ + overlay เข้ม */
body.kf-site .kf-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
	margin-bottom: 8px;
}
body.kf-site .kf-crumb a { color: rgba(255, 255, 255, .72); }
/* ช่วงที่ใช้นิ้วจิ้ม: ขยายกล่องกดของ breadcrumb ให้ถึง 40px ด้วย padding
   แล้วหักกลับด้วย margin ติดลบ -> พื้นที่กดใหญ่ขึ้น แต่หน้าตาไม่ขยับสักพิกเซล */
@media (max-width: 1023px), (pointer: coarse) {
	body.kf-site .kf-crumb a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		margin-block: -11px;
	}
}
body.kf-site .kf-crumb a:hover { color: #fff; }
body.kf-site .kf-crumb-sep { color: rgba(255, 255, 255, .4); }
body.kf-site .kf-crumb-now {
	color: #fff;
	/* ชื่อหน้ายาว ๆ (บทความ) ตัดไม่ให้ breadcrumb ยาวเป็นพรืดบนมือถือ */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.kf-site .kf-phead-title {
	font-family: var(--kf-font-head);
	font-weight: 400;
	font-size: clamp(24px, 5.2vw, 36px);
	line-height: 1.25;
	margin: 0;
	color: #fff;
	text-wrap: balance;
	/* เงาบาง ๆ กันเคสภาพส่วนนั้นสว่างกว่าที่คาด (เช่น หน้าที่ตั้ง featured image เอง) */
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
	max-width: 26ch;
}

/* หมายเหตุ: หัวข้อเดิมของ Hello Elementor ถูกปิดที่ต้นทางด้วย filter `hello_elementor_page_title`
   ใน functions.php (ไม่ได้ซ่อนด้วย CSS) -> h1 เหลืออันเดียวจริง ๆ ใน DOM ไม่ใช่แค่มองไม่เห็น */

@media (min-width: 768px) {
	body.kf-site .kf-phead { padding: 20px clamp(20px, 2.6vw, 30px) 26px; }
	body.kf-site .kf-crumb-now { white-space: normal; }
}

/* จอกว้าง: แถบสูงขึ้นให้ภาพครัวมีที่หายใจ · ชื่อหน้าดันลงล่างแบบแบนเนอร์ */
@media (min-width: 900px) {
	body.kf-site .kf-phead {
		min-height: 190px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 22px clamp(22px, 2.8vw, 34px) 26px;

		/* 🔑 ไล่เฉดชัดกว่ามือถือมาก (JoJho สั่ง 8 ก.ย.: "ซ้ายมืดรองรับ text · ขวาค่อย ๆ สว่าง
		   ให้เป็นภาพจริงชัดขึ้น") — จอกว้างมีที่เหลือทางขวาที่ตัวหนังสือไปไม่ถึง
		   4 stop ไม่ใช่ 2 เพื่อให้ช่วงเข้มค้างอยู่โซนตัวหนังสือก่อน แล้วค่อยจางเร็วช่วงกลาง-ขวา
		   จบที่ .10 ไม่ใช่ 0 — เหลือ tint บาง ๆ ให้ภาพยังกลมกลืนกับโทนเว็บ ไม่หลุดเป็นรูปดิบ */
		background:
			linear-gradient(90deg,
				rgba(10,12,13,.93) 0%,
				rgba(10,12,13,.86) 26%,
				rgba(10,12,13,.46) 62%,
				rgba(10,12,13,.10) 100%),
			var(--kf-phead-img, none) center center / cover no-repeat,
			#1b2226;
	}
	body.kf-site .kf-phead-title { max-width: 34ch; }
}

/* =============================================================================
   FOOTER — ดีไซน์ใหม่ตาม mockup ของ JoJho (7 ก.ย. 2026)

   ต่างจากดีไซน์ Compact เดิม:
     · โซเชียลย้ายจากแถบล่างขึ้นมาอยู่คอลัมน์แบรนด์
     · เพิ่ม DBD Verified Silver + ข้อความจดทะเบียนพาณิชย์อิเล็กทรอนิกส์
     · เมนูไหลแบบ "ลงก่อนแล้วค่อยข้าม" (column-major) — ของเดิมไล่ข้างก่อนซึ่งอ่านสะดุด
     · คอลัมน์โชว์รูมมีเส้นคั่นก่อนบรรทัดเวลาทำการ
     · คอลัมน์ติดต่อเป็นไอคอน + ข้อความ (มีบรรทัดรองบอกว่า LINE ไหนใช้เรื่องอะไร)
     · แถบล่างมีลิงก์นโยบาย/เงื่อนไข (ขึ้นเฉพาะเมื่อหน้ามีจริง — kf_footer_legal_links())

   markup ทั้งหมด generator เขียนเอง (FOOTER_BLOCK ใน port-home3.py) ไม่มี inline style
   -> layout คุมจากไฟล์นี้ที่เดียว
   ============================================================================= */

/* ---------- โครงคอลัมน์ (mobile-first) ----------
   ลำดับคอลัมน์: 1 แบรนด์ · 2 เมนูหลัก · 3 บริการ · 4 โชว์รูม · 5 ติดต่อเรา */
body.kf-site .kf-foot-grid {
	/* 🔑 จังหวะบรรทัดของทั้ง footer บนมือถือ — ผูกไว้ตัวแปรเดียว (JoJho ทัก 7 ก.ย.
	   ว่าช่องไฟเมนูควรเท่ากับข้อความในคอลัมน์โชว์รูม เพราะอยู่ติดกันในบล็อกเดียว ตาจับได้)
	   ใช้กับ 2 ที่: ความสูงแถวของลิสต์ลิงก์ + line-height ของบล็อกที่อยู่
	   -> เท่ากันโดยโครงสร้าง แก้ค่าเดียวขยับพร้อมกัน ไม่มีทางหลุดจากกันอีก
	   30px (JoJho ขอชิดขึ้นอีก 12 ก.ย.): กระชับกว่าเดิม แต่ยังสูงกว่าเกณฑ์ WCAG 2.5.8 AA (24px)
	   🔴 ต่ำกว่า "tap target ≥ 40px" ในกติกาห้อง — JoJho เลือกความกระชับเอง จดไว้ให้เห็นตรงนี้ */
	--kf-foot-row: 30px;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 18px;
}
body.kf-site .kf-foot-grid > div { min-width: 0; }

/* มือถือ: ทั้ง 4 คอลัมน์กินเต็มแถว
   🔑 เดิมอ้าง :nth-child(5) = คอลัมน์ "ติดต่อเรา" แต่พอตัด "บริการ" ออก (JoJho 5 ต.ค. 2026)
      ติดต่อขยับมาเป็นตัวที่ 4 -> ถ้าไม่แก้เลขนี้ ติดต่อจะไปเบียดอยู่ครึ่งแถวกับโชว์รูม
      บทเรียน: เลือกด้วย :nth-child() แล้วลบพี่น้องออก ต้องไล่แก้เลขทุกที่ที่อ้างถึง */
body.kf-site .kf-foot-grid > :nth-child(1),
body.kf-site .kf-foot-grid > :nth-child(2),
body.kf-site .kf-foot-grid > :nth-child(3),
body.kf-site .kf-foot-grid > :nth-child(4) { grid-column: 1 / -1; }

/* หมายเหตุ: DBD ย้ายออกจาก grid ไปอยู่ในแถบล่างแล้ว (7 ก.ย. รอบสุดท้าย)
   จึงไม่ต้องใช้ `order` จัดลำดับใน grid อีก — ลำดับ DOM ตรงกับที่ต้องการอยู่แล้ว
   🔑 บทเรียนที่เก็บไว้: ถ้าจะใช้ `order` ย้ายของใน flex/grid **ต้องระบุลำดับทั้งชุด**
      เพราะค่าเริ่มต้นคือ 0 — ตั้งแค่ตัวเดียวเป็น 2 มันจะไปอยู่ท้ายสุดแทนที่จะเป็นอันดับ 2 */

body.kf-site .kf-foot-h {
	font-size: 14px;
	font-weight: 500;
	color: #131313;
	margin-bottom: 12px;
}

/* ---------- คอลัมน์แบรนด์ ---------- */
body.kf-site .kf-foot-tag {
	font-size: 13px;
	line-height: 1.7;
	color: #767676;
	margin: 0 0 16px;
	max-width: 34ch;
}
body.kf-site .kf-foot-social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
/* ---------- DBD — อยู่ในแถบล่าง แถวเดียวกับ copyright (JoJho สั่ง 7 ก.ย. รอบสุดท้าย) ----------
   มือถือ: เรียงลง จัดกึ่งกลาง — โลโก้ก่อน แล้วข้อความ (ตาม DOM)
   เดสก์ท็อป: ชิดขวา แนวนอน "ข้อความก่อน แล้วรูปขวาสุด" -> ใช้ row-reverse สลับ ไม่ต้องยุ่งกับ order */
body.kf-site .kf-foot-dbd {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
body.kf-site .kf-foot-dbd img {
	width: 150px;
	height: auto;
	display: block;
}
body.kf-site .kf-foot-dbd p {
	font-size: 11.5px;
	line-height: 1.75;
	color: #8a8f90;
	margin: 0;
}

/* ---------- ลิสต์ลิงก์ (เมนูหลัก / บริการ) ----------
   🔴 มือถือ: กติกาห้องข้อ 4 บังคับ `footer a { min-height: 40px }` (tap target)
      แต่คอลัมน์ "บริการ" เป็น <span> ไม่ใช่ลิงก์ จึงไม่โดนกฎนั้น
      -> สองคอลัมน์ที่วางข้างกันมีจังหวะบรรทัดไม่เท่ากัน (49px vs 33px) ดูไม่เข้าชุด (JoJho ทัก 7 ก.ย.)
      แก้: ให้ "ทุกลูก" ของลิสต์สูงเท่ากัน 40px แล้ว **ตัด gap ออก** เพราะความสูงแถวคุมระยะให้แล้ว
           ได้จังหวะเป็นตารางเดียวกันทั้งสองคอลัมน์ · tap target ยังได้ 40px ตามกติกา */
body.kf-site .kf-foot-list {
	display: grid;
	gap: 0;
	font-size: 13px;
	color: #767676;
	min-width: 0;
}
body.kf-site .kf-foot-list > * {
	/* 🔴 ใช้เฉพาะ "ลิสต์ลิงก์ใน footer" · ปุ่ม CTA / เมนูมือถือ / แฮมเบอร์เกอร์ ยังคง 40px+ ตามเดิม */
	min-height: var(--kf-foot-row);
	display: flex;
	align-items: center;
	line-height: 1.45;      /* ทับ line-height 1.72 ของ body — บรรทัดเดียวไม่ต้องหลวมขนาดนั้น */
}

/* เมนู 11 รายการ -> ไหล "ลงก่อนแล้วค่อยข้าม" 6 แถว x 2 คอลัมน์
   (ของเดิมไหลแบบ row-major = อ่านข้ามซ้าย-ขวา ซึ่งไม่ใช่วิธีที่คนสแกนเมนู) */
body.kf-site .kf-foot-menu {
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	/* 🔑 ต้องกำหนดคอลัมน์ให้ "เท่ากันสองช่อง + gap เท่ากับ grid แม่"
	   ไม่งั้น grid-auto-flow:column จะสร้างคอลัมน์ตามความกว้างเนื้อหา (auto)
	   -> คอลัมน์ขวาของเมนูไม่ตรงแนวกับ "โชว์รูม" ที่อยู่แถวถัดลงไป (JoJho ทัก 12 ก.ย.)
	   ค่านี้ตรงกับ .kf-foot-grid ที่เป็น repeat(2, 1fr) + column-gap 18px เป๊ะ */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18px;
}

/* ---------- คอลัมน์โชว์รูม ---------- */
body.kf-site .kf-foot-addr {
	font-size: 13px;
	line-height: var(--kf-foot-row);   /* เท่ากับแถวเมนู — เทียบกันได้ตรง ๆ เพราะอยู่คอลัมน์ติดกัน */
	color: #767676;
	font-style: normal;
	margin: 0;
}
/* เวลาทำการ — แยก 2 บรรทัด "วัน" กับ "เวลา" แต่ละบรรทัดมีไอคอนของตัวเอง
   (JoJho สั่ง 7 ก.ย.: ปฏิทินสำหรับวัน · นาฬิกาสำหรับเวลา)
   แต่ละบรรทัดสั้นพอที่จะไม่ตัดบรรทัดในทุกขนาดจอ -> เลิกใช้ &nbsp; กันคำกำพร้าแล้ว */
body.kf-site .kf-foot-hours {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #ededed;
	font-size: 13px;
	color: #767676;
	display: grid;
	gap: 6px;
}
body.kf-site .kf-foot-hrow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 22px;
}
body.kf-site .kf-foot-hico {
	width: 15px;
	height: 15px;
	flex-shrink: 0;        /* กันไอคอนโดนบีบตอนคอลัมน์แคบ */
	color: #00AEEF;
}

/* ---------- คอลัมน์ติดต่อเรา (ไอคอน + ข้อความ) ---------- */
body.kf-site .kf-foot-contact {
	display: grid;
	gap: 13px;
	min-width: 0;
}
body.kf-site .kf-foot-c {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	color: #767676;
}
body.kf-site .kf-foot-c:hover { color: #0284b0; }

body.kf-site .kf-foot-cico {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid #cfe6f2;
	color: #00AEEF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .18s ease, border-color .18s ease;
}
body.kf-site .kf-foot-cico svg { width: 16px; height: 16px; display: block; }
body.kf-site .kf-foot-c:hover .kf-foot-cico { color: #8a8f90; border-color: #dbdbdb; }

body.kf-site .kf-foot-ctxt { min-width: 0; }
body.kf-site .kf-foot-cval {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: #131313;
	overflow-wrap: anywhere;
}
body.kf-site .kf-foot-c.is-lead .kf-foot-cval {
	font-size: 16px;
	font-weight: 500;
}
body.kf-site .kf-foot-cnote {
	display: block;
	font-size: 11.5px;
	line-height: 1.5;
	color: #8a8f90;
	margin-top: 1px;
}

/* ---------- แถบล่าง = copyright + DBD ----------
   มือถือ: เรียงลง จัดกึ่งกลางทั้งหมด (copyright > โลโก้ DBD > ข้อความ) */
body.kf-site .kf-foot-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	margin-top: clamp(22px, 2.4vw, 32px);
	padding: 18px 0 24px;
	border-top: 1px solid #ededed;
	font-size: 12.5px;
	color: #8a8f90;
}

/* ---------- ลิงก์นโยบาย — อยู่ในคอลัมน์ "เมนูหลัก" เป็นรายการที่ 12 (JoJho สั่ง 7 ก.ย.)
   ไม่ต้องมีสไตล์พิเศษ เพราะเป็น grid item ใน .kf-foot-menu อยู่แล้ว
   จึงได้ความสูงแถว/สี/hover ชุดเดียวกับลิงก์เมนูอื่นโดยอัตโนมัติ ---------- */

/* =============================================================================
   ไต่ขึ้นจากมือถือ
   ============================================================================= */

@media (min-width: 768px) {
	body.kf-site .kf-foot-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 26px;
	}
	body.kf-site .kf-foot-grid > :nth-child(1),
	body.kf-site .kf-foot-grid > :nth-child(2),
	body.kf-site .kf-foot-grid > :nth-child(3),
	body.kf-site .kf-foot-grid > :nth-child(4) { grid-column: auto; }

	/* 🔴 การรีเซ็ตความสูงแถว footer ย้ายไปอยู่ที่ >=1024px แล้ว (ท้ายไฟล์)
	   ของเดิมอยู่ตรงนี้ (>=768px) โดยเขียนคอมเมนต์ว่า "จอใหญ่ไม่ได้กดด้วยนิ้ว"
	   แต่ iPad แนวตั้ง = 768 พอดี และยังเป็นเมนูแฮมเบอร์เกอร์ (เลย์เอาต์สัมผัส)
	   -> วัดจริงที่ 768 เจอลิงก์ footer สูงแค่ 19px ทั้งคอลัมน์ */
	body.kf-site .kf-foot-addr   { line-height: 1.85; }
	/* จอใหญ่ เมนูอยู่ในช่องของตัวเอง ไม่ได้ต้องเรียงให้ตรงกับแถวล่าง -> ให้กว้างตามเนื้อหา */
	body.kf-site .kf-foot-menu   { grid-template-columns: auto auto; }

	/* แถบล่าง: copyright ชิดซ้าย · DBD ชิดขวา แถวเดียวกัน */
	body.kf-site .kf-foot-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		gap: 20px;
	}
	/* row-reverse -> ลูกตัวหลัง (p) มาก่อน ตัวแรก (img) ไปขวาสุด
	   = "ข้อความก่อน แล้วรูปขวา" ตามที่ JoJho สั่ง โดยไม่ต้องสลับ DOM */
	body.kf-site .kf-foot-dbd {
		flex-direction: row-reverse;
		align-items: center;
		gap: 14px;
		text-align: right;
	}
	body.kf-site .kf-foot-dbd img { flex-shrink: 0; }
	/* ไม่ต้องจำกัดความกว้างแล้ว — จุดตัดบรรทัดคุมด้วย <br> ในตัวข้อความเอง
	   (ถ้าใส่ max-width ซ้ำ เบราว์เซอร์จะตัดเพิ่มจนได้ 3 บรรทัด) */
	body.kf-site .kf-foot-dbd p   { max-width: none; }
}

/* เดสก์ท็อป: 4 คอลัมน์ ถ่วงน้ำหนักตามเนื้อหาจริง
   แบรนด์ (โลโก้+คำโปรย+โซเชียล) และเมนู (2 คอลัมน์ย่อย) ต้องการที่มากสุด
   (เดิม 5 คอลัมน์ — ตัด "บริการ" ออกเมื่อ 5 ต.ค. 2026 เพราะเป็น <span> กดไม่ได้
    และ "งานโครงการ (B2B)" ไม่มีอยู่ในไฟล์ฐานข้อมูลบริษัทเลย) */
@media (min-width: 1080px) {
	body.kf-site .kf-foot-grid {
		grid-template-columns: 1.35fr 1.6fr 1.1fr 1.3fr;
		gap: clamp(20px, 2.4vw, 34px);
	}
}
/* ---------- ไอคอนโซเชียลใน footer ----------
   JoJho สั่ง: ใช้โลโก้จริงของแต่ละแพลตฟอร์ม แต่ "เป็นธีมสีเว็บ"
   -> ไม่ใช้สีแบรนด์ของแต่ละเจ้า (น้ำเงิน FB / ชมพู IG / แดง YT) ซึ่งจะทำให้ footer ลายพร้อย

   สลับสีตามที่ JoJho ขอ (6 ก.ย. 2026): **ฟ้าแบรนด์ก่อน → hover เป็นเทา**
   (เดิมเป็นเทาก่อนแล้ว hover ฟ้า)
   ข้อดีของทางนี้: ไอคอนเด่นขึ้นใน footer ที่เป็นตัวหนังสือเทาล้วน คนเห็นว่ากดได้ง่ายกว่า
   SVG ใช้ fill: currentColor -> สีตามพ่อทั้งหมด คุมจากตรงนี้ที่เดียว */
body.kf-site .kf-social {
	color: #00AEEF;
	border-color: #cfe6f2 !important;   /* ขอบฟ้าจาง ให้เข้ากับไอคอนฟ้า */
	flex-shrink: 0;
	transition: color .18s ease, border-color .18s ease;
}
body.kf-site .kf-social:hover,
body.kf-site .kf-social:focus-visible {
	color: #8a8f90;
	border-color: #dbdbdb !important;
}
body.kf-site .kf-social svg { display: block; }

@media (max-width: 767px) {
	/* กติกาห้อง ข้อ 4: tap target >= 40px — ดีไซน์วางกล่องไว้ 30px */
	body.kf-site .kf-social { width: 40px !important; height: 40px !important; }
}

/* =============================================================================
   MOBILE-FIRST GUARDRAILS (กติกาห้อง ข้อ 4) — บังคับช่วงที่ "ใช้นิ้วจิ้ม"
   ============================================================================= */

/* 🔴 1 ต.ค. 2026 — เดิมตั้งไว้ที่ 767px เฉย ๆ แก้เป็น 2 เงื่อนไข
   1) `max-width: 1023px` — ช่วงที่เมนูเป็นแฮมเบอร์เกอร์ (iPad แนวตั้ง 768 · iPad Air 820
      · iPad Pro 11" 834) วัดจริงที่ 768 เจอปุ่มต่ำกว่า 40px ถึง 22 จุด
   2) `pointer: coarse` — **จอสัมผัสทุกความกว้าง**
      🔑 เงื่อนไขความกว้างอย่างเดียวไม่พอ เพราะ **iPad แนวนอน = 1024px**
         และ iPad Pro 12.9" แนวตั้งก็ 1024px -> หลุดไปเข้าเกณฑ์ "เดสก์ท็อป"
         ทั้งที่จิ้มด้วยนิ้ว · วัดจริงที่ 1024 เจอลิงก์เมนู 22px
      โน้ตบุ๊กจอสัมผัสที่มีเมาส์ด้วยรายงานเป็น `pointer: fine` จึงไม่โดนกฎนี้ */
@media (max-width: 1023px), (pointer: coarse) {
	body.kf-site #kfMenu a,
	body.kf-site #kfNav a,
	body.kf-site header a,
	body.kf-site footer a,
	body.kf-site a[href^="tel:"],
	body.kf-site a[href*="line.me"] {
		min-height: 40px;
	}

	body.kf-site header a,
	body.kf-site a[href^="tel:"] { align-items: center; }

	body.kf-site footer a { display: flex; align-items: center; }

	body.kf-site #kfBurger { width: 44px; height: 44px; }
}

@media (max-width: 400px) {
	body.kf-site { overflow-x: hidden; }
}

/* ---------- a11y ---------- */
body.kf-site a:focus-visible,
body.kf-site button:focus-visible,
body.kf-site summary:focus-visible {
	outline: 2px solid #00AEEF;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.kf-site * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body.kf-site [id] { scroll-margin-top: 16px; }

/* =============================================================================
   เนื้อหาหน้าอื่น (หน้า/บทความที่ยังเป็นของเดิม)
   ยังไม่พอร์ต แต่ต้องไม่ล้นกรอบ container 1280 ของ header/footer ใหม่
   หน้าเหล่านี้จะถูกทำจริงใน Phase 2-4
   ============================================================================= */
/* ===========================================================================
   ระยะ "ใต้แถบหัวเรื่อง -> เนื้อหาแรก" ใช้ค่าเดียวกันทุกหน้า
   (JoJho 6 ต.ค. 2026: "ควรเท่ากันทุกหน้านะครับ")

   เดิมระยะนี้เป็นผลบวกของ 3 ชั้นที่แต่ละหน้าตั้งเองคนละค่า
   -> วัดได้ 30 / 56 / 62 / 94px แล้วแต่หน้า
   ตอนนี้ยกให้ .kf-phead เป็นเจ้าของระยะคนเดียว แล้วล้างชั้นอื่นเป็น 0
   ปรับที่ --kf-head-gap ที่เดียว มีผลทุกหน้าพร้อมกัน

   🔑 เลือกจับด้วย `.kf-phead + *` (กล่องแรกถัดจากแถบหัวเรื่อง) ไม่ไล่ชื่อคลาสรายหน้า
      เพราะโครงแต่ละหน้าไม่เหมือนกัน: <main id="content" class="site-main"> ·
      <main id="content" class="kf-kt"> · <main class="kf-ct-head"> (ไม่มี id)
      แต่ทุกหน้ามีจุดร่วมคือกล่องแรกที่ต่อจาก .kf-phead เสมอ

   🔑 เขียน `body.kf-site.kf-site` (ซ้ำคลาส) เพื่อดัน specificity เป็น (0,3,x)
      ให้ชนะกฎรายหน้าที่เป็น (0,2,x) เช่น `body.kf-howto .kf-htb`
      เพราะ CSS ของหน้าถูก enqueue ทีหลัง site.css ถ้าน้ำหนักเท่ากันจะแพ้
      -> วิธีนี้ชนะได้โดยไม่ต้องใช้ !important
   =========================================================================== */
body.kf-site { --kf-head-gap: clamp(32px, 3vw, 44px); }

/* ขนาดรูปฮีโร่ของหน้าที่เป็น 2 คอลัมน์ (ครัวบิ้วอิน · เครื่องใช้ไฟฟ้า · เกี่ยวกับเรา)
   JoJho 6 ต.ค. 2026 ขอให้ "ขนาดเท่ากัน" ทั้ง 3 หน้า
   🔑 ต้องคุมด้วยความกว้างคงที่ ไม่ใช่สัดส่วน fr — เพราะ container ของแต่ละหน้ากว้างไม่เท่ากัน
      (ครัว/เครื่องใช้ไฟฟ้า 1224px · about 1140px) ใช้ fr แล้วจะได้รูปคนละขนาดเสมอ
   คอลัมน์ข้อความกินที่เหลือด้วย 1fr -> รูปเท่ากันทุกหน้า ทุกความกว้างจอ */
body.kf-site {
	/* min() กันกรณีจอเดสก์ท็อปแคบ (~1000px) ที่รูปคงที่ 524 จะบีบคอลัมน์ข้อความจนแคบเกิน
	   ใช้ vw เป็นฐาน -> ทุกหน้าย่อพร้อมกัน ขนาดจึงยังเท่ากันทุกความกว้างจอ */
	--kf-hero-img-w: min(524px, 46vw);
	--kf-hero-img-ar: 3 / 2;
	--kf-hero-gap: clamp(26px, 3.2vw, 46px);
}

body.kf-site.kf-site .kf-phead { margin-bottom: var(--kf-head-gap); }

/* ชั้นที่ 2: กล่องแรกถัดจากแถบหัวเรื่อง (ปกติคือ <main>) */
body.kf-site.kf-site .kf-phead + * { padding-top: 0; margin-top: 0; }

/* ชั้นที่ 3: บล็อกแรกข้างในกล่องนั้น (เช่น .kf-htb · .kf-bl · .kf-kt-hero) */
body.kf-site.kf-site .kf-phead + * > :first-child { padding-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------------------
   ระยะ "เนื้อหาสุดท้าย -> การ์ด CTA ท้ายหน้า (#quote)" ใช้ค่าเดียวกับฝั่งบน
   (JoJho 7 ต.ค. 2026: "ขอให้เว้นระยะเท่ากัน ... เท่ากันด้านบน")

   ก่อนแก้วัดได้ 134 / 137 / 60 / 15px แล้วแต่หน้า เพราะเป็นผลบวกของ
   #quote margin-top + padding-bottom ของคอนเทนเนอร์ + margin ของบล็อกสุดท้าย

   🔑 `:has(+ #quote)` = กล่องที่อยู่ติดก่อนการ์ด CTA — ไม่ต้องไล่ชื่อคลาสรายหน้า
      `:has(+ script + #quote)` เพิ่มไว้เพราะบางหน้ามี <script> คั่น (contact-us · how-to-buy)
   --------------------------------------------------------------------------- */
body.kf-site.kf-site #quote { margin-top: var(--kf-head-gap); }

body.kf-site.kf-site :has(+ #quote),
body.kf-site.kf-site :has(+ script + #quote) { padding-bottom: 0; margin-bottom: 0; }

body.kf-site.kf-site :has(+ #quote) > :last-child,
body.kf-site.kf-site :has(+ script + #quote) > :last-child { padding-bottom: 0; margin-bottom: 0; }

/* Hello Elementor ห่อเนื้อหาไว้ใน .site-main — เราไม่ override template ในเฟสนี้ */
body.kf-site .site-main { padding: clamp(20px, 3vw, 40px) 0; }
body.kf-site .site-main img { height: auto; max-width: 100%; }
body.kf-site .site-main h1,
body.kf-site .site-main h2,
body.kf-site .site-main h3 { font-family: var(--kf-font-head); font-weight: 400; line-height: 1.35; }
body.kf-site .site-main h1 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 18px; }

/* เนื้อหาเก่าเป็น WPBakery ที่ยังไม่ได้พอร์ต (Phase 2-4)
   บังคับแค่ "ไม่ให้ล้นกรอบ" ไม่ไปยุ่งกับ layout ของมัน */
body.kf-site .site-main .vc_row { margin-left: 0; margin-right: 0; }
body.kf-site .site-main table,
body.kf-site .site-main iframe,
body.kf-site .site-main video { max-width: 100%; }
body.kf-site .site-main pre { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   เดสก์ท็อปจริง ๆ (>=1024px = จุดเดียวกับที่เมนูเปลี่ยนเป็นแบบเต็ม)
   ต่ำกว่านี้ถือเป็น "เลย์เอาต์สัมผัส" ทั้งหมด (มือถือ + แท็บเล็ต) -> คงกฎ 40px ไว้
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) and (pointer: fine) {
	/* เมาส์ไม่ต้องการพื้นที่จิ้ม -> กลับมาใช้ระยะกระชับตามดีไซน์
	   ต้องรีเซ็ตทั้ง 2 ที่ที่ผูกกับ --kf-foot-row ไม่งั้นค่าสัมผัสหลุดมาทำให้เดสก์ท็อปหลวม
	   🔑 ต้องมี `pointer: fine` ด้วย ไม่งั้น iPad แนวนอน (1024) จะโดนรีเซ็ตกลับเป็นขนาดเมาส์ */
	body.kf-site .kf-foot-list { gap: 9px; }
	body.kf-site .kf-foot-list > * { min-height: 0; display: block; }
}

/* ---------------------------------------------------------------------------
   ปุ่มรองบนเมนู (.kf-cta2) — "ดูแคตตาล็อก" (JoJho 3 ต.ค. 2026)
   ใส่ CSS class `kf-cta2` ที่รายการเมนูใน Appearance > Menus

   🔑 ตั้งใจให้ "ไม่เหมือน" ปุ่มขอประเมินราคา: เส้นขอบ/พื้นขาว ไม่ใช่ฟ้าทึบ
      ปุ่มทึบควรมีตัวเดียวในแถบเมนู ไม่งั้นแย่งกันเองจนไม่รู้ว่าควรกดอันไหน
   --------------------------------------------------------------------------- */
body.kf-site .kf-cta2 {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid rgb(212, 218, 222);
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	color: rgb(28, 33, 38);
	white-space: nowrap;
	transition: border-color .15s, color .15s;
}
body.kf-site .kf-cta2:hover {
	border-color: rgb(0, 174, 239);
	color: rgb(0, 174, 239);
}

@media (prefers-reduced-motion: reduce) {
	body.kf-site .kf-cta2 { transition: none; }
}