/* สมายแท็กซี่ อุบลราชธานี — mobile first
   โทน: น้ำเงินกรมท่า + ทอง · หัวข้อฟอนต์ Kanit · ลายประดับทำด้วย CSS ล้วน ไม่มีรูปเพิ่ม */

/* ── ฟอนต์หัวข้อ (โฮสต์เอง ไม่เรียก Google ตอนผู้ใช้เปิดเว็บ) ── */
@font-face{font-family:Kanit;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/kanit-600-thai.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Kanit;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/kanit-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Kanit;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/kanit-700-thai.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Kanit;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/kanit-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --navy-900:#06122B; --navy-800:#0A1A3C; --navy-700:#12264F; --navy-600:#1B3568;
  --gold:#F2B21B; --gold-lt:#FFD469; --gold-dk:#A9760A;
  --line:#06C755;
  --ink:#16202E; --ink-mid:#52607A; --ink-lt:#8794A8;
  --bg:#FFFFFF; --bg-soft:#F5F7FB; --border:#E2E7F0;
  --danger:#C6301C;
  --radius:14px; --radius-lg:20px;
  --shadow:0 2px 8px rgba(10,26,60,.06), 0 12px 28px rgba(10,26,60,.07);
  --shadow-lg:0 6px 18px rgba(10,26,60,.10), 0 26px 54px rgba(10,26,60,.12);
  --wrap:1120px;
  --dock-h:calc(64px + env(safe-area-inset-bottom));
  --display:Kanit,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai",sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }

/* [hidden] ต้องชนะกฎ display อื่นเสมอ ไม่งั้น element ที่ซ่อนไว้จะยังกินพื้นที่/บังการคลิก */
[hidden] { display:none !important; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sarabun",Arial,sans-serif;
  font-size:16px; line-height:1.7; color:var(--ink); background:var(--bg);
  padding-bottom:var(--dock-h);
}
@media (min-width:768px){ body{ padding-bottom:0 } }

img { max-width:100%; height:auto; display:block; }
h1,h2,h3 { margin:0; line-height:1.3; font-family:var(--display); font-weight:700; letter-spacing:-.005em; }
p { margin:0; }
a { color:inherit; }

.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ico { width:1.15em; height:1.15em; fill:currentColor; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.wrap--narrow { max-width:700px; }

/* ═════════ ลายประดับที่ใช้ซ้ำ ═════════ */

/* กรอบมุมทอง 4 มุม */
.corners { position:absolute; inset:0; pointer-events:none; }
.corners i {
  position:absolute; width:20px; height:20px;
  border:1.5px solid rgba(255,255,255,.45);
}
.corners i:nth-child(1){ top:0; left:0;     border-right:0; border-bottom:0; border-radius:6px 0 0 0 }
.corners i:nth-child(2){ top:0; right:0;    border-left:0;  border-bottom:0; border-radius:0 6px 0 0 }
.corners i:nth-child(3){ bottom:0; left:0;  border-right:0; border-top:0;    border-radius:0 0 0 6px }
.corners i:nth-child(4){ bottom:0; right:0; border-left:0;  border-top:0;    border-radius:0 0 6px 0 }
.corners--gold i { border-color:var(--gold); }

/* ป้ายหัวข้อแบบมีกรอบ */
.chip {
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 18px; border-radius:999px;
  border:1px solid rgba(242,178,27,.55); background:rgba(242,178,27,.09);
  color:var(--gold-dk); font-family:var(--display); font-weight:600;
  font-size:.79rem; letter-spacing:.07em; line-height:1.9;
}
.chip::before,.chip::after { content:""; width:5px; height:5px; transform:rotate(45deg); background:var(--gold); flex:none; }
.chip--light { color:var(--gold-lt); border-color:rgba(242,178,27,.5); background:rgba(242,178,27,.14); }

/* เส้นคั่นลายข้าวหลามตัด */
.rule { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:15px; }
.rule::before,.rule::after { content:""; height:1px; width:clamp(40px,12vw,72px); }
.rule::before { background:linear-gradient(90deg,transparent,var(--gold)); }
.rule::after  { background:linear-gradient(90deg,var(--gold),transparent); }
.rule i { width:6px; height:6px; transform:rotate(45deg); background:var(--gold); opacity:.5; flex:none; }
.rule i:nth-child(2){ width:10px; height:10px; opacity:1; }
.rule--light::before { background:linear-gradient(90deg,transparent,var(--gold-lt)); }
.rule--light::after  { background:linear-gradient(90deg,var(--gold-lt),transparent); }
.rule--light i { background:var(--gold-lt); }

/* บล็อกหัวข้อ */
.head { text-align:center; }
.head--mt { margin-top:64px; }
.head__title { margin-top:14px; font-size:clamp(1.5rem,5.8vw,2.15rem); }
.head__lead { margin-top:14px; color:var(--ink-mid); font-size:.98rem; }
.section--dark .head__lead { color:rgba(255,255,255,.72); }

/* ═════════ ปุ่ม ═════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 22px; border:0; border-radius:999px;
  font:inherit; font-family:var(--display); font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.97); }
.btn .ico { width:20px; height:20px; }
.btn b { font-weight:700; letter-spacing:.01em; }

.btn--call  { background:linear-gradient(180deg,var(--gold-lt),var(--gold)); color:var(--navy-900);
              box-shadow:0 6px 22px rgba(242,178,27,.42); width:100%; font-size:1.06rem; }
.btn--call:hover { box-shadow:0 8px 26px rgba(242,178,27,.55); }
.btn--line  { background:var(--line); color:#fff; flex:1; }
.btn--line:hover { background:#05b04c; }
.btn--ghost { background:rgba(255,255,255,.13); color:#fff; flex:1;
              backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34); }
.btn--ghost:hover { background:rgba(255,255,255,.22); }
.btn--submit{ background:linear-gradient(180deg,var(--navy-700),var(--navy-900)); color:#fff;
              width:100%; font-size:1.08rem; padding:17px; box-shadow:0 8px 24px rgba(10,26,60,.28); }
.btn--submit:hover { background:linear-gradient(180deg,var(--navy-600),var(--navy-800)); }
.btn--submit:disabled { opacity:.55; cursor:progress; transform:none; }

.linklike { background:none; border:0; padding:8px; margin-top:4px; font:inherit;
            color:var(--ink-mid); text-decoration:underline; cursor:pointer; }

/* ═════════ 1. หัวเว็บ ═════════ */
.hero { position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:-2; }
.hero__bg img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(178deg,rgba(6,18,43,.46) 0%,rgba(6,18,43,.64) 40%,rgba(6,18,43,.95) 80%,var(--navy-900) 100%);
}
.hero__edge {
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold-lt) 50%,var(--gold) 75%,transparent);
}
.hero__inner { max-width:var(--wrap); margin-inline:auto; padding:170px 20px 40px; text-align:center; }

