/* Layout: luxury black+gold hero, cream content bands, mobile-first, sticky contact bar */
:root{
  --ink:#121013; --ink-2:#1E1B20; --ink-soft:#5C5560;
  --gold:#C9A227; --gold-lt:#E8D9A8; --gold-dp:#A5841C;
  --cream:#F7F1E8; --cream-2:#FFFBF5; --white:#fff;
  --line:#E3D9C9; --line-dk:#332E37;
  --f-body:'Noto Sans Thai',system-ui,sans-serif;
  --f-head:'Noto Serif Thai','Noto Sans Thai',serif;
  --f-num:'Noto Sans Thai',system-ui,-apple-system,sans-serif;
  --r:18px; --shadow:0 24px 60px -34px rgba(18,16,19,.55);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600}

.wrap{max-width:1140px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:68px}
@media(min-width:900px){.band{padding-block:108px}}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--gold-dp);margin-bottom:14px;text-transform:uppercase}
h2{font-family:var(--f-head);font-size:clamp(26px,5.2vw,42px);font-weight:700;line-height:1.35;letter-spacing:-.005em;text-wrap:balance}
.lede{margin-top:16px;color:var(--ink-soft);max-width:58ch;font-size:17px}
.center{text-align:center}.center .lede{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font:700 16.5px/1 var(--f-body);cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,#E0BC4A 50%,var(--gold) 100%);color:#2A2108;box-shadow:0 14px 30px -14px rgba(201,162,39,.75)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-out{border-color:currentColor;background:transparent}
.cta-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:540px){.cta-row .btn{width:100%}}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(18,16,19,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dk)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);font-family:var(--f-head);font-weight:700;font-size:17px}
.brand i{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;font:600 15px var(--f-num);font-style:normal}
.topnav{display:none;gap:26px;font-size:14.5px;font-weight:500;color:#C4BCC9}
.topnav a:hover{color:var(--gold-lt)}
@media(min-width:960px){.topnav{display:flex}}
.top .btn{min-height:40px;padding:0 18px;font-size:14px}

/* hero */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(90% 70% at 18% 20%,rgba(201,162,39,.16),transparent 62%),
  linear-gradient(180deg,rgba(18,16,19,.55) 0%,rgba(18,16,19,.82) 70%,var(--ink) 100%)}
