/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Description: ขจีพรรณ — custom shell (logo / menu / hamburger). สี+ฟอนต์มาจาก Elementor kit #4 เท่านั้น
*/

/* =========================================================================
 * กติกา: ห้าม hardcode font-family / font-size px ในไฟล์นี้
 * - สี  → var(--e-global-color-*)  (kit #4)
 * - ขนาด → em เท่านั้น (base 16px inherit จาก kit body)
 * ====================================================================== */

/* ---------- Header shell (HFE inject header เข้ามาตรงนี้) ---------- */
/* sticky ต้องอยู่บน wrapper ของ HFE ไม่ใช่ container ใน Elementor
   (Elementor free ไม่มี sticky — นั่นเป็น Pro) */
.ehf-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* ธีมแม่บังคับ uppercase ให้ปุ่ม Elementor — แบบใช้ตัวพิมพ์ปกติ ("Facebook" ไม่ใช่ "FACEBOOK") */
.elementor-button {
	text-transform: none;
}

/* ⚠️ Flexbox min-width fix สำหรับข้อความไทย
   ภาษาไทยไม่มีเว้นวรรคระหว่างคำ → flex item ที่ min-width:auto (ค่า default)
   จะไม่ยอมหดต่ำกว่าความยาว "คำ" ที่ยาวสุด → ดัน container กว้างเกินจอ = scroll แนวนอนบนมือถือ
   ตั้ง min-width:0 ให้ container ที่เป็น flex child เพื่อให้หดแล้วตัดบรรทัดได้ (fix มาตรฐาน) */
.e-con-inner > .e-con,
.e-con.e-flex > .e-con {
	min-width: 0;
}

/* ---------- Logo ([site_logo]) ---------- */
.kj-logo {
	display: flex;
	align-items: center;
	gap: 0.75em;
	text-decoration: none;
}

.kj-logo__mark {
	display: block;
	flex: none;
	width: var(--kj-logo-size, 2.75em);
	height: var(--kj-logo-size, 2.75em);
}

.kj-logo__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.kj-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.kj-logo__name {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--e-global-color-primary);
	letter-spacing: 0.02em;
}

.kj-logo__sub {
	font-size: 0.6875em;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: var(--e-global-color-accent);
	margin-top: 0.36em;
}

/* variant สำหรับพื้นเข้ม (footer) */
.kj-logo--light .kj-logo__name {
	color: var(--e-global-color-white);
}

.kj-logo--light .kj-logo__sub {
	color: var(--e-global-color-goldlight);
}

/* โลโก้เขียวเข้มบนพื้นเขียวเข้มจะจม → เร่งสว่างตามแบบ (filter:brightness 1.6) */
.kj-logo--light .kj-logo__mark img {
	filter: brightness(1.6);
}

/* ---------- Nav ([main_menu]) ---------- */
.kj-nav {
	display: flex;
	align-items: center;
}

