/* ============================================================ d2 — "สองฝั่ง" (ใกล้ภาพคอนเซปต์ที่ลูกค้าให้มาที่สุด) hero แบ่งครึ่ง ซ้ายข้อความ+จุดเด่น ขวาภาพซุ้มโค้ง+การ์ดแจ้งเตือน LINE เครื่องคำนวณคู่ตารางราคา · แผนที่ครึ่งจอ · 4 ขั้นตอนแนวนอนมีลูกศร · แถบ Premium Care มีผลที่ >=1000px เท่านั้น ℹ️ 29 ส.ค. 2569 — d2.html ถูก rename เป็น index.html และ d1/d3 ถูกถอดออกจากโปรเจกต์ (ย้ายเข้า backup/finalize-index-20260829-121129/) ⇒ ไฟล์นี้ถูกเรียกจาก index.html ที่เดียว คอมเมนต์ข้างล่างที่พูดถึง "d1.html / d3.html ไม่กระทบ" = บันทึกตอนยังมีสามไฟล์ ไม่ใช่สภาพปัจจุบัน ⚠️ ชื่อไฟล์ยังเป็น desktop-d2.css ตามเดิม — ไม่ rename เพราะจะต้องไล่แก้ที่อ้างถึงอีกหลายจุด (index.html:32 · README · docs/ASSETS.md) ถ้าต้องการเปลี่ยนให้สั่งเป็นงานแยก ============================================================ */ @media (min-width:1000px){ /* ── ระยะขอบรอบโปสเตอร์สองใบ (4 ขั้นตอน + บริการ) — ประกาศที่เดียว ใช้ร่วมกันสองที่ ── ทำไมต้องมี: ไฟล์โปสเตอร์สองใบมีแถบว่างในตัวไม่เท่ากัน ตัวเลขล่าง = วัดจากไฟล์ .webp ที่หน้าเว็บใช้จริง (อัปเดต 26 ส.ค. 2569 หลังรอบตัดกรอบเขียว 25 ส.ค.) วิธีวัด: ยึดสีมุมซ้ายบนเป็นสีพื้น แล้วนับแถว/คอลัมน์จากขอบที่ทุกพิกเซลยังใกล้สีพื้น (tolerance 8/255) • steps steps-poster-1846.webp 1846x807 บน 14 / ล่าง 0 / ซ้าย 27 / ขวา 37 • service service-poster-1559.webp 1559x897 บน 17 / ล่าง 5 / ซ้าย 21 / ขวา 20 ⚠️ ตัวเลขชุดเก่าที่เคยเขียนไว้ตรงนี้ (steps 0/0/0/0 · service 13/16/0/19) เป็นค่าของ "ก่อน" ตัดกรอบเขียว และวัดจากไฟล์ต้นฉบับ ไม่ใช่ไฟล์ที่ใช้จริง — เลิกใช้อ้างอิงได้เลย ⚠️ ค่าพวกนี้เป็นพิกเซลในไฟล์ ต้องคูณสเกลก่อนเทียบกับ px บนหน้าจอ — ที่ slot 1088px steps คูณ 0.589 (≈ บน 8 / ซ้าย 16 / ขวา 22) · service คูณ 0.698 (≈ บน 12 / ล่าง 4 / ซ้าย 15 / ขวา 14) ⇒ ระยะขาวที่ "ตาเห็น" ยังไม่เท่ากันเป๊ะ (ใบ steps เหลื่อมขวามากกว่าซ้ายราว 6px) แก้ไม่ได้ด้วย padding ตัวนี้ตัวเดียว ต้องไปแก้ค่า extract ใน scripts/build-images.mjs ซึ่งยังไม่ได้ทำเพราะเจ้าของยังไม่ได้สั่ง — จดไว้เฉย ๆ ถ้าปล่อย padding:0 ทั้งคู่ ระยะขอบที่ตาเห็นจะไม่เท่ากัน — แก้ด้วยการใส่ padding เท่ากัน จากภายนอกทั้งสองใบ (ไม่ไปตัดไฟล์ต้นฉบับ ต้นฉบับยัง generate ซ้ำได้เหมือนเดิม) ⚠️ ทั้งสองใบต้องใช้ค่าเดียวกันเป๊ะ ห้ามเขียนตัวเลขซ้ำที่กฎใดกฎหนึ่ง ให้แก้ที่นี่ที่เดียว ⚠️ padding นี้คือ "ระยะขอบทั้งหมด" ที่เหลืออยู่แล้ว — เส้นกรอบกับเงาของการ์ด (border/box-shadow) ถูกถอดออกจากสองใบนี้ เพราะตัวโปสเตอร์วาดกรอบมาในไฟล์เอง ซ้อนกันเป็นเส้นหลายชั้น แต่ "มุมมน" (border-radius) ยังอยู่ครบ = var(--radius-card) เท่าการ์ดอื่นทั้งหน้า ⚠️ แก้ค่านี้เมื่อไหร่ ต้องแก้ sizes ของ และ ใน d2.html ตามด้วย — slot = 1120 (การ์ด) - pad 16x2 = 1088px ที่ค่า 16px (ไม่ต้องหัก border แล้ว การ์ดสองใบนี้เป็น border:none · 1086px คือเลขยุคที่ยังมี border) */ :root{--gutter:40px;--poster-pad:16px} .container{max-width:1200px} h1{font-size:40px} h2{font-size:30px;line-height:1.34} h3{font-size:22px} .lead{font-size:18px} .small{font-size:16px;line-height:1.72} section{scroll-margin-top:110px} /* ---------- header ---------- */ /* แถบหัวเหลือ เมนูซ้าย + เวลาทำการขวา (โลโก้ถูกถอดออก ย้ายไปเด่นในแบนเนอร์แทน) */ .site-header__inner{ display:grid;grid-template-columns:1fr auto;align-items:center; gap:24px;min-height:72px;padding:0 var(--gutter); } .site-nav{display:flex;gap:28px} .site-nav a{text-decoration:none;color:var(--text-body);font-size:15px} .site-nav a:hover{color:var(--green-700)} .site-header__hours{display:inline-flex;justify-self:end} /* ---------- hero: แบนเนอร์เต็มความกว้างเป็นแถวบน · ข้อความ+ปุ่มอยู่ใต้แบนเนอร์ ---------- แบนเนอร์เป็นไฟล์เดียวจบ (มีทั้งหัวเรื่อง คำโปรย และภาพถ่ายอยู่ในรูป) จึงไม่ทำสองคอลัมน์แล้ว และไม่ซ้ำข้อความที่อยู่ในรูปลงมาเป็น HTML อีก ⚠️ ข้อความในรูป Google อ่านไม่ได้ — ตัวที่ทำหน้าที่ SEO คือ H1 ใต้รูป + alt ของรูป */ .hero-wide{margin-top:0} /* 🔴 ถอด .banner-frame (+ img/nth-child) และ .banner-slider__arrow ออก 2 ก.ย. 2569 — เป็นของสไลเดอร์รุ่นแรกที่ถูกแทนด้วย .hero-carousel/.hero-slide ตั้งแต่ 23 ส.ค. ดูคำอธิบายเต็มที่บล็อกเดียวกันใน base.css */ /* แบ่งครึ่ง: ซ้าย = โลโก้ + ข้อความ + ปุ่ม · ขวา = รูป (สูงเต็มแถบ ชนขอบขวาจอ) align-content:center ทำให้บล็อกซ้ายทั้งก้อนอยู่กึ่งกลางแนวตั้งเทียบกับรูป ไม่ลอยชิดบนจนเหลือที่ว่างข้างล่าง */ /* ใต้แบนเนอร์: กล่องโลโก้ + ข้อความ + ปุ่ม จัดกึ่งกลางหน้า บนพื้นเขียวเข้ม */ /* ⚠️ ถอด .hero-wide__inner ออกจาก d2.html แล้ว เนื้อหาย้ายไปทับบนภาพใน .hero-caption กฎชุดนี้จึงไม่แมตช์อะไรและถูกคอมเมนต์ไว้ ยังไม่ลบ เผื่อย้อนกลับ ตัวที่ใช้จริงตอนนี้อยู่ที่ base.css บล็อก @media (min-width:768px) ของ .hero-caption .hero-wide__inner{ display:flex;flex-direction:column;align-items:center; max-width:1100px;margin-inline:auto;padding:48px var(--gutter) 56px; } .hero-wide__brand{ flex-direction:row;align-items:center;gap:22px; align-self:center;margin:0 0 30px;padding:16px 30px; } .hero-wide__logo{height:96px} .hero-wide__name{font-size:28px} */ /* 🔴 ถอดกฎของ .hero-wide__copy ทั้งชุดออก 2 ก.ย. 2569 (.hero-wide__copy เอง + .eyebrow / .rule / .lead ที่อยู่ข้างใน และ .hero-wide__tagline) — element ชุดนี้ไม่มีในหน้าแล้ว เนื้อหาย้ายไป .hero-headline ใน base.css · ดูบล็อกคู่กันที่นั่น ⚠️ .hero-wide h1 ด้านล่างยังอยู่ เพราะ h1 ตัวจริงของหน้าอยู่ใน .hero-wide */ .hero-wide h1{font-size:38px;margin:0} /* ⚠️ กฎจัดกึ่งกลางชุดนี้เป็นของเลย์เอาต์เก่า (แถบเขียวใต้แบนเนอร์) ของใหม่ชิดซ้ายทับบนภาพ และคุมด้วย .hero-carousel > .hero-caption ใน base.css ซึ่ง specificity สูงกว่า (0,3,0 vs 0,2,0) จึงชนะอยู่แล้ว — คอมเมนต์ไว้กันสับสน .hero__points{justify-content:center;max-width:none;margin-top:28px} .hero__point{flex:0 1 auto;justify-content:center;padding:0 26px;border-left-color:rgba(255,255,255,.22)} .hero__cta{margin-top:30px;justify-content:center} .hero__cta .btn{min-width:250px} */ /* ภาษาไทยไม่มีช่องว่างระหว่างคำ ถ้าปล่อยให้เบราว์เซอร์ตัดเองจะได้ "ซัก/อบรีด" */ .hero-wide h1{font-size:40px;line-height:1.24;word-break:keep-all;overflow-wrap:normal} /* ⚠️ ชุดเดียวกัน — เลย์เอาต์เก่าแบบแถวเดียวมีเส้นคั่น จัดกึ่งกลางหน้า ของใหม่เรียงแนวตั้งชิดซ้ายบนภาพ (ดู base.css) คอมเมนต์ไว้ เผื่อย้อนกลับ .hero__points{ display:flex;align-items:stretch;justify-content:center; gap:0;margin-top:6px;width:100%;max-width:880px; } .hero__point{ flex:1;justify-content:center;gap:12px;padding:0 20px; border-left:1px solid var(--border-card); white-space:nowrap; } .hero__point:first-child{border-left:0} .hero__cta{margin-top:32px;grid-auto-flow:column;gap:16px;width:auto;justify-content:center} */ /* ปุ่มสองปุ่มสูงเท่ากัน 56px กดง่ายทั้งคู่ · กว้างตามข้อความ ไม่ล็อกจนตัดบรรทัด */ .hero__cta .btn{width:auto;min-width:250px;height:56px;font-size:17px;padding-inline:30px} /* ---------- แผนที่ + ขั้นตอน (เครื่องคำนวณ/ตารางราคาถูกถอดออกแล้ว ดูบล็อกใต้บรรทัดนี้) ---------- */ .tools{padding-top:88px} .tools__tabs,.tools__hint{display:none} .tools__track{ display:grid;gap:56px;overflow:visible; max-width:1200px;margin-inline:auto;padding-inline:var(--gutter); } .tools__panel{width:auto;padding:0} .tools__panel .card{padding:28px 26px} /* ════ เก็บไว้เผื่อย้อนกลับ — panel "คำนวณราคา" ถูกถอดออกจาก index.html แล้ว ════ เจ้าของร้านสั่งถอด เพราะลูกค้าเอาราคาบนเว็บไปเทียบกับหน้าร้านแล้วต้องอธิบายทุกครั้ง 🔴 อัปเดต 2 ก.ย. 2569 — คำเตือนเดิมตรงนี้เขียนว่า "กฎที่เหลืออยู่ใน base.css (.field .select .price-result .price-table .tools__group) ซึ่ง d1 และ d3 ยังใช้อยู่ ห้ามแตะเด็ดขาด" ⇒ **ไม่จริงแล้วทั้งประโยค**: d1/d3 ถูกถอดออกจากโปรเจกต์ตั้งแต่ 29 ส.ค. และกฎชุดนั้น ใน base.css ถูกลบออกแล้ววันนี้ (ไม่มีไฟล์ไหนเรียกอีกเลย) ⇒ ถ้าจะเอาเครื่องคำนวณกลับมา ต้องกู้ทั้งสามชั้น: markup จาก backup/finalize-index-20260829-121129/d1.html · CSS ฐานจาก git history ของ base.css · และสองกฎเดสก์ท็อปข้างล่างนี้ · ส่วน JS กู้จาก git history ของ scripts/site.js คำนวณราคา 420px คู่กับตารางราคาเต็มที่เหลือ .tools__group{grid-template-columns:420px 1fr;gap:24px;align-items:start} .price-result__value{font-size:30px} ════ จบบล็อกที่เก็บไว้ ════ */ /* แผนที่: ข้อมูลครึ่งซ้าย iframe ครึ่งขวา */ /* เดสก์ท็อป: ข้อมูลครึ่งซ้าย (เป็นกล่องเดียว ไม่ใช่ไอเทมกริดแยกกัน จึงไม่โดนยืดตามความสูงแผนที่) แผนที่ครึ่งขวา สูงเต็มคอลัมน์ */ .map-card{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch} .map-info{display:grid;gap:18px;align-content:start} .map-card .map-brand__logo{height:72px} .map-card .map-brand__name{font-size:24px} .map-card .map-embed{height:100%} .map-card .map-embed iframe{height:100%;min-height:480px} /* ปุ่มขอเส้นทาง: เตี้ยลงแต่เต็มความกว้างคอลัมน์ (สัดส่วนแบนขึ้น = เด่นขึ้น) และเว้นระยะจากบล็อกที่อยู่ด้านบน ไม่ให้ติดกันจนดูเป็นก้อนเดียว */ .map-card .btn{ margin-top:14px;height:46px;font-size:15px;letter-spacing:.01em; justify-content:space-between;padding-inline:22px; } /* 4 ขั้นตอน = โปสเตอร์แผงเดียว (ภาพเดียวจบ มีทั้งเลข ไอคอน หัวข้อ คำอธิบาย ลูกศรอยู่ในรูป) ⚠️ อัปเดต: padding ของ #steps ถูกแยกออกจาก .tools__panel .card (28/26) ที่ใช้ร่วมกับการ์ดแผนที่ รอบแรกตั้งเป็น 0 (ภาพชนขอบการ์ด) รอบนี้เปลี่ยนเป็น var(--poster-pad) เพื่อให้ระยะขอบเท่า การ์ดบริการเป๊ะ — เหตุผลเต็มอยู่ที่บล็อก --poster-pad บนสุดของไฟล์นี้ แยกเฉพาะ padding เท่านั้น — พื้น ขอบ มุม เงา และ "ความกว้าง" ยังตกทอดจาก .card + .tools__panel .card เหมือนเดิมทุกอย่าง ⇒ การ์ดยังกว้างเท่าการ์ดแผนที่ (1120px ที่จอ >=1200px) และขอบซ้าย-ขวายังตรงกัน ⚠️ ใช้ selector #steps (ไม่ใช่ .tools__panel .card) เพราะ track เดียวกันนี้มีการ์ดแผนที่ + อยู่ด้วย การ์ดแผนที่ยังต้องมี padding 28/26 ตามเดิม ห้ามโดนหางเลข ⚠️ border:none / box-shadow:none = เจ้าของสั่งถอด "เส้นกรอบกับเงา" ของการ์ดออก เพราะตัวโปสเตอร์ มีกรอบวาดมาในไฟล์อยู่แล้ว ซ้อนกับกรอบการ์ดเป็นเส้นหลายชั้น (ดูบล็อก --poster-pad บนสุดของไฟล์นี้) ⇒ เหลือแต่พื้นขาวของการ์ดเป็นระยะขอบ 16px รอบภาพ ไม่มีเส้น ไม่มีเงา ⚠️ ถอดเฉพาะสองใบนี้ — การ์ดแผนที่ ใน track เดียวกันยังต้องมีกรอบครบ ⚠️ แต่ "มุมโค้ง" คืนกลับมาแล้ว — ไม่ได้ถอดไปด้วย เพราะทั้งหน้าใช้มุมมนเป็นระบบเดียวกัน ใช้ var(--radius-card) ตัวเดียวกับ .card ใน base.css:153 (ค่าจริงประกาศที่ base.css:35 = 20px) ⇒ ตรงกับการ์ดแผนที่ ที่อยู่ track เดียวกันโดยอัตโนมัติ ห้ามเขียนตัวเลข px ตรงนี้ — แก้ค่าที่ตัวแปรใน base.css ที่เดียว ทั้งหน้าจะขยับตามพร้อมกัน ⚠️ overflow:hidden จำเป็นแล้ว (ไม่ใช่แค่กันพลาด) — โปสเตอร์เป็น สี่เหลี่ยมทึบวางเต็มกล่อง ถ้าไม่ตัด มุมภาพจะโผล่พ้นมุมมนของการ์ดออกมาเป็นเหลี่ยม ห้ามลบ ⚠️ slot ของภาพ = 1120 - pad 16x2 = 1088px (ไม่ต้องหัก border แล้ว · 1118px ยุค padding:0 → 1086px ยุคมี border) ตัวเลขนี้ต้องตรงกับ sizes ของ ใน d2.html แก้ที่ไหนต้องแก้ตามกัน ⚠️ ความกว้างกับการจัดกึ่งกลางมาจาก .tools__track (max-width:1200px + margin-inline:auto) ทั้งสองการ์ดอยู่ใน track เดียวกัน จึงกว้างเท่ากันและอยู่กึ่งกลางเหมือนกันเสมอ ⚠️ ข้อความในรูป Google อ่านไม่ได้ — ตัวที่ทำหน้าที่นั้นคือ
    ใต้ภาพใน d2.html และหัวข้อ h2 ที่ถูก .sr-only ครอบไว้ */ #steps{padding:var(--poster-pad);overflow:hidden;border:none;box-shadow:none;border-radius:var(--radius-card)} .steps__head{text-align:center;margin-bottom:0} /* ── สลับชุดที่ ≥1000px: โชว์โปสเตอร์ ซ่อนการ์ด/ไอคอน (อีกฝั่งอยู่ใน base.css บล็อก max-width:999px) ── การแสดงผลที่ ≥1000px ต้องเหมือนเดิมทุกพิกเซล = โปสเตอร์สองใบเท่านั้น ⚠️ ใช้ display:none กับการ์ด/ไอคอน ไม่ใช่ visibility/opacity — ต้องไม่กินที่ในโฟลว์เลย ⚠️ เพราะการ์ดถูก display:none ที่นี่ ข้อความในการ์ดจึงหายจากสายตาบอตบนเดสก์ท็อป
      /