/* Just Smile — design tokens + layout
   🔴 ห้ามพิมพ์เลขสีที่ไหนนอก :root — เทสจะจับได้
   สัดส่วน 70/20/10 · neutral อมอุ่นถ่วงสีแบรนด์ที่เย็นทั้งคู่
   สีแบรนด์อิงโลโก้จริงจาก GBP: teal + เบจ (static/img/gbp/logo-1020.png)

   spacing/type/shape ใช้ token ด้านล่างเป็นหลัก ยกเว้น 3 กลุ่มนี้ที่ตั้งใจเป็นตัวเลขลอย:
   1) ขนาดโครงสร้างเฉพาะจุด (min-height ของ topbar/header, grid minmax, max-width ฟอร์ม/ตาราง, ขนาดรูป)
   2) เส้นขอบ (border-width) รวมเส้นเน้นสี (accent border-left)
   3) ป้าย/ตัวเลขเฉพาะจุดที่ไม่ใช่ตัวหนังสือเนื้อหา (badge เล็ก, ชื่อการ์ด/โลโก้ ≥18px) */

:root{
  /* ── 10% ACTION — น้ำเงิน ทุกอย่างที่กดได้ ── */
  --action:      #2364AA;   /* บนขาว 6.04:1 · ตัวขาวบนปุ่ม 6.04:1 */
  --action-deep: #1A4C82;   /* hover 8.75:1 */
  --action-wash: #EAF1F8;

  /* ── 20% BRAND SURFACE — teal ใช้เป็น "พื้น" ไม่ใช่ "ตัวหนังสือ" ── */
  --brand:       #73BFB8;
  --brand-ink:   #2E7D75;   /* teal ที่อ่านได้บนขาว 4.88:1 */
  --brand-wash:  #EFF7F6;
  --brand-sand:  #C9B79C;   /* เบจจากเส้นฟันในโลโก้ — ใช้เป็นเส้น/accent เล็ก */

  /* ── 70% NEUTRAL — อมอุ่น ── */
  --paper:       #FFFFFF;
  --paper-alt:   #F8F7F4;
  --line:        #E6E3DC;
  --ink:         #21201D;   /* บนขาว 16.3:1 */
  --ink-soft:    #5C574F;   /* บนขาว 7.16:1 */
  --ink-on-dark: #D9D4CB;

  /* ── layout ── */
  --tap: 44px;              /* ปุ่มกดได้ขั้นต่ำ */
  --wrap: 960px;
  --gutter: 18px;           /* ขอบซ้ายขวามือถือ */

  /* ── type scale ── */
  --fs-small: 14.5px;
  --fs-body:  16px;
  --fs-lead:  17px;
  --fs-h3: clamp(17px,3.4vw,20px);
  --fs-h2: clamp(19px,4vw,26px);
  --fs-h1: clamp(24px,6vw,38px);
  --lh-tight: 1.25;
  --lh-body:  1.65;

  /* ── spacing scale (4px base) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* ── shape ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 99px;
  --shadow-bar: 0 -4px 14px -10px rgba(33,32,29,.5);
  --scrim: rgba(33,32,29,.72);   /* คลุมมืดบนรูปพื้นหลัง ให้ตัวหนังสือขาวอ่านได้ */
  --wash: rgba(255,255,255,.92); /* ไล่เฉดขาวใต้ตัวหนังสือเข้มบนรูปสว่าง — คู่ตรงข้ามของ --scrim (hero จัดฟันใส) */
  --wash-mid: rgba(255,255,255,.55);
}

/* Mitr self-host — OFL · มติคุณหมอ 2569-09-05 · subset ไทย+ละตินเต็ม (ห้าม subset แคบกว่านี้ ดู design/font/README.md) */
@font-face{font-family:"Mitr";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/mitr-400.woff2") format("woff2")}
@font-face{font-family:"Mitr";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/mitr-600.woff2") format("woff2")}
@font-face{font-family:"Mitr";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/mitr-700.woff2") format("woff2")}
/* Anuphan (OFL · Cadson Demak) — ใช้เฉพาะบทความ .about-body ใต้ hero หน้าแรก (T เลือก 2569-10-14 หลังลอง Pridi แล้ว "ดูเก่า")
   ไม่มีหัว เส้นคม = สมัยใหม่กว่า Mitr ที่มน · 400 เนื้อความ / 600 ตัวเน้น (instance จาก variable font ดู design/font/README.md) */
@font-face{font-family:"Anuphan";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/anuphan-400.woff2") format("woff2")}
@font-face{font-family:"Anuphan";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/anuphan-600.woff2") format("woff2")}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Mitr","Noto Sans Thai",system-ui,sans-serif;
  font-size:var(--fs-body);   /* ต่ำกว่านี้ iOS จะซูมเองตอนโฟกัส input */
  line-height:var(--lh-body);
}
img{max-width:100%;height:auto}
.inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{text-wrap:balance;line-height:var(--lh-tight);margin:0 0 var(--s-3)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);margin-top:var(--s-4)}
p{margin:0 0 var(--s-3)}

a{color:var(--action)}
a:hover{color:var(--action-deep)}
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-2);top:var(--s-2);z-index:99;background:var(--paper);padding:var(--s-3) var(--s-4)}

/* ── แถบบนสุด: ตัวสลับสาขา ── */
.topbar{background:var(--paper-alt);border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.topbar .inner{display:flex;gap:var(--s-3);align-items:center;
  justify-content:space-between;min-height:40px}
.branch-switch{display:flex;align-items:center;gap:var(--s-2);font-weight:600}
.pin{color:var(--brand-ink)}
.topbar select{font:inherit;font-weight:600;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2);min-height:32px}
.hours{color:var(--ink-soft)}

/* ── header ── */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .inner{display:flex;align-items:center;gap:var(--s-4);min-height:56px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
.logo img{width:40px;height:40px;border-radius:var(--r-md)}
.site-head nav{display:flex;gap:var(--s-4);margin-right:auto;flex-wrap:wrap}
.site-head nav a{text-decoration:none;font-weight:600;padding:var(--s-2) 0}
.site-head nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--brand)}
.lang{display:flex;gap:var(--s-2);font-size:13px;font-weight:600}
.lang a{text-decoration:none;color:var(--ink-soft)}
.lang a[aria-current]{color:var(--ink);text-decoration:underline}