.kj-menu__list {
	display: flex;
	align-items: center;
	gap: 1.875em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kj-menu__list a {
	display: block;
	font-size: 0.9375em;
	font-weight: 500;
	color: var(--e-global-color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kj-menu__list a:hover,
.kj-menu__list .current-menu-item > a {
	color: var(--e-global-color-primary);
}

/* ปุ่ม CTA = menu item ที่ใส่ class "kj-cta" ไว้ (แก้ได้ที่ Appearance → Menus) */
.kj-menu__list .kj-cta > a {
	font-weight: 600;
	color: var(--e-global-color-white);
	background: var(--e-global-color-primary);
	padding: 0.625em 1.375em;
	border-radius: 999px;
	transition: background 0.2s ease;
}

.kj-menu__list .kj-cta > a:hover {
	color: var(--e-global-color-white);
	background: var(--e-global-color-greendark);
}

/* ---------- Footer menu ([footer_menu]) — เรียงแนวตั้งตามแบบอ้างอิง ---------- */
.kj-fmenu__list {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kj-fmenu__list a {
	font-size: 0.94em;
	font-weight: 500;
	color: var(--e-global-color-sage);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kj-fmenu__list a:hover {
	color: var(--e-global-color-goldlight);
}

/* ---------- Header — เส้นทองใต้แถบเมนู ----------
   เจ้าของขอ "เพิ่มสีทองในแถบด้านบน" (2026-07-14) — เส้นไล่ทอง accent→goldlight
   บางๆ ใต้ header ทั้งแถบ */
header#masthead {
	position: relative;
}

header#masthead::after {
	content: "";
	display: block;
	height: 4px;
	/* ทองเงาๆ: ไฮไลต์ครีมกลางเส้นเหมือนแสงสะท้อนโลหะ (เจ้าของขอ "ทองเด่น เงาๆ" 2026-07-14) */
	background: linear-gradient(
		90deg,
		var(--e-global-color-accent),
		var(--e-global-color-goldlight) 30%,
		#f2e2b6 50%,
		var(--e-global-color-goldlight) 70%,
		var(--e-global-color-accent)
	);
}

/* ---------- Home hero — ลายใบไม้เขียวรางๆ ในพื้นที่ขาว ----------
   เจ้าของบอกหน้าแรก "ขาวโล่งเกินไป" (2026-07-14) → ใบไม้เส้นเขียวจางมากๆ
   ประดับมุมซ้ายบน + ซ้ายล่างของ hero (เทคนิคเดียวกับ hero หน้ารอง)
   ใช้ ::before/::after ของ #hero ได้ เพราะ section นี้ "ไม่มี" background
   overlay ของ Elementor (ถ้าวันหน้าใส่ overlay ให้ย้ายไป child con — ดู bugs.md) */
#hero {
	position: relative;
	overflow: hidden;
}

/* ใบมอนสเตอร่าใหญ่ (SVG data-uri) — เขียวจางมุมซ้ายบน + เทาจางล่างกลาง
   ร่องใบเป็นสีขาว → ใช้ได้บนพื้นขาวเท่านั้น (เจ้าของขอ "ชัดกว่าเดิม" 2026-07-14) */

/* pseudo ที่ position:absolute จะลอยทับข้อความปกติ (เคยบังเลข "3" ของสถิติ)
   → ดันคอนเทนต์ขึ้นชั้นบนด้วย z-index
   ⚠️ hero เป็น boxed → ลูกจริงอยู่ใน .e-con-inner (ห้ามใช้ #hero > .e-con) */
#hero > .e-con-inner > .e-con {
	position: relative;
	z-index: 1;
}

#hero::before,
#hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}

#hero::before {
	width: 500px;
	height: 590px;
	top: -70px;
	left: -130px;
	transform: rotate(-28deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 470'%3E%3Cpath fill='%231A5D33' fill-opacity='.12' d='M200,62C182,34 130,28 95,55C45,92 33,162 55,238C78,322 140,402 200,445C260,402 322,322 345,238C367,162 355,92 305,55C270,28 218,34 200,62Z'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M196,60L196,445L204,445L204,60Z'/%3E%3Cpath d='M48,150L70,182L192,132L190,120Z'/%3E%3Cpath d='M52,240L76,272L192,210L189,197Z'/%3E%3Cpath d='M92,330L118,358L194,290L190,278Z'/%3E%3Cpath d='M352,150L330,182L208,132L210,120Z'/%3E%3Cpath d='M348,240L324,272L208,210L211,197Z'/%3E%3Cpath d='M308,330L282,358L206,290L210,278Z'/%3E%3Cellipse cx='158' cy='170' rx='15' ry='8' transform='rotate(24 158 170)'/%3E%3Cellipse cx='245' cy='255' rx='13' ry='7' transform='rotate(-22 245 255)'/%3E%3Cellipse cx='165' cy='330' rx='11' ry='6' transform='rotate(30 165 330)'/%3E%3C/g%3E%3C/svg%3E");
}

#hero::after {
	width: 380px;
	height: 450px;
	bottom: -140px;
	left: 32%;
	transform: rotate(22deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 470'%3E%3Cpath fill='%236A766D' fill-opacity='.11' d='M200,62C182,34 130,28 95,55C45,92 33,162 55,238C78,322 140,402 200,445C260,402 322,322 345,238C367,162 355,92 305,55C270,28 218,34 200,62Z'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M196,60L196,445L204,445L204,60Z'/%3E%3Cpath d='M48,150L70,182L192,132L190,120Z'/%3E%3Cpath d='M52,240L76,272L192,210L189,197Z'/%3E%3Cpath d='M92,330L118,358L194,290L190,278Z'/%3E%3Cpath d='M352,150L330,182L208,132L210,120Z'/%3E%3Cpath d='M348,240L324,272L208,210L211,197Z'/%3E%3Cpath d='M308,330L282,358L206,290L210,278Z'/%3E%3Cellipse cx='158' cy='170' rx='15' ry='8' transform='rotate(24 158 170)'/%3E%3Cellipse cx='245' cy='255' rx='13' ry='7' transform='rotate(-22 245 255)'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	#hero::before {
		width: 260px;
		height: 300px;
		top: -40px;
		left: -80px;
	}

	#hero::after {
		display: none;
	}
}