.hero .wrap{padding-block:56px 64px;position:relative}
@media(min-width:900px){.hero .wrap{padding-block:86px 96px}}
.stars{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;border:1px solid rgba(201,162,39,.45);background:rgba(201,162,39,.1);font-size:13.5px;color:var(--gold-lt);margin-bottom:22px}
.stars b{color:#fff;font-family:var(--f-num);font-size:16px;font-weight:600}
.hero h1{font-family:var(--f-head);font-size:clamp(33px,8vw,62px);font-weight:700;line-height:1.3;letter-spacing:-.01em;max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .sub{margin-top:20px;font-size:clamp(16.5px,2.1vw,19px);color:#D6CEDA;max-width:44ch}
.hero .btn-out{color:var(--cream)}
.proof{margin-top:34px;padding-top:24px;border-top:1px solid var(--line-dk);display:flex;flex-wrap:wrap;gap:14px 36px}
.proof div{min-width:0}
.proof b{display:block;font-family:var(--f-num);font-size:28px;font-weight:600;color:var(--gold-lt);line-height:1.1}
.proof span{font-size:13.5px;color:#9F96A5}

/* pain */
.pain-grid{margin-top:38px;display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.pain{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;position:relative}
.pain::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.pain p{font-size:16px;font-weight:500;line-height:1.65}
.pain small{display:block;margin-top:7px;color:var(--ink-soft);font-size:14.5px;font-weight:400}
.pull{margin-top:34px;padding:26px 28px;border-radius:var(--r);background:var(--ink);color:var(--cream);font-family:var(--f-head);font-size:clamp(18px,3.1vw,24px);font-weight:600;line-height:1.6;text-wrap:balance}
.pull span{color:var(--gold)}

/* mechanism */
.dark{background:var(--ink);color:var(--cream)}
.dark .eyebrow{color:var(--gold)}
.dark .lede{color:#B8AFBE}
.mech{margin-top:40px;display:grid;gap:16px;counter-reset:m}
@media(min-width:820px){.mech{grid-template-columns:repeat(3,1fr)}}
.mech li{background:rgba(255,255,255,.045);border:1px solid var(--line-dk);border-radius:var(--r);padding:28px 26px;counter-increment:m}
.mech li::before{content:"ขั้นที่ " counter(m);font-family:var(--f-body);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold);display:inline-block;line-height:1;margin-bottom:16px;padding-bottom:9px;border-bottom:1.5px solid rgba(201,162,39,.45)}
.mech h3{font-family:var(--f-head);font-size:20px;font-weight:600;margin-bottom:7px}
.mech p{color:#B8AFBE;font-size:15.5px}

/* gallery */
.gal{margin-top:38px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.shot{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:1/1;object-fit:cover}
.shot figcaption{padding:16px 20px 18px}
.shot h3{font-family:var(--f-head);font-size:18.5px;font-weight:600}
.shot p{margin-top:3px;color:var(--ink-soft);font-size:14.5px}
.shot .tag{display:inline-block;margin-bottom:7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--gold-dp);text-transform:uppercase}

/* master */
.master-photo{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-dk);margin-bottom:38px;background:var(--ink-2)}
.master-photo img{width:100%}
.master-grid{display:grid;gap:30px}
@media(min-width:900px){.master-grid{grid-template-columns:1.1fr .9fr;gap:60px}}
.cred{margin-top:24px;display:grid;gap:12px}
.cred li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:16px}
.cred i{width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-style:normal;font-size:14px;flex:none;margin-top:3px}
.cred b{color:var(--gold-lt)}
.cred span{color:#B8AFBE;font-size:14.5px;display:block}
.when{margin-top:28px;padding:22px 24px;border-radius:var(--r);border:1px solid rgba(201,162,39,.4);background:rgba(201,162,39,.08)}
.when b{color:var(--gold-lt);font-family:var(--f-head);font-size:18px}
.when p{margin-top:6px;color:#B8AFBE;font-size:15px}
.team-list{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px}
.team-list li{padding:8px 17px;border-radius:999px;border:1px solid var(--line-dk);font-size:14.5px;color:#C4BCC9}

/* technique */
.tech{margin-top:38px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:9px}
.tcard h3{font-family:var(--f-head);font-size:21px;font-weight:700}
.tcard .who{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:14.5px;color:var(--ink-soft)}
.tcard .who b{color:var(--ink)}
.tcard p{font-size:15.5px;color:var(--ink-soft)}

/* table */
.tbl-wrap{margin-top:30px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--ink);color:var(--cream);font-family:var(--f-head);font-weight:600;font-size:15px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.p{font-family:var(--f-num);font-size:19px;font-weight:600;white-space:nowrap}
.hl{color:var(--gold-dp)}
.note{margin-top:14px;font-size:14.5px;color:var(--ink-soft)}

/* compare */
.cmp{margin-top:20px;display:grid;gap:14px}
@media(min-width:760px){.cmp{grid-template-columns:1fr 1fr}}
.cmp div{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--white)}
.cmp div.vip{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,162,39,.07),var(--white) 60%)}
.cmp h4{font-family:var(--f-head);font-size:19px;font-weight:700;margin-bottom:12px}
.cmp ul{display:grid;gap:8px;font-size:15.5px}
.cmp li{padding-left:24px;position:relative;color:var(--ink-soft)}
.cmp li::before{content:"✓";position:absolute;left:0;color:var(--gold-dp);font-weight:700}
.cmp div:not(.vip) li::before{content:"•";color:var(--ink-soft)}

/* steps */
.steps{margin-top:40px;display:grid;gap:0}
.step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding-bottom:28px;position:relative}
.step:not(:last-child)::before{content:"";position:absolute;left:26px;top:56px;bottom:2px;width:1.5px;background:var(--line)}
.step .dot{width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font:600 21px var(--f-num)}
.step h3{font-family:var(--f-head);font-size:19.5px;font-weight:600;padding-top:11px}
.step p{color:var(--ink-soft);margin-top:2px}
@media(min-width:900px){
 .steps{grid-template-columns:repeat(3,1fr);gap:26px}
 .step{grid-template-columns:1fr;gap:14px;padding-bottom:0}
 .step:not(:last-child)::before{left:62px;right:-26px;top:26px;bottom:auto;width:auto;height:1.5px}
 .step h3{padding-top:0}
}

/* reviews */
.revs{margin-top:36px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.rev .s{color:var(--gold);letter-spacing:3px;font-size:15px}
.rev p{margin-top:12px;font-size:16px;line-height:1.7}
.rev cite{display:block;margin-top:14px;font-style:normal;font-size:13.5px;color:var(--ink-soft)}

/* faq */
.faq{margin-top:34px;display:grid;gap:11px;max-width:820px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:14px}
.faq summary{cursor:pointer;padding:19px 22px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--f-num);color:var(--gold-dp);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 22px 20px;color:var(--ink-soft)}
.faq details p + p{padding-top:10px}

/* contact */
.final{background:var(--ink);color:var(--cream);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 50% 0%,rgba(201,162,39,.22),transparent 62%)}
.final h2{max-width:19ch;margin-inline:auto}
.final .lede{color:#B8AFBE}
.final .cta-row{justify-content:center}
.final .btn-out{color:var(--cream)}
.contact-grid{margin-top:46px;display:grid;gap:14px;text-align:left;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ci{border:1px solid var(--line-dk);border-radius:var(--r);padding:22px 24px;background:rgba(255,255,255,.035);transition:border-color .16s,background .16s}
a.ci:hover{border-color:var(--gold);background:rgba(201,162,39,.09)}
.ci .k{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.ci .v{margin-top:7px;font-size:17px;font-weight:600;word-break:break-word}
.ci .m{margin-top:4px;font-size:14px;color:#9F96A5}
.tel-big{font-family:var(--f-num);font-size:30px;font-weight:600;letter-spacing:.02em;color:var(--gold-lt);user-select:all}

footer{background:#0B0A0C;color:#8C8491;padding-block:34px calc(104px + env(safe-area-inset-bottom,0px));font-size:13px;line-height:1.85}
footer a{color:#C4BCC9;font-weight:500}
footer a:hover{color:var(--gold-lt);text-decoration:underline}
.flinks{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px;font-size:14px}
footer p + p{margin-top:8px}
@media(min-width:900px){footer{padding-bottom:40px}}

/* sticky bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;background:rgba(18,16,19,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line-dk);
 padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.bar .btn{flex:1;min-height:50px;padding:0 10px;font-size:15.5px}
.bar .btn-out{color:var(--cream)}
@media(min-width:960px){.bar{display:none}}

/* astra ornaments */
.orn{display:block;width:min(420px,72%);margin:0 auto 26px;opacity:.9}
.orn-lg{width:min(560px,86%);margin-bottom:34px}
.laurel{position:relative;display:inline-grid;place-items:center;width:210px;height:210px;margin:6px auto 4px}
.laurel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.laurel div{position:relative;text-align:center;line-height:1.1}
.laurel .n{font-family:var(--f-num);font-size:52px;font-weight:600;color:var(--gold-dp);display:block}
.laurel .t{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-soft);display:block;margin-top:2px}
.textured{background:var(--cream-2) url(assets/texture-cream.jpg) center/cover;border-block:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ===================================================================
   Refinement layer v2 — premium spacing, Thai type, table polish
   เพิ่มทีหลัง override เฉพาะค่าที่ระบุ ไม่แตะโครงเดิม
   =================================================================== */

/* จังหวะแนวตั้ง — ความหรูมาจากพื้นที่ว่าง */
.band{padding-block:clamp(76px,9vw,128px)}
.band+.band{padding-top:clamp(64px,7.5vw,108px)}

/* ตัวอักษรไทยต้องการพื้นที่บน-ล่างมากกว่าละติน เพราะมีสระและวรรณยุกต์ */
h1{line-height:1.34}
h2{line-height:1.4}
h3{line-height:1.45}
.lede{font-size:17.5px;line-height:1.82;max-width:56ch}

/* eyebrow มีขีดทองนำหน้า ให้ดูเป็นระบบ */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;flex:none;opacity:.85}
.center .eyebrow{justify-content:center}

/* ตารางราคาให้อ่านเหมือนเมนูร้านระดับสูง */
th{padding:16px 22px;letter-spacing:.02em}
td{padding:18px 22px}
.tbl-wrap{box-shadow:0 18px 44px -32px rgba(18,16,19,.5)}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--cream-2)}
tbody tr:last-child td{border-bottom:0}
.p{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dark .tbl-wrap{background:rgba(255,255,255,.03);border-color:var(--line-dk);box-shadow:none}
.dark td{border-bottom-color:var(--line-dk)}
.dark tbody tr:hover{background:rgba(232,217,168,.06)}

/* ปุ่ม — ยกเบาๆ ตอน hover และมีวงโฟกัสชัดตอนใช้คีย์บอร์ด */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a:focus-visible,summary:focus-visible{outline:2.5px solid var(--gold-dp);outline-offset:3px;border-radius:6px}

/* เส้นคั่นลายทอง ใช้คั่นระหว่างส่วน */
.rule{height:52px;background:url(divider-fine.svg) center/auto 52px no-repeat;margin:0 auto}
.dark .rule{opacity:.75}

/* มุมการ์ดลายอาร์ตเดโค */
.framed{position:relative}
.framed::before,.framed::after{content:"";position:absolute;width:72px;height:72px;
  background:url(panel-corner.svg) left top/72px 72px no-repeat;pointer-events:none;opacity:.9}
.framed::before{left:14px;top:14px}
.framed::after{right:14px;bottom:14px;transform:rotate(180deg)}
@media(max-width:600px){.framed::before,.framed::after{width:48px;height:48px;background-size:48px 48px}}

@media(prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
  tbody tr{transition:none}
}

/* ===================================================================
   ส่วนประกอบที่ใช้ร่วมกันทุกหน้าย่อย (ย้ายมาจาก price.html)
   =================================================================== */
.crumb{font-size:.82rem;color:var(--ink-soft);padding-top:1.2rem}
.crumb a{color:var(--gold-dp);font-weight:600}
.answer{background:var(--ink);color:var(--cream);border-radius:var(--r);padding:1.6rem 1.7rem;margin-top:1.4rem}
.answer h2{color:var(--cream);font-size:1.05rem;margin:0 0 .9rem}
.answer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.answer li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  border-bottom:1px dashed rgba(232,217,168,.22);padding-bottom:.55rem;font-size:.97rem}
.answer li:last-child{border-bottom:0;padding-bottom:0}
.answer b{font-family:var(--f-num);font-size:1.3rem;color:var(--gold-lt);white-space:nowrap}
.answer .small{color:#C9C0C6;font-size:.85rem;margin-top:.9rem;display:block}
@media(max-width:480px){.answer{padding:1.2rem}.answer li{grid-template-columns:1fr;gap:.1rem}}
.vs{display:grid;gap:1rem;margin-top:1.4rem}
@media(min-width:760px){.vs{grid-template-columns:1fr 1fr}}
.vs>div{border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;background:var(--white)}
.vs>div.best{border-color:var(--gold);border-width:2px}
.vs h3{font-family:var(--f-head);font-size:1.1rem;margin:0 0 .2rem}
.vs .tag{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-dp)}
.vs ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.5rem;font-size:.92rem}
.vs li{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start}
.vs li::before{content:"•";color:var(--gold-dp);font-weight:700}
.nextpages{display:grid;gap:.8rem;margin-top:1.3rem}
@media(min-width:700px){.nextpages{grid-template-columns:1fr 1fr}}
.nextpages a{display:block;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;
  background:var(--white);text-decoration:none;color:var(--ink)}
.nextpages a:hover{border-color:var(--gold)}
.nextpages b{display:block;font-family:var(--f-head);font-size:1.02rem;color:var(--gold-dp)}
.nextpages span{font-size:.88rem;color:var(--ink-soft)}

/* ===== ภาพจากแอสตร้า + ลายเส้น SVG ===== */

/* หัวหน้าย่อย — พื้นครีมไล่เฉด เส้นทองรวมอยู่ขวา ข้อความอยู่ซ้ายจึงอ่านชัด */
.hero-soft{position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
.hero-soft::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url(hero-light.jpg) center right/cover no-repeat}
@media(max-width:760px){.hero-soft::before{opacity:.55}}

/* ส่วนปิดการขาย — พื้นผิวฟอยล์ทองบนดำ ให้ดูเป็นวัสดุจริง ไม่ใช่สีแบน */
.final{background:var(--ink) url(foil-dark.jpg) center/cover no-repeat}
.final::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(65% 85% at 50% 0%,rgba(201,162,39,.16),transparent 70%)}

/* เลขขั้นตอนในวงแหวนทอง */
.step .num{background:none!important;border:0!important;
  width:76px;height:76px;flex:none;display:grid;place-items:center;
  background-image:url(seal-ring.svg)!important;background-size:76px 76px!important;
  background-repeat:no-repeat!important;background-position:center!important;
  font-family:var(--f-num);font-size:30px;font-weight:600;color:var(--gold-dp);line-height:1}
.dark .step .num,.final .step .num{color:var(--gold-lt)}
@media(max-width:540px){.step .num{width:62px;height:62px;background-size:62px 62px!important;font-size:25px}}

/* ===================================================================
   v3 — ตัวเลขแบบใช้งานจริง + ตารางที่อ่านบนมือถือได้โดยไม่ต้องเลื่อนข้าง
   =================================================================== */

/* เลขทุกตัวเป็นแบบ lining (สูงเท่ากันทุกตัว) และ tabular (กว้างเท่ากัน)
   คอลัมน์ราคาจึงตรงกันเป๊ะ และไม่มีเลข 9 ห้อยใต้เส้นบรรทัด */
.num,td.p,.proof b,.stars b,.tel-big,.laurel .n,.answer b,.step .num,.brand i,.step .dot{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
td.p{font-size:18px;font-weight:700;letter-spacing:.005em}
.answer b{font-size:1.28rem;font-weight:700;letter-spacing:.005em}
.proof b{font-size:26px;font-weight:700}
.laurel .n{font-size:46px;font-weight:700}
.tel-big{font-size:27px;font-weight:700}
.step .num{font-size:26px;font-weight:700}
.step .dot{font-size:19px;font-weight:700}
.faq summary::after{font-family:var(--f-body);font-weight:400;font-size:24px}

/* ---------- Mobile first: ตารางกลายเป็นการ์ด ---------- */
@media(max-width:680px){
  .tbl-wrap{border:0;background:none;box-shadow:none;overflow:visible;margin-top:22px}
  .tbl-wrap.framed::before,.tbl-wrap.framed::after{display:none}
  table{min-width:0;display:block;font-size:16px}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody,tr,td{display:block;width:100%}
  tr{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
     padding:16px 18px;margin-bottom:12px;box-shadow:0 10px 26px -22px rgba(18,16,19,.5)}
  tr:hover{background:var(--white)}
  td{border:0;padding:7px 0;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  td::before{content:attr(data-l);color:var(--ink-soft);font-size:14.5px;font-weight:600;
     text-align:left;flex:1 1 auto;min-width:0}
  td.p{flex:0 0 auto}
  td:first-child{display:block;font-weight:700;font-size:17.5px;color:var(--ink);
     border-bottom:1px solid var(--line);padding:0 0 11px;margin-bottom:5px}
  td:first-child::before{display:none}
  .dark tr{background:rgba(255,255,255,.05);border-color:var(--line-dk);box-shadow:none}
  .dark tr:hover{background:rgba(255,255,255,.05)}
  .dark td:first-child{color:var(--cream);border-bottom-color:var(--line-dk)}
  .dark td::before{color:#B8AFBE}
}

/* ===================================================================
   v4 — บล็อกไกด์ไลน์ถ่ายรูป วางไว้ข้างปุ่มส่งรูป
   =================================================================== */
.shoot{margin-top:42px;text-align:left;border:1px solid var(--line-dk);border-radius:var(--r);
  background:rgba(255,255,255,.04);padding:26px;display:grid;gap:22px}
@media(min-width:820px){.shoot{grid-template-columns:300px 1fr;padding:32px;gap:34px;align-items:start}}
.shoot-ph{position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--gold);background:#2A2528}
.shoot-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 44%}
.shoot-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 14px;font-size:13.5px;font-weight:600;
  color:var(--cream);background:linear-gradient(180deg,rgba(18,16,19,0),rgba(18,16,19,.92))}
.shoot h3{font-family:var(--f-head);font-size:21px;font-weight:600;color:var(--cream);margin-bottom:14px}
.shoot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.shoot li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:15.5px;color:var(--cream)}
.shoot li::before{content:"";width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23121013' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:17px 17px;background-repeat:no-repeat;background-position:center}
.shoot li b{display:block;font-weight:700}
.shoot li span{color:#B8AFBE;font-size:14px}
.shoot-close{margin-top:4px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line-dk)}
.shoot-close img{display:block;width:100%;aspect-ratio:1000/260;object-fit:cover;object-position:center 32%}
.shoot-close p{position:absolute;inset:0;display:grid;place-items:center;text-align:center;margin:0;padding:0 16px;
  background:linear-gradient(180deg,rgba(18,16,19,.62),rgba(18,16,19,.2));
  color:var(--cream);font-weight:700;font-size:16px;line-height:1.45}
.shoot-close p small{display:block;font-weight:400;font-size:13.5px;color:var(--gold-lt);margin-top:3px}

/* แก้: แอตทริบิวต์ height ในแท็ก img ชนะ aspect-ratio ทำให้ภาพสูงเกิน */
.shoot-ph img,.shoot-close img{height:auto}
/* แก้: b กับ span เป็นลูกกริดคนละตัว span เลยตกไปคอลัมน์ไอคอนแล้วตัดบรรทัดรายตัวอักษร */
.shoot li b,.shoot li span{grid-column:2}
@media(max-width:620px){
  .shoot-close img{aspect-ratio:1000/420}
  .shoot-close p{font-size:15px}
}

/* ===================================================================
   v5 — หน้าโปรไฟล์อาจารย์
   =================================================================== */
.mhero{display:grid;gap:26px}
@media(min-width:860px){.mhero{grid-template-columns:400px 1fr;gap:48px;align-items:center}}
.mhero-ph{border-radius:var(--r);overflow:hidden;border:3px solid var(--gold);box-shadow:var(--shadow);background:#2A2528}
.mhero-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mrole{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:10px}
.dark .mrole,.final .mrole{color:var(--gold)}
.mname{font-family:var(--f-head);font-size:clamp(30px,6vw,48px);font-weight:700;line-height:1.25}
.mtag{margin-top:14px;font-size:17.5px;line-height:1.8;color:var(--ink-soft);max-width:52ch}
.dark .mtag{color:#B8AFBE}
.mcreds{margin-top:26px;display:grid;gap:12px}
.mcreds li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.mcreds li::before{content:"";width:9px;height:9px;margin-top:11px;border-radius:50%;background:var(--gold);flex:none}
.mcreds b{display:block;font-size:16.5px;font-weight:700}
.mcreds span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:1px}
.dark .mcreds span{color:#B8AFBE}

.award-grid{margin-top:36px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.award{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.dark .award{background:rgba(255,255,255,.05);border-color:var(--line-dk)}
.award img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.award figcaption{padding:16px 18px 18px}
.award .ev{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dp);display:block;margin-bottom:5px}
.dark .award .ev{color:var(--gold)}
.award b{display:block;font-family:var(--f-head);font-size:17.5px;font-weight:600;line-height:1.4}
.award p{margin-top:5px;font-size:14px;color:var(--ink-soft);line-height:1.6}
.dark .award p{color:#B8AFBE}

.team-row{margin-top:40px;display:grid;gap:30px 18px;
  grid-template-columns:repeat(auto-fit,minmax(142px,1fr));justify-items:center;text-align:center}
.tm{display:grid;justify-items:center;gap:14px;max-width:190px}
.tm .av{position:relative;width:124px;height:124px;display:grid;place-items:center;flex:none}
.tm .av::before{content:"";position:absolute;inset:0;
  background:url(seal-ring.svg) center/124px 124px no-repeat;opacity:.9}
.tm .av img{width:94px;height:94px;border-radius:50%;object-fit:cover;object-position:center 28%;
  display:block;background:#2A2227;box-shadow:inset 0 0 0 1px rgba(201,162,39,.35)}
.tm b{display:block;font-family:var(--f-head);font-size:18px;font-weight:600}
.tm span{display:block;margin-top:4px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:430px){
  .team-row{grid-template-columns:repeat(2,1fr);gap:26px 12px}
  .tm .av{width:104px;height:104px}
  .tm .av::before{background-size:104px 104px}
  .tm .av img{width:78px;height:78px}
}
.srcnote{margin-top:22px;font-size:13px;color:var(--ink-soft);line-height:1.7;max-width:70ch}
.dark .srcnote{color:#8C838F}

/* ===================================================================
   v6 — ปุ่มเมนูมือถือ + เมนูเต็มจอ
   บนมือถือซ่อนปุ่มโทรที่หัวเว็บ เพราะมีปุ่มโทรที่แถบล่างอยู่แล้ว
   =================================================================== */
.burger{display:grid;place-items:center;width:44px;height:44px;flex:none;
  background:transparent;border:1.5px solid rgba(201,162,39,.5);border-radius:12px;cursor:pointer;padding:0}
.burger span{display:block;width:19px;height:1.8px;background:var(--gold-lt);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.top .btn-call{display:none}
@media(min-width:960px){
  .burger{display:none}
  .top .btn-call{display:inline-flex}
}

.menu{position:fixed;inset:0;z-index:60;background:var(--ink);overflow-y:auto;
  padding:calc(70px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px))
          calc(28px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));
  animation:menuIn .22s ease}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
.menu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%,rgba(201,162,39,.15),transparent 70%)}
.menu nav{position:relative;display:grid;gap:2px;max-width:560px;margin:0 auto}
.menu nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 4px;border-bottom:1px solid var(--line-dk);
  font-family:var(--f-head);font-size:23px;font-weight:600;color:var(--cream)}
.menu nav a::after{content:"→";color:var(--gold);font-family:var(--f-body);font-size:19px;opacity:.7}
.menu nav a:active{color:var(--gold-lt)}
.menu .mfoot{position:relative;max-width:560px;margin:30px auto 0;display:grid;gap:11px}
.menu .mfoot .btn{width:100%}
.menu .mtel{text-align:center;margin-top:16px;color:#B8AFBE;font-size:14px;line-height:1.9}
.menu .mtel b{display:block;font-size:22px;color:var(--gold-lt);font-weight:700;
  font-variant-numeric:lining-nums tabular-nums}
body.menu-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .menu{animation:none}
  .burger span{transition:none}
}
/* หัวเว็บต้องอยู่เหนือเมนู ปุ่มเมนูจะได้กลายเป็นปุ่มปิดได้ */
.top{z-index:70}
.menu{z-index:60}
/* ให้เมนูพอดีจอมือถือ ไม่ต้องเลื่อน */
.menu nav a{padding:16px 4px;font-size:22px}
.menu .mfoot{margin-top:24px}
.menu .mtel{margin-top:14px}
@media(max-height:700px){.menu nav a{padding:13px 4px;font-size:20px}}

/* ตารางบนมือถือ: ช่องที่เป็นข้อความยาว ให้ป้ายขึ้นบรรทัดบน ไม่ถูกบีบจนตัดคำ
   ส่วนช่องราคายังเป็นป้ายซ้าย–ตัวเลขขวาเหมือนเดิม */
@media(max-width:680px){
  td::before{flex:0 0 auto;white-space:nowrap}
  td:not(.p){flex-wrap:wrap;row-gap:2px}
  td:not(.p)::before{width:100%;margin-bottom:1px}
  td:not(.p):not(:first-child){display:flex;justify-content:flex-start;text-align:left}
}