/* ============================================================
   ต้นส้มเนอร์สซิ่งโฮม — ระบบดีไซน์ (ชุดที่ 2)
   สีและโครงหน้าดูดจากภาพต้นแบบที่ลูกค้าส่งมา
   ============================================================ */

:root{
  --navy-900:#012F5C;   /* แถบล่างสุดของท้ายเว็บ */
  --navy-800:#00366C;   /* ท้ายเว็บ */
  --navy-700:#003A72;   /* แบนเนอร์ */
  --navy-600:#014B90;

  --blue-700:#05449C;   /* หัวข้อใหญ่ */
  --blue-600:#0669CE;   /* ปุ่มหลัก */
  --blue-500:#0A77E9;   /* ไอคอน จุดเน้น แท็บที่เลือก */
  --blue-300:#8FC4F5;
  --blue-150:#CFE7FB;
  --blue-100:#DEF0FD;   /* พื้นส่วนรีวิว */
  --blue-75:#E4F3FE;    /* แถบประกาศใต้หัวเว็บ */
  --blue-50:#EDF7FE;    /* พื้นส่วนอ่อน */
  --blue-25:#F5FAFE;

  --orange:#F97F2D;
  --orange-600:#E8690F;
  --orange-50:#FFF2E6;

  --ink:#17222E;
  --body:#41505E;
  --muted:#6B7B8A;
  --line:#DDE7F0;
  --line-soft:#EAF1F8;
  --white:#fff;

  --shadow-xs:0 1px 2px rgba(1,47,92,.05), 0 1px 3px rgba(1,47,92,.05);
  --shadow-sm:0 1px 3px rgba(1,47,92,.06), 0 4px 12px rgba(1,47,92,.06);
  --shadow-md:0 2px 8px rgba(1,47,92,.07), 0 12px 28px rgba(1,47,92,.09);
  --shadow-lg:0 8px 20px rgba(1,47,92,.10), 0 24px 56px rgba(1,47,92,.13);

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --wrap:1236px;
  --pad:clamp(16px,4.5vw,28px);
  --sec:clamp(34px,3.55vw,46px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Anuphan','IBM Plex Sans Thai','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.7; color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:normal; word-break:normal; line-break:auto;
  overflow-x:hidden;
}

h1,h2,h3,h4{color:var(--blue-700); font-weight:700; line-height:1.3; margin:0 0 .45em;
  letter-spacing:-.01em; overflow-wrap:normal; hyphens:none; text-wrap:pretty}
h1{font-size:clamp(34px,5.7vw,74px); line-height:1.16}
h2{font-size:clamp(26px,3.2vw,41px)}
h3{font-size:clamp(19px,2.1vw,23px); line-height:1.35}
h4{font-size:clamp(17px,1.7vw,19px)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--blue-600); text-underline-offset:3px}
img,video{max-width:100%; height:auto; display:block}
img.ph{background-size:cover; background-position:center; background-repeat:no-repeat}
strong{font-weight:600; color:var(--ink)}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
.nb{white-space:nowrap}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:820px}
.section{padding-block:var(--sec)}
.section--soft{background:var(--blue-50)}
.section--blue{background:var(--blue-100)}
.section--tight{padding-block:clamp(30px,3.4vw,44px)}