/* ── hero: ราคาเป็นอินเทอร์เฟซ — ตัวเลขหนา tabular (คำสั่งดีไซน์ ded4ac5b · ตัวเลขปรับ 2569-09-10)
   พื้นหลัง = ป้ายนีออน Just smile บนผนังโค้ง (JSC-309) สว่างตามต้นฉบับ ไม่มี scrim — T ขอ 2569-09-12 (แบบเดียวกับ hero จัดฟันใส)
   มือถือ: ป้ายอยู่บน ข้อความอยู่ล่างบนเฉดขาว · จอกว้าง: ข้อความซ้ายบนผนังโล่ง ป้ายขวา (media ท้ายไฟล์) ── */
.instrument-hero{position:relative;background:var(--paper-alt);border-bottom:1px solid var(--line);padding:var(--s-6) 0;overflow:hidden;
  min-height:680px;display:flex;align-items:flex-end}
.instrument-hero::before{content:"";position:absolute;inset:0;
  background-image:url("/static/img/gbp/home-sign-bg.webp");background-size:cover;background-position:80% 40%}
.instrument-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 34%,var(--wash-mid) 46%,var(--wash) 58%,var(--wash) 100%)}
.instrument-grid{position:relative;z-index:1;display:grid;gap:var(--s-6);grid-template-columns:1fr;width:100%}
.instrument-main h1{margin-bottom:var(--s-4);color:var(--ink)}
.h1-sub{display:block;font-size:.5em;font-weight:600;color:var(--ink-soft);margin-top:var(--s-2);text-wrap:pretty}
/* ประโยคระบุตัวตน (ทีม + สาขาเดียว + ทำเล) ใต้ h1 หน้าแรก/หัวหน้าติดต่อ — ใส่ 2569-09-23
   หลัง Google AI Overview จับโดเมนเราไปให้คลินิกชื่อชน · ตัวเล็กกว่า h1-sub แต่สีเข้มกว่า ให้อ่านเป็น "ข้อเท็จจริง" ไม่ใช่สโลแกน */
.identity{margin:0 0 var(--s-2);color:var(--ink);font-size:var(--fs-small);font-weight:600;max-width:46ch;text-wrap:pretty}

/* ── คลินิกเราเป็นอย่างไร (ใต้ hero หน้าแรก · 2569-10-14) — ย่อหน้าเดียวตัวใหญ่ ไม่มีหัวข้อ (T: หัวข้อซ้ำเนื้อความ)
   ฟอนต์ Anuphan (สมัยใหม่ เส้นคม) ต่างจาก Mitr ทั้งเว็บ — T เลือกจากภาพเทียบ (design/_out/ ไม่เข้า git — ดู design/font/README.md)
   พื้นไล่เฉด action-deep → action (T: "เรียบเกินไป") · ห้ามไล่ไปทางเขียว brand: มุมสว่างตัวหนังสือเหลือ ~3.6:1 ไม่ผ่าน
   จุดสว่างสุด = action #2364AA → action-wash 5.3:1 · ขาว 6.0:1 ผ่านทั้งแถบ
   T: อยากได้โทนฟ้า + "ตัวหนังสือดู AI" (เดิมหนาทั้งย่อหน้า 600 + เน้นสีเขียวซ้อน) → พื้นน้ำเงินเข้มของคลินิก
   เนื้อความน้ำหนักปกติ 400 สี action-wash · <strong> (**…** ใน clinic.json) = ขาว 600 จุดเน้นเดียว
   ข้างในไม่มีอะไรกดได้ — ใช้น้ำเงินเป็นพื้นผิวไม่ขัดกับกติกา "น้ำเงิน = กดได้" ของตัวหนังสือ/ปุ่ม */
.about-band{color:var(--action-wash);padding:var(--s-6) 0;
  background:var(--action-deep);   /* fallback */
  background:linear-gradient(120deg,var(--action-deep) 0%,var(--action-deep) 25%,var(--action) 100%)}
