/* ============================================================
   Four Elements Massage & Wellness · นครราชสีมา
   Mood & tone: warm ivory / champagne / deep brown  (26 ก.ย. 2569)
   ตามมาตรฐาน _playbook/STANDARDS.md
   🚨 ตัวเลขใช้ --font-num (sans) เสมอ — ห้ามใช้ serif ดิสเพลย์
   ============================================================ */
:root{
  /* พาเลตต์จาก design system */
  --ivory:#F6F2EC;  --beige:#E7DED2;  --champagne:#C8AD7A;
  --taupe:#A89D91;  --brown:#30271F;
  --brown-2:#43372C; --brown-3:#5A4A3B;
  --white:#FFFFFF;  --sand:#EFE7DA;

  /* บทบาทในเว็บ */
  --deep:var(--brown); --deep-2:var(--brown-2); --deep-3:var(--brown-3);
  --cream:var(--ivory);
  --gold:#A9873F;        /* champagne เวอร์ชันเข้มพอสำหรับตัวอักษรบนพื้นสว่าง */
  --gold-lt:var(--champagne);
  --gold-dk:#8A6C2E;
  --ink:#30271F; --ink-soft:#5A4F45; --ink-mute:#6B6057;

  --earth:#8A6A4B; --water:#5A7684; --wind:#8B9A8E; --fire:#B0603C;

  --line:rgba(48,39,31,.14); --line-2:rgba(48,39,31,.08);
  --line-lt:rgba(255,255,255,.22);
  --shadow:0 1px 2px rgba(48,39,31,.04), 0 12px 32px rgba(48,39,31,.07);
  --shadow-lg:0 24px 60px rgba(48,39,31,.14);

  --sans:"Inter","Anuphan",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Playfair Display","Noto Serif Thai",Georgia,"Times New Roman",serif;
  --font-num:var(--sans);            /* ⚠️ ห้ามชี้ไป --serif */

  --track-label:.18em; --track-btn:.1em; --track-micro:.06em;
  --maxw:1240px; --bar-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root:lang(th){--track-label:.06em; --track-btn:.03em; --track-micro:.02em}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  padding-bottom:var(--bar-h);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ---------- โครง ---------- */
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.sec{padding:clamp(3.75rem,8vw,7.5rem) 0}
.sec--deep{background:var(--brown);color:var(--ivory)}
.sec--sand{background:var(--beige)}
.sec--white{background:var(--white)}
.narrow{max-width:min(100%,720px)}
.center{text-align:center;margin-inline:auto}

/* ---------- ตัวอักษร ---------- */
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:600;color:var(--brown);text-wrap:pretty;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.d1{font-family:var(--serif);font-size:clamp(2.35rem,4.6vw,3.75rem);font-weight:400;
  letter-spacing:-.005em;line-height:1.14}
.d2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.375rem);font-weight:400;line-height:1.18}
.d3{font-size:clamp(1.2rem,1.9vw,1.4rem);font-weight:600;line-height:1.25}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--brown)}
.lead{font-size:1.0625rem;color:var(--ink-soft);line-height:1.75;max-width:min(100%,640px)}
.small{font-size:.95rem}
.mute{color:var(--ink-mute)}
.sec--deep .mute,.sec--deep .lead{color:rgba(246,242,236,.76)}
.sec--deep h1,.sec--deep h2,.sec--deep h3,.sec--deep h4{color:var(--ivory)}
.num,.pc__pr b,.pt__n,.cbar__num,.mem__cred b,.row__p,.mi__was{
  font-family:var(--font-num);font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.01em}

.eyebrow{display:block;margin:0 0 1.15rem;font-size:.84rem;font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-dk)}
.sec--deep .eyebrow{color:var(--champagne)}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;font-size:.76rem;font-weight:600;letter-spacing:var(--track-btn);
  text-transform:uppercase;border-radius:2px;transition:.32s var(--ease);white-space:nowrap}
.btn--gold{background:var(--brown);color:var(--ivory)}
.btn--gold:hover{background:var(--brown-2);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line-lt);color:var(--ivory)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.btn--dark{border:1px solid rgba(48,39,31,.35);color:var(--brown)}
.btn--dark:hover{background:var(--brown);color:var(--ivory);border-color:var(--brown)}
.btn svg{width:16px;height:16px;flex:none}
.btn::after{content:"→";font-size:.95em;transition:transform .32s var(--ease)}
.btn:hover::after{transform:translateX(4px)}

.tlink{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brown);
  border-bottom:1px solid rgba(48,39,31,.2);padding-bottom:.3rem;transition:.3s var(--ease)}
.tlink:hover{border-bottom-color:var(--gold);gap:.85rem}
.sec--deep .tlink{color:var(--champagne);border-bottom-color:rgba(200,173,122,.4)}