.hero__box {
  position:relative; padding:26px 22px 24px; margin-bottom:24px;
  background:rgba(6,18,43,.34); backdrop-filter:blur(3px);
  border-radius:var(--radius-lg);
}
.hero__title { margin-top:14px; font-size:clamp(2rem,8.4vw,3.1rem); text-shadow:0 2px 22px rgba(0,0,0,.5); }
.hero__tagline { margin:15px auto 0; max-width:32ch; color:rgba(255,255,255,.9);
                 font-size:1.02rem; text-shadow:0 1px 12px rgba(0,0,0,.55); }

.hero__actions { display:flex; flex-direction:column; gap:11px; max-width:430px; margin-inline:auto; }
.hero__actions-row { display:flex; gap:11px; }

@media (min-width:768px){
  .hero__inner { padding:210px 20px 92px; text-align:left; }
  .hero__box { display:inline-block; padding:30px 34px 28px; }
  .hero__tagline { margin-inline:0; max-width:46ch; font-size:1.14rem; }
  .hero__actions { margin-inline:0; }
  .hero__bg img { object-position:center 42%; }
}

/* ═════════ โครงส่วน ═════════ */
.section { padding:64px 0; position:relative; }
.section--soft { background:var(--bg-soft); border-block:1px solid var(--border); }
.section--form { background:var(--bg-soft); border-block:1px solid var(--border); }
.section--dark { background:var(--navy-800); color:#fff; }
/* ลายจุดจางๆ ให้พื้นหลังไม่โล่ง */
.section--dark::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(242,178,27,.14) 1px,transparent 0);
  background-size:24px 24px;
}
.section--dark > * { position:relative; }

