/* ============================================================
   ระบบสี / ตัวอักษร  (Design tokens)
   ============================================================ */
:root{
  /* สีหลัก: ฟ้าน้ำเงินอมเขียว โทนสงบ */
  --ink:        #12232B;
  --ink-soft:   #4F6670;
  --blue-900:   #123444;
  --blue-700:   #1A5068;
  --blue-500:   #276F8D;
  /* สีอ่อน: เขียวมุก */
  --mint:       #74C6AD;
  --mint-200:   #B7E5D6;
  --mint-100:   #E4F4EE;
  --porcelain:  #F1F6F6;  /* สำรองไว้เฉพาะบล็อกที่ต้องดู "คลินิก" เย็น ๆ — ไม่ใช่พื้นหลังหลักแล้ว */
  --white:      #FEFEFC;
  --gold:       #B4862B;
  --line:       #EAE5DC;
  /* พื้นครีม — ค่าเริ่มต้นของพื้นหลังหน้าเว็บ (ชุด 2A "พอร์ซเลน" อ่อนลง) */
  --bg:         #FCFBF9;
  --bg-emph:    #F7F5F0;
  /* พื้นเข้มถาวร (แถบบนสุด, พื้นหลังรูป, หมวดนัดหมาย) — เข้มทั้งสองโหมด */
  --deep:       #123444;
  --hl:         rgba(183,229,214,.62);
  /* การ์ดคำบรรยายที่ซ้อนบนรูป */
  --ovl-bg:     rgba(254,254,252,.94);
  --ovl-fg:     #123444;
  --ovl-fg2:    #4F6670;
  --dot:        rgba(18,52,68,.24);
  --dot-on:     #1A5068;
  /* แถบเมนูโปร่งแสง */
  --nav-bg:     rgba(241,246,246,.86);
  --nav-bg2:    rgba(241,246,246,.95);
  --bar-bg:     rgba(254,254,252,.94);
  color-scheme: light;

  --display: "Trirong", "Noto Serif Thai", Georgia, serif;
  --body: "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(18,52,68,.04), 0 12px 32px -12px rgba(18,52,68,.16);
  --shadow-lg: 0 2px 4px rgba(18,52,68,.05), 0 32px 60px -24px rgba(18,52,68,.28);
}

/* ============================================================
   โหมดมืด
   ทำงานสองทาง คือตามการตั้งค่าเครื่องของผู้ใช้ และตามปุ่มสลับที่เมนู
   แก้สีในสองบล็อกล่างนี้ให้ตรงกันเสมอ
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --ink:        #E4EFEF;
  --ink-soft:   #9DB6BC;
  --blue-900:   #E4EFEF;
  --blue-700:   #2C7E9C;
  --blue-500:   #7EC9D9;
  --mint:       #74C6AD;
  --mint-200:   #8FD9C4;
  --mint-100:   #16333D;
  --porcelain:  #0C222B;
  --white:      #12303B;
  --gold:       #DFB258;
  --line:       #23474F;
  --bg:         #0C222B;
  --bg-emph:    #16333D;
  --deep:       #071A21;
  --hl:         rgba(44,126,156,.45);
  --ovl-bg:     rgba(7,26,33,.9);
  --ovl-fg:     #E4EFEF;
  --ovl-fg2:    #9DB6BC;
  --dot:        rgba(228,239,239,.28);
  --dot-on:     #8FD9C4;
  --nav-bg:     rgba(12,34,43,.86);
  --nav-bg2:    rgba(12,34,43,.96);
  --bar-bg:     rgba(12,34,43,.95);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 32px 60px -24px rgba(0,0,0,.7);
  color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:        #E4EFEF;
  --ink-soft:   #9DB6BC;
  --blue-900:   #E4EFEF;
  --blue-700:   #2C7E9C;
  --blue-500:   #7EC9D9;
  --mint:       #74C6AD;
  --mint-200:   #8FD9C4;
  --mint-100:   #16333D;
  --porcelain:  #0C222B;
  --white:      #12303B;
  --gold:       #DFB258;
  --line:       #23474F;
  --bg:         #0C222B;
  --bg-emph:    #16333D;
  --deep:       #071A21;
  --hl:         rgba(44,126,156,.45);
  --ovl-bg:     rgba(7,26,33,.9);
  --ovl-fg:     #E4EFEF;
  --ovl-fg2:    #9DB6BC;
  --dot:        rgba(228,239,239,.28);
  --dot-on:     #8FD9C4;
  --nav-bg:     rgba(12,34,43,.86);
  --nav-bg2:    rgba(12,34,43,.96);
  --bar-bg:     rgba(12,34,43,.95);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 32px 60px -24px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---- ปรับรายจุดสำหรับโหมดมืด (ต้องแก้ให้ตรงกันทั้งสองบล็อก) ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) body{background-color:#0C222B}
  :root:not([data-theme="light"]) .card .ico,
:root:not([data-theme="light"]) :root:not([data-theme="light"]) .step .dur,
:root:not([data-theme="light"]) :root:not([data-theme="light"]) .price-note svg{color:var(--mint-200)}
  :root:not([data-theme="light"]) .btn-primary:hover{background:#3893B2}
  :root:not([data-theme="light"]) .btn-light{background:var(--mint-200); color:var(--deep)}
  :root:not([data-theme="light"]) .btn-light:hover{background:#ABE7D6}
  :root:not([data-theme="light"]) .form-ok .tick{color:var(--deep)}
  :root:not([data-theme="light"]) .u-now{background:rgba(223,178,88,.16); color:#E8C57E}
  :root:not([data-theme="light"]) .u-soon{background:rgba(126,201,217,.14); color:var(--blue-500)}
  :root:not([data-theme="light"]) .u-plan{background:rgba(143,217,196,.12); color:var(--mint-200)}
  :root:not([data-theme="light"]) .sym-foot{border-top-color:rgba(228,239,239,.16)}
  :root:not([data-theme="light"]) .doc-photo{background:linear-gradient(165deg,#17414C,#1E5A66); color:var(--mint-200)}
  :root:not([data-theme="light"]) .doc-photo::after{color:rgba(228,239,239,.5)}
  :root:not([data-theme="light"]) .review blockquote p::before,
:root:not([data-theme="light"]) .review blockquote p::after{opacity:.7}
  :root:not([data-theme="light"]) .foot{background:#04141A}
  :root:not([data-theme="light"]) .brand-mark-dark{display:none}
  :root:not([data-theme="light"]) .brand-mark-light{display:block}
}

html[data-theme="dark"],
html[data-theme="dark"] body{background-color:#0C222B}
[data-theme="light"],
[data-theme="light"] body{background-color:#FCFBF9}

[data-theme="dark"] .card .ico,
[data-theme="dark"] [data-theme="dark"] .step .dur,
[data-theme="dark"] [data-theme="dark"] .price-note svg{color:var(--mint-200)}
[data-theme="dark"] .btn-primary:hover{background:#3893B2}
[data-theme="dark"] .btn-light{background:var(--mint-200); color:var(--deep)}
[data-theme="dark"] .btn-light:hover{background:#ABE7D6}
[data-theme="dark"] .form-ok .tick{color:var(--deep)}
[data-theme="dark"] .u-now{background:rgba(223,178,88,.16); color:#E8C57E}
[data-theme="dark"] .u-soon{background:rgba(126,201,217,.14); color:var(--blue-500)}
[data-theme="dark"] .u-plan{background:rgba(143,217,196,.12); color:var(--mint-200)}
[data-theme="dark"] .sym-foot{border-top-color:rgba(228,239,239,.16)}
[data-theme="dark"] .doc-photo{background:linear-gradient(165deg,#17414C,#1E5A66); color:var(--mint-200)}
[data-theme="dark"] .doc-photo::after{color:rgba(228,239,239,.5)}
[data-theme="dark"] .review blockquote p::before,
[data-theme="dark"] .review blockquote p::after{opacity:.7}
[data-theme="dark"] .foot{background:#04141A}
[data-theme="dark"] .brand-mark-dark{display:none}
[data-theme="dark"] .brand-mark-light{display:block}


*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; scroll-padding-top:96px;
  /* ตั้งพื้นหลังที่นี่ด้วย เพราะ WebView บางตัว (เช่นตัวพรีวิวไฟล์บน iPhone)
     ไม่รับค่าพื้นหลังที่ส่งต่อมาจาก body ทำให้เห็นพื้นดำของระบบแทน
     บรรทัดแรกเป็นค่าสีจริง เผื่อกรณีอ่านตัวแปร CSS ไม่ได้ */
  background-color:#FCFBF9;
  background-color:var(--bg);
}
body{
  margin:0; min-height:100vh;
  font-family:var(--body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink);
  background-color:#FCFBF9;
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.32; margin:0; letter-spacing:.01em}
p,figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:3px; border-radius:4px}