/* ---------- ภาพแทนที่ ---------- */
.ph{position:relative;overflow:hidden;background:var(--beige);isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 22% 18%, rgba(200,173,122,.34), transparent 58%),
    linear-gradient(150deg,#D9CDBC 0%,#C3B4A1 52%,#8E7F6E 100%)}
.ph::after{content:"";position:absolute;inset:0;opacity:.45;
  background:radial-gradient(rgba(48,39,31,.05) 1px,transparent 1px);background-size:4px 4px}
.ph--warm::before{background:radial-gradient(120% 90% at 25% 15%, rgba(200,173,122,.4), transparent 56%),
  linear-gradient(150deg,#E0CFB6 0%,#C49E73 55%,#8A6644 100%)}
.ph--sage::before{background:radial-gradient(120% 90% at 18% 20%, rgba(168,181,164,.38), transparent 58%),
  linear-gradient(150deg,#CFD5C6 0%,#A8B3A2 52%,#6F7B6B 100%)}
.ph--water::before{background:radial-gradient(120% 90% at 20% 18%, rgba(140,168,180,.4), transparent 56%),
  linear-gradient(150deg,#C6D2D7 0%,#93A9B2 52%,#5A7684 100%)}
.ph__mark{position:absolute;inset:0;display:grid;place-items:center;z-index:1;opacity:.2}
.ph__mark svg{width:clamp(64px,20%,124px);height:auto;stroke:#FFF;fill:none;
  stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.ph__cap{position:absolute;left:1.1rem;bottom:.9rem;z-index:2;font-size:.78rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(48,39,31,.45)}

/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:60;transition:.4s var(--ease)}
/* สามคอลัมน์: โลโก้ซ้าย · เมนูกลาง · ภาษา+เบอร์เกอร์ขวา
   เมนูอยู่กลางจอเสมอ ไม่ขยับตามตอนโลโก้หน้าแรกซ่อน/โผล่ */
.hd__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:1.3rem 0;transition:.4s var(--ease)}
.hd__in > .brand{justify-self:start}
.hd__in > .nav{justify-self:center}
.hd__in > .hd__act{justify-self:end}
.hd::before{content:"";position:absolute;inset:0;background:rgba(246,242,236,.94);
  backdrop-filter:blur(14px);opacity:0;transition:.4s var(--ease);
  border-bottom:1px solid var(--line-2)}
.hd.on::before{opacity:1}
.hd.on .hd__in{padding:.75rem 0}
.hd .wrap{position:relative}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ivory);transition:color .4s var(--ease)}
.hd.on .brand{color:var(--brown)}
.brand__mk{width:34px;height:34px;flex:none;display:grid;place-items:center}
.brand__mk svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.05;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.brand__tx b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.1}
.brand__tx span{display:block;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  opacity:.65;margin-top:.22rem}
.nav{display:flex;align-items:center;justify-content:center;gap:1.75rem}
.nav a{font-size:.92rem;font-weight:500;letter-spacing:var(--track-micro);
  color:rgba(246,242,236,.82);transition:.25s;position:relative}
.hd.on .nav a{color:var(--ink-soft)}
.nav a:hover,.nav a[aria-current]{color:var(--ivory)}
.hd.on .nav a:hover,.hd.on .nav a[aria-current]{color:var(--brown)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:var(--champagne);transition:right .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.hd__act{display:flex;align-items:center;gap:1rem}
.lang{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;
  letter-spacing:.08em;color:rgba(246,242,236,.6)}
.hd.on .lang{color:var(--ink-mute)}
.lang button{padding:.25rem .1rem;transition:.25s}
.lang button.on{color:var(--champagne)}
.hd.on .lang button.on{color:var(--gold-dk)}
.lang button:hover{color:var(--ivory)}
.hd.on .lang button:hover{color:var(--brown)}
.lang i{font-style:normal;opacity:.35}
/* ปุ่มเมนู: จุดสี่จุดเรียง 2×2 ล้อกับโลโก้ธาตุทั้งสี่ — หมุนเล็กน้อยตอน hover
   เปิดเมนูแล้วจุดจางหายกลายเป็นกากบาท (ไม่ใช่ขีดสามขีดแบบทั่วไป) */
.burger{display:none;width:44px;height:44px;place-items:center;color:var(--ivory);
  position:relative;border-radius:50%;transition:background .35s var(--ease)}
.hd.on .burger{color:var(--brown)}
.burger:hover{background:rgba(255,255,255,.1)}
.hd.on .burger:hover{background:rgba(48,39,31,.07)}
.burger span{display:block;width:20px;height:20px;background:none;
  background-image:
    radial-gradient(circle 2.6px at 3px 3px,   currentColor 98%, transparent 100%),
    radial-gradient(circle 2.6px at 17px 3px,  currentColor 98%, transparent 100%),
    radial-gradient(circle 2.6px at 3px 17px,  currentColor 98%, transparent 100%),
    radial-gradient(circle 2.6px at 17px 17px, currentColor 98%, transparent 100%);
  background-repeat:no-repeat;
  transition:transform .55s var(--ease),opacity .3s var(--ease)}
.burger:hover span{transform:rotate(45deg)}
.burger::before,.burger::after{content:"";position:absolute;width:19px;height:1.4px;
  background:currentColor;opacity:0;transform:rotate(0);transition:.45s var(--ease)}
body.menu .burger span{opacity:0;transform:rotate(90deg) scale(.55)}
body.menu .burger::before{opacity:1;transform:rotate(45deg)}
body.menu .burger::after{opacity:1;transform:rotate(-45deg)}
body.menu .burger{color:var(--ivory)}

@media(max-width:1080px){
  /* มือถือ: โลโก้ซ้าย · ภาษา+ปุ่มเมนูชิดขวาเสมอ (แม้ตอนโลโก้หน้าแรกซ่อนอยู่) */
  .hd__in{display:flex;align-items:center;justify-content:space-between}
  .hd__in > .hd__act{margin-left:auto}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.4rem;
    background:rgba(48,39,31,.985);backdrop-filter:blur(6px);
    opacity:0;visibility:hidden;transition:.4s var(--ease);z-index:-1;overflow-y:auto;padding:5rem 1.5rem}
  .nav a{font-family:var(--serif);font-size:1.65rem;font-weight:400;letter-spacing:0;
    color:rgba(246,242,236,.9)}
  .hd.on .nav a{color:rgba(246,242,236,.9)}
  body.menu .nav{opacity:1;visibility:visible}
  .burger{display:grid}
}

/* ---------- Hero: ภาพเต็มจอ ข้อความน้อย ---------- */
.hero{position:relative;min-height:min(100svh,980px);display:grid;place-items:center;
  text-align:center;color:#fff;overflow:hidden;padding:calc(6rem + 3vw) 1.2rem clamp(5rem,9vw,7rem)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,#5A4A3B 0%,#3C3128 48%,#241D17 100%)}
.hero__media{position:absolute;inset:0;margin:0;z-index:1;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  animation:kb 30s ease-in-out infinite alternate;filter:saturate(.95) contrast(1.03)}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.11)}}
.hero__scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(26,20,16,.88) 0%,rgba(26,20,16,.48) 45%,rgba(26,20,16,.66) 100%)}
.hero .wrap{position:relative;z-index:3}
.hero__tx{max-width:min(100%,900px);margin-inline:auto}

/* โลโก้ร้านกลางจอ + fade in */
.hero__logo{margin:0;display:grid;justify-items:center;gap:clamp(1.3rem,2.6vw,2rem);
  text-transform:none;font-weight:400}
.hero__mk{display:block;width:clamp(78px,10vw,118px);height:clamp(78px,10vw,118px)}
.hero__mk svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:.95;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 14px rgba(20,14,10,.5))}
.hero__wm{display:block;font-family:var(--serif);color:#fff;font-weight:400;
  font-size:clamp(1.85rem,4.6vw,3.5rem);letter-spacing:.17em;text-transform:uppercase;
  line-height:1.1;text-indent:.17em;text-shadow:0 2px 30px rgba(20,14,10,.45)}
.hero__wm span{display:block;font-family:var(--sans);font-size:clamp(.6rem,1.15vw,.82rem);
  font-weight:500;letter-spacing:.42em;text-indent:.42em;color:#fff;
  margin-top:clamp(.7rem,1.3vw,1.1rem)}