/* ---------- Page hero — กรอบรูปทรงใบไม้ประดับมุม ----------
   ใบไม้ = กล่องที่ border-radius โค้งสองมุมทแยง + แหลมสองมุมที่เหลือ แล้วเอียงเล็กน้อย
   เส้นทอง (มุมขวาบน) + เส้นเขียวอ่อน (มุมซ้ายล่าง) โปร่งบางๆ ไม่แย่งสายตาหัวข้อ
   (สีเส้น = goldlight/sage ของ kit ทำจาง — เอฟเฟกต์ตกแต่ง เทียบชั้น gradient)
   ⚠️ ห้ามวาดบน #kj-page-hero::before/::after ตรงๆ — Elementor ใช้ ::before ของ
   container เป็นชั้น background overlay (ฟิล์มทับรูป) วาดทับ = ฟิล์มพัง
   → วาดบน pseudo ของ "container ลูก" (กล่องข้อความ) แทน ซึ่ง absolute อิงตัว hero */
#kj-page-hero {
	position: relative;
	overflow: hidden;
}

/* ฟิล์มบาง (โดยเฉพาะ hero วิดีโอ 30%) บนฉากสว่าง → ตัวหนังสือขาวต้องมีเงาช่วย
   ไม่งั้นจมกับพื้นหลัง (เจ้าของไม่อยากเพิ่มฟิล์ม "ไม่ต้องเบลอ") */
#kj-page-hero .elementor-heading-title,
#kj-page-hero p {
	text-shadow: 0 1px 3px rgba(18, 53, 31, 0.45), 0 4px 22px rgba(18, 53, 31, 0.5);
}

#kj-page-hero > .e-con::before,
#kj-page-hero > .e-con::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

#kj-page-hero > .e-con::before {
	width: 380px;
	height: 380px;
	top: -110px;
	right: -80px;
	border: 2px solid rgba(198, 161, 91, 0.4);
	border-radius: 0 64% 6% 64%;
	transform: rotate(18deg);
}

#kj-page-hero > .e-con::after {
	width: 260px;
	height: 260px;
	bottom: -80px;
	left: -60px;
	border: 2px solid rgba(196, 212, 195, 0.25);
	border-radius: 64% 0 64% 6%;
	transform: rotate(-14deg);
}

@media (max-width: 767px) {
	#kj-page-hero > .e-con::before {
		width: 200px;
		height: 200px;
		top: -60px;
		right: -50px;
	}

	#kj-page-hero > .e-con::after {
		width: 140px;
		height: 140px;
		bottom: -40px;
		left: -35px;
	}
}