.wrap{width:min(1140px, 100% - 40px); margin-inline:auto}
.sec{padding:clamp(48px,6vw,84px) 0}

/* ---------- ป้ายหัวข้อ / eyebrow ---------- */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-500);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--mint-200); border-radius:2px}
.sec-title{font-size:clamp(28px,3.6vw,42px); max-width:22ch}
.sec-lede{margin-top:14px; color:var(--ink-soft); max-width:56ch; font-size:17px}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-size:16px; font-weight:600; white-space:nowrap;
  padding:14px 28px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
/* ไอคอนไลน์หน้าคำในปุ่มนัดหมาย — โลโก้ทางการ ไม่ดัดแปลงรูปทรง
   คุมสีได้ 3 ตัวแปร: --li-plate แผ่นรอง, --li-bubble บับเบิล, --li-mark ตัวอักษร
   24px เป็นขนาดที่เลือกไว้เพื่อความสมดุลกับตัวหนังสือในปุ่ม แลกกับความคมของ
   ตัวอักษร LINE ซึ่งที่ขนาดนี้เส้นหนา 0.87 พิกเซลบนจอ 1x จึงเบลอ
   ถ้าต้องการให้ตัวอักษรอ่านออกชัดต้องใช้ 32px ขึ้นไป ดูตารางใน CLAUDE.md */
.btn .ico-line{width:24px; height:24px; flex:none}
/* ไอคอนเอกสารหน้าคำในปุ่มส่งฟอร์ม — แยกจาก ico-line เพื่อไม่ให้เปลี่ยนเป็นสีเขียวไลน์ตอนชี้เมาส์ */
.btn .ico-doc{width:20px; height:20px; flex:none}