@media(max-width:560px){
  .hero__wm{letter-spacing:.13em;text-indent:.13em}
  .hero__wm span{letter-spacing:.3em;text-indent:.3em}
}
.js .hero__mk,.js .hero__wm{opacity:0;animation:fadeUp 1.5s var(--ease) forwards}
.js .hero__mk{animation-delay:.25s}
.js .hero__wm{animation-delay:.65s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .hero__mk,.js .hero__wm{opacity:1;animation:none}
}

.scroll-cue{position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:3;
  width:1px;height:46px;background:linear-gradient(to bottom,transparent,rgba(200,173,122,.85));
  overflow:hidden}
.scroll-cue::after{content:"";position:absolute;inset:0;background:var(--champagne);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:700px){.scroll-cue{display:none}}

/* ---------- ธาตุทั้งสี่ ---------- */
.el-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:1000px){.el-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.el-grid{grid-template-columns:1fr}}
.el{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;overflow:hidden;border-radius:2px;color:var(--ivory);
  min-height:clamp(320px,34vw,420px);padding:1.9rem 1.6rem;transition:.5s var(--ease)}
.el__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  transition:transform 1s var(--ease)}
.el:hover .el__img{transform:scale(1.06)}
.el::before{content:"";position:absolute;inset:0;z-index:-2;mix-blend-mode:multiply;
  background:linear-gradient(155deg,var(--c) 0%,rgba(48,39,31,.9) 100%);opacity:.22;
  transition:opacity .8s var(--ease)}
.el:hover::before{opacity:.12}
.el::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(26,20,16,.88) 0%,rgba(26,20,16,.22) 60%,rgba(26,20,16,0) 100%)}
.el:hover{transform:translateY(-4px)}
.el__ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);margin-bottom:auto}
.el__ic svg{display:block;width:22px;height:22px;stroke:var(--ivory);fill:none;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round}
.el__th{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-top:1.4rem;line-height:1.1}
.el__en{display:block;font-size:.95rem;color:var(--champagne);margin-top:.2rem;
  letter-spacing:.02em}
.el p{font-size:.9rem;color:rgba(246,242,236,.78);line-height:1.7;margin:.9rem 0 1rem}
.el__list{display:block;font-size:.82rem;color:rgba(246,242,236,.6);line-height:1.6}
.el__go{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--champagne)}
.el__go i{font-style:normal;transition:.35s var(--ease)}
.el:hover .el__go i{transform:translateX(5px)}
.el--earth{--c:#8A6A4B}.el--water{--c:#5A7684}
.el--wind{--c:#8B9A8E}.el--fire{--c:#B0603C}

/* ---------- ตัวกรอง ---------- */
/* ---------- แถบกรองตามธาตุ ---------- */
.filt-wrap{margin:2.6rem 0 2.2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.filt{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;padding:.35rem;
  background:var(--white);border:1px solid var(--line-2);border-radius:100px;
  box-shadow:0 10px 26px -22px rgba(48,39,31,.6)}
.filt button{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;
  border:0;border-radius:100px;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink-soft);
  letter-spacing:var(--track-micro);white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease)}
.filt button:hover{background:var(--beige);color:var(--brown)}
.filt button.on{background:var(--brown);color:var(--ivory)}
.filt button:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.filt__d{width:7px;height:7px;border-radius:50%;flex:none;background:var(--c,var(--champagne));
  box-shadow:0 0 0 3px rgba(200,173,122,.18)}
.filt__d--earth{--c:var(--earth)}.filt__d--water{--c:var(--water)}
.filt__d--wind{--c:var(--wind)}.filt__d--fire{--c:var(--fire)}
.filt button.on .filt__d{box-shadow:0 0 0 3px rgba(246,242,236,.2)}
.filt__n{font-size:.82rem;color:var(--ink-mute);margin:0;letter-spacing:var(--track-micro)}
.filt__n b{color:var(--brown)}
@media(max-width:620px){
  .filt{border-radius:18px;gap:.3rem}
  .filt button{padding:.55rem .9rem;font-size:.78rem}
}

/* ---------- การ์ดทรีตเมนต์ ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin-top:2.4rem}
.card{background:var(--white);border:1px solid var(--line-2);border-radius:2px;overflow:hidden;
  display:flex;flex-direction:column;transition:.45s var(--ease)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:transparent}
.card.hide{display:none}

.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.1rem;align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.team__i{margin:0;border-radius:3px;overflow:hidden;background:rgba(246,242,236,.08)}
.team__i img{width:100%;height:auto;display:block}

.bimg{margin:1.8rem 0;border-radius:3px;overflow:hidden}
.bimg img{width:100%;height:auto;display:block;border-radius:3px}
.bimg figcaption{margin-top:.7rem;font-size:.84rem;color:var(--ink-mute);text-align:center}

.split__img--ph{margin:0;border-radius:3px;overflow:hidden;background:var(--beige);
  aspect-ratio:3/2}
.split__img--ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- สไลด์การ์ดแนวนอน ---------- */
.crsl{position:relative;margin-top:2.4rem}
.cards--crsl{display:flex;gap:1.25rem;margin:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;          /* proximity เท่านั้น — mandatory ทำให้เลื่อนหน้าติด */
  overscroll-behavior-x:contain;         /* กันเด้งไปหน้าก่อนหน้า แต่ปล่อยให้เลื่อนขึ้นลงได้ปกติ */
  overscroll-behavior-y:auto;
  scroll-padding-inline:0;
  padding:.35rem .35rem 1.1rem;margin-inline:-.35rem;
  scrollbar-width:none;-ms-overflow-style:none}
.cards--crsl::-webkit-scrollbar{display:none}
.cards--crsl:focus-visible{outline:2px solid var(--champagne);outline-offset:4px;border-radius:3px}
.cards--crsl > .card{flex:0 0 clamp(248px,27%,310px);scroll-snap-align:start}
@media(max-width:860px){
  .cards--crsl{padding-inline:1.2rem;margin-inline:calc(-1 * var(--gut,1.2rem))}
  .cards--crsl > .card{flex:0 0 78%}
}
@media(max-width:480px){.cards--crsl > .card{flex:0 0 86%}}

/* ลูกศรบอกใบ้ว่าเลื่อนได้ — ไม่ใช่ปุ่ม กดไม่ได้ */
.crsl__h{position:absolute;top:clamp(90px,14vw,150px);z-index:3;pointer-events:none;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(246,242,236,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -10px rgba(48,39,31,.55);
  opacity:1;transition:opacity .45s var(--ease)}
.crsl__h--l{left:.55rem;opacity:0}
.crsl__h--r{right:.55rem}
.crsl__h svg{width:17px;height:17px;fill:none;stroke:var(--brown);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.crsl__h--r svg{animation:nudgeR 2.6s var(--ease) infinite}
.crsl__h--l svg{animation:nudgeL 2.6s var(--ease) infinite}
@keyframes nudgeR{0%,64%,100%{transform:none}80%{transform:translateX(4px)}}
@keyframes nudgeL{0%,64%,100%{transform:none}80%{transform:translateX(-4px)}}
@media(prefers-reduced-motion:reduce){.crsl__h svg{animation:none}}
.crsl:not(.at-start) .crsl__h--l{opacity:1}
.crsl.at-end .crsl__h--r{opacity:0}


/* ---------- การ์ดเมนูทรีตเมนต์ ---------- */
#menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));
  gap:1.1rem;margin-top:2rem}
.mcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line-2);border-radius:3px;
  padding:1.7rem 1.6rem 1.5rem;color:inherit;text-decoration:none;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.mcard--earth{--c:var(--earth)}.mcard--water{--c:var(--water)}
.mcard--wind{--c:var(--wind)}.mcard--fire{--c:var(--fire)}
.mcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c);
  transform:scaleX(.26);transform-origin:left;opacity:.9;
  transition:transform .6s var(--ease),opacity .6s var(--ease)}
