/*
 * หน้าแรกแบบใหม่ทั้งหน้า (header, hero, รถ, บทความ, จุดเด่น, รีวิว, footer)
 * ใช้ชื่อคลาสใหม่ทั้งหมด ไม่ชนกับ style.css ของ template CarVilla ที่ยังโหลดอยู่ (หน้า /travel ยังใช้)
 */

:root {
	--brand: #4e4ffa;          /* สีน้ำเงินเดิมของเว็บ */
	--brand-dark: #3637d6;
	--accent: #ffe600;         /* เหลืองจากโลโก้ */
	--ink: #14163a;
	--ink-2: #4a4d6b;
	--muted: #8a8ca3;
	--line: #e7e8f2;
	--surface: #f5f6fb;
	--line-green: #06c755;
	--radius: 16px;
	--font-head: 'Prompt', 'Poppins', sans-serif;
	--font-body: 'IBM Plex Sans Thai', 'Poppins', sans-serif;
}

html { scroll-behavior: smooth; }
/* style.css เดิมจำกัด body ไว้ 1920px จอที่กว้างกว่านั้นจะเห็นขอบขาวซ้ายขวา ให้พื้นหลังเต็มจอ ส่วนเนื้อหายังอยู่ใน .container */
body { max-width: none; }
section[id], footer[id] { scroll-margin-top: 72px; }
/* style.css เดิมตั้ง a { text-transform: capitalize } ทำให้ @dcarrentcnx กลายเป็น @Dcarrentcnx */
.hd a, .hero a, .cars a { text-transform: none; }