.eyebrow{display:inline-block; font-size:14px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange); margin:0 0 12px}
.head{max-width:760px; margin-bottom:clamp(20px,2.4vw,30px)}
.head h2{margin-bottom:.3em}
.head p{font-size:clamp(16px,1.6vw,18.5px); color:var(--muted); margin:0}
.rule{width:80px; height:8px; background:var(--orange); border-radius:4px; margin:16px 0 0}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 26px; border-radius:var(--r-pill);
  font:inherit; font-weight:600; font-size:16.5px; text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  max-width:100%;
}
.btn svg{width:19px; height:19px; flex:none}
.btn--orange{background:var(--orange); color:#fff; box-shadow:0 4px 14px rgba(249,127,45,.32)}
.btn--orange:hover{background:var(--orange-600); transform:translateY(-2px)}
.btn--blue{background:var(--blue-600); color:#fff}
.btn--blue:hover{background:#0558AC; transform:translateY(-2px)}
.btn--ghost-w{border-color:rgba(255,255,255,.62); color:#fff}
.btn--ghost-w:hover{background:rgba(255,255,255,.14); transform:translateY(-2px)}
.btn--outline{border-color:var(--line); color:var(--blue-600); background:#fff}
.btn--outline:hover{border-color:var(--blue-600); transform:translateY(-2px)}
.btn--sq{border-radius:var(--r-sm)}
.btn--sm{min-height:40px; padding:0 18px; font-size:15px}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:420px){ .btn{padding:0 20px; font-size:15.5px} }

/* ---------- หัวเว็บ ---------- */
.header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line-soft)}
.header__bar{display:flex; align-items:center; gap:clamp(12px,2vw,26px); min-height:74px}
.brand{display:flex; align-items:center; gap:10px; flex:none; text-decoration:none; min-height:46px}
.brand img{height:44px; width:auto}
.brand__tx{display:flex; flex-direction:column; line-height:1.12}
.brand__th{font-size:19px; font-weight:700; color:var(--blue-700)}
.brand__th em{font-style:normal; color:var(--orange)}
.brand__en{font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.04em}
.nav{display:flex; gap:clamp(4px,1.4vw,18px); margin-inline:auto}
.nav a{position:relative; padding:8px 4px; text-decoration:none; color:var(--body);
  font-weight:500; font-size:16px; white-space:nowrap; transition:color .18s ease}
.nav a:hover{color:var(--blue-600)}
.nav a[aria-current="page"]{color:var(--blue-600); font-weight:600}
.nav a[aria-current="page"]::after{content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:3px; background:var(--blue-600); border-radius:2px}
.header__tel{display:inline-flex; align-items:center; gap:8px; text-decoration:none; min-height:44px;
  color:var(--blue-700); font-weight:700; font-size:17px; white-space:nowrap}
.header__tel svg{width:19px; height:19px; color:var(--blue-600)}
.header__cta{display:flex; align-items:center; gap:14px; flex:none}
.burger{display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line);
  background:#fff; border-radius:12px; cursor:pointer; align-items:center; justify-content:center; color:var(--blue-700)}
.burger svg{width:23px; height:23px}
@media (max-width:1040px){
  .nav{position:fixed; inset:auto 0 0 0; top:var(--hdr,64px); background:#fff; flex-direction:column;
    gap:0; padding:8px var(--pad) 24px; margin:0; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:.2s ease; max-height:calc(100dvh - var(--hdr,64px)); overflow:auto}
  .nav[data-open="true"]{transform:none; opacity:1; visibility:visible}
  .nav a{padding:14px 6px; font-size:17px; border-bottom:1px solid var(--line-soft)}
  .nav a[aria-current="page"]::after{display:none}
  .header__cta{display:none}
  .burger{display:flex}
  .header__bar{min-height:64px}
  .brand img{height:38px}
  .brand__th{font-size:17px}
}
@media (max-width:420px){ .brand__en{display:none} .brand img{height:34px} }

/* ---------- แถบประกาศ ---------- */
.ribbon{background:var(--blue-75); color:var(--navy-700); font-size:14.5px; font-weight:500}
.ribbon__in{display:flex; justify-content:space-between; gap:16px; padding-block:9px; flex-wrap:wrap}
.ribbon b{font-weight:700}
@media (max-width:640px){ .ribbon__in{justify-content:center; text-align:center; font-size:13.5px} .ribbon__r{display:none} }

/* ---------- แบนเนอร์ ---------- */
/* รูปเต็มความกว้างชนขอบ ไล่เฉดน้ำเงินทับฝั่งซ้ายให้ตัวหนังสืออ่านออก */
.hero{position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-700); color:#EAF3FB}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:64% 50%}
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(95deg,
      rgba(0,42,84,.96) 0%,
      rgba(0,48,95,.93) 24%,
      rgba(0,55,108,.66) 40%,
      rgba(0,58,114,.16) 55%,
      rgba(0,58,114,.02) 70%),
    linear-gradient(180deg, rgba(0,42,84,.30) 0%, rgba(0,42,84,0) 30%)}
.hero__grid{position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(20px,2.4vw,32px); align-items:center;
  min-height:clamp(430px,44.6vw,575px)}
.hero__tx{position:relative; padding-block:clamp(30px,3.4vw,44px)}
.hero h1{color:#fff; margin:0 0 22px; font-weight:700;
  text-shadow:0 2px 20px rgba(0,30,60,.38)}
.hero .rule{margin:0 0 24px}
.hero__sub{color:#DCEBFA; font-size:clamp(16.5px,1.95vw,25px); line-height:1.5;
  margin:0 0 30px; max-width:26ch; text-shadow:0 1px 14px rgba(0,30,60,.34)}
.hero .btn{min-height:clamp(50px,4.7vw,60px); padding:0 clamp(22px,2.4vw,31px);
  font-size:clamp(16px,1.65vw,21px); border-radius:var(--r-sm)}
.hero .btn svg{width:22px; height:22px}
/* การ์ดรูปซ้อน ตามแบบคือเกือบจัตุรัส อยู่ค่อนไปทางบน */
.hero__media{position:relative; align-self:stretch}
.hero__inset{position:absolute; left:0; top:clamp(22px,2.7vw,34px);
  width:clamp(200px,22vw,284px); border-radius:18px; overflow:hidden;
  border:8px solid #fff; box-shadow:var(--shadow-lg); background:#fff}
.hero__inset img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover}
/* ป้ายมุมล่างขวา */
.hero__badge{position:absolute; right:calc(var(--pad) * -1); bottom:clamp(28px,3vw,39px);
  background:#fff; border-radius:var(--r);
  padding:clamp(12px,1.3vw,17px) clamp(18px,2vw,26px);
  display:flex; align-items:center; gap:clamp(10px,1.1vw,14px); box-shadow:var(--shadow-lg)}
.hero__badge svg{width:clamp(28px,2.9vw,38px); height:clamp(28px,2.9vw,38px);
  color:var(--blue-500); flex:none}
.hero__badge span{display:block; font-size:clamp(13.5px,1.35vw,17px); color:var(--muted); line-height:1.25}
.hero__badge b{display:block; font-size:clamp(18px,2.1vw,27px); color:var(--blue-700); line-height:1.2}
@media (max-width:1040px){
  .hero__badge{right:0}
}
@media (max-width:900px){
  /* จอแคบ ไล่เฉดจากล่างขึ้นบนแทน ตัวหนังสือจะได้ไม่จมรูป */
  .hero__scrim{background:
    linear-gradient(180deg, rgba(0,42,84,.72) 0%, rgba(0,45,90,.84) 42%, rgba(0,42,84,.95) 100%)}
  .hero__bg img{object-position:center 42%}
  .hero__grid{grid-template-columns:1fr; gap:24px; min-height:0}
  .hero__tx{padding-block:36px 0}
  .hero__media{height:clamp(200px,46vw,280px); margin-bottom:34px}
  .hero__inset{top:0; width:clamp(180px,38vw,240px)}
  .hero__badge{bottom:0}
}
@media (max-width:560px){
  .hero__tx{padding-block:30px 0}
  .hero__media{height:auto; min-height:0; margin-bottom:30px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .hero__inset{position:static; width:clamp(150px,44vw,190px); border-width:6px; flex:none}
  .hero__badge{position:static; padding:11px 16px}
}

/* ---------- แถบจุดเด่น ---------- */
.stats{background:#fff; border-bottom:1px solid var(--line-soft)}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); padding-block:clamp(16px,1.6vw,21px)}
.stat{display:flex; align-items:center; gap:clamp(10px,1.2vw,15px); padding-inline:clamp(8px,1.6vw,22px);
  border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat svg{width:clamp(30px,3.4vw,44px); height:clamp(30px,3.4vw,44px); flex:none; color:var(--blue-500)}
.stat__t{font-size:clamp(13px,1.25vw,16px); color:var(--muted); line-height:1.3}
.stat__v{font-size:clamp(15.5px,1.55vw,19px); font-weight:700; color:var(--blue-700); line-height:1.25}
/* ค่าที่สั้น เช่น 24 ชม. / 10+ ปี ใช้ตัวใหญ่ตามแบบ */
.stat__v--big{font-size:clamp(20px,2.65vw,34px); line-height:1.15}
@media (max-width:820px){
  .stats__grid{grid-template-columns:1fr 1fr; gap:18px 0}
  .stat:nth-child(2n){border-right:0}
  .stat{padding-inline:6px}
}
@media (max-width:420px){ .stat svg{width:27px;height:27px} .stat{gap:10px} }

/* ---------- การ์ดบริการ ---------- */
.cards{display:grid; gap:clamp(14px,1.55vw,19px); grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue-150)}
.card__media{overflow:hidden; background:var(--blue-50)}
.card__media img{width:100%; aspect-ratio:2.15/1; object-fit:cover}
.card__body{padding:clamp(15px,1.5vw,19px); display:flex; flex-direction:column; gap:6px; flex:1}
.card h3{margin:0}
.card__sum{color:var(--muted); font-size:15.5px; margin:0; flex:1; line-height:1.5}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.price-pill{display:inline-flex; align-items:baseline; gap:5px; background:var(--orange); color:#fff;
  border-radius:var(--r-pill); padding:8px 16px; font-weight:700; font-size:16.5px; white-space:nowrap}
.price-pill small{font-size:13.5px; font-weight:600; opacity:.95}
.go{width:38px; height:38px; border-radius:50%; background:var(--blue-50); color:var(--blue-600);
  display:grid; place-items:center; flex:none; transition:.18s ease}
.go svg{width:17px; height:17px}
.card:hover .go{background:var(--blue-600); color:#fff}

/* ---------- ส่วนมาตรฐาน ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.2vw,42px); align-items:center}
.split--media-r{grid-template-columns:0.95fr 1.05fr}
@media (max-width:900px){ .split,.split--media-r{grid-template-columns:1fr; gap:28px} }
.checks{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px}
.checks li{display:flex; align-items:flex-start; gap:13px; font-size:16.5px; color:var(--ink)}
.checks svg{width:28px; height:28px; flex:none; color:#fff; background:var(--blue-500);
  border-radius:50%; padding:6px; margin-top:1px}
.frame{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--blue-50)}
.frame img{width:100%; aspect-ratio:2/1; object-fit:cover}

/* ---------- ตารางราคา ---------- */
.price-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(20px,3vw,32px); align-items:start}
.price-wrap > *{min-width:0}
@media (max-width:980px){ .price-wrap{grid-template-columns:1fr} }
.ptable{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; background:#fff; font-size:16px}
.ptable th{background:var(--blue-600); color:#fff; font-weight:600; font-size:15.5px;
  padding:14px 16px; text-align:left; white-space:nowrap}
.ptable td{padding:10px 16px; border-top:1px solid var(--line-soft); vertical-align:middle}
.ptable td:last-child{width:1%; white-space:nowrap}
.ptable .btn{white-space:nowrap}
.ptable tbody tr:nth-child(even){background:var(--blue-25)}
.ptable .pt-name{font-weight:600; color:var(--ink)}
.ptable .pt-desc{color:var(--muted); font-size:15px}
.ptable .pt-price{color:var(--orange-600); font-weight:700; font-size:18px; white-space:nowrap}
.ptable .pt-price small{color:var(--muted); font-weight:500; font-size:14px}
.pt-note{margin-top:14px; font-size:14.5px; color:var(--muted)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
/* จอแคบ: ตารางกลายเป็นการ์ดเรียงลง ไม่ต้องเลื่อนซ้ายขวา */
@media (max-width:620px){
  .table-scroll{overflow:visible}
  .ptable{min-width:0; display:block; border:0; border-radius:0;
    background:transparent; overflow:visible; font-size:16px}
  .ptable thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
  .ptable tbody{display:grid; gap:10px}
  .ptable tbody tr,
  .ptable tbody tr:nth-child(even){display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:3px 12px; align-items:start; background:#fff;
    border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 15px}
  .ptable td{display:block; padding:0; border:0}
  .ptable .pt-name{grid-column:1; grid-row:1; font-size:16.5px; line-height:1.35}
  .ptable .pt-price{grid-column:2; grid-row:1; text-align:right; white-space:nowrap}
  .ptable .pt-desc{grid-column:1 / -1; grid-row:2; font-size:14.5px; line-height:1.5; margin-top:2px}
  .ptable td:last-child{grid-column:1 / -1; grid-row:3; width:auto; margin-top:11px}
  .ptable td:last-child .btn{width:100%}
}

.ask{background:var(--blue-50); border:1px solid var(--blue-150); border-radius:var(--r-lg); padding:24px}
.ask__ic{width:48px; height:48px; border-radius:14px; background:#fff; color:var(--blue-500);
  display:grid; place-items:center; box-shadow:var(--shadow-xs); margin-bottom:14px}
.ask__ic svg{width:26px; height:26px}
.ask h3{margin:0 0 6px}
.ask p{color:var(--muted); font-size:15.5px; margin:0 0 16px}
.ask__list{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ask__list a{display:flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; color:var(--ink); font-weight:600}
.ask__list .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff}
.ask__list .ic svg{width:19px; height:19px}
.ic--tel{background:var(--blue-600)}
.ic--line{background:#06C755}
.ic--map{background:var(--navy-700)}
.ic--clock{background:var(--blue-500)}

/* ---------- แกลเลอรีแบบเบนโตะ ---------- */
.gal-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(14px,1.6vw,20px)}
.segs{display:flex; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; gap:2px;
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.segs button{flex:none}
.segs button{border:0; background:none; font:inherit; font-size:15.5px; font-weight:600; color:var(--body);
  padding:9px 18px; border-radius:var(--r-pill); cursor:pointer; min-height:42px; transition:.18s ease; white-space:nowrap}
.segs button:hover{color:var(--blue-600)}
.segs button[aria-pressed="true"]{background:var(--blue-500); color:#fff}
@media (max-width:560px){ .segs{width:100%; justify-content:center} .segs button{padding:9px 13px; font-size:14.5px} }

.bento{display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:auto auto; gap:12px}
.bento figure{position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:var(--blue-50)}
.bento img{width:100%; height:100%; object-fit:cover; display:block}
.bento .b-main{grid-row:span 2; grid-column:1}
.bento .b-main img{aspect-ratio:1/1}
.bento .b-s1{grid-column:2; grid-row:1}
.bento .b-s2{grid-column:3; grid-row:1}
.bento .b-s1 img,.bento .b-s2 img{aspect-ratio:16/9}
.bento .b-wide{grid-column:2 / span 2; grid-row:2}
.bento .b-wide img{aspect-ratio:3.3/1}
.bento figcaption{position:absolute; inset:auto 0 0 0; padding:30px 14px 13px; color:#fff;
  font-size:14.5px; line-height:1.4; font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(1,32,62,.86))}
.bento figcaption span{display:block; font-weight:400; font-size:13.5px; opacity:.92}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .bento .b-main{grid-column:1 / span 2; grid-row:1}
  .bento .b-main img{aspect-ratio:16/10}
  .bento .b-s1{grid-column:1; grid-row:2}
  .bento .b-s2{grid-column:2; grid-row:2}
  .bento .b-wide{grid-column:1 / span 2; grid-row:3}
}
.playbtn{position:absolute; inset:0; display:grid; place-items:center; border:0; background:none; cursor:pointer; width:100%}
.playbtn span{width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--blue-600);
  display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .18s ease}
.playbtn:hover span{transform:scale(1.08)}
.playbtn svg{width:25px; height:25px; margin-left:3px}
.video-box{border-radius:var(--r); overflow:hidden; background:#001b33}
.video-box video{width:100%; display:block}

/* ---------- รีวิว ---------- */
.rev-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(22px,3.4vw,44px); align-items:center}
@media (max-width:900px){ .rev-grid{grid-template-columns:1fr; gap:24px} }
.revs{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:center}
@media (max-width:620px){ .revs{grid-template-columns:1fr} }
.rev{position:relative; background:#fff; border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-xs);
  display:flex; flex-direction:column; gap:12px}
.rev__q{position:absolute; top:12px; right:16px; font-size:52px; line-height:1; color:var(--blue-100);
  font-family:Georgia,serif; pointer-events:none}
.stars{display:flex; gap:2px; color:var(--orange)}
.stars svg{width:17px; height:17px}
.rev__tx{color:var(--body); font-size:15.5px; line-height:1.65; margin:0; position:relative; z-index:1}
.rev__tx[data-clamp="true"]{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rev__who{display:flex; align-items:center; gap:10px; margin-top:auto}
.rev__av{width:34px; height:34px; border-radius:50%; background:var(--blue-50); color:var(--blue-600);
  display:grid; place-items:center; flex:none}
.rev__av svg{width:19px; height:19px}
.rev__who b{font-size:15.5px; color:var(--ink); font-weight:600}
.rev__more{align-self:flex-start; background:none; border:0; padding:8px 0; min-height:40px; font:inherit;
  font-size:15px; color:var(--blue-600); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* ---------- คำถามที่พบบ่อย ---------- */
.faq-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(22px,3.4vw,44px); align-items:start}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr; gap:22px} }
.faq{display:grid; gap:7px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.faq details[open]{border-color:var(--blue-150); box-shadow:var(--shadow-xs)}
.faq summary{list-style:none; cursor:pointer; padding:10px 50px 10px 18px; position:relative;
  font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.5; min-height:56px; display:flex; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:18px; top:50%; width:15px; height:15px; margin-top:-7.5px;
  background:
    linear-gradient(var(--blue-600),var(--blue-600)) center/15px 2.5px no-repeat,
    linear-gradient(var(--blue-600),var(--blue-600)) center/2.5px 15px no-repeat;
  transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--blue-600)}
.faq__a{padding:0 18px 18px; color:var(--body); font-size:16px}

/* ---------- ฟอร์ม ---------- */
.form{display:grid; gap:18px}
.field{display:grid; gap:6px}
.field label{font-weight:600; color:var(--ink); font-size:16px}
.field label .req{color:#C4342B}
.field input,.field select,.field textarea{font:inherit; font-size:16px; padding:13px 15px;
  border:1.5px solid var(--line); border-radius:var(--r-xs); background:#fff; color:var(--ink);
  width:100%; min-height:52px; transition:border-color .18s ease, box-shadow .18s ease}
.field textarea{min-height:132px; resize:vertical; line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue-600);
  box-shadow:0 0 0 4px var(--blue-50)}
.field[data-error="true"] input,.field[data-error="true"] select,.field[data-error="true"] textarea{
  border-color:#C4342B; background:#FFFAFA}
.field__err{color:#C4342B; font-size:14.5px; font-weight:500; display:flex; align-items:flex-start; gap:6px}
.field__err svg{width:16px; height:16px; flex:none; margin-top:3px}
.field__help{color:var(--muted); font-size:14px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:620px){ .form__row{grid-template-columns:1fr} }
.alert{padding:15px 18px; border-radius:var(--r-xs); font-size:16px; display:flex; gap:10px; align-items:flex-start}
.alert svg{width:21px; height:21px; flex:none; margin-top:2px}
.alert--ok{background:#EAF7EE; color:#1B6B34; border:1px solid #BFE4CB}
.alert--err{background:#FDF0EF; color:#9C2B22; border:1px solid #F3C9C5}

/* ---------- แถบปิดท้าย ติดต่อ ---------- */
.cta-card{display:grid; grid-template-columns:0.9fr 1fr 1fr; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
@media (max-width:980px){ .cta-card{grid-template-columns:1fr 1fr} .cta-card__map{grid-column:1 / span 2} }
@media (max-width:680px){ .cta-card{grid-template-columns:1fr} .cta-card__map{grid-column:1} }
.cta-card__blue{background:var(--navy-700); color:#fff; padding:clamp(22px,2.5vw,30px)}
.cta-card__blue h2{color:#fff; font-size:clamp(23px,2.6vw,30px); margin:0 0 12px}
.cta-card__blue p{color:#C7DEF2; font-size:16px; margin:0 0 22px}
.cta-card__info{padding:clamp(20px,2.2vw,26px); display:grid; gap:13px; align-content:center}
.cta-card__info a,.cta-card__info div{display:flex; align-items:center; gap:13px; min-height:44px; text-decoration:none;
  color:var(--ink); font-weight:600; font-size:16px}
.cta-card__info .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff}
.cta-card__info .ic svg{width:20px; height:20px}
.cta-card__map{position:relative; background:var(--blue-50); min-height:196px}
.cta-card__map iframe{width:100%; height:100%; min-height:196px; border:0; display:block}
.cta-card__map .btn{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); white-space:nowrap}

/* ---------- แถบไอคอนติดต่อลอยข้างจอ ---------- */
.rail{position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:55; display:grid; gap:10px}
.rail a{width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(1,47,92,.28); color:#fff; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease}
.rail a:hover{transform:scale(1.08)}
.rail a svg{width:26px; height:26px}
.rail .r-tel{background:var(--blue-600)}
.rail .r-line{background:#06C755}
.rail .r-fb{background:#1877F2}
.rail .r-map{background:#EA4335}
@media (max-width:760px){
  .rail{right:9px; gap:8px}
  .rail a{width:45px; height:45px}
  .rail a svg{width:23px; height:23px}
}

/* ---------- ท้ายเว็บ ---------- */
.footer{background:var(--navy-800); color:#C3DCEE; font-size:15.5px}
.footer__main{display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3vw,40px);
  flex-wrap:wrap; padding-block:clamp(26px,3.4vw,38px)}
.footer .brand__th{color:#fff}
.footer .brand__en{color:#9FC0DA}
.footer__nav{display:flex; flex-wrap:wrap; gap:0; align-items:center}
.footer__nav a{color:#C3DCEE; text-decoration:none; padding:11px 16px; border-right:1px solid rgba(255,255,255,.2); font-size:15px}
.footer__nav a:last-child{border-right:0}
.footer__nav a:hover{color:#fff; text-decoration:underline}
.footer__cts{display:grid; gap:9px}
.footer__cts a{display:flex; align-items:center; gap:10px; min-height:44px; color:#fff; text-decoration:none; font-weight:600}
.footer__cts svg{width:18px; height:18px; color:var(--blue-300)}
.footer__bar{background:var(--navy-900); font-size:14px; color:#9FC0DA}
.footer__bar div{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:14px}
@media (max-width:760px){ .footer__main{justify-content:flex-start} .footer__nav a{padding:6px 12px} }

/* ---------- หัวหน้าย่อย ---------- */
.pagehead{background:var(--navy-700); color:#D9EAF8; padding-block:clamp(34px,5vw,64px)}
.pagehead h1{color:#fff; margin:0 0 12px}
.pagehead p{max-width:62ch; font-size:clamp(16px,1.7vw,19px); margin:0; color:#C7DEF2}
.crumb{font-size:14.5px; color:#A8CBE6; margin:0 0 12px}
.crumb a{color:#D9EAF8; text-decoration:none}
.crumb a:hover{text-decoration:underline}

.chip-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); color:#fff; font-size:15px; font-weight:500}
.chip svg{width:17px; height:17px; color:#FFD08A}

.info-list{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.info-list li{display:flex; gap:13px; align-items:flex-start}
.info-list .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff}
.info-list .ic svg{width:20px; height:20px}
.info-list b{display:block; color:var(--ink); font-size:14.5px; font-weight:600; margin-bottom:1px}
.info-list a{color:var(--blue-600); font-weight:600; text-decoration:none; overflow-wrap:anywhere}
.info-list a:hover{text-decoration:underline}
.map-box{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--blue-50); line-height:0}
.map-box iframe{width:100%; height:clamp(280px,40vw,420px); border:0; display:block}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,52px); align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

.feature-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.feature-list li{display:flex; gap:11px; align-items:flex-start; font-size:16.5px}
.feature-list svg{width:26px; height:26px; flex:none; color:#fff; background:var(--blue-500);
  border-radius:50%; padding:5px; margin-top:1px}

.gal{columns:4; column-gap:12px}
.gal > *{break-inside:avoid; margin-bottom:12px; border-radius:var(--r); overflow:hidden; background:var(--blue-50)}
.gal img{width:100%; height:auto; display:block}
.gal figure{position:relative; margin:0}
.gal figcaption{position:absolute; inset:auto 0 0 0; padding:26px 12px 10px; color:#fff; font-size:13.5px;
  line-height:1.4; background:linear-gradient(180deg,transparent,rgba(1,32,62,.86)); opacity:0; transition:opacity .2s ease}
.gal figure:hover figcaption, .gal figure:focus-within figcaption{opacity:1}
@media (hover:none){ .gal figcaption{opacity:1} }
@media (max-width:1023px){ .gal{columns:3} }
@media (max-width:767px){ .gal{columns:3; column-gap:10px} .gal > *{margin-bottom:10px} }
@media (max-width:479px){ .gal{columns:2; column-gap:8px} .gal > *{margin-bottom:8px} }

.doc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:clamp(14px,2vw,22px)}
.doc{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px; text-align:center}
.doc img{width:100%; height:auto; border-radius:var(--r-xs)}
.doc figcaption{margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.5}

/* ---------- อนิเมชัน ---------- */
.reveal{opacity:0; transform:translateY(16px)}
.reveal[data-shown="true"]{opacity:1; transform:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
.skip{position:absolute; left:-9999px; top:0; background:#fff; color:var(--blue-700); padding:12px 18px; z-index:200}
.skip:focus{left:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}


/* ---------- หน้าต่างวิดีโอ ---------- */
.vmodal{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(12px,3vw,32px); background:rgba(1,20,40,.88);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.vmodal__in{position:relative; width:min(100%,900px); max-height:100%; display:flex}
.vmodal video{width:100%; max-height:calc(100dvh - clamp(24px,6vw,64px));
  border-radius:var(--r); background:#000; display:block; margin:auto; object-fit:contain}
.vmodal__x{position:absolute; top:-46px; right:0; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--navy-800);
  display:grid; place-items:center; cursor:pointer}
.vmodal__x svg{width:20px; height:20px}
.vmodal__x:hover{background:#fff}
@media (max-width:560px){ .vmodal__x{top:auto; bottom:-52px; right:50%; transform:translateX(50%)} }