.about-body{margin:0;max-width:34em;font-family:"Anuphan","Mitr",sans-serif;font-size:clamp(19px,4.4vw,26px);font-weight:400;line-height:1.75;
  color:var(--action-wash);text-wrap:pretty}
.about-body strong{font-weight:600;color:var(--paper)}
.about-body ::selection,.about-body::selection{background:var(--paper);color:var(--action-deep)}
@media (min-width:760px){.about-band{padding:var(--s-7) 0}}

.readout-label{display:inline-block;font-size:15px;font-weight:800;color:var(--paper);
  background:var(--action);padding:5px 12px;border-radius:var(--r-sm);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s-3)}
.readout{display:flex;align-items:baseline;gap:var(--s-3);margin:0 0 var(--s-3);flex-wrap:wrap}
.readout-caption{color:var(--ink-soft);font-size:var(--fs-small);font-weight:600;line-height:1.3;max-width:22ch}
.readout--pending .readout-caption{color:var(--brand-ink);font-weight:700}
.instrument-main .readout-caption{color:var(--ink-soft)}
/* ── ตัวเลข — tabular-nums กันเลขขยับตอนเปลี่ยนความกว้าง · เบาลง + เว้นระยะขึ้น 2569-09-10 (คุณ T บอกตัวหนาเดิมดูแล้วปวดหัว)
   font-family แยกจาก Mitr เฉพาะตัวเลข — เลข 0 ของ Mitr มีขีดทแยงกลาง คุณ T ไม่ชอบ ตัวหนังสือไทยที่อื่นยังเป็น Mitr เหมือนเดิม ── */
.num{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.01em;line-height:1;white-space:nowrap}
.readout-price .num{font-size:clamp(40px,8vw,64px);color:var(--brand-ink)}
.instrument-main .readout-price .num{color:var(--brand-ink)}
.readout--pending .num{color:var(--line)}
.readout--ghost .num{font-size:clamp(18px,3vw,22px);color:var(--ink-soft)}
.instrument-main .readout--ghost .num{color:var(--ink-soft)}
.readout--row .num{font-size:19px;color:var(--brand-ink)}

/* ── สองสินค้าหลัก: การ์ดคู่ All-on-4 + จัดฟันใส ใต้ hero — แยกชื่อคลินิกออกจากบริการ (T 2569-09-15)
   ดีไซน์ต่างกันตั้งใจ ไม่ใช่ฝาแฝด: All-on-4 = ตัวเลขราคาเด่น (พื้นขาว ต่อยอด .readout เดิม)
   จัดฟันใส = คำพูด+รูปเคสเด่น ราคาเป็น pill รอง (พื้น brand-wash) เพราะราคาจริงเป็นชุดแพ็กเกจ ไม่ใช่เลขเดียว
   ลูกเล่นเดียวของหน้านี้: รูปซูมเบา ๆ ตอน hover/focus (T ขอลูกเล่นที่ไม่ทื่อ) ── */
.flag-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.flag-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper);text-decoration:none;color:inherit;
  transition:border-color .15s ease-out}
.flag-card:hover,.flag-card:focus-visible{border-color:var(--brand-ink)}
.flag-media{position:relative;overflow:hidden;background:var(--paper-alt);aspect-ratio:4/3}
.flag-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.flag-card:hover .flag-media img,.flag-card:focus-visible .flag-media img{transform:scale(1.045)}
.flag-body{padding:var(--s-5);flex:1;display:flex;flex-direction:column}
.flag-tagline{font-size:clamp(19px,3.6vw,23px);font-weight:700;line-height:1.32;
  margin:0 0 var(--s-4);color:var(--ink)}