/* ---------- แกลเลอรีผลงาน (Elementor Image Gallery) — mosaic นิตยสาร ----------
   ทุก 6 รูป → ใบแรกเด่นใหญ่ 2x2, ใบที่ 4 สูง 2 แถว, ที่เหลือ 1x1
   dense packing ไม่ให้มีช่องโหว่ + hover zoom นุ่มๆ
   (เจ้าของลอง masonry แล้วเลือกแบบนิตยสาร 2026-07-13)
   !important จำเป็น: WP gallery ยัด width 33% มากับ id selector (#gallery-1) */
.elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 210px;
	grid-auto-flow: dense;
	gap: 16px;
}

.elementor-image-gallery .gallery-item {
	float: none !important;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
}

/* จังหวะโมเสก: ใบเด่น 2x2 ทุกๆ 6 ใบ + ใบสูง 2 แถวคั่นกลาง */
.elementor-image-gallery .gallery-item:nth-child(6n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.elementor-image-gallery .gallery-item:nth-child(6n + 4) {
	grid-row: span 2;
}

.elementor-image-gallery .gallery-item .gallery-icon,
.elementor-image-gallery .gallery-item .gallery-icon a {
	display: block;
	height: 100%;
	margin: 0;
}

.elementor-image-gallery .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 14px;
	transition: transform 0.4s ease;
}

.elementor-image-gallery .gallery-item:hover img {
	transform: scale(1.04);
}

@media (max-width: 1024px) {
	.elementor-image-gallery .gallery {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 180px;
	}
}

@media (max-width: 640px) {
	.elementor-image-gallery .gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
		gap: 10px;
	}
}

/* ---------- แกลเลอรีงานดูแลบำรุงรักษา (.kj-mnt-gallery) ----------
   เล็กใหญ่สลับ แต่ทุกใบเป็นสี่เหลี่ยม เรียงเป็นบล็อกเต็มเรียบ ไม่มีใบยื่นออกมา
   (เจ้าของขอ 2026-07-20 — ต่างจาก mosaic โปรเจกต์ที่ปลายไม่เท่ากัน)
   ปรับ span ให้ 8 ใบ tile ลงตัว: ใบ1 = 2x2 (4 ช่อง) + ใบ4 = สูง 2 แถว (2 ช่อง)
   + อีก 6 ใบ = 1x1 → รวม 12 ช่อง = 3 แถวเต็มพอดี (4 คอลัมน์)
   reset กฎ 6n+1/6n+4 ของ mosaic ก่อน (กันใบ 7 โตเกินทำให้ปลายเว้า) */
.kj-mnt-gallery .elementor-image-gallery .gallery-item {
	grid-column: span 1;
	grid-row: span 1;
}

.kj-mnt-gallery .elementor-image-gallery .gallery-item:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.kj-mnt-gallery .elementor-image-gallery .gallery-item:nth-child(4) {
	grid-row: span 2;
}

/* ---------- แกลเลอรีหมวดโครงการที่พักอาศัย (.kj-resid-gallery) ----------
   หลักการเดียวกับ .kj-mnt-gallery แต่จูนสำหรับ 28 รูป (2026-07-26):
   ใบ 1,15 = 2x2 (+3 ต่อใบ = +6) + ใบ 6,20 = สูง 2 แถว (+1 ต่อใบ = +2)
   → 28 + 8 = 36 ช่อง = หาร 4/3/2 ลงตัว → บล็อกปิดท้ายเรียบทุก breakpoint
   ⚠️ ถ้าจำนวนรูปเปลี่ยน ต้องคำนวณ span ใหม่ให้ผลรวมช่องหาร 12 ลงตัว */
.kj-resid-gallery .elementor-image-gallery .gallery-item {
	grid-column: span 1;
	grid-row: span 1;
}

.kj-resid-gallery .elementor-image-gallery .gallery-item:nth-child(1),
.kj-resid-gallery .elementor-image-gallery .gallery-item:nth-child(15) {
	grid-column: span 2;
	grid-row: span 2;
}

