/* ==========================================================================
Components
--------------------------------------------------------------------------
หลักการ: ทุก class ขึ้นต้นด้วย mo- เพื่อไม่ชนกับ GeneratePress และ core blocks
ห้ามใช้ !important — ถ้าต้องใช้แปลว่า specificity ผิดตั้งแต่แรก
========================================================================== */
/* --- Base ---------------------------------------------------------------- */
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--c-ink);
/* พื้นหลังหลักของเว็บคือ paper ไม่ใช่ cream — ดู tokens.css
ตั้งเป็น cream อยู่พักหนึ่งโดยไม่ได้ตั้งใจ ผลคือ section ธรรมดากับ
.mo-section--tint กลายเป็นสีเดียวกัน จังหวะสลับ paper/cream ที่ Design.md
กำหนดไว้จึงไม่เคยเกิดขึ้นจริง แก้กลับแล้ว 26 ส.ค. 2569 */
background: var(--c-surface);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, .mo-display {
font-family: var(--font-display);
font-weight: var(--fw-display); /* ต้นฉบับใช้หัวข้อน้ำหนักบาง ไม่ใช่ bold */
line-height: var(--lh-tight);
color: var(--c-ink);
letter-spacing: var(--ls-tight);
/* เกลี่ยความยาวแต่ละบรรทัดให้ใกล้เคียงกัน แทนที่จะอัดบรรทัดแรกเต็มแล้วเหลือหางสั้น ๆ
สำคัญกับภาษาไทยเป็นพิเศษ เพราะไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดตรงไหนก็ได้
ที่พอดีขอบ — กล่องยิ่งแคบยิ่งตัดกลางคำบ่อย */
text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
a { color: var(--c-accent-text); text-underline-offset: 0.2em; }
a:hover { color: var(--c-brand); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid var(--c-focus);
outline-offset: 2px;
}
/* --- Section ------------------------------------------------------------- */
.mo-section { padding-block: var(--section-y); }
/* บล็อก Columns ของ WordPress มีระยะใต้ตัวเอง 1.75em (~30px) ติดมาเสมอ
section ที่จบด้วยแถวคอลัมน์จึงห่างล่าง 84px แต่ห่างบน 54px — วัดเจอ 24 ก.ย. 2569
5 จุดบนหน้าบริการ และมีแบบเดียวกันที่หน้าแรก (คำถามที่พบบ่อย · Visit Us)
ระยะบน-ล่างของ section ต้องมาจาก --section-y ทางเดียว ไม่งั้นจังหวะของหน้าเพี้ยน
ตัดเฉพาะแถวที่เป็น "ตัวสุดท้าย" แถวคอลัมน์กลาง section ยังเว้นระยะตามเดิม */
.mo-wrap > .wp-block-columns:last-child,
.mo-wrap > .wp-block-group__inner-container > .wp-block-columns:last-child { margin-bottom: 0; }
/* ปลดกรอบ 1200px ของธีมแม่เฉพาะหน้าที่ประกอบจาก section ของดีไซน์นี้
(คลาส mo-fullbleed ใส่จาก body_class ใน functions.php — ดูเหตุผลที่นั่น)
ความกว้างเนื้อหาไปคุมที่ .mo-wrap ข้างในแทน
**พื้นหลังต้องปลดด้วย — จุดที่ 4 ที่เพิ่งเจอ 26 ส.ค. 2569**
โหมด "กล่องเดียว" ของธีมแม่ทาพื้น #page เป็น **ขาวล้วน #ffffff**
(กฎ `.one-container .container` ใช้ตัวแปร --base-3 ของ GeneratePress)
กล่องนี้ทับพื้น paper ที่ body ตั้งไว้จนมองไม่เห็นเลย ผลที่ตามมาสองข้อ
· section ธรรมดาไม่ได้เป็น paper อย่างที่ Design.md กำหนด แต่เป็นขาวล้วน
· ปลายช่วงไล่สีของ .mo-section--tint จบที่ paper ซึ่ง **ไม่ใช่สีเดียวกับขาว**
ต่างกัน 4 ระดับ วัดจากภาพเรนเดอร์จริงแล้ว → เห็นเป็นเส้นคมพาดขวางจอ
ตรงหัวและท้ายทุก section ที่ไล่สี ทั้งที่ตัวการไล่สีเนียนอยู่แล้ว
**นี่คือ "กรอบเหลี่ยม" ที่ยังเห็นอยู่หลังทำเฟดรอบสอง ไม่ใช่ความผิดของเฟด**
ตั้งเป็นโปร่งใส ไม่ใช่ทา paper ทับ เพื่อให้เหลือแหล่งความจริงที่ body ที่เดียว */
.mo-fullbleed #page.grid-container {
max-width: none;
padding-inline: 0;
background: transparent;
}
/* ธีมแม่ใส่กรอบขาวมีเงาให้บทความทุกชิ้น ซึ่งกินพื้นที่และตัดแถบสีขาด */
.mo-fullbleed .inside-article {
padding: 0;
background: none;
box-shadow: none;
}
/* ธีมแม่ตั้งค่าเป็นโหมด "กล่องเดียว" (one-container) ซึ่งใส่ padding 40px รอบกล่องเนื้อหา
แถบสีของ section จึงถูกดันเข้ามาจากขอบจอด้านละ 40px แล้วพื้นขาวของกล่อง #page
โผล่เป็นขอบขาวรอบเว็บ — เป็นคนละจุดกับกรอบ 1200px ข้างบน ต้องปลดทั้งสองที่
ระยะห่างบน-ล่างของดีไซน์นี้คุมที่ .mo-section เอง ไม่ได้พึ่ง padding ก้อนนี้ */
.mo-fullbleed .site-content {
padding: 0;
}
/* ธีมแม่ยังใส่กรอบ 1200px + padding 40px ให้กล่องซ้อนของบล็อกกลุ่มทุกใบในเนื้อหาด้วย
(ตั้งมาจาก Customizer > Layout > Blocks ของ GeneratePress)
section ของดีไซน์นี้ซ้อนกันสามชั้น padding เลยทบกันชั้นละ 40px
และความกว้างถูกบีบซ้ำทุกชั้น — ความกว้างที่ถูกต้องคุมที่ .mo-wrap ชั้นเดียวพอ */
.mo-fullbleed .site-main .wp-block-group__inner-container {
max-width: none;
padding: 0;
}
/* --- กล่องซ้อนของบล็อก "กลุ่ม" ------------------------------------------------
ตอนบันทึกหน้า WordPress ห่อของข้างในบล็อกกลุ่มด้วยกล่องอีกใบ
(.wp-block-group__inner-container) ทั้งที่ pattern ไม่ได้เขียนไว้
คลาสที่ทำหน้าที่ "จัดเรียงลูกของตัวเอง" จึงเห็นลูกแค่ใบเดียวคือกล่องซ้อนนั้น
ของจริงที่ต้องเรียงอยู่ลึกลงไปอีกชั้น การจัดเรียงเลยไม่เกิด
ซ้ำร้าย GeneratePress สั่งกล่องซ้อนไว้ว่า margin ซ้ายขวาเป็น auto
พอไปอยู่ในแถวแบบ flex กล่องจึงถูกจัดกึ่งกลาง แล้วลากของข้างในเยื้องตามไปด้วย
display:contents สั่งให้กล่องซ้อนไม่ถูกนับเป็นกล่อง ลูกจริงขึ้นมาเป็นลูกชั้นบนตรง ๆ
ทั้ง max-width และ margin auto ของมันจึงไม่มีผลไปด้วยในตัว
เพิ่มคลาสใหม่ที่จัดเรียงลูกเมื่อไหร่ ต้องมาเติมในรายการนี้ด้วย
ระวัง: display:contents ไม่ได้ย้ายตำแหน่งใน DOM ให้ กฎที่เลือกลูกด้วยเครื่องหมาย >
จะยังชี้ไปที่กล่องซ้อน ไม่ใช่ของจริง เขียนกฎของคลาสพวกนี้เป็นแบบ "ลูกหลาน" เท่านั้น
--------------------------------------------------------------------------- */
.mo-features > .wp-block-group__inner-container,
.mo-hero__actions > .wp-block-group__inner-container,
.mo-cta-row > .wp-block-group__inner-container,
.mo-team > .wp-block-group__inner-container,
.mo-split > .wp-block-group__inner-container,
.mo-card--service > .wp-block-group__inner-container,
.mo-card__body > .wp-block-group__inner-container,
.mo-head--split > .wp-block-group__inner-container {
display: contents;
}
/* ระยะห่างระหว่างลูกคุมด้วย gap ของตัวจัดเรียงที่เดียว
ไม่งั้นจะได้ระยะจาก margin ของบล็อกย่อหน้าซ้อนเข้ามาอีกชุด */
.mo-features > .wp-block-group__inner-container > * { margin-block: 0; }
/* แถบสีของ section กินเต็มความกว้างจอ แต่เนื้อหาข้างในต้องอยู่ในกรอบ 1200px
ตัวคุมความกว้างจึงต้องเป็นชั้นใน ไม่ใช่ตัว section เอง — ถ้าไปใส่ที่ section
พื้นหลังจะหดตามไปด้วยแล้วจังหวะแถบสลับที่เป็นเอกลักษณ์ของดีไซน์จะหายไปทันที */
.mo-wrap {
max-width: var(--wrap-wide);
margin-inline: auto;
/* เขียนเป็น var() ซ้อน เพื่อให้สกินอื่น (เช่น .mo-v2) เปลี่ยนระยะขอบได้จากที่เดียว
ไม่ต้องมาเขียนทับกฎนี้ ค่าตั้งต้นยังเป็น --sp-3 เหมือนเดิมทุกประการ */
padding-inline: var(--wrap-pad, var(--sp-3));
}
/* ระดับ Narrow ของ design-fixes ข้อ 4 — ใส่คู่กับ .mo-wrap ที่ section ไหนก็ได้
ที่เนื้อหาข้างในเป็นข้อความล้วน แล้วทั้ง section (หัวข้อด้วย) จะแคบพร้อมกัน
**ต้องคุมที่ระดับ section ไม่ใช่ที่ตัวเนื้อหา** ถ้าไปคุมแค่ตัวเนื้อหา
หัวข้อจะยังกว้าง 1200px อยู่ ขอบซ้ายของหัวข้อกับของเนื้อหาจึงไม่ตรงกัน
ตาอ่านออกทันทีว่าเยื้อง ทั้งที่แต่ละชิ้นถูกของมันเอง */
.mo-wrap--narrow { max-width: var(--wrap-narrow); }
/* --- แกนซ้ายแกนเดียวทั้งหน้า (design-fixes ข้อ 2.1) ---------------------------
section ที่หัวข้อชิดซ้าย เนื้อหาข้างในต้องเริ่มที่ขอบเดียวกับหัวข้อ
ไม่ใช่ลอยอยู่กลาง section
บล็อกพวกนี้จำกัดความกว้างตัวเองแล้ว `margin-inline: auto` เพื่อจัดกึ่งกลาง
ซึ่งถูกสำหรับ section ที่หัวข้อกึ่งกลาง แต่พอหัวข้อชิดซ้ายมันจะเยื้องกันทันที
ตาอ่านออกว่า "ขอบไม่ตรงกัน" แม้แต่ละชิ้นจะถูกของมันเอง
**ห้ามแก้ด้วยการใส่ .mo-wrap--narrow ให้ section แทน** ลองแล้วไม่ได้ผล
เพราะ --narrow ย่อทั้ง section แล้วจัดกึ่งกลาง ขอบซ้ายจึงขยับเข้ามา
168px เทียบกับ section อื่น = ยิ่งได้แกนเพิ่มมาอีกแกน ตรงข้ามกับที่ต้องการ
→ --narrow เหมาะกับหน้าที่ทุก section เป็นแบบเดียวกัน (เช่นบล็อกบทความหน้าแรก)
ส่วนหน้าที่ต้องมีแกนเดียวยาวตลอด ต้องคุมที่ตัวเนื้อหาแบบนี้
-------------------------------------------------------------------------- */
.mo-wrap:has(.mo-head--left, .mo-head--split)
:where(.mo-steps, .mo-faq, .mo-postlist, .mo-narrow, .mo-reviewer) {
margin-inline: 0;
}
.mo-narrow {
max-width: var(--content-narrow);
margin-inline: auto;
}
.mo-eyebrow {
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.08em;
color: var(--c-brand);
margin-bottom: var(--sp-1);
display: block;
}
/* --- Button -------------------------------------------------------------- */
.mo-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 0.85em 1.9em;
border-radius: var(--radius-pill);
background: var(--c-brand);
color: var(--c-ink-invert);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mo-btn:hover { background: var(--c-brand-dark); color: var(--c-ink-invert); transform: translateY(-1px); }
.mo-btn--ghost {
background: transparent;
color: var(--c-brand);
box-shadow: inset 0 0 0 1.5px var(--c-brand);
}
.mo-btn--ghost:hover { background: var(--c-canvas); color: var(--c-brand-dark); }
/* **ปุ่มโครงร่างบนพื้นมืดมองไม่เห็นเลย — เจอ 28 ส.ค. 2569 ตอนทำ section บทความ**
ค่าเริ่มต้นของปุ่มนี้คือตัวหนังสือ navy กับเส้นขอบ navy
พอไปวางบนแถบ navy จึงได้ navy บนพื้น navy คอนทราสต์ราว 1:1
ปุ่มยังกดได้และยังอยู่ในลำดับ Tab แต่ตาคนมองไม่เห็นว่ามีปุ่มอยู่ตรงนั้น
→ เป็นบั๊กของทั้งธีม ไม่ใช่ของ section เดียว หน้าแรกไม่เคยเจอเพราะ hero เป็นพื้นสว่าง
ขอบใช้ทองแดงอ่อนโปร่งแสง ไม่ใช่ครีมทึบ จะได้ไม่แข่งความเด่นกับปุ่มหลัก */
.mo-section--night .mo-btn--ghost,
.mo-pagehero .mo-btn--ghost {
color: var(--c-ink-invert);
box-shadow: inset 0 0 0 1.5px rgba(196, 166, 127, .7);
}
.mo-section--night .mo-btn--ghost:hover,
.mo-pagehero .mo-btn--ghost:hover {
background: rgba(251, 250, 248, .12);
color: var(--c-ink-invert);
}
/* ปุ่มหลักบนพื้น navy ก็จมหายเหมือนกัน — พื้นปุ่มเป็น navy เท่ากับพื้น hero พอดี
เหลือแค่ตัวหนังสือขาวลอย ๆ อ่านไม่ออกว่าเป็นปุ่ม (เห็นตอนทำหน้า hero พื้นมืด
หน้าแรกของเว็บ 25 ส.ค. 2569 — หน้าแรกไม่เจอเพราะ hero เป็นพื้นสว่าง)
สลับเป็นปุ่มพื้นสว่างตัวหนังสือ navy ให้อัตโนมัติ คนแก้เนื้อหาไม่ต้องจำว่า
หน้าไหนต้องใช้ปุ่มรุ่นไหน — เว้นรุ่นที่เจาะจงมาแล้วไว้ ไม่ไปทับของที่เขาตั้งใจเลือก */
:where(.mo-hero, .mo-pagehero) .mo-btn:not(.mo-btn--ghost):not(.mo-btn--light):not(.mo-btn--accent) {
background: var(--c-surface);
color: var(--c-brand);
}
:where(.mo-hero, .mo-pagehero) .mo-btn:not(.mo-btn--ghost):not(.mo-btn--light):not(.mo-btn--accent):hover {
background: var(--c-canvas);
color: var(--c-brand-dark);
}
/* hero พื้นสว่างต้องกลับไปใช้ปุ่ม navy ตามเดิม */
.mo-hero--light .mo-btn:not(.mo-btn--ghost):not(.mo-btn--light):not(.mo-btn--accent) {
background: var(--c-brand);
color: var(--c-ink-invert);
}
.mo-hero--light .mo-btn:not(.mo-btn--ghost):not(.mo-btn--light):not(.mo-btn--accent):hover {
background: var(--c-brand-dark);
}
/* ปุ่มโปร่งบนพื้น navy ต้องกลับเป็นเส้นขาว ไม่งั้นตัวหนังสือ navy จมหายไปกับพื้น */
:where(.mo-hero, .mo-pagehero) .mo-btn--ghost {
color: var(--c-ink-invert);
box-shadow: inset 0 0 0 1.5px rgba(251, 250, 248, .45);
}
:where(.mo-hero, .mo-pagehero) .mo-btn--ghost:hover {
background: rgba(251, 250, 248, .12);
color: var(--c-ink-invert);
}
/* --- Card ---------------------------------------------------------------- */
.mo-card {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius-card);
padding: var(--sp-3);
transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mo-card:hover { box-shadow: var(--shadow-card); border-color: transparent; }
.mo-card h3 { margin-top: 0; }
/* การ์ดเด่น — ใช้กับบริการเรือธงที่ต้องการให้สะดุดตากว่าใบอื่นในแถวเดียวกัน */
.mo-card--featured {
background: var(--c-brand);
border-color: transparent;
color: var(--c-ink-invert);
}
.mo-card--featured h3 { color: var(--c-ink-invert); }
.mo-card--featured a { color: var(--c-accent-light); }
/* บรรทัดหมวดหมู่/วันที่เหนือหัวข้อการ์ดบทความ */
.mo-card__meta {
font-size: var(--fs-micro);
letter-spacing: var(--ls-eyebrow);
color: var(--c-accent-text);
margin: 0 0 var(--sp-1);
}
/* --- ย่อหน้าเนื้อความในหน้า landing -----------------------------------------
หน้าที่ต้องติดอันดับต้องมีเนื้อความจริงให้อ่าน ไม่ใช่มีแต่หัวข้อกับการ์ด
จำกัดความกว้างไว้ ~60 ตัวอักษร เพราะบรรทัดยาวกว่านั้นสายตาหาต้นบรรทัดถัดไปไม่เจอ
--------------------------------------------------------------------------- */
.mo-prose { max-width: 60ch; }
.mo-prose p + p { margin-top: var(--sp-2); }
/* หมายเหตุตัวเล็กท้ายกล่อง — ใช้กับข้อความกำกับที่ไม่ใช่เนื้อหาหลัก */
/* ข้อความกำกับ/ปฏิเสธความรับผิดทางการแพทย์
**เปลี่ยนจาก --c-ink-soft เป็น navy 70% เมื่อ 28 ส.ค. 2569** (design-fixes ข้อ 2.6)
ของเดิมเป็นเทาน้ำเงินซึ่งอ่อนเกินไปสำหรับข้อความที่ "ยิ่งต้องอ่านออก"
ตรรกะของดีไซน์ทั่วไปคือคำกำกับควรถอยไปอยู่ข้างหลัง แต่ข้อความชุดนี้ตรงกันข้าม —
มันคือส่วนที่บอกว่าอะไรที่คลินิกไม่ได้รับปาก ต้องอ่านออกพอ ๆ กับคำโฆษณา
navy 70% ได้ 6.0:1 บนพื้น paper และ 5.5:1 บนพื้น cream (เดิม 5.2 / 4.7)
ขนาด --fs-small = 15px ซึ่งเกินขั้นต่ำ 14px ที่กำหนดไว้ */
.mo-note {
font-size: var(--fs-small);
color: color-mix(in srgb, var(--c-ink) 70%, transparent);
margin-bottom: 0;
}
/* --- Hero ---------------------------------------------------------------- */
/* ตัว .mo-hero กับ .mo-hero__lead อยู่ในหมวด "ถอดมาจาก Healtch kit" ข้างล่าง */
.mo-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
/* --- Article (ปลายทางของ SEO pipeline) ------------------------------------ */
.mo-article { max-width: var(--content-narrow); }
.mo-article h2 { margin-top: var(--sp-5); }
.mo-article h3 { margin-top: var(--sp-4); }
.mo-article :where(ul, ol) { padding-left: 1.4em; }
.mo-article li + li { margin-top: 0.4em; }
.mo-article img { border-radius: var(--radius-img); }
/* กล่อง "สรุปคำตอบ" ท้าย/ต้นบทความ — ช่วยทั้ง featured snippet และ AI overview */
.mo-answer {
background: var(--c-canvas);
border-left: 4px solid var(--c-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: var(--sp-3);
margin-block: var(--sp-4);
}
.mo-answer > :first-child { margin-top: 0; }
.mo-answer > :last-child { margin-bottom: 0; }
/* ==========================================================================
Components ที่ถอดมาจาก Healtch kit
========================================================================== */
/* --- Eyebrow --------------------------------------------------------------
ป้ายกำกับเหนือหัวข้อทุก section เป็นตัวคุมจังหวะของทั้งหน้า
บอกคนอ่านว่ากำลังอยู่ส่วนไหน — ห้ามตัดออก
เดิมเป็นชิปแคปซูลมีกรอบและจุดนำหน้าตามต้นฉบับ Healtch kit
25 ส.ค. 2569 เจ้าของเลือกแบบ B: เหลือแต่ตัวอักษร ไม่มีกรอบ ไม่มีจุด
กรอบทำให้ป้ายกลายเป็นวัตถุอีกชิ้นบนหน้า ตัดออกแล้วหัวข้อใหญ่เด่นขึ้นทันที
ตัวอักษรจึงต้องรับงานที่กรอบเคยทำ คือบอกว่านี่คือ "ป้าย" ไม่ใช่ประโยค
ทำได้ด้วยสามอย่างพร้อมกัน — สีทองแดง น้ำหนักหนา และจัดตัวอักษรห่าง
**ข้อความในป้ายต้องเป็นภาษาอังกฤษ** และต้องมี lang="en" กำกับทุกจุด
เหตุผลไม่ใช่ความสวยอย่างเดียว: ภาษาไทยจัดตัวอักษรห่างไม่ได้
เพราะสระกับวรรณยุกต์ซ้อนบนล่างของพยัญชนะ พอดันให้ห่างจะดูหลุดออกจากกัน
(ยกเว้นชิปในหัวเว็บ ซึ่งเป็นข้อความบอกที่ตั้งจริง ไม่ใช่ป้ายกำกับ
ตัวนั้นยังเป็นไทยและยังเป็นแคปซูลอยู่ ใช้คลาส .mo-chip--pill)
คำในป้ายต้องเป็นคำบอกทางเท่านั้น ห้ามใช้คำอวด เช่น Expert / Best /
Leading / No.1 — พ.ร.บ. สถานพยาบาลห้ามโฆษณาอ้างความเหนือกว่า
------------------------------------------------------------------------- */
.mo-chip {
/* **ต้องเป็น block ไม่ใช่ inline-block** — ของเดิมเป็น inline-block ตกค้างมาจาก
ตอนที่ป้ายยังเป็นแคปซูลมีกรอบ ซึ่งต้องหดตามความยาวข้อความ
พอเป็นตัวอักษรล้วนแล้วมันไม่ได้ช่วยอะไร แต่กลับทำให้ **ระยะติดลบไม่ทำงาน**
เพราะกล่องแบบ inline ถูกความสูงบรรทัดของกล่องแม่ค้ำไว้เป็นขั้นต่ำ
ดันระยะลบเข้าไปเท่าไหร่ก็ถูกกลืนหมด — ทดลองแล้ว ใส่ 4rem ขยับ ใส่ -0.8rem ไม่ขยับ
การจัดกึ่งกลาง/ชิดซ้ายไม่เสีย เพราะคุมด้วย text-align ของกล่องหัวข้ออยู่แล้ว
(.mo-chip--pill ไม่กระทบ มันสั่ง inline-flex ทับอยู่แล้ว) */
display: block;
/* ป้ายไม่ถือระยะใต้ตัวเอง ระยะป้าย→หัวข้อมาจาก margin-top ของหัวข้อที่เดียว
ถ้าปล่อยให้ป้ายถือด้วย จะได้ระยะเริ่มต้นของย่อหน้าจากธีมแม่ซึ่งคิดเป็น
เท่าของขนาดตัวอักษร → ขยายป้ายทีไร ป้ายลอยห่างหัวข้อทุกที */
margin-bottom: 0;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-strong);
letter-spacing: 0.18em;
line-height: 1;
color: var(--c-accent-text);
}
.mo-chip--invert { color: var(--c-accent-light); }
/* ชิปแคปซูลแบบเดิม เหลือที่ใช้ที่เดียวคือหัวเว็บ
ตรงนั้นเป็นข้อความไทยบอกประเภทคลินิกกับทำเล ไม่ใช่ป้ายกำกับ section
จึงไม่จัดตัวอักษรห่าง และยังต้องการพื้นหลังเพราะวางทับภาพ */
.mo-chip--pill {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.45em 1.1em;
border: 1px solid var(--c-line);
border-radius: var(--radius-pill);
background: var(--c-surface);
font-family: var(--font-body);
font-size: var(--fs-micro);
letter-spacing: var(--ls-eyebrow);
color: var(--c-ink-soft);
}
.mo-chip--pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-accent);
}
.mo-chip--pill.mo-chip--invert {
background: rgba(251,250,248,.10);
border-color: rgba(196,166,127,.4);
color: var(--c-accent-light);
}
/* --- Section heading block ------------------------------------------------ */
/* ความกว้างคุมด้วย --head-width ใน tokens.css — เดิมฝังไว้ตรงนี้ 40ch แล้ว 54ch
ทั้งสองค่าแคบเกินไปสำหรับหัวข้อไทย ตัดบรรทัดกลางคำบ่อย จึงย้ายออกไปเป็น token ให้ปรับง่าย */
/* ระยะใต้กล่องหัวข้อ ก่อนถึงเนื้อหาของ section
ไม่ใช้ --sp-5 ตายตัวเพราะบนมือถือ 64px ดันหัวข้อกับเนื้อหาห่างกันเกินไป
จนต้องเลื่อนจอถึงจะเห็นว่าหัวข้อนี้พูดถึงอะไร */
.mo-head { text-align: center; max-width: var(--head-width); margin-inline: auto;
margin-bottom: clamp(2rem, 1.25rem + 2vw, 3rem); }
/* ระยะจากป้ายอังกฤษลงมาหาหัวข้อไทย คุมด้วย --eyebrow-gap ใน tokens.css
เดิมเป็น 1.15rem ตั้งไว้ตอนที่ป้ายยังเป็นแคปซูลมีกรอบ พอถอดกรอบออกแล้วยังไม่ได้ลดตาม
ป้ายจึงลอยห่างหัวข้อ — ลดลงเมื่อ 26 ส.ค. 2569 ตามที่เจ้าของสั่ง */
.mo-head h2 { margin: var(--eyebrow-gap) 0 var(--sp-2); }
/* section ที่ไม่มีป้ายอังกฤษนำ (7 จาก 10 ตาม design-fixes ข้อ 2) ไม่ต้องเว้นระยะบน
--eyebrow-gap มีหน้าที่เว้นระยะ "จากป้ายลงมาหาหัวข้อ" ไม่มีป้ายก็ไม่มีอะไรให้เว้นจาก
ปล่อยไว้จะได้ช่องว่างลอยอยู่เหนือหัวข้อ แล้วระยะเปิด section ของแบบมีป้าย
กับแบบไม่มีป้ายจะไม่ตรงกัน ทั้งที่ควรเริ่มที่ระดับเดียวกัน */
.mo-head:not(:has(.mo-chip)) h2 { margin-top: 0; }
/* **ต้องยกเว้น .mo-chip ออกไป — บั๊กที่ซ่อนอยู่จนถึง 26 ส.ค. 2569**
ป้ายอังกฤษเหนือหัวข้อก็เป็นบล็อกย่อหน้าเหมือนกัน กฎนี้จึงกินป้ายไปด้วย
และ `.mo-head p` แรงกว่า `.mo-chip` (คลาส+อีลิเมนต์ ชนะ คลาสเปล่า)
ผลคือป้ายไม่เคยได้สีทองแดงกับขนาดของตัวเองเลยสักครั้ง ออกมาเป็นเทาน้ำเงิน
ขนาดเท่าย่อหน้านำ — ซึ่งทำให้มันอ่านเหมือนประโยค ไม่ใช่ป้ายกำกับ
ตรงข้ามกับที่ตั้งใจไว้ตอนถอดกรอบแคปซูลออก (ดูเหตุผลที่บล็อก .mo-chip ข้างบน)
แก้ด้วยการตัดป้ายออกจากขอบเขตของกฎ ไม่ใช่ไปเพิ่มความแรงให้ .mo-chip
เพราะต้นเหตุคือกฎนี้กว้างเกินไป ไม่ใช่ .mo-chip อ่อนเกินไป */
.mo-head p:not(.mo-chip) { color: var(--c-ink-soft); font-size: var(--fs-lead); text-wrap: pretty; }
.mo-head--left { text-align: left; margin-inline: 0; }
/* ปรับความกว้างกล่องหัวข้อเป็นราย section โดยไม่ต้องแตะไฟล์
พิมพ์คลาสในช่อง "คลาส CSS เพิ่มเติม" ของกล่องหัวข้อในหน้าจอแก้ไข
ค่าเริ่มต้นของทั้งเว็บอยู่ที่ --head-width ใน tokens.css */
.mo-head--wide { max-width: var(--head-wide); }
.mo-head--full { max-width: none; }
/* หัวข้อแบบสองคอลัมน์ — หัวข้อซ้าย คำอธิบายขวา
ใช้สลับกับแบบกึ่งกลางเพื่อไม่ให้ทุก section เปิดหน้าเหมือนกันหมด
หน้าที่ทุกส่วนจัดกึ่งกลางเรียงกันยาว ๆ จะอ่านออกมาแข็งและซ้ำ */
/* **ระยะระหว่างแถวต้องเป็นศูนย์ ห้ามใส่ --eyebrow-gap ตรงนี้**
--eyebrow-gap เป็นค่าติดลบ (เหตุผลอยู่ที่ tokens.css) และ gap ของตาราง
รับค่าติดลบไม่ได้ ถ้าใส่ลงไป เบราว์เซอร์จะทิ้งทั้งบรรทัด
ระยะซ้ายขวา 4rem จะหายไปด้วย หัวข้อกับคำอธิบายจะไปติดกันโดยไม่มีอะไรเตือน
→ ระยะป้าย→หัวข้อของแบบนี้ไปฝากไว้ที่ margin-top ของ h2 แทน ซึ่งติดลบได้ */
.mo-head--split {
text-align: left;
max-width: none;
gap: 0 var(--sp-5);
display: grid;
align-items: end;
}
.mo-head--split .mo-chip { justify-self: start; }
/* ระยะห่างระหว่างบรรทัดคุมด้วย margin ของหัวข้อที่เดียว
ล้าง margin ที่ติดมากับบล็อกย่อหน้าทิ้ง ไม่งั้นจะได้ระยะซ้อนกันสองชุด */
.mo-head--split p { margin-block: 0; }
/* ไม่ต้องเขียนกฎ margin ของ h2 ซ้ำที่นี่ — กล่องนี้มีคลาส .mo-head ติดมาด้วยเสมอ
จึงได้ระยะชุดเดียวกับหัวข้อแบบกึ่งกลางอยู่แล้ว ทั้งระยะบนและระยะล่าง */
@media (min-width: 900px) {
.mo-head--split { grid-template-columns: 1fr 1fr; }
/* ป้ายแคปซูลกินเต็มแถวบน แล้วหัวข้อกับคำอธิบายค่อยแยกซ้ายขวาในแถวถัดมา */
.mo-head--split .mo-chip { grid-column: 1 / -1; }
.mo-head--split p:last-child { margin-bottom: .4em; }
/* พอแยกซ้ายขวาแล้ว หัวข้อกับคำอธิบายอยู่แถวเดียวกัน ไม่ได้ซ้อนกัน
ระยะใต้หัวข้อจึงต้องคืนเป็นศูนย์ ไม่งั้นหัวข้อจะถูกดันลอยขึ้นจากเส้นฐาน */
.mo-head--split h2 { margin-bottom: 0; }
}
/* --- Section backgrounds -------------------------------------------------- */
/* --- รอยต่อระหว่าง section แบบไล่จาง ----------------------------------------
ปัญหาเดิม: ทุก section จบด้วยเส้นตรงคมกริบ หน้าเว็บจึงอ่านออกมาเป็นกล่อง
สี่เหลี่ยมวางซ้อนกัน ไม่ใช่หน้าเดียวที่ไหลต่อกัน
**รอบแรกทำแล้วออกมาดูตลก แก้ใหม่ 26 ส.ค. 2569 — สาเหตุมีสองข้อ**
ข้อแรก ไล่สีแบบเส้นตรงจะเห็นรอยพับตรงหัวและท้าย เพราะตาคนไวต่อ
"จุดที่อัตราการเปลี่ยนสีเปลี่ยนกะทันหัน" มากกว่าตัวการเปลี่ยนสีเอง
(ปรากฏการณ์ Mach band) ต่อให้สีสองสีใกล้กันแค่ไหนก็ยังเห็นเป็นขีดจาง ๆ
แก้ด้วยการใส่จุดสีกลางทางตามเส้นโค้ง smoothstep 3t²-2t³
ซึ่งออกตัวและเข้าเส้นชัยด้วยความชันศูนย์ หัวกับท้ายจึงไม่มีรอยพับ
ข้อสอง ช่วงไล่สั้นเกินไป 96px บนแถบสูง 800px อ่านออกมาเป็น "ขอบเบลอ"
ไม่ใช่ "การไล่" ยืดเป็น 176px บนเดสก์ท็อป
ไม่มีคลาสให้ใส่มือ — CSS ดูเองว่าเพื่อนบ้านเป็นสีอะไรด้วย :has() และ
ตัวเลือกพี่น้อง เพราะถ้าใส่คลาสมือ วันไหนสลับลำดับ section ในหน้าจอแก้ไข
รอยต่อจะผิดทันทีโดยไม่มีอะไรเตือน
ถ้าเบราว์เซอร์ไม่รู้จัก :has() กฎนั้นจะถูกทิ้งทั้งกฎ ผลคือได้ขอบคมแบบเดิม
ไม่พัง จึงต้องเขียนกฎ :has() แยกกฎเสมอ ห้ามเอาไปรวมในรายการตัวเลือกเดียวกัน
กับตัวเลือกอื่น ไม่งั้นตัวเลือกอื่นจะถูกทิ้งไปด้วย
**พื้น navy ไม่ไล่ ใช้ขอบคม — ตั้งใจ** ลองแล้วไม่เวิร์ก
คู่สีที่ต่างกันมากขนาด navy กับ cream ต้องใช้ช่วงไล่ยาว 200px ขึ้นไป
ถึงจะดูเป็นการไล่ ไม่ใช่ขอบเบลอ แต่ยาวขนาดนั้นไม่ได้
เพราะ eyebrow อยู่ห่างจากขอบบนแค่ 80px มันจะไปนั่งบนพื้นที่จางไปแล้ว
คอนทราสต์ตกจนไม่ผ่านเกณฑ์ ขอบคมบนแถบสีเข้มอ่านออกมาเป็นโครงสร้างที่ตั้งใจอยู่แล้ว
-------------------------------------------------------------------------- */
.mo-section--tint {
/* **ปิดการไล่สีเมื่อ 28 ส.ค. 2569** (design-fixes.md ข้อ 2.5)
ค่าเดิม clamp(4rem, 2rem + 9vw, 11rem) — ใส่กลับได้ด้วยการแก้บรรทัดนี้บรรทัดเดียว
กลไกไล่สีข้างล่างยังอยู่ครบ ไม่ได้ลบ พอ seam เป็น 0 จุดสีกลางทางทุกจุด
จะยุบไปกองที่ขอบพร้อมกัน เหลือเป็นสีทึบพอดี
**ข้อนี้กลับคำตัดสินใจเมื่อ 26 ส.ค. 2569** ซึ่งทำไว้เพื่อแก้อาการ "หน้าอ่านออกมา
เป็นกล่องสี่เหลี่ยมวางซ้อนกัน" การไล่สีแก้อาการนั้นได้จริง แต่ราคาที่จ่ายคือ
**บอกไม่ได้ว่า section จบตรงไหน** ซึ่งเจ้าของเห็นว่าแพงกว่า
→ ที่สำคัญ: ตอนตัดสินใจครั้งนั้น cream ยังเป็น #f6f0e9 ซึ่งห่างจาก paper
แค่ 4 ระดับ ขอบคมจึงแทบไม่มีน้ำหนักอยู่แล้ว พอเปลี่ยนเป็น #efe6da ตามข้อ 3
ขอบคมกลายเป็นเส้นแบ่งที่อ่านได้จริง เหตุผลเดิมที่ต้องไล่สีจึงหมดไปครึ่งหนึ่ง */
--mo-seam: 0px;
--mo-seam-t: var(--mo-seam);
--mo-seam-b: var(--mo-seam);
/* จุดสีกลางทางคำนวณจาก smoothstep ที่ t = .15 .30 .50 .70 .85
ได้สัดส่วน cream = 6% 22% 50% 78% 94% ตามลำดับ
เขียนเป็น color-mix ไม่ใช่รหัสสี จะได้เปลี่ยนพาเลตต์ที่ tokens.css ที่เดียวจบ */
background: linear-gradient(180deg,
var(--c-surface) 0,
color-mix(in srgb, var(--c-canvas) 6%, var(--c-surface)) calc(var(--mo-seam-t) * .15),
color-mix(in srgb, var(--c-canvas) 22%, var(--c-surface)) calc(var(--mo-seam-t) * .30),
color-mix(in srgb, var(--c-canvas) 50%, var(--c-surface)) calc(var(--mo-seam-t) * .50),
color-mix(in srgb, var(--c-canvas) 78%, var(--c-surface)) calc(var(--mo-seam-t) * .70),
color-mix(in srgb, var(--c-canvas) 94%, var(--c-surface)) calc(var(--mo-seam-t) * .85),
var(--c-canvas) var(--mo-seam-t),
var(--c-canvas) calc(100% - var(--mo-seam-b)),
color-mix(in srgb, var(--c-canvas) 94%, var(--c-surface)) calc(100% - var(--mo-seam-b) * .85),
color-mix(in srgb, var(--c-canvas) 78%, var(--c-surface)) calc(100% - var(--mo-seam-b) * .70),
color-mix(in srgb, var(--c-canvas) 50%, var(--c-surface)) calc(100% - var(--mo-seam-b) * .50),
color-mix(in srgb, var(--c-canvas) 22%, var(--c-surface)) calc(100% - var(--mo-seam-b) * .30),
color-mix(in srgb, var(--c-canvas) 6%, var(--c-surface)) calc(100% - var(--mo-seam-b) * .15),
var(--c-surface) 100%);
}
/* ด้านที่ติดกับพื้นมืดต้องเป็นขอบคม ไล่จางเป็น paper ตรงนั้นจะได้แถบสว่าง
แปลก ๆ คั่นระหว่าง cream กับ navy
ตั้งเป็น 0 แล้วจุดสีกลางทางทุกจุดจะยุบมากองที่ 0 พร้อมกัน = ขอบคมพอดี */
.mo-section--night + .mo-section--tint { --mo-seam-t: 0px; }
.mo-section--tint:has(+ .mo-section--night) { --mo-seam-b: 0px; }
/* ใต้ hero ก็ไม่ไล่เหมือนกัน — เจ้าของสั่งเมื่อ 26 ส.ค. 2569
hero เป็นแถบภาพถ่าย ขอบล่างของมันคือขอบของ **รูป** ไม่ใช่ขอบของแถบสี
การไล่สีของ section ที่อยู่ถัดลงมาช่วยอะไรตรงนั้นไม่ได้เลย เพราะรอยที่ตาเห็น
อยู่เหนือขึ้นไปที่ตัวรูป กลับกลายเป็นได้แถบ paper คั่นเพิ่มมาอีกชั้นแทน
→ รอยต่อตรงนี้จะไปแก้ที่ไฟล์รูปโดยตรง ไม่ใช่แก้ด้วย CSS
ครอบ .mo-pagehero ด้วยเพราะเป็นแถบเต็มความกว้างเหมือนกันและเป็นพื้นมืด
ซึ่งเข้ากฎ "ด้านที่ติดพื้นมืดต้องเป็นขอบคม" ข้างบนอยู่แล้ว */
.mo-hero + .mo-section--tint,
.mo-pagehero + .mo-section--tint { --mo-seam-t: 0px; }
.mo-section--night {
background: var(--c-night);
color: rgba(251,250,248,.85);
background-size: cover;
background-position: center;
position: relative;
isolation: isolate;
}
.mo-section--night::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(19,32,53,.86), rgba(19,32,53,.94));
}
/* เพิ่ม h1 เข้ามาเมื่อ 2 ก.ย. 2569 — เดิมมีแค่ h2 กับ h3 เพราะยังไม่เคยมีหน้าไหน
วาง h1 ไว้บนพื้นเข้ม (ฮีโร่เดิมใช้ .mo-hero / .mo-pagehero ซึ่งมีกฎสีของตัวเอง)
พอหน้า /home-v2/ เอาฮีโร่มาไว้ใน .mo-section--night ตัวหนังสือหัวเรื่องจึงเป็น
กรมท่าบนพื้นกรมท่า = มองไม่เห็นทั้งบรรทัด */
.mo-section--night :where(h1, h2, h3) { color: var(--c-ink-invert); }
/* ข้อความรองพวกนี้กำหนดสีเทาเข้มไว้เองสำหรับพื้นสว่าง พอมาอยู่บนพื้น navy จะจมหาย
ต้องดึงกลับเป็นสีอ่อน — ยกเว้นที่อยู่ในการ์ดพื้นสว่างซึ่งใช้สีเดิมถูกอยู่แล้ว
ยกเว้น .mo-chip ด้วยเหตุผลเดียวกับที่ .mo-head p ข้างบน — ป้ายมีสีของตัวเอง
สำหรับพื้นมืดอยู่แล้วคือ .mo-chip--invert ถ้าปล่อยให้กฎนี้กิน ป้ายจะกลายเป็นขาว
แล้วหายไปกลืนกับหัวข้อที่อยู่ใต้มันซึ่งก็ขาวเหมือนกัน */
/* **ย่อหน้าใต้หัวข้อไม่เคยได้สีอ่อนจริงเลย — แก้ 24 ก.ย. 2569**
เดิม .mo-head p อยู่ใน :where() รวมกับอีกสองตัว ซึ่งทำให้ความแรงเหลือ 0-1-0
แพ้ .mo-head p:not(.mo-chip) (0-2-1) ที่สั่งเทาน้ำเงินไว้สำหรับพื้นสว่าง
ย่อหน้าใต้หัวข้อบนพื้นกรมท่าจึงเป็น #5c6675 บน #132035 = ราว 2.9:1 ไม่ผ่านเกณฑ์
วัดเจอตอนทำหน้าบริการ แต่เป็นทุกหน้าที่มีแถบกรมท่า (หน้าแรก Visit Us · about)
→ แยกตัวนี้ออกมาเป็นตัวเลือกที่แรงกว่า (0-3-1) แก้ด้วยความแรงของตัวเลือก ไม่ได้บังคับ
→ ข้อยกเว้นของการ์ดพื้นสว่างต้องแรงเท่ากันด้วย และอยู่บรรทัดถัดไปจึงชนะ
(.mo-note กับ .mo-prose ทำงานถูกอยู่แล้ว เพราะความแรงเท่าคู่แข่งแต่อยู่ทีหลัง) */
.mo-section--night > * :where(.mo-note, .mo-prose),
.mo-section--night .mo-head p:not(.mo-chip) { color: rgba(251,250,248,.8); }
.mo-section--night :where(.mo-card, .mo-feature, .mo-rows) :where(.mo-note, .mo-prose),
.mo-section--night :where(.mo-card, .mo-feature, .mo-rows) .mo-head p:not(.mo-chip) { color: var(--c-ink-soft); }
/* --- Hero ----------------------------------------------------------------- */
.mo-hero {
background: var(--c-night) center/cover;
color: var(--c-ink-invert);
/* **ระยะบนขยายเมื่อ 23 ก.ย. 2569 ตอนหัวเว็บเต็มจอมาใช้ทั้งเว็บ**
หัวเว็บลอยทับฮีโร่อยู่ (position: absolute) ระยะบนจึงต้องเผื่อความสูงหัวเว็บ
พอโลโก้ใหญ่ขึ้น หัวเว็บสูงจาก 92 เป็น 129px ที่จอ 1440 ค่าเดิมให้ระยะบน 136px
จึงเหลือช่องว่างใต้หัวเว็บแค่ 7px ซึ่งเบียดจนดูเหมือนชนกัน
ใช้ค่าเดียวกับ .mo-v2-hero จะได้ไม่มีเลขวิเศษสองชุดให้ลืมแก้ตัวใดตัวหนึ่ง
**ขยายโลโก้เมื่อไหร่ ต้องมาวัดค่านี้ใหม่ทุกครั้ง สองค่านี้ผูกกันอยู่** */
padding-block: clamp(4rem, 2rem + 10vw, 12rem) clamp(2.5rem, 2rem + 3.5vw, 4.5rem);
position: relative;
isolation: isolate;
}
.mo-hero::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(105deg, rgba(19,32,53,.82) 35%, rgba(19,32,53,.20));
}
.mo-hero h1 { color: var(--c-ink-invert); }
.mo-hero__lead { color: rgba(251,250,248,.82); font-size: var(--fs-lead); }
/* --- ความกว้างกล่องข้อความใน hero -------------------------------------------
ของเดิมคุมความกว้างแยกกันสามที่ — หัวข้อ 15ch · ย่อหน้า 46ch · แถบสรุป 42rem
สามค่านี้ไม่เท่ากัน ขอบขวาของแต่ละบรรทัดจึงไม่ตรงกัน และหัวข้อแคบกว่าเพื่อนมาก
ย้ายมาคุมที่กล่องใบเดียว ของข้างในไหลตามกล่องหมด เหลือค่าให้ปรับค่าเดียว
ค่าเริ่มต้นอยู่ที่ --hero-text-width ใน tokens.css
ถ้าอยากปรับเฉพาะบางหน้าโดยไม่แตะไฟล์ ให้พิมพ์คลาส --narrow / --wide / --full
ลงในช่อง "คลาส CSS เพิ่มเติม" ของกล่องข้อความในหน้าจอแก้ไข
คุมเฉพาะจอ 861px ขึ้นไป ซึ่งเป็นช่วงที่ยังมีภาพคนอยู่ทางขวา
จอแคบกว่านั้นภาพถูกปิดไปแล้ว กล่องข้อความใช้เต็มความกว้างได้เลย
--------------------------------------------------------------------------- */
@media (min-width: 861px) {
.mo-hero__text { max-width: var(--hero-text-width); }
.mo-hero__text--narrow { max-width: var(--hero-text-narrow); }
.mo-hero__text--wide { max-width: var(--hero-text-wide); }
.mo-hero__text--full { max-width: 100%; }
}
/* แถบข้อมูลสรุปมี max-width ของตัวเองไว้ใช้ตอนไปอยู่ใน .mo-pagehero
พอมาอยู่ในกล่องข้อความของ hero ต้องปล่อยให้กว้างเท่ากล่อง ไม่งั้นปรับกล่องแล้วมันไม่ตาม */
.mo-hero__text .mo-specbar { max-width: 100%; }
/* --- Hero แบบพื้นสว่าง -------------------------------------------------------
ใช้เมื่อภาพหลักของ hero ถ่าย/เรนเดอร์มาบนพื้นขาว ซึ่งตัดพื้นหลังออกไม่ได้
วางภาพพื้นขาวบน hero น้ำเงินจะได้กล่องขาวแปะกลางจอ จึงต้องพลิกทั้ง hero เป็นสว่าง
เมื่อใช้ตัวนี้ ต้องไล่สีพื้นของ section ถัดไปใหม่ทั้งหน้าด้วย (กฎห้ามสีเดียวกันติดกัน)
--------------------------------------------------------------------------- */
.mo-hero--light {
/* ภาพกินเต็มความกว้างจอ ไม่ได้วางเป็นรูปในกรอบ — เพราะพื้นขาวของภาพกับพื้นขาวของเว็บ
ไม่ใช่เฉดเดียวกัน วางเป็นกรอบเมื่อไหร่จะเห็นรอยต่อเป็นสี่เหลี่ยมทันที
ยึดขอบขวาไว้ เพราะตัวคนอยู่ขวา ส่วนที่ถูกตัดตอนจอแคบคือพื้นว่างด้านซ้ายซึ่งตัดได้ */
background: var(--c-surface) url("../images/hero-banner.webp") no-repeat right center / cover;
color: var(--c-ink);
}
.mo-hero--light::before { content: none; }
/* จอแคบ: ตัดภาพออก เหลือแต่ตัวหนังสือ
ถ้าปล่อยไว้ ภาพแนวนอนจะถูกขยายจนตัวคนหลุดออกนอกจอ เหลือแต่พื้นเทา
แถมยังต้องโหลดไฟล์ทิ้งเปล่า ๆ บนเครื่องที่เน็ตช้าที่สุด */
@media (max-width: 860px) {
.mo-hero--light { background-image: none; }
/* พอตัดภาพออก hero ก็เหลือเป็นพื้น paper เรียบ ๆ ไม่ใช่แถบภาพอีกต่อไป
เหตุผลที่ยกเลิกการไล่สีใต้ hero จึงหมดไปด้วย — คืนการไล่สีให้ section ถัดไป
ไม่งั้นจอมือถือจะได้เส้นคม paper/cream คั่นกลับมาแทน
**จงใจเขียนไว้ในบล็อกเดียวกับที่ตัดภาพ** จะได้ไม่มีเลข 860px สองที่ให้แก้ไม่ครบ */
.mo-hero--light + .mo-section--tint { --mo-seam-t: var(--mo-seam); }
}
.mo-hero--light h1 { color: var(--c-ink); }
.mo-hero--light .mo-hero__lead { color: var(--c-ink-soft); }
.mo-hero--light .mo-btn--ghost {
color: var(--c-brand);
box-shadow: inset 0 0 0 1.5px var(--c-brand);
}
.mo-hero--light .mo-btn--ghost:hover { background: var(--c-canvas); color: var(--c-brand-dark); }
.mo-hero--light .mo-specbar {
background: var(--c-surface);
border-color: var(--c-line);
backdrop-filter: none;
}
.mo-hero--light .mo-spec + .mo-spec { border-left-color: var(--c-line); }
.mo-hero--light .mo-spec__label { color: var(--c-accent-text); }
.mo-hero--light .mo-spec__value { color: var(--c-ink); }
/* --- Button --------------------------------------------------------------- */
/* ต้นฉบับมีวงกลมลูกศรติดท้ายปุ่ม — ทำด้วย pseudo-element ไม่ต้องใส่ไอคอนในเนื้อหา */
.mo-btn--arrow::after {
content: "→";
display: grid;
place-items: center;
width: 1.75em; height: 1.75em;
margin-right: -1em;
border-radius: 50%;
background: var(--c-surface);
color: var(--c-brand);
font-size: .8em;
transition: transform var(--dur) var(--ease);
}
.mo-btn--arrow:hover::after { transform: translateX(3px); }
.mo-btn--light { background: var(--c-surface); color: var(--c-brand); }
.mo-btn--accent { background: var(--c-accent); color: var(--c-brand); }
.mo-btn--accent:hover { background: var(--c-accent-light); color: var(--c-brand); }
.mo-btn--light:hover { background: var(--c-canvas); color: var(--c-brand-dark); }
/* --- Stat row ------------------------------------------------------------- */
.mo-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--sp-3);
margin-top: var(--sp-5);
text-align: center;
}
.mo-stats > * + * { border-left: 1px solid var(--c-line); }
@media (max-width: 767px) { .mo-stats > * + * { border-left: 0; border-top: 1px solid var(--c-line); padding-top: var(--sp-3); } }
.mo-stat__num { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1; }
.mo-stat__label { font-weight: var(--fw-strong); margin-top: var(--sp-1); }
.mo-stat__note { font-size: var(--fs-small); color: var(--c-ink-soft); }
/* --- Numbered row (ส่วน "Wellness That Fits Your Schedule") ---------------- */
/* การ์ดสีอ่อนที่วางบน section พื้นมืด — ต้องดึงสีตัวหนังสือกลับเป็นเข้ม
ไม่งั้นข้อความที่ไม่ได้กำหนดสีเองจะสืบทอดสีขาวจาก section แล้วจมหายไปกับพื้นการ์ด */
.mo-rows {
background: var(--c-surface);
color: var(--c-ink);
border-radius: var(--radius-card);
padding: var(--sp-2);
}
/* สามช่อง: เลข+ชื่อขั้น / คำอธิบาย / ปุ่ม
แถวไหนใส่ภาพประกอบเข้ามา ช่องภาพจะแทรกให้เองโดยไม่ต้องเติมคลาส */
.mo-row {
display: grid;
grid-template-columns: 14rem 1fr auto;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-2);
}
.mo-row:has(img) { grid-template-columns: 14rem 7rem 1fr auto; }
.mo-row + .mo-row { border-top: 1px solid var(--c-line); }
/* ตัวเลขลำดับตัวใหญ่สีทองแดง — เป็นจุดสะดุดตาเดียวของ section นี้
ถ้าปล่อยให้เล็กเท่าเนื้อหา ทั้งบล็อกจะอ่านออกมาเป็นตารางข้อมูลแทนที่จะเป็นลำดับขั้น */
.mo-row__num {
font-family: var(--font-display);
font-size: var(--fs-num);
line-height: 1;
color: var(--c-accent);
}
.mo-row__num b {
display: block;
margin-top: var(--sp-1);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-tight);
color: var(--c-ink);
font-weight: var(--fw-strong);
}
.mo-row img { border-radius: var(--radius-sm); }
.mo-row__desc { font-size: var(--fs-small); color: var(--c-ink-soft); }
@media (max-width: 900px) {
.mo-row { grid-template-columns: 1fr; text-align: left; }
}
/* --- Pricing / package card ------------------------------------------------ */
.mo-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); align-items: start; }
.mo-plan {
background: var(--c-surface);
border-radius: var(--radius-card);
padding: var(--sp-4) var(--sp-3);
text-align: center;
}
.mo-plan--featured { background: var(--c-brand); color: var(--c-ink-invert); padding-block: calc(var(--sp-4) + var(--sp-2)); }
.mo-plan--featured :where(h3, .mo-plan__price) { color: var(--c-ink-invert); }
.mo-plan--featured .mo-btn { background: var(--c-surface); color: var(--c-brand); }
.mo-plan__price { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.mo-plan__price small { font-size: var(--fs-small); color: inherit; opacity: .75; }
.mo-plan ul { list-style: none; padding: 0; margin: var(--sp-3) 0; font-size: var(--fs-small); }
.mo-plan li { padding-block: .35em; }
/* --- Team card ------------------------------------------------------------- */
.mo-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
/* บล็อกรูปห่อด้วย figure และย่อหน้ามาจากบล็อกย่อหน้า ทั้งคู่มีระยะขอบติดมา
ต้องล้างก่อนกฎ __name ข้างล่าง ไม่งั้นระยะห่างชื่อกับรูปเพี้ยน */
.mo-person figure { margin: 0; }
.mo-person :where(p) { margin-block: 0; } /* :where() ความแรงเป็นศูนย์ กฎ __name ข้างล่างจึงยังชนะ */
.mo-person img { border-radius: var(--radius-img); width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.mo-person__name { font-family: var(--font-display); font-size: var(--fs-h3); margin-top: var(--sp-2); }
.mo-person__role, .mo-person__license { font-size: var(--fs-small); color: var(--c-ink-soft); }
.mo-person__license { font-variant-numeric: tabular-nums; }
/* ทีมสองคน — จำกัดความกว้างการ์ดแล้วจัดกึ่งกลาง
ถ้าปล่อยให้ auto-fit ยืดเต็ม 1200px การ์ดสองใบจะกว้างใบละ 590px
รูปคนถูกยืดจนสัดส่วนดูผิด และเหลือที่ว่างใต้ชื่อเป็นแถบยาว
→ ได้รูปคนที่ 3 เมื่อไหร่ให้เอาคลาสนี้ออกจาก pattern ตะแกรงจะกลับเป็น 3 คอลัมน์เอง */
.mo-team--pair {
grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
justify-content: center;
}
/* ช่องที่ตั้งใจเว้นไว้รอข้อมูลจริงจากคลินิก — ไม่ใช่ข้อความที่ลืมแก้
ทำให้ดูต่างจากข้อความจริงชัด ๆ จะได้ไม่มีใครเผลออ่านว่าเป็นเนื้อหา
และคนที่มาเติมทีหลังเห็นทันทีว่าต้องเติมตรงไหนบ้าง
**เอาออกพร้อมกับตอนเติมข้อมูลจริง** อย่าปล่อยให้คลาสค้างอยู่กับข้อความจริง */
.mo-pending {
color: var(--c-ink-soft);
font-style: italic;
text-decoration: underline dashed var(--c-line);
text-underline-offset: .35em;
}
/* --- Footer wordmark ------------------------------------------------------- */
/* ตัวอักษรยักษ์ท้ายเว็บ — เป็นของตกแต่ง ต้องซ่อนจาก screen reader */
/* ออกแบบไว้สำหรับคำสั้นอย่าง "Moveon" — ดู moveon_wordmark ใน functions.php
ว่าทำไมห้ามเอาชื่อเว็บเต็มมาใส่ กติกาสองข้อล่างเป็นตาข่ายกันพลาดเฉย ๆ
ถ้าวันหลังใครใส่คำยาว หน้าเว็บจะได้ไม่ล้มทั้งหน้า */
.mo-wordmark {
font-family: var(--font-display);
/* ปรับสองรอบในวันเดียว (31 ส.ค. 2569) — บันทึกไว้กันปรับวนอีก
รอบแรกตีความคำว่า "ให้เต็ม" เป็น "ตัวอักษรกว้างเท่าจอ" จึงตั้ง 27.8vw ไม่มีเพดาน
ผลคือบนจอกว้างตัวอักษรสูงราว 420px ซึ่ง **สูงกว่าเนื้อหาท้ายเว็บทั้งก้อน**
เจ้าของบอกว่า "ใหญ่และกว้างมากเกินไป" → คำว่าให้เต็มหมายถึงให้เข้าไปอยู่ใน
ท้ายเว็บ ไม่ใช่ให้ตัวอักษรกินทุกพิกเซล
20vw ทำให้คำกว้างราว 70% ของจอเท่ากันทุกขนาด เหลือขอบซ้ายขวาให้หายใจ
และความสูงลดลงราวหนึ่งในสี่ — ยังเป็นวอร์ดมาร์กตัวโต แต่ไม่ทับเนื้อหาข้างบน
เพดาน 26rem มีไว้กันจอ 4K ที่ 20vw จะแปลว่าตัวอักษรสูงกว่า 600px
ส่วนพื้น 3rem กันจอเล็กมากไม่ให้เล็กจนอ่านไม่ออก
**ตัวเลขมาจากการวัดหน้าจริง ไม่ได้คำนวณจากทฤษฎี** เปลี่ยนคำในวอร์ดมาร์ก
เมื่อไหร่ต้องวัดใหม่ เพราะคำยาวไม่เท่ากันก็กินที่ไม่เท่ากัน */
font-size: clamp(3rem, 20vw, 26rem);
line-height: .8;
text-align: center;
background: linear-gradient(180deg, var(--c-accent), rgba(163,127,83,0));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
user-select: none;
margin-top: var(--sp-4);
overflow: hidden; /* คำยาวเกินให้ถูกตัด ไม่ใช่ดันหน้าเว็บให้เลื่อนแนวนอนได้ */
line-break: loose; /* ไทยไม่มีช่องว่างระหว่างคำ ต้องบอกให้ตัดบรรทัดได้ */
}
/* ==========================================================================
Inner pages — ถอดจาก about / contact / our-program / program-detail
========================================================================== */
/* --- Page hero (ทุกหน้ารองใช้ตัวนี้) --------------------------------------- */
.mo-pagehero {
background: var(--c-night) center/cover;
color: var(--c-ink-invert);
text-align: center;
/* **ระยะบนกับล่างไม่เท่ากันแล้วตั้งแต่ 23 ก.ย. 2569 — ตั้งใจ**
หัวเว็บลอยทับหัวหน้ารองอยู่ (position: absolute) เฉพาะ "ระยะบน" จึงต้องเผื่อ
ความสูงหัวเว็บ ส่วนระยะล่างไม่ได้ทับอะไร ขยายไปก็แค่ทำให้แถบสูงขึ้นเฉย ๆ
ตอนหัวเว็บเต็มจอมาใช้ทั้งเว็บ หัวเว็บสูงจาก 108 เป็น 129px ที่จอ 1440
ค่าเดิม (เพดาน 9rem = 144px) จึงเหลือช่องว่างใต้หัวเว็บแค่ 15px จากเดิม 36px
**ขยับแค่เพดาน ไม่แตะขาต่ำกับขากลาง** จอ 375 กับ 768 จึงได้ค่าเท่าเดิมเป๊ะ
(85.5px และ 124.8px) ซึ่งเป็นระยะที่เจ้าของเห็นและรับไปแล้ว
เพดานใหม่ 11rem = 176px ได้ช่องว่างกลับมา 47px เท่ากับที่หน้าแรกได้
**ขยายโลโก้เมื่อไหร่ ต้องมาวัดค่านี้ใหม่ทุกครั้ง สองค่านี้ผูกกันอยู่** */
padding-block: clamp(5rem, 3rem + 10vw, 11rem) clamp(5rem, 3rem + 10vw, 9rem);
position: relative;
isolation: isolate;
}
/* หัวหน้ารองแบบมีภาพพื้นหลัง — ใช้ชั้นทับสีกรมท่าของ .mo-pagehero ที่มีอยู่แล้ว
ภาพต้นฉบับสว่าง พอมีชั้นทับ .75→.88 ทับ จึงได้พื้นเข้มที่ยังเห็นเส้นกระดูกสันหลัง
เรืองทองอยู่จาง ๆ — ได้บรรยากาศแบบภาพเต็มจอโดยไม่ต้องหารูปใหม่
ประกาศเป็น background-image ตัวเดียว ไม่ใช่ shorthand จะได้ไม่ล้างค่า center/cover
ที่ .mo-pagehero ตั้งไว้ */
.mo-pagehero--photo { background-image: url("../images/hero-banner.webp"); }
.mo-pagehero::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(19,32,53,.75), rgba(19,32,53,.88));
}
/* **ระยะป้าย→หัวข้อของหัวหน้ารองมาคนละทางกับใน .mo-head ต้องตั้งเองทั้งสองฝั่ง**
ใน .mo-head บล็อกกลุ่มของ WordPress ล้างระยะใต้ลูกทุกตัวเป็นศูนย์ให้อยู่แล้ว
ระยะจึงมาจาก margin-top ของหัวข้ออย่างเดียว แต่หัวหน้ารองไม่ได้เป็นบล็อกกลุ่มแบบนั้น
ป้ายยังกินระยะใต้ย่อหน้าเริ่มต้นของธีมแม่อยู่ ซึ่งคิดเป็น **เท่าของขนาดตัวอักษร**
→ ยิ่งขยายป้าย ป้ายยิ่งลอยห่างหัวข้อ วัดแล้วห่างขึ้นจาก 39px เป็น 50px
ตอนที่กำลังแก้ให้ชิดขึ้นพอดี
สั่งศูนย์ที่ป้าย แล้วให้ระยะจริงมาจาก margin-top ของ h1 ทางเดียว
จะได้ใช้กลไกเดียวกับหัวข้อของ section และรับค่าติดลบได้ */
.mo-pagehero .mo-chip { margin-bottom: 0; }
.mo-pagehero h1 {
color: var(--c-ink-invert);
max-width: 18ch;
margin-inline: auto;
/* **หัก 1rem ออกจากค่ากลาง เป็นค่าชดเชยที่วัดมา ไม่ใช่เลขมั่ว**
ใส่ค่ากลางตรง ๆ แล้ววัดได้ 36px ทั้งที่หัวข้อ section ได้ 19px ทั้งที่สั่งเท่ากัน
ต่างกันเพราะสองเรื่องที่ CSS ไม่รู้ — ป้ายบนหัวหน้ารองเป็นคำที่ไม่มีหางลงล่าง
(Treatments) จึงเหลือที่ว่างใต้ตัวอักษรไว้เปล่า ๆ และหัวเรื่องที่นี่ตัวใหญ่กว่า
หัวข้อ section เกือบครึ่ง ที่ว่างเหนือตัวอักษรจึงมากกว่าตามไปด้วย
→ ถ้าเปลี่ยนคำในป้ายหรือขนาดหัวเรื่องเมื่อไหร่ ต้องเรนเดอร์วัดค่านี้ใหม่ */
margin-top: calc(var(--eyebrow-gap) - 1rem);
}
/* ยกเว้น .mo-chip ด้วยเหตุผลเดียวกับ .mo-head p — ป้ายก็เป็นบล็อกย่อหน้าเหมือนกัน
กฎนี้แรงกว่า .mo-chip จึงกลืนทั้งสีและขนาดของป้ายไปหมด
ป้ายบนหัวหน้ารองจึงเคยเป็นขาวจาง ๆ ตัวเล็ก ไม่ใช่ทองแดงอ่อนตัวโตอย่างที่ตั้งใจ
ถ้าไม่แก้พร้อมกัน ป้ายบนหัวหน้ารองจะเป็นจุดเดียวในเว็บที่หน้าตาไม่เหมือนที่อื่น */
.mo-pagehero p:not(.mo-chip) { color: rgba(251,250,248,.82); max-width: 52ch; margin-inline: auto; font-size: var(--fs-small); }
.mo-pagehero--left { text-align: left; }
/* ห้ามใช้ :where() ตรงนี้ — :where() มีความแรงเป็นศูนย์ ตัวเลือกทั้งบรรทัดจึงเหลือ
แค่คลาสเดียว แล้วแพ้ .mo-pagehero h1 ข้างบนซึ่งมีคลาส+อีลิเมนต์
ผลคือ --left ไม่เคยทำงานจริง หัวเรื่องกับย่อหน้ายังถูกจัดกึ่งกลางในกล่อง
ของตัวเอง (18ch / 52ch) แล้วลอยไปอยู่กลางจอ ไม่ตรงกับ chip ที่ชิดซ้าย
(เห็นตอนเรนเดอร์หน้าบริการที่ 1440px เมื่อ 25 ส.ค. 2569) */
/* **ต้องมี :not(.mo-chip) ตรงนี้ด้วย ไม่ใช่แค่ที่กฎกึ่งกลาง — เจอ 28 ส.ค. 2569**
รอบที่แล้วแก้เรื่อง :where() ไปแล้วก็จริง แต่ยังเหลือบั๊กเดียวกันอีกชั้น
`.mo-pagehero p:not(.mo-chip)` มีความแรง 0-2-1 (สองคลาส + อีลิเมนต์)
ส่วน `.mo-pagehero--left p` มีแค่ 0-1-1 → **ย่อหน้ายังถูกจัดกึ่งกลางตลอด**
หัวเรื่องไม่เจอปัญหาเพราะ `.mo-pagehero h1` ก็ 0-1-1 เท่ากัน เสมอกันแล้วตัวหลังชนะ
ผลที่เห็นคือหัวเรื่องชิดซ้ายแต่ย่อหน้าใต้มันลอยไปกลางจอ ไม่ตรงแกนกัน
→ **บทเรียนซ้ำรอบสอง: เขียนกฎล้างค่าเมื่อไหร่ ต้องนับความแรงให้ตรงกับกฎที่จะล้าง**
ไม่ใช่แค่เขียนให้ "เจาะจงกว่าในสายตา" */
.mo-pagehero--left h1,
.mo-pagehero--left p:not(.mo-chip) { margin-inline: 0; }
/* ย่อหน้านำของหน้ารองยาวได้กว่าเดิม — 52ch แคบไปเมื่อจัดชิดซ้าย
ตกบรรทัดถี่จนอ่านสะดุด (design-fixes ข้อ 2.2 ระบุ 60–70 ตัวอักษร) */
.mo-pagehero--left p:not(.mo-chip) { max-width: 66ch; }
/* หน้ารองที่ไม่มีป้ายอังกฤษนำ ไม่ต้องหักระยะชดเชยของป้าย
ค่า calc(--eyebrow-gap - 1rem) ข้างบนเป็นค่าชดเชยที่วัดจากคำว่า "Treatments"
ไม่มีป้ายแล้วมันจะกลายเป็นระยะติดลบลอย ๆ ที่ไม่ได้ชดเชยอะไรเลย */
.mo-pagehero:not(:has(.mo-chip)) h1 { margin-top: 0; }
/* --- Spec bar (แถบ 4 ช่องท้าย hero ของหน้า program detail) ------------------
ใช้เป็น "ข้อมูลสรุปการรักษา" — ระยะเวลา / จำนวนครั้ง / ความเหมาะสม
ตำแหน่งนี้เป็นจุดที่ Google ดึงไปทำ snippet ได้บ่อย ควรใส่ข้อเท็จจริงล้วน
--------------------------------------------------------------------------- */
.mo-specbar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
background: rgba(19,32,53,.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(196,166,127,.28);
border-radius: var(--radius-sm);
overflow: hidden;
margin-top: var(--sp-4);
max-width: 42rem;
}
/* ช่วงเวลาทำการต้องอยู่บรรทัดเดียว — "10.00–19.00" ตกบรรทัดตรงขีดกลางได้
แล้วช่องนั้นจะสูงกว่าช่องอื่นในแถวเดียวกัน ตัวเลขไม่อยู่ระดับเดียวกันทั้งแถว
ลดระยะขอบซ้ายขวาในช่องลงหนึ่งขั้น แลกที่ว่างให้ตัวเลขพอดีบรรทัดเดียว */
.mo-spec { padding: var(--sp-2); }
.mo-spec + .mo-spec { border-left: 1px solid rgba(196,166,127,.28); }
.mo-spec__label { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); color: var(--c-accent-light); }
.mo-spec__value { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--c-ink-invert); white-space: nowrap; }
/* --- Split (ภาพซ้าย / เนื้อหาขวา) ------------------------------------------
ตัวเลข 400px คือ "ความกว้างต่ำสุดที่คอลัมน์หนึ่งยังอ่านสบาย"
ต่ำกว่านั้นให้ยุบเป็นแถวเดียวแทน ไม่ใช่บีบสองคอลัมน์ต่อ
**ของเดิมเป็น 320px ซึ่งต่ำเกินไป** ที่จอ 768px มันยังยืนยันแบ่งสองคอลัมน์
ได้คอลัมน์ละราว 345px ผลคือรูปเล็กจนดูไม่ออกว่าเป็นใคร และข้อความไทย
ตัดบรรทัดถี่จนอ่านสะดุด — เปลี่ยนเป็น 400px เมื่อ 27 ส.ค. 2569
ตอนนี้ยุบเป็นแถวเดียวตั้งแต่ราว 880px ลงมา ซึ่งครอบทั้งแท็บเล็ตและมือถือ */
.mo-split {
display: grid;
/* **ต้องมี min() ครอบ ไม่งั้นจอแคบกว่า 400px จะล้นออกนอกจอ — แก้ 28 ส.ค. 2569**
minmax(400px, 1fr) อ่านว่า "คอลัมน์นี้ห้ามแคบกว่า 400px ไม่ว่าอะไรจะเกิดขึ้น"
พอ auto-fit ยุบเหลือคอลัมน์เดียวบนจอ 375px คอลัมน์นั้นก็ยัง 400px อยู่ดี
ตะแกรงจึงกว้างกว่าจอ ข้อความล้นออกไปทางขวาแล้วทั้งหน้าเลื่อนซ้ายขวาได้
min(400px, 100%) แปลว่า "400px หรือเท่าที่มี แล้วแต่อันไหนน้อยกว่า"
→ เจอ repeat(auto-fit, minmax(<ค่าคงที่>, 1fr)) ที่ไหนอีก ต้องครอบ min() ทุกที่ */
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
gap: clamp(var(--sp-3), 4vw, var(--sp-5));
align-items: center;
}
/* ห้ามใช้ > ที่นี่ — display:contents ไม่ได้ย้ายตำแหน่งใน DOM
ตัวที่เลือกด้วย > จะไปชี้กล่องซ้อนของบล็อกกลุ่ม ไม่ใช่ของจริง */
.mo-split--text-first :where(img, figure, .mo-portrait):first-child { order: 0; }
.mo-split img { border-radius: var(--radius-img); width: 100%; height: auto; }
/* คอลลาจภาพ แบบหน้า about
ภาพใบแรกสูงเป็นสองแถว อีกสองใบซ้อนกันในคอลัมน์ขวา
grid-auto-rows: 1fr บังคับให้สองแถวสูงเท่ากันและยืดเต็มความสูงที่มี
(เดิมใบแรกถูกสั่ง align-self: start ซึ่งขัดกับการกินสองแถว — มันจองที่ไว้แล้วไม่ยืด
เหลือช่องว่างใต้ภาพ ทำให้คอลลาจเตี้ยกว่าคอลัมน์ข้อความข้าง ๆ อย่างเห็นได้ชัด) */
.mo-collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: var(--sp-2);
align-self: stretch;
min-height: 24rem;
}
.mo-collage > :first-child { grid-row: span 2; }
@media (max-width: 600px) {
.mo-collage { grid-template-columns: 1fr; grid-auto-rows: auto; min-height: 0; }
.mo-collage > :first-child { grid-row: auto; }
}
/* --- Feature card + icon badge --------------------------------------------- */
.mo-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-2); }
/* กำหนดจำนวนคอลัมน์ตรง ๆ เมื่อรู้จำนวนการ์ดแน่นอน
ปล่อยให้ auto-fit คิดเองแล้วการ์ด 6 ใบจะเรียงเป็น 4+2 เหลือเศษห้อย ดูไม่เรียบร้อย */
@media (min-width: 640px) {
.mo-features--3, .mo-features--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.mo-features--3 { grid-template-columns: repeat(3, 1fr); }
.mo-features--4 { grid-template-columns: repeat(4, 1fr); }
}
.mo-feature {
background: var(--c-surface);
border-radius: var(--radius-card);
padding: var(--sp-3);
}
.mo-feature h3 { margin: var(--sp-2) 0 var(--sp-1); }
.mo-feature p { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }
.mo-icon {
display: grid;
place-items: center;
width: 2.75rem; height: 2.75rem;
border-radius: 50%;
background: var(--c-brand);
color: var(--c-accent-light);
font-size: 1.1rem;
}
.mo-icon--outline { background: transparent; border: 1px solid var(--c-accent); color: var(--c-accent-text); }
/* --- Checklist (รายการมีเส้นคั่นแบบหน้า about) ------------------------------ */
.mo-checklist { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.mo-checklist:first-child { margin-top: 0; }
.mo-checklist li {
display: flex;
gap: var(--sp-2);
padding: .8em 0;
border-bottom: 1px solid var(--c-line);
font-size: var(--fs-body);
line-height: var(--lh-tight);
}
/* ใช้ --c-accent-text ไม่ใช่ --c-accent เพราะนี่เป็น "ตัวอักษร" จริง ๆ ไม่ใช่รูป
ขนาดราว 19px ซึ่งต่ำกว่าเกณฑ์ข้อความใหญ่ ทองแดงอ่อนจึงไม่ผ่าน AA (design-fixes ข้อ 3) */
.mo-checklist li::before {
content: "✳";
color: var(--c-accent-text);
font-size: 1.15em;
line-height: inherit;
flex: none;
}
.mo-checklist li:last-child { border-bottom: 0; }
/* --- Checklist สองคอลัมน์ --------------------------------------------------
ใช้กับรายการสั้น ๆ ที่ไม่ได้เรียงตามลำดับ (เช่น "เตรียมอะไรมาบ้าง")
เรียงลงมาคอลัมน์เดียวแล้วหน้ายืดยาวเกินจำเป็น ทั้งที่แต่ละข้อไม่ได้ต่อเนื่องกัน
minmax(min(28rem, 100%), 1fr) ไม่ใช่ minmax(28rem, 1fr) — ถ้าไม่ครอบ min()
ตะแกรงจะกว้างกว่าจอมือถือแล้วเลื่อนซ้ายขวาได้
(กับดักที่ Design.md บันทึกไว้ เจอมาแล้ว 2 จุดเมื่อ 28 ส.ค. 2569)
**28rem ไม่ใช่ 20rem — ตัวเลขนี้เป็นตัวกำหนดว่าได้กี่คอลัมน์**
ลองด้วย 20rem (320px) ก่อนแล้วได้ 3 คอลัมน์บนจอ 1440 เพราะกล่อง .mo-wrap
กว้าง 1152px หารด้วย 320 ได้ 3.6 — ของ 4 ข้อเลยเรียงเป็น 3+1 ดูเหมือนวางพลาด
28rem (448px) ทำให้ 1152px ใส่ได้ 2 คอลัมน์พอดี (448×2+40 = 936) และ 3 ไม่พอ
(448×3+80 = 1424) จึงล็อกเป็น 2 คอลัมน์บนจอกว้างตามที่ไฟล์เนื้อหากำหนด
เส้นคั่นของข้อสุดท้ายต้องคืนกลับมา — กฎ :last-child ข้างบนตัดเส้นให้ข้อท้ายสุด
ซึ่งถูกตอนเรียงคอลัมน์เดียว แต่พอเป็นสองคอลัมน์ ข้อท้ายของคอลัมน์ซ้าย
ไม่ใช่ข้อสุดท้ายของรายการ เส้นจึงขาดไปข้างเดียวดูเหมือนพลาด */
.mo-checklist--two {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
column-gap: var(--sp-4);
}
.mo-checklist--two li:last-child { border-bottom: 1px solid var(--c-line); }
/* --- Checklist แบบมีรูปประกอบต่อข้อ ----------------------------------------
ใช้กับรายการที่ "ต้องเห็นถึงจะเข้าใจ" เช่น สัญญาณกระดูกสันหลังคด
คำอธิบายอย่างเดียวนึกภาพไม่ออกว่าต้องไปส่องกระจกดูตรงไหน
รูปในนี้สื่อเรื่องเดียวกับข้อความข้าง ๆ จึงนับเป็นของตกแต่ง ต้องใส่ alt=""
ไม่งั้นโปรแกรมอ่านหน้าจอจะอ่านซ้ำสองรอบทุกข้อ
--------------------------------------------------------------------------- */
.mo-checklist--visual li {
align-items: center;
gap: var(--sp-2);
padding: .7em 0;
}
.mo-checklist--visual li::before { content: none; }
.mo-checklist--visual :where(img, .mo-thumb) {
flex: none;
width: 4.5rem;
height: 4.5rem;
border-radius: var(--radius-sm);
object-fit: cover;
background: var(--c-canvas);
}
@media (max-width: 480px) {
.mo-checklist--visual :where(img, .mo-thumb) { width: 3.5rem; height: 3.5rem; }
}
/* --- Signals (การ์ดสัญญาณเตือน — ภาพลายเส้น + คำอธิบายใต้ภาพ) ------------------
**เปลี่ยนจากภาพถ่าย 8 ใบเป็นลายเส้น 6 ใบเมื่อ 28 ส.ค. 2569** (design-fixes ข้อ 6)
ของเดิมเป็นภาพถ่ายหลังคนบนพื้น navy ทั้งแปดใบ ซึ่งพังด้วยเหตุผลเดียว —
**ภาพถ่ายเลือกไม่ได้ว่าจะไม่แสดงอะไร** ทุกใบติดผม ผิว เสื้อ ฉากหลังมาด้วยหมด
ของพวกนั้นเหมือนกันทั้งแปดใบ ส่วนที่ต่างจริง (ไหล่เอียงกี่องศา) เล็กจนมองไม่เห็น
ตากวาดแล้วเห็นเป็น "รูปหลังคน" แปดใบซ้ำกัน ไม่ใช่แปดอาการ
ภาพชุดที่ใช้อยู่เป็น **เงาคนทึบสีกรมท่า + ระบายทองแดงจุดเดียวต่อหนึ่งใบ**
ตรงอวัยวะที่ข้อนั้นพูดถึงพอดี ทองแดงทั้งหกจุดจึงอยู่คนละที่บนร่างกาย
ตากวาดแล้วเห็นจุดทองแดงก่อน จึงรู้ทันทีว่าใบนี้พูดถึงตรงไหน โดยไม่ต้องอ่าน
→ **กฎที่ต้องรักษาไว้เมื่อเพิ่มข้อใหม่: จุดทองแดงห้ามทับตำแหน่งของหกใบเดิม**
ไม่ใช่แค่ "ภาพต้องสวย" — ตำแหน่งของทองแดงคือกลไกที่ทำให้แยกใบออกจากกัน
**เคยลองลายเส้นโปร่งแล้วไม่ผ่าน** (28 ส.ค. 2569 รอบแรกของวันเดียวกัน)
เส้นบางไม่มีน้ำหนัก พอย่อเหลือ ~190px วางบนหน้าที่มีรูปถ่ายจริงกับแถบสีทึบ
เต็มไปหมด มันอ่านออกมาเป็น "แบบร่างที่ยังไม่ได้ลงสี" ไม่ใช่ไอคอนที่ทำเสร็จแล้ว
→ บนหน้านี้ ภาพที่มีเนื้อทึบเท่านั้นที่ยืนอยู่ได้
**สีฝังอยู่ในไฟล์ภาพ ไม่ได้มาจาก token** ต่างจากไอคอนอื่นในธีมที่ใช้ currentColor
เป็นข้อแลกที่ยอมรับแล้ว เพราะภาพสองสีทึบทำด้วย CSS ไม่ได้
→ **เปลี่ยนสีกรมท่าหรือทองแดงใน tokens.css เมื่อไหร่ ภาพหกใบนี้จะไม่เปลี่ยนตาม**
ต้องทำไฟล์ใหม่ (สคริปต์ที่ใช้ทำอยู่ในประวัติ git ของงานวันที่ 28 ส.ค. 2569)
alt="" ทุกใบ — ภาพสื่อเรื่องเดียวกับข้อความข้าง ๆ อยู่แล้ว
ไม่งั้นโปรแกรมอ่านหน้าจอจะอ่านซ้ำสองรอบทุกข้อ
--------------------------------------------------------------------------- */
.mo-signals {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
list-style: none;
padding: 0;
margin: 0;
}
/* 3 คอลัมน์บนจอกว้าง — 6 ข้อลงตัวเป็น 3×2 พอดี
เดิมเป็น 4 คอลัมน์ตอนยังมี 8 ข้อ ลดจำนวนข้อแล้วต้องลดคอลัมน์ตาม
ไม่งั้นแถวล่างเหลือ 2 ใบลอยอยู่ครึ่งแถว
จุดตัด 900px ตรงกับ .mo-rows ที่อยู่ในหน้าเดียวกัน แก้ที่หนึ่งควรดูอีกที่ด้วย */
@media (min-width: 900px) {
.mo-signals { grid-template-columns: repeat(3, 1fr); }
}
.mo-signals li { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
/* กรอบรองภาพ — พื้น paper บนแถบ cream คือจุดที่พาเลตต์ใหม่ได้ทำงานจริง
ตอน cream ยังเป็น #f6f0e9 กรอบนี้จะจมหายไปกับพื้น จึงทำไม่ได้มาก่อน */
.mo-signals__icon {
display: grid;
place-items: center;
width: 100%;
/* คุมความกว้างสูงสุดไว้ ไม่งั้นบนจอ 1440 กรอบจะกว้างใบละ 380px
กลายเป็นช่องว่างสี่เหลี่ยมใหญ่ที่มีลายเส้นเล็ก ๆ อยู่ตรงกลาง
และ section เดียวยาวเกินหนึ่งหน้าจอทั้งที่มีแค่ 6 ข้อ */
max-width: 12rem;
aspect-ratio: 1;
border-radius: var(--radius-img);
background: var(--c-surface);
border: 1px solid var(--c-line);
}
.mo-signals__icon img {
/* 72% เดิมเล็กไป กรอบเหลือที่ว่างรอบตัวเยอะจนภาพดูลอย
เกิน 84% ตัวคนจะไปชนขอบกรอบ */
width: 82%;
/* ต้องมี height:auto — แท็ก ![]()
มีแอตทริบิวต์ height="512" ซึ่งเบราว์เซอร์
ถือเป็นความสูงตายตัว รูปจะถูกบีบให้เตี้ยลงตามสัดส่วนที่ผิด
(กับดักเดียวกับที่เคยเจอตอนใช้ภาพถ่ายชุดเดิม) */
height: auto;
display: block;
}
.mo-signals__label {
font-size: var(--fs-lead);
line-height: var(--lh-body);
text-align: center;
/* pretty แค่กันคำโดดบรรทัดสุดท้าย แต่ข้อความจัดกึ่งกลางที่ตกสองบรรทัด
ถ้ายาวไม่เท่ากันจะเห็นเป็นสามเหลี่ยมเบี้ยว ชัดกว่าตอนชิดซ้ายมาก */
text-wrap: balance;
}
/* ข้อความสรุป + ปุ่มท้ายรายการ — คุมความกว้างไว้ ไม่งั้นบรรทัดยาวเต็ม 1200px อ่านยาก */
.mo-signals__foot {
max-width: 54ch;
margin: var(--sp-4) auto 0;
text-align: center;
}
.mo-signals__foot > * + * { margin-top: var(--sp-3); }
/* --- การ์ดบริการ (รูปด้านบน ข้อความด้านล่าง) ------------------------------------
**แทนที่ .mo-card--photo เมื่อ 28 ส.ค. 2569** (design-fixes ข้อ 5)
ของเดิมเป็นบล็อก "หน้าปก" ที่วางตัวอักษรทับลงบนรูปถ่ายโดยตรง
ซึ่งพาไปสู่ทางตันที่แก้ด้วย CSS ไม่ได้ — รูปบริการทั้งหกใบสว่างมืดไม่เท่ากัน
ชั้นไล่สีที่ทึบพอให้ตัวอักษรขาวอ่านออกบน "ใบที่สว่างที่สุด" ก็ทึบเกินไป
สำหรับอีกห้าใบ ผลคือรูปทั้งชุดกลายเป็นสี่เหลี่ยม navy คล้ายกันหมด
→ เสียทั้งรูปและเสียทั้งความอ่านง่าย เพราะสองอย่างนี้แย่งพื้นที่เดียวกันอยู่
แยกชั้นกันคนละส่วนแล้วทั้งคู่ได้เต็ม รูปไม่ถูกทาทับ ข้อความอยู่บนพื้นทึบ
คอนทราสต์จึงเป็นค่าคงที่ ไม่ขึ้นกับว่ารูปในการ์ดใบนั้นสว่างแค่ไหน
พื้นข้อความเป็น paper (มาจาก .mo-card) ไม่ใช่ครีม เพราะ section นี้เป็นแถบครีม
การ์ดครีมบนแถบครีมจะกลืนหายไปทั้งใบ
--------------------------------------------------------------------------- */
.mo-card--service {
display: flex;
flex-direction: column;
padding: 0; /* ระยะขอบย้ายไปอยู่ที่ .mo-card__body รูปจะได้ชนขอบการ์ด */
overflow: hidden; /* ตัดมุมรูปให้โค้งตามการ์ด */
}
.mo-card--service .mo-card__media { margin: 0; }
.mo-card--service .mo-card__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* กรอบรอรูปที่ยังไม่มีในคลังสื่อ — สูงเท่ารูปจริงเพื่อไม่ให้การ์ดในแถวสูงไม่เท่ากัน */
.mo-card--service .mo-card__media.mo-ph {
aspect-ratio: 4 / 3;
min-height: 0;
border: 0;
border-bottom: 1px dashed var(--c-line);
border-radius: 0;
}
/* flex:1 ทำให้กล่องข้อความยืดเต็มความสูงที่เหลือ การ์ดในแถวเดียวกันจึงสูงเท่ากัน
แม้คำอธิบายจะยาวไม่เท่ากัน */
.mo-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--sp-3);
}
/* **หัวข้อการ์ดต้องคุมขนาดเอง ไม่ปล่อยไปตามระดับหัวเรื่อง (24 ก.ย. 2569)**
การ์ดบริการในหน้าแรกใช้ h3 เพราะมีหัวข้อ section เป็น h2 คั่นอยู่ข้างบน
แต่หน้ารวม /service/ ไม่มี section คั่น ชื่อบริการจึงต้องเป็น h2
ไม่งั้นลำดับหัวเรื่องข้ามจาก h1 ไป h3 ซึ่งผิดโครงสร้างและโปรแกรมอ่านหน้าจอสับสน
ปัญหาคือ h2 ทั้งเว็บมีขนาด --fs-h2 (40px) ซึ่งใหญ่เกินกล่องกว้าง ~310px มาก
**ชื่อบริการยาว ๆ จึงยาวกว่าความกว้างการ์ด เบราว์เซอร์เลยจำใจตัดกลางคำ**
เห็นจริงตอนเรนเดอร์: "การกระตุ้นกล้า" ขึ้นบรรทัดหนึ่ง "มเนื้อด้วยไฟฟ้า" อีกบรรทัด
ซึ่งผิดข้อบังคับภาษาไทยข้อ 4 ใน Design.md เต็ม ๆ
**รากปัญหาคือขนาดตัวอักษร ไม่ใช่การตัดคำ** แก้ด้วย line-break หรือ word-break
ไม่หาย เพราะคำมันยาวกว่ากล่องจริง ๆ เบราว์เซอร์ไม่มีทางเลือกอื่น
สั่งขนาดตามบทบาท (หัวข้อการ์ด) ไม่ใช่ตามระดับ (h2/h3) ทั้งสองระดับจึงหน้าตาเท่ากัน
ได้ทั้งลำดับหัวเรื่องที่ถูกและขนาดที่พอดีกล่อง */
.mo-card__body :where(h2, h3) {
font-size: var(--fs-h3);
margin: 0 0 var(--sp-1);
}
.mo-card__body p { margin: 0; }
/* margin-top:auto ดันลิงก์ลงไปติดก้นการ์ดเสมอ ลิงก์ของทั้งหกใบจึงอยู่ระดับเดียวกัน
ต้องมี flex:1 ที่ .mo-card__body ข้างบนก่อน ไม่งั้น auto ไม่มีที่ว่างให้ดัน */
.mo-card__more {
margin-top: auto;
padding-top: var(--sp-2);
color: var(--c-accent-text);
font-weight: var(--fw-strong);
font-size: var(--fs-small);
}
.mo-card__more a { color: inherit; text-decoration: none; }
.mo-card__more a:hover { text-decoration: underline; }
/* แถวปุ่มปิดท้าย section — จัดกึ่งกลาง รองรับหลายปุ่มและตกบรรทัดบนจอแคบ */
.mo-cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: center;
margin-top: var(--sp-4);
}
.mo-cta-row p { margin: 0; }
/* ปุ่มใน hero เป็น ที่มาจากบล็อกย่อหน้า ต้องล้างระยะขอบทิ้ง
ไม่งั้นระยะห่างระหว่างปุ่มจะเพี้ยนจากที่ gap ตั้งไว้ */
.mo-hero__actions p { margin: 0; }
/* --- Quote band (แถบสีเต็มความกว้าง) --------------------------------------- */
.mo-quoteband {
background: var(--c-brand);
color: var(--c-ink-invert);
text-align: center;
padding-block: var(--section-y);
/* แถบนี้ไม่มี .mo-wrap ครอบ จอแคบคำพูดจึงชิดขอบจอ ~8px (เห็น 28 ก.ย. 2569) — ใช้ขอบชุดเดียวกับ .mo-wrap */
padding-inline: var(--wrap-pad);
}
.mo-quoteband blockquote {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
line-height: 1.5;
max-width: 32ch;
margin-inline: auto;
border: 0;
padding: 0;
}
.mo-quoteband cite { display: block; margin-top: var(--sp-3); color: var(--c-accent-light); font-style: normal; font-size: var(--fs-small); }
/* --- FAQ -------------------------------------------------------------------
ใช้ / ของ HTML แท้ ไม่ใช้ JavaScript
ได้ keyboard กับโปรแกรมอ่านหน้าจอถูกต้องฟรี และ Google อ่านคำตอบที่ยังไม่กางได้
ของเดิมเป็นกล่อง navy ทึบ 7 ก้อนเรียงลงมาบนพื้นครีม ซึ่งขัดกับดีไซน์เอง
จังหวะแถบสลับ paper/cream/navy ที่เป็นเอกลักษณ์เสียไป กลายเป็นก้อนดำกลางหน้า
เปลี่ยนเป็นการ์ดพื้นกระดาษขอบเส้นบาง ใช้ภาษาเดียวกับ .mo-card ที่ใช้อยู่แล้วทั้งเว็บ
แล้วเก็บ navy ไว้ให้ section ที่ตั้งใจให้มืดจริง ๆ
--------------------------------------------------------------------------- */
.mo-faq {
display: grid;
gap: var(--sp-2);
max-width: var(--wrap-narrow);
margin-inline: auto;
/* เปิดให้ความสูง auto เคลื่อนไหวได้ ใช้กับ ::details-content ข้างล่าง
เบราว์เซอร์ที่ยังไม่รองรับจะกางทันทีแบบเดิม ไม่พัง */
interpolate-size: allow-keywords;
}
.mo-faq__item {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius-card);
overflow: hidden;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mo-faq__item:hover { border-color: var(--c-accent); }
/* ข้อที่กางอยู่ต้องดูออกทันทีว่าคืออันไหน ใช้เส้นทองแดงด้านซ้ายเป็นตัวบอก
ไม่ได้เปลี่ยนสีพื้น เพราะจะกลายเป็นก้อนหนักแบบเดิม */
.mo-faq__item[open] {
border-color: transparent;
box-shadow: var(--shadow-card);
}
.mo-faq__item[open] summary { box-shadow: inset 3px 0 0 var(--c-accent); }
.mo-faq__item summary {
position: relative;
display: block;
padding: var(--sp-3);
padding-inline-end: calc(var(--sp-3) * 2.4);
cursor: pointer;
list-style: none;
/* คำถามคือส่วนที่คนกวาดตาหา ต้องอ่านง่าย และใช้ฟอนต์หัวข้อน้ำหนักบาง
ตามเอกลักษณ์ของดีไซน์ ไม่ใช่ตัวหนาขนาดเล็กแบบเดิม */
font-family: var(--font-display);
font-weight: var(--fw-display);
font-size: var(--fs-h3);
line-height: var(--lh-tight);
color: var(--c-ink);
transition: color var(--dur) var(--ease);
}
.mo-faq__item summary::-webkit-details-marker { display: none; }
.mo-faq__item summary:hover { color: var(--c-accent-text); }
/* เครื่องหมายบวกที่กลายเป็นลบตอนกาง วาดด้วยเส้นสองเส้น ไม่ใช้ตัวอักษร
ตัวอักษรลูกศรแต่ละฟอนต์วาดไม่เหมือนกันและลอยไม่ตรงกลาง */
.mo-faq__item summary::before,
.mo-faq__item summary::after {
content: "";
position: absolute;
inset-inline-end: var(--sp-3);
inset-block-start: calc(var(--sp-3) + .55em);
width: .85rem;
height: 2px;
background: var(--c-accent);
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.mo-faq__item summary::after { transform: rotate(90deg); }
.mo-faq__item[open] summary::after { transform: rotate(0deg); opacity: 0; }
/* คำตอบ */
.mo-faq__item > :not(summary) {
padding: 0 var(--sp-3) var(--sp-3);
margin: 0;
color: var(--c-ink-soft);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
/* กางแบบค่อย ๆ เลื่อนแทนการกระตุก ทำด้วย CSS ล้วน ไม่ต้องพึ่ง JavaScript
--dur กลายเป็น 0.01ms เองเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว */
.mo-faq__item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
}
.mo-faq__item[open]::details-content { block-size: auto; }
/* กรอบไฮไลต์ตอนกด Tab — summary ไม่ได้อยู่ในรายการรวมที่ต้นไฟล์
ถ้าไม่เขียนเพิ่มจะได้กรอบมาตรฐานของเบราว์เซอร์ ไม่ใช่สีทองแดงของดีไซน์ */
.mo-faq__item summary:focus-visible {
outline: 3px solid var(--c-focus);
outline-offset: -3px;
}
/* --- Contact ---------------------------------------------------------------- */
.mo-contact { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: var(--sp-3); align-items: stretch; }
@media (max-width: 860px) { .mo-contact { grid-template-columns: 1fr; } }
.mo-formcard { background: var(--c-canvas); border-radius: var(--radius-card); padding: var(--sp-3); }
.mo-formcard :where(input, textarea, select) {
width: 100%;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius-sm);
padding: .7em .9em;
font: inherit;
color: var(--c-ink);
}
.mo-formcard label { display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); color: var(--c-ink-soft); margin-bottom: .35em; }
/* กล่องแผนที่: โหลด iframe เมื่อผู้ใช้กดเท่านั้น (ดูเหตุผลใน README) */
.mo-mapcard { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 22rem; background: var(--c-canvas) center/cover; }
.mo-mapcard iframe { width: 100%; height: 100%; border: 0; display: block; }
.mo-infostrip {
position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2);
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: var(--sp-2);
background: var(--c-surface);
border-radius: var(--radius-sm);
padding: var(--sp-2);
text-align: center;
box-shadow: var(--shadow-card);
}
.mo-infostrip b { display: block; font-weight: var(--fw-strong); margin-top: .35em; }
/* --- Visit Us: ฟอร์ม+ช่องทางติดต่อ ซ้าย · แผนที่ ขวา -------------------------
ใช้บล็อก Columns ของ WordPress ไม่ได้ใช้ตะแกรง .mo-contact ข้างบน
**เหตุผลคือกับดักเดียวกับที่เจอตอนทำการ์ดบทความ** — บล็อก Group พ่นกล่องซ้อน
ข้างในให้อีกชั้น (`.wp-block-group__inner-container`) ตะแกรงที่สั่งไว้ที่ตัวนอก
จึงไม่ได้จัดลูกทั้งสองฝั่ง แต่ไปจัดกล่องซ้อนใบเดียวแทน = เหลือคอลัมน์เดียว
บล็อก Columns ไม่มีปัญหานี้ และคนแก้เนื้อหาลากสลับซ้ายขวาเองได้ในหลังเว็บ
(`.mo-contact` ของเดิมยังอยู่ ยังไม่มีหน้าไหนใช้ — **มันมีบั๊กนี้อยู่**
วันไหนหยิบไปใช้จริงจะเจอว่าเหลือคอลัมน์เดียว ให้มาอ่านคอมเมนต์นี้) */
/* **section นี้กินเต็มความกว้างจอ ไม่มี .mo-wrap ครอบ**
ทุก section อื่นในหน้าคุมเนื้อหาไว้ที่ 1200px เท่ากันหมด ซึ่งอ่านง่ายก็จริง
แต่พอเรียงกันหลาย section ติดกัน ขอบซ้ายขวาเป็นเส้นตรงเดียวยาวตลอดหน้า
เจ้าของบอกว่า "ดูน่าเบื่อ" (31 ส.ค. 2569) — จุดนี้จึงตั้งใจแหกกรอบนั้น
ให้แผนที่ชนขอบจอฝั่งขวาจริง ๆ และฟอร์มได้พื้นที่กว้างกว่าเดิม
padding-block เป็น 0 เพราะแผนที่ต้องชนขอบบนล่างของ section ด้วย
ไม่งั้นจะเหลือแถบพื้นขาวคาดหัวท้ายแผนที่ แล้วไม่เรียกว่าเต็ม */
.mo-section--flush { padding-block: 0; }
/* gap เป็น 0 เพื่อให้สองฝั่งเป็น "กล่องเดียว" ไม่ใช่การ์ดสองใบวางคู่กัน
(บล็อก Columns ตั้ง gap มาให้เป็นค่าตั้งต้น ต้องสั่งทับ)
**ห้ามใส่ max-width ให้แถบนี้** เคยลองใส่เพดาน 1600px เมื่อ 1 ก.ย. 2569
เพราะอ่านคำว่า "กว้างไป" ของเจ้าของผิด ที่เจ้าของหมายถึงจริง ๆ คือแถบมัน **ยาว**
(สูง 1510px) ไม่ใช่กว้าง พอใส่เพดานแล้วแผนที่เลิกชนขอบจอ ซึ่งผิดจากที่สั่งไว้แต่แรก
→ ถอดเพดานออกแล้ว แถบนี้ต้องกินเต็มความกว้างจอเสมอ
→ ความสูงไปแก้ที่ padding ของ .mo-visit__panel กับความสูงฟอร์มแทน */
.mo-visit { gap: 0; margin-block: 0; align-items: stretch; }
.mo-visit .wp-block-column { display: flex; flex-direction: column; }
/* ฝั่งซ้าย — แผงฟอร์ม
ยืมคลาส .mo-formcard มาเพื่อให้ CSS ของช่องกรอกและของ Fluent Forms ข้างล่าง
ทำงานเหมือนเดิม แล้วถอนหน้าตา "การ์ด" ของมันออกตรงนี้ (มุมมน + ระยะขอบ)
เพราะตอนนี้มันไม่ใช่การ์ดลอยแล้ว แต่เป็นครึ่งซ้ายของแถบเต็มจอ */
.mo-visit__panel {
flex: 1;
border-radius: 0;
display: flex;
/* ระยะบน-ล่างใช้ค่าของตัวเอง ไม่ใช่ --section-y ของ section ทั่วไป (1 ก.ย. 2569)
เจ้าของบอกว่าแถบนี้ "ยาวเกิน" วัดแล้วสูง 1510px ซึ่งสูงกว่าจอแล็ปท็อปทั้งจอ
--section-y ให้ 80px ต่อด้าน รวมสองด้าน 160px ทั้งที่แถบนี้เนื้อหาแน่นอยู่แล้ว
ไม่ต้องการอากาศเท่า section ที่มีแค่หัวข้อกับการ์ด */
padding: clamp(var(--sp-4), 3vw, var(--sp-5)) clamp(var(--sp-3), 4.5vw, var(--sp-6));
/* พื้นขาวแทนครีม (เจ้าของสั่ง 31 ส.ค. 2569)
ใช้ --c-surface ไม่ใช่ #ffffff — ขาวล้วนไม่มีในพาเลตต์ และ CLAUDE.md ระบุว่า
เจอ #ffffff บนพื้นหลังเมื่อไหร่ให้ถือว่าเป็นของธีมแม่รั่วมา
--c-surface (#fbfaf8) คือ "ขาว" ของดีไซน์นี้ ตาอ่านเป็นขาวแต่ยังอยู่ในพาเลตต์
ทับค่าครีมที่สืบมาจาก .mo-formcard ได้เพราะกฎนี้อยู่ล่างกว่าในไฟล์ */
background: var(--c-surface);
}
/* กรอบจาง ๆ ขอบมนรอบตัวฟอร์ม (เจ้าของสั่ง 31 ส.ค. 2569)
พอพื้นแผงเปลี่ยนจากครีมเป็นขาว ตัวฟอร์มจะไม่มีอะไรแยกมันออกจากพื้นอีก
กรอบบาง ๆ จึงทำหน้าที่บอกขอบเขตแทนสีพื้นที่หายไป
เขียนที่ตัว