.flag-more{margin-top:auto;padding-top:var(--s-4);font-weight:700;font-size:var(--fs-small);color:var(--action)}
.readout-label--brand{background:var(--brand-ink)}
/* All-on-4 — ต่อยอด .readout เดิม แต่ตัวเลขย่อลงให้พอดีในการ์ด (ไม่ใช่เต็ม hero) */
.flag-implant .readout-price .num{font-size:clamp(32px,6.5vw,44px)}
.flag-implant .readout{margin-bottom:0}
/* จัดฟันใส — พื้น brand-wash + กรอบสีแบรนด์ แยกจาก All-on-4 ชัดเจน ราคาเป็น pill ไม่ใช่เลขใหญ่ */
.flag-aligners{background:var(--brand-wash);border-color:var(--brand)}
.flag-aligners:hover,.flag-aligners:focus-visible{border-color:var(--brand-ink)}
.flag-price-pill{display:inline-block;margin:0 0 var(--s-3);padding:6px 14px;
  border:1px solid var(--brand);border-radius:var(--r-pill);background:var(--paper);
  font-weight:700;font-size:var(--fs-small);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.flag-brands{margin:0;color:var(--ink-soft);font-size:var(--fs-small);font-weight:600}
@media (min-width:700px){
  .flag-grid{grid-template-columns:1fr 1fr}
  .flag-card{flex-direction:row}
  .flag-media{flex:0 0 42%;aspect-ratio:auto}
  .flag-body{flex:1 1 58%;justify-content:center}
}

/* ── บริการทั้งหมด (ท้ายหน้าแรก) — ชั้น 1 แถวราคาแบบธนาคาร · ชั้น 2 รายชื่อสั้น ──
   ทั้งแถวเป็นลิงก์ → ต้องตั้ง color เองตอน hover ไม่งั้น a:hover ทับสีทั้งแถว (playbook web-design #10) */
.board{list-style:none;margin:0;padding:0}
.board li:first-child .board-row{border-top:1px solid var(--line)}   /* เส้นอยู่กับตัวที่มี padding เอง ไม่ใช่ ul */
.board-row{display:flex;align-items:center;gap:var(--s-2) var(--s-4);flex-wrap:wrap;
  padding:var(--s-4) 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.board-row:hover{color:var(--ink)}
.board-row:hover strong{color:var(--action)}
.board-row-name{flex:1 1 100%;min-width:0}   /* มือถือ: ชื่อ+คำอธิบายเต็มแถว ราคากับลูกศรอยู่บรรทัดล่างด้วยกัน */
@media (min-width:760px){.board-row-name{flex:1 1 220px}}
.board-row-name strong{display:block;font-size:17px}
.board-row-name span{display:block;color:var(--ink-soft);font-size:var(--fs-small)}
.board-row .readout{margin:0;flex:0 0 auto}
.board-row-pending{color:var(--brand-ink);font-weight:700;font-size:var(--fs-small);flex:0 0 auto}
.board-arrow{margin-left:auto;flex:0 0 auto;color:var(--action);font-weight:700;font-size:18px}

.svc-other{margin-top:var(--s-6)}
.svc-other h3{margin:0 0 var(--s-1)}
.svc-other .note{margin:0;padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.svc-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:var(--s-5)}
.svc-index a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:100%;
  min-height:var(--tap);padding:var(--s-2) 0;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-weight:600}
.svc-index a:hover{color:var(--action)}
.svc-name small{display:block;font-size:var(--fs-small);font-weight:600;color:var(--brand-ink)}
@media (min-width:760px){.svc-index{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.svc-index{grid-template-columns:repeat(3,1fr)}}

/* ── ปุ่ม ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--gutter);border-radius:var(--r-md);
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--action);color:var(--action);background:var(--paper);
}
.btn:hover{border-color:var(--action-deep);color:var(--action-deep)}
.btn-primary{background:var(--action);color:var(--paper);border-color:var(--action)}
.btn-primary:hover{background:var(--action-deep);border-color:var(--action-deep);color:var(--paper)}
.btn-lg{min-height:52px;padding:0 var(--s-5);font-size:var(--fs-lead)}
.btn[disabled]{opacity:.6;cursor:wait}

.quick{border-bottom:1px solid var(--line);background:var(--paper)}
.quick .inner{display:flex;gap:var(--s-3);flex-wrap:wrap;padding-top:var(--s-4);padding-bottom:var(--s-4)}

/* ── บล็อกเนื้อหา ── */
.block{padding:var(--s-6) 0}
.block.tint{background:var(--paper-alt)}

/* ── บล็อกอาการ พื้นหลังรูปห้องรักษา + คลุมมืด — คุณ T ขอ 2569-09-11 ── */
.symptoms-block{position:relative;background:var(--ink);overflow:hidden}
.symptoms-block::before{content:"";position:absolute;inset:0;
  background-image:url("/static/img/gbp/treatment-room-bg.webp");background-size:cover;background-position:center}
.symptoms-block::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.symptoms-block .inner{position:relative;z-index:1}
.symptoms-block h2{color:var(--paper)}
.prose p{max-width:68ch;font-size:var(--fs-lead)}
/* ── วิดีโอรีวิวคนไข้ — รูปปก 9:16 + ปุ่มเล่น · กดแล้วเป็น iframe YouTube ในกรอบเดิม (หน้าไม่กระตุก) ── */
.review-video .inner{display:grid;gap:var(--s-4)}
.rv-text p{max-width:46ch;font-size:var(--fs-lead);margin:0}
.rv-player{position:relative;width:min(100%,300px);aspect-ratio:9/16;border-radius:var(--r-lg);
  overflow:hidden;background:var(--ink)}
.rv-facade,.rv-player iframe{display:block;width:100%;height:100%;border:0}
.rv-facade img{display:block;width:100%;height:100%;object-fit:cover}
.rv-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;
  border-radius:50%;background:var(--action);border:3px solid var(--paper);transition:background .15s}
.rv-play::after{content:"";position:absolute;left:25px;top:20px;
  border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--paper)}
.rv-facade:hover .rv-play,.rv-facade:focus-visible .rv-play{background:var(--action-deep)}
@media (min-width:760px){
  .review-video .inner{grid-template-columns:300px 1fr;gap:var(--s-6);align-items:center}
  .rv-player{order:-1;width:100%}
}
/* figure.case-photo = แท็บ Angel หน้าจัดฟันใส · section.case-photo ห้ามโดนบีบ ไม่งั้นทั้ง section ชิดขอบซ้ายจอบนเดสก์ท็อป */
figure.case-photo,.case-photo figure{margin:0;max-width:480px;position:relative}
.case-photo img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.case-photo figcaption{margin-top:var(--s-2)}
/* กล่องโลโก้แบรนด์วางทับมุมรูปเคส (ใช้แทนแคปชั่นข้อความ) — ต้อง specificity สูงกว่า .case-photo img ด้านบน */
.case-photo .case-photo-logo{position:absolute;left:var(--s-3);bottom:var(--s-3);
  width:100px;height:auto;border:none;border-radius:8px;background:#fff;padding:6px 10px;
  box-shadow:0 1px 6px rgba(0,0,0,.18)}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cards a{display:block;padding:var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper);text-decoration:none;color:var(--ink);
  min-height:var(--tap)}