/* ═════════ 2. การ์ดบริการ ═════════ */
.cards { display:grid; gap:20px; margin-top:34px; }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr) } }

.card {
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg);
  border:1px solid transparent; pointer-events:none;
  transition:border-color .18s ease;
}
.card:hover::after { border-color:rgba(242,178,27,.55); }

.card__media { position:relative; }
.card__media img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.card__media::after {
  content:""; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top,rgba(6,18,43,.55),transparent);
}
.card__no {
  position:absolute; left:16px; bottom:-20px; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:var(--navy-900); font-family:var(--display); font-weight:700; font-size:1.15rem;
  box-shadow:0 4px 14px rgba(242,178,27,.5), 0 0 0 4px #fff;
}
.card__body { padding:34px 22px 24px; }
.card__body h3 { font-size:1.2rem; }
.card__line { display:block; width:34px; height:3px; border-radius:2px; margin:9px 0 11px;
              background:linear-gradient(90deg,var(--gold),rgba(242,178,27,.15)); }
.card__body p { color:var(--ink-mid); font-size:.95rem; }

.note {
  display:flex; gap:13px; align-items:flex-start;
  margin-top:28px; padding:17px 19px;
  border-radius:var(--radius); border:1px solid #F2DFA8; border-left:4px solid var(--gold);
  background:#FFF8E7; color:#5A4409; font-size:.95rem;
}
.note__ico { width:22px; height:22px; color:var(--gold-dk); margin-top:3px; }

/* ═════════ 3. ฟอร์ม ═════════ */
.panel {
  position:relative; margin-top:32px; padding:30px 20px 26px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
@media (min-width:620px){ .panel{ padding:38px 34px 32px } }

.form { display:flex; flex-direction:column; gap:19px; }

.step { display:flex; align-items:center; gap:12px; margin-top:8px; }
.step:first-of-type { margin-top:0; }
.step__no {
  width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--navy-800); color:var(--gold-lt);
  font-family:var(--display); font-weight:700; font-size:.95rem;
}
.step h3 { font-size:1.06rem; }
.step::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }

/* min-width:0 จำเป็น — ไม่งั้น input[type=date/time] ดันคอลัมน์กริดจนหน้าล้นแนวนอน */
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field-row > .field, .field-row .control, .field-row input { min-width:0; }

label,legend { font-weight:700; font-size:.94rem; color:var(--ink); }
.req { color:var(--danger); }
.opt { font-weight:500; color:var(--ink-lt); font-size:.85rem; }

/* ช่องกรอกที่มีไอคอนนำหน้า */
.control { position:relative; display:flex; align-items:center; }
.control__ico {
  position:absolute; left:14px; width:19px; height:19px; color:var(--ink-lt);
  pointer-events:none; transition:color .15s ease;
}
.control--area { align-items:flex-start; }
.control--area .control__ico { top:15px; }

input[type=text],input[type=tel],input[type=date],input[type=time],
input[type=number],input[type=password],textarea {
  width:100%; padding:14px 15px; font:inherit; font-size:16px;  /* 16px กัน iOS ซูมเอง */
  color:var(--ink); background:#fff;
  border:1.5px solid var(--border); border-radius:var(--radius);
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}
.control input,.control textarea { padding-left:43px; }
input:focus,textarea:focus { outline:none; border-color:var(--navy-600); box-shadow:0 0 0 4px rgba(27,53,104,.12); }
.control:focus-within .control__ico { color:var(--navy-600); }
input::placeholder,textarea::placeholder { color:var(--ink-lt); }
input[aria-invalid=true] { border-color:var(--danger); box-shadow:0 0 0 4px rgba(198,48,28,.1); }
textarea { resize:vertical; min-height:92px; }