/* ---------- ปุ่ม ---------- */
.btn2 {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
	font-family: var(--font-head); font-size: 16px; font-weight: 500; line-height: 1;
	text-decoration: none !important; cursor: pointer; white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn2:hover { transform: translateY(-1px); }
.btn2 .fa { font-size: 18px; }
.btn2-line { background: var(--line-green); color: #fff !important; box-shadow: 0 8px 20px rgba(6,199,85,.28); }
.btn2-line:hover { background: #05b04b; }
.btn2-ghost { background: rgba(255,255,255,.1); color: #fff !important; border-color: rgba(255,255,255,.45); }
.btn2-ghost:hover { background: rgba(255,255,255,.2); }
.btn2-outline { background: #fff; color: var(--ink) !important; border-color: var(--line); }
.btn2-outline:hover { border-color: var(--brand); color: var(--brand) !important; }
.btn2-sm { height: 42px; padding: 0 16px; font-size: 15px; }

/* ---------- header ---------- */
.hd {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	transition: background .25s, box-shadow .25s;
}
.hd-inner { display: flex; align-items: center; gap: 24px; height: 76px; transition: height .25s; }
.hd-logo img { height: 52px; width: auto; display: block; transition: height .25s; }
.hd-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hd-nav a {
	font-family: var(--font-head); font-size: 16px; font-weight: 500;
	color: rgba(255,255,255,.88); padding: 8px 14px; border-radius: 999px; text-decoration: none;
	transition: color .2s, background .2s;
}
.hd-nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.hd-cta { margin-left: 8px; }
.hd-toggle {
	display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px;
	border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 20px; background: transparent;
}

/* เลื่อนลงแล้ว header เป็นพื้นขาว */
/* [ทดลอง] header แบบกระจกใสมาก เห็นเนื้อหาด้านหลังแบบเบลอ
 * พื้นแทบใส เมนูจึงต้องเปลี่ยนสีตามพื้นด้านหลัง: พื้นสว่างใช้ตัวเข้ม, พื้นเข้ม (.is-dark ตั้งจาก JS) ใช้ตัวขาว
 * แบบเดิม (ขาวทึบ): background: rgba(255,255,255,.96); box-shadow: 0 4px 24px rgba(20,22,58,.08); backdrop-filter: blur(8px);
 *   และสีเมนู .hd.is-solid .hd-nav a { color: var(--ink-2); } ลบ .is-dark ทิ้งได้ */
.hd.is-solid {
	background: rgba(255,255,255,.12);
	-webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255,255,255,.25);
}
.hd.is-solid .hd-inner { height: 64px; }
.hd.is-solid .hd-logo img { height: 44px; }
.hd.is-solid .hd-nav a { color: var(--ink); }
.hd.is-solid .hd-nav a:hover { color: var(--brand); background: rgba(255,255,255,.5); }
.hd.is-solid .hd-toggle { color: var(--ink); border-color: rgba(20,22,58,.15); }
.hd.is-solid.is-dark { background: rgba(14,16,48,.12); border-bottom-color: rgba(255,255,255,.1); }
.hd.is-solid.is-dark .hd-nav a { color: #fff; }
.hd.is-solid.is-dark .hd-nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.hd.is-solid.is-dark .hd-toggle { color: #fff; border-color: rgba(255,255,255,.35); }

/* ---------- hero ---------- */
.hero {
	position: relative; color: #fff;
	background: #14163a url(../images/welcome-hero/slider_one.jpg) center right / cover no-repeat;
	padding: 150px 0 64px;
}
.hero::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(14,16,48,.94) 0%, rgba(14,16,48,.78) 42%, rgba(14,16,48,.25) 100%);
}
.hero > .container { position: relative; }
.hero-copy { max-width: 620px; }
.hero-promo {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,230,0,.14); border: 1px solid rgba(255,230,0,.45); color: var(--accent);
	padding: 6px 14px; border-radius: 999px; font-family: var(--font-head); font-size: 14px; font-weight: 500;
}
.hero h1 {
	font-family: var(--font-head); font-weight: 700; color: #fff;
	font-size: 52px; line-height: 1.25; margin: 20px 0 16px; text-transform: none;
}
.hero h1 span { color: var(--accent); }
.hero-lead { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0 0 24px; }
.hero-price { font-family: var(--font-body); font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 28px; }
.hero-price strong { font-family: var(--font-head); font-size: 40px; font-weight: 700; color: #fff; margin: 0 6px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-trust {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	margin-top: 56px; border-radius: var(--radius); overflow: hidden;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(6px);
}
.hero-trust li { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: rgba(14,16,48,.55); }
.hero-trust .fa {
	flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
	background: rgba(255,230,0,.15); color: var(--accent); font-size: 18px;
}
.hero-trust b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 15px; color: #fff; }
.hero-trust small { display: block; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.65); }

/* ---------- รายการรถ ---------- */
.cars { background: var(--surface); padding: 88px 0 96px; font-family: var(--font-body); }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.sec-eyebrow { font-family: var(--font-head); font-size: 14px; font-weight: 500; color: var(--brand); letter-spacing: .5px; }
.sec-head h2 { font-family: var(--font-head); font-size: 36px; font-weight: 600; color: var(--ink); margin: 8px 0 12px; text-transform: none; }
.sec-head p { font-size: 16px; color: var(--ink-2); margin: 0; }

.car-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.car-filter button {
	height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
	font-family: var(--font-head); font-size: 15px; color: var(--ink-2); text-transform: none;
	transition: all .2s;
}
.car-filter button span { color: var(--muted); margin-left: 4px; }
.car-filter button:hover { border-color: var(--brand); color: var(--brand); }
.car-filter button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.car-filter button.is-active span { color: rgba(255,255,255,.6); }

.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.car-card {
	display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden;
	border: 1px solid var(--line); transition: transform .25s, box-shadow .25s;
}
.car-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,58,.10); }
.car-card[hidden] { display: none; }

.car-media {
	position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 20px 24px 8px;
	background: radial-gradient(ellipse at 50% 80%, #eceefa 0%, #fff 70%); cursor: zoom-in;
}
/* รูปรถส่วนใหญ่พื้นขาว multiply ทำให้พื้นขาวกลืนไปกับพื้นหลัง ไม่เห็นเป็นกล่อง */
.car-media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.car-card:hover .car-media img { transform: scale(1.04); }
.car-seat {
	position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
	font-size: 13px; color: var(--ink-2);
}

.car-body { display: flex; flex-direction: column; flex: 1; padding: 8px 22px 22px; }
.car-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.car-body h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; text-transform: none; }
.car-price { text-align: right; white-space: nowrap; font-size: 13px; color: var(--muted); }
.car-price strong { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--brand); line-height: 1.1; }
.car-desc { list-style: none; padding: 0; margin: 14px 0 16px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.car-desc li { position: relative; padding-left: 18px; }
.car-desc li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .5; }
.car-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.car-specs li { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--ink-2); }
.car-specs .fa { color: var(--brand); }
.car-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: auto; }