.cards a:hover{border-color:var(--brand-ink)}
.cards strong{display:block;color:var(--action);margin-bottom:3px}
.cards span{color:var(--ink-soft);font-size:var(--fs-small)}
.cards li.featured a{border-left:6px solid var(--brand)}
.cards li.featured strong{color:var(--brand-ink)}

/* ── ทีมหมอ — แถวเลื่อนแนวนอน (scroll-snap ล้วน ไม่ใช้ JS)
   รองรับเพิ่มหมอทีหลังโดยไม่ต้องแก้ดีไซน์ · การ์ดเดียวก็ไม่ล้นจอมือถือ 2569-09-11
   .doctor-card ใช้ได้ทั้ง <a> (หน้าแรก คลิกได้) และ <div> (หน้า /doctors/ ไม่ต้องคลิก) ── */
.doctor-rail{list-style:none;display:flex;gap:var(--s-3);margin:0;padding:0 0 var(--s-2);
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.doctor-rail li{flex:0 0 200px;scroll-snap-align:start}
.doctor-card{display:block;height:100%;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper);text-decoration:none;color:var(--ink)}
.doctor-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.doctor-card-info{display:block;padding:var(--s-3)}
.doctor-card-info strong{display:block;color:var(--action);margin-bottom:3px}
.doctor-card-info span{display:block;color:var(--ink-soft);font-size:var(--fs-small)}

.symptoms{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.symptoms a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:0 var(--s-4);min-height:var(--tap);text-decoration:none;color:var(--ink)}
.symptoms a:hover{border-color:var(--brand-ink)}
.sym{font-weight:600}
.sym-arrow{font-weight:700;font-size:18px;color:var(--action)}

/* ── หน้าจัดฟันใส — "แผงเลือกระบบ" (radio + :checked ไม่ใช้ JS · ?brand= จากแอดใช้ JS 3 บรรทัดในเทมเพลต)
   แท็บกับแผงจับคู่กันด้วยลำดับ (nth-of-type) → เพิ่มแบรนด์ใน services.json ได้ถึง 3 โดยไม่แตะ CSS
   แท็บแรกเป็นค่าเริ่มต้น (Angel มติคุณ T) — ในสายตาไม่มีแบรนด์ไหนอยู่เหนือใคร (กฎ สบส. + playbook) ── */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.symbols{display:none}   /* ชุด <symbol> ไอคอน — attribute hidden ไม่มีผลกับ <svg> จะโผล่เป็นกล่องว่าง 300×150 */
::selection{background:var(--brand);color:var(--ink)}
/* hero สว่างตามภาพต้นฉบับ (T ขอ 2569-09-12) — ไม่มี scrim มืด ตัวหนังสือเข้มบนไล่เฉดขาวเฉพาะโซนข้อความ
   มือถือ: หมออยู่บน ข้อความอยู่ล่างบนเฉดขาว · จอกว้าง: ข้อความซ้าย/หมอขวา (media ด้านล่าง) */
.al-hero{position:relative;background:var(--paper-alt);overflow:hidden;padding:var(--s-6) 0;min-height:540px;display:flex;align-items:flex-end}
/* พื้นหลัง = มือหมอแป๋มถือเครื่องมือจัดฟันใสอธิบายให้คนไข้ (JSC-345 ตัดส่วนหน้าออก — T ขอ 2569-09-12)
   position-x 33% มีผลเฉพาะจอแคบ (รูปล้นด้านข้าง) ให้เครื่องมือในมืออยู่กลางจอ · จอกว้างรูปพอดีความกว้าง */
.al-hero::before{content:"";position:absolute;inset:0;
  background-image:url("/static/img/gbp/dr-pam-consult-bg.webp");background-size:cover;background-position:33% 35%}
.al-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 50%,var(--wash-mid) 62%,var(--wash) 74%,var(--wash) 100%)}
.al-hero .inner{position:relative;z-index:1;width:100%}
.al-hero-copy{max-width:46ch}
.al-hero h1{color:var(--ink);margin-bottom:var(--s-5)}
.al-hero .h1-sub{font-size:.5em;font-weight:400;color:var(--ink-soft)}
.al-hero .btn-primary{width:100%}   /* มือถือ: ปุ่มหลักเต็มกว้าง (สัญญา first viewport) · desktop คืนเป็น auto */

/* แผงเลือก = แถบมืดต่อจาก hero (ไทล์ขาวบนมืด) — พื้นทึบเสมอ จึงติดขอบบนจอได้โดยไม่ต้องรู้ว่า "ติดอยู่" (CSS รู้ไม่ได้) */
.brand-switch{position:sticky;top:0;z-index:20;background:var(--ink)}
.brand-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);padding-top:var(--s-3);padding-bottom:var(--s-3)}
.brand-tab{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:60px;
  padding:var(--s-2) var(--s-3);border:1px solid var(--paper);border-radius:var(--r-md);background:var(--paper);
  cursor:pointer;text-align:left;transition:border-color .15s ease-out,background-color .15s ease-out}