.kj-resid-gallery .elementor-image-gallery .gallery-item:nth-child(6),
.kj-resid-gallery .elementor-image-gallery .gallery-item:nth-child(20) {
	grid-row: span 2;
}

/* ---------- Article cards ([kj_articles]) ---------- */
.kj-articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.625em;
}

.kj-article {
	display: flex;
	flex-direction: column;
	background: var(--e-global-color-white);
	border: 1px solid var(--e-global-color-border);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.kj-article:hover {
	border-color: var(--e-global-color-border_strong);
	transform: translateY(-3px);
}

.kj-article__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--e-global-color-chip_bg);
	background-size: cover;
	background-position: center;
}

.kj-article__body {
	display: flex;
	flex-direction: column;
	padding: 1.5em 1.625em 1.75em;
}

.kj-article__cat {
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--e-global-color-accent);
	margin-bottom: 0.625em;
}

.kj-article__title {
	font-size: 1.19em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--e-global-color-ink);
	margin-bottom: 0.625em;
}

.kj-article__excerpt {
	font-size: 0.9em;
	line-height: 1.65;
	color: var(--e-global-color-muted);
}

.kj-articles__empty {
	text-align: center;
	color: var(--e-global-color-muted);
	padding: 2em 0;
}

@media (max-width: 1024px) {
	.kj-articles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.kj-articles { grid-template-columns: 1fr; }
}

/* ---------- Hamburger ---------- */
/* ⚠️ ต้องใช้ `.kj-nav .kj-burger` (0,2,0) — ห้ามใช้ `.kj-burger` เฉยๆ
   hello-elementor/reset.css มี `[type="button"], [type="submit"], button { … }`
   ปุ่มเรามี type="button" → โดน attribute selector ซึ่ง specificity = (0,1,0)
   เท่ากับ class พอดี → ตัดสินด้วยลำดับไฟล์ → reset.css โหลดหลัง child theme → reset ชนะ
   ผลคือทั้ง block ถูกข้าม (กรอบชมพู #c36 + display:inline-block โผล่บน desktop) */
.kj-nav .kj-burger,
.kj-nav .kj-burger:hover,
.kj-nav .kj-burger:focus,
.kj-nav .kj-burger:active,
.kj-nav .kj-burger:focus-visible {
	display: none; /* desktop ไม่โชว์ */
	width: 2.75em;
	height: 2.75em;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3125em;
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.kj-nav .kj-burger__bar {
	display: block;
	width: 1.375em;
	height: 2px;
	border-radius: 2px;
	background: var(--e-global-color-ink);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* เปิดอยู่ → กลายเป็น X */
.kj-nav .kj-burger[aria-expanded="true"] .kj-burger__bar:nth-child(1) {
	transform: translateY(0.5312em) rotate(45deg);
}

.kj-nav .kj-burger[aria-expanded="true"] .kj-burger__bar:nth-child(2) {
	opacity: 0;
}

.kj-nav .kj-burger[aria-expanded="true"] .kj-burger__bar:nth-child(3) {
	transform: translateY(-0.5312em) rotate(-45deg);
}

/* ---------- Mobile / Tablet ---------- */
@media (max-width: 1024px) {
	.kj-nav .kj-burger,
	.kj-nav .kj-burger:hover,
	.kj-nav .kj-burger:focus,
	.kj-nav .kj-burger:active,
	.kj-nav .kj-burger:focus-visible {
		display: flex;
	}

	/* ⚠️ Elementor ใส่ position:relative ให้ .elementor-element ทุกตัว
	   → dropdown (position:absolute) จะไปเกาะ "กล่อง shortcode widget" ซึ่งกว้างแค่
	   เท่าปุ่มแฮมเบอร์เกอร์ (44px) แล้วโผล่ชิดขวา/ล้นจอ
	   แก้: ปลด positioning ของ widget นั้น → containing block เลื่อนขึ้นไปเป็น
	   #kj-header (.e-con ตัวนอก กว้างเต็ม viewport) → left:0/right:0 = เต็มจอจริง */
	#kj-header .elementor-widget-shortcode {
		position: static;
	}

	/* dropdown = เต็มความกว้างจอ ไม่ใช่ครึ่งเดียว/ชิดขวา
	   (reset flex ที่ inherit มาจาก desktop ให้หมด) */
	.kj-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background: var(--e-global-color-white);
		border-top: 1px solid var(--e-global-color-border);
		box-shadow: 0 18px 46px rgba(23, 48, 31, 0.1);
		padding: 0.75em 0 1.25em;
		z-index: 60;
	}

	.kj-menu.is-open {
		display: block;
	}

	.kj-menu__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.kj-menu__list > li {
		width: 100%;
	}

	.kj-menu__list a {
		padding: 0.875em 2em;
		font-size: 1em;
	}

	/* CTA ใน dropdown ไม่ต้องเป็น pill เต็มแถว — ให้เป็น pill กลางแถว */
	.kj-menu__list .kj-cta {
		padding: 0.75em 2em 0;
	}

	.kj-menu__list .kj-cta > a {
		text-align: center;
		padding: 0.875em 1.375em;
	}
}