.form__group { border:0; padding:0; margin:0; }
.form__group legend { padding:0; margin-bottom:10px; }

/* การ์ดตัวเลือก */
.picks { display:grid; gap:11px; }
.picks--2 { grid-template-columns:1fr 1fr; }
.pick {
  position:relative; display:flex; align-items:center; gap:13px;
  padding:15px 16px; cursor:pointer; font-weight:600;
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius);
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pick input { position:absolute; opacity:0; width:0; height:0; }
.pick__ico { width:26px; height:26px; color:var(--ink-lt); transition:color .15s ease; }
.pick__txt { flex:1; display:flex; flex-direction:column; line-height:1.45; }
.pick__txt b { font-family:var(--display); font-weight:600; font-size:1rem; }
.pick__txt small { color:var(--ink-mid); font-weight:400; font-size:.84rem; }
.pick__dot { width:21px; height:21px; flex:none; border-radius:50%; border:2px solid var(--ink-lt); transition:all .15s ease; }
.pick--sm { justify-content:space-between; }
.pick--sm .pick__txt { flex:0 1 auto; }

.pick:has(input:checked) {
  border-color:var(--navy-800); background:#F4F7FD;
  box-shadow:0 3px 12px rgba(10,26,60,.09);
}
.pick:has(input:checked) .pick__ico { color:var(--navy-800); }
.pick:has(input:checked) .pick__dot { border-color:var(--navy-800); background:var(--navy-800); box-shadow:inset 0 0 0 4px #fff; }
.pick:has(input:focus-visible) { box-shadow:0 0 0 4px rgba(27,53,104,.14); }

.stepper { display:flex; align-items:center; gap:11px; }
.stepper input { width:80px; text-align:center; font-family:var(--display); font-weight:600; font-size:1.1rem;
                 -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.stepper__btn {
  width:48px; height:48px; flex:none; border-radius:50%;
  border:1.5px solid var(--border); background:#fff;
  font-size:1.5rem; line-height:1; color:var(--navy-800); cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease;
}
.stepper__btn:hover { background:var(--bg-soft); border-color:var(--navy-600); }
.stepper__btn:active { transform:scale(.94); }
.stepper__unit { display:flex; align-items:center; gap:6px; color:var(--ink-mid); font-weight:600; }
.stepper__unit .ico { width:19px; height:19px; }

/* honeypot — ซ่อนจากคน แต่ไม่ใช้ display:none เพราะบอทบางตัวข้าม */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__foot { color:var(--ink-mid); font-size:.87rem; text-align:center; }

.alert { padding:14px 16px; border-radius:var(--radius); font-size:.94rem; font-weight:600; }
.alert--error { background:#FDECEA; color:#8C2314; border:1px solid #F3C4BC; }
.alert--warn  { background:#FFF6E0; color:#6B4E06; border:1px solid #F2DFA8; margin-bottom:20px; }

/* กล่องผลลัพธ์ */
.success { text-align:center; padding:14px 0 6px; }
.success__mark {
  width:66px; height:66px; margin:0 auto 16px; display:grid; place-items:center;
  border-radius:50%; background:#E7F7EC; color:#17864A;
}
.success__mark .ico { width:32px; height:32px; }
.success h3 { font-size:1.42rem; }
.success > p { color:var(--ink-mid); margin-top:6px; }
.success__code {
  position:relative; margin:22px auto; padding:20px 18px; max-width:330px;
  border:1px solid rgba(242,178,27,.4); border-radius:var(--radius); background:#FFFBF0;
}
.success__code small { display:block; font-size:.84rem; color:var(--ink-mid); }
.success__code strong { display:block; margin-top:5px; font-family:var(--display); font-weight:700;
                        font-size:1.6rem; letter-spacing:.05em; color:var(--navy-800); }
.success__hint { color:var(--ink-mid); font-size:.92rem; }
.success__actions { display:flex; gap:11px; margin-top:18px; }
.success__actions .btn { flex:1; width:auto; }

/* ═════════ 4. ทำไมต้องเรา ═════════ */
.why { display:grid; gap:32px; margin-top:34px; }
@media (min-width:900px){ .why{ grid-template-columns:1.15fr .85fr; align-items:center } }

.why__list { display:grid; gap:14px; }
.why__item {
  display:flex; gap:15px; align-items:flex-start;
  padding:16px 18px; border-radius:var(--radius);
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background-color .16s ease;
}
.why__item:hover { background:rgba(255,255,255,.1); }
.why__ico {
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:rgba(242,178,27,.16); color:var(--gold-lt);
  box-shadow:inset 0 0 0 1px rgba(242,178,27,.4);
}
.why__ico .ico { width:23px; height:23px; }
.why__item h3 { font-size:1.06rem; }
.why__item p { color:rgba(255,255,255,.74); font-size:.93rem; margin-top:2px; }

.why__figure { position:relative; margin:0; padding:10px; }
.why__figure img { border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ═════════ 5. คลิปวิดีโอ ═════════ */
.vids { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px; }
@media (min-width:760px){ .vids{ grid-template-columns:repeat(5,1fr) } }

.vid { position:relative; margin:0; }
.vid video {
  /* height:auto จำเป็น — attribute height ของ <video> เป็น presentational hint ที่ทับ aspect-ratio */
  width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; display:block;
  background:var(--navy-900); border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow);
}
/* ปุ่มเล่นวางทับตอนยังไม่เล่น */
.vid__play {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:grid; place-items:center; width:100%; padding:0;
  border:0; background:none; cursor:pointer; color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.vid__play::before {
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(to top,rgba(6,18,43,.4),rgba(6,18,43,.05));
  transition:background-color .2s ease;
}
.vid__play svg {
  position:relative; width:56px; height:56px; padding:16px; border-radius:50%;
  background:rgba(6,18,43,.62); box-shadow:0 0 0 2px rgba(255,255,255,.55);
  transition:transform .16s ease, background-color .16s ease;
}
.vid__play:hover svg { transform:scale(1.08); background:rgba(6,18,43,.8); }
.vid__play:focus-visible svg { outline:3px solid var(--gold); outline-offset:3px; }

.vid.is-playing .vid__play { display:none; }
.vid figcaption + * { }
.vid figcaption { margin-top:9px; font-size:.85rem; font-weight:600; color:var(--ink-mid); line-height:1.5; }

/* ═════════ 6. แกลเลอรี ═════════ */
.grid { display:grid; gap:12px; margin-top:34px; }
.grid--cars { grid-template-columns:repeat(2,1fr); }
.grid--trips { grid-template-columns:1fr; gap:20px; }
@media (min-width:700px){
  .grid--cars { grid-template-columns:repeat(4,1fr) }
  .grid--trips{ grid-template-columns:repeat(3,1fr) }
}
.grid--cars img {
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius);
  background:var(--border); border:1px solid var(--border);
  transition:transform .2s ease, box-shadow .2s ease;
}
.grid--cars img:hover { transform:scale(1.03); box-shadow:var(--shadow); }

.trip { margin:0; }
.trip img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
            border:1px solid var(--border); box-shadow:var(--shadow); }
.trip figcaption {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:11px; font-size:.89rem; font-weight:600; color:var(--ink-mid);
}
.trip figcaption .ico { width:16px; height:16px; color:var(--gold-dk); }

/* ═════════ 7. สื่อประชาสัมพันธ์ ═════════ */
.promos { display:grid; gap:20px; margin-top:34px; }
@media (min-width:760px){ .promos{ grid-template-columns:1fr 1fr; align-items:start } }
.promo { position:relative; margin:0; padding:11px; }
.promo img { width:100%; border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.3); }

/* ═════════ 8. รีวิว ═════════ */
.reviews { display:grid; gap:17px; margin-top:34px; }
@media (min-width:760px){ .reviews{ grid-template-columns:repeat(3,1fr) } }
.review {
  position:relative; margin:0; padding:26px 22px 20px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px;
}
.review__q { width:30px; height:30px; color:var(--gold); opacity:.85; }
.review blockquote { margin:0; color:var(--ink); font-size:.97rem; line-height:1.72; }
.review figcaption { margin-top:auto; padding-top:6px; border-top:1px solid var(--border);
                     color:var(--ink-mid); font-size:.87rem; font-weight:700; }

/* ═════════ 8b. คำถามที่พบบ่อย ═════════ */
.faqs { display:grid; gap:11px; margin-top:34px; }
.faq {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .16s ease;
}
.faq[open] { border-color:rgba(242,178,27,.6); }
.faq summary {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:17px 19px; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { background:var(--bg-soft); }
.faq summary .ico {
  width:20px; height:20px; flex:none; color:var(--gold-dk);
  transition:transform .2s ease;
}
.faq[open] summary .ico { transform:rotate(180deg); }
.faq__a { padding:0 19px 18px; }
.faq__a p { color:var(--ink-mid); font-size:.96rem; line-height:1.75; }

/* ═════════ 9. ติดต่อ ═════════ */
.contact { display:grid; gap:26px; margin-top:34px; }
@media (min-width:700px){ .contact{ grid-template-columns:1fr auto; align-items:start } }

.contact__main { display:grid; gap:11px; }
.contact__row {
  display:flex; align-items:center; gap:14px; padding:14px 17px;
  border-radius:var(--radius); background:rgba(255,255,255,.07); text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background-color .15s ease, box-shadow .15s ease;
}
.contact__row:hover { background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1px rgba(242,178,27,.45); }
.contact__ico {
  width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:rgba(242,178,27,.16); color:var(--gold-lt);
  box-shadow:inset 0 0 0 1px rgba(242,178,27,.35);
}
.contact__ico .ico { width:21px; height:21px; }
.contact__txt { display:flex; flex-direction:column; line-height:1.4; }
.contact__txt small { font-size:.79rem; color:rgba(255,255,255,.62); }
.contact__txt b { font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:.01em; }

.contact__qr { position:relative; margin:0; padding:12px; text-align:center; }
.contact__qr img { width:152px; height:152px; margin-inline:auto; border-radius:10px; background:#fff; padding:8px; }
.contact__qr figcaption { margin-top:10px; font-size:.84rem; color:rgba(255,255,255,.65); }

/* ═════════ ท้ายเว็บ ═════════ */
.footer { background:var(--navy-900); color:rgba(255,255,255,.7);
          padding:34px 0 42px; text-align:center; font-size:.92rem; }
.footer .rule { margin-bottom:16px; }
.footer__name { color:#fff; font-family:var(--display); font-weight:600; font-size:1.08rem; }
.footer p + p { margin-top:5px; }
.footer__small { font-size:.82rem; color:rgba(255,255,255,.45); margin-top:13px !important; }

/* ═════════ แถบปุ่มลอย (มือถือ) ═════════ */
.dock {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -3px 18px rgba(10,26,60,.16);
}
.dock__btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 4px; background:#fff; text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:.74rem;
  -webkit-tap-highlight-color:transparent;
}
.dock__btn .ico { width:21px; height:21px; }
.dock__btn--call { color:var(--gold-dk); }
.dock__btn--line { color:#04913F; }
.dock__btn--book { background:linear-gradient(180deg,var(--navy-700),var(--navy-900)); color:#fff; }
.dock__btn:active { filter:brightness(.94); }
@media (min-width:768px){ .dock{ display:none } }

@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}