.mcard:hover{transform:translateY(-4px);box-shadow:0 26px 48px -32px rgba(48,39,31,.55);
  border-color:rgba(200,173,122,.5)}
.mcard:hover::before{transform:scaleX(1);opacity:1}
.mcard:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.mcard.hide{display:none}

/* ลายน้ำไอคอนธาตุ */
.mcard__wm{position:absolute;right:-18px;bottom:-14px;z-index:-1;width:146px;height:146px;
  opacity:.055;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mcard__wm svg{width:100%;height:100%;fill:none;stroke:var(--c);stroke-width:.7;
  stroke-linecap:round;stroke-linejoin:round}
.mcard:hover .mcard__wm{opacity:.11;transform:translate(-4px,-4px)}

.mcard__el{display:flex;align-items:center;gap:.6rem;margin-bottom:1.15rem}
.mcard__el i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid var(--c);background:var(--ivory)}
.mcard__el i svg{width:17px;height:17px;fill:none;stroke:var(--c);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}
.mcard__el em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--taupe);
  letter-spacing:var(--track-label);text-transform:uppercase}

.mcard h3{font-family:var(--serif);font-size:1.18rem;font-weight:500;line-height:1.4;
  margin:0 0 .5rem;color:var(--brown)}
.mcard p{font-size:.88rem;color:var(--ink-soft);line-height:1.72;margin:0 0 1.4rem;
  text-wrap:pretty}