.brand-tab strong{font-size:17px;line-height:1.2}
.brand-tab span{font-size:12.5px;line-height:1.3;color:var(--ink-soft)}
.brand-tab:hover{border-color:var(--brand)}
.al-brands>input:nth-of-type(1):checked~.brand-switch .brand-tab:nth-child(1),
.al-brands>input:nth-of-type(2):checked~.brand-switch .brand-tab:nth-child(2),
.al-brands>input:nth-of-type(3):checked~.brand-switch .brand-tab:nth-child(3){
  background:var(--brand-wash);border-color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.al-brands>input:nth-of-type(1):checked~.brand-switch .brand-tab:nth-child(1) strong,
.al-brands>input:nth-of-type(2):checked~.brand-switch .brand-tab:nth-child(2) strong,
.al-brands>input:nth-of-type(3):checked~.brand-switch .brand-tab:nth-child(3) strong{color:var(--brand-ink)}
.al-brands>input:nth-of-type(1):focus-visible~.brand-switch .brand-tab:nth-child(1),
.al-brands>input:nth-of-type(2):focus-visible~.brand-switch .brand-tab:nth-child(2),
.al-brands>input:nth-of-type(3):focus-visible~.brand-switch .brand-tab:nth-child(3){outline:3px solid var(--action);outline-offset:2px}
.brand-panel{display:none}
.al-brands>input:nth-of-type(1):checked~.brand-panel:nth-of-type(1),
.al-brands>input:nth-of-type(2):checked~.brand-panel:nth-of-type(2),
.al-brands>input:nth-of-type(3):checked~.brand-panel:nth-of-type(3){display:block}
.brand-panel>.inner{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.brand-panel h2{margin-bottom:var(--s-4)}
.role{display:block;font-size:var(--fs-body);font-weight:400;color:var(--ink-soft);margin-top:var(--s-1)}

.ic{width:22px;height:22px;flex:0 0 22px;stroke:var(--brand-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spec-bar{list-style:none;margin:0 0 var(--s-6);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5)}
.spec-bar li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-small);color:var(--ink-soft)}
.spec-bar b{color:var(--ink)}
/* ตัวเลขรองทุกจุดใช้ฟอนต์เดียวกับ .num — เลข 0 ของ Mitr มีขีด (มติ T) ห้ามหลุดมาตามคำไทยที่อยู่ข้างเลข */
.digits,.spec-bar b,.bars b{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums}
.digits{font-weight:600}   /* เส้นบางที่ 12px ทำให้ ClearType ย้อมสีเลข 1 — เพิ่มน้ำหนักให้ก้านหนาพอ */

.pkg-head{margin:0 0 var(--s-3);font-size:var(--fs-h3)}
.pkgs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:1fr}
.pkg{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:var(--s-4)}
.pkg--rec{border-color:var(--brand-ink)}
.pkg-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.pkg-name{font-size:19px;line-height:1.2}
.pkg-meta{flex-basis:100%;color:var(--ink-soft);font-size:var(--fs-small)}
.pill{font-style:normal;font-size:12px;font-weight:700;color:var(--brand-ink);
  border:1px solid var(--brand);border-radius:var(--r-pill);padding:1px var(--s-2)}
.pkg-prices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.pkg-arch{display:flex;flex-direction:column;gap:2px;min-width:0}
.pkg-arch-label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.pkg-arch .num{font-size:clamp(24px,6.5vw,30px);color:var(--brand-ink)}
.pkg-n{font-size:var(--fs-small);color:var(--ink-soft)}
.pkg-na{color:var(--line);font-size:24px;line-height:1}

/* งวด — แท่งจากตัวเลขจริงใน pricing.json (สูงตามสัดส่วนงวดที่แพงสุดของแพ็กเกจนั้น) · พับไว้ให้การ์ดสั้น */
.plan{margin-top:var(--s-3);border-top:1px solid var(--line)}
.plan summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;
  font-weight:600;font-size:var(--fs-small);color:var(--action)}
.plan summary::after{content:"";width:8px;height:8px;margin-left:auto;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease-out}
.plan[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.plan-arch{padding:0 0 var(--s-3)}
.plan-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:var(--s-2)}
.bars{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:var(--s-2)}
.bars li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.bars b{font-size:12px;white-space:nowrap;margin-bottom:2px}
.bars i{display:block;width:100%;height:calc(var(--h) * .56px);min-height:4px;background:var(--brand);border-radius:var(--r-sm) var(--r-sm) 0 0}
.bars span{font-size:12px;line-height:1.2;color:var(--ink-soft);margin-top:4px}