/* ---------- Hero video banner (หน้าแรก 2026-07-20) ----------
   วิดีโอ YouTube เล่นต่อกันคลุมเต็มแถบ hero — iframe ต้องใหญ่กว่ากรอบเสมอ
   (สูตร cover: กว้าง >= max(100vw, สูงhero x 16/9) แล้วจัดกึ่งกลาง) */
#hero {
	position: relative;
	overflow: hidden;
}

.kj-herovid {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.kj-herovid iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* ขยายเกินกรอบ ~240px แนวตั้ง → ชื่อคลิป (ขอบบน) กับโลโก้ YouTube (ขอบล่าง)
	   ถูกครอปออกนอกจอ — ผู้ชมเห็นแต่ภาพวิดีโอล้วนๆ */
	width: max(calc(100vw + 430px), 1710px);
	height: max(calc(56.25vw + 242px), 962px);
	border: 0;
	pointer-events: none;
}

/* ฟิล์มไล่เฉด: เข้มขึ้น (เจ้าของขอ 2026-07-20) — ตัวหนังสือต้องเด่นจากวิดีโอ
   เพิ่มชั้นทึบซ้าย (ฝั่งข้อความ) ทับบนเฉดบน-ล่าง */
.kj-herovid__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 34, 20, 0.72) 0%, rgba(12, 34, 20, 0.30) 60%, rgba(12, 34, 20, 0.20) 100%),
		linear-gradient(180deg, rgba(12, 34, 20, 0.80), rgba(12, 34, 20, 0.48) 45%, rgba(12, 34, 20, 0.82));
}

/* ตัวหนังสือบนวิดีโอ — เงาเข้มขึ้นให้ขาวเด่นเต็มที่ (เจ้าของขอ "สว่างเด่น") */
#hero .elementor-heading-title,
#hero p {
	text-shadow: 0 2px 6px rgba(8, 24, 14, 0.75), 0 6px 30px rgba(8, 24, 14, 0.65);
}

/* ลายใบไม้มอนสเตอร่าเดิมของ hero — ปิดไว้ (วิดีโอคลุมเต็มแถบแล้ว
   และ ::after จะวาดทับวิดีโอด้วย) เก็บ SVG ไว้ใน memo/component.md */
#hero::before,
#hero::after {
	display: none;
}

/* ---------- การ์ดบริการไฮไลต์เขียว (.kj-svc-card) — แรงบันดาลใจ remood (2026-07-24) ----------
   ปกติการ์ดขาว → พอ hover (desktop) หรือเลื่อนถึงกลางจอ (.is-active, มือถือ)
   การ์ดเปลี่ยนเป็นเขียวหลัก ตัวหนังสือขาว ยกลอยขึ้นเล็กน้อย */
#kj-svc-row > .e-con {
	transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
	cursor: default;
}