.mcard__ft{margin-top:auto;padding-top:1.05rem;border-top:1px solid var(--line-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.mcard__pr{font-size:.92rem;color:var(--brown);font-weight:500;font-family:var(--sans)}
.mcard__pr b{font-weight:700;color:var(--gold-dk)}
.mcard__go{font-size:1rem;color:var(--champagne);transform:translateX(-4px);opacity:0;
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.mcard:hover .mcard__go{transform:none;opacity:1}
.mcard__cat{position:absolute;top:1.15rem;right:1.3rem;font-size:.72rem;font-weight:600;
  color:var(--taupe);letter-spacing:var(--track-label);text-transform:uppercase;opacity:.75}
@media(max-width:520px){.mcard__cat{display:none}}

.card__img{aspect-ratio:4/3}
.card__bd{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.card__el{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);margin-bottom:.9rem}
.card__el svg{width:19px;height:19px;fill:none;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:.35rem;line-height:1.35}
.card__min{display:block;font-size:.78rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:.7rem;font-family:var(--font-num);
  font-variant-numeric:lining-nums tabular-nums}
.card p{font-size:.9rem;color:var(--ink-soft);margin:0 0 1.1rem;line-height:1.7}
.card__pr{margin-top:auto;font-size:1rem;color:var(--brown);font-weight:600;
  font-family:var(--font-num);font-variant-numeric:lining-nums tabular-nums}
.card__pr span{font-weight:400;color:var(--ink-mute);font-size:.82rem;font-family:var(--sans)}
.card .tlink{margin-top:1rem;align-self:flex-start;font-size:.7rem}
.card .btn{margin-top:1rem;width:100%}
.card--earth .card__el{border-color:var(--earth)}.card--earth .card__el svg{stroke:var(--earth)}
.card--water .card__el{border-color:var(--water)}.card--water .card__el svg{stroke:var(--water)}
.card--wind .card__el{border-color:var(--wind)}.card--wind .card__el svg{stroke:var(--wind)}
.card--fire .card__el{border-color:var(--fire)}.card--fire .card__el svg{stroke:var(--fire)}

.note{background:var(--beige);border-left:2px solid var(--champagne);padding:1.2rem 1.45rem;
  border-radius:2px;font-size:.95rem;color:var(--ink-soft);line-height:1.75;margin-top:2.2rem}
.note b{color:var(--brown)}
.mi__was{font-size:.85rem;color:var(--ink-mute);text-decoration:line-through}

/* ---------- ตารางราคา ---------- */
.pricebox{background:var(--white);border:1px solid var(--line-2);border-radius:2px;
  overflow:hidden;margin-top:2.4rem}
.pricebox__hd{background:var(--brown);color:var(--ivory);padding:1.15rem 1.7rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pricebox__hd h3{color:var(--ivory);font-family:var(--serif);font-weight:400;font-size:1.5rem;
  letter-spacing:.04em}
.pricebox__hd span{font-size:.72rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:rgba(246,242,236,.62)}
.rows{padding:.4rem 1.7rem 1.4rem}
.row{position:relative;display:grid;grid-template-columns:1fr auto;gap:.6rem 1.5rem;align-items:baseline;
  transition:background .3s var(--ease);
  padding:.95rem 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--ivory)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--c,transparent);opacity:0;transition:opacity .3s var(--ease)}
.row[data-el="earth"]{--c:var(--earth)}.row[data-el="water"]{--c:var(--water)}
.row[data-el="wind"]{--c:var(--wind)}.row[data-el="fire"]{--c:var(--fire)}
.row:hover::before{opacity:.85}
.row__n{min-width:0}
.row__n b{display:block;font-weight:600;color:var(--brown);font-size:1rem;line-height:1.35}
.row__n span{display:block;font-size:.88rem;color:var(--ink-mute);line-height:1.55}
.row__p{display:flex;gap:1.2rem;white-space:nowrap;font-size:.95rem;color:var(--ink-soft)}
.row__p b{color:var(--brown);font-weight:600}
.row__p i{font-style:normal;color:var(--ink-mute);font-size:.8rem;margin-right:.22rem}
@media(max-width:560px){.row{grid-template-columns:1fr}.row__p{gap:1rem;flex-wrap:wrap}}

/* ---------- ห้าสัมผัส ---------- */
.senses{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);margin-top:2.6rem;border-radius:2px;overflow:hidden}
@media(max-width:900px){.senses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.senses{grid-template-columns:1fr}}
.sense{background:var(--white);padding:2rem 1.35rem;text-align:center}
.sense b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--gold-dk)}
.sense span{display:block;font-size:.78rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-mute);margin:.35rem 0 .7rem}
.sense p{font-size:.88rem;color:var(--ink-soft);line-height:1.65;margin:0}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}.split--rev .split__tx{order:0}}
.split--rev .split__tx{order:2}
.split__img{aspect-ratio:4/5;border-radius:2px;overflow:hidden;margin:0}
.split__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- จุดเด่นเทอราปิส ---------- */
.ther__pts{display:grid;gap:1.6rem;margin-top:2rem}
.pt{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.pt__n{font-size:1.3rem;font-weight:600;color:var(--champagne);line-height:1.3;min-width:2.2em}
.pt h4{font-size:1.05rem;margin-bottom:.25rem}
.pt p{font-size:.92rem;color:var(--ink-soft);margin:0;line-height:1.75}
.sec--deep .pt p{color:rgba(246,242,236,.72)}
.sec--deep .pt h4{color:var(--ivory)}

/* ---------- สมาชิก ---------- */
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
@media(max-width:860px){.mem{grid-template-columns:1fr}}
.mem__c{position:relative;isolation:isolate;border-radius:3px;padding:2.3rem 1.9rem 2.1rem;
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mem__c::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--g)}
.mem__c::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(246,242,236,.5),rgba(246,242,236,.84)),var(--bg) center/cover no-repeat}
.mem__c > *{position:relative}
.mem__c:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mem__c--gold{--g:linear-gradient(90deg,#B08A3E,#EBD7A8,#A87F35);--bg:url(assets/img/mem-gold.webp)}
.mem__c--silver{--g:linear-gradient(90deg,#9B958D,#DED8CF,#9B958D);--bg:url(assets/img/mem-silver.webp)}
.mem__c--bronze{--g:linear-gradient(90deg,#8A5238,#C98B66,#7A472F);--bg:url(assets/img/mem-bronze.webp)}
.mem__t{font-size:.8rem;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--brown);opacity:.85}
.mem__c h3{font-family:var(--serif);font-size:2.3rem;font-weight:500;line-height:1;
  margin:.45rem 0 1.5rem;color:var(--brown)}
.mem__cred{padding:1.25rem 0;border-block:1px solid rgba(48,39,31,.26);margin-bottom:1.25rem}
.mem__lb{display:block;font-size:.78rem;font-weight:700;color:var(--brown);opacity:.9;
  letter-spacing:var(--track-label);text-transform:uppercase;margin-bottom:.4rem}
.mem__cred b{display:block;font-size:2.9rem;font-weight:700;color:var(--brown);line-height:1;
  letter-spacing:-.01em}
.mem__cred b small{font-size:.38em;font-weight:600}
.mem__pay{font-size:1.08rem;font-weight:600;color:var(--brown);margin:0}
.mem__pay b{font-weight:800;color:var(--brown)}
.mem__bonus{margin:1.15rem 0 0;padding:.7rem 1rem;border-radius:2px;
  background:var(--brown);color:var(--ivory);font-size:.92rem;font-weight:700;text-align:center;
  letter-spacing:var(--track-micro)}

/* สิทธิที่ได้เหมือนกันทุกระดับ */
.mem__terms{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:.7rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mem__terms li{position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--ink-soft);
  line-height:1.65}
.mem__terms li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold-dk);font-weight:700}

/* ---------- โปรโมชัน ---------- */
.promo{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem;margin-top:2.6rem}
.promo--2{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
@media(max-width:760px){.promo--2{grid-template-columns:1fr}}
.pc{background:var(--white);border:1px solid var(--line-2);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.pc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(200,173,122,.5)}
.pc__img{margin:0;overflow:hidden;background:var(--beige)}
.pc__img img{width:100%;height:auto;display:block;
  transition:transform 1s var(--ease)}
.pc:hover .pc__img img{transform:scale(1.035)}
.pc__bd{padding:1.6rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.pc__lb{font-size:.78rem;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:.55rem}
.pc h3{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin:0 0 .6rem;line-height:1.35;
  color:var(--brown)}
.pc p{font-size:.92rem;color:var(--ink-soft);margin:0 0 1.1rem;line-height:1.7}
.pc__end{margin:auto 0 0;padding-top:.9rem;border-top:1px solid var(--line-2);
  font-size:.86rem;color:var(--ink-mute)}

/* ---------- รีวิว ---------- */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}
.rv{border:1px solid rgba(255,255,255,.14);padding:2rem 1.7rem;background:rgba(255,255,255,.04);
  border-radius:2px}
.rv__st{color:var(--champagne);letter-spacing:.22em;font-size:.88rem;margin-bottom:1rem}
.rv p{font-family:var(--serif);font-size:1.15rem;font-style:italic;line-height:1.65;
  color:rgba(246,242,236,.94);margin-bottom:1.1rem}
.rv cite{font-style:normal;font-size:.78rem;letter-spacing:var(--track-micro);
  color:rgba(246,242,236,.56)}

/* ---------- ที่ตั้ง ---------- */
.loc{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){.loc{grid-template-columns:1fr}}
.loc__map{aspect-ratio:4/3;border:1px solid var(--line);background:var(--beige);border-radius:2px;
  overflow:hidden}
.loc__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3) sepia(.12) contrast(1.04)}
.dl{display:grid;gap:1.1rem;margin:1.9rem 0}
.dl div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--line-2)}
.dl dt{font-size:.7rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-mute);padding-top:.3rem}
.dl dd{margin:0;font-size:.98rem;color:var(--ink)}
.dl dd b{font-weight:600}
@media(max-width:520px){.dl div{grid-template-columns:1fr;gap:.2rem}}