.cars-note { text-align: center; margin-top: 40px; font-size: 15px; color: var(--ink-2); }
.cars-note a { color: var(--line-green); font-weight: 600; }

/* modal รูปรถ: ให้รูปพอดีจอ */
.car-modal .modal-content { background: transparent; border: 0; box-shadow: none; }
.car-modal img { display: block; max-width: 100%; margin: 0 auto; border-radius: 12px; }

/* ---------- บทความท่องเที่ยว ---------- */
.trips { background: #fff; padding: 96px 0; font-family: var(--font-body); }
.trips a, .why a, .reviews a, .ft a { text-transform: none; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; text-align: left; margin-bottom: 36px; }
.sec-head-row h2 { margin-bottom: 0; }
.trip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trip-card {
	display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff;
	border: 1px solid var(--line); color: inherit; text-decoration: none !important;
	transition: transform .25s, box-shadow .25s;
}
.trip-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,22,58,.10); }
.trip-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.trip-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.trip-card:hover .trip-img img { transform: scale(1.05); }
.trip-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.trip-body h3 { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.4; margin: 0 0 8px; text-transform: none; }
.trip-body p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }
.trip-more { margin-top: auto; font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--brand); }

/* ---------- ทำไมต้องเรา ---------- */
.why { background: var(--ink); color: #fff; padding: 96px 0; font-family: var(--font-body); }
.why .sec-eyebrow { color: var(--accent); }
.why .sec-head h2 { color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 16px 16px 24px; }
.why-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; margin-bottom: 18px; }
.why-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: #fff; margin: 0 8px 8px; text-transform: none; }
.why-card p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.7); margin: 0 8px; }
.why-text { max-width: 860px; margin: 48px auto 0; text-align: center; font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.6); }