/* Smile Preview (Angel) — กล่องเดียวในแผง สีพื้นแบรนด์ ปุ่มเป็น event แยก click_app */
.smile{margin-top:var(--s-6);padding:var(--s-5) var(--s-4);border:1px solid var(--brand);border-radius:var(--r-lg);background:var(--brand-wash)}
.smile h3{margin:0 0 var(--s-3)}
.smile-steps{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;gap:var(--s-3)}
.smile-steps li{display:flex;align-items:center;gap:var(--s-3);font-weight:600}
.smile .note{margin:var(--s-3) 0 0}
.panel-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);padding-bottom:var(--s-6)}
.panel-cta .btn-primary{flex:1 1 220px}

/* ขั้นตอน — รูปจริงของคลินิกเป็นภาพย่อ · พื้นหลังห้องรักษาเดียวกับบล็อกอาการหน้าแรก ให้ต่อเนื่องกัน */
.steps-band{position:relative;background:var(--ink);overflow:hidden}
.steps-band::before{content:"";position:absolute;inset:0;
  background-image:url("/static/img/gbp/treatment-room-bg.webp");background-size:cover;background-position:center}
.steps-band::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.steps-band .inner{position:relative;z-index:1}
.steps-band h2{color:var(--paper)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.steps li{display:grid;grid-template-columns:88px 1fr;gap:var(--s-3);align-items:center;color:var(--paper)}
.steps img{display:block;width:88px;height:88px;object-fit:cover;border-radius:var(--r-md)}
.steps-text strong{display:block;font-size:17px;margin-bottom:2px}
.steps-text span{display:block;color:var(--ink-on-dark);font-size:var(--fs-small)}

.faq-body{padding:var(--s-3) var(--s-4)}
.other-sys{margin:0 0 var(--s-5)}
.other-sys:last-child{margin-bottom:0}
.other-sys h3{margin:0 0 var(--s-2)}

@media (min-width:760px){
  /* จอกว้าง: มือ+เครื่องมืออยู่กลาง-ซ้ายของรูป → ข้อความไปอยู่ขวา (ฝั่งคนไข้) บนเฉดขาวไล่จากขวา ไม่บังมือ */
  .al-hero{padding:var(--s-7) 0;min-height:460px;align-items:center}
  .al-hero::after{background:linear-gradient(270deg,var(--wash) 0%,var(--wash) 40%,var(--wash-mid) 54%,transparent 66%)}
  .al-hero-copy{margin-left:auto;max-width:34ch}   /* แคบพอให้ทั้งบล็อกอยู่ขวาของมือที่ถือเครื่องมือ */
  .panel-cta .btn-primary{flex:0 0 auto;min-width:220px}
  .brand-tab{min-height:64px;padding:var(--s-3) var(--s-4)}
  .brand-tab strong{font-size:19px}
  .brand-tab span{font-size:var(--fs-small)}
  .pkgs{grid-template-columns:repeat(2,1fr)}
  .pkg-meta{min-height:3.3em}   /* จองไว้ 2 บรรทัด — การ์ดข้างกันที่ meta ยาว (EN) จะไม่ดันแถวราคาเหลื่อมกัน */
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  .steps li{grid-template-columns:1fr;align-items:start}
  .steps img{width:100%;height:auto;aspect-ratio:1}
  .smile{display:grid;grid-template-columns:1fr auto;gap:var(--s-3) var(--s-5);align-items:center}
  .smile h3{grid-column:1 / -1}
  .smile-steps{margin:0}
  .smile .note{grid-column:1 / -1}
}
@media (min-width:1000px){
  .pkgs{grid-template-columns:repeat(3,1fr)}
}

.plain{margin:0 0 var(--s-4);padding-left:20px;color:var(--ink-soft)}
.plain li{margin-bottom:var(--s-1)}
.lead{color:var(--ink-soft);font-size:var(--fs-lead)}
.note{color:var(--ink-soft);font-size:var(--fs-small)}
.page-head{padding:var(--s-5) 0 var(--s-2);background:var(--brand-wash)}
.legal-doc{max-width:68ch}.legal-doc h2{margin-top:var(--s-5)}.legal-doc ul{padding-left:1.25em}.legal-doc li{margin:.35em 0}

/* ── ราคา ── */
.price-headline{font-size:clamp(22px,5vw,30px);font-weight:700;color:var(--brand-ink);margin:var(--s-1) 0 var(--s-3)}
/* จุดขายราคา 1 ประโยคใต้ตัวเลข (pricing.json usp_*) — หน้าบริการ + การ์ดหน้าแรก · All-on-4 "ไม่มีบวกเพิ่มระหว่างการรักษา" (T 2569-09-23) */
.usp-line{margin:0 0 var(--s-3);color:var(--brand-ink);font-size:var(--fs-small);font-weight:600;max-width:52ch;text-wrap:pretty}
.table-wrap{overflow-x:auto;margin:0 calc(var(--gutter) * -1) var(--s-3);padding:0 var(--gutter)}
.price-table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-small);background:var(--paper)}
.price-table th,.price-table td{text-align:left;padding:var(--s-3);border-bottom:1px solid var(--line);vertical-align:top}
.price-table th{font-weight:700;background:var(--paper-alt)}
.price-table td.num{font-weight:700;white-space:nowrap}
.price-table tr.rec td{background:var(--brand-wash)}
.price-table em{font-style:normal;font-size:12px;font-weight:700;color:var(--brand-ink);
  border:1px solid var(--brand);border-radius:var(--r-pill);padding:1px var(--s-2);margin-left:var(--s-2)}