/* ---------- FAQ ---------- */
.faq{max-width:min(100%,900px);margin:2.6rem auto 0;border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  padding:1.4rem 0;text-align:left;font-size:1.02rem;font-weight:500;color:var(--brown);transition:.3s}
.fq__q:hover{color:var(--gold-dk)}
.fq__q i{font-style:normal;flex:none;width:20px;height:20px;position:relative}
.fq__q i::before,.fq__q i::after{content:"";position:absolute;background:var(--gold);transition:.35s var(--ease)}
.fq__q i::before{top:9.5px;left:2px;width:16px;height:1.5px}
.fq__q i::after{left:9.25px;top:2px;width:1.5px;height:16px}
.fq.on .fq__q i::after{transform:rotate(90deg);opacity:0}
.fq__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.fq__a p{font-size:1rem;color:var(--ink-soft);padding-bottom:1.4rem;margin:0;max-width:min(100%,680px)}

/* ---------- บทความ / ร่วมงาน ---------- */
.arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;margin-top:2.8rem}
.art{background:var(--white);border:1px solid var(--line-2);border-radius:2px;overflow:hidden;
  display:flex;flex-direction:column;transition:.45s var(--ease)}
.art:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.art__img{aspect-ratio:16/9}
.art__bd{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.art__cat{font-size:.78rem;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:.6rem}
.art h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;line-height:1.4;margin-bottom:.55rem}
.art p{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.1rem;line-height:1.7}
.art .tlink{margin-top:auto;align-self:flex-start;font-size:.7rem}
.join{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:var(--brown);color:var(--ivory);padding:clamp(2rem,4vw,3.2rem);border-radius:2px;margin-top:3rem}
@media(max-width:760px){.join{grid-template-columns:1fr}}
.join h3{color:var(--ivory);font-family:var(--serif);font-weight:400;font-size:1.8rem;margin-bottom:.75rem}
.join p{color:rgba(246,242,236,.76);font-size:.98rem;margin-bottom:0}
.join__act{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- CTA ปิด ---------- */
.cta{position:relative;text-align:center;color:var(--ivory);overflow:hidden;padding:clamp(4rem,9vw,7.5rem) 0}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 50% 28%, rgba(200,173,122,.2), transparent 62%),
    linear-gradient(160deg,#4A3C30 0%,#332921 58%,#221B15 100%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:1rem}
.cta .lead{margin-inline:auto;margin-bottom:2.2rem;color:rgba(246,242,236,.8)}
.cta__btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.cta .btn--gold{background:var(--champagne);color:var(--brown)}
.cta .btn--gold:hover{background:#D9C094}

/* ---------- Footer ---------- */
.ft{background:var(--beige);color:var(--ink-soft);padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.94rem}
.ft__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;
  border-bottom:1px solid var(--line-2)}
@media(max-width:900px){.ft__top{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:560px){.ft__top{grid-template-columns:1fr}}
.ft h4{font-size:.78rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:1.15rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ft a:hover{color:var(--brown)}
.ft .brand{color:var(--brown)}
.ft__brand .brand{margin-bottom:1.15rem}
.ft__brand p{max-width:min(100%,380px);line-height:1.8;font-size:.92rem}
.ft__soc{display:flex;gap:.7rem;margin-top:1.4rem}
.ft__soc a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink-soft);transition:.3s var(--ease)}
.ft__soc a:hover{background:var(--brown);border-color:var(--brown);color:var(--ivory)}
.ft__soc svg{width:16px;height:16px;fill:currentColor}
.ft__bot{padding-top:1.7rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.83rem;color:var(--ink-mute)}

/* ---------- แถบล่างติดจอ: จอง · LINE · แผนที่ ---------- */
.cbar{position:fixed;z-index:70;display:grid;grid-template-columns:repeat(3,1fr);
  left:.9rem;right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom));
  background:rgba(48,39,31,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(200,173,122,.34);border-radius:100px;overflow:hidden;
  box-shadow:0 16px 34px -18px rgba(26,20,16,.75)}
.cbar a{display:flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:52px;padding:.5rem .4rem;color:rgba(246,242,236,.92);
  font-size:.72rem;font-weight:600;letter-spacing:var(--track-btn);text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease)}
.cbar a + a{box-shadow:inset 1px 0 0 rgba(200,173,122,.28)}
.cbar a:hover{background:rgba(255,255,255,.07);color:#fff}
.cbar svg{width:17px;height:17px;flex:none}
.cbar .i-line{fill:currentColor}
.cbar .i-tel,.cbar .i-map{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cbar__num{display:none}
@media(max-width:400px){ .cbar a{font-size:.7rem;gap:.3rem} .cbar svg{width:15px;height:15px} }
@media(min-width:760px){
  .cbar{grid-template-columns:repeat(3,auto);justify-content:center;
    left:auto;right:1.5rem;bottom:1.5rem;box-shadow:var(--shadow-lg)}
  .cbar a{padding:.9rem 1.5rem;min-height:0;font-size:.7rem;gap:.55rem}
}

/* ---------- หน้าใน ---------- */
.phero{position:relative;background:var(--brown);color:var(--ivory);overflow:hidden;
  padding:calc(7rem + 2vw) 0 clamp(2.75rem,5vw,4rem)}
.phero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 80% at 22% 12%, rgba(200,173,122,.2), transparent 60%),
    radial-gradient(60% 70% at 88% 92%, rgba(138,106,75,.3), transparent 58%),
    linear-gradient(155deg,#4A3C30 0%,#332921 55%,#241D17 100%)}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff;font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.2;max-width:min(100%,900px);
  text-wrap:pretty;font-variant-numeric:lining-nums}
.phero__lead{color:rgba(246,242,236,.8);font-size:1.0625rem;line-height:1.7;
  max-width:min(100%,660px);margin:1.15rem 0 0}
.phero__el{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  padding:.4rem .95rem .4rem .55rem;border:1px solid rgba(255,255,255,.24);border-radius:100px;
  font-size:.7rem;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--champagne)}
.phero__el svg{width:19px;height:19px;stroke:var(--champagne);fill:none;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1.15rem;
  font-size:.78rem;color:rgba(246,242,236,.55)}
.crumb a{color:rgba(246,242,236,.75);border-bottom:1px solid transparent;transition:.25s}
.crumb a:hover{color:#fff;border-bottom-color:rgba(200,173,122,.6)}
.crumb i{font-style:normal;opacity:.4}

.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  margin-top:2.4rem;border-radius:2px;overflow:hidden}
.spec div{background:rgba(36,29,23,.5);padding:1.15rem 1.25rem}
.spec dt{font-size:.78rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--champagne);margin-bottom:.32rem}
.spec dd{margin:0;font-size:1.2rem;font-weight:600;color:#fff;line-height:1.3;
  font-family:var(--font-num);font-variant-numeric:lining-nums tabular-nums}
