/* ============================================================
   นิชา ผ้าม่าน — ระบบดีไซน์
   โทนกรมท่า ทางการ น่าเชื่อถือ เรียบ สะอาดตา
   ไม่ใช้สีดำและสีแดงตามที่ลูกค้าระบุ
   ============================================================ */

:root{
  --navy-900:#0D1F38;
  --navy-800:#12294A;
  --navy:#17325A;
  --navy-600:#23477C;
  --navy-400:#5379A6;
  --navy-100:#E1EAF5;
  --navy-50:#F2F6FB;
  --gold:#A8801F;
  --gold-bright:#C9A227;
  --gold-soft:#F6EDD6;
  --ink:#16233A;
  --muted:#5D6E88;
  --line:#DCE3ED;
  --paper:#FFFFFF;
  --sand:#F8F6F1;

  --wrap:1180px;
  --gut:20px;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --sh-1:0 1px 2px rgba(19,41,74,.06), 0 2px 8px rgba(19,41,74,.05);
  --sh-2:0 6px 14px rgba(19,41,74,.09), 0 2px 4px rgba(19,41,74,.05);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Anuphan","Noto Sans Thai",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  padding-bottom:0;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--navy-600);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.4;font-weight:700;color:var(--navy-900);letter-spacing:-.01em}
h1{font-size:clamp(30px,5.4vw,50px);line-height:1.4}
h2{font-size:clamp(24px,3.6vw,38px)}
h3{font-size:clamp(19px,2.2vw,23px)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
small{font-size:14px;line-height:1.6}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
:focus-visible{outline:3px solid var(--navy-600);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.ic{flex:none;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:12px 22px;border-radius:999px;border:1.5px solid transparent;
  font:inherit;font-weight:600;font-size:16px;line-height:1.5;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-800);color:#fff}
.btn-gold{background:var(--gold-bright);color:#2B2208}
.btn-gold:hover{background:#B8931F;color:#2B2208}
.btn-outline{border-color:var(--navy-100);background:var(--paper);color:var(--navy)}
.btn-outline:hover{border-color:var(--navy-400);color:var(--navy-800)}
.btn-ghost{background:transparent;color:var(--navy);border-color:transparent;padding-inline:14px}
.btn-ghost:hover{background:var(--navy-50)}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{background:#05b34c;color:#fff}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34)}
.btn-light:hover{background:rgba(255,255,255,.24);color:#fff}
.btn-block{width:100%}

/* ---------- ส่วนหัว ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;color:var(--navy-900);flex:none}
.brand-mark{width:44px;height:44px;border-radius:50%}
.brand-text{display:flex;flex-direction:column;line-height:1.4}
.brand-text strong{font-size:19px;font-weight:700}
.brand-text small{font-size:14px;letter-spacing:.07em;color:var(--navy-400);font-weight:600;line-height:1.4}
.nav{display:flex;gap:4px;margin-inline:auto}
.nav a{padding:9px 14px;border-radius:999px;font-size:16px;font-weight:500;color:var(--ink);white-space:nowrap}
.nav a:hover{background:var(--navy-50);color:var(--navy)}
.nav a[aria-current="page"]{background:var(--navy-50);color:var(--navy);font-weight:600}
.head-cta{display:flex;gap:8px;flex:none}
.head-cta .btn{min-height:44px;font-size:15px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- แบนเนอร์หน้าแรก ---------- */
/* รูปกินเต็มความกว้างจอ ไม่มีบล็อกพื้นหลังคนละฝั่งแล้ว ข้อความวางทับบนรูป
   ไล่เฉดมืดจากขอบล่างขึ้นบนเท่าที่จำเป็นให้ตัวหนังสืออ่านออก ส่วนบนของรูปยังเห็นชัด */
.hero{position:relative;display:flex;align-items:flex-end;background:var(--navy-900);color:#fff;overflow:hidden;min-height:min(70vh,540px)}
.hero-media{position:absolute;top:-16%;left:0;right:0;height:132%;z-index:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);will-change:opacity}
.slide.is-on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%)}
.hero-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(9,21,39,.94) 0%,rgba(9,21,39,.82) 26%,rgba(9,21,39,.5) 54%,rgba(9,21,39,.16) 80%,rgba(9,21,39,0) 100%)
}
.hero-panel{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:80px var(--gut) 34px}
.hero-copy{width:100%;max-width:40rem;text-shadow:0 1px 14px rgba(6,16,31,.5)}

.hero-eyebrow{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.6;text-align:left;font-weight:600;letter-spacing:.04em;color:var(--gold-bright);border:1px solid rgba(201,162,39,.6);background:rgba(9,21,39,.45);padding:6px 15px;border-radius:22px;margin-bottom:20px}
.hero h1{color:#fff;margin-bottom:18px;text-wrap:balance}
.hero-sub{font-size:clamp(16px,1.7vw,19px);color:#DCE7F5;max-width:34em;margin-bottom:26px}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-acts .btn{text-shadow:none}
/* ปุ่มโทรอยู่บนรูป เลยต้องทึบกว่าปุ่มบนพื้นสีทึบปกติ ไม่งั้นลายในรูปจะทะลุมากวน */
.hero .btn-light{background:rgba(9,21,39,.58);border-color:rgba(255,255,255,.5)}
.hero .btn-light:hover{background:rgba(9,21,39,.74)}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)}
.hero-fact{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.6;color:#DCE7F5}
.hero-fact .ic{color:var(--gold-bright)}

.hero-foot{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.slider-dots{display:flex;gap:8px;flex:none}
.slider-dots button{width:34px;height:5px;border-radius:999px;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .25s var(--ease)}
.slider-dots button[aria-current="true"]{background:var(--gold-bright)}
.hero-caption{margin:0;font-size:14px;line-height:1.6;color:#BDD0E7}

@media (min-width:1024px){
  .hero{min-height:min(80vh,720px)}
  .hero-panel{padding:clamp(88px,11vw,160px) var(--gut) clamp(48px,5vw,72px)}
  .hero-copy{max-width:42rem}
}

/* ---------- แถบโปรผ่อน ---------- */
.promo{background:var(--gold-soft);border-block:1px solid #E7D5A8}
.promo-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:18px var(--gut)}
.promo .ic{color:var(--gold);flex:none}
.promo-title{font-weight:700;color:#4A3A0C;font-size:18px;margin:0}
.promo-text{margin:0;color:#5C4A16;font-size:16px;flex:1 1 320px}

/* ---------- โครงส่วนเนื้อหา ---------- */
.sec{padding:clamp(52px,6.5vw,92px) 0}
.sec-sand{background:var(--sand)}
.sec-navy{background:var(--navy-900);color:#fff}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-head{max-width:62ch;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{display:block;font-size:14px;line-height:1.6;font-weight:700;letter-spacing:.1em;color:var(--gold);margin-bottom:10px}
.sec-navy .eyebrow{color:var(--gold-bright)}
.sec-head p{color:var(--muted);font-size:17px;margin:0}
.sec-navy .sec-head p{color:#C9D8EE}
.rule{width:56px;height:4px;background:var(--gold-bright);border-radius:2px;margin-bottom:22px}
.sec-head.center .rule{margin-inline:auto}

/* ---------- จุดเด่น ---------- */
.points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.point{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.point:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--navy-100)}
.point .ic{color:var(--navy);margin-bottom:12px}
.point h3{font-size:18px;margin-bottom:6px}
.point p{font-size:15.5px;color:var(--muted);line-height:1.68;margin:0}

/* ---------- แนะนำร้าน ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center}
.split-media{margin-inline:auto;width:100%}
.split-media img{width:100%;border-radius:var(--r-lg)}
.split-body p{color:#2C3A52}

/* ---------- การ์ดบริการ ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card-media{aspect-ratio:4/3;overflow:hidden;background:var(--navy-50)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%);transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.035)}
.card-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body h3{margin:0;font-size:20px;color:var(--navy-900)}
.card-body p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.68}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.card-tags li{font-size:14px;line-height:1.5;background:var(--navy-50);color:var(--navy-600);border-radius:999px;padding:4px 11px}
.card-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15.5px;color:var(--navy-600)}
.card:hover .card-more .ic{transform:translateX(3px)}
.card-more .ic{transition:transform .2s var(--ease)}

/* ---------- ขั้นตอนการทำงาน ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-no{display:grid;place-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap;flex:none}
.step h3{margin:2px 0 4px;font-size:19px}
.step p{margin:0;color:var(--muted);font-size:16px}

/* ---------- แกลเลอรีผลงาน แบบไม่ครอป ---------- */
.masonry{columns:2;column-gap:10px}
.masonry>*{break-inside:avoid;margin-bottom:10px}
.shot{display:block;position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--navy-50)}
.shot img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;
  font-size:14px;line-height:1.55;color:#fff;
  background:linear-gradient(to top,rgba(13,31,56,.86),transparent);
  opacity:0;transition:opacity .25s var(--ease)
}
.shot:hover figcaption,.shot:focus-visible figcaption{opacity:1}
.gallery-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}

/* ---------- การ์ดหน้าปกโครงการ ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.pcard{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease)
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:inherit}
.pcard-media{aspect-ratio:4/3;overflow:hidden;background:var(--navy-50)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.04)}
.pcard-body{padding:14px 16px 16px}
.pcard-body h3{margin:0 0 4px;font-size:18px;line-height:1.4}
.pcard-body p{margin:0;font-size:14.5px;color:var(--muted)}

@media (max-width:1023px){ .pcards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:479px){
  .pcards{gap:10px}
  .pcard-body{padding:11px 12px 13px}
  .pcard-body h3{font-size:16px}
}

/* ---------- กล่องโครงการ ---------- */
/* ใช้ details/summary ของเบราว์เซอร์เอง กดเปิด-ปิดได้โดยไม่ต้องใช้จาวาสคริปต์ */
.projects{display:grid;gap:12px}
.project{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.project[open]{box-shadow:var(--sh-2)}
.project summary{
  display:flex;align-items:center;gap:16px;padding:14px;cursor:pointer;list-style:none;
  transition:background .2s var(--ease)
}
.project summary::-webkit-details-marker{display:none}
.project summary:hover{background:var(--navy-50)}
.project summary:focus-visible{outline:3px solid var(--navy-600);outline-offset:-3px}
.project-cover{flex:none;width:96px;height:72px;border-radius:var(--r-sm);overflow:hidden;background:var(--navy-50)}
.project-cover img{width:100%;height:100%;object-fit:cover}
.project-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.project-name{font-weight:700;font-size:18px;color:var(--navy-900);line-height:1.4}
.project-name em{font-style:normal;font-weight:400;font-size:14px;color:var(--gold)}
.project-sub{font-size:14.5px;color:var(--muted)}
.project-chev{flex:none;color:var(--navy-400);transform:rotate(90deg);transition:transform .25s var(--ease)}
.project[open] .project-chev{transform:rotate(-90deg)}
.project-note{margin:0;padding:0 16px 12px;color:var(--muted);font-size:15.5px}
.project-shots{padding:0 14px 16px}
.project-empty{margin:0;padding:0 16px 16px;color:var(--muted);font-size:15px}

@media (max-width:479px){
  .project summary{gap:12px;padding:12px}
  .project-cover{width:74px;height:58px}
  .project-name{font-size:16.5px}
}
.chip{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 16px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s var(--ease)}
.chip:hover{border-color:var(--navy-400)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

/* ---------- คลิป ---------- */
.clip{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(22px,4vw,48px);align-items:center}
.clip video{width:100%;border-radius:var(--r);background:var(--navy-800)}

/* ---------- รีวิว ---------- */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.stars{display:flex;gap:2px;color:var(--gold-bright);margin-bottom:10px}
.stars .ic{fill:currentColor}
.review p{font-size:16px;color:#2C3A52;margin:0 0 14px}
.review footer{font-size:14.5px;line-height:1.6;color:var(--muted)}
.review footer strong{display:block;color:var(--navy-900);font-size:16px;font-weight:600;line-height:1.5}

/* ---------- คำถามที่พบบ่อย ---------- */
.faq{max-width:62rem;margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:14px;padding:20px 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:17.5px;color:var(--navy-900)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{margin-top:2px;color:var(--navy-400);transition:transform .25s var(--ease);flex:none}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq .answer{padding:0 0 22px 38px;color:var(--muted);font-size:16.5px}

/* ---------- สาขา ---------- */
.branches{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.branch{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.branch h3{font-size:18px;margin-bottom:10px}
.branch dl{margin:0;display:grid;gap:8px}
.branch .row{display:flex;gap:10px;font-size:15.5px;color:var(--muted)}
.branch .row .ic{color:var(--navy-400);margin-top:3px}
.branch-note{margin-top:14px;font-size:14px;line-height:1.6;color:var(--gold);background:var(--gold-soft);border-radius:var(--r-sm);padding:8px 12px}

/* ---------- ร้านในเครือ ---------- */
/* ---------- โซนหน้าร้าน ---------- */
/* รูปหน้าร้านเป็นภาพที่ตัดออกมาจากคอลลาจของลูกค้า ความกว้างจริงไม่ถึง 400px
   จึงจำกัดขนาดที่แสดงไว้ไม่ให้ขยายจนแตก และคงสัดส่วนเดิมของแต่ละไฟล์ ไม่ครอป */
.shopfront{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:center}
.shopfront-body p{color:var(--muted)}
.shopfront-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.shopfront-points li{display:flex;align-items:flex-start;gap:11px;font-size:16.5px;line-height:1.6}
.shopfront-points .ic{color:var(--gold);flex:none;margin-top:3px}
.shopfront-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.shopfront-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
.shopfront-shot{margin:0;position:relative}
.shopfront-shot img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.shopfront-shot figcaption{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}

@media (min-width:1024px){
  .shopfront{grid-template-columns:1fr minmax(0,540px)}
}

/* ---------- เงื่อนไขการผ่อน ---------- */
/* ภาพสรุปที่ทางร้านทำเอง เป็นแนวตั้ง จึงจำกัดความกว้างไว้ไม่ให้ยาวจนล้นจอ และคงสัดส่วนเดิม */
.installment{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:center}
.installment-body p{color:var(--muted)}
.installment-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pay-steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.pay-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.pay-no{
  width:32px;height:32px;border-radius:50%;background:var(--gold-soft);color:var(--gold);
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;
  border:1px solid #E7D5A8
}
.pay-step h3{margin:4px 0 4px;font-size:18px}
.pay-step p{margin:0;color:var(--muted);font-size:16px}
.pay-facts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.pay-facts li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.6}
.pay-facts .ic{color:var(--gold);flex:none;margin-top:3px}
.pay-warn{
  display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;padding:14px 16px;
  background:var(--gold-soft);border:1px solid #E7D5A8;border-radius:var(--r-sm);
  font-size:15.5px;line-height:1.6;color:var(--gold)
}
.pay-warn .ic{flex:none;margin-top:3px}
.card-price{margin:12px 0 0;font-size:15.5px;font-weight:600;color:var(--gold)}
.price-lead{font-size:19px;color:var(--ink)}
.price-lead strong{color:var(--gold)}
.installment-poster{margin:0;width:100%;max-width:420px;justify-self:center}
.installment-poster a{display:block;height:100%;border-radius:var(--r);overflow:hidden}
.installment-poster img{width:100%;height:100%;object-fit:contain;background:var(--paper)}

@media (min-width:1024px){
  .installment{grid-template-columns:1fr minmax(0,420px)}
  .installment-poster{justify-self:end}
}

/* ---------- ร้านสาขา ---------- */
.shops-head{font-size:clamp(22px,3vw,30px);margin:0 0 20px}
.shop-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.shop{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  background:var(--navy-50);border:1px solid var(--navy-100);border-radius:var(--r);
  padding:18px clamp(16px,2.4vw,24px)
}
.shop-no{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--navy-100);display:grid;place-items:center;
  font-weight:700;font-size:16px;color:var(--navy)
}
.shop-body{flex:1 1 300px;min-width:0}
.shop-body h3{margin:0 0 4px;font-size:19px}
.shop-body p{margin:0;color:var(--muted);font-size:15px}
.shop .btn{flex:none}

/* ---------- ฟอร์ม ---------- */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-1)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:15.5px;margin-bottom:7px;color:var(--navy-900)}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-600);outline:none;box-shadow:0 0 0 3px rgba(35,71,124,.14)}
.field .hint{font-size:14px;line-height:1.6;color:var(--muted);margin-top:6px}
.field .err{display:none;font-size:14.5px;color:#9A3412;margin-top:6px;font-weight:500}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#C2410C;background:#FFF8F5}
.field.has-err .err{display:block}
.form-note{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:14px}
.form-msg{display:none;border-radius:var(--r);padding:16px 18px;margin-bottom:18px;font-size:16px}
.form-msg.show{display:block}
.form-msg.ok{background:#EAF6EE;border:1px solid #BFE0CB;color:#1B5E33}
.form-msg.bad{background:#FFF4EF;border:1px solid #F3CBB6;color:#8A3312}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .full{grid-column:1/-1}

/* ---------- แถบชวนติดต่อ ---------- */
.cta-band{background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);text-align:center}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:#C9D8EE;max-width:52ch;margin-inline:auto;margin-bottom:24px}
.cta-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- หัวหน้าเพจรอง ---------- */
.page-head{background:var(--navy-900);color:#fff;padding:clamp(40px,5vw,72px) 0;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 22px),radial-gradient(110% 100% at 78% 12%,#23477C 0%,#12294A 58%,#0D1F38 100%)}
.page-head>*{position:relative}
.page-head h1{color:#fff;margin-bottom:12px}
.page-head p{color:#C9D8EE;max-width:60ch;margin:0;font-size:17px}
.crumb{display:flex;gap:8px;align-items:center;font-size:14px;line-height:1.6;color:#8FA8C7;margin-bottom:14px;flex-wrap:wrap}
.crumb a{color:#C9D8EE}
.crumb a:hover{color:#fff}

/* ---------- หน้ารายละเอียดบริการ ---------- */
.detail{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:start}
.detail-body h2{font-size:clamp(21px,2.4vw,27px);margin-top:36px}
.detail-body h2:first-child{margin-top:0}
.feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.feature-list li{display:flex;gap:9px;align-items:flex-start;font-size:16px;background:var(--navy-50);border-radius:var(--r-sm);padding:10px 13px}
.feature-list .ic{color:var(--navy-600);margin-top:3px}
.aside{position:sticky;top:96px;display:grid;gap:14px}
.aside-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.aside-card h3{font-size:18px}
.aside-card p{font-size:15.5px;color:var(--muted)}
.aside-acts{display:grid;gap:9px;margin-top:16px}
.other-list{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.other-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;font-weight:500;color:var(--ink)}
.other-list li:first-child a{border-top:0}
.other-list a:hover{color:var(--navy)}

/* ---------- ส่วนท้าย ---------- */
.site-foot{background:var(--navy-900);color:#C9D8EE;margin-top:0;padding-top:clamp(40px,5vw,64px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:clamp(24px,4vw,48px);padding-bottom:36px}
.foot-mark{width:58px;height:58px;border-radius:50%;margin-bottom:14px;background:#fff;padding:3px}
.foot-name{font-size:19px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.4}
.foot-name span{font-size:14px;letter-spacing:.07em;color:#8FA8C7;display:block;font-weight:600;line-height:1.5}
.foot-sum{font-size:15px;line-height:1.7;margin:0;max-width:44ch}
.foot-col h2{font-size:16px;color:#fff;margin-bottom:14px;letter-spacing:.02em}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot-col a{color:#C9D8EE;font-size:15.5px}
.foot-col a:hover{color:#fff}
.foot-contact li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.foot-contact .ic{color:var(--navy-400);margin-top:3px}
.foot-base{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.12);padding-block:18px;font-size:14px;line-height:1.6}
.foot-base p{margin:0}
.foot-links{display:flex;gap:10px;align-items:center}
.foot-links a{color:#C9D8EE}

/* ---------- แถบติดต่อลอยด้านข้าง (จอตั้งแต่แท็บเล็ตขึ้นไป) ---------- */
.rail{
  position:fixed;right:20px;bottom:24px;z-index:65;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px
}
.rail-btn{
  display:flex;align-items:center;justify-content:flex-start;gap:0;
  height:56px;width:56px;padding:0 16px;
  border-radius:999px;color:#fff;overflow:hidden;white-space:nowrap;
  box-shadow:0 8px 22px rgba(13,31,56,.26);
  transition:width .28s var(--ease),gap .28s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)
}
.rail-btn .rail-label{font-size:15.5px;font-weight:700;opacity:0;max-width:0;overflow:hidden;transition:opacity .2s var(--ease),max-width .28s var(--ease)}
.rail-btn:hover,.rail-btn:focus-visible{width:auto;gap:12px;color:#fff;box-shadow:0 12px 28px rgba(13,31,56,.34)}
.rail-btn:hover .rail-label,.rail-btn:focus-visible .rail-label{opacity:1;max-width:220px}
.rail-line{background:#06C755}
.rail-fb{background:#1877F2}
.rail-phone{background:var(--navy)}
.rail-map{background:var(--gold)}

/* ---------- ปุ่มลอยบนมือถือ ---------- */
.dock{display:none}

/* ---------- ป้ายข้อมูลตัวอย่าง ---------- */
.ph-note{font-size:14px;line-height:1.6;color:var(--gold);background:var(--gold-soft);border:1px solid #E7D5A8;border-radius:var(--r-sm);padding:9px 13px;margin-bottom:18px}

/* ---------- อนิเมชัน ---------- */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .slide{transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   จอเล็ก
   ============================================================ */
@media (max-width:1023px){
  /* บนมือถือเหลือเฉพาะไลน์กับเฟซบุ๊ก วางลอยเหนือแถบปุ่มล่างจอ
     ส่วนโทรกับแผนที่ไม่ต้องซ้ำ เพราะมีอยู่ในแถบล่างจอและหน้าติดต่อแล้ว */
  .rail{
    right:14px;
    bottom:calc(60px + env(safe-area-inset-bottom) + 14px);
    gap:12px;
    flex-direction:column-reverse   /* ไลน์อยู่ล่างสุด นิ้วโป้งกดถึงง่ายที่สุด */
  }
  .rail-phone,.rail-map{display:none}
  .rail-btn{height:54px;width:54px;padding:0 15px}
  .rail-btn .rail-label{display:none}
  .rail-btn:hover,.rail-btn:focus-visible{width:54px;gap:0}
  /* เว้นที่ท้ายหน้าไม่ให้ปุ่มลอยทับข้อความในส่วนท้าย */
  .foot-contact li,.foot-base,.faq .answer{padding-right:72px}
  .hero{min-height:min(70vh,520px)}
  .hero-panel{padding:64px var(--gut) 30px}
  /* เว้นที่ขวาไม่ให้คำบรรยายภาพชนปุ่มลอยไลน์กับเฟซบุ๊ก */
  .hero-foot{margin-top:22px;padding-right:72px}
  /* นิ้วแตะได้ถนัด ลิงก์ทุกอันสูงอย่างน้อย 44px */
  .foot-col a,.foot-contact a,.foot-contact span,.branch .row a,.aside-card .row a,.foot-links a,.crumb a,.crumb span{
    display:inline-flex;align-items:center;min-height:44px
  }
  .foot-col ul{gap:0}
  .foot-contact li,.branch .row{align-items:center}
  .foot-contact .ic,.branch .row .ic{margin-top:0}
  .split,.detail,.clip{grid-template-columns:1fr}
  .aside{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
  .head-cta{display:none}
  .burger{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gut) 16px;
    box-shadow:var(--sh-2);display:none
  }
  .nav.open{display:flex}
  .nav a{padding:14px 12px;border-radius:var(--r-sm);font-size:17px}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .dock{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--line);padding-bottom:env(safe-area-inset-bottom)
  }
  .dock-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:60px;font-weight:700;font-size:16px}
  .dock-phone{background:var(--navy);color:#fff}
  .dock-line{background:#06C755;color:#fff}
}

@media (max-width:767px){
  body{font-size:16.5px}
  .points{grid-template-columns:repeat(2,1fr);gap:10px}
  .point{padding:18px 16px}
  .cards,.reviews,.branches{grid-template-columns:1fr;gap:12px}
  .masonry{columns:2;column-gap:8px}
  .masonry>*{margin-bottom:8px}
  .feature-list,.form-grid{grid-template-columns:1fr}
  .step{grid-template-columns:auto 1fr;gap:14px;padding:18px 0}
  .step-no{height:32px;padding:0 13px;font-size:14px}
  .foot-grid{grid-template-columns:1fr}
  .clip{grid-template-columns:1fr}
  .clip video{max-width:300px;margin-inline:auto}
}

@media (min-width:480px) and (max-width:767px){
  .masonry{columns:3}
  .points{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .masonry{columns:3}
  .points{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .masonry{columns:4}
  .points{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(4,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .branches{grid-template-columns:repeat(3,1fr)}
}