.btn-primary{background:var(--blue-700); color:#fff; box-shadow:0 10px 24px -12px rgba(26,80,104,.9)}
.btn-primary:hover{background:var(--blue-500); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--blue-900); border-color:var(--line)}
.btn-ghost:hover{background:var(--mint-100); border-color:var(--mint-200); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--blue-900)}
.btn-light:hover{background:var(--mint-100); transform:translateY(-2px)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-outline-light:hover{background:rgba(255,255,255,.12); transform:translateY(-2px)}

/* ปุ่ม LINE — ทางเลือกแทนฟอร์ม ใช้สีเขียวไลน์เพื่อให้ต่างจากปุ่มหลักชัดเจน */
.btn-line{background:#06C755; color:#fff}
.btn-line:hover{background:#05B34C; transform:translateY(-2px)}
/* พื้นปุ่มเขียวอยู่แล้ว จึงซ่อนแผ่นรองเขียวของโลโก้ ให้เหลือบับเบิลขาวลอยบนปุ่ม */
.btn-line .ico-line{--li-plate:transparent}

/* เส้นคั่น "หรือ" ระหว่างปุ่มส่งฟอร์มกับปุ่ม LINE — ให้ดูเป็นทางเลือก ไม่ใช่ขั้นตอนต่อไป */
.form-or{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-soft); font-size:14px}
.form-or::before,
.form-or::after{content:""; flex:1; height:1px; background:var(--line)}

/* ============================================================
   แถบบนสุด + เมนู
   ============================================================ */
.topbar{
  background:var(--deep); color:rgba(255,255,255,.82);
  font-size:13.5px; letter-spacing:.01em;
}
.topbar .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:8px 0}
.tb-info{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.topbar span{display:inline-flex; align-items:center; gap:7px}
.topbar b{color:#fff; font-weight:600}

/* ไอคอนโซเชียล — เปลี่ยน href เป็นลิงก์เพจจริงของคลินิก */
.social{display:flex; gap:8px; flex:none}
.social a{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.15); color:#fff;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social a:hover{transform:translateY(-2px)}
.social a svg{width:21px; height:21px; display:block}
/* ไอคอน LINE ใช้โลโก้ทางการเต็มกรอบ 34px (ตัวไฟล์มีขอบว่างในตัวอยู่แล้ว บับเบิล
   จึงออกมาราว 23px พอ ๆ กับไอคอนอื่นในแถว) ต้องเต็มกรอบถึงจะได้เส้นตัวอักษร
   1.24 พิกเซล ถ้าย่อเหลือ 21px เท่าไอคอนอื่นตัวอักษรจะเบลอจนอ่านไม่ออก
   ซ่อนแผ่นรองเขียวไว้เพื่อให้เข้าชุดกับไอคอนขาวล้วนตัวอื่น ตัวอักษรจึงต้องเป็น
   สีเดียวกับพื้นวงกลม ใช้ color-mix ให้ตามธีมเองเพราะ --deep ต่างกันสองโหมด */
.social .s-line svg{width:34px; height:34px}
.social .s-line{--li-plate:transparent; --li-mark:color-mix(in srgb, #fff 15%, var(--deep))}
.social .s-line:hover{--li-mark:#06C755}
.s-tel:hover{background:var(--mint-200); color:var(--deep)}
.s-fb:hover{background:#1877F2}
.s-ig:hover{background:#E1306C}
.s-line:hover{background:#06C755}
.s-yt:hover{background:#FF0000}
.s-tt:hover{background:#0B0B0B}

.nav{
  position:sticky; top:0; z-index:60;
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.stuck{border-bottom-color:var(--line); background:var(--nav-bg2)}
.nav .wrap{display:flex; align-items:center; gap:28px; padding:10px 0}

.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand-text{display:flex; flex-direction:column; gap:4px; min-width:0}
.brand-mark{width:60px; height:60px; flex:none; object-fit:contain; border-radius:8px}
/* โลโก้พื้นเข้ม (ตัวอักษรครีม) ใช้บนเว็บโหมดสว่าง โลโก้พื้นสว่าง (ตัวอักษรน้ำเงิน) ใช้บนเว็บโหมดมืด
   สลับกันเพื่อให้กล่องโลโก้ตัดกับพื้นหลังเสมอ แทนที่จะกลืนไปเป็นสีเดียวกัน */
.brand-mark-light{display:none}
.brand-name{font-family:var(--display); font-weight:600; font-size:22px; line-height:1.2; color:var(--blue-900); white-space:nowrap}
.brand-sub{font-size:11px; line-height:1.2; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; white-space:nowrap}

.menu{display:flex; gap:26px; align-items:center; font-size:15.5px; font-weight:500}
.menu a{color:var(--ink); padding:4px 0; position:relative; white-space:nowrap; transition:color .2s}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--blue-500); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.menu a:hover{color:var(--blue-700)}
.menu a:hover::after{transform:scaleX(1)}
.nav .btn{padding:11px 22px; font-size:15px}

/* ---------- เมนู "บริการ" แบบมีดรอปดาวน์ 9 หมวด ---------- */
.nav-item{position:relative}
.nav-item > a{display:inline-flex; align-items:center; gap:5px}
.nav-caret{flex:none; transition:transform .2s ease}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret{transform:rotate(180deg)}
.nav-drop{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; z-index:200;
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop{opacity:1; visibility:visible}
.nav-drop-panel{
  min-width:230px; background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:8px; box-shadow:var(--shadow-lg); display:grid; gap:1px;
}
.nav-drop-panel a{
  display:flex; align-items:center; gap:11px; padding:7px 13px; border-radius:9px;
  font-size:14.5px; font-weight:500; color:var(--ink); white-space:nowrap;
}
.nav-drop-panel a::after{display:none}
.nav-drop-panel a:hover{background:var(--bg-emph); color:var(--blue-700)}
.nav-drop-panel .ico{
  flex:none; width:30px; height:30px; border-radius:9px; background:var(--mint-100);
  display:grid; place-items:center; color:var(--blue-700);
}
.nav-drop-panel .ico svg{width:16px; height:16px}


/* ▼▼ แถบเครื่องมือนักพัฒนา · พรีวิวขนาดหน้าจอ (ชั่วคราว) — ลบบล็อกนี้ได้เมื่อเลิกใช้ ▼▼ */
.devmenu-wrap{position:relative; flex:none}
#devToggle.on{background:var(--blue-700); border-color:var(--blue-700); color:#fff}
.devmenu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:220; min-width:216px;
  background:#0E2A34; color:#fff; border-radius:14px; padding:6px;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.42);
  display:flex; flex-direction:column; gap:2px;
}
.devmenu[hidden]{display:none}
.devmenu button{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  border:0; background:transparent; color:#fff; cursor:pointer; text-align:left;
  font-family:var(--body); font-size:14px; padding:9px 12px; border-radius:9px;
  transition:background .15s ease;
}
.devmenu button:hover{background:rgba(255,255,255,.13)}
.devmenu button[aria-pressed="true"]{background:#8FD9C4; color:#07242E; font-weight:600}
.devmenu button span{opacity:.5; font-size:12.5px; flex:none}
.devmenu button[aria-pressed="true"] span{opacity:.65}

.devstage{
  position:fixed; inset:0; z-index:200; overflow:auto;
  background:rgba(4,18,24,.86); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:32px 24px 92px;
}
.devstage[hidden]{display:none}
.devwrap{
  transform-origin:center center; border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.55); flex:none;
}
.devwrap iframe{display:block; border:0; width:100%; height:100%; background:#fff}
.devsize{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:240;
  display:flex; align-items:center; gap:12px;
  color:#fff; font-size:12.5px; letter-spacing:.06em;
  background:#0E2A34; border:1px solid rgba(255,255,255,.16);
  padding:7px 7px 7px 18px; border-radius:999px; box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.devsize button{
  border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff;
  font-family:var(--body); font-size:12.5px; padding:6px 14px; border-radius:999px;
  transition:background .18s ease;
}
.devsize button:hover{background:#8FD9C4; color:#07242E}
.devsize .sizes{display:flex; gap:4px; padding-left:4px; border-left:1px solid rgba(255,255,255,.18)}
.devsize .sizes button{padding:6px 11px; font-size:12px; background:rgba(255,255,255,.08)}
.devsize .sizes button[aria-pressed="true"]{background:#8FD9C4; color:#07242E; font-weight:600}
#devClose{background:rgba(255,255,255,.2); font-weight:600}
/* ตอนพรีวิวเปิด กรอบจะคลุมทั้งจอ ปุ่มควบคุมย้ายไปอยู่แถบล่างแทน */
html[data-devpreview]{scrollbar-gutter:stable}
/* ซ่อนเครื่องมือทั้งหมดในหน้าที่ถูกโคลนไปแสดงในพรีวิว */
[data-preview] .devmenu-wrap, [data-preview] .devstage, [data-preview] .devsize{display:none !important}
/* ซ่อนเฉพาะบนจอมือถือจริง ๆ (เครื่องมือนี้ใช้ดูบนจอใหญ่) */
@media (max-width:640px){ .devmenu-wrap, .devstage, .devsize{display:none !important} }
/* ▲▲ จบ CSS แถบเครื่องมือนักพัฒนา ▲▲ */

/* ▼▼ ปุ่มสลับโหมดสว่าง/มืด (ชั่วคราว) — ลบบล็อก CSS นี้ได้เมื่อเลิกใช้ ▼▼ */
.theme-toggle{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:999px; cursor:pointer; background:transparent;
  border:1.5px solid var(--line); color:var(--blue-900);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover{background:var(--white); border-color:var(--mint-200); transform:translateY(-2px)}
.theme-toggle svg{width:18px; height:18px; display:block}
/* ▲▲ จบ CSS ปุ่มสลับโหมด ▲▲ */

.burger{display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--blue-900)}

/* ============================================================
   ส่วนหัว (Hero)
   ============================================================ */
.hero{
  padding:clamp(40px,6vw,76px) 0 clamp(56px,7vw,96px);
  background:var(--white); border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1fr .92fr; gap:clamp(32px,5vw,64px); align-items:center}
.hero h1{font-size:clamp(28px,5.4vw,56px); line-height:1.22; letter-spacing:-.005em}
.hero h1 em{
  font-style:normal; color:var(--blue-500);
  background-image:linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 87%, transparent 87%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero p.lede{margin-top:22px; font-size:18px; color:var(--ink-soft); max-width:50ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}
.chips-title{width:100%; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--mint)}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-emph); border:1px solid var(--line); border-radius:999px;
  padding:8px 16px; font-size:14px; font-weight:500; color:var(--blue-900);
}
.chip svg{flex:none; color:var(--blue-500)}


/* ---------- ภาพเด่น: สไลด์รูปคลินิก ----------
   ใส่รูปจริงโดยแก้ src ของ <img> ทั้ง 4 สไลด์ในส่วน HERO
   สไลด์ไหนยังไม่มีไฟล์รูป จะแสดงภาพวาดสำรองแทนอัตโนมัติ
   ขนาดที่แนะนำ 1200 × 1400 px (แนวตั้ง 6:7) ทุกรูป                              */
.hero-photo{
  position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--deep); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.slides{position:relative; aspect-ratio:6/7; overflow:hidden}
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .8s ease, visibility .8s;
}
.slide.on{opacity:1; visibility:visible}
.slide img{position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover}
.ph-art{position:absolute; inset:0; z-index:1; width:100%; height:100%}
.ph-tag{
  position:absolute; z-index:3; top:16px; left:16px;
  background:var(--ovl-bg); color:var(--ovl-fg);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:6px 13px; border-radius:999px;
}
.hero-photo figcaption{
  position:relative; z-index:5; flex:none;
  background:var(--white); color:var(--ink);
  padding:16px 22px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.cap{min-width:0}
.cap b{display:block; font-family:var(--display); font-size:17px; font-weight:600; line-height:1.4; color:var(--blue-900)}
.cap span{font-size:14px; color:var(--ink-soft)}
.cap.swap{animation:capIn .45s ease}
@keyframes capIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.dots{display:flex; gap:7px; flex:none}
.dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--dot); transition:width .3s ease, background .3s ease;
}
.dots button:hover{background:var(--dot-on)}
.dots button[aria-selected="true"]{width:26px; background:var(--dot-on)}

/* ---------- Hero แบบบล็อกสีเต็มจอ ----------
   scope ด้วย .hero-home (ใช้คู่กับ .hero เดิม) — ใส่คลาสนี้ที่หน้าไหนก็ได้ผลลัพธ์เดียวกัน
   หน้าที่ยังไม่ใส่คลาสนี้จะไม่ถูกกระทบ เพราะทุก selector ผูกกับ .hero-home ทั้งหมด        */
.hero.hero-home{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, var(--blue-700), var(--deep) 70%);
  border-bottom:none; color:#fff;
}
.hero.hero-home::before{
  content:""; position:absolute; z-index:0; top:-160px; right:-140px;
  width:460px; height:460px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(116,198,173,.38), transparent 72%);
}
.hero.hero-home::after{
  content:""; position:absolute; z-index:0; bottom:-180px; left:-120px;
  width:380px; height:380px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(126,201,217,.24), transparent 72%);
}
.hero.hero-home .hero-grid{position:relative; z-index:1}

.hero.hero-home .eyebrow{color:var(--mint-200)}
.hero.hero-home .eyebrow::before{background:rgba(255,255,255,.5)}

.hero.hero-home h1{
  font-size:clamp(40px,4.8vw,64px); line-height:1.16; letter-spacing:-.01em; color:#fff;
}
.hero.hero-home h1 em{color:var(--mint-200); background-image:none}

.hero.hero-home p.lede{color:rgba(255,255,255,.76)}

.hero.hero-home .chips{border-top-color:rgba(255,255,255,.16)}
.hero.hero-home .chips-title{color:var(--mint-200)}
.hero.hero-home .chip{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff}
.hero.hero-home .chip svg{color:var(--mint-200)}

.hero.hero-home .hero-photo{
  box-shadow:var(--shadow-lg); outline:1px solid rgba(255,255,255,.16); outline-offset:-1px;
}

/* หน้าบริการย่อย/careers ใช้โครง hero คนละแบบกับ index (breadcrumb + facts + finder-photo
   แทน chips + hero-photo gallery) — ปรับให้เข้ากับพื้นเข้มเหมือนกันแต่แยก selector ตามจริง */
.hero.hero-home .crumb{color:rgba(255,255,255,.6)}
.hero.hero-home .crumb a{color:var(--mint-200)}

.hero.hero-home .facts{border-top-color:rgba(255,255,255,.18)}
.hero.hero-home .facts div{border-right-color:rgba(255,255,255,.18)}
.hero.hero-home .facts b{color:#fff}
.hero.hero-home .facts span{color:rgba(255,255,255,.68)}

.hero.hero-home .finder-photo{
  box-shadow:var(--shadow-lg); outline:1px solid rgba(255,255,255,.16); outline-offset:-1px;
}

.hero.hero-home .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.hero.hero-home .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6)}

/* ---------- ตัวช่วยเลือกจากอาการ ---------- */
.finder{
  margin-top:56px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(26px,3.4vw,44px); box-shadow:var(--shadow);
}
.finder h3{font-size:clamp(23px,2.6vw,30px)}
.finder .lede{margin-top:10px; color:var(--ink-soft); font-size:16.5px; max-width:52ch}

.finder-top{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(22px,3.4vw,42px); align-items:start;
}
/* รูปคนไข้ปวดฟัน — เปลี่ยน src ของ <img> เป็นรูปจริงได้เลย
   ถ้ายังไม่มีไฟล์ จะแสดงภาพวาดสำรองแทน · แนะนำ 1000 × 1250 px (4:5) */
.finder-photo{
  position:relative; margin:0; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:4/5; background:var(--deep);
}
.finder-photo img{position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover}
.finder-copy{min-width:0}

.sym-list{display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:26px}
.sym{
  font-family:var(--display); font-size:16px; font-weight:500; line-height:1.5;
  text-align:left; color:var(--blue-900); cursor:pointer;
  background:var(--bg-emph); border:1.5px solid var(--line);
  border-radius:var(--r-md); padding:16px 18px;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sym::before{content:"\201C"}
.sym::after{content:"\201D"}
.sym:hover{border-color:var(--mint-200); background:var(--white); transform:translateY(-2px)}
.sym[aria-expanded="true"]{background:var(--blue-700); border-color:var(--blue-700); color:#fff}

.sym-out{
  margin-top:22px; background:var(--mint-100); border-radius:var(--r-md);
  padding:clamp(22px,2.6vw,30px);
}
.sym-out.swap{animation:capIn .4s ease}
.u-pill{
  display:inline-flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:600;
  line-height:1.55; padding:7px 16px; border-radius:14px; margin-bottom:18px;
}
.u-pill i{
  width:7px; height:7px; margin-top:.5em; flex:none;
  border-radius:50%; background:currentColor; font-style:normal;
}
.u-now{background:rgba(180,134,43,.16);  color:#8A6620}
.u-soon{background:rgba(39,111,141,.14); color:var(--blue-700)}
.u-plan{background:rgba(26,80,104,.10);  color:var(--blue-900)}

.sym-body{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.sym-body h4{font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-500); font-family:var(--body); font-weight:600}
.sym-body p{margin-top:8px; font-size:16px; line-height:1.75; color:var(--ink)}

.sym-foot{
  margin-top:24px; padding-top:20px; border-top:1px solid rgba(26,80,104,.14);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.sym-foot .lead{font-size:15.5px; color:var(--ink-soft)}
.sym-foot .lead b{display:block; font-family:var(--display); font-size:19px; font-weight:600; color:var(--blue-900)}
.sym-foot .acts{display:flex; gap:10px; flex-wrap:wrap}
.sym-foot .btn{padding:12px 22px; font-size:15px}

/* ============================================================
   บริการ
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:13px; align-items:center;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--mint-200)}
.card .ico{
  grid-column:1; grid-row:1;
  width:36px; height:36px; border-radius:10px; background:var(--mint-100);
  display:grid; place-items:center; color:var(--blue-700);
}
.card .ico svg{width:19px; height:19px}
.card h3{grid-column:2; grid-row:1; font-size:20px}
.card p{grid-column:1 / -1; grid-row:2; margin-top:16px; color:var(--ink-soft); font-size:15.5px; line-height:1.7}
.card .price-from{
  grid-column:1 / -1; grid-row:3; justify-self:start;
  margin-top:14px; font-size:13.5px; font-weight:600; color:var(--blue-500);
}
/* .pkg-card ใช้สไตล์ลิงก์ตัวเดียวกับการ์ดบริการ จะได้ไม่มีลิงก์ "ดูต่อ" สองหน้าตาในเว็บเดียวกัน
   (การ์ดบริการเป็น grid ส่วนการ์ดแพ็กเกจเป็น flex แนวตั้ง จึงต้องสั่งชิดซ้ายคนละแบบ) */
.card .more,
.pkg-card .more{
  grid-column:1 / -1; grid-row:4; justify-self:start;
  margin-top:12px; font-size:14.5px; font-weight:600; color:var(--blue-700);
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1.5px solid var(--mint-200); transition:gap .2s ease, border-color .2s ease;
}
.card .more:hover,
.pkg-card .more:hover{gap:10px; border-color:var(--blue-500)}
.pkg-card .more{align-self:flex-start}
/* ชื่อแพ็กเกจก็กดได้ ให้เปลี่ยนสีตอนชี้เมาส์เป็นสัญญาณว่าเป็นลิงก์ */
.pkg-card h3 a:hover{color:var(--blue-700)}

/* ============================================================
   ขั้นตอนการรักษา
   ============================================================ */
.steps-sec{background:var(--porcelain); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:48px}
.step{padding:0 26px; border-left:1px solid var(--line)}
.step:first-child{padding-left:0; border-left:0}
.step-n{
  font-family:var(--display); font-size:15px; font-weight:600; color:var(--blue-500);
  display:flex; align-items:center; gap:9px; margin-bottom:14px;
}
.step-n span{width:34px; height:34px; border-radius:50%; background:var(--mint-100); display:grid; place-items:center}
.step h3{font-size:19px}
.step p{margin-top:8px; color:var(--ink-soft); font-size:15.5px}
.step .dur{display:inline-block; margin-top:12px; font-size:13px; color:var(--blue-700); background:var(--mint-100); padding:3px 12px; border-radius:999px; font-weight:500}

/* ============================================================
   ค่าบริการ
   ============================================================ */
.price-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap}
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px}
.price-box{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 28px 20px}
.price-box h3{font-size:19px; padding-bottom:14px; border-bottom:2px solid var(--mint-200); margin-bottom:6px}
.price-box table{width:100%; border-collapse:collapse; font-size:15.5px}
.price-box td{padding:11px 0; border-bottom:1px solid var(--line); vertical-align:top}
.price-box tr:last-child td{border-bottom:0}
.price-box td:last-child{text-align:right; white-space:nowrap; font-weight:600; color:var(--blue-900); padding-left:16px}
.price-box td small{display:block; color:var(--ink-soft); font-size:13.5px; font-weight:400}
.price-note{
  margin-top:24px; background:var(--mint-100); border-radius:var(--r-md);
  padding:20px 24px; font-size:15px; color:var(--blue-900); display:flex; gap:14px; align-items:flex-start;
}
.price-note svg{flex:none; margin-top:4px; color:var(--blue-500)}

/* ============================================================
   ทีมทันตแพทย์
   ============================================================ */
.team-sec{background:var(--porcelain); border-block:1px solid var(--line)}
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; margin-top:48px}
/* หน้าย่อยมีทันตแพทย์คนเดียว ถ้าไม่จำกัดความกว้าง การ์ดจะยืดเต็มแถวและรูปใหญ่ผิดสัดส่วน */
.team .doc:only-child{max-width:240px}
.doc{text-align:left}
.doc-photo{
  aspect-ratio:3/3.6; border-radius:var(--r-md); overflow:hidden; margin-bottom:18px;
  background:linear-gradient(165deg, var(--mint-100), var(--mint-200));
  display:grid; place-items:center; color:var(--blue-700); position:relative;
}
.doc-photo::after{
  content:"ใส่รูปถ่ายที่นี่"; position:absolute; bottom:12px; left:0; right:0;
  text-align:center; font-size:11.5px; letter-spacing:.1em; color:rgba(26,80,104,.55);
}
.doc h3{font-size:18.5px}
.doc .role{color:var(--blue-500); font-size:14.5px; font-weight:600; margin-top:2px}
.doc .cred{color:var(--ink-soft); font-size:14px; margin-top:8px; line-height:1.6}

/* ============================================================
   รีวิว
   ============================================================ */
.rating{display:flex; align-items:center; gap:12px; margin-top:18px; font-size:15.5px; color:var(--ink-soft)}
.stars{color:var(--gold); letter-spacing:2px; font-size:18px}
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.review{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:28px 26px; position:relative}
.review blockquote p::before,
.review blockquote p::after{
  color:var(--mint-200); font-family:var(--display); font-weight:600;
  font-size:1.5em; line-height:0; vertical-align:-.22em;
}
.review blockquote p::before{content:"\201C"}
.review blockquote p::after{content:"\201D"}
.review p{font-size:16px; line-height:1.8}
.review footer{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px}
.review footer b{display:block; font-weight:600}
.review footer span{color:var(--ink-soft); font-size:13.5px}

/* ============================================================
   คำถามที่พบบ่อย
   ============================================================ */
.faq-sec{background:var(--porcelain); border-block:1px solid var(--line)}
.faq{margin-top:40px; max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:19px; font-weight:500; color:var(--blue-900);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--blue-500); border-bottom:2px solid var(--blue-500);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 40px 24px 0; color:var(--ink-soft); font-size:16px}

/* ============================================================
   หน้าเอกสารกฎหมาย (ข้อกำหนดฯ / นโยบายความเป็นส่วนตัว)
   ใช้ร่วมกันโดย terms.html และ privacy-policy.html
   ============================================================ */
.legal-hero{background:var(--porcelain); border-bottom:1px solid var(--line); padding:44px 0 40px}
.legal-hero h1{font-size:clamp(28px,3.4vw,38px); max-width:28ch; color:var(--blue-900)}
.legal-hero p.lede{margin-top:14px; max-width:60ch; color:var(--ink-soft); font-size:16.5px}
.legal-meta{display:flex; gap:22px; flex-wrap:wrap; margin-top:20px; font-size:14px; color:var(--ink-soft)}
.legal-meta b{color:var(--blue-900); font-weight:600}

.legal-draft{
  margin-top:22px; border-radius:var(--r-md); padding:16px 20px;
  background:rgba(180,134,43,.12); border:1px solid rgba(180,134,43,.3);
  color:var(--gold); font-size:14px; line-height:1.65; display:flex; gap:12px; align-items:flex-start;
}
.legal-draft svg{flex:none; margin-top:2px}

.legal-wrap{display:grid; grid-template-columns:250px 1fr; gap:clamp(28px,4vw,64px); align-items:start; padding:56px 0 96px}

.legal-toc{position:sticky; top:96px; border-left:2px solid var(--line); padding-left:20px}
.legal-toc p{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px}
.legal-toc ol{list-style:none; margin:0; padding:0}
.legal-toc li{margin-bottom:1px}
.legal-toc a{
  display:flex; gap:9px; padding:8px 10px; margin-left:-10px; border-radius:10px;
  font-size:14.5px; color:var(--ink-soft); line-height:1.4; transition:background .18s ease, color .18s ease;
}
.legal-toc a span{flex:none; color:var(--blue-500); font-weight:600}
.legal-toc a:hover{background:var(--mint-100); color:var(--blue-900)}
.legal-toc a.active{background:var(--mint-100); color:var(--blue-900); font-weight:600}

.legal-doc{max-width:74ch}
.legal-doc > section{padding-bottom:38px; margin-bottom:38px; border-bottom:1px solid var(--line); scroll-margin-top:96px}
.legal-doc > section:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.legal-doc h2{font-size:22px; display:flex; gap:12px; align-items:baseline; color:var(--blue-900)}
.legal-doc h2 i{font-style:normal; font-family:var(--body); font-size:14.5px; font-weight:700; color:var(--blue-500)}
.legal-doc h3{font-size:17.5px; margin-top:26px; color:var(--blue-900)}
.legal-doc p{margin-top:14px; font-size:15.5px; line-height:1.8; color:var(--ink)}
.legal-doc h2 + p, .legal-doc h3 + p{margin-top:12px}
.legal-doc ul{margin:14px 0 0; padding-left:20px}
.legal-doc li{font-size:15.5px; line-height:1.8; margin-bottom:8px; color:var(--ink)}
.legal-doc li::marker{color:var(--blue-500)}
.legal-doc strong{color:var(--blue-900); font-weight:600}

.legal-callout{
  margin-top:20px; background:var(--mint-100); border-radius:var(--r-md);
  padding:18px 22px; font-size:15px; line-height:1.7; color:var(--blue-900);
}

.legal-contact{
  margin-top:16px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px;
}
.legal-contact dl{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0; font-size:15px}
.legal-contact dt{color:var(--ink-soft)}
.legal-contact dd{margin:0; font-weight:600; color:var(--blue-900)}

/* ============================================================
   นัดหมาย + ติดต่อ
   ============================================================ */
.book-sec{background:var(--deep); color:#fff}
.book-sec .eyebrow{color:var(--mint-200)}
.book-sec .eyebrow::before{background:rgba(183,229,214,.45)}
.book-sec .sec-lede{color:rgba(255,255,255,.72)}
.book-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,4vw,56px); margin-top:44px}

.form{background:rgba(255,255,255,.06); border:1px solid rgba(183,229,214,.22); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px)}
.field{margin-bottom:18px}
.field label{display:block; font-size:14.5px; font-weight:600; margin-bottom:7px; color:var(--mint-200)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:16px; line-height:1.3; color:#fff;
  min-height:50px; box-sizing:border-box;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(183,229,214,.28);
  border-radius:var(--r-sm); padding:13px 15px; transition:border-color .2s, background .2s;
}
/* ช่องวันที่: Safari บน iPhone ใส่กรอบและระยะห่างของตัวเองเข้ามา
   ทำให้ช่องสูงกว่าช่องอื่นเกือบเท่าตัว และตัวเลขไปชิดขวา ต้องล้างออกให้หมด */
.field input[type="date"]{
  -webkit-appearance:none; appearance:none;
  display:block; height:50px;
}
.field input[type="date"]::-webkit-datetime-edit{padding:0; line-height:1.3}
.field input[type="date"]::-webkit-date-and-time-value{text-align:left; margin:0; line-height:1.3}
.field input[type="date"]::-webkit-inner-spin-button,
.field input[type="date"]::-webkit-clear-button{display:none; -webkit-appearance:none}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1); opacity:.5; cursor:pointer; padding:0; margin:0;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:.9}
.field textarea{resize:vertical; min-height:92px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--mint-200); background:rgba(255,255,255,.13);
}
.field select option{background:var(--deep); color:#fff}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.consent{display:flex; align-items:flex-start; gap:10px; margin:20px 0 6px}
.consent input[type="checkbox"]{flex:0 0 auto; width:19px; height:19px; margin-top:2px; accent-color:var(--mint-200); cursor:pointer}
.consent label{font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.72); cursor:pointer}
.consent a{color:var(--mint-200); text-decoration:underline; text-underline-offset:2px}
.consent a:hover{color:#fff}
.consent-error{display:none; color:#FFC2B8; font-size:13.5px; margin-top:8px}
.consent-error.show{display:block}
.submit-error{display:none; color:#FFC2B8; font-size:13.5px; margin-top:10px; text-align:center}
.submit-error.show{display:block}
.form .btn{width:100%; margin-top:8px}
.form .fineprint{font-size:13.5px; color:rgba(255,255,255,.6); margin-top:14px; text-align:center}
.form-ok{
  display:none; text-align:center; padding:34px 10px;
}
.form-ok.show{display:block}
.form-ok .tick{width:60px; height:60px; border-radius:50%; background:var(--mint-200); color:var(--blue-900); display:grid; place-items:center; margin:0 auto 18px}
.form-ok h3{font-size:23px; color:#fff}
.form-ok p{color:rgba(255,255,255,.72); margin-top:8px; font-size:15.5px}

.info-block{margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid rgba(183,229,214,.18)}
.info-block:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.info-block h3{font-size:18px; color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:10px}
.info-block h3 svg{color:var(--mint-200)}
.info-block p, .info-block li{color:rgba(255,255,255,.74); font-size:15.5px}
.info-block a{color:#fff; font-weight:600; border-bottom:1px solid rgba(183,229,214,.45)}
.hours{list-style:none; margin:0; padding:0}
.hours li{display:flex; justify-content:space-between; gap:20px; padding:7px 0; border-bottom:1px dashed rgba(183,229,214,.16)}
.hours li:last-child{border-bottom:0}
.hours b{color:#fff; font-weight:600}

/* ============================================================
   ท้ายเว็บ
   ============================================================ */
.foot{background:#0D2733; color:rgba(255,255,255,.6); font-size:14.5px}
.foot .wrap{padding:40px 0 34px; display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; align-items:center}
.foot .brand-name{color:#fff}
.foot .brand-sub{color:rgba(255,255,255,.5)}
.foot nav{display:flex; gap:20px; flex-wrap:wrap}
.foot nav a:hover{color:#fff}

/* ---------- แอนิเมชันตอนเลื่อนหน้าจอ ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- ปุ่มลอย LINE/โทร บนมือถือ ---------- */
.mobile-bar{display:none}

/* ============================================================
   จอเล็ก
   ============================================================ */
/* แถบเมนูเต็มต้องใช้ที่ประมาณ 1140px ถ้าแคบกว่านี้ให้ยุบเป็นปุ่มแฮมเบอร์เกอร์
   ไม่งั้นชื่อคลินิกและเมนูจะถูกบีบจนแตกบรรทัดกลางคำ */
@media (max-width:1200px){
  .menu{gap:19px; font-size:15px}
  .nav .wrap{gap:20px}
  .nav .btn{padding:11px 18px}
}
@media (max-width:1080px){
  .menu{display:none}
  .burger{display:block}
  .nav .wrap{position:relative; gap:14px}
  .menu.open{
    display:flex; flex-direction:column; gap:0; align-items:stretch;
    position:absolute; top:100%; left:0; right:0; background:var(--white);
    border-bottom:1px solid var(--line); padding:8px 4vw 18px; box-shadow:var(--shadow);
    font-size:17px;
  }
  .menu.open a{padding:13px 0; border-bottom:1px solid var(--line); white-space:normal}
  .nav-caret{display:none}
  .nav-drop{
    position:static; left:auto; transform:none; padding-top:0; opacity:1; visibility:visible; transition:none;
  }
  .nav-drop-panel{
    background:none; border:0; box-shadow:none; border-radius:0; padding:0 0 4px 16px;
  }
  .menu.open .nav-drop-panel a{padding:11px 0; font-size:14.5px; color:var(--ink-soft)}
}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .slides{aspect-ratio:4/3}
  .finder-top{grid-template-columns:1fr; gap:26px}
  .finder-photo{aspect-ratio:4/3}
  .sym-body{grid-template-columns:1fr; gap:20px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:34px 0}
  .step{padding:0 22px}
  .step:nth-child(odd){padding-left:0; border-left:0}
  .team{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .book-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .legal-wrap{grid-template-columns:1fr; padding-top:40px}
  .legal-toc{position:static; border-left:0; border-bottom:1px solid var(--line); padding:0 0 22px}
}
@media (max-width:760px){
  .nav .btn{display:none}
  .cards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr; gap:28px}
  .step{padding:0; border-left:0}
  .two{grid-template-columns:1fr}
  .hero{padding-bottom:26px}
  .hero + .sec{padding-top:46px}
  .sym-list{grid-template-columns:1fr}
  /* บนมือถือ กล่องคำตอบจะถูกย้ายเข้ามาต่อใต้ปุ่มที่เลือก ให้ดูเป็นชิ้นเดียวกัน */
  .sym-list > .sym-out{margin-top:-11px; border-radius:0 0 var(--r-md) var(--r-md)}
  .sym[aria-expanded="true"]{border-radius:var(--r-md) var(--r-md) 0 0}
  /* แถบเมนู: โลโก้กับปุ่มรวมกันแล้วกว้างเกินจอ */
  .brand-mark{width:50px; height:50px}
  .brand-name{font-size:19.5px}
  .brand-sub{font-size:9.5px; letter-spacing:.05em; white-space:normal; line-height:1.25}
  .nav .wrap{gap:12px}
  .social a{width:30px; height:30px}
  .social a svg{width:18px; height:18px}
  /* รูปสูงขึ้นอีกนิด ภาพจะได้ไม่โดนครอปกลางหน้า */
  .slides{aspect-ratio:4/4.7}
  .finder-photo{aspect-ratio:4/4}
  .hero-photo figcaption{padding:13px 16px; gap:12px}
  .cap b{font-size:15.5px}
  .cap span{font-size:13px}
  /* การ์ดหมอ 2 ใบต่อแถวบนจอแคบ ชื่อยาวจะดันกล่อง */
  .doc-photo{aspect-ratio:3/3.2}
  .doc h3{font-size:17px}
  .doc .role{font-size:13.5px}
  .doc .cred{font-size:13px}
  /* ตารางราคา ช่องซ้ายเหลือที่น้อย */
  .price-box{padding:22px 20px 16px}
  .price-box table{font-size:14.8px}
  .price-box td{padding:10px 0}
  /* ปุ่มคู่ท้ายตัวช่วยเลือกอาการ ให้เต็มความกว้างแทนที่จะเบียดกัน */
  .sym-foot{flex-direction:column; align-items:stretch; gap:16px}
  .sym-foot .acts{width:100%}
  .sym-foot .acts .btn{flex:1 1 0; justify-content:center; padding:12px 10px}
  .faq summary{font-size:17.5px; padding-right:38px}
  .legal-hero{padding:32px 0 28px}
  .legal-doc h2{font-size:19px; gap:9px}
  .legal-doc h3{font-size:16.5px}
  .legal-contact dl{grid-template-columns:1fr}
  .legal-meta{gap:14px 20px}
  .review p{font-size:15.5px}
  .sec-lede, .finder .lede{font-size:15.5px}
  .topbar .wrap{gap:12px; font-size:12.5px; justify-content:center}
  .tb-info{justify-content:center; gap:14px}
  body{padding-bottom:70px}
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; z-index:70;
    bottom:0; left:0; right:0; padding:10px 4vw calc(10px + env(safe-area-inset-bottom));
    background:var(--bar-bg); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  }
  .mobile-bar .btn{padding:13px 10px; font-size:15px}
  .mobile-bar .btn .ico-line{width:22px; height:22px}

  /* ดันปุ่ม/แผงแชทขึ้นให้พ้นแถบปุ่มโทร/LINE ด้านล่างจอมือถือ ไม่ให้ซ้อนทับกัน */
  .chatw-toggle{bottom:calc(88px + env(safe-area-inset-bottom))}
  .chatw-panel{bottom:calc(160px + env(safe-area-inset-bottom))}
}
@media (max-width:430px){
  .wrap{width:min(1140px, 100% - 28px)}
  .brand-name{font-size:18px}
  .brand-sub{font-size:9px}
  .hero h1{font-size:29px}
  .hero p.lede{font-size:16.5px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%}
  .chip{font-size:13px; padding:7px 13px}
  .chips{gap:8px}
  .card{padding:22px 20px}
  .card h3{font-size:18.5px}
  .card p{font-size:15px; margin-top:14px}
  .sym{font-size:15px; padding:14px 16px}
  .doc-photo{aspect-ratio:3/3}
  .price-head .btn{width:100%}
  .u-pill{font-size:13px}
  .form{padding:22px 18px}
  .foot .wrap{justify-content:flex-start}
}

/* ============================================================
   แพ็กเกจและโปรโมชัน
   ใช้ร่วมกันระหว่างหน้าแรก (แบบ .compact) และหน้า packages.html (แบบ .full)
   การ์ดใบเดียวกัน ต่างกันแค่คลาสตัวที่สอง — อย่าแยกเป็นสองการ์ด
   ============================================================ */
.pkg-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pkg-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--mint-200)}

/* กรอบรูปหน้าปก — ถ้าไฟล์รูปหาย <img> จะถูกลบทิ้ง เหลือพื้นสีเข้มแทน ไม่พัง */
/* รูปสัดส่วน 4:5 แนวตั้ง — ตรงกับสเปกรูปฟีดแนวตั้งของ Facebook/Instagram (1080 x 1350 px)
   รูปที่เตรียมไว้ยิงแอดจึงเอามาลงเว็บได้เลยโดยไม่ต้องครอปใหม่
   ตั้งใจให้รูปเป็นพระเอกของการ์ด ตัวหนังสือด้านล่างทำหน้าที่เป็นคำบรรยายใต้ภาพ
   flex:none สำคัญ — ถ้าไม่ใส่ การ์ดที่ชื่อยาวสองบรรทัดจะไปบีบรูปให้เตี้ยกว่าใบอื่นในแถวเดียวกัน */
.pkg-card .media{position:relative; flex:none; aspect-ratio:4/5; background:var(--deep); overflow:hidden}
.pkg-card .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

.pkg-card .body{padding:20px; display:flex; flex-direction:column; flex:1}
.pkg-card h3{font-size:17.5px; line-height:1.4; margin-top:0}
/* line-height:1.4 สำคัญกว่า margin ในการทำให้ชิด — ค่าเดิมรับ 1.75 มาจาก body
   ทำให้มีช่องไฟเปล่าเหนือตัวอักษรราว 5px ทั้งที่ margin ตั้งไว้แค่ 4px */
.pkg-card .name-en{margin-top:2px; line-height:1.4; font-size:13px; color:var(--ink-soft); letter-spacing:.02em}

/* ราคา — ใช้ตัวเลขแบบหัวเรื่องให้อ่านชัดในระยะสายตามือถือ */
.pkg-card .price{margin-top:14px; font-family:var(--display); font-size:17px; font-weight:600; color:var(--blue-900)}
/* ราคาเดิมขีดฆ่า — แสดงเฉพาะแพ็กเกจที่เคยขายราคานั้นจริงเท่านั้น */
.pkg-card .price s{margin-left:8px; font-size:14px; font-weight:400; color:var(--ink-soft)}
.pkg-card .price-hint{margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--ink-soft)}
/* ตัดคำอธิบายที่ 2 บรรทัด — การ์ดในแถวเดียวกันจะสูงใกล้เคียงกัน
   และรูปของใบถัดไปไม่ถูกดันเหลื่อมกันเวลาข้อความยาวไม่เท่ากัน */
.pkg-card .summary{
  margin-top:8px; font-size:14.5px; line-height:1.7; color:var(--ink-soft);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* บรรทัดล่างสุดของเนื้อหา: วันหมดอายุอยู่ซ้าย ป้ายหมวดอยู่ขวาสุดในระนาบเดียวกัน
   ป้ายไม่ได้อยู่แถวเดียวกับชื่อแล้ว เพราะป้ายสูงกว่าบรรทัดชื่อ เลยไปดันแถวให้สูงขึ้น
   ทำให้ชื่ออังกฤษดูหลุดห่างจากชื่อไทย
   margin-left:auto ดันป้ายไปชิดขวาเอง ใช้ได้แม้แพ็กเกจนั้นไม่มีวันหมดอายุ */
.pkg-card .meta{margin-top:12px; display:flex; align-items:center; gap:14px}
.pkg-card .meta .chip{margin-left:auto}

.pkg-card .valid{
  font-size:13.5px; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:6px;
}
.pkg-card .valid svg{flex:none; width:15px; height:15px; color:var(--blue-500)}

/* ป้ายหมวดตัวเล็ก เกาะข้างบรรทัดวันหมดอายุ ใช้ทรงเดียวกับป้ายระยะเวลาในหมวดขั้นตอนการรักษา
   flex:none + nowrap กันไม่ให้ป้ายถูกบีบจนตัวหนังสือหักกลางคำ */
.pkg-card .chip{flex:none; white-space:nowrap; font-size:12px; padding:3px 12px}

/* ปุ่มดันไปชิดล่างเสมอ การ์ดในแถวเดียวกันจึงมีปุ่มตรงระดับกันแม้ข้อความยาวไม่เท่ากัน */
.pkg-card .acts{margin-top:auto; padding-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.pkg-card .acts .btn{padding:11px 18px; font-size:14.5px}
.pkg-card.compact .acts .btn{flex:1 1 0}

/* หมดอายุแล้ว — ยังเปิดหน้าเดิมได้ แต่ทำให้รูปจางลงและติดป้ายกำกับ */
.pkg-card.expired .media img{filter:grayscale(1); opacity:.55}

/* ---------- แถบปุ่มกรองหมวด ---------- */
.pkg-filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.chip-filter{font-family:var(--body); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease}
.chip-filter:hover{background:var(--white); border-color:var(--mint-200); transform:translateY(-2px)}
.chip-filter[aria-pressed="true"]{background:var(--blue-700); border-color:var(--blue-700); color:#fff}
.pkg-count{margin-top:18px; font-size:14px; color:var(--ink-soft)}
/* .price-note ตั้ง display:flex ไว้ ซึ่งชนะ [hidden] ของเบราว์เซอร์ ต้องสั่งซ่อนเองให้ชัด
   (แบบเดียวกับ .devmenu[hidden] ด้านบน) ไม่งั้นกล่อง "ไม่มีแพ็กเกจ" จะโผล่ทั้งที่มีการ์ดอยู่ */
.price-note[hidden]{display:none}

/* ---------- แถวแพ็กเกจแบบเลื่อนแนวนอน (หน้าแรก) ----------
   แถวเดียวเสมอทุกขนาดจอ ไม่ตัดขึ้นบรรทัดใหม่ เลื่อนเองอัตโนมัติและผู้ใช้ลากเองได้
   ซ่อนแถบเลื่อนไว้เพราะมีจุดบอกตำแหน่ง (.pkg-dots) ทำหน้าที่บอกอยู่แล้ว
   จำนวนใบที่เห็นต่อหน้าจอ: 3 ใบ → 2 ใบ (≤1000) → 1 ใบครึ่ง (≤760)
   ค่า 40px / 20px คือช่องไฟ gap:20px ของ .cards ที่ต้องหักออกจากความกว้าง */
.cards.pkg-rail{
  grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 40px)/3);
  overflow-x:auto; overscroll-behavior-x:contain;
  /* ต้องสั่ง overflow-y:hidden ให้ชัด — พอตั้ง overflow-x:auto แกนตั้งจะกลายเป็น auto
     ตามไปด้วยโดยอัตโนมัติ ทำให้กล่องนี้ดูดล้อเมาส์ไว้ คนที่เลื่อนหน้าเว็บโดยเอาเมาส์
     ทับแถวนี้จะรู้สึกว่าหน้าเว็บค้าง เลื่อนลงต่อไม่ได้ */
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* เผื่อที่บน-ล่างให้การ์ดยกตัวและเงาตอนชี้เมาส์ ไม่ให้โดน overflow ตัดขอบ */
  padding:6px 0 20px;
  scrollbar-width:none;
}
.cards.pkg-rail::-webkit-scrollbar{display:none}
.cards.pkg-rail > *{scroll-snap-align:start}

/* จุดบอกตำแหน่ง — ใช้ .dots ชุดเดียวกับสไลด์รูปคลินิกในหน้าแรก แค่จัดกึ่งกลาง */
.dots.pkg-dots{justify-content:center; margin-top:12px}

@media (max-width:1000px){
  .cards.pkg-rail{grid-auto-columns:calc((100% - 20px)/2)}
}
@media (max-width:760px){
  /* ใบถัดไปโผล่ขอบมาให้เห็นว่ายังเลื่อนต่อได้
     (ไม่ดึงเต็มขอบจอ เพื่อไม่ให้เกิดแถบเลื่อนแนวนอนของทั้งหน้า) */
  .cards.pkg-rail{grid-auto-columns:85%}
  /* การ์ดยกตัวตอนชี้เมาส์ไม่มีความหมายบนจอสัมผัส และทำให้ scroll snap กระตุก */
  .cards.pkg-rail .pkg-card:hover{transform:none}
}
@media (max-width:430px){
  /* ขนาดตัวหนังสือใช้ค่าเดียวกับจอใหญ่แล้ว (ย่อลงมาตั้งแต่ต้น) เหลือแค่ปุ่มที่ต้องเต็มความกว้าง */
  .pkg-card .acts .btn{flex:1 1 0; justify-content:center; padding:11px 10px}
}

/* ============================================================
   หน้ารายละเอียดแพ็กเกจ (packages/<slug>.html)
   ส่วนใหญ่ใช้คลาสเดิมซ้ำ — รูป 4:5 ใช้ .finder-photo, ตารางค่าใช้จ่ายใช้ .price-box,
   ขั้นตอนใช้ .steps, คำถามใช้ .faq, แถบปุ่มล่างจอใช้ .mobile-bar
   ที่เพิ่มใหม่มีแค่ 4 อย่างด้านล่างนี้เพราะไม่มีของเดิมที่ใช้แทนได้
   ============================================================ */
/* บรรทัดสุดท้ายของดรอปดาวน์แพ็กเกจ — คั่นให้เห็นว่าเป็นลิงก์รวม ไม่ใช่ชื่อแพ็กเกจอีกอัน */
.nav-drop-panel .nav-drop-all{
  margin-top:5px; padding-top:9px; border-top:1px solid var(--line);
  color:var(--blue-700); font-weight:600; border-radius:0;
}

.pkg-crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-soft); margin-bottom:20px}
.pkg-crumb a:hover{color:var(--blue-700)}
.pkg-crumb span{opacity:.5}

/* กล่องราคา — จุดที่สายตาไปหยุดก่อนตัดสินใจ จึงต้องมีทั้งราคา งวดผ่อน และหมายเหตุครบในกล่องเดียว */
.pkg-pricebox{
  margin-top:26px; background:var(--mint-100); border-radius:var(--r-md);
  padding:22px 24px;
}
.pkg-pricebox .amount{font-family:var(--display); font-size:clamp(26px,3.2vw,34px); font-weight:600; color:var(--blue-900); line-height:1.3}
.pkg-pricebox .note{margin-top:8px; font-size:14px; line-height:1.6; color:var(--ink-soft)}
.pkg-pricebox .plan{
  margin-top:16px; padding-top:16px; border-top:1px solid rgba(26,80,104,.14);
  font-size:15px; color:var(--blue-900);
}
.pkg-pricebox .plan b{font-weight:600}

/* แถบข้อมูลสรุป: ระยะเวลา จำนวนครั้ง อายุที่เหมาะ — ตอบคำถามแรกของคนไข้โดยไม่ต้องเลื่อนอ่าน */
.pkg-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.pkg-facts div{
  flex:1 1 150px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:13px 15px;
}
.pkg-facts dt{font-size:13px; color:var(--ink-soft); margin:0}
.pkg-facts dd{margin:4px 0 0; font-family:var(--display); font-size:17px; font-weight:600; color:var(--blue-900); line-height:1.4}

/* รายการรวม/ไม่รวม — เครื่องหมายหน้าแต่ละข้อบอกได้เร็วกว่าอ่านหัวข้อ */
.pkg-incl{list-style:none; margin:16px 0 0; padding:0}
.pkg-incl li{position:relative; padding-left:28px; margin-bottom:11px; font-size:15.5px; line-height:1.7}
.pkg-incl li::before{
  position:absolute; left:0; top:0; font-weight:700; font-size:15px;
}
.pkg-incl.yes li::before{content:"\2713"; color:var(--blue-500)}
.pkg-incl.no li::before{content:"\2715"; color:var(--gold)}
.pkg-incl.no li{color:var(--ink-soft)}

@media (max-width:760px){
  .pkg-pricebox{padding:20px}
  .pkg-facts div{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   วิดเจ็ตแชท AI (แอดมินคลินิก) — มุมขวาล่าง ทุกหน้า
   โหลดผ่าน chat-widget.js (ฉีด DOM เอง ไม่มีอยู่ใน HTML) ใช้ตัวแปรสีเดิม
   จากด้านบนของไฟล์นี้ จึงสลับโหมดสว่าง/มืดตามหน้าเว็บโดยอัตโนมัติ
   ============================================================ */
.chatw-toggle{
  position:fixed; right:20px; bottom:20px; z-index:300;
  width:60px; height:60px; border-radius:50%; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-700); color:#fff; cursor:pointer;
  box-shadow:var(--shadow-lg); transition:transform .18s ease, background .18s ease;
}
.chatw-toggle:hover{transform:translateY(-2px); background:var(--blue-900)}
.chatw-toggle svg{width:26px; height:26px}
.chatw-toggle .chatw-close-ic{display:none}
.chatw-toggle[aria-expanded="true"] .chatw-chat-ic{display:none}
.chatw-toggle[aria-expanded="true"] .chatw-close-ic{display:block}

.chatw-panel{
  position:fixed; right:20px; bottom:92px; z-index:300;
  width:360px; max-width:calc(100vw - 32px); height:min(70vh, 560px); max-height:calc(100vh - 132px);
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.chatw-panel.open{opacity:1; transform:none; pointer-events:auto}

.chatw-head{
  flex:none; display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--deep); color:#fff;
}
.chatw-head .chatw-avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.chatw-avatar-img{width:100%; height:100%; object-fit:cover; border-radius:0}
.chatw-head-text{min-width:0}
.chatw-head-text strong{display:block; font-family:var(--display); font-size:15.5px; font-weight:600; line-height:1.3}
.chatw-head-text span{display:block; font-size:12px; color:var(--mint-200); line-height:1.3}
.chatw-status{display:flex !important; align-items:center; gap:5px}
.chatw-status-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#3ddc84; box-shadow:0 0 0 2px rgba(61,220,132,.25);
}
.chatw-status.chatw-connecting .chatw-status-dot{
  animation:chatw-status-connect 2s ease-out 1 both;
}
.chatw-status .chatw-status-loading{display:none; align-items:center; gap:4px}
.chatw-status.chatw-connecting .chatw-status-online{display:none}
.chatw-status.chatw-connecting .chatw-status-loading{display:inline-flex}
.chatw-status-loading i{
  width:3px; height:3px; border-radius:50%; background:var(--mint-200); flex:none;
  animation:chatw-bounce 1.1s infinite ease-in-out;
}
.chatw-status-loading i:nth-child(2){animation-delay:.15s}
.chatw-status-loading i:nth-child(3){animation-delay:.3s}
@keyframes chatw-status-connect{
  0%, 11%   { background:#94a3ac; box-shadow:0 0 0 2px rgba(148,163,172,.25); }
  12%, 23%  { background:#3ddc84; box-shadow:0 0 0 2px rgba(61,220,132,.25); }
  24%, 35%  { background:#94a3ac; box-shadow:0 0 0 2px rgba(148,163,172,.25); }
  36%, 47%  { background:#3ddc84; box-shadow:0 0 0 2px rgba(61,220,132,.25); }
  48%, 59%  { background:#94a3ac; box-shadow:0 0 0 2px rgba(148,163,172,.25); }
  60%, 71%  { background:#3ddc84; box-shadow:0 0 0 2px rgba(61,220,132,.25); }
  72%, 83%  { background:#94a3ac; box-shadow:0 0 0 2px rgba(148,163,172,.25); }
  84%, 100% { background:#3ddc84; box-shadow:0 0 0 2px rgba(61,220,132,.25); }
}
.chatw-head-close{
  margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%; border:0;
  background:transparent; color:#fff; opacity:.8; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.chatw-head-close:hover{opacity:1; background:rgba(255,255,255,.12)}

.chatw-body{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg);
}
.chatw-msg{max-width:82%; font-size:14.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.chatw-msg p{margin:0; padding:9px 13px; border-radius:14px}
.chatw-msg.bot{align-self:flex-start}
.chatw-msg.bot p{background:var(--white); color:var(--ink); border-bottom-left-radius:4px; box-shadow:var(--shadow)}
.chatw-msg.user{align-self:flex-end}
.chatw-msg.user p{background:var(--blue-700); color:#fff; border-bottom-right-radius:4px}
.chatw-msg.error p{background:rgba(180,134,43,.14); color:var(--gold); border:1px solid rgba(180,134,43,.3)}
.chatw-msg a{color:var(--blue-700); text-decoration:underline}
.chatw-msg.user a{color:#fff}

.chatw-typing{align-self:flex-start; display:flex; gap:4px; padding:11px 14px; background:var(--white); border-radius:14px; border-bottom-left-radius:4px; box-shadow:var(--shadow)}
.chatw-typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-soft); display:block; animation:chatw-bounce 1.1s infinite ease-in-out}
.chatw-typing i:nth-child(2){animation-delay:.15s}
.chatw-typing i:nth-child(3){animation-delay:.3s}
@keyframes chatw-bounce{0%,60%,100%{opacity:.35; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

.chatw-form{
  flex:none; display:flex; align-items:flex-end; gap:8px; padding:10px; border-top:1px solid var(--line);
  background:var(--white);
}
.chatw-input{
  flex:1; resize:none; max-height:96px; min-height:40px; padding:10px 13px;
  border:1px solid var(--line); border-radius:14px; background:var(--bg);
  color:var(--ink); font-family:var(--body); font-size:14.5px; line-height:1.5;
}
.chatw-input:focus{outline:2px solid var(--blue-500); outline-offset:1px}
.chatw-send{
  flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:var(--blue-700); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, opacity .15s ease;
}
.chatw-send:hover{background:var(--blue-900)}
.chatw-send:disabled{opacity:.45; cursor:default}
.chatw-send svg{width:18px; height:18px}

.chatw-foot{
  flex:none; text-align:center; font-size:10.5px; color:var(--ink-soft);
  padding:5px 10px 8px; background:var(--white);
}
.chatw-foot a{color:var(--blue-700)}
.chatw-foot a:hover{text-decoration:underline}

@media (max-width:430px){
  .chatw-panel{
    right:12px; left:12px; bottom:calc(160px + env(safe-area-inset-bottom)); width:auto; max-width:none;
    height:min(72vh, 520px);
  }
  .chatw-toggle{right:16px; bottom:calc(88px + env(safe-area-inset-bottom))}
}