.spec dd small{font-size:.7rem;font-weight:500;color:rgba(246,242,236,.62);margin-left:.32rem;
  font-family:var(--sans)}
.spec dd.tx{font-family:var(--sans);font-size:1.02rem;font-weight:500}

/* ---------- เนื้อหายาว ---------- */
.prose{max-width:min(100%,760px);font-size:1.05rem;line-height:1.85;color:var(--ink-soft)}
.prose>*+*{margin-top:1.2rem}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.6vw,2.05rem);
  line-height:1.25;color:var(--brown);margin-top:2.9rem}
.prose h3{font-size:1.15rem;color:var(--brown);margin-top:2rem}
.prose p{margin:0}
.prose strong,.prose b{color:var(--brown);font-weight:600}
.prose ul,.prose ol{margin:1.2rem 0 0;padding-left:0;list-style:none;display:grid;gap:.68rem}
.prose li{padding-left:1.55rem;position:relative}
.prose ul li::before{content:"";position:absolute;left:.2rem;top:.74em;width:6px;height:6px;
  border-radius:50%;background:var(--champagne)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--font-num);font-variant-numeric:lining-nums;
  font-size:.88rem;font-weight:700;color:var(--gold-dk)}
.prose blockquote{margin:1.7rem 0 0;padding:1.15rem 0 1.15rem 1.5rem;border-left:2px solid var(--champagne);
  font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--brown);line-height:1.55}
.prose a{color:var(--gold-dk);border-bottom:1px solid rgba(169,135,63,.4)}
.prose a:hover{border-bottom-color:var(--gold)}

/* ---------- ขั้นตอน ---------- */
.steps{display:grid;gap:1.6rem;margin-top:2.2rem;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);
  font-family:var(--font-num);font-variant-numeric:lining-nums tabular-nums;
  font-size:1.1rem;font-weight:600;color:var(--champagne);line-height:1.6;min-width:2.1em}
.step h3{font-size:1.05rem;margin-bottom:.28rem;color:var(--brown)}
.step p{margin:0;font-size:.96rem;color:var(--ink-soft);line-height:1.8}
.step__t{font-size:.78rem;color:var(--ink-mute);letter-spacing:var(--track-micro);
  font-family:var(--font-num);font-variant-numeric:lining-nums}

/* ---------- กล่องจอง ---------- */
.book{background:var(--brown);color:var(--ivory);border-radius:2px;
  padding:clamp(1.7rem,3vw,2.3rem);display:grid;gap:1.15rem;margin-top:2.8rem}
.book h3{color:var(--ivory);font-family:var(--serif);font-weight:400;font-size:1.55rem}
.book p{color:rgba(246,242,236,.78);margin:0;font-size:.98rem}
.book__act{display:flex;flex-wrap:wrap;gap:.7rem}
.book .btn--gold{background:var(--champagne);color:var(--brown)}
.book .btn--gold:hover{background:#D9C094}
.book__pr{display:flex;flex-wrap:wrap;gap:.4rem 1.7rem;padding-top:1.05rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:.94rem;color:rgba(246,242,236,.76)}
.book__pr b{color:#fff;font-weight:600;font-family:var(--font-num);
  font-variant-numeric:lining-nums tabular-nums}

/* ---------- แกลเลอรี ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal>*{border-radius:2px;aspect-ratio:4/3}
.gal>.tall{aspect-ratio:4/5;grid-row:span 2}
@media(max-width:520px){.gal>.tall{aspect-ratio:4/3;grid-row:auto}}

/* ---------- ฟอร์ม ---------- */
.form{display:grid;gap:1rem;margin-top:1.8rem}
.form label{display:grid;gap:.4rem;font-size:.84rem;font-weight:600;color:var(--brown)}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;color:var(--ink);
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:2px;background:var(--white);
  transition:.25s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(169,135,63,.14)}
.form textarea{min-height:120px;resize:vertical;line-height:1.7}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form__row{grid-template-columns:1fr}}
.form__note{font-size:.85rem;color:var(--ink-mute);line-height:1.65;margin:0}

/* ---------- เวลาทำการ ---------- */
.hours{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--line-2)}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding:.78rem 0;
  border-bottom:1px solid var(--line-2);font-size:.98rem}
.hours dt{color:var(--ink-soft);margin:0}
.hours dd{margin:0;font-weight:600;color:var(--brown);
  font-family:var(--font-num);font-variant-numeric:lining-nums tabular-nums}

/* ---------- เตือน ---------- */
.warn{background:rgba(176,96,60,.07);border-left:2px solid var(--fire);
  padding:1.2rem 1.45rem;border-radius:2px;font-size:.95rem;color:var(--ink-soft);
  line-height:1.75;margin-top:1.9rem}
.warn b{color:var(--brown)}

/* ---------- meta บทความ ---------- */
.pmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.3rem;
  font-size:.83rem;color:rgba(246,242,236,.6)}
.pmeta b{color:var(--champagne);font-weight:600}
.toc{background:var(--beige);border-left:2px solid var(--champagne);padding:1.4rem 1.6rem;
  border-radius:2px;margin-top:2.2rem;max-width:min(100%,760px)}
.toc p{font-size:.78rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--gold-dk);font-weight:700;margin:0 0 .85rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;counter-reset:t}
.toc li{counter-increment:t;padding-left:1.6rem;position:relative;font-size:.95rem}
.toc li::before{content:counter(t);position:absolute;left:0;color:var(--gold-dk);font-weight:700;
  font-family:var(--font-num);font-variant-numeric:lining-nums;font-size:.85rem}
.toc a{color:var(--brown);border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--gold)}

/* ---------- สองคอลัมน์ ---------- */
.body2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.body2{grid-template-columns:1fr}}
.side{position:sticky;top:104px;display:grid;gap:1.2rem}
@media(max-width:900px){.side{position:static}}
.side__box{background:var(--white);border:1px solid var(--line-2);padding:1.5rem;border-radius:2px}
.side__box h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:.85rem}
.side__box ul{list-style:none;margin:0;padding:0;display:grid;gap:.58rem;font-size:.93rem}
.side__box a{color:var(--ink-soft);border-bottom:1px solid transparent}
.side__box a:hover{color:var(--gold-dk);border-bottom-color:var(--gold)}
.side__box .btn{width:100%;margin-top:.95rem}