/* ── FAQ ── */
/* ── อัตราค่าบริการ ──
   ไม่ใช้ตารางมีเส้นกรอบ เพราะรายการยาว 14 แถวแล้วเส้นตัดกันเต็มไปหมด
   ใช้แถวคั่นเส้นเดียวแทน · เดสก์ท็อปแตกเป็น 2 คอลัมน์ให้ไม่ต้องเลื่อนยาว */
.fee-group{margin:0 0 32px}
.fee-group:last-of-type{margin-bottom:0}
.fee-group h3{margin:0 0 4px;font-size:15px;letter-spacing:.02em}
.fee-group .note{margin:0 0 12px}
.fees{list-style:none;margin:0;padding:0}
.fees li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.fees li:first-child{border-top:1px solid var(--line)}
.fees .nm{font-size:15px;line-height:1.5}
.fees .sub{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.fees .amt{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--brand-ink);text-align:right}
.fee-lead{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.fee-lead li{border:1px solid var(--line);border-radius:99px;padding:6px 14px;
  font-size:13.5px;background:var(--paper)}
.fee-lead b{font-variant-numeric:tabular-nums;color:var(--brand-ink)}

/* งวดที่ต้องจ่าย — มติคุณ T: ลูกค้าต้องเห็น ไม่ใช่ซ่อนไว้ */
.pay-plan{display:block;font-size:12px;font-weight:400;color:var(--ink-soft);
  margin-top:4px;font-variant-numeric:tabular-nums;white-space:normal;max-width:22ch;margin-left:auto}

/* หน้ารวมคำถาม — ชิปลัดไปแต่ละกลุ่ม ให้มือถือไม่ต้องเลื่อนหา */
.faq-nav{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0}
.faq-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:600;color:var(--ink)}
.faq-nav a:hover{border-color:var(--action);color:var(--action)}
.faq-group{margin:0 0 32px}
.faq-group:last-child{margin-bottom:0}
.faq-group h2{scroll-margin-top:16px}
.faq{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);margin-bottom:var(--s-2)}
.faq summary{padding:var(--s-3) var(--s-4);font-weight:600;cursor:pointer;min-height:var(--tap);display:flex;align-items:center}
.faq[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:var(--s-3) var(--s-4);margin:0;color:var(--ink-soft)}

/* ── แกลเลอรี ── */
.gallery{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.gallery li{aspect-ratio:1;overflow:hidden;border-radius:var(--r-md);background:var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* ── ฟอร์มนัดหมาย ── */
.appointment{max-width:560px}
.appointment label{display:block;font-weight:600;margin:var(--s-4) 0 var(--s-2)}
.appointment .req{color:var(--brand-ink)}
.appointment input,.appointment select,.appointment textarea{
  width:100%;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);min-height:var(--tap)}
.appointment textarea{min-height:88px;resize:vertical}
.appointment .two{display:grid;gap:0 var(--s-3);grid-template-columns:1fr 1fr}
.appointment .two label{margin-top:var(--s-4)}
.appointment button{margin-top:var(--s-4);width:100%}
.appointment .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-result{font-weight:600;color:var(--brand-ink);min-height:1.5em}

/* ── แถวปุ่มซ้ำก่อน footer — desktop เท่านั้น ── */
.quick-repeat{display:none;border-top:1px solid var(--line);background:var(--paper-alt)}
.quick-repeat .inner{display:flex;gap:var(--s-3);flex-wrap:wrap;padding:var(--gutter)}

.site-foot{background:var(--ink);color:var(--paper);padding:var(--s-5) 0;margin-top:0}
.site-foot .brand{font-weight:700;margin-bottom:var(--s-2)}
.site-foot .addr,.site-foot .legal{color:var(--ink-on-dark);font-size:var(--fs-small)}
.site-foot a{color:var(--paper)}

/* ── แถบล่างติดหน้าจอ — mobile เท่านั้น ── */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:var(--shadow-bar);
}
.stickybar .btn{flex:1;padding:0 var(--s-3);font-size:var(--fs-small)}
body{padding-bottom:74px}   /* กันแถบล่างบังเนื้อหา */

@media (min-width:760px){
  .stickybar{display:none}
  body{padding-bottom:0}
  /* hero หน้าแรกจอกว้าง: ข้อความซ้ายบนผนังโล่ง ป้ายนีออนขวาไม่โดนเฉด · สูงพอให้เห็นป้ายทั้งอัน */
  .instrument-hero{min-height:560px;align-items:center}
  .instrument-hero::before{background-position:center}
  .instrument-hero::after{background:linear-gradient(90deg,var(--wash) 0%,var(--wash) 38%,var(--wash-mid) 52%,transparent 66%)}
  .instrument-main{max-width:46ch}
  .quick-repeat{display:block}
  .appointment button{width:auto}
  /* รายการยาวแตกเป็น 2 คอลัมน์ ไม่ต้องเลื่อนยาว · แถวสั้นปล่อยคอลัมน์เดียว */
  .fees.long{columns:2;column-gap:40px}
  .fees.long li:first-child{border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}