#kj-svc-row > .e-con:hover,
#kj-svc-row > .e-con.is-active {
	background: var(--e-global-color-primary) !important;
	border-color: var(--e-global-color-primary) !important;
	transform: translateY(-6px);
	box-shadow: 0 22px 50px -18px rgba(26, 93, 51, 0.45);
}

/* ข้อความในการ์ดตอนไฮไลต์ → หัวข้อ (h3) ขาว + คำอธิบาย (p) ขาว
   ใช้ tag selector (h6/h3) ไม่ใช่ nth-child → ไม่พังเมื่อลำดับ widget เปลี่ยน */
#kj-svc-row > .e-con:hover h3.elementor-heading-title,
#kj-svc-row > .e-con.is-active h3.elementor-heading-title,
#kj-svc-row > .e-con:hover p,
#kj-svc-row > .e-con.is-active p {
	color: #fff !important;
}

/* eyebrow (h6) → ทองอ่อนบนพื้นเขียว */
#kj-svc-row > .e-con:hover h6.elementor-heading-title,
#kj-svc-row > .e-con.is-active h6.elementor-heading-title {
	color: var(--e-global-color-goldlight) !important;
}

/* การ์ดบริการสูงเท่ากัน (row align stretch) แม้เนื้อหาไม่เท่ากัน (เจ้าของขอ 2026-07-26)
   → กล่องข้อความ (ลูก .e-con ของการ์ด) ยืดเต็มความสูง + ดันปุ่ม "ดูเพิ่มเติม"
   (ลูกตัวสุดท้าย) ชิดล่างด้วย margin-top:auto → ปุ่มตรงกันทุกการ์ด */
#kj-svc-row > .e-con > .e-con {
	flex-grow: 1;
}

#kj-svc-row > .e-con > .e-con > .e-con:last-child {
	margin-top: auto !important;
}

/* ลูกศร "ดูเพิ่มเติม" ท้ายการ์ด — เลื่อนขวานิดๆ ตอนชี้ (แบบ remood) */
.kj-more-arrow {
	transition: transform 0.25s ease;
}

#kj-svc-row > .e-con:hover .kj-more-arrow,
#kj-svc-row > .e-con.is-active .kj-more-arrow {
	transform: translateX(5px);
}

/* รายการบริการย่อยในการ์ด (.kj-svc-items) — ตัวเล็กอ่านง่าย */
.kj-svc-items .elementor-icon-list-text {
	font-size: 0.9em;
	line-height: 1.5;
}

/* ตอนการ์ดไฮไลต์เขียว → ข้อความ + ไอคอนรายการ = ขาว/ทอง */
#kj-svc-row > .e-con:hover .kj-svc-items .elementor-icon-list-text,
#kj-svc-row > .e-con.is-active .kj-svc-items .elementor-icon-list-text {
	color: #fff !important;
}

#kj-svc-row > .e-con:hover .kj-svc-items .elementor-icon-list-icon i,
#kj-svc-row > .e-con:hover .kj-svc-items .elementor-icon-list-icon svg,
#kj-svc-row > .e-con.is-active .kj-svc-items .elementor-icon-list-icon i,
#kj-svc-row > .e-con.is-active .kj-svc-items .elementor-icon-list-icon svg {
	color: var(--e-global-color-goldlight) !important;
	fill: var(--e-global-color-goldlight) !important;
}

/* ชุดรูปเล็กท้ายการ์ดบริการ (.kj-card-gallery) — กริด 2 คอลัมน์ จัตุรัสเท่ากัน
   override mosaic global (reset span) เพราะการ์ดแคบ ต้องเรียบเสมอ */
.kj-card-gallery .elementor-image-gallery .gallery {
	grid-template-columns: repeat(2, 1fr) !important;
	grid-auto-rows: auto !important;
}

.kj-card-gallery .elementor-image-gallery .gallery-item {
	grid-column: span 1 !important;
	grid-row: span 1 !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
}

.kj-card-gallery .elementor-image-gallery .gallery-item img {
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}