/* ---------- reveal ---------- */
.js .rv-up{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv-up.in{opacity:1;transform:none}
.js .rv-up.d1{transition-delay:.09s}.js .rv-up.d2{transition-delay:.18s}
.js .rv-up.d3{transition-delay:.27s}.js .rv-up.d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rv-up{opacity:1;transform:none}
}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- หัวข้อภาษาไทยต้องการ line-height มากกว่าอังกฤษ ---------- */
:root:lang(th) .d1{line-height:1.26;letter-spacing:0}
:root:lang(th) .d2{line-height:1.3}
:root:lang(th) .phero h1{line-height:1.32}
:root:lang(th) .el__th{letter-spacing:.02em}
.hero h1 span{display:block}

/* หน้าแรกมีโลโก้ใหญ่กลาง hero อยู่แล้ว — ซ่อนโลโก้บน header จนกว่าจะเลื่อนพ้น hero */
body:has(.hero) .hd:not(.on) .brand{opacity:0;pointer-events:none}
.brand{transition:opacity .4s var(--ease),color .4s var(--ease)}

/* breadcrumb: ซ่อนจากสายตา แต่ยังอยู่ใน DOM และมี BreadcrumbList schema ให้ Google (Jet 12 ต.ค. 2569) */
.crumb{display:none}

/* เกี่ยวกับเรา: เดิมสูงเกินเพราะภาพเป็นสัดส่วน 4:5 แนวตั้ง — ล็อกความสูงและลดระยะขอบ */
#about{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
#about .split{align-items:center;gap:clamp(1.8rem,4vw,3.5rem)}
#about .split__img{aspect-ratio:auto;height:clamp(300px,40vw,500px)}
#about .lead{line-height:1.7}

/* ปุ่มจองมุมขวาบนของ header (จอใหญ่) — จอเล็กใช้แถบล่างแทน จะได้ไม่ซ้ำซ้อน */
.hd__book{display:none;align-items:center;padding:.62rem 1.35rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.55);color:#fff;font-size:.8rem;font-weight:600;
  letter-spacing:var(--track-btn);text-transform:uppercase;white-space:nowrap;
  transition:.3s var(--ease)}
.hd__book:hover{background:#fff;color:var(--brown);border-color:#fff}
.hd.on .hd__book{background:var(--brown);color:var(--ivory);border-color:var(--brown)}
.hd.on .hd__book:hover{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}
@media(min-width:1081px){
  .hd__book{display:inline-flex}
  .cbar{display:none}
  body{padding-bottom:0}
}

/* ---------- ทำไมต้อง Four Elements: พื้นน้ำตาลเข้ม 5 ช่องมีกรอบ จัดกึ่งกลาง ---------- */
.why{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  margin-top:clamp(2.2rem,4vw,3.2rem);background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
@media(max-width:1000px){
  .why{grid-template-columns:repeat(2,1fr)}
  .why__i:last-child{grid-column:1 / -1}          /* ข้อ 5 เต็มแถว ไม่เหลือช่องว่าง */
}
@media(max-width:420px){.why{grid-template-columns:1fr}}
.why__i{background:rgba(26,20,16,.42);padding:2.4rem 1.5rem 2.5rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:background .45s var(--ease)}
.why__i:hover{background:rgba(26,20,16,.12)}
.why__ic{display:grid;place-items:center;width:clamp(78px,7vw,94px);height:clamp(78px,7vw,94px);
  border-radius:50%;border:1px solid rgba(200,173,122,.45);margin-bottom:1.3rem;
  transition:.45s var(--ease)}
.why__ic svg{width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);
  stroke:var(--champagne);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s var(--ease)}
.why__i:hover .why__ic{background:var(--champagne);border-color:var(--champagne);transform:translateY(-3px)}
.why__i:hover .why__ic svg{stroke:var(--brown)}
.why__i h3{font-family:var(--serif);font-size:clamp(1.08rem,1.4vw,1.2rem);font-weight:500;
  color:#fff;line-height:1.4;margin:0}
.why__i h3::after{content:"";display:block;width:34px;height:1px;background:var(--champagne);
  margin:.8rem auto 0;opacity:.7}
.why__i p{font-size:.9rem;color:rgba(246,242,236,.72);line-height:1.75;margin:.8rem 0 0;
  max-width:230px}

/* ระยะขอบ section ให้กระชับขึ้นทั้งเว็บ */
.sec{padding:clamp(2.75rem,5.5vw,5rem) 0}
.cta{padding:clamp(3rem,6vw,5.25rem) 0}
.phero{padding:calc(6rem + 1.5vw) 0 clamp(2.25rem,4vw,3.25rem)}
#about{padding-top:clamp(2.75rem,5.5vw,4.5rem);padding-bottom:clamp(2.75rem,5.5vw,4.5rem)}
#about .split__img{height:clamp(280px,34vw,430px)}
.ft{padding:clamp(2.75rem,5vw,3.75rem) 0 1.75rem}
.ft__top{padding-bottom:2rem;gap:2rem}

/* ---------- แกลเลอรีบานพับขยาย (hover/คลิกเพื่อเปิด) ---------- */
.exg{width:min(1360px,100% - 2.4rem);margin:clamp(2.2rem,4vw,3rem) auto 0;
  display:flex;flex-direction:column;gap:10px}
.exg__row{display:flex;gap:10px;height:clamp(260px,25vw,360px)}
.exg__i{position:relative;flex:1 1 0;margin:0;border-radius:2px;overflow:hidden;cursor:pointer;
  box-shadow:0 26px 50px -32px rgba(48,39,31,.5);
  transition:flex 1s cubic-bezier(.22,.8,.22,1)}
.exg__i.is-open{flex:4 1 0;cursor:default}
.exg__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.62) saturate(.85);transition:filter .8s var(--ease)}
.exg__i.is-open img{filter:none}
.exg__i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,20,16,.72),rgba(26,20,16,0) 48%);
  opacity:.9;transition:opacity .6s var(--ease)}
.exg__i figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.3rem;
  color:#fff;font-size:.9rem;font-weight:500;letter-spacing:var(--track-micro);
  white-space:nowrap;opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.exg__i.is-open figcaption{opacity:1;transform:none}
.exg__i:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

/* มือถือ: ตารางสองคอลัมน์ ไม่ใช้สครอลแนวนอน (กันหน้าเลื่อนติด) */
@media(max-width:860px){
  .exg{width:100%;padding-inline:1.2rem;gap:.6rem}
  .exg__row{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .exg__i{flex:none;aspect-ratio:3/4}
  .exg__i img{filter:none}
  .exg__i::after{background:linear-gradient(to top,rgba(26,20,16,.6),rgba(26,20,16,0) 42%)}
  .exg__i figcaption{opacity:1;transform:none;padding:.7rem .8rem;font-size:.78rem;
    white-space:normal}
}
}