/* ==========================================================================
SPEEDY — Design System (Phase 2 Mockup)
ฐานมาจาก speedy_homepage_mockup.html (อนุมัติแล้วโดยลูกค้า)
ต่อยอดเพิ่ม: Hamburger header + Mega menu, และ component ใหม่สำหรับหน้าลูก
========================================================================== */
:root{
/* ==========================================================================
ธีมสว่าง (Light Theme) — เปลี่ยนทั้งเว็บ 17 ส.ค. 69
--------------------------------------------------------------------------
โทเคนหลักใช้ชื่อเชิงความหมาย (--bg / --surface / --ink / --line ...)
ส่วนชื่อเดิม (--black / --white / --gray-line ...) คงไว้เป็น "ชื่อพ้อง" ที่ชี้มาที่โทเคนใหม่
เพื่อไม่ให้ inline style ในไฟล์ HTML และ CSS เดิมที่อ้างชื่อเก่าอยู่พังทั้งหมด
⚠️ ชื่อเก่าไม่ได้แปลว่าสีดำอีกต่อไปแล้ว — เขียนโค้ดใหม่ให้ใช้ชื่อใหม่เท่านั้น
========================================================================== */
--bg:#ffffff; /* พื้นหน้าเว็บ */
--surface:#f7f7f7; /* พื้นการ์ด / กล่อง */
--surface-2:#f0f0f0; /* พื้นรอง (แถบ, ปุ่มควบคุม) */
--ink:#0a0a0a; /* ตัวหนังสือหลัก */
--ink-soft:#3f3f3f; /* ตัวหนังสือรอง (ย่อหน้า) */
--muted:#6d6d6d; /* ตัวหนังสือจาง (คำอธิบาย, ป้ายกำกับ) */
--line:#e2e2e2; /* เส้นขอบ / เส้นคั่น */
--red:#e2101a; /* สีแบรนด์ — ใช้กับพื้น/ขอบ/ไอคอน/สถานะ hover */
--red-dark:#a80c14;
--red-ink:#b60d15; /* สีแบรนด์เวอร์ชันเข้มขึ้น สำหรับ "ตัวหนังสือแดงตัวเล็ก" บนพื้นสว่าง
(#e2101a บนพื้นขาวคอนทราสต์แค่ ~4.4:1 อ่านยากที่ขนาด 11-13px) */
/* ---- ชื่อพ้องของเดิม (backward compatible) ---- */
--black:var(--bg);
--black-soft:var(--surface);
--white:var(--ink);
--off-white:#f4f3f1;
--gray:var(--muted);
--gray-line:var(--line);
--max:1280px;
/* ---- โซนพื้นเข้มที่ยังคงไว้โดยตั้งใจ (17 ส.ค. 69 รอบแก้ที่ 2) ----
เว็บเป็นธีมสว่างเป็นหลัก แต่ 3 ส่วนนี้ลูกค้ายืนยันให้เป็นพื้นเข้ม:
1. header — แถบไล่สีดำจางลงจนใส (ทับภาพ Hero สไตล์ Porsche official)
2. footer — ทุกหน้า
3. section Model Lineup ของหน้าแรก
ตัวแปรชุด --dark-* นี้มีไว้ให้ 3 ส่วนนั้นใช้ร่วมกัน จะได้แก้ที่เดียวจบ */
--dark-bg:#0a0a0a; /* พื้นโซนเข้ม */
--dark-surface:#141414; /* พื้นการ์ดในโซนเข้ม */
--dark-line:#232323; /* เส้นคั่นในโซนเข้ม */
--dark-ink:#ffffff; /* ตัวหนังสือในโซนเข้ม */
--dark-muted:#8a8a8a; /* ตัวหนังสือจางในโซนเข้ม */
/* แถบไล่สีของ header: เข้มด้านบน -> ใสสนิทที่ขอบล่าง ตามภาพอ้างอิงจากลูกค้า
ปรับ 28 ส.ค. 69 (คุณเอิร์ธ) รอบที่ 3 — เลิกยัดทั้ง "โซนเข้ม" กับ "โซนเฟด" ไว้ในความสูงเดียวกัน
ปัญหาเดิม: แถบสูงเท่ากับแถวปุ่มพอดี การไล่สีจึงต้องเริ่มจางตั้งแต่กลางแถว = ขอบล่างโลโก้ลอยอยู่บนพื้นจางๆ
โครงใหม่แยกเป็น 2 ส่วน
1) --header-solid : แถบทึบเต็ม คลุมแถวปุ่มเมนู / โลโก้ / ปุ่มภาษา ทั้งแถว ไม่มีเฟดปนเลย
2) --header-tail : หางเฟดที่ต่อ "ใต้" แถบลงไปอีก --header-tail-h (วาดด้วย header::after)
เป็น absolute จึงไม่กินที่ในเลย์เอาต์ ไม่ดัน section ใดๆ ลง */
--header-solid:rgba(0,0,0,.92);
--header-tail-h:60px;
--header-tail:linear-gradient(180deg,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.74) 20%,
rgba(0,0,0,.52) 40%,
rgba(0,0,0,.31) 60%,
rgba(0,0,0,.15) 78%,
rgba(0,0,0,.05) 91%,
rgba(0,0,0,0) 100%);
/* ความสูง "จอ" ที่ section แบบเต็มจอใช้อ้างอิง (Featured Stories / Services)
มือถือจริง = ความสูงหน้าต่างเบราว์เซอร์ · โหมด demo Mobile = ความสูงในกรอบจำลอง (ทับค่าที่ .frame-wrap.mobile-mode)
มีตัวแปรนี้เพื่อให้ 2 section คำนวณขนาดการ์ดจาก "ตัวเลขเดียวกัน" การ์ดจะได้ขนาดเท่ากันเป๊ะทั้งคู่ */
--screen-h:100svh;
/* ความสูงแถบ header + ความสูงโลโก้ (28 ส.ค. 69 — ขยายฝั่ง Desktop ตามภาพอ้างอิง Porsche)
Desktop = 96px / โลโก้ 56px · มือถือคงเดิม 64px / โลโก้ 42px (override ด้านล่าง)
ทุกจุดที่ต้องรู้ความสูง header (margin ติดลบของหน้า Hero) อ้างตัวแปรนี้ แก้ที่เดียวจบ */
--header-h:96px;
--logo-h:56px;
--burger-w:32px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar{display:none;width:0;height:0;}
body{
font-family:'Prompt',sans-serif;
background:var(--bg);
color:var(--ink);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
scrollbar-width:none;-ms-overflow-style:none;
}
body::-webkit-scrollbar{display:none;width:0;height:0;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img,svg{display:block;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
/* ===== Page push-transition (มือถือ): สไลด์ระหว่างเปลี่ยนหน้าเว็บจริง เช่น Ready Stock -> รายการรถ =====
ใช้กับ #frameWrap (กล่องครอบทั้งหน้า) — JS จะติดคลาสนี้เฉพาะตอนอยู่โหมดมือถือเท่านั้น (ดู main.js: isMobileMenuMode) */
#frameWrap.page-exit{
animation:speedyPageExit .3s cubic-bezier(.4,0,.2,1) forwards;
}
#frameWrap.page-enter{
animation:speedyPageEnter .42s cubic-bezier(.4,0,.2,1);
}
@keyframes speedyPageExit{
to{transform:translateX(-100%);opacity:0;}
}
@keyframes speedyPageEnter{
from{transform:translateX(100%);opacity:.5;}
to{transform:translateX(0);opacity:1;}
}
h1,h2,h3{font-weight:600;letter-spacing:0.5px;}
.eyebrow{
font-size:12px;letter-spacing:3px;text-transform:uppercase;
color:var(--red-ink);font-weight:600;margin-bottom:10px;display:block;
}
/* ===== DEMO SWITCHER (not part of real site — เพื่อให้ลูกค้าดู Desktop/Mobile ในไฟล์เดียว) ===== */
.demo-switcher{
position:fixed;top:14px;right:14px;z-index:9999;
background:rgba(255,255,255,0.92);border:1px solid #dcdcdc;
border-radius:30px;padding:4px;display:flex;gap:4px;
box-shadow:0 6px 20px rgba(0,0,0,.10);
backdrop-filter:blur(6px);
}
.demo-switcher button{
border:none;background:transparent;color:var(--gray);
font-family:'Prompt';font-size:12px;padding:8px 16px;border-radius:24px;cursor:pointer;transition:.2s;
}
.demo-switcher button.active{background:var(--red);color:#fff;}
/* บนมือถือจริง (จอ ≤900px) ไม่ต้องมีปุ่มสลับ Desktop/Mobile แล้ว — มันเป็นเครื่องมือพรีเซนต์บนคอมเท่านั้น
ถ้าไม่ซ่อน ปุ่มจะลอยทับปุ่มเมนู 3 ขีดมุมขวาบนตอนเปิดจากมือถือจริง/ลิงก์ที่แชร์ให้ทีมดู */
@media (max-width:900px){ .demo-switcher{display:none;} }
.frame-wrap{transition:.3s;}
.frame-wrap.mobile-mode{
max-width:390px;height:844px;max-height:82vh;margin:60px auto;
border:8px solid #1c1c1c;border-radius:40px;overflow:hidden;
/* ความสูงจอในกรอบจำลอง = ความสูงกรอบ (min ของ 2 ค่าด้านบน) ลบขอบ 8px บน+ล่าง
⚠️ ถ้าแก้ height/max-height/border ด้านบน ต้องแก้บรรทัดนี้ตามด้วย ไม่งั้นการ์ด Services จะเพี้ยน */
--screen-h:calc(min(844px, 82vh) - 16px);
box-shadow:0 0 0 2px #333, 0 30px 60px rgba(0,0,0,.6);
/* กรอบนี้คือ "จอมือถือจำลอง" ที่มีขนาดคงที่จริงๆ (เหมือนมือถือจริง) ไม่ใช่กรอบตกแต่งรอบเนื้อหายาวๆ ที่ปล่อยให้
เบราว์เซอร์เลื่อนแทน — ตัวที่เลื่อนจริงคือ .frame-scroll ข้างในต่างหาก (ดูด้านล่าง)
transform (แม้ค่า 0) ทำให้กล่องนี้กลายเป็น containing block ของทั้งเมนู 3 ขีดเต็มจอ (.mega-menu) และแถบปุ่ม
เมนู 3 ขีดเต็มจอเป็น position:fixed จึงถูก "ครอบ" อยู่ในกรอบพอดีเป๊ะและติดขอบกรอบถูกต้อง
แทนที่จะหลุดไปเต็มจอเบราว์เซอร์จริงแบบที่คุณเอิร์ธเจอ — และเพราะกรอบนี้มีขนาดคงที่ไม่ขยับตาม .frame-scroll
ที่เลื่อนอยู่ข้างใน ทั้งเมนูและแถบปุ่มเลยยัง "ติดจอ" ถูกตำแหน่งเสมอไม่ว่าจะเลื่อนเนื้อหาไปแค่ไหน */
transform:translateZ(0);
position:relative;
}
.frame-wrap.mobile-mode .desktop-only{display:none !important;}
.frame-wrap.mobile-mode .mobile-only{display:flex !important;}
.frame-wrap.mobile-mode .container{padding:0 18px;}
/* .frame-scroll คือ "จอที่เลื่อนได้" ตัวจริงภายในกรอบมือถือจำลอง (ครอบ header+เนื้อหาทุกหน้า+footer
แต่ไม่รวมเมนู 3 ขีดซึ่งลอยอยู่เหนือกรอบเสมอ) โหมดเดสก์ท็อปไม่ต้องทำอะไรเป็นพิเศษ
ปล่อยให้ทั้งหน้าเลื่อนตามปกติเหมือนเดิม */
.mobile-mode .frame-scroll{
height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;
}
.mobile-mode .frame-scroll::-webkit-scrollbar{display:none;width:0;height:0;}
/* ===== CUSTOM FLOATING SCROLLBAR (แทน scrollbar เบราว์เซอร์เดิม สไตล์ Porsche) =====
ทำงานทั้งสอง scroll context: (1) หน้าเว็บปกติ/มือถือจริง — เลื่อนทั้งหน้าผ่าน window/document
(2) โหมด demo "Mobile" (#frameWrap.mobile-mode) — ตัวที่เลื่อนจริงคือ #frameScroll ต่างหาก
ตัว indicator เองเป็น position:fixed และถูกแนบเป็นลูกของ #frameWrap โดย JS (ดู main.js: initCustomScrollbar)
ใช้ trick เดียวกับ .mega-menu: #frameWrap.mobile-mode มี transform ทำให้กลายเป็น containing
block ของ fixed descendant ทั้งหมด — indicator เลยถูก "ครอบ" อยู่ในกรอบมือถือจำลองพอดีอัตโนมัติตอน demo mobile
แต่ลอยอิงกับ viewport จริงตามปกติตอนไม่ใช่ mobile-mode ไม่ต้องคำนวณตำแหน่งเพิ่มเอง
ตำแหน่งแนวตั้งของ thumb + สีขาว/ดำ auto-contrast คำนวณสดด้วย JS ทุกครั้งที่เลื่อน/resize/สลับโหมด */
.custom-scrollbar{
position:fixed;
top:26px;bottom:26px;right:9px;
width:16px;
z-index:250; /* ต่ำกว่า .mega-menu (300) ให้ถูกบังตอนเมนูเต็มจอเปิดอยู่ / สูงกว่า header (100) */
pointer-events:none;
}
/* !important กันชนกับ .mobile-mode .mega-menu-scrollbar{display:block} (ดู MEGA MENU section) ซึ่งมี specificity
เท่ากัน (2 คลาส) แต่มาทีหลังในไฟล์ — ต้องให้ is-hidden ชนะเสมอไม่ว่าจะ mobile-mode หรือไม่ก็ตาม */
.custom-scrollbar.is-hidden{display:none !important;} /* เนื้อหาไม่ล้นจอ (ไม่มีอะไรให้เลื่อน) — พฤติกรรมเดียวกับ scrollbar จริง */
.custom-scrollbar-track{
position:absolute;top:0;bottom:0;left:50%;
width:1px;transform:translateX(-50%);
background:rgba(10,10,10,.16); /* เส้นบางๆจางๆ บนพื้นสว่าง (เดิมเป็น #E5E5E5 สำหรับพื้นดำ) */
border-radius:1px;
}
.custom-scrollbar-thumb{
position:absolute;top:0;left:50%;
width:6px;height:50%;margin-left:-3px; /* ความยาว thumb = 50% ของความยาว track ทั้งหมดของหน้านั้นๆ (เดิม 6px จุดกลมเล็กๆ) */
border-radius:3px; /* เท่ากับครึ่งความกว้าง -> ปลายโค้งมนแบบเม็ดยา (pill) แทนวงกลม ให้เข้ากับรูปทรงที่ยาวขึ้น */
background:#fff; /* ค่าเริ่มต้น = อยู่บนพื้นเข้ม (ภาพ Hero / การ์ดรูปหน้าแรก) — JS สลับให้เองตามพื้นหลังจริง */
opacity:.4;transform:scale(.8);transform-origin:center;
/* ลากได้: .custom-scrollbar ทั้งกล่อง pointer-events:none (ไม่บังคลิกเนื้อหาข้างใต้) แต่ thumb เปิด pointer-events
กลับมาเฉพาะตัวมันเอง (ดู main.js: attachScrollbarDrag) ให้กดค้าง-ลากขึ้นลงเพื่อเลื่อนไปตำแหน่งใดก็ได้อย่างอิสระ */
pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
transition:opacity .4s cubic-bezier(.4,0,.2,1),
transform .4s cubic-bezier(.4,0,.2,1),
background-color .25s ease,
top .12s linear; /* ตำแหน่งขยับตามสกอลล์แบบนุ่มๆ ไม่กระตุก */
}
/* hit-area ที่มองไม่เห็น กว้างกว่ารูปที่แสดงจริง (thumb เส้นเล็ก 6px) เพื่อให้กดจับด้วยนิ้ว/เมาส์ได้ง่ายขึ้นโดยไม่ต้อง
ขยายขนาดที่มองเห็น — ครอบตามความสูงจริงของ thumb (top:0;bottom:0 อิง thumb ซึ่ง position:absolute อยู่แล้ว) */
.custom-scrollbar-thumb::before{
content:'';
position:absolute;top:0;bottom:0;left:50%;
width:28px;transform:translateX(-50%);
}
/* กำลังเลื่อนอยู่ -> เด่นชัดเต็มที่ (opacity 1 / scale 1) ~1.2s หลังหยุดเลื่อนจะ fade กลับ idle อัตโนมัติ (ดู main.js) */
.custom-scrollbar.is-active .custom-scrollbar-thumb{
opacity:1;transform:scale(1);
}
/* กำลังลาก thumb อยู่ (mousedown/touchstart ค้าง) -> ตัด transition ของ top ออกชั่วคราว ให้ thumb ตามนิ้ว/เมาส์ทันที
ไม่หน่วงตามจังหวะ .12s ปกติ (ซึ่งออกแบบไว้สำหรับตอน "เลื่อนแล้วค่อยขยับตาม" ไม่ใช่ตอนลากโดยตรง) */
.custom-scrollbar.is-dragging .custom-scrollbar-thumb{
transition:opacity .25s ease,transform .4s cubic-bezier(.4,0,.2,1),background-color .25s ease;
cursor:grabbing;
}
/* auto-contrast: สลับสี thumb ขาว/ดำ ตามพื้นหลังจริงตรงตำแหน่ง indicator ตอนนั้น (คำนวณสดด้วย JS ทุกครั้งที่เลื่อน) */
/* JS ติดคลาสนี้เมื่อพื้นหลังตรงตำแหน่ง indicator "สว่าง" (luminance > .5) — หลังเปลี่ยนเป็นธีมสว่าง
นี่คือกรณีปกติของเกือบทั้งเว็บ ส่วนค่าตั้งต้นสีขาวด้านบนจะใช้เฉพาะตอนทับพื้นเข้ม (ภาพ Hero / การ์ดรูปหน้าแรก) */
.custom-scrollbar-thumb.on-light{background:#0a0a0a;}
@media (max-width:900px){
}
/* ===== CUSTOM FLOATING SCROLLBAR — เวอร์ชันของเมนู 3 ขีด (hamburger) โดยเฉพาะ =====
ลูกค้าคอนเฟิร์มว่าที่ต้องการคือ "scrollbar ทั้งเว็บ" จริงๆ ไม่ใช่แค่หน้าเว็บหลัก — งานรอบก่อนตั้งใจไม่แตะ
3 หน้าจอย่อยที่เลื่อนเองอิสระในเมนู (.mega-menu-list / [data-mega-sub="brands"] / [data-mega-sub="cars"]
ดูประวัติที่คอมเมนต์บล็อกด้านบน @media(max-width:900px){ .mega-menu-screens{overflow-y:hidden;} ... })
รอบนี้เพิ่ม indicator ลูกที่สอง หน้าตา/พฤติกรรมเหมือน .custom-scrollbar ของหน้าเว็บหลักทุกอย่าง (ใช้คลาส
.custom-scrollbar/-track/-thumb ร่วมกันเป๊ะๆ ไม่แยกสไตล์ใหม่) ต่างกันแค่ตำแหน่ง/บริบทการเลื่อนที่ผูกอยู่ ซึ่งเป็น
ของ 1 ใน 3 หน้าจอย่อยด้านในเมนูแทน (ดู main.js: initMegaMenuScrollbar()) — แนบเป็นลูกของ #megaMenu เอง
(ไม่ใช่ #frameWrap เหมือนตัวหลัก) เพื่อให้อยู่ใน stacking context ของเมนู ลอยทับเนื้อหาเมนูได้เลยโดยไม่ต้องแย่ง
z-index กับตัวหลัก (ตัวหลัก z-index:250 ต่ำกว่า .mega-menu z-index:300 โดยตั้งใจ เพื่อให้โดนเมนูเต็มจอบังตอนเปิดอยู่
— อันนี้อยู่ "ข้างใน" เมนูไปเลยจึงลอยเหนือเนื้อหาเมนูได้โดยอัตโนมัติตามลำดับ DOM ไม่ต้องพึ่ง z-index สูงๆ)
ตำแหน่ง: เลื่อนจุดเริ่มลงมาต่ำกว่าปุ่มปิด (.mega-menu-close: top:22px;right:24px;42x42) เพื่อไม่ให้ชนกัน
ขอบเขต: เฉพาะมือถือ (จอจริง max-width:900px หรือ demo toggle .mobile-mode) เท่านั้น — ระบบ drill-down 3 ชั้นนี้
เป็นของมือถือล้วนๆ อยู่แล้ว เดสก์ท็อปใช้เมนู 3 คอลัมน์ hover-preview คนละแบบ ไม่มีอะไรให้เลื่อนแบบนี้ */
.mega-menu-scrollbar{display:none;}
#megaMenu .custom-scrollbar.mega-menu-scrollbar{
position:absolute;top:74px;bottom:26px;right:9px;z-index:5;
}
@media (max-width:900px){
.mega-menu-scrollbar{display:block;}
}
.mobile-mode .mega-menu-scrollbar{display:block;}
/* ===== HEADER ===== */
/* Header ไม่ลอยตามจอแล้ว (ยืนยันโดยคุณเอิร์ธ 13 ส.ค. 69) — เป็นแถบธรรมดาที่อยู่บนสุดของหน้า
เลื่อนลงแล้วหายไปกับเนื้อหา ต้องเลื่อนกลับขึ้นบนสุดถึงจะเห็นเมนู/โลโก้/ปุ่มเปลี่ยนภาษา
ผลพลอยได้: ไม่มีปัญหา header บังส่วนบนของ section อื่นอีกต่อไป section จึงไม่ต้องเว้นที่เผื่อมัน */
/* ==========================================================================
header มี 2 ธีม — แยกตาม "ข้างหลังแถบเป็นอะไร" ไม่ใช่แยกตามหน้า
--------------------------------------------------------------------------
ธีม LIGHT (ค่าเริ่มต้น · ทุกหน้าที่ไม่มีภาพ Hero)
Contact / Privacy / Newsroom / Models ทั้ง 3 หน้า
แถบใช้สีเดียวกับพื้นหน้าเว็บ กลืนไปเลยไม่เห็นเป็นแถบ · ตัวอักษร-ไอคอนสีเข้ม · โลโก้ไฟล์ดำ
(28 ส.ค. 69: หน้า Article detail ย้ายออกจากกลุ่มนี้ไปกลุ่ม DARK แล้ว — มีภาพ Hero เต็มจอ)
ธีม DARK (.page-home / .page-svc / .page-dlv / .page-about / .page-art)
header ลอยทับภาพ Hero → แถบทึบดำ + หางเฟด · ตัวอักษร-ไอคอนสีขาว · โลโก้ไฟล์ขาว
เหตุที่ให้ LIGHT เป็นค่าเริ่มต้น: หน้ากลุ่มนั้นมีเยอะกว่า และหน้าใหม่ที่สร้างทีหลัง
ส่วนใหญ่จะเป็นหน้าเนื้อหาพื้นขาว — ไม่ต้องจำว่าต้องใส่คลาสอะไรเพิ่ม
========================================================================== */
header{
position:relative;z-index:100;
background:var(--bg);
border-bottom:none;
}
.page-home header,
.page-svc header,
.page-bsp header,
.page-dlv header,
.page-about header,
.page-art header{background:var(--header-solid);}
/* ==========================================================================
.page-glass — แถบใสจริง ให้พื้นของ section ที่อยู่ข้างล่างไหลขึ้นมาอยู่หลังแถบเอง
--------------------------------------------------------------------------
ใช้กับหน้าที่ section แรกมี "พื้นสีอ่อนที่ไม่ใช่ขาวล้วน" (ไล่สีหรือพื้นเทา)
ปัญหาที่แก้: header เป็น #ffffff แบนๆ แต่ section ข้างล่างเริ่มที่ #f6f6f6 / #f2f2f2 / #efefef
สองผืนคนละสีมาชนกัน เลยเห็นเป็นเส้นคาดขวางจอ
วิธีแก้ที่เลือก: ไม่ไล่จับคู่สีให้ตรงกัน (พังทันทีที่ใครแก้สี gradient วันหลัง)
แต่ "ไม่วาดพื้นให้ header เลย" แล้วดึง section ขึ้นมาอยู่ใต้แถบด้วย margin ติดลบ
→ พื้นผืนเดียวกินตั้งแต่ขอบบนสุดของหน้า ไม่มีทางมีรอยต่ออีก ไม่ว่าสีจะเปลี่ยนเป็นอะไร
ชดเชย padding-top ของ section แรกเท่าความสูง header เพื่อให้เนื้อหาอยู่ตำแหน่งเดิมเป๊ะ
ตัวเลขที่บวกเพิ่ม = padding-top เดิมของ section นั้นๆ (ดูค่าเดิมได้ที่ section ของแต่ละหน้า)
หน้าที่ใช้: 02 Brands · 03 Brand detail · 04 Car detail · 10 Contact
หน้าที่ไม่ใช้: 07 Newsroom / 11 Privacy — section แรกพื้นขาวล้วนเท่ากับ header อยู่แล้ว ไม่มีรอยต่อให้แก้
28 ส.ค. 69: 08 Article detail ถอด .page-glass ออก — เปลี่ยนเป็น Hero ภาพเต็มจอ (ธีม DARK) แทน
========================================================================== */
.page-glass header{background:transparent;margin-bottom:calc(var(--header-h) * -1);}
/* ทุกกฎใช้ specificity 3 คลาสขึ้นไป จะได้ชนะกฎ padding เดิมของแต่ละหน้าโดยไม่ต้องพึ่งลำดับในไฟล์
(สำคัญ เพราะกฎเดิมบางตัวอยู่ใน @media ท้ายไฟล์ ซึ่งมาทีหลังบล็อกนี้) */
.page-glass .page-hero{padding-top:calc(var(--header-h) + 64px);}
.page-glass .page-hero.ct-page-hero{padding-top:calc(var(--header-h) + 48px);}
.page-glass .page-hero.ms-page-hero{padding-top:calc(var(--header-h) + 76px);}
/* หน้ารถ (.cd-hero) ชดเชยคนละวิธี — ห้ามใช้ padding-top เพราะลายน้ำชื่อรุ่นเป็น absolute
ซึ่งวัดจากขอบกล่อง ไม่ขยับตาม padding (ลายน้ำจะไปมุดอยู่หลัง header)
จึงบวกที่ตัวแปร --cd-hero-gap แทน ซึ่งคุมทั้งตำแหน่งลายน้ำและระยะบนของ .cd-hero-inner พร้อมกัน
ค่า clamp() ซ้ำกับบรรทัดที่ประกาศตัวแปรเดิม — แก้ที่ไหนต้องแก้อีกที่ด้วย */
.page-glass .cd-hero{--cd-hero-gap:calc(var(--header-h) + clamp(38px,6.2vw,90px));}
/* มือถือเขียนทับ padding ของ .cd-hero-inner ด้วยค่าคงที่ ไม่ได้อ่านจาก --cd-hero-gap จึงต้องบวกให้อีกที */
@media (max-width:600px){
.page-glass .cd-hero-inner{padding-top:calc(var(--header-h) + 30px + var(--cd-hero-drop));}
}
/* 4 คลาส เพื่อให้ชนะ .frame-wrap.mobile-mode .cd-hero-inner ซึ่งอยู่ท้ายไฟล์กว่าและมี 3 คลาสเท่ากัน */
.frame-wrap.page-glass.mobile-mode .cd-hero-inner{padding-top:calc(var(--header-h) + 26px + var(--cd-hero-drop));}
/* โหมด demo Mobile ล็อกตำแหน่งลายน้ำเป็น top:14px ตายตัว ไม่ได้อ่านจาก --cd-hero-gap จึงต้องบวก header ให้เองอีกจุด
(บนมือถือจริงไม่ต้องแก้ — ที่นั่นลายน้ำยังอ่านค่าจาก --cd-hero-gap ซึ่งบวก header ให้แล้ว) */
.page-glass.mobile-mode .cd-watermark{top:calc(var(--header-h) + 14px);}
@media (max-width:900px){
.page-glass .page-hero{padding-top:calc(var(--header-h) + 56px);}
.page-glass .page-hero.ct-page-hero{padding-top:calc(var(--header-h) + 30px);}
.page-glass .page-hero.ms-page-hero{padding-top:calc(var(--header-h) + 44px);}
}
/* โหมด demo Mobile — ต้อง !important ทุกตัว เพราะกฎรวม .mobile-mode section{padding:48px 0 !important}
ยัด padding ทับ section ทุกก้อนรวมถึง .page-hero ด้วย (ไม่ใส่ = H1 ลอยขึ้นไปชนโลโก้) */
.page-glass.mobile-mode .page-hero{padding-top:calc(var(--header-h) + 48px) !important;}
.page-glass.mobile-mode .page-hero.ct-page-hero{padding-top:calc(var(--header-h) + 30px) !important;}
.page-glass.mobile-mode .page-hero.ms-page-hero{padding-top:calc(var(--header-h) + 44px) !important;}
/* หางเฟด — ต่อจากขอบล่างของแถบลงไป --header-tail-h โดยไม่กินที่ในเลย์เอาต์
top:100% = เริ่มตรงขอบล่างแถบพอดี · pointer-events:none = ไม่บังการคลิกเนื้อหาที่อยู่ใต้มัน
ผลลัพธ์: แถวปุ่ม/โลโก้อยู่บนพื้นทึบเต็มทั้งแถว การไล่สีเกิดใต้แถวนั้นลงไปทั้งหมด */
header::after{
content:"";position:absolute;left:0;right:0;top:100%;
height:var(--header-tail-h);
background:var(--header-tail);
pointer-events:none;
display:none; /* ดูเหตุผลบล็อกถัดไป */
}
/* หางเฟดเปิดเฉพาะ 4 หน้าที่ header ลอยทับภาพ Hero เท่านั้น
เพราะ "เฟด" คือการทำให้ดำค่อยๆ โปร่งใสจนเห็นสิ่งที่อยู่ข้างหลัง — ถ้าข้างหลังเป็นภาพรถก็สวย
แต่หน้าอย่าง Contact / Privacy / Newsroom ข้างหลังเป็นพื้นขาวของหน้าเว็บ เฟดแล้วจึงกลายเป็น
ดำ→เทา→ขาว ดูเหมือนแถบเลอะ ไม่ใช่เฟด หน้ากลุ่มนั้นจึงใช้แถบทึบตัดขอบตรงๆ สะอาดกว่า */
.page-home header::after,
.page-svc header::after,
.page-bsp header::after,
.page-dlv header::after,
.page-about header::after,
.page-art header::after{display:block;}
/* โลโก้จัดกึ่งกลางทุกขนาดจอ (ตามภาพตัวอย่างจากลูกค้า) — วางแบบ absolute เพื่อให้อยู่กลางจริง
ไม่ใช่กลางของพื้นที่ที่เหลือหลังหักปุ่มซ้าย-ขวา */
.nav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);}
.nav-inner .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;}
.nav-left{display:flex;align-items:center;gap:18px;}
.logo{font-family:'Bebas Neue';font-size:28px;letter-spacing:3px;}
.logo span{color:var(--red);}
/* ==========================================================================
โลโก้จริง (แทนตัวหนังสือ SPEEDY. เดิม) — 17 ส.ค. 69
--------------------------------------------------------------------------
ไฟล์: speedy-logo-white.png (พื้นเข้ม) · speedy-logo-black.png (พื้นสว่าง) — โปร่งใสทั้งคู่ สัดส่วนราว 2.24:1
เมนู 3 ขีด (พื้นขาว) ใช้ไฟล์ดำ · footer (พื้นเข้ม) ใช้ไฟล์ขาว — 2 จุดนี้ระบุ src ใน HTML ตรงๆ อยู่แล้ว
ส่วน header สลับไฟล์ตามธีมด้วย CSS (ดูบล็อกถัดไป) เพราะ HTML ทุกหน้าเขียน src เป็นไฟล์ขาวเหมือนกันหมด
จะได้ไม่ต้องไล่แก้ src ทีละหน้า เวลาหน้าไหนเปลี่ยนธีมก็แก้แค่คลาสเดียว
กำหนดเฉพาะ "ความสูง" แล้วปล่อย width:auto — ความกว้างจะเปลี่ยนตามสัดส่วนไฟล์เอง
ถ้าวันหลังเปลี่ยนไฟล์โลโก้เป็นสัดส่วนอื่นก็ไม่ต้องแก้ CSS
display:block กัน baseline gap ของ inline image (ช่องว่างบางๆ ใต้ภาพ)
========================================================================== */
.logo img,
.mega-menu-brand img,
.foot-brand img{display:block;width:auto;height:auto;}
/* ผูกกับ --logo-h : Desktop 56px (แถบ 96px เหลือระยะหายใจข้างละ 20px) · มือถือ 42px (แถบ 64px เหลือข้างละ 11px)
ตัวอักษรในโลโก้กินพื้นที่แค่ครึ่งล่างของภาพ (ครึ่งบนเป็นเส้นมาตรวัด) ถ้าเล็กกว่านี้คำว่า Speedy จะอ่านไม่ออก */
.logo img{height:var(--logo-h);}
.nav-inner .logo img{height:var(--logo-h);}
/* ---- โลโก้ใน header: ธีม LIGHT ใช้ไฟล์ดำ (พาธอ้างอิงจาก assets/css/main.css → ../img/) ---- */
header .logo img{content:url("../img/logo/speedy-logo-black.png");}
/* ---- ธีม DARK ใช้ไฟล์ขาวตามเดิม ---- */
.page-home header .logo img,
.page-svc header .logo img,
.page-bsp header .logo img,
.page-dlv header .logo img,
.page-about header .logo img,
.page-art header .logo img{content:url("../img/logo/speedy-logo-white.png");}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 26px;font-size:14px;font-weight:500;border-radius:2px;
cursor:pointer;border:1px solid transparent;transition:.25s;white-space:nowrap;
}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-dark);}
.btn-outline{border-color:rgba(10,10,10,.30);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);background:rgba(10,10,10,.05);}
.btn-sm{padding:9px 18px;font-size:13px;}
/* Hamburger button — ใช้ทุกหน้า ทุกอุปกรณ์ */
.hamburger-btn{
display:flex;flex-direction:column;justify-content:center;gap:6px;
width:var(--burger-w);height:var(--burger-w);cursor:pointer;background:none;border:none;padding:0;
}
/* สีเส้น = สีเข้มโดยดีฟอลต์ (ธีม LIGHT) · ธีม DARK สลับเป็นขาวในบล็อกท้าย section นี้ */
.hamburger-btn span{display:block;width:var(--burger-w);height:2px;background:var(--ink);transition:.25s;}
.hamburger-btn.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger-btn.active span:nth-child(2){opacity:0;}
.hamburger-btn.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-toggle{
display:flex;align-items:center;gap:7px;background:transparent;
border:1px solid rgba(10,10,10,.28);color:var(--ink);padding:10px 16px;border-radius:24px;
font-family:'Prompt';font-size:13px;cursor:pointer;letter-spacing:.5px;
}
.lang-toggle:hover{border-color:var(--ink);}
.lang-toggle svg{width:17px;height:17px;flex-shrink:0;}
/* ==========================================================================
ธีม DARK — 4 หน้าที่ header ลอยทับภาพ Hero กลับไปใช้ชุดสีขาวเหมือนเดิม
รวมไว้ที่เดียวเพื่อให้เห็นครบว่า "เปลี่ยนธีมแล้วมีอะไรเปลี่ยนบ้าง" มี 3 อย่าง: เส้นปุ่ม 3 ขีด / ปุ่มภาษา / โลโก้
(โลโก้อยู่บล็อกด้านบน เพราะต้องอยู่ติดกับกฎ .logo img ตัวอื่น)
========================================================================== */
.page-home .hamburger-btn span,
.page-svc .hamburger-btn span,
.page-bsp .hamburger-btn span,
.page-dlv .hamburger-btn span,
.page-about .hamburger-btn span,
.page-art .hamburger-btn span{background:var(--dark-ink);}
.page-home .lang-toggle,
.page-svc .lang-toggle,
.page-bsp .lang-toggle,
.page-dlv .lang-toggle,
.page-about .lang-toggle,
.page-art .lang-toggle{border-color:rgba(255,255,255,.35);color:var(--dark-ink);}
.page-home .lang-toggle:hover,
.page-svc .lang-toggle:hover,
.page-bsp .lang-toggle:hover,
.page-dlv .lang-toggle:hover,
.page-about .lang-toggle:hover,
.page-art .lang-toggle:hover{border-color:#fff;}
/* ---- มือถือ: คืนค่าแถบ header เป็นขนาดเดิม (จอจริง ≤900px และโหมด demo Mobile) ---- */
@media (max-width:900px){
:root{--header-h:64px;--logo-h:42px;--burger-w:26px;--header-tail-h:44px;}
.hamburger-btn{gap:5px;}
.hamburger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.lang-toggle{gap:6px;padding:8px 12px;border-radius:20px;font-size:12px;}
.lang-toggle svg{width:15px;height:15px;}
}
.frame-wrap.mobile-mode{--header-h:64px;--logo-h:42px;--burger-w:26px;--header-tail-h:44px;}
.mobile-mode .hamburger-btn{gap:5px;}
.mobile-mode .hamburger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-mode .hamburger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-mode .lang-toggle{gap:6px;padding:8px 12px;border-radius:20px;font-size:12px;}
.mobile-mode .lang-toggle svg{width:15px;height:15px;}
/* ===== MEGA MENU (เปิดจากปุ่ม 3 ขีด) ===== */
.mega-menu{
position:fixed;inset:0;z-index:300;background:var(--black);
visibility:hidden;opacity:0;transition:opacity .3s ease;overflow-y:auto;
}
.mega-menu.open{visibility:visible;opacity:1;}
.mega-menu::before{
content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(ellipse at 80% 0%, rgba(226,16,26,.035), transparent 55%);
pointer-events:none;
}
.mega-menu-close{
position:absolute;top:22px;right:24px;width:42px;height:42px;
display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;
border:1px solid var(--line);border-radius:50%;color:var(--ink);z-index:2;background:#fff;
transition:.2s;
}
.mega-menu-close:hover{border-color:var(--red);color:var(--red);}
.mega-menu-brand{
position:absolute;top:26px;left:24px;font-family:'Bebas Neue';font-size:24px;letter-spacing:3px;z-index:2;color:var(--ink);
line-height:0; /* กล่องสูงเท่าภาพพอดี ไม่งั้นตำแหน่ง top:26px จะเพี้ยนตามความสูงบรรทัด */
}
.mega-menu-brand span{color:var(--red);}
.mega-menu-brand img{height:34px;}
.mega-menu-inner{
position:relative;z-index:1;max-width:var(--max);margin:0 auto;
padding:110px 24px 60px;display:flex;flex-direction:column;height:100%;box-sizing:border-box;
}
.mega-menu-list{display:flex;flex-direction:column;transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
.mega-item{
display:flex;justify-content:space-between;align-items:center;
padding:20px 4px;border-bottom:1px solid var(--gray-line);
font-size:22px;font-family:'Bebas Neue';letter-spacing:1px;color:var(--ink);
cursor:pointer;transition:.2s;
}
.mega-item:first-child{border-top:1px solid var(--gray-line);}
.mega-item .arrow{color:var(--red);font-size:20px;font-family:'Prompt';}
.mega-item:hover,.mega-item.active-item{color:var(--red);padding-left:12px;}
.mega-item.current{color:var(--red);}
.mega-item.current .arrow{color:var(--red);}
.mega-menu-preview{display:none;}
.mega-menu-visual{display:none;}
/* ===== Drill-down (มือถือ): กด "Ready Stock" สไลด์เข้าไปดูลิสต์แบรนด์ =====
Pattern: Slide-in from right + slide-out to left + header morph (title/back button)
ขอบเขต: ทำเฉพาะเวอร์ชันมือถือ/เมนูเต็มจอ — เดสก์ท็อป (3 คอลัมน์) ยังคลิกแล้วไปหน้านั้นตามปกติ */
.mega-menu-screens{position:relative;overflow-x:hidden;overflow-y:auto;flex:1;min-height:0;}
.mega-submenu{
position:absolute;top:0;left:0;width:100%;
transform:translateX(100%);pointer-events:none;
transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.mega-menu.drilled .mega-menu-list{transform:translateX(-100%);opacity:0;pointer-events:none;}
.mega-menu.drilled [data-mega-sub="brands"]{transform:translateX(0);pointer-events:auto;}
/* ===== Drill-down level 3 (มือถือ): กดชื่อแบรนด์ในลิสต์ Ready Stock -> สไลด์เข้าไปดูรายการรถของแบรนด์นั้น
แทนที่จะออกจากเมนูไปหน้า "รายการรถ" ทันที — ใช้ pattern เดียวกับ level 2 (slide-in from right + header morph) */
.mega-menu.drilled2 [data-mega-sub="brands"]{transform:translateX(-100%);pointer-events:none;}
.mega-menu.drilled2 [data-mega-sub="cars"]{transform:translateX(0);pointer-events:auto;}
.mega-submenu-header{
display:flex;align-items:center;gap:14px;padding:0 4px 20px;
border-bottom:1px solid var(--gray-line);margin-bottom:4px;
opacity:0;transform:translateX(14px);
transition:opacity .3s ease .12s,transform .3s ease .12s;
}
.mega-menu.drilled .mega-submenu-header{opacity:1;transform:translateX(0);}
.mega-back{
display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--gray);
font-family:'Prompt';font-size:13px;cursor:pointer;padding:6px 2px;
}
.mega-back .back-arrow{color:var(--red);font-size:16px;}
.mega-back:hover{color:var(--ink);}
.mega-submenu-title{font-family:'Bebas Neue';font-size:20px;letter-spacing:1px;color:var(--ink);}
.mega-sub-list{display:flex;flex-direction:column;}
.mega-sub-item{
display:flex;justify-content:space-between;align-items:center;
padding:15px 4px;border-bottom:1px solid var(--gray-line);
font-size:16px;color:var(--ink);cursor:pointer;transition:.2s;
}
.mega-sub-item:hover{color:var(--red);padding-left:10px;}
.mega-sub-count{font-size:12px;color:var(--gray);}
/* ===== รายการรถของแบรนด์ (drill-down level 3 ในเมนู) — อ้างอิงดีไซน์การ์ดสไตล์ Porsche "Models" =====
ปรับสัดส่วนการ์ดใหม่ 19 ส.ค. 69 ตามภาพอ้างอิง Porsche จากคุณเอิร์ธ: การ์ด "เตี้ย" ลงมาก เพื่อให้เห็นรถ
ได้ 3–4 คันต่อ 1 หน้าจอมือถือ (ของเดิมภาพ 16:9 + padding 20px ทำให้การ์ดใบเดียวเกือบเต็มจอ)
สูตร: ภาพอัตราส่วน 3:1 (รถถ่ายด้านข้าง กินความสูงน้อย) + padding 14/16 + ชื่อรุ่น 15px + ป้ายเชื้อเพลิงเล็กลง
=> การ์ดสูงราว 185–195px ที่จอกว้าง 390px */
.mega-car-list{display:flex;flex-direction:column;gap:12px;}
.mega-car-item{
display:flex;flex-direction:column;gap:8px;
background:var(--black-soft);border:1px solid var(--gray-line);border-radius:12px;
padding:14px 16px;cursor:pointer;transition:.2s;
}
.mega-car-item:hover{border-color:var(--red);}
.mega-car-name{font-size:15px;font-weight:500;color:var(--ink);line-height:1.35;}
.mega-car-img{aspect-ratio:3/1;border-radius:6px;}
.mega-car-img .ph-icon{font-size:22px;}
.mega-car-fuel{
align-self:flex-start;font-size:10px;letter-spacing:.4px;color:#fff;
background:var(--ink);padding:4px 12px;border-radius:20px;font-weight:600;
}
.mega-car-note{font-size:11px;color:var(--gray);margin-top:16px;line-height:1.6;}
/* ==========================================================================
MEGA MENU — เวอร์ชันเดสก์ท็อป (รีดีไซน์ 19 ส.ค. 69 ตามภาพอ้างอิง Porsche จากคุณเอิร์ธ)
โครงเดิม: เมนูกินเต็มจอ 3 คอลัมน์ (ลิสต์ / พรีวิวการ์ด 6 ใบ / บล็อกภาพ) — ยกเลิกทั้งหมด
โครงใหม่: "แผงเมนูครึ่งจอซ้าย + พื้นหลังเว็บเบลอทางขวา"
- แผงขาวชิดซ้าย กว้าง min(58vw, 880px) สูงเต็มจอ ข้างในแบ่ง 2 คอลัมน์
คอลัมน์ 1 = เมนูหลัก (Ready Stock / Services / ...)
คอลัมน์ 2 = พื้นเทาอ่อน โชว์ "ลิสต์แบรนด์" ตอน hover Ready Stock -> คลิกแบรนด์แล้วสไลด์เป็น "ลิสต์รถ"
- พื้นที่ที่เหลือทางขวา = หน้าเว็บจริงที่ถูกเบลอ (backdrop-filter) + ฉากทึบบางๆ ทับ
- ปุ่มปิดย้ายไปอยู่ "นอกแผง" มุมบนซ้ายของพื้นที่เบลอ (ตามภาพอ้างอิง)
ใช้ drill-down ชุดเดียวกับมือถือ (.drilled / .drilled2) แต่เปลี่ยนท่าเคลื่อนไหวเป็น fade+slide สั้นๆ
========================================================================== */
@media (min-width:901px){
.mega-menu{background:rgba(18,18,18,.35);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);overflow:hidden;}
.mega-menu::before{display:none;}
.mega-menu-inner{
width:min(58vw,880px);max-width:none;margin:0;height:100%;
padding:0;flex-direction:row;align-items:stretch;gap:0;
background:var(--bg);box-shadow:0 0 70px rgba(0,0,0,.25);
}
/* ปุ่มปิด: วงกลมเทาบนพื้นเบลอ ถัดจากขอบขวาของแผงเมนู */
.mega-menu-close{
left:calc(min(58vw,880px) + 26px);right:auto;top:26px;
background:rgba(0,0,0,.45);border:none;color:#fff;backdrop-filter:blur(4px);
}
.mega-menu-close:hover{background:var(--red);color:#fff;}
.mega-menu-screens{flex:1;display:flex;position:relative;overflow:hidden;}
/* ---------- คอลัมน์ 1: เมนูหลัก ---------- */
.mega-menu-list{
flex:0 0 46%;padding:104px 20px 36px;overflow-y:auto;border-right:none;
transform:none !important;opacity:1 !important;pointer-events:auto !important;
}
.mega-item{
font-size:18px;padding:13px 14px;border-bottom:none;border-radius:8px;
}
.mega-item:first-child{border-top:none;}
.mega-item .arrow{color:#9b9b9b;font-size:18px;}
.mega-item:hover,.mega-item.active-item{background:var(--surface-2);color:var(--ink);padding-left:14px;}
.mega-item:hover .arrow,.mega-item.active-item .arrow{color:var(--red);}
.mega-item.current{color:var(--red);}
/* ---------- คอลัมน์ 2: พื้นเทา โชว์ลิสต์แบรนด์ / ลิสต์รถ ---------- */
.mega-submenu{
display:block;position:absolute;top:0;right:0;left:auto;
width:54%;height:100%;background:var(--surface);
padding:104px 24px 36px;overflow-y:auto;overscroll-behavior-y:contain;
box-sizing:border-box;
transform:translateX(18px);opacity:0;pointer-events:none;
transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .24s ease;
}
.mega-menu.drilled [data-mega-sub="brands"]{transform:translateX(0);opacity:1;pointer-events:auto;}
.mega-menu.drilled2 [data-mega-sub="brands"]{transform:translateX(-18px);opacity:0;pointer-events:none;}
.mega-menu.drilled2 [data-mega-sub="cars"]{transform:translateX(0);opacity:1;pointer-events:auto;}
/* ในลิสต์แบรนด์ไม่ต้องมีปุ่มย้อนกลับ เพราะเมนูหลักโชว์อยู่คอลัมน์ซ้ายแล้ว (ปุ่มย้อนกลับเหลือเฉพาะลิสต์รถ) */
[data-mega-sub="brands"] .mega-back{display:none;}
.mega-submenu-header{opacity:1 !important;transform:none !important;border-bottom-color:var(--line);}
.mega-sub-item{border-bottom-color:var(--line);}
/* การ์ดรถ: ใช้ "ขนาดเดียวกับเวอร์ชันมือถือ" ทุกค่า (padding / ชื่อรุ่น / อัตราส่วนภาพ 3:1)
ตามที่คุณเอิร์ธสั่งเมื่อ 19 ส.ค. 69 — ต่างกันแค่พื้นการ์ดเป็นสีขาวเพื่อให้ตัดกับพื้นเทาของคอลัมน์ 2
(ถ้าใช้พื้น --surface เหมือนมือถือ จะกลืนไปกับพื้นคอลัมน์จนมองไม่เห็นขอบการ์ด) */
.mega-car-item{background:var(--bg);border-color:var(--line);}
.mega-car-item:hover{border-color:var(--red);}
/* scrollbar บางๆ ของ 2 คอลัมน์ในแผง (เดสก์ท็อปเท่านั้น — มือถือใช้ indicator ลอยของตัวเอง) */
.mega-menu-list::-webkit-scrollbar,
.mega-submenu::-webkit-scrollbar{width:6px;}
.mega-menu-list::-webkit-scrollbar-thumb,
.mega-submenu::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:3px;}
.mega-menu-list::-webkit-scrollbar-track,
.mega-submenu::-webkit-scrollbar-track{background:transparent;}
}
/* mobile-mode override (demo switcher forces mobile menu layout) */
.mobile-mode .mega-menu-inner{
flex-direction:column !important;padding:100px 18px 40px !important;
width:auto !important;max-width:var(--max) !important;background:transparent !important;box-shadow:none !important;
}
.mobile-mode .mega-menu{background:var(--black) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.mobile-mode .mega-menu-close{left:auto !important;right:24px !important;background:#fff !important;color:var(--ink) !important;border:1px solid var(--line) !important;}
.mobile-mode .mega-menu-list{flex:none !important;border-right:none !important;padding:0 !important;overflow-x:hidden !important;}
.mobile-mode .mega-menu-screens{display:block !important;}
.mobile-mode .mega-item{font-size:22px !important;padding:20px 4px !important;border-bottom:1px solid var(--gray-line) !important;border-radius:0 !important;background:transparent !important;}
.mobile-mode .mega-item:first-child{border-top:1px solid var(--gray-line) !important;}
.mobile-mode .mega-submenu{
position:absolute !important;left:0 !important;right:auto !important;width:100% !important;
background:transparent !important;padding:0 !important;opacity:1 !important;
/* คืนท่าเริ่มต้นแบบมือถือ: ซ่อนไว้นอกจอทางขวา (เดสก์ท็อปใช้ translateX(18px)+opacity:0 ซึ่งจะโผล่ทับลิสต์หลัก
ถ้าไม่รีเซ็ตตรงนี้ เพราะโหมด demo Mobile ยังเข้าเงื่อนไข @media(min-width:901px) อยู่)
กฎ .mobile-mode .mega-menu.drilled/.drilled2 ด้านล่างมี specificity สูงกว่า จะ override ตอน drill เข้า */
transform:translateX(100%) !important;pointer-events:none !important;
}
.mobile-mode [data-mega-sub="brands"] .mega-back{display:flex !important;}
.mobile-mode .mega-car-item{background:var(--black-soft) !important;border-color:var(--gray-line) !important;}
.mobile-mode .mega-menu-preview,.mobile-mode .mega-menu-visual{display:none !important;}
.mobile-mode .mega-menu-screens{overflow-x:hidden !important;}
.mobile-mode .mega-submenu{display:block !important;}
.mobile-mode .mega-menu.drilled .mega-menu-list{transform:translateX(-100%) !important;opacity:0 !important;pointer-events:none !important;}
.mobile-mode .mega-menu.drilled [data-mega-sub="brands"]{transform:translateX(0) !important;pointer-events:auto !important;}
.mobile-mode .mega-menu.drilled2 [data-mega-sub="brands"]{transform:translateX(-100%) !important;pointer-events:none !important;}
.mobile-mode .mega-menu.drilled2 [data-mega-sub="cars"]{transform:translateX(0) !important;pointer-events:auto !important;}
/* ===== มือถือ: จำกัดขอบเขตการเลื่อนของเมนูให้ตรงกับเนื้อหาจริงของ "หน้าจอ" ที่กำลังโชว์อยู่ =====
ปัญหาเดิม: .mega-menu-screens เป็นตัวเลื่อน (overflow-y:auto) ตัวเดียวที่ครอบทั้ง 3 หน้าจอ (list หลัก/list แบรนด์/
list รถ) พร้อมกัน — list หลักอยู่ใน normal flow ส่วนอีก 2 หน้าเป็น position:absolute (แค่เลื่อนออกนอกจอทางแนวนอน
ด้วย translateX เท่านั้น ไม่ได้ถูกตัดออกจากการคำนวณ scrollable overflow แนวตั้ง) ผลคือ scrollHeight ของ
.mega-menu-screens จะเท่ากับหน้าจอที่สูงที่สุดใน 3 หน้าเสมอ (เช่น list รถ 5 คัน) ต่อให้ตอนนั้นกำลังโชว์ list หลัก
แค่ 6 รายการที่สั้นกว่าพื้นที่จอมาก ก็ยังเลื่อนลงไปเจอพื้นที่ว่างเปล่าเกินเนื้อหาจริงได้
แก้โดยให้แต่ละหน้าจอ (.mega-menu-list และ .mega-submenu แต่ละอัน) เป็นตัวเลื่อนอิสระของตัวเอง สูงเท่าพื้นที่
ที่มองเห็นพอดี (height:100% ของ .mega-menu-screens) ส่วน .mega-menu-screens เองเปลี่ยนเป็นแค่กรอบตัด (overflow-y:hidden)
ไม่ใช่ตัวเลื่อนอีกต่อไป — ผลคือแต่ละหน้าจอเลื่อนได้ "พอดี" เนื้อหาของตัวเอง: ถ้าเนื้อหาสั้นกว่าพื้นที่โชว์ก็จะไม่มีให้เลื่อนเลย
(scrollHeight <= clientHeight) และถ้าเนื้อหายาวกว่าก็เลื่อนได้จนสุดพอดีที่ขอบล่างของรายการ/การ์ดสุดท้าย ไม่เกินไปกว่านั้น
overscroll-behavior-y:contain กันไม่ให้เลื่อนสุดหน้าจอนี้แล้ว "ทะลุ" ไปเลื่อนเมนูรวม (.mega-menu) หรือหน้าเว็บข้างหลังต่อ
ขอบเขต: เฉพาะมือถือ (จอจริง max-width:900px และปุ่ม demo toggle #btn-mobile ผ่าน .mobile-mode) เดสก์ท็อปไม่แตะ
เพราะเดสก์ท็อปปิด .mega-submenu ด้วย display:none และ .mega-menu-list ยังอยู่ใน layout แถวเดิมตามปกติ */
@media (max-width:900px){
.mega-menu-screens{overflow-y:hidden;}
.mega-menu-list,
.mega-submenu{
height:100%;overflow-y:auto;
overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
/* ซ่อน scrollbar เบราว์เซอร์เดิมของทั้ง 3 หน้าจอย่อยในเมนู — ตามสเปกลูกค้าจริงๆ คือ "scrollbar ทั้งเว็บ" ไม่ใช่
แค่หน้าเว็บหลัก งานรอบก่อนพลาดจุดนี้ไป ดู .mega-menu-scrollbar ด้านล่าง (ใน MEGA MENU section) สำหรับ
indicator ทดแทนแบบเดียวกับ .custom-scrollbar ของหน้าเว็บหลัก */
scrollbar-width:none;-ms-overflow-style:none;
}
.mega-menu-list::-webkit-scrollbar,
.mega-submenu::-webkit-scrollbar{display:none;width:0;height:0;}
}
.mobile-mode .mega-menu-screens{overflow-y:hidden !important;}
.mobile-mode .mega-menu-list,
.mobile-mode .mega-submenu{
height:100% !important;overflow-y:auto !important;
overscroll-behavior-y:contain !important;-webkit-overflow-scrolling:touch !important;
scrollbar-width:none !important;-ms-overflow-style:none !important;
}
.mobile-mode .mega-menu-list::-webkit-scrollbar,
.mobile-mode .mega-submenu::-webkit-scrollbar{display:none;width:0;height:0;}
/* ===== GENERIC PAGE HERO (inner pages) ===== */
.page-hero{
position:relative;padding:64px 0 48px;
background:
radial-gradient(ellipse at 20% 0%, rgba(226,16,26,.035), transparent 60%),
linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%);
border-bottom:1px solid var(--line);
}
.breadcrumb{font-size:12px;color:var(--gray);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;}
.breadcrumb a{color:var(--gray);}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb .sep{color:#c9c9c9;}
.breadcrumb .current{color:var(--ink);}
.page-hero h1{font-family:'Bebas Neue';font-size:clamp(36px,6vw,64px);letter-spacing:1px;line-height:1;margin-bottom:14px;}
.page-hero p{color:var(--ink-soft);max-width:560px;font-size:15px;font-weight:300;line-height:1.7;}
/* ===== SECTION GENERIC ===== */
section{padding:90px 0;}
/* section ที่ไม่มี .section-head (เช่น กริดแบรนด์หน้า Models) — ลดช่องว่างด้านบนไม่ให้โล่งเกิน */
section.section-tight{padding-top:36px;}
/* ===== SCROLL CUE — ลูกศรบอกใบ้ว่ายังเลื่อนลงได้อีก (เฉพาะมือถือ) =====
เดสก์ท็อปไม่ต้อง เพราะเห็นการ์ดหลายแถวพร้อมกันอยู่แล้ว รู้เองว่ามีต่อ
JS (initScrollCue) เป็นคนติด/ถอดคลาส .show ให้ — ไม่มี .show = ไม่กินพื้นที่และคลิกทะลุได้ */
.scroll-cue{
position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);
z-index:60;display:none;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.82);border:1px solid var(--line);
box-shadow:0 6px 22px rgba(0,0,0,.13);
-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
}
.scroll-cue.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.scroll-cue .cue-arrow{
width:28px;height:28px;display:block;color:var(--red);
animation:cueBounce 1.5s ease-in-out infinite;
}
@keyframes cueBounce{
0%,100%{transform:translateY(0);opacity:.75;}
50% {transform:translateY(5px);opacity:1;}
}
/* คนที่ตั้งค่าเครื่องว่าลดการเคลื่อนไหว — คงลูกศรไว้แต่ไม่เด้ง */
@media (prefers-reduced-motion:reduce){
.scroll-cue .cue-arrow{animation:none;}
}
/* โผล่เฉพาะจอแคบจริง ... */
@media (max-width:900px){ .scroll-cue{display:flex;} }
/* ... และโหมด demo "Mobile" ซึ่งรันบนจอกว้าง media query ด้านบนจึงไม่ครอบคลุม
วาง .scroll-cue ไว้เป็นลูกของ .frame-wrap ซึ่งมี transform อยู่แล้ว -> position:fixed
ยึดกับกรอบมือถือจำลอง ไม่ใช่จอเบราว์เซอร์จริง (กลไกเดียวกับที่เมนู 3 ขีดใช้) */
.frame-wrap.mobile-mode .scroll-cue{display:flex;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:16px;}
.section-head h2{font-size:clamp(26px,3.5vw,40px);}
.section-head p{color:var(--gray);font-size:14px;max-width:420px;}
/* ===== RESPONSIVE GRID UTILITIES (ใช้ร่วมกันทุกหน้า) ===== */
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:900px){
.grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
.grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr;}
}
.mobile-mode .grid-2,.mobile-mode .grid-3,.mobile-mode .grid-4,.mobile-mode .grid-6{
grid-template-columns:repeat(2,1fr) !important;
}
/* ===== PLACEHOLDER IMAGE (gradient, รองรับ 9:16 / 1:1) ===== */
.ph-img{
position:relative;border-radius:4px;overflow:hidden;
background:linear-gradient(135deg,#ececec,#f7f7f7);
display:flex;align-items:center;justify-content:center;
}
.ph-img.tone-a{background:linear-gradient(135deg,#e8e8e8,#f7f7f7);}
.ph-img.tone-b{background:linear-gradient(135deg,#f0f0f0,#fafafa);}
.ph-img.tone-c{background:linear-gradient(160deg,#eaeaea,#f5f5f5);}
.ph-img.ratio-11{aspect-ratio:1/1;}
.ph-img.ratio-916{aspect-ratio:9/16;}
.ph-img.ratio-169{aspect-ratio:16/9;}
.ph-img.ratio-43{aspect-ratio:4/3;}
.ph-img .ratio-tag{
position:absolute;bottom:8px;right:10px;font-size:10px;color:rgba(0,0,0,.28);
letter-spacing:1px;font-family:monospace;
}
.ph-img .ph-icon{color:rgba(0,0,0,.16);font-size:28px;}
/* ===== BRAND GRID (หน้า Models รวมแบรนด์) ===== */
.brand-card{
background:var(--black-soft);border:1px solid var(--gray-line);border-radius:6px;
padding:30px 20px;text-align:center;transition:.25s;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.brand-card:hover{border-color:var(--red);transform:translateY(-4px);}
/* พื้นหลังโปร่งใส — ใส่โลโก้ .png พื้นหลังใสที่ assets/img/logo/brands/{brand}-logo.png
แบรนด์ไหนยังไม่มีไฟล์ -> onerror ใน HTML ติดคลาส .no-logo ให้ แล้วขึ้นตัวอักษรย่อจาก data-fallback แทน
(กันรูปแตกในหน้าจริง โดยไม่ต้องมี JS แยกไฟล์) */
.brand-mark{
width:100%;height:64px;border-radius:0;background:transparent;
border:0;
display:flex;align-items:center;justify-content:center;
font-family:'Bebas Neue';font-size:22px;letter-spacing:1px;color:var(--red);
}
.brand-mark img{max-width:120px;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.brand-mark.no-logo::after{content:attr(data-fallback);}
.brand-card h3{font-size:16px;font-weight:500;}
.brand-card .count{font-size:12px;color:var(--gray);}
/* ===== CAR CARD (หน้ารวมรถของแบรนด์ + หน้าแรก lineup) ===== */
.car-card{
background:var(--black-soft);border:1px solid var(--gray-line);border-radius:6px;
overflow:hidden;transition:.25s;display:flex;flex-direction:column;
}
.car-card:hover{border-color:var(--red);transform:translateY(-4px);}
.car-card .ph-img{border-radius:0;aspect-ratio:4/3;}
.car-card .car-body{padding:22px;display:flex;flex-direction:column;flex:1;}
.car-card .tag-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.tag{
font-size:11px;letter-spacing:.5px;padding:4px 10px;border-radius:12px;
border:1px solid var(--line);color:var(--ink-soft);background:#fff;
}
.tag-red{border-color:var(--red);color:var(--red-ink);}
.car-card .brand-label{font-size:11px;color:var(--gray);margin-bottom:2px;text-transform:uppercase;letter-spacing:1px;}
.car-card h3{font-size:19px;margin-bottom:6px;font-weight:500;}
.car-card .price{font-size:14px;color:var(--ink);font-weight:700;margin:10px 0 18px;}
.car-card .car-actions{display:flex;gap:10px;margin-top:auto;}
/* ===== CAR DETAIL PAGE ===== */
.detail-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;align-items:start;}
@media (max-width:900px){.detail-layout{grid-template-columns:1fr;}}
.mobile-mode .detail-layout{grid-template-columns:1fr !important;}
.gallery-main{margin-bottom:14px;}
.gallery-main .ph-img{aspect-ratio:1/1;border-radius:6px;}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gallery-thumbs .ph-img{border-radius:4px;cursor:pointer;border:1px solid transparent;}
.gallery-thumbs .ph-img:nth-child(odd){aspect-ratio:9/16;}
.gallery-thumbs .ph-img:nth-child(even){aspect-ratio:1/1;}
.gallery-thumbs .ph-img.active-thumb{border-color:var(--red);}
.detail-panel{
background:var(--black-soft);border:1px solid var(--gray-line);border-radius:8px;
padding:32px;position:sticky;top:90px;
}
.detail-panel .brand-label{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:2px;margin-bottom:6px;}
.detail-panel h1{font-family:'Bebas Neue';font-size:clamp(30px,4vw,42px);letter-spacing:1px;margin-bottom:10px;line-height:1;}
.detail-panel .price{font-size:24px;color:var(--ink);font-weight:700;margin:14px 0 20px;}
.detail-panel .price small{display:block;font-size:11px;color:var(--gray);font-weight:400;margin-top:4px;}
.detail-panel .detail-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.line-cta{
display:flex;align-items:center;justify-content:center;gap:8px;
background:#06C755;color:#fff;padding:13px;border-radius:4px;font-size:14px;font-weight:500;
}
.spec-table{width:100%;border-collapse:collapse;margin-top:10px;}
.spec-table tr{border-bottom:1px solid var(--gray-line);}
.spec-table td{padding:14px 4px;font-size:14px;}
.spec-table td:first-child{color:var(--gray);width:45%;}
.spec-table td:last-child{color:var(--ink);}
.spec-note{font-size:12px;color:var(--gray);margin-top:16px;line-height:1.6;}
/* ===== SERVICES DETAIL ===== */
.service-detail-card{
background:var(--black-soft);border:1px solid var(--gray-line);border-radius:8px;padding:38px 30px;
}
.service-icon{width:48px;height:48px;border-radius:50%;background:rgba(226,16,26,.15);
display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--red);font-size:22px;}
.service-detail-card h3{font-size:20px;margin-bottom:12px;}
.service-detail-card p{font-size:14px;color:var(--gray);line-height:1.8;margin-bottom:18px;}
.check-list li{display:flex;gap:10px;font-size:13px;color:var(--ink-soft);margin-bottom:10px;line-height:1.5;}
.check-list li::before{content:"✓";color:var(--red);font-weight:700;flex-shrink:0;}
/* ===== REVIEWS ===== */
.review-card{background:var(--black-soft);border:1px solid var(--gray-line);padding:28px;border-radius:6px;}
.stars{color:var(--red);font-size:14px;margin-bottom:14px;letter-spacing:2px;}
.review-card p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:20px;}
.review-who{display:flex;align-items:center;gap:12px;}
.avatar{
width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#f1f1f1,#e4e4e4);
display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:15px;color:var(--red-ink);
flex-shrink:0;border:1px solid var(--gray-line);
}
.review-name{font-size:13px;color:var(--ink);}
.review-meta{font-size:12px;color:var(--gray);}
/* ===== ARTICLES ===== */
.article-card{
background:var(--black-soft);border:1px solid var(--gray-line);border-radius:6px;overflow:hidden;
transition:.25s;display:flex;flex-direction:column;
}
.article-card:hover{border-color:var(--red);transform:translateY(-4px);}
.article-card .ph-img{aspect-ratio:16/9;border-radius:0;}
.article-card .article-body{padding:22px;display:flex;flex-direction:column;flex:1;}
.article-meta{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--gray);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;}
.article-meta .cat{color:var(--red-ink);}
.article-card h3{font-size:17px;margin-bottom:10px;font-weight:500;line-height:1.4;}
.article-card p{font-size:13px;color:var(--gray);line-height:1.7;margin-bottom:16px;}
.article-link{font-size:13px;border-bottom:1px solid var(--red);padding-bottom:2px;display:inline-block;margin-top:auto;color:var(--red-ink);}
/* ==========================================================================
ARTICLES — การ์ดภาพเต็มใบ + accordion บนมือถือ (รีดีไซน์ 26 ส.ค. 69)
อ้างอิงดีไซน์: Porsche "Your cooperation opportunities"
- เดสก์ท็อป : การ์ดภาพ 3 คอลัมน์ ไล่เฉดดำทับด้านล่าง หัวข้อ + ปุ่มโครงร่างสีขาว
- มือถือ : แถวลิสต์พื้นเทาอ่อน ภาพย่อซ้าย + หัวข้อ + ปุ่ม "+" กดขยายอ่านเกริ่นนำ
ใช้คลาสชุดใหม่ .art-* แยกจาก .article-card เดิม
28 ส.ค. 69: หน้า 08 "บทความที่เกี่ยวข้อง" ย้ายมาใช้ชุดนี้แล้ว — .article-card เดิมจึงไม่มีหน้าไหนเรียกใช้อีก
(ยังไม่ลบทิ้ง เผื่ออยากได้การ์ดแบบพื้นขาวกลับมา)
========================================================================== */
.art-head{text-align:center;max-width:720px;margin:0 auto 44px;}
.art-head h2{font-size:clamp(26px,3.6vw,42px);font-weight:700;letter-spacing:-.5px;}
.art-head p{color:var(--gray);font-size:14px;margin-top:12px;line-height:1.7;}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.art-card{
position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
background:var(--dark-surface);isolation:isolate;
}
.art-cover{position:absolute;inset:0;z-index:4;} /* ลิงก์คลุมทั้งการ์ด (เดสก์ท็อปเท่านั้น) */
.art-media{position:absolute;inset:0;border-radius:0;transition:transform .5s ease;}
.art-media img{width:100%;height:100%;object-fit:cover;}
.art-card::after{ /* ไล่เฉดดำให้ตัวหนังสือขาวอ่านออก */
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.82) 100%);
}
.art-content{
position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;
display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.art-meta{
order:-1;display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.6px;
text-transform:uppercase;color:rgba(255,255,255,.72);
}
.art-meta .cat{color:#fff;}
.art-title{font-size:20px;font-weight:600;line-height:1.35;color:#fff;}
.art-btn{
display:inline-block;padding:11px 22px;border:1px solid rgba(255,255,255,.85);
color:#fff;font-size:13px;line-height:1;transition:.25s;
}
.art-card:hover .art-media{transform:scale(1.05);}
.art-card:hover .art-btn{background:#fff;color:var(--ink);border-color:#fff;}
@media (max-width:1100px){ .art-grid{grid-template-columns:repeat(2,1fr);} }
/* ---------- มือถือ: ลิสต์แถวเรียบ ภาพย่อ + ชื่อบทความ (กดทั้งแถว = เข้าอ่าน) ----------
26 ส.ค. 69 รอบแก้ที่ 2: ตัดปุ่ม "+" / accordion ออกตามที่คุณเอิร์ธสั่ง
ชื่อบทความตัดบรรทัดในกรอบ สูงสุด 2 บรรทัด (line-clamp) ไม่ล้นการ์ดอีกต่อไป */
@media (max-width:768px){
.art-head{margin-bottom:24px;}
.art-grid{grid-template-columns:1fr;gap:10px;}
.art-card{
aspect-ratio:auto;display:flex;align-items:center;gap:14px;
background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 14px 10px 10px;
}
.art-card::after{display:none;}
.art-media{position:relative;inset:auto;width:82px;height:58px;flex:0 0 82px;border-radius:6px;overflow:hidden;}
.art-media .ph-icon{font-size:18px;}
.art-content{position:static;padding:0;flex:1;min-width:0;gap:4px;}
.art-title{
font-size:14px;font-weight:500;color:var(--ink);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;overflow-wrap:anywhere;
}
.art-meta{order:2;display:none;}
.art-btn{display:none;}
.art-card:hover .art-media{transform:none;}
}
/* โหมด demo "Mobile" ของ switcher — บังคับเลย์เอาต์เดียวกับจอมือถือจริง */
.mobile-mode .art-head{margin-bottom:24px !important;}
.mobile-mode .art-grid{grid-template-columns:1fr !important;gap:10px !important;}
.mobile-mode .art-card{
aspect-ratio:auto !important;display:flex !important;align-items:center !important;gap:14px !important;
background:var(--surface) !important;border:1px solid var(--line) !important;
border-radius:8px !important;padding:10px 14px 10px 10px !important;
}
.mobile-mode .art-card::after{display:none !important;}
.mobile-mode .art-media{position:relative !important;inset:auto !important;width:82px !important;height:58px !important;flex:0 0 82px !important;border-radius:6px !important;}
.mobile-mode .art-media .ph-icon{font-size:18px !important;}
.mobile-mode .art-content{position:static !important;padding:0 !important;flex:1 !important;min-width:0 !important;gap:4px !important;}
.mobile-mode .art-title{
font-size:14px !important;font-weight:500 !important;color:var(--ink) !important;line-height:1.45 !important;
display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden !important;overflow-wrap:anywhere;white-space:normal !important;
}
.mobile-mode .art-meta{order:2 !important;display:none !important;}
.mobile-mode .art-btn{display:none !important;}
.mobile-mode .art-card:hover .art-media{transform:none !important;}
.article-detail-body{max-width:760px;margin:0 auto;}
.article-detail-body h2{font-size:22px;margin:34px 0 14px;}
.article-detail-body p{font-size:15px;color:var(--ink-soft);line-height:1.9;margin-bottom:18px;}
.article-detail-body ul{margin:0 0 18px 20px;}
.article-detail-body li{list-style:disc;font-size:15px;color:var(--ink-soft);line-height:1.9;margin-bottom:8px;}
/* ===== ABOUT ===== */
.value-card{background:var(--black-soft);border:1px solid var(--gray-line);border-radius:6px;padding:28px;}
.value-card h3{font-size:17px;margin-bottom:10px;}
.value-card p{font-size:13px;color:var(--gray);line-height:1.7;}
.team-card{text-align:center;}
.team-card .avatar{width:100px;height:100px;font-size:26px;margin:0 auto 16px;}
.team-card h4{font-size:15px;margin-bottom:4px;}
.team-card .role{font-size:12px;color:var(--gray);}
/* ===== CONTACT ===== */
.showroom{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--black-soft);border:1px solid var(--gray-line);border-radius:8px;overflow:hidden;}
.showroom-info{padding:48px;}
.showroom-info h2{font-size:28px;margin-bottom:18px;}
.info-row{display:flex;gap:14px;margin-bottom:18px;font-size:14px;color:var(--ink-soft);}
.info-row .dot{width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:7px;flex-shrink:0;}
.map-placeholder{
min-height:320px;background:
repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 10px, #e9e9e9 10px, #e9e9e9 20px);
display:flex;align-items:center;justify-content:center;position:relative;
}
.pin{width:46px;height:46px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);
display:flex;align-items:center;justify-content:center;}
.pin::after{content:"";width:16px;height:16px;background:#fff;border-radius:50%;transform:rotate(45deg);}
@media (max-width:900px){.showroom{grid-template-columns:1fr;}}
.mobile-mode .showroom{grid-template-columns:1fr !important;}
.contact-form-wrap{background:var(--black-soft);border:1px solid var(--gray-line);border-radius:8px;padding:36px;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.field label{font-size:12px;color:var(--gray);}
.field select,.field input,.field textarea{
background:#fff;border:1px solid var(--line);color:var(--ink);
padding:12px 14px;border-radius:4px;font-family:'Prompt';font-size:14px;width:100%;
}
.field select:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field textarea{resize:vertical;min-height:100px;}
.hours-list li{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);padding:10px 0;border-bottom:1px solid var(--line);}
.hours-list li span:last-child{color:var(--ink);}
/* ===== LEGAL / PRIVACY ===== */
/* หน้า Privacy ใช้ธีม LIGHT เหมือนหน้าเนื้อหาอื่น — ไม่ต้องกำหนดสีพื้นซ้ำ ปล่อยให้รับจาก header{} */
.legal-header{border-bottom:none;}
.legal-header .nav-inner{justify-content:space-between;}
.legal-content{max-width:800px;margin:0 auto;padding:70px 24px 100px;}
.legal-content h1{font-family:'Bebas Neue';font-size:clamp(32px,5vw,48px);letter-spacing:1px;margin-bottom:8px;}
.legal-content .updated{color:var(--gray);font-size:13px;margin-bottom:40px;}
.legal-content h2{font-size:19px;margin:36px 0 12px;color:var(--ink);}
.legal-content p{font-size:14px;color:var(--ink-soft);line-height:1.9;margin-bottom:14px;}
.legal-content li{font-size:14px;color:var(--ink-soft);line-height:1.9;margin:0 0 10px 20px;list-style:disc;}
/* ตารางในหน้านโยบาย (ใช้ในนโยบายคุกกี้) — เลื่อนแนวนอนได้บนมือถือ ไม่ดันหน้าเว็บล้น */
.legal-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 22px;border:1px solid var(--line);border-radius:8px;}
.legal-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.legal-table th,.legal-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7;}
.legal-table th{background:var(--surface);color:var(--ink);font-weight:600;font-size:12px;white-space:nowrap;}
.legal-table td{color:var(--ink-soft);}
.legal-table tr:last-child td{border-bottom:none;}
.legal-table strong{color:var(--ink);font-weight:500;}
/* ===== FOOTER ===== */
/* ==========================================================================
FOOTER — โครงตามภาพตัวอย่างจากลูกค้า (14 ส.ค. 69)
--------------------------------------------------------------------------
ลำดับจากบนลงล่าง: ปุ่มกลับขึ้นบน -> ภูมิภาค/ภาษา -> คอลัมน์ลิงก์ -> ไอคอนโซเชียล
-> ลิขสิทธิ์+ลิงก์ข้อกฎหมาย -> โลโก้ปิดท้าย
เดสก์ท็อป: คอลัมน์ลิงก์เรียง 3 ช่อง / มือถือ: เรียงลงมาชิดซ้ายทั้งหมด (ดูบล็อกมือถือท้ายไฟล์)
ใช้เหมือนกันทั้ง 11 หน้า */
footer{background:var(--dark-bg);color:var(--dark-ink);border-top:1px solid var(--dark-line);padding:56px 0 40px;}
/* ปุ่มกลับขึ้นบน — จัดกึ่งกลางเสมอ ตามภาพตัวอย่าง */
.foot-top{
display:flex;flex-direction:column;align-items:center;gap:10px;
margin:0 auto 56px;background:none;border:none;color:var(--dark-ink);
font-family:'Prompt';font-size:14px;transition:.2s;
}
.foot-top-arrow{font-size:20px;line-height:1;}
.foot-top:hover{color:var(--red);}
/* ป้ายหัวกลุ่มสีเทาจาง — ใช้ซ้ำทั้งบล็อกภูมิภาคและหัวคอลัมน์ */
.foot-label{display:block;font-size:13px;color:#7d7d85;margin-bottom:14px;}
.foot-region{margin-bottom:52px;}
.foot-region-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.foot-flag{
width:30px;height:30px;border-radius:50%;flex-shrink:0;
border:1px solid var(--dark-line);
background:linear-gradient(180deg,#e8213c 0 22%,#fff 22% 38%,#25368c 38% 62%,#fff 62% 78%,#e8213c 78% 100%);
}
.foot-region-name{font-size:15px;color:var(--dark-ink);}
.foot-change{
background:none;border:none;color:var(--dark-ink);font-family:'Prompt';font-size:15px;
text-decoration:underline;text-underline-offset:4px;
}
.foot-change:hover{color:var(--red);}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:56px;}
.foot-col ul li{margin-bottom:14px;font-size:15px;color:var(--dark-ink);line-height:1.5;}
.foot-col ul li a:hover{color:var(--red);}
.foot-col .foot-plain{color:#9a9aa2;font-size:14px;} /* บรรทัดที่เป็นข้อมูล ไม่ใช่ลิงก์ */
.foot-social{display:flex;gap:26px;align-items:center;margin-bottom:52px;flex-wrap:wrap;}
.foot-ico{
width:26px;height:26px;display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:600;color:var(--dark-ink);text-transform:lowercase;transition:.2s;
}
.foot-ico:hover{color:var(--red);}
.foot-legal{margin-bottom:48px;}
.foot-copy{font-size:14px;color:var(--dark-ink);margin-bottom:14px;}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.foot-links a{
font-size:14px;color:var(--dark-ink);text-decoration:underline;text-underline-offset:4px;
}
.foot-links a:hover{color:var(--red);}
.foot-note{font-size:13px;color:#7d7d85;line-height:1.7;max-width:640px;}
/* โลโก้ปิดท้าย จัดกึ่งกลาง ตามภาพตัวอย่าง */
.foot-brand{
text-align:center;font-family:'Bebas Neue';font-size:34px;letter-spacing:7px;color:var(--dark-ink);
padding-top:8px;
}
.foot-brand span{color:var(--red);}
.foot-brand img{height:72px;margin:0 auto;} /* margin auto = จัดกึ่งกลาง (display:block ไม่รับ text-align) */
.footer-bottom{border-top:1px solid var(--dark-line);padding-top:24px;display:flex;justify-content:space-between;
font-size:12px;color:#666;flex-wrap:wrap;gap:10px;}
.social-row{display:flex;gap:12px;}
.social-icon{width:34px;height:34px;border:1px solid var(--dark-line);border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:13px;}
.mobile-only{display:none;}
/* ===== RESPONSIVE (real breakpoints) ===== */
@media (max-width: 900px){
.finder-form{grid-template-columns:1fr 1fr;}
.lead-grid{grid-template-columns:1fr;gap:36px;}
section{padding:56px 0;}
section.section-tight{padding-top:28px;}
.detail-panel{position:static;}
}
@media (max-width:480px){
.gallery-thumbs{grid-template-columns:repeat(3,1fr);}
}
/* ===== forced mobile-mode override (demo switcher) ===== */
/* คู่ของบล็อกมือถือด้านบน สำหรับโหมด demo "Mobile" — height:100% = เต็มกรอบมือถือจำลองพอดี
(.frame-scroll กำหนด height:100% ไว้แล้ว) ต่างจากมือถือจริงที่ใช้ 100svh */
.mobile-mode #stories{height:100% !important;min-height:0 !important;padding:19px 0 36px !important;
display:flex;flex-direction:column;}
.mobile-mode .stories{
flex:1;min-height:0;display:flex !important;flex-direction:column;gap:14px;
background:transparent;padding:0 18px;
align-items:center;
/* ล้าง max-width/margin:auto ของกฎเดสก์ท็อป — เหตุผลเดียวกับบล็อกมือถือจริงด้านบน */
max-width:none;margin:0;
}
/* การ์ด 4:3 + ยังพอดี 3 ใบต่อจอ — ดูคำอธิบายเต็มที่บล็อกมือถือจริงด้านบน */
.mobile-mode .story-card{
flex:1;min-height:0;
aspect-ratio:4/3;width:auto;max-width:100%;
border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.mobile-mode .story-label{display:none !important;}
.mobile-mode .story-body{padding:0 18px 18px;}
.mobile-mode .story-title{font-family:'Prompt';font-size:17px;font-weight:500;letter-spacing:0;line-height:1.35;
max-width:calc(100% - 60px);}
.mobile-mode .story-arrow{right:16px;bottom:16px;width:38px;height:38px;font-size:16px;}
.mobile-mode .story-shade{background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);}
.mobile-mode .story-slot{font-size:10px;letter-spacing:1px;padding:16px 16px 64px;}
.mobile-mode .story-slot .slot-frame{width:44px;height:44px;font-size:18px;}
.mobile-mode .finder-form{grid-template-columns:1fr 1fr !important;}
.mobile-mode .lead-grid{grid-template-columns:1fr !important;gap:30px !important;}
.mobile-mode section{padding:48px 0 !important;}
.mobile-mode section.section-tight{padding-top:24px !important;}
.mobile-mode .gallery-thumbs{grid-template-columns:repeat(3,1fr) !important;}
/* ===== TRUST BAR / STORIES / LINEUP / FINDER / SERVICES-GRID / LEAD / TESTI (จากหน้าแรก ใช้ซ้ำได้) ===== */
/* ===== SERVICES — พื้นขาว + หัวข้อกึ่งกลาง + การ์ด 3 ใบ =====
ใช้คลาส .story-card ร่วมกับ Featured Stories ทั้งดุ้น (หน้าตาการ์ดเหมือนกันเป๊ะตามที่ลูกค้าสั่ง)
ที่ประกาศเพิ่มตรงนี้มีแค่ 2 อย่าง: หัวข้อกึ่งกลางด้านบน กับกริดของ section นี้เอง
ไม่ใช้คลาส .stories ร่วมด้วย เพราะกฎมือถือของมันบังคับการ์ดให้ยืดเต็มความสูง section (flex:1)
ซึ่งใช้ได้เฉพาะ section ที่ล็อกความสูงไว้ — Services ปล่อยไหลตามเนื้อหาปกติ */
#services{background:#ffffff;padding:96px 0 104px;}
.svc-head{max-width:var(--max);margin:0 auto;padding:0 24px;}
.svc-headline{
font-family:'Prompt';font-weight:600;letter-spacing:-.5px;text-align:center;
font-size:clamp(30px,3.6vw,48px);line-height:1.15;color:#0f0f0f;
margin:0 0 56px;
}
.svc-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
max-width:var(--max);margin:0 auto;padding:0 24px;
}
/* ===== FEATURED STORIES — พื้นหลังขาว =====
section เดียวในหน้าที่เป็นพื้นสว่าง (ใช้ทั้ง Desktop และ Mobile) การ์ดสีเข้มจึงดู "ลอย" ออกมาชัดขึ้น
ไม่มีหัวข้อ section แล้ว จึงไม่ต้องมีกฎพลิกสีตัวหนังสือให้อ่านออกบนพื้นขาว
(ตัวหนังสือในการ์ดยังขาวเหมือนเดิม เพราะอยู่บนภาพ/พื้นเข้มของการ์ดเอง ไม่ได้อยู่บนพื้นขาว) */
#stories{background:#ffffff;}
/* ระยะบน-ล่างของ section นี้ "ไม่เท่ากันโดยตั้งใจ" (70 บน / 110 ล่าง) เพื่อให้ตาเห็นว่าเท่ากัน
เหตุผล: การ์ดมีเงาทิ้งลงล่าง (box-shadow:0 14px 34px) ซึ่งบนพื้นขาวเห็นชัดมาก เงาจึงกินช่องว่างด้านล่าง
ไปราว 38px ส่วนด้านบนเงาฟุ้งขึ้นไปแค่ราว 10px — ถ้าตั้ง 90/90 เท่ากันเป๊ะตามตัวเลข
ตาจะเห็นเป็น บน 80px / ล่าง 52px (วัดจากพิกเซลจริง) คือการ์ดดูต่ำเกินไป
ตั้ง 76/104 แทน -> วัดพิกเซลจริงได้ บน 66px / ล่าง 66px เท่ากันพอดี
และความสูงรวมของ section ยังเท่าเดิม (180px) จังหวะของหน้าไม่เปลี่ยน */
#stories{padding:76px 0 104px;}
/* ===== FEATURED STORIES — การ์ดเนื้อหา (รถ / บทความ / รีวิว) =====
เดสก์ท็อป: 3 คอลัมน์การ์ดสูง มีหัวข้อ section ด้านบน
มือถือ: การ์ดลอยมุมมน 3 ใบเรียงลงมา สูงเท่ากันและพอดี 1 หน้าจอ ซ่อนหัวข้อ section (ดูบล็อกมือถือด้านล่าง)
โครงชั้นใน 1 การ์ด — ลำดับใน DOM คือลำดับการทับกัน ห้ามสลับ:
1. .story-slot = กรอบ placeholder ตอนยังไม่มีภาพจริง (ต้องอยู่ล่างสุด ภาพจริงจะได้ทับมันหายไปเอง)
2. .story-img = ภาพปก — JS ใส่ผ่าน inline style ไม่ใช่ตัวแปร CSS (เหตุผลเดียวกับ .hero-image)
3. .story-shade = ไล่เฉดดำด้านล่าง ให้ตัวหนังสือขาวอ่านออกไม่ว่าภาพจะสว่างแค่ไหน
4. .story-body = ป้ายประเภท + ชื่อเรื่อง + ปุ่มลูกศร */
/* กรอบของหัวข้อ ใช้ระยะขอบข้างเท่ากับกรอบการ์ดพอดี (5.5%) หัวข้อจะได้เริ่มตรงขอบซ้ายของการ์ดใบแรก
ไม่ใช้ .container เพราะการ์ดกว้างกว่าความกว้างเนื้อหาปกติไปมาก แล้วจะดูเยื้องกัน */
.lineup-head{padding:0 5.5%;}
/* พื้น section เป็นสีดำตามดีไซน์เดิม (ลูกค้ายืนยัน 17 ส.ค. 69) — คั่นกลางระหว่าง
Featured Stories (พื้นขาว) กับ Services (พื้นขาว) ให้การ์ดรถเด่นที่สุดในหน้า */
#lineup{background:var(--dark-bg);}
/* ===== MODEL LINEUP — หัวข้อ section =====
เดสก์ท็อป: ข้อความคงที่บรรทัดเดียว ตัวใหญ่ ชิดซ้าย (ตามภาพตัวอย่างจากลูกค้า)
nowrap + ขนาดผูกกับ vw = อยู่บรรทัดเดียวเสมอทุกความกว้างจอ ไม่มีวันตกบรรทัด
มือถือ: ข้อความเดียวกัน ตัวเล็กลง ตัดได้ไม่เกิน 2 บรรทัด แล้วตามด้วยชื่อรุ่นรถของการ์ดที่ดูอยู่ */
.lineup-headline{
font-family:'Prompt';font-weight:500;letter-spacing:-.5px;
font-size:clamp(30px,4.4vw,58px);line-height:1.12;color:var(--dark-ink);
white-space:nowrap;
/* ระยะบน-ล่างเยอะกว่าหัวข้อ section ทั่วไปโดยตั้งใจ — ให้ประโยคนี้มีพื้นที่หายใจรอบตัว
จะได้อ่านเป็น "ประโยคชวนเชื่อ" ของแบรนด์ ไม่ใช่แค่ป้ายชื่อหมวดที่แปะไว้เหนือการ์ด */
margin:24px 0 84px;
}
/* ชื่อรุ่นรถของการ์ดที่กำลังดู — มือถือเท่านั้น (เดสก์ท็อปมีชื่อรุ่นอยู่บนการ์ดทุกใบแล้ว) */
.lineup-model{display:none;}
/* เดสก์ท็อป: การ์ดลอย 3 ใบเรียงแนวนอน มีระยะห่างระหว่างใบ มุมมน มีเงา (ตามภาพตัวอย่างจากลูกค้า)
ไม่ใช่บล็อกชนกันเต็มความกว้างจอแบบเดิม — จัดกึ่งกลางในความกว้างเดียวกับเนื้อหาส่วนอื่นของหน้า (var(--max)) */
.stories{
display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
max-width:var(--max);margin:0 auto;padding:0 24px;background:transparent;
}
.story-card{
position:relative;overflow:hidden;display:block;
aspect-ratio:4/3;background:var(--black-soft);
border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.5);
transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
.story-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.62);}
.story-slot{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;text-align:center;
color:rgba(255,255,255,.28);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
/* padding ล่างเยอะกว่าบน = ดัน placeholder ขึ้นไปอยู่ครึ่งบนของการ์ด ไม่ไปทับชื่อเรื่องที่เกาะขอบล่าง */
padding:20px 20px 76px;
background:linear-gradient(160deg,#1a1a1a,#3a0407 90%);
}
.story-slot .slot-frame{
width:56px;height:56px;border:1px dashed rgba(255,255,255,.26);border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:22px;
}
.story-card:nth-child(2) .story-slot{background:linear-gradient(160deg,#1a1a1a,#2a2a2a 90%);}
.story-card:nth-child(3) .story-slot{background:linear-gradient(160deg,#1a1a1a,#4a0a0a 90%);}
.story-img{
position:absolute;inset:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.story-card:hover .story-img{transform:scale(1.04);}
.story-shade{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.9) 100%);
}
.story-body{
position:absolute;left:0;right:0;bottom:0;
padding:0 24px 24px;display:flex;flex-direction:column;align-items:flex-start;
}
.story-label{
font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--red);font-weight:600;margin-bottom:8px;
}
.story-title{font-family:'Prompt';font-size:20px;font-weight:500;letter-spacing:0;line-height:1.3;color:#fff;max-width:calc(100% - 70px);}
.story-arrow{
position:absolute;right:22px;bottom:22px;
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(10px);transition:.25s;
}
.story-card:hover .story-arrow{background:var(--red);border-color:var(--red);}
.story-link{font-size:13px;border-bottom:1px solid var(--red);padding-bottom:2px;display:inline-block;}
/* ===== MODEL LINEUP — การ์ดรถ =====
เดสก์ท็อป: การ์ด 1:1 เรียงเป็นคู่ 2 คอลัมน์ ชื่อรุ่นกลางบน ปุ่มลูกศรกลมมุมขวาล่าง
มือถือ: คารูเซลเลื่อนซ้าย-ขวา ดูบล็อก "MODEL LINEUP — เวอร์ชันมือถือ" ท้ายไฟล์
โครงชั้นใน 1 การ์ด เรียงตามลำดับ DOM = ลำดับการทับกัน (หลักเดียวกับ .story-card):
.model-slot -> .model-img -> .model-shade -> .model-body */
/* กว้างเกือบเต็มจอ (เว้นขอบข้างละ 5.5%) ไม่จำกัดที่ความกว้างเนื้อหาปกติ (var(--max))
เพราะการ์ดรถคือพระเอกของ section นี้ ยิ่งใหญ่ยิ่งเห็นรายละเอียดรถชัด (ตามภาพตัวอย่างจากลูกค้า) */
.lineup-viewport{max-width:none;margin:0;padding:0 5.5%;}
.lineup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.model-card{
position:relative;overflow:hidden;display:block;
/* 5:4 = สัดส่วนที่เห็นบนหน้าเว็บ ส่วนไฟล์ภาพต้นทางเป็น 1:1 แล้วให้ background-size:cover ครอปให้เอง
(ดู .model-img) — อัปโหลดภาพจัตุรัสมาได้เลย ไม่ต้องครอปเองก่อน */
aspect-ratio:5/4;border-radius:16px;background:var(--dark-surface);
box-shadow:0 14px 34px rgba(0,0,0,.5);
transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
.model-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.62);}
/* ชื่อรุ่นวางกลางขอบบนของการ์ด (ตามภาพตัวอย่างเดสก์ท็อป) — มือถือซ่อน เพราะชื่อรุ่นไปโชว์ที่หัวข้อ section แทน */
.model-name{
position:absolute;top:30px;left:20px;right:20px;z-index:2;text-align:center;
font-family:'Bebas Neue';font-size:clamp(24px,2vw,32px);letter-spacing:2px;color:#fff;
text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.model-slot{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:flex-start;gap:10px;padding:22% 18px 0;
text-align:center;color:rgba(255,255,255,.28);
font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
background:linear-gradient(135deg,#2b0507,#0a0a0a);
}
.model-card:nth-child(even) .model-slot{background:linear-gradient(135deg,#1b1b1b,#000);}
.model-slot .slot-frame{
width:54px;height:54px;border:1px dashed rgba(255,255,255,.26);border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:21px;
}
.model-img{
position:absolute;inset:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
}
.model-shade{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.92) 100%);
}
.model-body{
position:absolute;left:0;right:0;bottom:0;padding:0 30px 30px;
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
/* ป้ายเชื้อเพลิงทรงแคปซูล (Electro / Hybrid / Gasoline / Diesel) ตามภาพตัวอย่าง */
.model-fuel{
font-size:11px;letter-spacing:.4px;color:#fff;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.26);
backdrop-filter:blur(10px);padding:4px 13px;border-radius:20px;
}
.model-tagline{font-size:13px;color:#e8e8e8;line-height:1.5;font-weight:300;}
/* ปุ่มพื้นขาวตัวหนังสือดำ ตัดกับภาพรถเข้ม ๆ ให้เด่นที่สุด (ตามภาพตัวอย่าง) */
.model-tagline{max-width:calc(100% - 72px);font-size:14px;}
/* ปุ่ม 2 แบบในการ์ดเดียว สลับกันตามอุปกรณ์:
.model-arrow = วงกลมลูกศรมุมขวาล่าง ใช้บนเดสก์ท็อป (มี hover ให้เห็นอยู่แล้วว่ากดได้)
.model-cta = ปุ่มขาวเต็มความกว้าง ใช้บนมือถือ (นิ้วกดง่าย เห็นชัดว่าเป็นปุ่ม) */
.model-cta{display:none;}
.model-arrow{
position:absolute;right:30px;bottom:30px;
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(10px);transition:.25s;
}
.model-card:hover .model-arrow{background:var(--red);border-color:var(--red);}
/* แถบควบคุมคารูเซล — โชว์เฉพาะมือถือ (เดสก์ท็อปเป็นกริด ไม่ต้องมีตัวควบคุม) */
.lineup-controls{display:none;align-items:center;justify-content:center;gap:12px;margin-top:24px;}
.lineup-dots{
display:flex;align-items:center;gap:9px;
background:rgba(255,255,255,.08);border:1px solid var(--dark-line);
border-radius:30px;padding:11px 18px;
}
.lineup-dot{
width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
background:rgba(255,255,255,.34);border:none;transition:.25s;
}
.lineup-dot:hover{background:rgba(255,255,255,.6);}
.lineup-dot.is-active{background:var(--dark-ink);width:30px;border-radius:5px;}
.lineup-play{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
background:rgba(255,255,255,.08);border:1px solid var(--dark-line);color:var(--dark-ink);
display:flex;align-items:center;justify-content:center;transition:.2s;
}
.lineup-play::before{content:"▶";font-size:13px;line-height:1;margin-left:2px;}
.lineup-play.is-playing::before{content:"❚❚";font-size:11px;letter-spacing:1px;margin-left:0;}
.lineup-play:hover{border-color:var(--red);background:var(--red);}
.finder{background:var(--black-soft);border-radius:8px;padding:36px;border:1px solid var(--gray-line);}
.finder-form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:14px;align-items:end;}
.lead{
background:linear-gradient(120deg, rgba(226,16,26,.035), rgba(255,255,255,0) 60%), var(--surface);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.lead-left h2{font-size:clamp(26px,3.5vw,38px);margin-bottom:16px;}
.lead-left p{color:var(--ink-soft);font-size:14px;margin-bottom:28px;line-height:1.7;}
.lead-badges{display:flex;gap:16px;flex-wrap:wrap;}
.badge{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.badge .dot{width:8px;height:8px;background:var(--red);border-radius:50%;}
.lead-form{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px;}
.lead-form .field{margin-bottom:16px;}
.lead-form input,.lead-form select{
width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);
padding:13px 14px;border-radius:4px;font-family:'Prompt';font-size:14px;
}
/* ==========================================================================
HERO หน้าแรก — ชุดตั้งค่าเดี่ยว (ดู SPEEDY_HERO ใน content-data.js)
--------------------------------------------------------------------------
เต็มความสูงจอทั้ง Desktop และ Mobile ต่างกันแค่ "สื่อ" ที่ใช้:
Desktop -> .hero-image ภาพนิ่ง 16:9 (JS ใส่ผ่าน inline style)
Mobile -> .hero-video วิดีโอ 9:16 (JS ใส่ src เฉพาะตอนอยู่โหมดมือถือ กันโหลดเปล่าบนเดสก์ท็อป)
ทั้งคู่ใช้ object-fit/background-size:cover = ครอปให้เต็มจอเสมอไม่ว่าจอจะสัดส่วนไหน
ลำดับ DOM ในกล่องสื่อ = ลำดับการทับกัน: .hero-media-slot (placeholder) -> .hero-image -> .hero-video
========================================================================== */
.hero{
position:relative;padding:0;overflow:hidden;
height:100svh;min-height:560px;
display:flex;align-items:flex-end;
}
/* หน้าแรกอยากให้ภาพ Hero เต็มจอจริงๆ จึงให้ header ลอยทับ Hero แบบโปร่งใส
ใช้ margin-bottom ติดลบ (ไม่กินพื้นที่ในโฟลว์) แทน position:absolute
เหตุผล: absolute จะยึดกับ "บรรพบุรุษที่มี position" ซึ่งในโหมด demo Mobile คือ #frameWrap
(มี transform อยู่) -> header เลยไปติดหนึบขอบบนกรอบ ไม่เลื่อนหายตามหน้าอย่างที่ต้องการ
ส่วน margin ติดลบ อยู่ในโฟลว์ปกติ จึงเลื่อนหายไปกับเนื้อหาเหมือนกันทั้ง 2 โหมด */
.page-home header{
/* ต่างจากหน้าอื่นแค่ "ลอยทับภาพ Hero" — สีแถบใช้ธีม DARK (ดู section HEADER) */
margin-bottom:calc(var(--header-h) * -1);
}
.hero-media{position:absolute;inset:0;}
.hero-media-slot{
position:absolute;inset:0;pointer-events:none;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;
padding-top:16%;text-align:center;color:rgba(255,255,255,.30);
font-size:12px;letter-spacing:2px;text-transform:uppercase;
background:
radial-gradient(ellipse at 30% 20%, rgba(226,16,26,.25), transparent 55%),
linear-gradient(180deg,#0a0a0a 0%,#161616 55%,#0a0a0a 100%);
}
.hero-media-slot .slot-frame{
width:70px;height:70px;border:1px dashed rgba(255,255,255,.28);border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:26px;
}
.hero-media-slot small{font-size:10px;letter-spacing:.5px;text-transform:none;color:rgba(255,255,255,.22);}
.slot-note-mobile{display:none;}
/* ไม่ประกาศ background-image ตรงนี้ — JS ใส่ให้ทาง inline style เพราะพาธในตัวแปร CSS จะถูกคิด
เทียบกับไฟล์ style.css ไม่ใช่เทียบกับหน้าเว็บ (assets/img/... จะกลายเป็น assets/assets/img/...) */
.hero-image{
position:absolute;inset:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero-video{
position:absolute;inset:0;display:none;
width:100%;height:100%;object-fit:cover;
}
.hero-scrim{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.48) 58%, rgba(0,0,0,.88) 100%);
}
/* เนื้อหา Hero วางทับ "ภาพถ่ายรถ" (โทนเข้ม + scrim ดำ) ไม่ใช่พื้นขาวของธีมสว่าง
จึงต้องประกาศสีขาวไว้ตรงนี้ ไม่ปล่อยให้รับค่าสืบทอดมาจาก body (ซึ่งเป็นสีดำแล้ว) */
.hero-content{position:relative;z-index:4;width:100%;padding-bottom:76px;color:#fff;}
.hero-title{
font-family:'Bebas Neue';font-size:clamp(40px,6vw,80px);line-height:1.02;
letter-spacing:1px;margin-bottom:30px;max-width:900px;
}
/* ปุ่มโปร่งฝ้าสีเทา ตามภาพตัวอย่าง — ตัดกับภาพรถได้ทุกโทนโดยไม่แย่งสายตาจากตัวรถ */
.hero-btn{
display:inline-flex;align-items:center;justify-content:center;
min-width:230px;padding:17px 34px;border-radius:3px;
font-size:15px;font-weight:400;color:#fff;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
backdrop-filter:blur(16px);transition:.25s;
}
.hero-btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.4);}
/* ==========================================================================
FEATURED STORIES — เวอร์ชันมือถือจริง (จอแคบ max-width:900px)
--------------------------------------------------------------------------
⚠️ บล็อกนี้ต้องอยู่ "ท้ายไฟล์" เสมอ ห้ามย้ายขึ้นไปรวมกับ @media(max-width:900px) ก้อนอื่นด้านบน
เหตุผล: กฎเดสก์ท็อปของ .stories/.story-card ถูกประกาศไว้กลางไฟล์ และมี specificity เท่ากัน (1 คลาส)
ถ้าบล็อกนี้อยู่ "ก่อน" กฎเดสก์ท็อป กฎเดสก์ท็อปจะชนะแม้จะอยู่บนจอมือถือ (media query ไม่เพิ่ม specificity)
-> .stories กลับไปเป็น display:grid 3 คอลัมน์ การ์ดกว้างเหลือ 0 หายทั้งใบบนมือถือจริง
วางไว้ท้ายไฟล์คู่กับบล็อกฝาแฝด .mobile-mode จึงชนะได้โดยไม่ต้องใส่ !important รัวๆ
========================================================================== */
@media (max-width:900px){
/* ระยะบนเท่ากับระยะล่าง ไม่เว้นเผื่อความสูง header
เคยเว้น 80px ไว้กัน header (แถบลอยทับเนื้อหา) บังการ์ดใบแรก แต่ระหว่างเลื่อนหน้าปกติมันกลายเป็น
ช่องว่างขาวโล่งก้อนใหญ่เหนือการ์ด ซึ่งเห็นชัดมากบนพื้นขาว — ตัดออกให้การ์ดขยับขึ้นมาชิดขอบ section
ระยะบน-ล่างไม่เท่ากันโดยตั้งใจ (19/36) เพื่อชดเชยเงาการ์ดที่ทิ้งลงล่าง ดูเหตุผลเต็มที่บล็อกเดสก์ท็อป */
#stories{height:100svh;min-height:520px;padding:19px 0 36px !important;display:flex;flex-direction:column;}
.stories{
flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;
background:transparent;padding:0 18px;
align-items:center; /* การ์ดแคบกว่าความกว้างจอแล้ว (ดู aspect-ratio ด้านล่าง) ต้องจัดกึ่งกลางเอง */
/* ล้าง max-width/margin:auto ของกฎเดสก์ท็อป — margin:auto บนแกนขวางทำให้ flex item หดตามเนื้อหา
แทนที่จะยืดเต็มความกว้าง และการ์ดที่ลูกเป็น absolute ทั้งหมดจะกว้างเหลือ 0 (การ์ดหายทั้งใบ) */
max-width:none;margin:0;
}
/* การ์ดสัดส่วน 4:3 และยังพอดี 3 ใบต่อ 1 หน้าจอ:
flex:1 กำหนด "ความสูง" (แบ่งพื้นที่ที่เหลือเท่าๆ กัน 3 ใบ) แล้ว aspect-ratio ไปคำนวณ "ความกว้าง"
ย้อนกลับจากความสูงนั้นอีกที (width:auto) — จอสูงเท่าไหร่การ์ดก็ยังได้ 4:3 เป๊ะและครบ 3 ใบเสมอ
ผลข้างเคียงที่ตั้งใจ: การ์ดแคบลงกว่าเดิม ขอบซ้าย-ขวาจึงหนาขึ้น (ยืนยันโดยคุณเอิร์ธ 13 ส.ค. 69) */
.story-card{
flex:1;min-height:0;
aspect-ratio:4/3;width:auto;max-width:100%;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.55); /* เงาใต้การ์ด = ความรู้สึก "ลอยจากพื้นหลัง" ตามภาพตัวอย่าง */
}
.story-label{display:none;} /* ภาพตัวอย่างมีแค่ชื่อเรื่อง+ลูกศร ไม่มีป้ายประเภท */
.story-body{padding:0 18px 18px;}
.story-title{font-family:'Prompt';font-size:17px;font-weight:500;letter-spacing:0;line-height:1.35;
max-width:calc(100% - 60px);}
.story-arrow{right:16px;bottom:16px;width:38px;height:38px;font-size:16px;}
.story-shade{background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);}
.story-slot{font-size:10px;letter-spacing:1px;padding:16px 16px 64px;}
.story-slot .slot-frame{width:44px;height:44px;font-size:18px;}
}
/* ==========================================================================
MODEL LINEUP — เวอร์ชันมือถือ (คารูเซล)
--------------------------------------------------------------------------
⚠️ ต้องอยู่ "ท้ายไฟล์" เสมอ เหตุผลเดียวกับบล็อก FEATURED STORIES ด้านบน:
กฎเดสก์ท็อปของ .lineup-grid/.model-card มี specificity เท่ากัน (1 คลาส) และอยู่กลางไฟล์
ถ้าบล็อกนี้อยู่ก่อนหน้า กฎเดสก์ท็อปจะชนะแม้อยู่บนจอมือถือ
กลไกคารูเซล: ใช้ scroll-snap ของเบราว์เซอร์ล้วน ๆ ไม่ต้องมี JS ลากนิ้วเอง
- .lineup-grid เป็นแถวเดียวเลื่อนแนวนอน + scroll-snap-type:x mandatory
- การ์ดกว้าง 78% ของจอ -> เหลือขอบให้การ์ดใบข้างโผล่มาให้เห็นทั้งซ้ายและขวา (ตามภาพตัวอย่าง)
- scroll-padding + padding ซ้าย/ขวา 11% ทำให้การ์ดที่ snap แล้ว "อยู่กึ่งกลางจอ" พอดี
JS ทำแค่ 2 อย่าง: เลื่อนไปการ์ดถัดไปตอน autoplay และอัปเดตจุดบอกตำแหน่งตอนผู้ใช้ปัดเอง
========================================================================== */
@media (max-width:900px){
/* ลด padding ของ section ลงจากค่ามาตรฐาน 90px เพราะการ์ด 1:2 สูงมาก
ถ้าใช้ 90px ชุด หัวข้อ+การ์ด+จุดบอกตำแหน่ง จะยาวเกิน 1 หน้าจอ ปุ่มในการ์ดโดนตัดที่ขอบจอพอดี */
#lineup{padding:40px 0 30px !important;}
#lineup .lineup-controls{margin-top:14px;}
/* หัวข้อมือถือ: ตัวเล็กลง ตัดได้ไม่เกิน 2 บรรทัด (ยาวกว่านั้นใส่ … ให้) */
.lineup-head{padding:0 9.5%;}
.lineup-headline{
font-size:28px;line-height:1.2;letter-spacing:-.3px;margin:0 0 40px;
white-space:normal;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lineup-model{
display:block;text-align:center;
font-family:'Bebas Neue';font-size:26px;letter-spacing:2px;color:var(--dark-ink);
padding:0 18px;margin-bottom:20px;
}
.lineup-viewport{max-width:none;margin:0;padding:0;}
.lineup-grid{
display:flex;grid-template-columns:none;gap:14px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:4px 9.5% 8px;scroll-padding-inline:9.5%;
scrollbar-width:none;-ms-overflow-style:none;
}
.lineup-grid::-webkit-scrollbar{display:none;width:0;height:0;}
/* เมาส์ชี้ที่คารูเซล = บอกให้รู้ว่าลากได้ (นิ้วสัมผัสไม่เห็น cursor อยู่แล้ว ไม่กระทบ) */
.lineup-grid{cursor:grab;}
.lineup-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;}
/* ระหว่างลาก ปิดการลากภาพ/เลือกข้อความ ไม่งั้นเบราว์เซอร์จะนึกว่ากำลังลากรูปไปวางที่อื่น */
.lineup-grid.is-dragging *{user-select:none;-webkit-user-drag:none;pointer-events:none;}
/* อัตราส่วน 1:2 (การ์ดสูงเกือบเต็มจอ) ตามภาพตัวอย่างจากลูกค้า — ไม่ใช่ 3:4 แบบเดสก์ท็อป
กว้าง 80% ของจอ เหลือขอบให้การ์ดใบข้างโผล่มาให้เห็นทั้งซ้ายและขวา */
.model-card{
/* 100% ที่นี่คิดจาก content box ของ .lineup-grid ซึ่งหัก padding ข้างละ 9.5% ไปแล้ว
-> การ์ดกว้าง 81% ของความกว้างจอจริง และเหลือขอบข้างละ 9.5% ให้การ์ดใบข้างโผล่ (ตรงกับภาพตัวอย่าง)
อย่าเขียนเป็น % ของจอตรงๆ เพราะ flex-basis คิดจาก content box ไม่ใช่ viewport */
flex:0 0 100%;scroll-snap-align:center;
aspect-ratio:1/2;border-radius:18px;border:none;
box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.model-card:hover{transform:none;} /* มือถือไม่มี hover จริง ปิดไปกันกระตุกตอนแตะ */
.model-body{padding:0 16px 16px;gap:11px;}
.model-tagline{font-size:13.5px;}
.model-cta{padding:14px 18px;font-size:14.5px;}
.model-name{display:none;} /* ชื่อรุ่นไปโชว์เป็นหัวข้อ section แทน (JS เปลี่ยนตามการ์ดที่ปัดถึง) */
.model-arrow{display:none;}
.model-tagline{max-width:100%;}
.model-cta{
display:flex;width:100%;align-items:center;justify-content:center;
background:#fff;color:#111;font-weight:500;border-radius:6px;transition:.2s;
}
.model-cta:active{background:var(--red);color:#fff;}
.lineup-controls{display:flex;}
.model-slot{padding:24% 16px 0;}
}
.mobile-mode #lineup{padding:40px 0 30px !important;}
.mobile-mode #lineup .lineup-controls{margin-top:14px;}
.mobile-mode .lineup-head{padding:0 9.5%;}
.mobile-mode .lineup-headline{
font-size:28px;line-height:1.2;letter-spacing:-.3px;margin:0 0 40px;
white-space:normal;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mobile-mode .lineup-model{
display:block;text-align:center;
font-family:'Bebas Neue';font-size:26px;letter-spacing:2px;color:var(--dark-ink);
padding:0 18px;margin-bottom:20px;
}
.mobile-mode .lineup-viewport{max-width:none;margin:0;padding:0;}
.mobile-mode .lineup-grid{
display:flex !important;grid-template-columns:none;gap:14px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:4px 9.5% 8px;scroll-padding-inline:9.5%;
scrollbar-width:none;-ms-overflow-style:none;
}
.mobile-mode .lineup-grid::-webkit-scrollbar{display:none;width:0;height:0;}
.mobile-mode .lineup-grid{cursor:grab;}
.mobile-mode .lineup-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.mobile-mode .lineup-grid.is-dragging *{user-select:none;-webkit-user-drag:none;pointer-events:none;}
.mobile-mode .lineup-grid.is-rewinding{opacity:0;transition:opacity .18s ease;}
/* อัตราส่วน 1:2 — ดูคำอธิบายที่บล็อกมือถือจริงด้านบน */
.mobile-mode .model-card{
flex:0 0 100%;scroll-snap-align:center;
aspect-ratio:1/2;border-radius:18px;border:none;
box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.mobile-mode .model-card:hover{transform:none;}
.mobile-mode .model-body{padding:0 16px 16px;gap:11px;}
.mobile-mode .model-tagline{font-size:13.5px;}
.mobile-mode .model-cta{padding:14px 18px;font-size:14.5px;}
.mobile-mode .model-name{display:none;}
.mobile-mode .model-arrow{display:none;}
.mobile-mode .model-tagline{max-width:100%;}
.mobile-mode .model-cta{
display:flex;width:100%;align-items:center;justify-content:center;
background:#fff;color:#111;font-weight:500;border-radius:6px;transition:.2s;
}
.mobile-mode .model-cta:active{background:var(--red);color:#fff;}
.mobile-mode .lineup-controls{display:flex;}
.mobile-mode .model-slot{padding:24% 16px 0;}
/* ==========================================================================
HERO — เวอร์ชันมือถือ
--------------------------------------------------------------------------
⚠️ ต้องอยู่ "ท้ายไฟล์" เสมอ เหตุผลเดียวกับบล็อก FEATURED STORIES / MODEL LINEUP ด้านบน:
กฎเดสก์ท็อปของ .hero* มี specificity เท่ากัน (1 คลาส) และอยู่กลางไฟล์
ถ้าบล็อกนี้อยู่ก่อนหน้า กฎเดสก์ท็อปจะชนะแม้อยู่บนจอมือถือ
ต่างจากเดสก์ท็อปแค่: สลับภาพนิ่ง -> วิดีโอ, ย่อขนาดพาดหัว, ปุ่มกว้างเต็มจอ
========================================================================== */
@media (max-width:900px){
.hero-image{display:none;}
.hero-video{display:block;}
.slot-note-desktop{display:none;}
.slot-note-mobile{display:block;}
.hero-media-slot{padding-top:26%;font-size:11px;}
.hero-media-slot .slot-frame{width:56px;height:56px;font-size:22px;}
.hero-content{padding-bottom:34px;}
.hero-title{font-size:34px;line-height:1.2;letter-spacing:.5px;margin-bottom:24px;max-width:none;}
.hero-btn{width:100%;min-width:0;padding:17px 20px;}
}
/* คู่แฝดสำหรับโหมด demo "Mobile" (กรอบมือถือจำลอง 390px — media query ไม่ทำงานเพราะหน้าต่างยังกว้าง) */
.mobile-mode .hero-image{display:none;}
.mobile-mode .hero-video{display:block;}
.mobile-mode .slot-note-desktop{display:none;}
.mobile-mode .slot-note-mobile{display:block;}
.mobile-mode .hero-media-slot{padding-top:26%;font-size:11px;}
.mobile-mode .hero-media-slot .slot-frame{width:56px;height:56px;font-size:22px;}
.mobile-mode .hero-content{padding-bottom:34px;}
.mobile-mode .hero-title{font-size:34px;line-height:1.2;letter-spacing:.5px;margin-bottom:24px;max-width:none;}
.mobile-mode .hero-btn{width:100%;min-width:0;padding:17px 20px;}
/* 100svh คิดจากหน้าต่างเบราว์เซอร์จริง ซึ่งใหญ่กว่ากรอบจำลองมาก -> ต้องใช้ 100% ของ .frame-scroll แทน */
.mobile-mode .hero{height:100% !important;min-height:0 !important;}
/* ==========================================================================
SERVICES — เวอร์ชันมือถือ
--------------------------------------------------------------------------
⚠️ ต้องอยู่ "ท้ายไฟล์" เสมอ เหตุผลเดียวกับบล็อกมือถือของ section อื่นในไฟล์นี้:
กฎเดสก์ท็อปของ .svc-grid / .story-card มี specificity เท่ากันและอยู่กลางไฟล์
⭐ แก้ 17 ส.ค. 69: การ์ดต้อง "ขนาดเท่ากับ Featured Stories เป๊ะ" (เดิมเป็น 16:9 เตี้ยกว้าง คนละขนาด)
วิธีให้เท่ากันเป๊ะโดยไม่ต้องฮาร์ดโค้ดตัวเลข: ให้พื้นที่การ์ดสูงเท่ากับพื้นที่การ์ดของ #stories
(= ความสูงจอ ลบ padding บน 19px + ล่าง 36px ของ #stories) แล้วปล่อยให้ flex:1 + aspect-ratio
คำนวณต่อเองแบบเดียวกัน -> ได้ 4:3 ขนาดเดียวกันทุกความสูงจอ
หมายเหตุ: section นี้มีหัวข้ออยู่ด้านบนด้วย ความสูงรวมจึงเกิน 1 หน้าจอเล็กน้อย (ตั้งใจ)
========================================================================== */
@media (max-width:900px){
#services{padding:56px 0 60px;}
.svc-head{max-width:none;margin:0;padding:0 18px;}
.svc-headline{font-size:28px;margin:0 0 30px;}
.svc-grid{
display:flex;flex-direction:column;gap:14px;max-width:none;margin:0;padding:0 18px;
align-items:center; /* การ์ดแคบกว่าจอแล้ว ต้องจัดกึ่งกลางเอง (เหมือน .stories) */
height:calc(var(--screen-h) - 55px); /* 55px = padding บน 19 + ล่าง 36 ของ #stories */
}
#services .story-card{
flex:1;min-height:0;
aspect-ratio:4/3;width:auto;max-width:100%;
border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.55);
}
/* ตัวหนังสือ/ไอคอนใช้ค่าชุดเดียวกับ Featured Stories เป๊ะ การ์ดจะได้เหมือนกันจริงๆ ไม่ใช่แค่ขนาดกรอบ */
#services .story-title{font-family:'Prompt';font-size:17px;font-weight:500;letter-spacing:0;
line-height:1.35;max-width:calc(100% - 60px);}
#services .story-arrow{right:16px;bottom:16px;width:38px;height:38px;font-size:16px;}
#services .story-body{padding:0 18px 18px;}
#services .story-slot{font-size:10px;letter-spacing:1px;padding:16px 16px 64px;}
#services .story-slot .slot-frame{width:44px;height:44px;font-size:18px;}
}
.mobile-mode #services{padding:56px 0 60px;}
.mobile-mode .svc-head{max-width:none;margin:0;padding:0 18px;}
.mobile-mode .svc-headline{font-size:28px;margin:0 0 30px;}
.mobile-mode .svc-grid{display:flex !important;flex-direction:column;gap:14px;max-width:none;margin:0;padding:0 18px;
align-items:center;height:calc(var(--screen-h) - 55px);}
.mobile-mode #services .story-card{flex:1;min-height:0;aspect-ratio:4/3;width:auto;max-width:100%;
border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.55);}
.mobile-mode #services .story-title{font-family:'Prompt';font-size:17px;font-weight:500;letter-spacing:0;
line-height:1.35;max-width:calc(100% - 60px);}
.mobile-mode #services .story-arrow{right:16px;bottom:16px;width:38px;height:38px;font-size:16px;}
.mobile-mode #services .story-body{padding:0 18px 18px;}
.mobile-mode #services .story-slot{font-size:10px;letter-spacing:1px;padding:16px 16px 64px;}
.mobile-mode #services .story-slot .slot-frame{width:44px;height:44px;font-size:18px;}
/* ==========================================================================
ฟอร์ม Lead (หน้า Services) — เวอร์ชันมือถือ
--------------------------------------------------------------------------
บั๊กเดิมที่เจอตอนตรวจ 14 ส.ค. 69: กฎ .lead-grid{1fr} ในบล็อก @media(max-width:900px) ถูกประกาศไว้
"ก่อน" กฎเดสก์ท็อป .lead-grid{1fr 1fr} ที่อยู่กลางไฟล์ และมี specificity เท่ากัน (1 คลาส)
-> กฎเดสก์ท็อปชนะแม้อยู่บนจอมือถือ ฟอร์มเลยถูกบีบเหลือกว้าง 171px บนจอ 390px กรอกแทบไม่ได้
ย้ายมาไว้ท้ายไฟล์เพื่อให้ชนะตามลำดับ (หลักเดียวกับบล็อกมือถือของ section อื่นในไฟล์นี้)
========================================================================== */
@media (max-width:900px){
.lead-grid{grid-template-columns:1fr;gap:36px;}
.lead-form{padding:24px;}
}
.mobile-mode .lead-grid{grid-template-columns:1fr !important;gap:30px !important;}
.mobile-mode .lead-form{padding:24px;}
/* ==========================================================================
FOOTER — เวอร์ชันมือถือ
--------------------------------------------------------------------------
⚠️ ท้ายไฟล์เสมอ เหตุผลเดียวกับบล็อกมือถือของ section อื่น (specificity เท่ากัน ต้องชนะด้วยลำดับ)
คอลัมน์ลิงก์เรียงลงมาเป็นกลุ่มๆ ชิดซ้าย ส่วนปุ่มกลับขึ้นบนกับโลโก้ปิดท้ายยังอยู่กึ่งกลาง
========================================================================== */
@media (max-width:900px){
footer{padding:44px 0 36px;}
.foot-top{margin-bottom:44px;}
.foot-region{margin-bottom:40px;}
.foot-cols{grid-template-columns:1fr;gap:34px;margin-bottom:40px;}
.foot-social{gap:24px;margin-bottom:40px;}
.foot-legal{margin-bottom:38px;}
.foot-brand{font-size:28px;letter-spacing:6px;}
.foot-brand img{height:52px;}
}
.mobile-mode footer{padding:44px 0 36px;}
.mobile-mode .foot-top{margin-bottom:44px;}
.mobile-mode .foot-region{margin-bottom:40px;}
.mobile-mode .foot-cols{grid-template-columns:1fr !important;gap:34px;margin-bottom:40px;}
.mobile-mode .foot-social{gap:24px;margin-bottom:40px;}
.mobile-mode .foot-legal{margin-bottom:38px;}
.mobile-mode .foot-brand{font-size:28px;letter-spacing:6px;}
.mobile-mode .foot-brand img{height:52px;}
/* ==========================================================================
CAR DETAIL v2 — เลย์เอาต์ใหม่หน้ารายละเอียดรถ (17 ส.ค. 69)
--------------------------------------------------------------------------
อ้างอิงโครงจากหน้า Model ของ Porsche official ที่คุณเอิร์ธส่งมา:
hero ลายน้ำชื่อรุ่น -> pill รุ่นย่อย -> ชื่อรุ่น -> ป้ายพลังงาน -> ราคา
-> แถวปุ่ม -> ตัวเลขสเปกเด่น 3 ตัวคู่กับรูปหน้าตรง -> showcase ภาพใหญ่
-> แกลเลอรี -> ตารางสเปกเต็ม -> รถรุ่นใกล้เคียง
ทุกคลาสขึ้นต้นด้วย .cd- เพื่อไม่ชนของเดิม (.detail-layout ชุดเก่ายังอยู่ ไม่ได้ลบ
เผื่อหน้าอื่นอ้างถึง — ถ้ายืนยันว่าไม่ใช้แล้วค่อยลบทีหลังได้)
ธีม: สีทั้งหมดอ่านจากตัวแปร --cd-* ที่ประกาศบน body
ตั้งแต่ 17 ส.ค. 69 เว็บใช้ "ธีมสว่าง" อย่างเดียว ค่าชุดธีมสว่างจึงกลายเป็นค่าตั้งต้น
(ชุดค่าธีมดำเดิมและคลาส .theme-light ที่เคยใช้สลับ ถูกถอดออกแล้ว)
========================================================================== */
body{
--cd-bg:#ffffff;
--cd-surface:#f7f7f7;
--cd-surface-2:#eeeeee;
--cd-text:#0a0a0a;
--cd-text-soft:#3f3f3f;
--cd-muted:#6d6d6d;
--cd-line:#e2e2e2;
--cd-accent:#0a0a0a; /* Porsche ใช้ปุ่มดำเป็นปุ่มหลัก ไม่ใช่สีแบรนด์ */
--cd-accent-ink:#ffffff;
--cd-band:linear-gradient(180deg,#efefef 0%,#f6f6f6 55%,#ffffff 100%);
--cd-watermark:rgba(0,0,0,.07);
--cd-pill:#ededed;
--cd-pill-line:#e2e2e2;
--cd-pill-on:#dcdcdc;
--cd-pill-on-ink:#0a0a0a;
--cd-btn-2:#ededed;
--cd-btn-2-ink:#0a0a0a;
--cd-shadow:0 24px 60px rgba(0,0,0,.10);
}
/* คลาส .theme-light เดิมยังรับได้อยู่ (ไม่ทำอะไร) เผื่อไฟล์ HTML เก่าที่ยังติดคลาสนี้อยู่ */
body.theme-light{background:var(--bg);color:var(--ink);}
/* ==========================================================================
1) HERO — แถบไล่สีอ่อน + ลายน้ำชื่อรุ่น + รถลอยคร่อมขอบแถบ
========================================================================== */
.cd-hero{position:relative;padding:0 0 8px;overflow:hidden;}
/* แถบไล่สีสูง 58% ของ hero รถจะล้นลงมาใต้แถบเล็กน้อยเหมือนภาพอ้างอิง */
.cd-hero::before{
content:"";position:absolute;left:0;right:0;top:0;height:62%;
background:var(--cd-band);
}
/* ลายน้ำชื่อรุ่นใน Hero คุมด้วยตัวแปร 2 ตัว แก้ตัวเดียวแล้วอีกตัวขยับตามเสมอ
ไม่งั้นลายน้ำกับรถจะเลื่อนหลุดจากกัน
--cd-hero-gap = ระยะว่างเหนือลายน้ำ (ช่องไฟระหว่างแถบ header กับหัวตัวอักษร)
--cd-hero-drop = ระยะจากหัวลายน้ำลงมาถึงขอบบนกล่องภาพรถ
ตั้งค่าโดยอ้างอิงหน้า Cayenne ของ Porsche ที่คุณเอิร์ธส่งมา: หลังคารถพาดอยู่ตรง "ปลายล่างของตัวอักษร"
ทับลายน้ำนิดเดียว ไม่ใช่ทับครึ่งตัว และไม่ใช่ลอยห่างกันคนละที่
วัดจริงแล้วได้ drop = 90px (เดสก์ท็อป) / 20px (มือถือ) = หลังคาตัดที่ ~92% ของความสูงลายน้ำ
ตัวเลขต่างกันมากเพราะขนาดตัวอักษรต่างกัน (200px กับ 78px) ไม่ใช่พิมพ์ผิด */
.cd-hero{--cd-hero-gap:clamp(38px,6.2vw,90px);--cd-hero-drop:90px;}
.cd-hero-inner{position:relative;z-index:1;padding-top:calc(var(--cd-hero-gap) + var(--cd-hero-drop));}
/* ลายน้ำใช้ Prompt น้ำหนัก 800 เอียง — ไม่ใช้ Bebas Neue แล้ว (แก้ 20 ส.ค. 69)
เพราะ Bebas Neue มีน้ำหนักเดียว (400) ต่อให้สั่ง bold ก็ได้แค่ตัวหนาปลอมที่เบราว์เซอร์ปั๊มให้ ดูไม่สะอาด
Prompt มี 800 จริงและมีตัวเอียงจริง (โหลดเพิ่มไว้ที่ ของหน้าแล้ว: ital,wght@1,800)
Prompt กว้างกว่า Bebas ที่เป็นฟอนต์แคบมาก ขนาดจึงลดจาก 210px เหลือ 200px — ชื่อยาว 9 ตัวอักษรยังกว้างราว 1,090px พอดีคอนเทนเนอร์ 1,232px */
.cd-watermark{
position:absolute;left:50%;top:var(--cd-hero-gap,6px);transform:translateX(-50%);
font-family:'Prompt',sans-serif;font-style:italic;font-weight:800;
font-size:clamp(74px,13.9vw,200px);line-height:.9;letter-spacing:-2px;
color:var(--cd-watermark);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
}
/* กรอบภาพรถใน Hero — อัตราส่วนตั้งจากขอบเขตตัวรถจริงในไฟล์เรนเดอร์ ไม่ใช่ขนาดไฟล์
ไฟล์ 1450x1000 แต่ตัวรถกินแค่ y230-834 (มุมด้านข้าง) จึงตัดที่ว่างบน-ล่างออกได้
ถ้าใช้อัตราส่วนเดิม 1000:340 ภาพจะถูกครอปจนล้อหาย */
.cd-hero-car{
position:relative;z-index:1;
max-width:820px;margin:0 auto;
aspect-ratio:1450/745;border-radius:4px;overflow:hidden;
}
/* ---------- pill เลือกรุ่นย่อย (Coupé / Roadster ในภาพอ้างอิง) ---------- */
.cd-variants{
display:inline-flex;gap:2px;padding:3px;margin:34px auto 0;
background:var(--cd-pill);border:1px solid var(--cd-pill-line);border-radius:6px;
}
.cd-variant{
border:none;background:transparent;color:var(--cd-text-soft);
font-family:'Prompt';font-size:14px;font-weight:400;
padding:9px 22px;border-radius:4px;cursor:pointer;transition:.2s;white-space:nowrap;
}
.cd-variant.is-on{background:var(--cd-pill-on);color:var(--cd-pill-on-ink);font-weight:500;}
/* ---------- ชื่อรุ่น / ป้ายพลังงาน / ราคา ---------- */
.cd-head{text-align:center;}
.cd-title{
font-family:'Prompt',sans-serif;font-weight:300;
font-size:clamp(34px,5.6vw,58px);line-height:1.1;letter-spacing:0;
margin:26px 0 0;color:var(--cd-text);
}
.cd-title strong{font-weight:500;}
/* ชื่อรุ่นแยก 2 ส่วนตามช่องกรอกในระบบหลังบ้าน: ชื่อรุ่นหลัก (เน้น) + ชื่อรุ่นรอง (เบากว่า)
ช่องไฟระหว่างสองส่วนทำด้วย margin-left ของ .cd-title-sub ไม่ใช่เว้นวรรคใน HTML
เพราะถ้ารถคันไหนไม่มีรุ่นย่อย (ปล่อยว่าง) จะได้ไม่เหลือช่องว่างลอยท้ายชื่อ */
.cd-title-main{font-weight:500;}
.cd-title-sub{font-weight:300;color:var(--cd-text);}
.cd-title-sub:not(:empty){margin-left:.3em;}
.cd-badge{
display:inline-block;margin-top:16px;padding:6px 16px;border-radius:16px;
background:var(--cd-pill);border:1px solid var(--cd-pill-line);
font-size:13px;color:var(--cd-text-soft);
}
/* แถวป้ายกำกับใต้ชื่อรุ่น — เชื้อเพลิง · โมเดลปี · ระบบขับเคลื่อน · ระบบเกียร์ (เพิ่ม 20 ส.ค. 69)
ระยะห่างมาจาก gap ของแถว ไม่ใช่ margin ของป้ายแต่ละใบ ป้ายที่ตกลงบรรทัดที่สองจึงชิดกันพอดี
ป้ายที่แอดมินไม่ได้กรอกจะถูกลบออกทั้งใบด้วย JS (ดู initCarBadges ใน main.js)
ไม่ใช่ปล่อยเป็นป้ายเปล่า — ป้ายเปล่ากินที่แต่ไม่ให้ข้อมูลอะไร */
.cd-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;}
.cd-badges .cd-badge{margin-top:0;}
@media (max-width:520px){
.cd-badges{gap:6px;}
.cd-badges .cd-badge{padding:5px 13px;font-size:12px;}
}
.cd-price{
margin-top:16px;font-size:17px;font-weight:600;color:var(--cd-text);letter-spacing:.2px;
}
.cd-price{font-weight:700;}
.cd-price-note{margin-top:6px;font-size:12px;color:var(--cd-muted);}
/* ---------- แถวปุ่ม: ปุ่มหลัก 1 + ปุ่มรอง n (เดสก์ท็อปเรียงแถว / มือถือเรียงลง) ---------- */
.cd-actions{
display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px;
}
.cd-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 26px;border-radius:6px;border:1px solid transparent;
font-family:'Prompt';font-size:14px;font-weight:500;cursor:pointer;transition:.22s;
white-space:nowrap;
}
.cd-btn-1{background:var(--cd-accent);color:var(--cd-accent-ink);}
.cd-btn-1:hover{filter:brightness(1.12);}
.cd-btn-2{background:var(--cd-btn-2);color:var(--cd-btn-2-ink);border-color:var(--cd-pill-line);}
.cd-btn-2:hover{filter:brightness(1.1);border-color:var(--cd-muted);}
.cd-btn-line{background:#06C755;color:#fff;}
.cd-btn-line:hover{background:#05b34c;}
.cd-btn-ghost{
background:var(--cd-btn-2);color:var(--cd-btn-2-ink);border-color:var(--cd-pill-line);
min-height:44px;font-weight:400;
}
.cd-note{
margin-top:22px;text-align:center;font-size:13px;color:var(--cd-muted);line-height:1.7;
max-width:520px;margin-left:auto;margin-right:auto;
}
/* ==========================================================================
2) SPEC HIGHLIGHT — ตัวเลขเด่น 3 ตัว (ซ้าย) คู่กับรูปรถหน้าตรง (ขวา)
========================================================================== */
.cd-specs{padding:110px 0 100px;}
/* คอลัมน์ซ้าย auto = กว้างเท่าตัวเลขจริงเท่านั้น ไม่กินครึ่งจอเหมือนตอนใช้ 1fr
(เดิม 1fr ทำให้คอลัมน์ซ้ายกว้าง ~573px ทั้งที่ตัวเลขยาวแค่ ~320px ที่เหลือกลายเป็นช่องว่าง
บวกกับ gap อีก 56px รวมแล้วตัวเลขห่างจากรูปรถเกือบ 310px — เทียบกับหน้า Porsche จริงห่างแค่ ~65px)
จับคู่กับ justify-content:center เพื่อให้ทั้งบล็อก (ตัวเลข + รูป) อยู่กึ่งกลางหน้าเหมือนเว็บอ้างอิง */
.cd-specs-grid{
display:grid;grid-template-columns:auto minmax(0,520px);
gap:64px;align-items:center;justify-content:center;
}
.cd-stat{margin-bottom:44px;}
.cd-stat:last-child{margin-bottom:0;}
.cd-stat-num{
font-family:'Prompt',sans-serif;font-weight:300;
/* 52px = ขนาดที่ทำให้บรรทัดยาวสุด (4-cylinder / 2.3L) กว้าง ~318px เท่ากับบรรทัดยาวสุดของหน้า
Porsche จริง (290 kW / 394 PS = ~309px) — ใช้ขนาดเดียวกันทั้ง 3 บรรทัดเหมือนเว็บอ้างอิง
ก่อนหน้านี้บรรทัดเครื่องยนต์ถูกลดขนาดลงตัวเดียว ทำให้ 3 บรรทัดขนาดไม่เท่ากัน ดูไม่สมดุล */
font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-1px;color:var(--cd-text);
display:flex;align-items:baseline;flex-wrap:wrap;gap:2px;
}
.cd-stat-unit{font-size:.36em;font-weight:400;color:var(--cd-text);letter-spacing:0;}
.cd-stat-sep{font-size:.42em;font-weight:300;color:var(--cd-muted);margin:0 10px;}
/* บรรทัดเครื่องยนต์ใช้ขนาดเดียวกับอีก 2 บรรทัดแล้ว (ไม่ลดขนาดเฉพาะตัวอีกต่อไป)
คลาสนี้เหลือไว้จัดช่องไฟรอบเครื่องหมาย / เท่านั้น */
/* เว้นวรรครอบเครื่องหมาย / ของบรรทัดเครื่องยนต์ (บรรทัดอื่นมีหน่วยคั่นอยู่แล้วเลยไม่ต้อง) */
.cd-stat-num-text .cd-stat-sep{margin:0 .28em;}
/* รถไฟฟ้าล้วนไม่มีความจุเครื่องยนต์ -> JS ซ่อนทั้ง / และ L ให้เอง เหลือแค่ "Dual Motor" ลอยเดี่ยว */
.cd-stat-num [hidden]{display:none;}
.cd-stat-label{margin-top:10px;font-size:14px;color:var(--cd-muted);font-weight:300;}
/* กรอบภาพรถหน้าตรงใน Section Spec
overflow:hidden จำเป็นเพราะภาพข้างในถูกซูมให้ใหญ่เกินกรอบ (ดู --cd-spec-zoom) */
.cd-specs-img{aspect-ratio:4/3;border-radius:4px;overflow:hidden;}
.cd-specs-cta{margin-top:52px;}
/* ==========================================================================
3) SHOWCASE — ลายน้ำชื่อรุ่นตัวหนา + ภาพไลฟ์สไตล์เต็มความกว้าง
========================================================================== */
.cd-showcase{padding:0 0 110px;}
.cd-showcase-title{
font-family:'Bebas Neue',sans-serif;font-style:italic;
font-size:clamp(52px,8vw,104px);line-height:1;letter-spacing:2px;
text-align:center;color:var(--cd-text);margin-bottom:40px;
}
.cd-showcase-img{aspect-ratio:16/9;border-radius:6px;}
/* ---------- การครอปภาพอัตโนมัติ (ภาพจริงจากหลังบ้านทุกใบเป็นอัตราส่วน 1:1) ----------
แอดมินอัปโหลดภาพจัตุรัสใบเดียว ระบบครอปให้พอดีช่องเองโดยยึดกึ่งกลางภาพ ไม่ต้องครอปเองก่อนอัป
object-fit:cover = ขยายภาพให้เต็มช่องแล้วตัดส่วนเกินทิ้ง (ไม่บีบภาพให้ผิดสัดส่วน)
object-position:center = ตัดบน-ล่างเท่ากันทั้งสองด้าน ตัวรถที่อยู่กลางภาพจึงไม่หนีออกนอกเฟรม
สัดส่วนที่ครอปแล้วเสียเนื้อภาพ: Showcase 16:9 ตัด ~44% · ภาพประกอบ 1 (11:10) ตัด ~9% · ภาพประกอบ 2 (4:3) ตัด ~25% */
.cd-showcase-img > img,
.cd-story-img > img,
.cd-hero-car > img,
.cd-specs-img > img{
width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
/* ภาพเรนเดอร์ (Hero / Spec) วางรถไว้ค่อนไปทางบนของเฟรม จุดยึด 55-58% จึงตัดที่ว่างด้านบน
มากกว่าด้านล่าง ทำให้เงาใต้รถยังอยู่ครบและรถไม่ลอย */
.cd-hero-car > img{object-position:center 56%;}
/* ภาพเรนเดอร์มีขอบว่างรอบตัวรถเยอะ ถ้าวางตรง ๆ หน้ารถจะเล็กและลอยกลางกรอบ
contain = ไม่ครอป ไม่บิดสัดส่วน แล้วค่อยซูมด้วย transform ให้หน้ารถเต็มกรอบแบบหน้า Porsche
จุดหมุนตั้งที่ 50% / 54.5% = ตำแหน่งกึ่งกลางตัวรถจริงในไฟล์ (รถอยู่ค่อนไปทางล่างของเฟรมเล็กน้อย)
ค่า zoom ตั้งที่ HTML รายคัน เพราะรถแต่ละรุ่นเรนเดอร์มาชิดขอบไม่เท่ากัน
หมายเหตุ: ตอนโค้ดเว็บจริงจะครอปไฟล์ภาพมาให้พอดีตั้งแต่ต้น ดีกว่าซูมด้วย CSS
ทั้งคมกว่าและไม่ต้องโหลดพิกเซลส่วนที่ถูกตัดทิ้ง */
.cd-specs-img > img{
object-fit:contain;
transform:scale(var(--cd-spec-zoom,1));
transform-origin:50% 54.5%;
}
/* ภาพเรนเดอร์เป็น PNG พื้นโปร่งใส กรอบจึงไม่ต้องมีพื้นหลังของตัวเอง ปล่อยให้เห็นแถบไล่สีของ Hero */
.cd-hero-car{background:transparent;}
.cd-specs-img{background:transparent;}
.cd-showcase-cap{
margin-top:18px;text-align:center;font-size:13px;color:var(--cd-muted);
}
/* ==========================================================================
4) GALLERY — รูปหลัก + รูปย่อย (รองรับสเปกจริง 9:16 และ 1:1)
แก้ปัญหาเดิมที่รูปย่อยสูงไม่เท่ากันจนแถวดูรก: ตอนนี้ทุกรูปย่อยสูงเท่ากันหมด
ตัวรูปข้างในต่างหากที่ครอบตามอัตราส่วนจริง (ป้ายมุมขวาล่างบอกอัตราส่วน)
========================================================================== */
.cd-gallery{padding:0 0 110px;}
.cd-gal-head{
display:flex;justify-content:space-between;align-items:baseline;gap:16px;
flex-wrap:wrap;margin-bottom:24px;
}
.cd-h2{font-family:'Prompt';font-weight:400;font-size:clamp(22px,2.6vw,30px);color:var(--cd-text);letter-spacing:0;}
.cd-gal-main{border-radius:6px;aspect-ratio:16/9;margin-bottom:12px;}
.cd-gal-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.cd-gal-thumb{
position:relative;height:92px;border-radius:4px;overflow:hidden;cursor:pointer;
border:1px solid var(--cd-line);transition:.2s;
display:flex;align-items:center;justify-content:center;
}
.cd-gal-thumb.is-on{border-color:var(--cd-accent);}
.cd-gal-thumb.is-on{border-color:var(--ink);border-width:2px;}
.cd-gal-thumb .cd-gal-ratio{
position:absolute;bottom:5px;right:6px;font-family:monospace;font-size:9px;letter-spacing:1px;
color:var(--cd-muted);
}
/* ==========================================================================
5) ตารางสเปกเต็ม — 2 คอลัมน์บนเดสก์ท็อป (เดิมอยู่คอลัมน์เดียวจนฝั่งขวาว่างทั้งแถบ)
========================================================================== */
.cd-tech{padding:0 0 110px;}
.cd-tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;}
.cd-tech-row{
display:flex;justify-content:space-between;gap:20px;
padding:15px 2px;border-bottom:1px solid var(--cd-line);font-size:14px;
}
.cd-tech-row dt{color:var(--cd-muted);font-weight:300;}
.cd-tech-row dd{color:var(--cd-text);text-align:right;font-weight:400;}
.cd-tech-note{margin-top:22px;font-size:12px;color:var(--cd-muted);line-height:1.7;}
/* ==========================================================================
6) รถรุ่นใกล้เคียง
========================================================================== */
.cd-related{padding:0 0 110px;}
.cd-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cd-rel-card{
border:1px solid var(--cd-line);border-radius:6px;overflow:hidden;transition:.25s;
background:var(--cd-surface);display:flex;flex-direction:column;
}
.cd-rel-card:hover{border-color:var(--cd-accent);transform:translateY(-4px);}
.cd-rel-card .cd-rel-img{aspect-ratio:16/10;}
.cd-rel-body{padding:18px 20px 22px;}
.cd-rel-brand{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cd-muted);}
.cd-rel-name{font-size:18px;font-weight:400;color:var(--cd-text);margin:4px 0 8px;}
.cd-rel-price{font-size:14px;font-weight:700;color:var(--ink);}
/* ==========================================================================
7) แถบ CTA ติดขอบล่าง (มือถือ) — ปุ่มติดต่อไม่หายไปตอนเลื่อนอ่านสเปกยาวๆ
ไม่มีในภาพอ้างอิงของ Porsche แต่เพิ่มเพื่อไม่ให้เสียโอกาส lead
ถ้าไม่ต้องการลบทั้งบล็อก .cd-sticky ใน HTML ได้เลย
========================================================================== */
.cd-sticky{display:none;}
.cd-sticky-price{font-size:13px;font-weight:600;color:var(--cd-text);line-height:1.3;}
.cd-sticky-price small{display:block;font-size:10px;font-weight:400;color:var(--cd-muted);}
/* ==========================================================================
RESPONSIVE — จอจริงแคบ + โหมด demo Mobile ใช้กฎชุดเดียวกัน
========================================================================== */
@media (max-width:900px){
.cd-specs-grid{grid-template-columns:1fr;gap:36px;}
.cd-specs-grid .cd-stat{text-align:center;}
.cd-stat-num{justify-content:center;}
.cd-tech-grid{grid-template-columns:1fr;}
.cd-rel-grid{grid-template-columns:1fr;}
.cd-gal-thumbs{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
.cd-actions{flex-direction:column;align-items:stretch;}
.cd-btn{width:100%;}
.cd-specs{padding:70px 0 60px;}
.cd-hero{--cd-hero-drop:20px;}
.cd-hero-inner{padding-top:calc(30px + var(--cd-hero-drop));}
.cd-specs-cta{margin-top:34px;text-align:center;}
.cd-gal-thumbs{grid-template-columns:repeat(3,1fr);}
.cd-gal-thumb{height:74px;}
}
/* โหมด demo Mobile (กรอบจำลอง 390px) — บังคับด้วยคลาส ไม่ใช่ media query
เพราะกรอบแคบแต่หน้าต่างเบราว์เซอร์ยังกว้างอยู่ */
.mobile-mode .cd-specs-grid{grid-template-columns:1fr !important;gap:32px;}
.mobile-mode .cd-specs-grid .cd-stat{text-align:center;}
.mobile-mode .cd-stat-num{justify-content:center;}
/* โหมด demo Mobile: กรอบจำลองกว้าง 390px แต่ clamp() ด้านบนคิดจากความกว้าง "หน้าต่างเบราว์เซอร์" จริง
(ซึ่งยังกว้าง 1440px อยู่) ตัวเลขเลยออกมา 52px ใหญ่เกินกรอบจนบรรทัดเครื่องยนต์ตกบรรทัด
ต้องกำหนดขนาดตายตัวทับ ใช้ 30px = ขนาดเดียวกับที่มือถือจริงได้จาก clamp ค่าต่ำสุด
บรรทัดยาวสุดจะกว้าง ~183px พอดีกรอบ ไม่ตกบรรทัด */
.mobile-mode .cd-stat-num{font-size:30px;}
.mobile-mode .cd-stat{margin-bottom:30px;}
.mobile-mode .cd-stat-label{font-size:13px;margin-top:8px;}
.mobile-mode .cd-tech-grid{grid-template-columns:1fr !important;}
.mobile-mode .cd-rel-grid{grid-template-columns:1fr !important;}
.mobile-mode .cd-actions{flex-direction:column;align-items:stretch;}
.mobile-mode .cd-btn{width:100%;}
.mobile-mode .cd-hero{--cd-hero-drop:20px;}
/* ต้องเจาะจงถึง .frame-wrap.mobile-mode ให้ครบ 3 คลาส เพราะกฎ .frame-wrap.mobile-mode .container
(บรรทัด ~134) ตั้ง padding แบบย่อไว้ ซึ่งรีเซ็ต padding-top เป็น 0 และมีน้ำหนักมากกว่า
ถ้าเขียนแค่ .mobile-mode .cd-hero-inner จะแพ้ ระยะ drop หายทั้งดุ้น ลายน้ำโดนรถทับเหมือนเดิม */
.frame-wrap.mobile-mode .cd-hero-inner{padding-top:calc(26px + var(--cd-hero-drop));}
.mobile-mode .cd-hero-car{max-width:100%;}
.mobile-mode .cd-watermark{font-size:78px;top:14px;}
.mobile-mode .cd-title{font-size:30px;margin-top:20px;}
.mobile-mode .cd-specs{padding:64px 0 56px;}
.mobile-mode .cd-showcase{padding-bottom:64px;}
.mobile-mode .cd-showcase-title{font-size:52px;margin-bottom:24px;}
.mobile-mode .cd-gallery,
.mobile-mode .cd-tech,
.mobile-mode .cd-related{padding-bottom:64px;}
.mobile-mode .cd-gal-thumbs{grid-template-columns:repeat(3,1fr);}
.mobile-mode .cd-gal-thumb{height:70px;}
.mobile-mode .cd-specs-cta{margin-top:32px;text-align:center;}
.mobile-mode .cd-variants{width:100%;}
.mobile-mode .cd-variant{flex:1;}
/* แถบ CTA ล่าง — โผล่เฉพาะมือถือ (จอจริงแคบ หรือโหมด demo Mobile) */
@media (max-width:600px){
.cd-sticky{
display:flex;align-items:center;gap:12px;
position:fixed;left:0;right:0;bottom:0;z-index:120;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:var(--cd-bg);border-top:1px solid var(--cd-line);
box-shadow:0 -8px 24px rgba(0,0,0,.12);
}
.cd-sticky .cd-btn{flex:1;min-height:44px;padding:0 14px;font-size:13px;width:auto;}
}
.mobile-mode .cd-sticky{
display:flex;align-items:center;gap:10px;
position:absolute;left:0;right:0;bottom:0;z-index:120;
padding:10px 12px;
background:var(--cd-bg);border-top:1px solid var(--cd-line);
}
.mobile-mode .cd-sticky .cd-btn{flex:1;min-height:42px;padding:0 12px;font-size:13px;width:auto;}
/* ---------- ตัวช่วยเล็กๆ ของหน้ารายละเอียดรถ ---------- */
.cd-gal-hint{font-size:13px;color:var(--cd-muted);}
/* ---------- ปรับสมดุล hero / แกลเลอรี (รอบตรวจ 17 ส.ค. 69) ----------
1) ภาพรถใน hero ของจริงจะเป็น PNG พื้นหลังโปร่งใส ลายน้ำชื่อรุ่นต้องมองทะลุเห็นได้
กล่อง placeholder เดิมทึบจนบังลายน้ำหมด -> ทำให้โปร่งใสและใส่กรอบประบางๆ แทน
2) รูปหลักแกลเลอรีเต็มความกว้าง 1232px สูงเกินไปเมื่ออยู่ถัดจากภาพ showcase
จำกัดความกว้างและจัดกึ่งกลางแทน */
.cd-hero-car.ph-img{
background:transparent;
border:1px dashed var(--cd-line);
}
.cd-gal-main{max-width:1040px;margin-left:auto;margin-right:auto;}
.cd-gal-thumbs{max-width:1040px;margin-left:auto;margin-right:auto;}
/* ==========================================================================
SHOWCASE — บล็อกเล่าเรื่อง (พาดหัว + ย่อหน้า + ภาพเยื้องกัน)
--------------------------------------------------------------------------
อ้างอิงหน้า Model 718 Cayman ของ Porsche official ที่คุณเอิร์ธส่งมา (17 ส.ค. 69)
เดสก์ท็อป — 2 แถว:
แถว 1 = กริด 2 คอลัมน์ ซ้ายเป็นพาดหัว+ย่อหน้า ขวาเป็นภาพใหญ่ (align-items:start
ทำให้ภาพเริ่มที่ขอบบนเดียวกับพาดหัว ไม่ถูกดันลงมากลางแถว)
แถว 2 = ภาพที่สอง กว้าง 62% เยื้างเข้ามาจากขอบซ้าย 8% -> ไม่ตรงกับภาพแรก
เกิดจังหวะเยื้องแบบ editorial ตามภาพอ้างอิง
มือถือ — เรียงลงมา: พาดหัว -> ย่อหน้า -> ภาพ A ชิดซ้าย -> ภาพ B ชิดขวา
โดยภาพ B ถูกดึงขึ้นด้วย margin ติดลบให้ "เหลื่อมทับ" ภาพ A
(B อยู่หลัง A ใน DOM จึงทับด้านบนเองอัตโนมัติ ไม่ต้องใช้ z-index)
⚠️ บล็อกนี้อยู่ท้ายไฟล์ตามธรรมเนียมของไฟล์นี้ — กฎมือถือต้องมาหลังกฎเดสก์ท็อปเสมอ
========================================================================== */
.cd-story{max-width:var(--max);margin:clamp(56px,7vw,96px) auto 0;padding:0 24px;}
.cd-story-row1{
display:grid;
grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
column-gap:clamp(32px,7%,104px);
align-items:start;
}
.cd-story-title{
font-family:'Prompt',sans-serif;font-weight:500;
font-size:clamp(28px,3.2vw,46px);line-height:1.2;letter-spacing:-.5px;
color:var(--cd-text);margin:0 0 22px;
}
.cd-story-copy{
font-size:15px;line-height:1.85;font-weight:300;
color:var(--cd-text-soft);max-width:40ch;margin:0;
}
.cd-story-img{border-radius:14px;}
.cd-story-img-a{aspect-ratio:11/10;}
.cd-story-row2{margin-top:clamp(40px,6vw,80px);}
.cd-story-img-b{width:62%;margin-left:8%;aspect-ratio:4/3;}
/* ---------- มือถือจริง (จอแคบ) ---------- */
@media (max-width:900px){
.cd-story{padding:0 18px;}
.cd-story-row1{display:block;}
.cd-story-title{font-size:28px;line-height:1.25;margin-bottom:16px;}
.cd-story-copy{max-width:none;}
.cd-story-img-a{width:66%;margin-top:34px;aspect-ratio:4/3;}
.cd-story-row2{margin-top:-13%;display:flex;justify-content:flex-end;}
.cd-story-img-b{width:66%;margin-left:0;aspect-ratio:4/3;}
}
/* ---------- คู่แฝดสำหรับโหมด demo "Mobile" (กรอบจำลอง 390px) ---------- */
.mobile-mode .cd-story{padding:0 18px;}
.mobile-mode .cd-story-row1{display:block;}
.mobile-mode .cd-story-title{font-size:28px;line-height:1.25;margin-bottom:16px;}
.mobile-mode .cd-story-copy{max-width:none;}
.mobile-mode .cd-story-img-a{width:66%;margin-top:34px;aspect-ratio:4/3;}
.mobile-mode .cd-story-row2{margin-top:-13%;display:flex;justify-content:flex-end;}
.mobile-mode .cd-story-img-b{width:66%;margin-left:0;aspect-ratio:4/3;}
/* ==========================================================================
HIGHLIGHTS — คารูเซลการ์ดไฮไลต์ (หน้ารายละเอียดรถ)
--------------------------------------------------------------------------
อ้างอิงหน้า Model 718 Cayman ของ Porsche official (17 ส.ค. 69)
หัวข้อกึ่งกลาง -> ลูกศรซ้าย/ขวาชิดขวา -> แถวการ์ดเลื่อนแนวนอน -> จุดบอกตำแหน่ง
กลไกเลื่อน: scroll-snap ของเบราว์เซอร์ล้วนๆ (หลักเดียวกับคารูเซล Model Lineup หน้าแรก)
- การ์ด snap ชิดซ้าย (scroll-snap-align:start) แล้วเว้น padding ข้างไว้
-> การ์ดใบถัดไป "โผล่" ให้เห็นที่ขอบขวาเสมอ บอกใบ้ว่าเลื่อนต่อได้ ตามภาพอ้างอิง
- JS ทำแค่ ลูกศร / จุดบอกตำแหน่ง / ลากด้วยเมาส์ (ดู initHighlights() ใน main.js)
ภาพในการ์ด: .hl-card-img ใช้ background-size:cover — อัปโหลดไฟล์จัตุรัส 1:1 มาได้เลย
ระบบครอปให้พอดีกรอบเอง (เดสก์ท็อป 10:7 แนวนอน / มือถือ 5:7 แนวตั้ง)
========================================================================== */
.cd-highlights{padding:0 0 110px;}
.hl-title{
font-family:'Prompt',sans-serif;font-weight:400;letter-spacing:-.3px;text-align:center;
font-size:clamp(26px,3.4vw,44px);line-height:1.2;color:var(--cd-text);margin:0;
}
.hl-nav{
display:flex;justify-content:flex-end;gap:6px;
padding:0 10%;margin:26px 0 20px;
}
.hl-arrow{
width:40px;height:40px;flex-shrink:0;
border:none;background:none;cursor:pointer;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:20px;line-height:1;color:var(--cd-text);transition:.2s;
}
.hl-arrow:hover{background:var(--cd-surface-2);}
.hl-arrow:disabled{opacity:.25;cursor:default;background:none;}
.hl-track{
display:flex;gap:24px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
/* padding ข้าง = ระยะที่การ์ดใบแรกเริ่ม และเป็นตัวกำหนดว่าใบถัดไปจะโผล่มากี่ % */
padding:0 10% 6px;scroll-padding-inline:10%;
scrollbar-width:none;-ms-overflow-style:none;
cursor:grab;
}
.hl-track::-webkit-scrollbar{display:none;width:0;height:0;}
.hl-track.is-dragging{cursor:grabbing;scroll-snap-type:none;}
/* ระหว่างลาก ปิดการลากภาพ/เลือกข้อความ ไม่งั้นเบราว์เซอร์จะนึกว่ากำลังลากรูปไปวางที่อื่น */
.hl-track.is-dragging *{user-select:none;-webkit-user-drag:none;pointer-events:none;}
.hl-card{
position:relative;flex:0 0 57%;scroll-snap-align:start;
aspect-ratio:10/7;border-radius:16px;overflow:hidden;
background:var(--cd-surface);
}
/* ลำดับใน DOM = ลำดับการทับกัน ห้ามสลับ: ภาพ -> แถบไล่สีดำ -> ตัวหนังสือ */
.hl-card-img{
position:absolute;inset:0;border-radius:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* แถบไล่สีดำจางลงด้านบน = ให้ตัวหนังสือขาวอ่านออกไม่ว่าภาพจะสว่างแค่ไหน (ตามภาพอ้างอิง) */
.hl-card-shade{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,
rgba(0,0,0,0) 46%,
rgba(0,0,0,.22) 62%,
rgba(0,0,0,.74) 82%,
rgba(0,0,0,.94) 100%);
}
.hl-card-body{position:absolute;left:0;right:0;bottom:0;padding:0 30px 26px;}
.hl-card-title{
font-family:'Prompt',sans-serif;font-weight:500;letter-spacing:0;
font-size:clamp(20px,1.9vw,28px);line-height:1.25;color:#fff;margin:0 0 8px;
}
.hl-card-copy{
font-size:14px;line-height:1.65;font-weight:300;
color:rgba(255,255,255,.9);margin:0;
}
.hl-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;}
.hl-dot{
width:7px;height:7px;border-radius:50%;padding:0;border:none;cursor:pointer;
background:rgba(10,10,10,.24);transition:.25s;
}
.hl-dot:hover{background:rgba(10,10,10,.45);}
.hl-dot.is-active{background:var(--cd-text);width:26px;border-radius:4px;}
/* ---------- มือถือจริง (จอแคบ) — การ์ดเป็นแนวตั้ง ปัดนิ้วเอา ไม่มีลูกศร (ตามภาพอ้างอิง) ---------- */
@media (max-width:900px){
.cd-highlights{padding-bottom:64px;}
/* มือถือซ่อนลูกศร -> ไม่มี .hl-nav มาคั่นระหว่างหัวข้อกับการ์ดเหมือนเดสก์ท็อป
ต้องเว้นระยะเองตรงนี้ ไม่งั้นหัวข้อจะไปติดขอบบนการ์ดพอดี */
.hl-nav{display:none;}
.hl-track{gap:14px;padding:0 8% 6px;scroll-padding-inline:8%;margin-top:30px;}
.hl-card{flex:0 0 84%;aspect-ratio:5/7;border-radius:18px;}
.hl-card-body{padding:0 20px 20px;}
.hl-card-title{font-size:20px;}
.hl-card-copy{font-size:13.5px;line-height:1.6;}
.hl-card-shade{background:linear-gradient(180deg,
rgba(0,0,0,0) 34%,
rgba(0,0,0,.24) 52%,
rgba(0,0,0,.76) 76%,
rgba(0,0,0,.94) 100%);}
.hl-dots{margin-top:20px;}
}
/* ---------- คู่แฝดสำหรับโหมด demo "Mobile" (กรอบจำลอง 390px) ---------- */
.mobile-mode .cd-highlights{padding-bottom:64px;}
.mobile-mode .hl-nav{display:none;}
.mobile-mode .hl-track{gap:14px;padding:0 8% 6px;scroll-padding-inline:8%;margin-top:30px;}
.mobile-mode .hl-card{flex:0 0 84%;aspect-ratio:5/7;border-radius:18px;}
.mobile-mode .hl-card-body{padding:0 20px 20px;}
.mobile-mode .hl-card-title{font-size:20px;}
.mobile-mode .hl-card-copy{font-size:13.5px;line-height:1.6;}
.mobile-mode .hl-card-shade{background:linear-gradient(180deg,
rgba(0,0,0,0) 34%,
rgba(0,0,0,.24) 52%,
rgba(0,0,0,.76) 76%,
rgba(0,0,0,.94) 100%);}
.mobile-mode .hl-dots{margin-top:20px;}
/* ==========================================================================
FOOTER — เวอร์ชันเดสก์ท็อป v2 (17 ส.ค. 69)
--------------------------------------------------------------------------
ปัญหาเดิม: ทุกบล็อกเรียงลงมาเป็นแถวเดียวชิดซ้าย + .foot-cols เป็นกริด 3 ช่อง
แต่มีคอลัมน์จริงแค่ 2 -> ครึ่งขวาของ footer ว่างทั้งแถบ และ footer สูงเกินจำเป็น
วิธีแก้: จับ footer .container เป็นกริด 3 คอลัมน์เดียวกันทั้งบล็อก แล้ววาง
แต่ละส่วนลงช่องด้วย grid-area (ลำดับใน HTML ไม่ต้องแก้ -> ใช้ได้ทั้ง 11 หน้า)
แถว 1 : ปุ่มกลับขึ้นบน (กึ่งกลาง เต็มความกว้าง)
แถว 2 : ภูมิภาค/ภาษา (ซ้าย) | ไอคอนโซเชียล (ชิดขวา)
แถว 3 : ที่ตั้งและการติดต่อ | เกี่ยวกับ SPEEDY | ลิขสิทธิ์+ลิงก์ข้อกฎหมาย
แถว 4 : เส้นคั่น + โลโก้ปิดท้าย (กึ่งกลาง)
.foot-cols ใช้ display:contents เพื่อให้ .foot-col สองใบกลายเป็นลูกของกริดหลัก
จะได้เรียงคอลัมน์ตรงกับบล็อกอื่นทุกแถว
⚠️ ครอบ .frame-wrap:not(.mobile-mode) ไว้ เพราะโหมด demo "Mobile" รันบนจอกว้าง
ถ้าไม่กันไว้ กริดเดสก์ท็อปจะไปทับเลย์เอาต์มือถือจำลอง
========================================================================== */
@media (min-width:901px){
.frame-wrap:not(.mobile-mode) footer{padding:64px 0 36px;}
.frame-wrap:not(.mobile-mode) footer .container{
display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) minmax(0,1.35fr);
column-gap:64px;
row-gap:56px;
align-items:start;
}
/* ล้าง margin เดิมทิ้ง ระยะห่างแนวตั้งให้ row-gap คุมทีเดียว จะได้ไม่บวกซ้อนกัน */
.frame-wrap:not(.mobile-mode) .foot-top,
.frame-wrap:not(.mobile-mode) .foot-region,
.frame-wrap:not(.mobile-mode) .foot-cols,
.frame-wrap:not(.mobile-mode) .foot-social,
.frame-wrap:not(.mobile-mode) .foot-legal{margin-bottom:0;}
.frame-wrap:not(.mobile-mode) .foot-top{grid-area:1/1/2/-1;justify-self:center;}
.frame-wrap:not(.mobile-mode) .foot-region{grid-area:2/1/3/3;}
.frame-wrap:not(.mobile-mode) .foot-social{
grid-area:2/3/3/4;justify-self:end;align-self:end;
gap:14px;
}
/* ไอคอนโซเชียลเดิมเป็นตัวอักษรเปล่าๆ ลอยอยู่ ดูไม่จบ — ใส่วงกลมเส้นบางให้เป็นชุดเดียวกัน */
.frame-wrap:not(.mobile-mode) .foot-ico{
width:38px;height:38px;border:1px solid var(--dark-line);border-radius:50%;
}
.frame-wrap:not(.mobile-mode) .foot-ico:hover{border-color:var(--red);color:var(--red);}
.frame-wrap:not(.mobile-mode) .foot-cols{display:contents;}
.frame-wrap:not(.mobile-mode) .foot-cols .foot-col:nth-child(1){grid-area:3/1/4/2;}
.frame-wrap:not(.mobile-mode) .foot-cols .foot-col:nth-child(2){grid-area:3/2/4/3;}
.frame-wrap:not(.mobile-mode) .foot-legal{grid-area:3/3/4/4;}
.frame-wrap:not(.mobile-mode) .foot-note{max-width:none;}
.frame-wrap:not(.mobile-mode) .foot-brand{
grid-area:4/1/5/-1;
border-top:1px solid var(--dark-line);padding-top:36px;
}
.frame-wrap:not(.mobile-mode) .foot-brand img{height:56px;display:block;}
}
/* จอกว้างระดับกลาง (901–1180px) คอลัมน์ซ้ายจะแคบจนที่อยู่ตัดบรรทัดถี่ — ลด gap ลงหน่อย */
@media (min-width:901px) and (max-width:1180px){
.frame-wrap:not(.mobile-mode) footer .container{column-gap:44px;row-gap:48px;}
}
/* ==========================================================================
FOOTER — เวอร์ชันมือถือ v2 (17 ส.ค. 69)
--------------------------------------------------------------------------
⚠️ ต้องอยู่ท้ายไฟล์ "หลัง" บล็อกเดสก์ท็อป v2 เสมอ — ชนะด้วยลำดับ
บทเรียนจากรอบที่แล้ว: คลาส mobile-mode อยู่ที่ #frameWrap (.frame-wrap)
ไม่ใช่ที่ (ดู main.js: wrap.classList.toggle('mobile-mode'))
เขียนกันชนผิดเป็น body:not(.mobile-mode) กริดเดสก์ท็อปเลยเล็ดลอดเข้ากรอบมือถือจำลอง
-> ตอนนี้ใช้ .frame-wrap:not(.mobile-mode) แล้ว และบล็อกนี้ล้าง display:grid ทิ้งอีกชั้น
โครงมือถือ = "แนวลึก" คอลัมน์เดียวชิดซ้าย (อ้างอิงภาพ footer Porsche ที่คุณเอิร์ธส่งมา)
กลับขึ้นบน (กึ่งกลาง) -> ภูมิภาค/ภาษา -> ที่ตั้งและการติดต่อ -> เกี่ยวกับ SPEEDY
-> ข้อกำหนดและนโยบาย -> ไอคอนโซเชียล (แถวนอน) -> เส้นคั่น + โลโก้
ลำดับใน HTML คือ ...โซเชียล -> ข้อกำหนด... จึงสลับด้วย order ของ flex (ไม่ต้องแก้ HTML 11 หน้า)
========================================================================== */
@media (max-width:900px){
footer{padding:44px 0 32px;}
/* flex column + gap: คุมระยะห่างจุดเดียว ไม่ต้องไล่ margin ทีละบล็อก
และล้างกริดเดสก์ท็อปทิ้งไปในตัว */
footer .container{display:flex;flex-direction:column;gap:34px;}
.foot-top{order:1;align-self:center;margin:0 0 6px;}
.foot-region{order:2;margin-bottom:0;}
.foot-cols{order:3;display:block !important;margin-bottom:0;}
.foot-legal{order:4;margin-bottom:0;}
.foot-social{order:5;margin-bottom:0;}
.foot-brand{order:6;}
/* ธง + ชื่อภาษา + ปุ่มเปลี่ยน ต้องอยู่บรรทัดเดียวกัน — เดิม flex-wrap ทำให้ "เปลี่ยน" ตกบรรทัด */
.foot-region-row{flex-wrap:nowrap;gap:10px;}
.foot-region-name,.foot-change{font-size:14px;white-space:nowrap;}
.foot-col{margin-bottom:30px;}
.foot-col:last-child{margin-bottom:0;}
.foot-col ul li{margin-bottom:12px;}
/* ไอคอนโซเชียล: แถวนอนชิดซ้าย ขนาดแตะได้สบาย (36px) */
.foot-social{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:flex-start;}
.foot-ico{width:36px;height:36px;border:1px solid var(--dark-line);border-radius:50%;}
.foot-note{max-width:none;}
.foot-brand{border-top:1px solid var(--dark-line);padding-top:28px;font-size:28px;letter-spacing:6px;}
.foot-brand img{height:48px;}
}
/* คู่แฝดของบล็อกด้านบน สำหรับโหมด demo "Mobile" (รันบนจอกว้าง media query จึงไม่ทำงาน) */
.mobile-mode footer{padding:44px 0 32px;}
.mobile-mode footer .container{display:flex !important;flex-direction:column;gap:34px;}
.mobile-mode .foot-top{order:1;align-self:center;margin:0 0 6px;}
.mobile-mode .foot-region{order:2;margin-bottom:0;}
.mobile-mode .foot-cols{order:3;display:block !important;margin-bottom:0;}
.mobile-mode .foot-legal{order:4;margin-bottom:0;}
.mobile-mode .foot-social{order:5;margin-bottom:0;
display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:flex-start;}
.mobile-mode .foot-brand{order:6;}
.mobile-mode .foot-region-row{flex-wrap:nowrap;gap:10px;}
.mobile-mode .foot-region-name,.mobile-mode .foot-change{font-size:14px;white-space:nowrap;}
.mobile-mode .foot-col{margin-bottom:30px;}
.mobile-mode .foot-col:last-child{margin-bottom:0;}
.mobile-mode .foot-col ul li{margin-bottom:12px;}
.mobile-mode .foot-ico{width:36px;height:36px;border:1px solid var(--dark-line);border-radius:50%;}
.mobile-mode .foot-note{max-width:none;}
.mobile-mode .foot-brand{border-top:1px solid var(--dark-line);padding-top:28px;
font-size:28px;letter-spacing:6px;}
.mobile-mode .foot-brand img{height:48px;}
/* ==========================================================================
SECTION COLOUR — เลือกดูสีรถ (หน้ารายละเอียดรถ)
--------------------------------------------------------------------------
โครง: หัวข้อ -> ภาพรถใหญ่กลางจอ -> ชื่อสี -> แถววงกลมสี -> ปุ่ม LINE
กดวงกลมสีแล้วภาพเปลี่ยนแบบเฟด ไม่ใช่กระพริบเปลี่ยนทันที (ดู initColourPicker ใน main.js)
========================================================================== */
.cd-colour{padding:0 0 110px;}
.cd-colour-title{
font-family:'Prompt',sans-serif;font-weight:400;letter-spacing:-.3px;text-align:center;
font-size:clamp(26px,3.4vw,44px);line-height:1.2;color:var(--cd-text);margin:0 0 40px;
}
/* ภาพรถ — กว้างเท่ากับรูปหลักแกลเลอรี/showcase เพื่อให้ทั้งหน้าอยู่ในกริดเดียวกัน
transition ที่ background ทำให้ตอนสลับสีในมอคอัพเห็นเป็นการไล่สีต่อเนื่อง
ของจริงจะเป็น ![]()
ซ้อนกัน 2 ชั้นแล้วเฟด (คลาส .is-fading ด้านล่าง) */
/* ---------- เวทีหมุนรอบคัน 360° ----------
ไฟล์เรนเดอร์ต้นฉบับ 1450x1000 แต่ตัวรถกินพื้นที่จริงแค่ y 225-880 (เหลือที่ว่างบน 22% ล่าง 12%)
ตรวจครบทั้ง 12 มุมแล้วขอบเขตนี้แทบไม่ขยับ จึงตัดที่ว่างส่วนเกินออกได้อย่างปลอดภัย
ผลคือรถใหญ่ขึ้นเห็นสีชัดขึ้น และเวทีเตี้ยลงจาก 717px เหลือ 574px วงกลมสีขึ้นมาอยู่ในจอเดียวกัน
touch-action:none จำเป็นมาก ไม่งั้นบนมือถือการลากจะถูกเบราว์เซอร์แย่งไปเลื่อนหน้าแทนที่จะหมุนรถ */
.cd-spin{
position:relative;max-width:1040px;margin:0 auto;
aspect-ratio:1450/800;background:var(--cd-surface);border-radius:8px;overflow:hidden;
cursor:grab;touch-action:none;user-select:none;
}
.cd-spin.is-dragging{cursor:grabbing;}
/* cover + จุดยึด 55% = ตัดที่ว่างด้านบนมากกว่าด้านล่างเล็กน้อย ให้เงาใต้รถยังอยู่ครบ */
.cd-spin img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;pointer-events:none;}
/* ป้าย 360° ใต้ภาพรถ (แทนป้ายดำที่เคยลอยทับบนรถ — แก้ 25 ส.ค. 69)
หน้าที่: ให้ลูกค้ารู้ตั้งแต่แรกเห็นว่ารถคันนี้หมุนดูได้ ไม่ใช่ภาพนิ่งธรรมดา
ไอคอนวาดด้วย SVG ในหน้าเลย ไม่ได้โหลดไฟล์ไอคอนเพิ่ม = 0 รีเควสต์ ไม่กระทบความเร็วหน้า */
.cd-spin-badge{
display:flex;align-items:center;justify-content:center;
margin-top:18px;color:var(--cd-text);
}
.cd-spin-badge[hidden]{display:none;}
/* core = ไอคอน + เลข 360° เท่านั้น เป็นชิ้นเดียวที่นับความกว้าง จึงอยู่กึ่งกลางจอเป๊ะเสมอ
⚠️ คำอธิบายต้องลอย (absolute) เท่านั้น ห้ามเอามาเรียงในแถวเดียวกัน
ไม่งั้นความกว้างของคำอธิบายจะดันเลข 360° เบี้ยวไปทางซ้าย (แก้ 25 ส.ค. 69) */
.cd-spin-badge-core{position:relative;display:flex;align-items:center;gap:10px;}
.cd-spin-badge-ic{width:26px;height:26px;flex:none;}
.cd-spin-badge-num{font-size:26px;font-weight:700;line-height:1;letter-spacing:.5px;}
.cd-spin-badge-tip{
position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
white-space:nowrap;font-size:13px;color:var(--cd-muted);transition:opacity .3s ease;
}
/* ไอคอนขยับเป็นจังหวะ = สายตาจับได้ว่าลากได้ โดยไม่ต้องมีป้ายไปบังตัวรถ
is-used ติดตอนลากครั้งแรก แล้วหยุดถาวร + เก็บคำอธิบาย เหลือแค่ "360°" ไว้เป็นป้ายเฉยๆ */
.cd-spin-badge:not(.is-used) .cd-spin-badge-ic{animation:cdSpinNudge 3s ease-in-out infinite;}
.cd-spin-badge.is-used .cd-spin-badge-tip{opacity:0;}
@keyframes cdSpinNudge{
0%,58%,100%{transform:rotate(0);}
74%{transform:rotate(-40deg);}
90%{transform:rotate(0);}
}
/* เครื่องที่ผู้ใช้ตั้งค่าลดการเคลื่อนไหวไว้ (เมาง่าย/ไมเกรน) ต้องไม่ขยับ */
@media (prefers-reduced-motion:reduce){
.cd-spin-badge-ic{animation:none !important;}
}
/* แถบโหลด — 1 สีมี 12 ภาพ ถ้าไม่บอกอะไรเลยผู้ใช้จะนึกว่าเว็บค้าง */
.cd-spin-load{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;background:var(--cd-surface);transition:opacity .3s ease;
}
.cd-spin-load.is-done{opacity:0;pointer-events:none;}
.cd-spin-load span{font-size:13px;color:var(--cd-muted);}
.cd-spin-bar{width:180px;height:3px;background:var(--cd-surface-2);border-radius:2px;overflow:hidden;}
.cd-spin-bar i{display:block;height:100%;width:0;background:var(--cd-text);transition:width .15s linear;}
/* ขีดบอกตำแหน่งการหมุน */
/* ขีดบอกตำแหน่ง — จำนวนขีด = จำนวนมุมของสีนั้น รถบางคันอาจมี 8 มุม บางคัน 24 มุม
flex-wrap + ขีดยืดหดได้ ทำให้มุมเยอะแค่ไหนก็ไม่ล้นขอบจอ (จำกัดความกว้างแถวไว้ที่ 420px) */
.cd-spin-ticks{
display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:14px;
max-width:min(420px,92%);margin-left:auto;margin-right:auto;
}
.cd-spin-tick{
flex:0 1 16px;min-width:5px;height:2px;background:var(--cd-line);
border-radius:1px;transition:background .15s;
}
.cd-spin-tick.is-on{background:var(--cd-text);}
/* คำอธิบายใต้ชื่อสี เช่น "หลังคาดำทูโทน" */
.cd-colour-sub{text-align:center;margin-top:4px;font-size:13px;color:var(--cd-muted);min-height:1.4em;}
.cd-colour-img.is-fading{opacity:.35;}
.cd-colour-name{
text-align:center;margin-top:24px;
font-size:17px;font-weight:400;color:var(--cd-text);letter-spacing:.2px;
min-height:1.4em; /* กันหน้ากระตุกตอนสลับไปสีที่ชื่อสั้นกว่าจนเหลือบรรทัดว่าง */
}
/* แถววงกลมสี */
.cd-colour-swatches{
display:flex;justify-content:center;align-items:center;
gap:18px;flex-wrap:wrap;margin-top:20px;
}
.cd-swatch{
width:38px;height:38px;border-radius:50%;padding:0;cursor:pointer;
background:var(--sw);
/* ขอบบางๆ จำเป็นสำหรับสีขาว/เงิน ไม่งั้นวงกลมจะจมหายไปกับพื้นหลังขาวของหน้า */
border:1px solid rgba(0,0,0,.18);
position:relative;transition:transform .2s ease;
}
/* สีทูโทน: ครึ่งบนเป็นสีหลังคา ครึ่งล่างเป็นสีตัวถัง — ลูกค้าเห็นตั้งแต่ยังไม่กดว่าคันนี้หลังคาคนละสี */
.cd-swatch.two-tone{background:linear-gradient(180deg,var(--sw2) 0 42%, var(--sw) 42% 100%);}
.cd-swatch:hover{transform:scale(1.08);}
/* วงแหวนรอบสีที่เลือกอยู่ — ใช้วงแหวนแทนการเปลี่ยนสีวงกลม เพราะวงกลมคือตัวสีจริง แตะไม่ได้ */
.cd-swatch.is-on::after{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:1.5px solid var(--cd-text);
}
.cd-colour-cta{display:flex;justify-content:center;margin-top:36px;}
/* ---------- มือถือจริง (จอแคบ) ---------- */
@media (max-width:600px){
.cd-colour{padding-bottom:64px;}
.cd-spin-ticks{margin-top:12px;gap:4px;}
.cd-spin-badge{margin-top:14px;}
.cd-spin-badge-core{gap:8px;}
.cd-spin-badge-ic{width:21px;height:21px;}
.cd-spin-badge-num{font-size:21px;}
/* จอแคบ: ที่ว่างด้านขวาไม่พอ (เหลือแค่ ~4px จากขอบจอ 360px) ย้ายคำอธิบายลงมาไว้ใต้เลข 360°
ยังลอยอยู่เหมือนเดิม จึงไม่ไปดันให้ 360° เบี้ยว · padding-bottom กันไม่ให้ทับแถบขีดข้างล่าง */
.cd-spin-badge{padding-bottom:20px;}
.cd-spin-badge-tip{font-size:12px;left:50%;top:calc(100% + 7px);transform:translateX(-50%);}
.cd-spin-tick{width:11px;}
.cd-colour-title{margin-bottom:24px;}
.cd-colour-swatches{gap:14px;}
.cd-swatch{width:34px;height:34px;}
.cd-colour-cta .cd-btn{width:100%;}
}
/* ---------- คู่แฝดสำหรับโหมด demo "Mobile" (กรอบจำลอง 390px) ---------- */
.mobile-mode .cd-colour{padding-bottom:64px;}
.mobile-mode .cd-colour-title{font-size:26px;margin-bottom:24px;}
.mobile-mode .cd-colour-name{font-size:15px;margin-top:18px;}
.mobile-mode .cd-spin-ticks{margin-top:12px;gap:4px;}
.mobile-mode .cd-spin-badge{margin-top:14px;}
.mobile-mode .cd-spin-badge-core{gap:8px;}
.mobile-mode .cd-spin-badge-ic{width:21px;height:21px;}
.mobile-mode .cd-spin-badge-num{font-size:21px;}
.mobile-mode .cd-spin-badge{padding-bottom:20px;}
.mobile-mode .cd-spin-badge-tip{font-size:12px;left:50%;top:calc(100% + 7px);transform:translateX(-50%);}
.mobile-mode .cd-spin-tick{width:11px;}
.mobile-mode .cd-colour-swatches{gap:14px;}
.mobile-mode .cd-swatch{width:34px;height:34px;}
.mobile-mode .cd-colour-cta{margin-top:28px;}
.mobile-mode .cd-colour-cta .cd-btn{width:100%;}
/* ---------- ภาพจริงในเมนู 3 ขีด และการ์ดรถหน้ารายการ ----------
ทั้งสองจุดใช้ภาพชุดเดียวกับหน้ารายละเอียดรถ ไม่มีช่องอัปโหลดแยก
· เมนู 3 ขีด -> ใช้ภาพเรนเดอร์ตัวเดียวกับ Section Hero
· การ์ดหน้ารายการ -> ใช้ภาพปกตัวเดียวกับ Section Showcase
จุดยึด 55% เพราะภาพเรนเดอร์วางรถค่อนไปทางบนของเฟรม ตัดที่ว่างด้านบนมากกว่าด้านล่าง */
.car-card .ph-img > img{
width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;
}
/* ---------- ภาพเรนเดอร์ในการ์ดรถของเมนู 3 ขีด (ใช้ไฟล์เดียวกับ Section Hero เช่น .../10.png) ----------
โจทย์: กรอบภาพในเมนูเป็นแถบเตี้ยมาก (3:1) แต่ไฟล์เรนเดอร์เป็นภาพจัตุรัสกว้าง (~1.44:1) ที่มี "ที่ว่าง"
รอบตัวรถเยอะ (ตัวรถกินความสูงแค่ ~57% ของภาพ) — ถ้าใช้ object-fit:cover ตรงๆ จะโดนตัดหลังคา/ล้อ
และถ้าใช้ contain เฉยๆ รถจะเล็กจิ๋วอยู่กลางแถบ
วิธีที่ใช้: contain (เห็นตัวรถครบทั้งคัน ไม่มีการตัด) แล้วขยายด้วย scale เพื่อ "ตัดที่ว่างบน-ล่างทิ้ง"
ผลลัพธ์: ตัวรถสูงราว 90% ของกรอบ วางกลางแถบพอดี — สัดส่วนเดียวกันทั้งเดสก์ท็อปและมือถือ
เพราะคิดเป็นสัดส่วนของกรอบล้วนๆ ไม่ได้ผูกกับความกว้างจอ (.ph-img มี overflow:hidden ตัดส่วนเกินให้อยู่แล้ว) */
.mega-car-img > img{
width:100%;height:100%;object-fit:contain;display:block;
/* 1.5 = ค่าที่วัดจากไฟล์เรนเดอร์จริง (10.png ขนาด ~1440x1000 ตัวรถกินความสูง ~57% ของภาพ)
-> ตัวรถสูงราว 86% ของกรอบ เหลือขอบบน-ล่างข้างละ ~7% และเงาใต้ล้อยังไม่โดนตัด
ถ้าอนาคตเปลี่ยนสัดส่วนไฟล์เรนเดอร์ ให้ปรับตัวเลขนี้จุดเดียว มีผลทั้งเดสก์ท็อปและมือถือ */
transform:scale(1.5);
}
/* ภาพเรนเดอร์เป็น PNG โปร่งใส ปล่อยให้เห็นพื้นเมนูด้านหลัง ไม่ต้องมีพื้นของตัวเอง */
.mega-car-img:has(> img){background:transparent;}
/* ช่องที่ยังไม่มีข้อมูลรถ — กดไม่ได้ และจางลงให้รู้ว่ายังว่าง */
.mega-car-item.is-empty{opacity:.45;pointer-events:none;}
/* ==========================================================================
MODEL SERIES CARD (.ms-*) — หน้ารวมรุ่นรถของแบรนด์ (03-brand-models)
รีดีไซน์ 24 ส.ค. 69 ตามภาพอ้างอิง Porsche "Model overview" ที่คุณเอิร์ธส่งมา
--------------------------------------------------------------------------
สิ่งที่ตัดออกตามที่กากบาทไว้ในภาพอ้างอิง (อย่าเผลอเพิ่มกลับมา):
✗ แถบฟิลเตอร์ซ้าย (Model series / Body Design / Seats / Drive / Fuel type / Reset Filter)
✗ กล่อง "Do you already have a configuration? / Load saved configuration"
✗ หัวข้อคั่นกลุ่ม "xxx Model variants"
✗ ราคา
✗ ลิงก์ "Technical data and standard equipment"
✗ ปุ่ม "Configure" และ checkbox "Compare"
เหลือไว้: ภาพรถลอยเหนือการ์ด · ชื่อรุ่น · ป้ายสเปกสั้น · ตัวเลขสเปก 3 บรรทัด · ปุ่มเดียว
========================================================================== */
/* หน้านี้ให้ hero กับโซนการ์ดใช้พื้นเทาโทนเดียวกันต่อเนื่องกันไปเลย (ตามภาพอ้างอิง)
ไม่งั้น hero จะไล่สีจบที่ขาวแล้วชนขอบเทาของโซนการ์ดเป็นเส้นแบ่งแข็งๆ กลางหน้า */
/* padding-top เพิ่มจาก 64 -> 76 ชดเชยที่ตัด breadcrumb ออก ไม่งั้น H1 จะขึ้นไปชิดแถบ header เกินไป */
.page-hero.ms-page-hero{background:#f2f2f2;border-bottom:0;padding:76px 0 26px;}
.mobile-mode .page-hero.ms-page-hero{padding:44px 0 20px;}
.ms-section{background:#f2f2f2;border-bottom:1px solid var(--line);padding-top:56px;}
.ms-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:56px 28px; /* gap แถวเผื่อที่ให้ภาพรถของแถวถัดไปลอยขึ้นมาทับ */
}
/* ==== กติกาแอนิเมชัน (สรุปจากบรีฟคุณเอิร์ธ 24 ส.ค. 69) ====
· Trigger : hover ที่ "ตัวการ์ดทั้งใบ" จุดไหนก็ได้ -> ทุกเอฟเฟกต์เล่นพร้อมกัน
· พื้นการ์ด : ขาว #fff -> เทาอ่อน #f4f4f5
· ภาพรถ : ซูมขึ้นเล็กน้อย ~4% โดยยังอยู่กึ่งกลางเดิม (ไม่ขยับตำแหน่ง)
· ยกการ์ด : เลื่อนขึ้น 8px พร้อมเงาเข้มขึ้นชัดเจน (เพิ่มรอบแก้ 2 — ของเดิมยกแล้วแทบไม่รู้สึก)
· Easing : .35s ease-in-out ทุกอย่าง ให้ดูลื่นและพรีเมียม
· Cursor : เป็น pointer ทั้งใบ เพราะทั้งใบคือพื้นที่กดได้
⚠️ ห้ามใส่ transform ที่ .ms-card เด็ดขาด — มันจะกลายเป็น stacking context
แล้ว mix-blend-mode ของภาพรถจะ blend กับ "ข้างในการ์ด" ที่ใสเปล่าๆ พื้นขาวของไฟล์เรนเดอร์จะโผล่
เป็นสี่เหลี่ยมขาวทันที · การยกการ์ดจึงต้องยก .ms-card-body กับ .ms-card-media แยกกันด้วยค่าเท่ากัน */
.ms-card{position:relative;display:flex;flex-direction:column;padding-top:118px;cursor:pointer;}
/* ภาพรถ — ลอยคร่อมขอบบนการ์ด ครึ่งบนอยู่บนพื้นเทาของ section ครึ่งล่างทับบนการ์ดขาว
mix-blend-mode:multiply คือหัวใจของทริกนี้: ไฟล์เรนเดอร์ของเราเป็น PNG "พื้นขาว" ไม่ใช่พื้นโปร่งใส
ถ้าวางตรงๆ จะเห็นเป็นสี่เหลี่ยมขาวบนพื้นเทา · multiply ทำให้พื้นขาวกลืนหายไปกับพื้นหลังทุกโทน
และยังคงเงาใต้ล้อไว้ครบ — ใช้ได้ทั้งกับไฟล์พื้นขาวและไฟล์โปร่งใสในอนาคต ไม่ต้องแก้อะไร */
.ms-card-media{
position:absolute;top:0;left:0;right:0;height:190px;z-index:2;
display:flex;align-items:center;justify-content:center;pointer-events:none;
/* ⚠️ mix-blend-mode ต้องอยู่ที่กล่องนี้ ห้ามย้ายไปใส่ที่ ![]()
ข้างใน
เพราะกล่องนี้เป็น stacking context อยู่แล้ว (position:absolute + z-index) ถ้าใส่ที่ img
ตัว img จะไป blend กับ "ข้างในกล่องนี้" ซึ่งใสเปล่าๆ ผลคือพื้นขาวไม่หาย เห็นเป็นสี่เหลี่ยมขาวบนพื้นเทา */
mix-blend-mode:multiply;
transition:transform .35s ease-in-out;
}
/* ยกขึ้นเท่ากับตัวการ์ดเป๊ะ ไม่งั้นระยะที่ภาพรถซ้อนทับขอบบนการ์ดจะเพี้ยนตอน hover */
.ms-card:hover .ms-card-media{transform:translateY(-8px);}
.ms-card-media img{
width:100%;height:100%;object-fit:contain;display:block;
/* --ms-zoom = สเกลพื้นฐาน ตั้งไว้ 1.28 เพราะไฟล์เรนเดอร์มีที่ว่างรอบตัวรถเยอะ
(ตัวรถกินความสูงราว 57% ของภาพ) ต้องขยายตัดที่ว่างทิ้งก่อนถึงจะเต็มกรอบ
ตอน hover คูณเพิ่มอีก 4% -> ภาพซูมขึ้นนิดเดียวโดยจุดกึ่งกลางไม่ขยับ
ถ้าอนาคตเปลี่ยนไฟล์เรนเดอร์ ให้แก้ --ms-zoom จุดเดียว ค่าซูมตอน hover ปรับตามเอง */
--ms-zoom:1.28;
transform:scale(var(--ms-zoom));
transform-origin:center center;
transition:transform .35s ease-in-out;
}
.ms-card:hover .ms-card-media img{transform:scale(calc(var(--ms-zoom) * 1.04));}
.ms-card-body{
background:#fff;border-radius:6px;
padding:96px 26px 26px; /* padding บน = ที่ว่างให้ครึ่งล่างของภาพรถทับลงมา */
display:flex;flex-direction:column;flex:1;
/* เงาตอนพัก — จงใจให้บางมาก เพื่อให้ "ระยะห่าง" ระหว่างสถานะพักกับสถานะ hover ชัด
ถ้าตอนพักมีเงาหนาอยู่แล้ว เงาตอน hover จะดูไม่ต่างเลย */
box-shadow:0 1px 2px rgba(10,10,10,.05);
transition:background-color .35s ease-in-out,
box-shadow .35s ease-in-out,
transform .35s ease-in-out;
}
/* hover: ยก 8px + เงา 2 ชั้น
ชั้นบน = เงาฟุ้งกว้างระยะไกล ให้ความรู้สึก "ลอย"
ชั้นล่าง = เงาคมใกล้ตัวการ์ด ช่วยตรึงขอบการ์ดไม่ให้ดูเบลอลอยไร้น้ำหนัก
ทั้งคู่ใช้ระยะ Y เป็นบวกและ spread ติดลบ เพื่อดันเงาลงล่าง ไม่ให้ฟุ้งขึ้นไปทับพื้นที่ภาพรถด้านบน */
.ms-card:hover .ms-card-body{
background:#f4f4f5;
transform:translateY(-8px);
box-shadow:0 22px 45px -14px rgba(10,10,10,.30),
0 8px 16px -8px rgba(10,10,10,.18);
}
.ms-card-title{font-size:24px;font-weight:400;letter-spacing:.2px;margin-bottom:14px;}
/* ป้ายสเปกสั้น — แถวชิปเทาอ่อนแบบภาพอ้างอิง */
.ms-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px;}
.ms-chip{
font-size:11px;font-weight:400;letter-spacing:.2px;line-height:1;
padding:7px 11px;border-radius:14px;background:var(--surface-2);color:var(--ink-soft);
white-space:nowrap;
}
.ms-chip-strong{background:var(--ink);color:#fff;}
/* ชิปที่ยังรอทีมงานยืนยันข้อมูลจริง — จางลงให้แยกออกจากชิปที่มีข้อมูลแล้ว */
.ms-chip.is-todo{opacity:.55;}
/* ตัวเลขสเปก 3 บรรทัด — ค่าเดียวกับ Section Spec ของ 04-car-detail.html */
.ms-stats{display:flex;flex-direction:column;gap:18px;margin-bottom:30px;}
.ms-stat-num{
font-size:19px;font-weight:400;color:var(--ink);line-height:1.25;
display:flex;align-items:baseline;flex-wrap:wrap;
}
/* หน่วยเกาะติดตัวเลขเลย (102HP ไม่ใช่ 102 HP) — ระยะห่างมีเฉพาะรอบขีดคั่นเท่านั้น เหมือนหน้ารายละเอียดรถ */
.ms-stat-unit{font-size:14px;margin-left:2px;}
.ms-stat-sep{color:var(--muted);margin:0 7px;}
.ms-stat-label{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.2px;}
/* ปุ่มเดียวตามภาพอ้างอิง — พื้นดำเต็มความกว้าง ดันไปชิดล่างเสมอเพื่อให้ทุกการ์ดจบที่ระดับเดียวกัน */
.ms-cta{
margin-top:auto;display:block;text-align:center;cursor:pointer;
background:var(--ink);color:#fff;border-radius:3px;
padding:14px 20px;font-size:14px;font-weight:400;letter-spacing:.2px;
transition:background-color .35s ease-in-out;
}
/* แผ่นใสคลุมทั้งการ์ด (stretched link) — กดตรงไหนของการ์ดก็เข้าหน้ารายละเอียดได้
สอดคล้องกับ cursor:pointer ที่ตั้งไว้ทั้งใบ ไม่ให้เมาส์เป็นรูปมือแต่กดไม่ได้
⚠️ .ms-cta ต้องไม่มี position:relative ไม่งั้น inset:0 จะกางแค่เท่าตัวปุ่มเอง
ต้องปล่อยให้อ้างอิง .ms-card (position:relative) ซึ่งเป็นบรรพบุรุษที่ positioned ที่ใกล้ที่สุด
ผลพลอยได้: hover ที่ไหนของการ์ดก็นับเป็น hover ตัวลิงก์ ปุ่มเลยเปลี่ยนสีพร้อมกับพื้นการ์ดและภาพรถเอง
ไม่ต้องเขียนกฎ .ms-card:hover .ms-cta เพิ่ม
z-index:3 = สูงกว่าภาพรถ (z-index:2) ซึ่ง pointer-events:none อยู่แล้ว */
.ms-cta::after{content:"";position:absolute;inset:0;z-index:3;}
.ms-cta:hover{background:var(--red);}
/* การ์ดช่องว่างรอข้อมูลรุ่นถัดไป */
.ms-card.is-empty{pointer-events:none;}
.ms-card.is-empty .ms-card-body{background:#fafafa;border:1px dashed var(--line);}
.ms-card.is-empty .ms-card-title,
.ms-card.is-empty .ms-stat-num{color:var(--muted);}
.ms-card-empty-icon{
position:absolute;top:0;left:0;right:0;height:190px;z-index:2;
display:flex;align-items:center;justify-content:center;
font-size:40px;color:rgba(0,0,0,.10);
}
/* ---------- Responsive: จอจริง ---------- */
@media (max-width:1024px){
.ms-grid{grid-template-columns:repeat(2,1fr);gap:48px 22px;}
}
/* ---------- สเกลตัวอักษรมือถือ ----------
ลดลงทั้งชุดตามภาพตัวอย่างที่คุณเอิร์ธส่งมา (24 ส.ค. 69) — ของเดิมยกมาจากเดสก์ท็อปเกือบตรงๆ
ตัวหนังสือเลยใหญ่จนการ์ดยาวมาก เลื่อนหลายจอกว่าจะครบ 1 รุ่น
เขียนรวมไว้ในตัวแปรเดียวไม่ได้เพราะต้องประกาศ 2 ที่ (จอจริง + โหมด demo) — แก้ที่ไหนอย่าลืมแก้อีกที่ */
@media (max-width:700px){
.page-hero.ms-page-hero{padding:44px 0 20px;}
.page-hero.ms-page-hero h1{font-size:34px;margin-bottom:8px;}
.page-hero.ms-page-hero p{font-size:14px;line-height:1.6;}
.ms-section{padding-top:40px;}
.ms-grid{grid-template-columns:1fr;gap:40px;}
.ms-card{padding-top:104px;}
.ms-card-media,.ms-card-empty-icon{height:168px;}
.ms-card-body{padding:84px 20px 22px;}
.ms-card-title{font-size:19px;margin-bottom:11px;}
.ms-chips{gap:5px;margin-bottom:20px;}
.ms-chip{font-size:10px;padding:6px 9px;}
.ms-stats{gap:14px;margin-bottom:22px;}
.ms-stat-num{font-size:17px;}
.ms-stat-unit{font-size:12.5px;}
.ms-stat-label{font-size:10.5px;}
.ms-cta{padding:13px 18px;font-size:13px;}
}
/* ---------- Responsive: โหมด demo Mobile (กรอบจำลอง 390px) ----------
ต้อง !important เพราะกฎ .mobile-mode .grid-3 ด้านบนบังคับ 2 คอลัมน์ให้ทุกกริดในเว็บ
การ์ดใบนี้มีเนื้อหาเยอะเกินกว่าจะอ่านรู้เรื่องที่ความกว้างครึ่งจอมือถือ จึงบังคับ 1 คอลัมน์ */
.mobile-mode .ms-grid{grid-template-columns:1fr !important;gap:40px !important;}
.mobile-mode .ms-card{padding-top:104px;}
.mobile-mode .ms-card-media,.mobile-mode .ms-card-empty-icon{height:168px;}
.mobile-mode .ms-card-body{padding:84px 20px 22px;}
.mobile-mode .ms-section{padding-top:40px;}
/* H1 ปกติเป็น clamp(36px,6vw,64px) ซึ่งอิง vw ของ "จอเบราว์เซอร์จริง" ไม่ใช่กรอบจำลอง 390px
โหมด demo รันบนจอกว้าง 6vw เลยได้ค่าสูงสุดตลอด ต้องเขียนทับเป็นค่าคงที่ตรงนี้ */
.mobile-mode .page-hero.ms-page-hero h1{font-size:34px;margin-bottom:8px;}
.mobile-mode .page-hero.ms-page-hero p{font-size:14px;line-height:1.6;}
.mobile-mode .ms-card-title{font-size:19px;margin-bottom:11px;}
.mobile-mode .ms-chips{gap:5px;margin-bottom:20px;}
.mobile-mode .ms-chip{font-size:10px;padding:6px 9px;}
.mobile-mode .ms-stats{gap:14px;margin-bottom:22px;}
.mobile-mode .ms-stat-num{font-size:17px;}
.mobile-mode .ms-stat-unit{font-size:12.5px;}
.mobile-mode .ms-stat-label{font-size:10.5px;}
.mobile-mode .ms-cta{padding:13px 18px;font-size:13px;}
/* ==========================================================================
SERVICES CENTRE (หน้า 05) — รีดีไซน์ตามภาพอ้างอิง Porsche Service (25 ส.ค. 69)
--------------------------------------------------------------------------
คลาสทั้งหมดในบล็อกนี้ขึ้นต้นด้วย .svcp- และใช้เฉพาะหน้า 05 เท่านั้น
⚠️ ห้ามสับสนกับ .svc-head / .svc-headline / .svc-grid ด้านบน — ชุดนั้นเป็นของ
section Services "ในหน้าแรก" (การ์ด 3 ใบแบบ story-card) คนละตัวกันคนละหน้า
โครงหน้าตามภาพอ้างอิง (คุณเอิร์ธกากบาทส่วนที่ไม่เอาไว้ในภาพแล้ว):
1. Hero ภาพเต็มความกว้าง + ชื่อหน้าตัวขาวมุมล่างซ้าย (header ลอยทับภาพ)
2. Our philosophy — หัวข้อกึ่งกลาง + บล็อกภาพ/ข้อความสลับซ้าย-ขวา 2 ชุด
3. Service offering — หัวข้อกึ่งกลาง + การ์ดเรียงแถว (มือถือเลื่อนแนวนอน)
4. ฟอร์มเก็บลีด + footer (ของเดิมของ SPEEDY ไม่ได้อยู่ในภาพอ้างอิง
แต่คงไว้เพราะเป็นจุดเก็บลีดจุดเดียวของหน้านี้ ตัดออกแล้วหน้าจะไม่มีทางปิดการขาย)
ส่วนที่ "ไม่ทำ" ตามที่กากบาทไว้: แถบแท็บ sticky ใต้ Hero, Documents & historical
records, Further information, และแบนเนอร์บัญชีผู้ใช้ (My Porsche)
========================================================================== */
/* ---------- 1. HERO ภาพเต็ม ---------- */
/* header ลอยทับภาพเหมือนหน้าแรก — ใช้ margin ติดลบ ไม่ใช่ absolute
(เหตุผลเดียวกับ .page-home header ด้านบน: absolute จะไปยึดกับ #frameWrap ที่มี transform
แล้ว header จะติดหนึบขอบบนกรอบในโหมด demo Mobile) */
.page-svc header{margin-bottom:calc(var(--header-h) * -1);}
/* ความสูง Hero ผูกกับ --screen-h ไม่ใช่ svh ตรงๆ — เพราะในโหมด demo Mobile
svh คิดจากหน้าต่างเบราว์เซอร์จริง (ใหญ่กว่ากรอบจำลองมาก) Hero จะสูงล้นกรอบ
--screen-h ถูกทับค่าไว้ที่ .frame-wrap.mobile-mode ให้เท่ากับความสูงกรอบจำลองแล้ว */
.svcp-hero{
position:relative;overflow:hidden;padding:0;
height:clamp(340px, calc(var(--screen-h) * .56), 600px);
display:flex;align-items:flex-end;
}
.svcp-hero-media{position:absolute;inset:0;}
/* placeholder ระหว่างรอภาพจริงของศูนย์บริการ — โทนเข้มเหมือน .hero-media-slot ของหน้าแรก
เพื่อให้ตัวหนังสือขาวอ่านออกตั้งแต่ยังไม่มีภาพ */
.svcp-hero-slot{
position:absolute;inset:0;pointer-events:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
text-align:center;color:rgba(255,255,255,.30);
font-size:12px;letter-spacing:2px;text-transform:uppercase;
background:
radial-gradient(ellipse at 30% 15%, rgba(226,16,26,.22), transparent 58%),
linear-gradient(180deg,#0a0a0a 0%,#181818 55%,#0a0a0a 100%);
}
.svcp-hero-slot .slot-frame{
width:64px;height:64px;border:1px dashed rgba(255,255,255,.28);border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:24px;
}
.svcp-hero-slot small{font-size:10px;letter-spacing:.5px;text-transform:none;color:rgba(255,255,255,.22);}
/* ไม่ประกาศ background-image ตรงนี้ — ใส่ทาง inline style ในไฟล์ HTML
เพราะพาธในไฟล์ CSS จะถูกคิดเทียบกับ assets/ ไม่ใช่เทียบกับหน้าเว็บ */
.svcp-hero-img{
position:absolute;inset:0;z-index:2;
background-size:cover;background-position:center;background-repeat:no-repeat;
}
.svcp-hero-scrim{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 34%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.85) 100%);
}
.svcp-hero-content{position:relative;z-index:4;width:100%;padding-bottom:42px;color:#fff;}
/* ใช้ Prompt น้ำหนัก 500 ไม่ใช่ Bebas Neue เหมือน .page-hero h1 ของหน้าอื่น
เพราะภาพอ้างอิงเป็นฟอนต์ความกว้างปกติ ไม่ใช่ฟอนต์บีบแบบ Bebas — ถ้าใช้ Bebas
หน้าตาจะห่างจากภาพที่ลูกค้าส่งมามาก */
/* nowrap = อยู่บรรทัดเดียวเสมอทุกความกว้างจอ ตามภาพอ้างอิง
ขนาดจึงต้องเล็กลงกว่าเดิม (เพดาน 44px ไม่ใช่ 52px) ไม่งั้นจอแคบจะดันจนล้นขอบ */
.svcp-hero-title{
font-family:'Prompt',sans-serif;font-weight:500;letter-spacing:0;
font-size:clamp(26px,3.4vw,44px);line-height:1.2;white-space:nowrap;
}
/* ---------- หัวข้อ section กึ่งกลาง (ใช้ร่วมทั้ง philosophy และ offering) ---------- */
.svcp-title{
text-align:center;font-weight:600;letter-spacing:-.3px;
font-size:clamp(26px,3.4vw,40px);line-height:1.2;margin-bottom:60px;
}
/* ---------- 2. OUR PHILOSOPHY — บล็อกภาพ/ข้อความสลับซ้าย-ขวา ---------- */
.svcp-phil{
display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
margin-bottom:96px;
}
.svcp-phil:last-of-type{margin-bottom:0;}
/* ลำดับใน DOM คือ ภาพ -> ข้อความ เสมอ (มือถืออ่านแบบนี้ทั้ง 2 บล็อกตามภาพอ้างอิง)
แถวคู่จึงสลับตำแหน่งด้วย order เฉพาะตอนเป็น 2 คอลัมน์ ไม่ต้องสลับ HTML */
.svcp-phil.is-reverse .svcp-phil-media{order:2;}
.svcp-phil-media .ph-img{aspect-ratio:4/3;border-radius:8px;}
.svcp-phil-text{max-width:440px;}
.svcp-phil-text h3{font-size:clamp(18px,1.6vw,22px);font-weight:600;margin-bottom:14px;line-height:1.4;}
/* 15px ไม่ใช่ 14px — ตัวไทยกินความสูงจริงน้อยกว่าตัวลาตินที่ขนาดตัวเลขเท่ากัน
บล็อกนี้เป็นย่อหน้ายาว ถ้าใช้ 14px แบบการ์ดจะอ่านต่อเนื่องยาก (เทียบ .page-hero p ที่ใช้ 15px เหมือนกัน) */
.svcp-phil-text p{font-size:15px;color:var(--ink-soft);line-height:1.9;}
/* ---------- 3. SERVICE OFFERING — การ์ดบริการ ---------- */
/* การ์ดไม่มีกรอบไม่มีพื้นสี ตามภาพอ้างอิง — ภาพมุมมนวางบนพื้นขาวแล้วต่อด้วยข้อความ
ต่างจาก .service-detail-card เดิมที่เป็นกล่องเทามีขอบ (เลิกใช้ในหน้านี้แล้ว) */
.svcp-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:start;}
/* min-width:0 = กันการ์ดดันกริด/แถวเลื่อนให้กว้างเกินตอนมีคำยาวๆ (ค่าเริ่มต้น min-width:auto ของ flex/grid item) */
.svcp-offer{display:flex;flex-direction:column;min-width:0;}
/* ⚠️ flex:none + width:100% จำเป็น ห้ามตัดออก
.ph-img เป็นลูกของ flex column และใช้ aspect-ratio กำหนดความสูง
ถ้าปล่อยค่าเริ่มต้น (flex-shrink:1) เบราว์เซอร์จะคำนวณความสูงจาก "เนื้อหาข้างใน" ก่อน
แล้วค่อยยืดความกว้างทีหลัง -> aspect-ratio คิดไม่ทัน กล่องภาพเลยออกมาแบนและเบี้ยว
อาการนี้เห็นชัดเฉพาะตอนการ์ดอยู่ในแถวเลื่อนแนวนอนของมือถือ (บั๊กที่คุณเอิร์ธเจอ) */
.svcp-offer .ph-img{flex:none;width:100%;aspect-ratio:4/3;border-radius:8px;margin-bottom:20px;}
.svcp-offer h3{font-size:17px;font-weight:600;margin-bottom:10px;line-height:1.45;}
.svcp-offer p{font-size:14px;color:var(--gray);line-height:1.85;}
/* ---------- จุดบอกตำแหน่งของแถวการ์ด (มือถือ) ---------- */
/* หน้าตาเดียวกับจุดของคารูเซล Highlights หน้ารถ (.hl-dots) เพื่อให้ภาษาภาพของเว็บเป็นชุดเดียวกัน
ตั้งต้นซ่อนไว้ก่อน แล้ว JS ค่อยเปิดให้ตอนตรวจพบว่าแถวเลื่อนได้จริง (ดู sync() ใน initServiceOffer)
ทำแบบนี้เพราะถ้าซ่อนด้วย media query อย่างเดียว โหมด demo Mobile ที่รันบนจอกว้างจะไม่เข้าเงื่อนไข */
.svcp-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;}
.svcp-dots.is-off{display:none;}
.svcp-dot{
width:7px;height:7px;border-radius:50%;padding:0;border:none;cursor:pointer;
background:rgba(10,10,10,.24);transition:.25s;
}
.svcp-dot:hover{background:rgba(10,10,10,.45);}
.svcp-dot.is-active{background:var(--ink);width:26px;border-radius:4px;}
/* ---------- ปุ่มติดต่อท้าย section บริการ ---------- */
/* ใช้โครงปุ่มของหน้ารายละเอียดรถ (.cd-actions/.cd-btn) ที่นี่ปรับแค่ระยะห่างด้านบน
ประกาศทีหลัง .cd-actions ในไฟล์ จึงชนะเรื่องลำดับ ไม่ต้องใช้ !important */
.svcp-cta{margin-top:56px;}
/* .cd-btn ตั้ง white-space:nowrap ไว้ — ข้อความปุ่มไทยยาวกว่าปุ่มหน้ารถพอสมควร
ปลดล็อกให้ตัดบรรทัดได้ กันข้อความล้นปุ่มตอนจอแคบ */
.svcp-cta .cd-btn{white-space:normal;text-align:center;line-height:1.4;padding-top:12px;padding-bottom:12px;}
/* ---------- Responsive: จอจริง ---------- */
@media (max-width:1100px){
.svcp-offer-grid{gap:32px 24px;}
}
@media (max-width:900px){
.svcp-phil{grid-template-columns:1fr;gap:22px;margin-bottom:64px;}
.svcp-phil.is-reverse .svcp-phil-media{order:0;} /* คอลัมน์เดียวแล้วต้องกลับมาเป็นภาพก่อนข้อความ */
.svcp-phil-text{max-width:none;}
.svcp-hero-content{padding-bottom:30px;}
/* ---- ขนาดตัวอักษรฝั่งมือถือ ----
⚠️ ต้องกำหนดเป็นตัวเลขตายตัว ห้ามพึ่ง clamp() ที่ผูกกับ vw เพียงอย่างเดียว
เพราะ vw คิดจาก "ความกว้างหน้าต่างเบราว์เซอร์" ไม่ใช่ความกว้างกรอบมือถือจำลอง
ตอนดูโหมด demo Mobile บนจอคอม 1900px ค่า vw จะพุ่งชนเพดาน clamp ทันที
-> หัวข้อออกมาใหญ่เท่าเดสก์ท็อปทั้งที่อยู่ในกรอบ 390px (บั๊กที่เห็นเป็นตัวหนังสือล้นจอ)
สัดส่วนที่ตั้งไว้: หัวข้อ section 26 > หัวข้อบล็อก 19 > หัวข้อการ์ด 17 > เนื้อความ 14 */
.svcp-hero-title{font-size:28px;}
.svcp-title{font-size:26px;margin-bottom:36px;}
.svcp-phil-text h3{font-size:19px;margin-bottom:12px;}
.svcp-phil-text p{font-size:14px;line-height:1.85;}
.svcp-offer h3{font-size:17px;}
.svcp-offer p{font-size:14px;}
.svcp-cta .cd-btn{font-size:14px;}
/* การ์ดบริการเปลี่ยนเป็นแถวเลื่อนแนวนอนแบบ snap ตามภาพอ้างอิงฝั่งมือถือ
⚠️ แถวเลื่อนอยู่ "ข้างใน" .container เท่านั้น ห้ามใช้ margin ติดลบดึงให้ทะลุขอบออกไป
รอบก่อนทำแบบนั้นแล้วขอบซ้ายของการ์ดโดน .frame-scroll (ที่มี overflow) เฉือนหาย
การ์ดใบแรกเลยดูแหว่งไม่เต็มใบ — บั๊กที่คุณเอิร์ธเจอ 25 ส.ค. 69
การ์ดกว้าง 84% ของพื้นที่เนื้อหา = ใบแรกเต็มตา และเหลือที่ให้ใบที่ 2 โผล่ริมขวา
ซึ่งเป็นสัญญาณว่า "ปัดไปอ่านต่อได้" โดยไม่ต้องมีจุดบอกหน้า */
.svcp-offer-grid{
display:flex;overflow-x:auto;gap:14px;
grid-template-columns:none;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
margin:0;padding:0 0 6px;
scrollbar-width:none;-ms-overflow-style:none;
}
.svcp-offer-grid::-webkit-scrollbar{display:none;width:0;height:0;}
/* flex-basis เป็น % ของกล่องแถวเลื่อน — ต้องคู่กับ flex-shrink:0 (เลข 0 ตัวกลาง)
ไม่งั้นการ์ดจะถูกบีบให้พอดีจอทั้ง 3 ใบ แทนที่จะเลื่อนได้ */
.svcp-offer{flex:0 0 84%;scroll-snap-align:start;}
/* เมาส์ชี้ที่แถว = บอกให้รู้ว่าลากได้ (นิ้วสัมผัสไม่เห็น cursor อยู่แล้ว ไม่กระทบ)
ระหว่างลากต้องปิดการลากภาพ/เลือกข้อความ ไม่งั้นเบราว์เซอร์จะนึกว่ากำลังลากรูปไปวางที่อื่น */
.svcp-offer-grid{cursor:grab;}
.svcp-offer-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.svcp-offer-grid.is-dragging *{user-select:none;-webkit-user-drag:none;pointer-events:none;}
.svcp-dots{margin-top:20px;}
.svcp-cta{margin-top:40px;}
}
/* ---------- Responsive: โหมด demo Mobile (กรอบจำลอง 390px) ---------- */
/* ต้อง !important เพราะกฎรวม .mobile-mode section{padding:48px 0 !important} ด้านบน
จะยัด padding ใส่ Hero ทำให้ภาพหดและตัวหนังสือลอยกลางจอ */
.mobile-mode .svcp-hero{padding:0 !important;}
.mobile-mode .svcp-phil{grid-template-columns:1fr !important;gap:22px !important;margin-bottom:64px;}
.mobile-mode .svcp-phil.is-reverse .svcp-phil-media{order:0;}
.mobile-mode .svcp-phil-text{max-width:none;}
.mobile-mode .svcp-hero-content{padding-bottom:30px;}
/* ---- ขนาดตัวอักษร: คู่แฝดของบล็อกมือถือจริงด้านบน ----
บล็อกนี้แหละที่จำเป็นที่สุด เพราะโหมด demo Mobile รันบนจอคอมกว้าง
media query (max-width:900px) จึงไม่ทำงาน ต้องอาศัยคลาส .mobile-mode ล้วนๆ */
.mobile-mode .svcp-hero-title{font-size:28px;}
.mobile-mode .svcp-title{font-size:26px;margin-bottom:36px;}
.mobile-mode .svcp-phil-text h3{font-size:19px;margin-bottom:12px;}
.mobile-mode .svcp-phil-text p{font-size:14px;line-height:1.85;}
.mobile-mode .svcp-offer h3{font-size:17px;}
.mobile-mode .svcp-offer p{font-size:14px;}
.mobile-mode .svcp-cta .cd-btn{font-size:14px;}
/* ⚠️ ไม่มี margin ติดลบ — เหตุผลเดียวกับบล็อกมือถือจริงด้านบน (ขอบซ้ายการ์ดโดนเฉือนหาย) */
.mobile-mode .svcp-offer-grid{
display:flex !important;grid-template-columns:none !important;
overflow-x:auto;gap:14px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
margin:0 !important;padding:0 0 6px !important;
scrollbar-width:none;-ms-overflow-style:none;
}
.mobile-mode .svcp-offer-grid::-webkit-scrollbar{display:none;width:0;height:0;}
.mobile-mode .svcp-offer{flex:0 0 84% !important;scroll-snap-align:start;min-width:0;}
.mobile-mode .svcp-offer .ph-img{flex:none;width:100%;aspect-ratio:4/3;}
.mobile-mode .svcp-offer-grid{cursor:grab;}
.mobile-mode .svcp-offer-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.mobile-mode .svcp-offer-grid.is-dragging *{user-select:none;-webkit-user-drag:none;pointer-events:none;}
.mobile-mode .svcp-dots{margin-top:20px;}
.mobile-mode .svcp-cta{margin-top:40px;}
/* ==========================================================================
DELIVERED (หน้า 06) — รีดีไซน์ 26 ส.ค. 69
--------------------------------------------------------------------------
เปลี่ยนบทบาทหน้าใหม่ทั้งหมด: จาก "หน้ารีวิวลูกค้า" (การ์ดข้อความ + ดาว + อวตาร)
เป็น "แกลเลอรีภาพส่งมอบรถ" ล้วนๆ ตามที่คุณเอิร์ธสั่ง
❌ ไม่มีแคปชั่น ❌ ไม่มีข้อความรีวิว ❌ ไม่มีดาว/ชื่อลูกค้า/รุ่นรถ
✅ ภาพ 1:1 ทุกใบ ✅ กริดสม่ำเสมอ 3 คอลัมน์ (มือถือ 2) ✅ กดดูภาพใหญ่ได้
เหตุผลเชิงดีไซน์: ภาพส่งมอบคือ "หลักฐานทางสังคม" ที่แรงที่สุดของโชว์รูม
ถ้าใส่ข้อความประกอบทุกใบ สายตาจะถูกดึงไปอ่านแทนที่จะกวาดดูปริมาณงานจริง
กริดเงียบๆ ที่มีแต่ภาพจึงสื่อ "ส่งมอบไปแล้วเยอะขนาดนี้" ได้ตรงกว่า
คลาสในบล็อกนี้ขึ้นต้นด้วย .dlv- และใช้เฉพาะหน้า 06 เท่านั้น
(.dlvp-hero* = โครงเดียวกับ .svcp-hero* ของหน้า Services แต่แยกชื่อไว้
เพื่อให้ปรับความสูง/สเกลของ 2 หน้านี้ได้อิสระในอนาคต ไม่ต้องพะวงกัน)
========================================================================== */
/* ---------- 1. HERO ภาพเต็ม (โครงเดียวกับหน้า Services) ---------- */
.page-dlv header{margin-bottom:calc(var(--header-h) * -1);}
.dlvp-hero{
position:relative;overflow:hidden;padding:0;
height:clamp(340px, calc(var(--screen-h) * .56), 600px);
display:flex;align-items:flex-end;
}
.dlvp-hero-media{position:absolute;inset:0;}
.dlvp-hero-slot{
position:absolute;inset:0;pointer-events:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
text-align:center;color:rgba(255,255,255,.30);
font-size:12px;letter-spacing:2px;text-transform:uppercase;
background:
radial-gradient(ellipse at 30% 15%, rgba(226,16,26,.22), transparent 58%),
linear-gradient(180deg,#0a0a0a 0%,#181818 55%,#0a0a0a 100%);
}
.dlvp-hero-slot .slot-frame{
width:64px;height:64px;border:1px dashed rgba(255,255,255,.28);border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:24px;
}
.dlvp-hero-slot small{font-size:10px;letter-spacing:.5px;text-transform:none;color:rgba(255,255,255,.22);}
/* ใส่ภาพจริงทาง inline style ที่ HTML (พาธใน CSS จะถูกคิดเทียบกับโฟลเดอร์ assets/) */
.dlvp-hero-img{
position:absolute;inset:0;z-index:2;
background-size:cover;background-position:center;background-repeat:no-repeat;
}
.dlvp-hero-scrim{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 34%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.85) 100%);
}
.dlvp-hero-content{position:relative;z-index:4;width:100%;padding-bottom:42px;color:#fff;}
.dlvp-hero-title{
font-family:'Prompt',sans-serif;font-weight:500;letter-spacing:0;
font-size:clamp(26px,3.4vw,44px);line-height:1.2;white-space:nowrap;
}
/* ---------- 2. บรรทัดนำก่อนเข้ากริด ---------- */
/* ข้อความสั้นบรรทัดเดียว — จงใจไม่ใส่หัวข้อใหญ่ซ้ำกับ Hero และไม่ใส่ย่อหน้ายาว
เพราะหน้านี้ต้องให้ "ภาพ" เป็นพระเอก ข้อความมีไว้บอกบริบทเฉยๆ */
.dlv-intro{
text-align:center;max-width:520px;margin:0 auto 44px;
font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.8;
}
/* ---------- 3. กริดภาพ 1:1 ---------- */
/* gap แคบกว่ากริดทั่วเว็บ (16px ไม่ใช่ 20px) — แกลเลอรีภาพล้วนที่ช่องไฟแน่นจะอ่านเป็น
"ผืนเดียวกัน" ดูพรีเมียมกว่ากริดที่แต่ละใบลอยห่างกัน */
.dlv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* ทุกใบเป็น