/* ---------- รีวิว ---------- */
/* padding ล่างเผื่อกล่อง CTA ของ footer ที่ยกขึ้นมาทับ */
.reviews { background: var(--surface); padding: 96px 0 150px; font-family: var(--font-body); }
.rv-nav { display: flex; gap: 8px; }
.rv-btn {
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
	color: var(--ink); font-size: 22px; display: grid; place-items: center; transition: all .2s;
}
.rv-btn:hover { border-color: var(--brand); color: var(--brand); }
.rv-track {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	/* กว้างเต็มจอ ชิดขอบซ้าย-ขวาเท่ากัน */
	padding: 4px 16px 8px;
	scroll-padding: 0 16px;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track img { flex: none; height: 380px; width: auto; border-radius: 16px; scroll-snap-align: start; background: #e9eaf3; box-shadow: 0 8px 24px rgba(20,22,58,.08); }

/* ---------- footer ---------- */
.ft { background: #0d0f2b; color: rgba(255,255,255,.7); font-family: var(--font-body); padding: 0 0 28px; }
.ft-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	background: linear-gradient(120deg, var(--brand) 0%, #2b2cc4 100%); border-radius: 24px;
	padding: 36px 40px; transform: translateY(-50%); margin-bottom: -40px;
	box-shadow: 0 20px 50px rgba(78,79,250,.3);
}
.ft-cta h2 { font-family: var(--font-head); font-size: 28px; font-weight: 600; color: #fff; margin: 0 0 6px; text-transform: none; }
.ft-cta p { color: rgba(255,255,255,.8); margin: 0; font-size: 16px; }
.ft-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-bottom: 40px; }
.ft-logo { height: 56px; width: auto; margin-bottom: 18px; }
.ft-col p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.ft-addr .fa { color: var(--accent); margin-right: 6px; }
.ft-col h3 { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: #fff; margin: 4px 0 16px; text-transform: none; }
.ft-contact { list-style: none; padding: 0; margin: 0; }
/* style.css เดิมทำ li ใน footer เป็น inline ทำให้ LINE กับ Facebook ขึ้นบรรทัดเดียวกัน */
.ft-contact li { display: block; margin-bottom: 10px; }
.ft-contact a { color: rgba(255,255,255,.85); font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.ft-contact a:hover { color: #fff; }
.ft-contact .fa { width: 18px; text-align: center; font-size: 17px; color: var(--accent); }
.ft-contact span { color: rgba(255,255,255,.45); font-size: 13px; }
.ft-embed iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 16px; background: #fff; }
.ft-fb { max-width: 500px; }
.ft-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; text-align: center; font-size: 13px; color: rgba(255,255,255,.4); }

@media (max-width: 991px) {
	.trip-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
	.ft-grid { grid-template-columns: 1fr 1fr; }
	.ft-grid > .ft-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.trips, .why { padding: 64px 0; }
	.reviews { padding: 64px 0 100px; }
	.sec-head-row { flex-direction: column; align-items: flex-start; }
	/* มือถือ: บทความกับจุดเด่นเป็นแถวปัดซ้าย-ขวาแบบรีวิว ไม่ต่อกันยาวลงมา (เห็นใบถัดไปโผล่นิดหน่อยให้รู้ว่าปัดได้) */
	.trip-grid, .why-grid {
		display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 0 -15px; padding: 0 15px 4px; scroll-padding: 0 15px;
	}
	.trip-grid::-webkit-scrollbar, .why-grid::-webkit-scrollbar { display: none; }
	.trip-card, .why-card { flex: 0 0 82%; scroll-snap-align: start; }
	/* ปัดอยู่ไม่ต้องยกการ์ดขึ้นตอนแตะ */
	.trip-card:hover { transform: none; box-shadow: none; }
	.why-text { margin-top: 32px; text-align: left; }
	.rv-nav { display: none; }
	.rv-track img { height: 300px; }
	.ft-cta { padding: 28px 22px; transform: translateY(-40px); margin-bottom: 0; }
	.ft-cta h2 { font-size: 22px; }
	.ft-cta-actions, .ft-cta-actions .btn2 { width: 100%; }
	.ft-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- จอเล็ก ---------- */
@media (max-width: 991px) {
	.hero h1 { font-size: 42px; }
	.hero-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.hd-inner { height: 64px; }
	.hd-logo img { height: 42px; }
	.hd-toggle { display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
	/* มือถือใช้เมนูเต็มจอ (.mnav) แทนเมนูแนวนอน */
	.hd-nav { display: none; }
	/* เมนูเปิด: header ใสทับเมนู ปุ่มกลายเป็น ✕ สีขาว */
	.hd.is-open, .hd.is-open.is-solid { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.hd.is-open .hd-toggle, .hd.is-open.is-solid .hd-toggle { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }

	.hero { padding: 110px 0 40px; background-position: 70% center; }
	.hero::before { background: linear-gradient(180deg, rgba(14,16,48,.88) 0%, rgba(14,16,48,.8) 60%, rgba(14,16,48,.92) 100%); }
	.hero h1 { font-size: 32px; }
	.hero-lead { font-size: 16px; }
	.hero-price strong { font-size: 32px; }
	.hero-actions .btn2 { flex: 1 1 100%; }
	.hero-trust { margin-top: 36px; }
	.hero-trust li { padding: 14px; gap: 10px; }
	.hero-trust .fa { width: 34px; height: 34px; font-size: 15px; }

	.cars { padding: 56px 0 72px; }
	.sec-head h2 { font-size: 28px; }
	.car-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 420px) {
	.hero-trust { grid-template-columns: 1fr; }
}

/* ---------- [ทดลอง] การ์ดรถแบบกะทัดรัดบนมือถือ ----------
 * รูปซ้าย ชื่อ/ราคา/สเปกขวา ปุ่มเต็มแถวด้านล่าง ซ่อนคำอธิบาย desc1/desc2 (ยังเห็นในรูปเต็ม)
 * ถ้าไม่ชอบ ลบทั้งก้อนนี้ทิ้งได้เลย การ์ดจะกลับเป็นแบบเดิม ไม่มีส่วนอื่นพึ่งก้อนนี้
 */
@media (max-width: 767px) {
	.car-grid { gap: 12px; }
	.car-card {
		display: grid; grid-template-columns: 42% 1fr; border-radius: 16px;
		grid-template-areas: "media top" "media specs" "actions actions";
		column-gap: 12px; padding: 12px;
	}
	/* ให้ลูกของ .car-body ไปวางในกริดของการ์ดได้ตรงๆ */
	.car-body { display: contents; }
	.car-media { grid-area: media; aspect-ratio: auto; padding: 22px 0 0; border-radius: 10px; }
	.car-seat { top: 0; left: 0; padding: 2px 8px; font-size: 12px; }
	.car-top { grid-area: top; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 2px; }
	.car-body h3 { font-size: 17px; line-height: 1.3; }
	.car-price { text-align: left; }
	.car-price strong { display: inline; font-size: 21px; margin-right: 4px; }
	.car-desc { display: none; }
	.car-specs { grid-area: specs; margin: 8px 0 0; align-self: end; gap: 4px; }
	.car-specs li { padding: 4px 8px; font-size: 12px; }
	.car-actions { grid-area: actions; margin-top: 12px; grid-template-columns: 1fr 1fr; gap: 8px; }
	.car-actions .btn2 { height: 40px; }
}

/* ---------- เมนูมือถือเต็มจอ ---------- */
.mnav { display: none; }
@media (max-width: 767px) {
	html.nav-open, html.nav-open body { overflow: hidden; }
	html.nav-open .fab { display: none; }   /* ปุ่มติดต่อลอย ไม่ให้ทับเมนู (ในเมนูมีปุ่มติดต่ออยู่แล้ว) */

	.mnav {
		display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 999;
		padding: 88px 20px calc(24px + env(safe-area-inset-bottom));
		background:
			radial-gradient(120% 60% at 100% 0%, rgba(78,79,250,.45) 0%, transparent 60%),
			radial-gradient(80% 50% at 0% 100%, rgba(255,230,0,.10) 0%, transparent 60%),
			#0d0f2b;
		font-family: var(--font-body); overflow-y: auto;
		opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
	}
	.mnav.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }

	.mnav-links { display: flex; flex-direction: column; }
	.mnav-links a {
		display: flex; align-items: center; gap: 16px; padding: 16px 4px;
		border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; text-transform: none;
		/* เลื่อนขึ้นมาทีละอันตอนเปิด */
		opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease;
	}
	.mnav.is-open .mnav-links a { opacity: 1; transform: none; }
	.mnav.is-open .mnav-links a:nth-child(1) { transition-delay: .05s; }
	.mnav.is-open .mnav-links a:nth-child(2) { transition-delay: .10s; }
	.mnav.is-open .mnav-links a:nth-child(3) { transition-delay: .15s; }
	.mnav.is-open .mnav-links a:nth-child(4) { transition-delay: .20s; }
	.mnav-links a:active { background: rgba(255,255,255,.04); }
	.mnav-ic {
		flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
		background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: var(--accent); font-size: 20px;
	}
	.mnav-txt { flex: 1; font-family: var(--font-head); font-size: 22px; font-weight: 600; line-height: 1.25; }
	.mnav-txt small { display: block; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,.55); margin-top: 2px; }
	.mnav-links .fa-angle-right { color: rgba(255,255,255,.35); font-size: 22px; }

	.mnav-foot {
		margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px;
		opacity: 0; transform: translateY(14px); transition: opacity .35s ease .25s, transform .35s ease .25s;
	}
	.mnav.is-open .mnav-foot { opacity: 1; transform: none; }
	.mnav-foot .btn2 { width: 100%; height: 52px; font-size: 17px; }
	.mnav-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.mnav-quick a {
		display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px;
		border: 1px solid rgba(255,255,255,.18); color: #fff; font-family: var(--font-head); font-size: 15px; text-decoration: none; text-transform: none;
	}
	.mnav-quick .fa-phone { color: var(--accent); }
	.mnav-quick .fa-facebook-official { color: #4b8bff; }
	.mnav-foot p { margin: 6px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.45); }
}

/* ---------- ปุ่มติดต่อลอย ---------- */
/* จอคอม: ปุ่มกลมเรียงแนวนอนมุมซ้ายล่าง LINE | Facebook | โทร ชี้แล้วป้ายชื่อเลื่อนขึ้นมาด้านบน */
.fab {
	position: fixed; left: 24px; bottom: 24px; z-index: 900;
	display: flex; flex-direction: row; align-items: center; gap: 12px;
	font-family: var(--font-head);
}
/* ลำดับเดียวกันทั้งจอคอมและมือถือ: LINE (ปุ่มหลัก ชิดมุม) | Facebook | โทร */
.fab-line { order: 1; } .fab-fb { order: 2; } .fab-phone { order: 3; }
.fab-btn {
	position: relative; width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center; color: #fff !important; text-decoration: none !important; text-transform: none;
	box-shadow: 0 10px 24px rgba(20,22,58,.22); transition: transform .2s, box-shadow .2s;
	/* ขอบขาวบาง แยกปุ่มออกจากพื้นหลังได้ทั้งส่วนพื้นขาวและพื้นน้ำเงินเข้ม (ปุ่มโทรสีเดียวกับ footer) */
	border: 2px solid rgba(255,255,255,.85);
}
.fab-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 30px rgba(20,22,58,.3); }
.fab-btn .fa { font-size: 24px; }
.fab-btn svg { width: 30px; height: 30px; }
.fab-phone { background: var(--ink); }
.fab-phone .fa { color: var(--accent); }
.fab-line { background: var(--line-green); width: 64px; height: 64px; }
.fab-line svg { width: 36px; height: 36px; }
.fab-fb { background: #1877f2; }
/* วงคลื่นรอบปุ่ม LINE ให้สะดุดตาว่าเป็นปุ่มหลัก */
.fab-line::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--line-green);
	animation: fab-pulse 2.4s ease-out infinite; z-index: -1;
}
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fab-line::before { animation: none; } }
.fab-label {
	position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
	white-space: nowrap; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500;
	padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 20px rgba(20,22,58,.15);
	opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.fab-label b { font-weight: 600; }
.fab-btn:hover .fab-label, .fab-btn:focus-visible .fab-label { opacity: 1; transform: translate(-50%, 0); }
/* ป้ายของ LINE ชิดซ้ายจอ ถ้าจัดกลางปุ่มจะล้นขอบซ้าย */
.fab-line .fab-label { left: 0; transform: translate(0, 8px); }
.fab-line:hover .fab-label, .fab-line:focus-visible .fab-label { transform: translate(0, 0); }

/* มือถือ: แคปซูลเล็กมุมซ้ายล่าง ไอคอนล้วน 3 ปุ่มเรียงแนวนอน (เล็กกว่าปุ่มรูปภาพเดิมราวครึ่งหนึ่ง) */
@media (max-width: 767px) {
	/* เผื่อที่ท้าย footer ไม่ให้แคปซูลบังบรรทัด © */
	.ft { padding-bottom: calc(28px + 56px + env(safe-area-inset-bottom)); }
	.fab {
		/* ไม่บวก safe-area ของ iPhone (ราว 34px) เพราะจะลอยสูงเกิน แคปซูลอยู่ซ้าย ไม่ทับแถบ home ที่อยู่กลางจอ */
		left: 12px; bottom: 8px;
		flex-direction: row; align-items: center; gap: 6px; padding: 5px;
		background: rgba(255,255,255,.75); border: 1px solid rgba(20,22,58,.08); border-radius: 999px;
		-webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
		box-shadow: 0 8px 24px rgba(20,22,58,.18);
	}
	.fab-btn, .fab-line { width: 40px; height: 40px; border: 0; box-shadow: none; }
	.fab-btn:hover { transform: none; box-shadow: none; }
	.fab-btn .fa { font-size: 18px; }
	.fab-btn svg, .fab-line svg { width: 24px; height: 24px; }
	/* LINE ยังเด่นสุด: มีคลื่นเบาๆ */
	.fab-line::before { animation-duration: 3s; }
	@keyframes fab-pulse { 0% { transform: scale(1); opacity: .45; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
	.fab-label { display: none; }
}