/* ป้าย555 — ป้ายทะเบียนประมูลภาคตะวันออกเฉียงเหนือ
   บรีฟ: พื้นขาว · ตัวหนังสือน้ำเงิน · กรอบหัวข้อสีฟ้าแบบฝาขวดคริสตัล · ทางการ น่าเชื่อถือ เรียบ สะอาดตา · ฟอนต์ Anuphan
   กฎเหล็ก: ทุกส่วนต้องยังสวยเมื่อข้อความสั้นมากหรือยาวมาก และต้องไม่ล้นจอที่ 360px */

:root {
  --accent: #1257d6;
  --blue: var(--accent);
  --blue-d: #0b45b3;
  --navy: #0a2a66;
  --cap: #3fc4f1;
  --cap-2: #1ab0e6;
  --cap-soft: #e7f7fe;
  --ink: #0f2244;
  --muted: #56688a;
  --line: #d8e4f5;
  --paper: #ffffff;
  --paper-2: #f3f8ff;
  --gold: #f2b000;
  --red: #d92d20;
  --orange: #e97a00;
  --green: #06c755;
  --radius: 16px;
  --font: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: var(--font);
  --gap: clamp(44px, 7vw, 88px);
  --pad: clamp(16px, 4vw, 32px);
  --max: 1200px;
  --shadow-1: 0 1px 2px rgba(10, 42, 102, .06), 0 2px 8px rgba(10, 42, 102, .06);
  --shadow-2: 0 2px 4px rgba(10, 42, 102, .06), 0 12px 28px rgba(10, 42, 102, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 132px; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper);
  font-size: 16px; line-height: 1.7; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.3; margin: 0; text-wrap: balance; font-weight: 700; color: var(--navy); }
p { margin: 0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
svg.brand { stroke: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 55%, white); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

.sec { padding-block: var(--gap); }
.sec-tight { padding-block: clamp(20px, 4vw, 40px) var(--gap); }
.sec-soft, .sec-features, .sec-faq { background: var(--paper-2); }
.sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
.sec-head p { color: var(--muted); margin: 12px 0 0; max-width: 62ch; }
.sec-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }

/* ---------- กรอบหัวข้อสีฟ้าฝาขวดคริสตัล (บรีฟ mockup-03) ---------- */
.cap-title {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 22px 9px; border-radius: 14px;
  background: linear-gradient(180deg, #66d3f7 0%, var(--cap) 45%, var(--cap-2) 100%);
  color: var(--navy); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(10, 42, 102, .12), 0 2px 0 rgba(10, 42, 102, .08);
}
.cap-title::before, .cap-title::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #fff, #b9e9fb 60%, #7ccbea);
  box-shadow: 0 0 0 1px rgba(10, 42, 102, .18);
}
.cap-lg { font-size: clamp(24px, 3.6vw, 40px); padding: 10px 26px 12px; }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #2a6ff0, var(--blue) 55%, var(--blue-d)); color: #fff;
  font-weight: 600; text-decoration: none; line-height: 1.3; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px -6px rgba(18, 87, 214, .55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 22px -8px rgba(18, 87, 214, .6); }
.btn:active { transform: translateY(0); }
.btn-ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--blue); box-shadow: none; }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
.btn-line { background: var(--green); box-shadow: 0 6px 16px -8px rgba(6, 199, 85, .7); }
.btn-call { background: linear-gradient(180deg, #164fb8, var(--navy)); }
.btn-sm { min-height: 40px; padding: 7px 14px; font-size: 14.5px; border-radius: 10px; }
.btn-lg { min-height: 56px; font-size: 17px; padding: 12px 24px; border-radius: 14px; }
.btn svg.brand { width: 24px; height: 24px; border-radius: 6px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--blue); }
.more-link svg { transition: transform .2s var(--ease); }
.more-link:hover svg { transform: translateX(3px); }

/* ---------- หัวเว็บ ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); min-width: 0; }
.logo img { width: 48px; height: 48px; border-radius: 50%; }
.logo span { display: grid; line-height: 1.2; min-width: 0; }
.logo b { font-size: 20px; color: var(--navy); }
.logo small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.site-nav { display: none; }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.head-search, .head-menu {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy); cursor: pointer;
}
.head-call { display: none; }

.site-nav.open {
  display: grid; position: fixed; inset: 68px 0 auto 0; z-index: 41; background: #fff;
  padding: 8px var(--pad) 20px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
  max-height: calc(100dvh - 68px); overflow: auto;
}
.site-nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; font-weight: 600; }
.site-nav a[aria-current="page"] { color: var(--blue); }

@media (min-width: 1100px) {
  .head-menu { display: none; }
  .site-nav { display: flex; gap: 2px; margin-left: 12px; }
  .site-nav a { border: 0; padding: 8px 11px; border-radius: 10px; font-size: 15.5px; white-space: nowrap; }
  .site-nav a:hover { background: var(--cap-soft); }
  .site-nav a[aria-current="page"] { background: var(--cap-soft); }
  .head-call { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1259px) { .logo small { display: none; } }

/* แถบชื่อจังหวัดใต้หัวเว็บ — ทุกจังหวัดโชว์ด้านหน้า กดแล้วไปหน้าจังหวัด (บรีฟ mockup-01) */
.prov-strip { background: var(--cap-soft); border-top: 1px solid #cfeefb; }
.prov-strip .wrap { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.prov-strip-label { display: none; align-items: center; gap: 4px; font-weight: 600; color: var(--navy); white-space: nowrap; font-size: 14px; }
.prov-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 7px; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.prov-chips::-webkit-scrollbar { display: none; }
.prov-chips a {
  flex: none; padding: 5px 13px; border-radius: 999px; background: #fff; border: 1px solid #bfe8f8;
  color: var(--navy); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap;
}
.prov-chips a:hover { border-color: var(--cap-2); }
.prov-chips a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (min-width: 768px) { .prov-strip-label { display: inline-flex; } .prov-chips { mask-image: none; } }

/* ---------- แบนเนอร์ ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); }
.hero-track { display: flex; transition: transform .6s var(--ease); }
.hero-slide { flex: 0 0 100%; min-width: 0; }
.hero picture img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 40%; }
.hero-cap { background: linear-gradient(100deg, var(--navy), var(--blue-d) 55%, var(--blue)); color: #fff; }
.hero-cap .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 16px; }
.hero-title { color: #fff; font-size: clamp(20px, 3vw, 32px); margin: 0; }
.hero-sub { margin: 4px 0 0; color: #d6e6ff; font-size: clamp(14.5px, 1.6vw, 17px); max-width: 70ch; }
.hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; gap: 8px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .55); padding: 0; cursor: pointer; }
.hero-dots button[aria-current="true"] { background: #fff; width: 26px; border-radius: 6px; }

/* ---------- กล่องค้นหา 9 ช่อง ---------- */
.sec-finder { padding-block: clamp(20px, 4vw, 40px); }
.sec.sec-finder:first-child { padding-top: 24px; }
.finder {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-2); overflow: hidden;
}
.finder-head {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 14px 18px;
  background: linear-gradient(180deg, #66d3f7 0%, var(--cap) 50%, var(--cap-2) 100%);
  box-shadow: inset 0 -3px 0 rgba(10, 42, 102, .1);
}
.finder-title { display: flex; align-items: center; gap: 8px; font-size: clamp(20px, 2.4vw, 26px); color: var(--navy); margin: 0; }
.finder-title svg { width: 26px; height: 26px; }
.finder-count { margin: 0; color: var(--navy); font-size: 15px; }
.finder-count b { font-size: 18px; }
.finder-close { display: none; margin-left: auto; width: 40px; height: 40px; place-items: center; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .6); color: var(--navy); cursor: pointer; }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding: 16px 16px 4px; }
.fld { display: grid; gap: 4px; min-width: 0; }
.fld > span { font-size: 14px; font-weight: 600; color: var(--navy); }
.fld input, .fld select {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fbfdff; font-size: 16px; color: var(--ink); appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.fld select {
  padding-right: 36px; cursor: pointer;
  background: #fbfdff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2a66' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
.fld input::placeholder { color: #8b9ab4; }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(18, 87, 214, .14); background: #fff; }
.fld-check {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer;
  border: 1.5px dashed #9fdcf5; border-radius: 12px; background: var(--cap-soft); font-weight: 600; color: var(--navy);
}
.fld-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fld-check .tick { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--cap-2); display: grid; place-items: center; background: #fff; color: transparent; transition: .15s; }
.fld-check .tick svg { width: 16px; height: 16px; stroke-width: 3; }
.fld-check input:checked + .tick { background: var(--blue); border-color: var(--blue); color: #fff; }
.fld-check input:focus-visible + .tick { outline: 3px solid rgba(18, 87, 214, .35); outline-offset: 2px; }
.finder-actions { display: flex; gap: 10px; padding: 14px 16px 18px; }
.finder-actions .btn { flex: 1; }
.btn-search { flex: 2 !important; font-size: 17px; min-height: 52px; }
.finder-toggle { display: none; }

@media (min-width: 768px) {
  .finder-grid { grid-template-columns: repeat(4, 1fr); gap: 14px 12px; padding: 20px 20px 6px; }
  .fld-check { grid-column: span 2; }
  .finder-actions { justify-content: flex-end; padding: 14px 20px 20px; }
  .finder-actions .btn { flex: none; min-width: 160px; }
  .btn-search { min-width: 220px !important; }
}

/* หน้ารวมป้าย/หน้าจังหวัด: จอใหญ่ช่องค้นหาอยู่ซ้ายแบบติดจอ · มือถือย่อเป็นปุ่มตัวกรอง */
.finder-layout { display: grid; gap: 18px; }
@media (min-width: 1000px) {
  .finder-layout { grid-template-columns: 312px minmax(0, 1fr); gap: 28px; align-items: start; }
  .finder-layout .finder-shell { position: sticky; top: 132px; }
  .finder-layout .finder-grid { grid-template-columns: 1fr 1fr; padding: 16px 16px 4px; }
  .finder-layout .fld-check { grid-column: 1 / -1; }
  .finder-layout .finder-actions { padding: 12px 16px 16px; }
  .finder-layout .finder-actions .btn { flex: 1; min-width: 0; }
  .finder-layout .btn-search { min-width: 0 !important; }
  .finder-layout .finder-title { font-size: 21px; }
}
@media (max-width: 999px) {
  .finder-shell.is-sheet .finder-toggle { display: flex; width: 100%; min-height: 52px; }
  .finder-shell.is-sheet .finder {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 88dvh; overflow: auto;
    border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .32s var(--ease);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .finder-shell.is-sheet.open .finder { transform: none; }
  .finder-shell.is-sheet.open::before { content: ''; position: fixed; inset: 0; z-index: 60; background: rgba(10, 30, 70, .45); }
  .finder-shell.is-sheet .finder-close { display: grid; }
  .finder-shell.is-sheet .finder-head { position: sticky; top: 0; z-index: 1; }
  html.sheet-open { overflow: hidden; }
}

/* ---------- ผลค้นหา ---------- */
.results { margin-top: 22px; }
.finder-layout .results { margin-top: 0; }
.results[hidden] { display: none; }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.results-count { margin: 0; color: var(--muted); }
.results-count b { color: var(--navy); font-size: 20px; }
.results-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sort { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--muted); }
.sort select { min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line); padding: 6px 30px 6px 10px; font-size: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2a66' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px; appearance: none; -webkit-appearance: none; color: var(--navy); }
[aria-busy="true"] { opacity: .5; transition: opacity .2s; }
.empty { grid-column: 1 / -1; text-align: center; padding: 36px 16px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted); background: var(--paper-2); }
.empty b { color: var(--navy); }

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 12px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--line); text-decoration: none; color: var(--navy); font-weight: 600; background: #fff; }
.pager a:hover { border-color: var(--blue); }
.pager [aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager .gap { border: 0; background: none; min-width: 20px; padding: 0; }

/* ---------- ภาพป้าย (วาดจากเลขและจังหวัด เมื่อไม่มีรูปถ่าย) ---------- */
.plate {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 23 / 10; width: 100%; border-radius: 9px; border: 3px solid #161b26; overflow: hidden;
  container-type: inline-size; color: #0b0d12; isolation: isolate;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75), 0 1px 0 rgba(0, 0, 0, .05);
  background: linear-gradient(180deg, #bfe6fb 0%, #eef9ff 52%, #d4ebff 100%);
}
.plate::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 50% 66%, rgba(255, 255, 255, .95) 0 13%, rgba(255, 255, 255, 0) 14%),
    linear-gradient(180deg, transparent 72%, rgba(10, 42, 102, .10) 72% 74%, transparent 74%),
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(10, 42, 102, .05) 9% 9.6%);
}
.plate-no { font-size: clamp(20px, 6vw, 40px); font-size: 20.5cqi; font-weight: 700; line-height: 1; letter-spacing: .005em; white-space: nowrap; display: flex; gap: 4cqi; }
.plate-prov { font-size: clamp(11px, 2.6vw, 18px); font-size: 9.4cqi; font-weight: 700; line-height: 1.15; margin-top: 3.5cqi; white-space: nowrap; }
.tone-sunset { background: linear-gradient(180deg, #b8b2ef 0%, #f6d9cf 50%, #c9c3f4 100%); }
.tone-gold { background: linear-gradient(180deg, #ffe991 0%, #fffbe8 52%, #f4dd86 100%); }
.tone-mint { background: linear-gradient(180deg, #bfeedd 0%, #f2fffa 52%, #b7e7d4 100%); }
.plate-photo { border: 0; background: #eef3fa; box-shadow: none; }
.plate-photo::before { display: none; }
.plate-photo img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- การ์ดป้าย ---------- */
.plates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .plates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .plates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .finder-layout .plates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pc {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 8px 10px; box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.pc:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #b8d0f2; }
.pc-link { display: block; text-decoration: none; color: inherit; border-radius: 10px; }
.pc-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.pc-body { text-align: center; padding-top: 8px; }
.pc-price { margin: 0; font-size: clamp(18px, 4.6vw, 22px); font-weight: 700; color: var(--blue); line-height: 1.25; font-variant-numeric: tabular-nums; }
.pc-price small { font-size: .62em; font-weight: 600; color: var(--muted); }
.pc-price s { font-size: .62em; color: var(--muted); font-weight: 500; }
.pc-meta { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.pc .btn { position: relative; z-index: 1; margin-top: 8px; width: 100%; }
.pc-luck {
  position: absolute; top: 2px; left: 2px; z-index: 2; display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 5px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(10, 42, 102, .25);
  pointer-events: none;
}
.pc-luck svg { width: 17px; height: 17px; fill: var(--gold); stroke: #c98a00; stroke-width: 1; }
.pc-luck b { min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.pc-new { position: absolute; top: 2px; right: 2px; z-index: 2; padding: 1px 9px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; }
/* ป้ายจอง/ขายแล้ว: แถบคาดบนป้ายแบบเว็บอ้างอิง ป้ายขายแล้วซีดลง */
.pc-status {
  position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2; pointer-events: none;
  padding: 3px 6px; border-radius: 9px 9px 0 0; text-align: center;
  font-size: clamp(13px, 3.4vw, 15.5px); font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: .02em;
  background: rgba(233, 122, 0, .94);
}
.is-sold .pc-status { background: rgba(217, 45, 32, .95); }
.is-reserved .pc-new, .is-sold .pc-new { display: none; }
.is-sold .plate { filter: grayscale(.85); opacity: .7; }
.is-sold .pc-price { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- หมวดจังหวัด (เป็นการ์ดรูปตามบรีฟ selltabien) ---------- */
.prov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .prov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.prov-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 2 / 1; border-radius: 14px; border: 3px solid #161b26; overflow: hidden; text-decoration: none;
  container-type: inline-size; isolation: isolate; color: var(--navy);
  background: linear-gradient(180deg, #bfe6fb 0%, #eef9ff 52%, #d4ebff 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.prov-tile::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .9) 0 15%, transparent 16%),
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(10, 42, 102, .05) 9% 9.6%);
}
.prov-tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), var(--shadow-2); }
.prov-name { font-size: clamp(18px, 5vw, 30px); font-size: 13.5cqi; font-weight: 700; line-height: 1.2; text-align: center; padding-inline: 6px; color: #0b1a3a; }
.prov-count { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px; background: rgba(10, 42, 102, .88); color: #fff; font-size: 13px; font-weight: 600; }
.prov-count svg { width: 14px; height: 14px; }
.prov-tile.has-img { justify-content: flex-end; padding-bottom: 8px; }
.prov-tile.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.prov-tile.has-img .prov-name { font-size: 0; height: 0; overflow: hidden; }

/* ---------- ส่วนอื่นๆ ---------- */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 16px; } }
.feature { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.feature-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--cap-soft); color: var(--blue); }
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 18px; margin-bottom: 2px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

.about { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .about:not(.no-pic) { grid-template-columns: 1fr 1.1fr; gap: 48px; } .about.pic-right .about-pic { order: 2; } }
.about-pic img { width: 100%; border-radius: 20px; }
.about-text h2 { margin-bottom: 16px; }
.about-text p { color: #2a3c5e; max-width: 66ch; }

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: none; color: var(--blue); transition: transform .2s var(--ease); }
.faq details[open] summary span { transform: rotate(180deg); }
.faq-a { padding: 0 18px 14px; color: #33456a; }
.faq-a p:last-child { margin: 0; }

.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(22px, 3vw, 32px); margin-bottom: 18px; }
.cta-dark { background: radial-gradient(120% 140% at 50% 0%, #1a63e0 0%, var(--navy) 70%); }
.cta-dark h2 { color: #fff; }
.cta-soft { background: var(--cap-soft); }

.rich { max-width: 72ch; }
.rich-wide { max-width: none; }
.rich h2 { margin-bottom: 18px; }
.rich h3 { font-size: 20px; margin: 22px 0 8px; }
.rich p, .rich li { color: #2a3c5e; }
.rich ol, .rich ul { padding-left: 1.3em; margin: 0 0 1em; }
.rich li { margin-bottom: 6px; }
.rich ol { counter-reset: s; list-style: none; padding-left: 0; }
.rich ol li { counter-increment: s; position: relative; padding: 12px 14px 12px 56px; background: var(--paper-2); border-radius: 12px; border: 1px solid var(--line); }
.rich ol li::before { content: counter(s); position: absolute; left: 12px; top: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; }

.contact { display: grid; gap: 20px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } }
.contact-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.contact-note { color: var(--muted); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-list li > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff; color: var(--blue); border: 1px solid var(--line); }
.contact-list li > svg.brand { padding: 0; border: 0; border-radius: 10px; }
.contact-list span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.contact-list a { font-weight: 600; font-size: 17px; text-decoration: none; color: var(--navy); word-break: break-word; }
.contact-list p { margin: 0; }
.hours { list-style: none; padding: 14px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 15px; }
.hours li { display: flex; justify-content: space-between; gap: 12px; }
.hours .closed { color: var(--red); }
.map { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 20px; display: block; }
.map-wrap { margin-top: 24px; }

.lead { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-1); }
.lead h3 { font-size: 19px; }
.lead-grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .lead-grid { grid-template-columns: 1fr 1fr; } }
.lead label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.lead input, .lead textarea { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fbfdff; font-size: 16px; }
.lead textarea { min-height: 110px; resize: vertical; }
.lead input:focus, .lead textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(18, 87, 214, .14); }
.msg { margin: 0; font-size: 15px; min-height: 1.2em; }
.msg.ok { color: #067647; }
.msg.bad { color: var(--red); }

.gal { columns: 2; column-gap: 10px; }
@media (min-width: 768px) { .gal { columns: var(--cols, 3); column-gap: 14px; } }
.gal a { display: block; margin-bottom: 10px; break-inside: avoid; }
.gal img { width: 100%; border-radius: 12px; }
.quotes { display: grid; gap: 14px; }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.quote figcaption { display: flex; gap: 10px; align-items: center; }
.quote figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.quote figcaption span span { display: block; font-size: 13.5px; color: var(--muted); }

.plate-rows { display: grid; gap: 10px; }
.plate-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.plate-row h3 { font-size: 18px; } .plate-row h3 a { text-decoration: none; color: var(--navy); }
.row-cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (min-width: 700px) { .plate-row { grid-template-columns: 160px 1fr auto; } .row-cta { grid-column: auto; } }

/* ---------- หัวหน้ารอง ---------- */
.page-head { background: linear-gradient(180deg, var(--paper-2), #fff); padding-block: clamp(20px, 4vw, 36px) 4px; }
.page-lead { margin: 14px 0 0; color: var(--muted); max-width: 70ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--blue); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- หน้ารายละเอียดป้าย ---------- */
.plate-detail { display: grid; gap: 22px; }
@media (min-width: 900px) { .plate-detail { grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; } .plate-hero { position: sticky; top: 140px; } }
.plate-stage { position: relative; padding: clamp(14px, 3vw, 28px); border-radius: 22px; background: radial-gradient(120% 120% at 50% 0%, #eaf6ff, #d8ebff); border: 1px solid var(--line); }
.plate-stage .plate { border-width: 4px; border-radius: 14px; }
.plate-stage .plate-photo { border-radius: 12px; overflow: hidden; }
.plate-stage .pc-luck { top: 10px; left: 10px; }
.plate-stage .pc-luck svg { width: 22px; height: 22px; }
.plate-stage .pc-luck b { min-width: 30px; height: 30px; font-size: 15px; }
.plate-stage .pc-status { position: absolute; left: auto; right: 12px; top: 12px; aspect-ratio: auto; padding: 4px 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; background: var(--orange); }
.plate-stage.is-sold .pc-status { background: var(--red); }
.plate-stage.is-sold .plate { filter: grayscale(.85); opacity: .75; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.thumbs img { border-radius: 10px; aspect-ratio: 23 / 10; object-fit: contain; background: #eef3fa; }
.plate-short { margin: 12px 0 0; font-weight: 600; color: var(--navy); text-align: center; }
.plate-info h1 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 14px; }
.spec { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 16.5px; }
.spec th, .spec td { padding: 11px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.spec th { width: 38%; color: var(--muted); font-weight: 500; }
.spec td { color: var(--ink); }
.spec .big { font-size: 22px; color: var(--navy); }
.spec .price { font-size: 24px; color: var(--blue); }
.spec s { color: var(--muted); }
.luck-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px; background: #fff6d6; color: #8a5a00; font-weight: 600; font-size: 14px; }
.luck-chip svg { width: 15px; height: 15px; fill: var(--gold); stroke: #c98a00; stroke-width: 1; }
.st-chip { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 600; font-size: 14.5px; }
.st-available { background: #e3f8ec; color: #067647; }
.st-reserved { background: #fff1e0; color: #a65300; }
.st-sold { background: #fde8e7; color: var(--red); }
.sold-note { padding: 12px 14px; border-radius: 12px; background: #fde8e7; color: #9a1c13; font-weight: 600; }
.plate-cta { display: grid; gap: 10px; }
@media (min-width: 560px) { .plate-cta { grid-template-columns: 1fr 1fr; } }
.call-note { margin: 10px 0 14px; font-size: 14.5px; color: var(--muted); }
.call-note b { color: var(--navy); }
.plate-desc { margin-top: 36px; max-width: 75ch; }
.plate-desc h2 { margin-bottom: 14px; font-size: 22px; }
.plate-extra { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) { .plate-extra { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.howto-card { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 20px; background: var(--cap-soft); border: 1px solid #bfe8f8; text-decoration: none; color: var(--navy); transition: transform .2s var(--ease); }
.howto-card:hover { transform: translateY(-2px); }
.howto-card > svg:first-child { width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #fff; color: var(--blue); }
.howto-card span { display: grid; flex: 1; }
.howto-card small { color: var(--muted); font-size: 14px; }

/* ---------- บทความ ---------- */
.post-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.post-pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-body { padding: 16px 18px 18px; }
.post h2 { font-size: 19px; margin-bottom: 8px; } .post h2 a { text-decoration: none; color: var(--navy); }
.post p { color: var(--muted); font-size: 15px; }
.a-wrap { max-width: 780px; }
.sec-article h1 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 8px; }
.a-meta { color: var(--muted); font-size: 14px; }
.a-cover img { width: 100%; border-radius: 18px; margin: 16px 0; }
.a-lead { font-size: 18px; color: #2a3c5e; }
.a-toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 18px 0; }
.a-body h2 { margin: 28px 0 10px; font-size: 24px; } .a-body h3 { margin: 20px 0 8px; }
.a-body p, .a-body li { color: #22355a; }
.a-body blockquote { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--cap); background: var(--cap-soft); border-radius: 0 12px 12px 0; }
.a-fig img { border-radius: 14px; } .a-fig figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.a-cta { margin: 24px 0; padding: 20px; border-radius: 16px; background: var(--cap-soft); text-align: center; }
.a-embed { margin-top: 28px; } .a-embed h3 { margin-bottom: 12px; }

/* ---------- ท้ายเว็บ ---------- */
.site-foot { background: var(--navy); color: #c9d8f3; padding-block: 44px 24px; margin-top: 0; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: 1.4fr 1.2fr 1fr .8fr; } }
.site-foot h2 { color: #fff; font-size: 17px; margin-bottom: 12px; }
.site-foot .logo b { color: #fff; } .site-foot .logo small { color: #9fb5dd; max-width: none; white-space: normal; }
.foot-brand p { margin-top: 14px; font-size: 15px; }
.foot-list, .foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.foot-list li { display: flex; gap: 10px; align-items: flex-start; }
.foot-list svg { color: var(--cap); margin-top: 3px; }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.social svg.brand { width: 28px; height: 28px; border-radius: 7px; }
.disclaimer { margin: 32px 0 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: #9fb5dd; }
.copy { font-size: 13.5px; color: #8aa3cf; margin: 0; }

/* ---------- ปุ่มติดต่อลอยทุกหน้า (LINE · โทร · Facebook) ---------- */
.float-contact {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(10, 42, 102, .08);
}
.float-contact a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-height: 56px; border-radius: 12px; text-decoration: none; color: #fff; font-weight: 600; flex: 1; padding: 0 10px; min-width: 0; }
.float-contact a span { display: grid; line-height: 1.15; font-size: 12.5px; min-width: 0; }
.float-contact a span b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-call { background: linear-gradient(180deg, #2a6ff0, var(--blue-d)); }
.fl-line { background: var(--green); }
.fl-line svg.brand { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
.fl-fb { flex: 0 0 52px !important; background: #fff; border: 1.5px solid var(--line); }
.fl-fb svg.brand { width: 28px; height: 28px; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .float-contact { left: auto; right: 18px; bottom: 18px; flex-direction: column; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; width: 210px; }
  .float-contact a { box-shadow: var(--shadow-2); flex: none; justify-content: flex-start; padding: 0 14px; min-height: 52px; }
  .fl-fb { width: 52px; align-self: flex-end; justify-content: center !important; padding: 0 !important; }
}

/* ---------- อื่นๆ ---------- */
dialog.light { border: 0; padding: 0; background: transparent; max-width: 94vw; }
dialog.light::backdrop { background: rgba(5, 15, 40, .8); }
dialog.light img { max-height: 86vh; border-radius: 12px; }
dialog.light button { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0; font-size: 24px; background: #fff; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; z-index: 70; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 12px; box-shadow: var(--shadow-2); transition: .25s var(--ease); pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
html.nav-open { overflow: hidden; }

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

/* ช่องล่อบอทต้องซ่อนจริง (กฎ .lead input ด้านบนให้กว้าง 100%) */
.lead input.hp { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.pc-luck { z-index: 3; }

/* ป้ายดาว/ใหม่ เกาะมุมการ์ด ไม่ทับตัวอักษรบนป้าย */
.pc { margin-top: 6px; }
.pc .pc-luck { top: -9px; left: -5px; }
.pc .pc-new { top: -8px; right: -5px; }


/* =====================================================================
   ชั้นตกแต่งให้เข้ากับแบนเนอร์ของร้าน — ฟ้ายามเย็น ขอบทอง เส้นขอบฟ้าอีสาน (พระธาตุ โบสถ์)
   ยังคงโจทย์บรีฟ: พื้นขาว ตัวหนังสือน้ำเงิน กรอบหัวข้อฟ้าฝาขวดคริสตัล
   ===================================================================== */
:root {
  --navy-2: #0b1a45;
  --gold: #f5b400;
  --gold-l: #ffe39a;
  --gold-d: #b97800;
  --gold-grad: linear-gradient(135deg, #fff1b8 0%, #f7c948 28%, #d99a06 55%, #ffe08a 78%, #b97800 100%);
  --dusk: linear-gradient(180deg, #1b2a78 0%, #3b3a9c 30%, #8a4fa8 58%, #e2765c 84%, #f6b45e 100%);
  --dusk-x: linear-gradient(115deg, #0b1a45 0%, #1b2f86 38%, #5a3f9f 66%, #c4607a 88%, #f09a55 100%);
  --sky-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 120L0 100C60 96 100 98 140 96L150 96L150 86L156 86L156 78L162 78L166 62L170 40L172 26L174 40L178 62L182 78L188 78L188 86L194 86L194 96C230 98 250 94 290 95L300 95L306 84L318 84L326 72L340 72L345 60L348 44L351 60L356 72L370 72L378 84L390 84L396 95C430 97 460 92 500 93L520 93L520 80L528 80L528 70L534 70L538 54L542 34L546 18L548 6L550 18L554 34L558 54L562 70L568 70L568 80L576 80L576 93C620 95 660 90 700 92L712 92L716 84L722 84L726 74L730 66L734 74L738 84L744 84L748 92L770 92L774 82L780 82L784 70L788 60L792 70L796 82L802 82L806 92C850 94 880 90 920 92C950 80 990 78 1020 88L1040 92L1046 84L1060 84L1068 72L1080 72L1083 60L1086 48L1089 60L1092 72L1104 72L1112 84L1126 84L1132 92C1160 94 1180 92 1200 90L1200 120Z'/%3E%3C/svg%3E");
  --sky-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='rgb(6,14,40)' d='M0 120L0 100C60 96 100 98 140 96L150 96L150 86L156 86L156 78L162 78L166 62L170 40L172 26L174 40L178 62L182 78L188 78L188 86L194 86L194 96C230 98 250 94 290 95L300 95L306 84L318 84L326 72L340 72L345 60L348 44L351 60L356 72L370 72L378 84L390 84L396 95C430 97 460 92 500 93L520 93L520 80L528 80L528 70L534 70L538 54L542 34L546 18L548 6L550 18L554 34L558 54L562 70L568 70L568 80L576 80L576 93C620 95 660 90 700 92L712 92L716 84L722 84L726 74L730 66L734 74L738 84L744 84L748 92L770 92L774 82L780 82L784 70L788 60L792 70L796 82L802 82L806 92C850 94 880 90 920 92C950 80 990 78 1020 88L1040 92L1046 84L1060 84L1068 72L1080 72L1083 60L1086 48L1089 60L1092 72L1104 72L1112 84L1126 84L1132 92C1160 94 1180 92 1200 90L1200 120Z'/%3E%3C/svg%3E");
  --sky-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='rgba(46,36,120,.22)' d='M0 120L0 100C60 96 100 98 140 96L150 96L150 86L156 86L156 78L162 78L166 62L170 40L172 26L174 40L178 62L182 78L188 78L188 86L194 86L194 96C230 98 250 94 290 95L300 95L306 84L318 84L326 72L340 72L345 60L348 44L351 60L356 72L370 72L378 84L390 84L396 95C430 97 460 92 500 93L520 93L520 80L528 80L528 70L534 70L538 54L542 34L546 18L548 6L550 18L554 34L558 54L562 70L568 70L568 80L576 80L576 93C620 95 660 90 700 92L712 92L716 84L722 84L726 74L730 66L734 74L738 84L744 84L748 92L770 92L774 82L780 82L784 70L788 60L792 70L796 82L802 82L806 92C850 94 880 90 920 92C950 80 990 78 1020 88L1040 92L1046 84L1060 84L1068 72L1080 72L1083 60L1086 48L1089 60L1092 72L1104 72L1112 84L1126 84L1132 92C1160 94 1180 92 1200 90L1200 120Z'/%3E%3C/svg%3E");
}

.gold-text {
  background: linear-gradient(100deg, #ffe39a 0%, #f7c948 30%, #fff6d0 50%, #f2b10a 70%, #ffe08a 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldflow 6s linear infinite;
}
@keyframes goldflow { to { background-position: -220% 0; } }

.skyline { display: block; width: 100%; height: auto; fill: currentColor; stroke: none; pointer-events: none; }

/* ปุ่มทอง แบบกรอบติดต่อในแบนเนอร์ */
.btn-gold {
  position: relative; overflow: hidden; color: #2a1a00; background: var(--gold-grad); background-size: 160% 160%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(120, 70, 0, .25) inset, 0 8px 22px -8px rgba(217, 154, 6, .75);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-gold:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 26px -8px rgba(217, 154, 6, .85); }
.btn-gold::after, .btn-search::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: sweep 5.5s var(--ease) infinite;
}
@keyframes sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-search { position: relative; overflow: hidden; background: linear-gradient(180deg, #2a6ff0, var(--blue) 50%, var(--navy)); }
.btn-search svg { color: var(--gold-l); }

/* ---------- หัวเว็บ ---------- */
.site-head { border-top: 3px solid transparent; border-image: var(--gold-grad) 1; transition: box-shadow .25s var(--ease); }
.site-head.scrolled { box-shadow: 0 8px 24px -12px rgba(10, 42, 102, .35); }
.logo img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e6b23a, 0 4px 12px -4px rgba(185, 120, 0, .6); }
.head-call { background: var(--gold-grad) !important; color: #2a1a00 !important; box-shadow: 0 6px 16px -8px rgba(217, 154, 6, .8); }
.prov-chips a { transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.prov-chips a:hover { border-color: var(--gold); transform: translateY(-1px); }
.prov-chips a[aria-current="page"] { background: linear-gradient(180deg, #164fb8, var(--navy)); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- แบนเนอร์ + แถบข้อความ ---------- */
.hero-media { overflow: hidden; background: var(--navy-2); }
.hero-media picture { display: block; will-change: transform; }
.hero-cap {
  position: relative; overflow: hidden; isolation: isolate; background: var(--dusk-x);
  border-top: 3px solid transparent; border-image: var(--gold-grad) 1;
}
.hero-cap .wrap { position: relative; z-index: 2; padding-block: clamp(18px, 3vw, 30px) clamp(34px, 5vw, 54px); }
.hero-title { font-size: clamp(24px, 3.4vw, 40px); text-shadow: 0 2px 14px rgba(5, 10, 40, .45); line-height: 1.25; }
.hero-sub { color: #e7ecff; }
.hero-copy { max-width: 760px; }
.hero-glow {
  position: absolute; z-index: 0; width: 520px; height: 520px; right: 8%; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, .55) 0%, rgba(255, 170, 90, .22) 38%, transparent 68%);
  animation: glow 7s ease-in-out infinite; pointer-events: none;
}
@keyframes glow { 50% { transform: scale(1.12) translateY(14px); opacity: .8; } }
.sky-hero { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; color: rgba(255, 255, 255, .09); height: 60px; }
.is-home .hero-cap .wrap { padding-bottom: clamp(70px, 9vw, 104px); }
.is-home .sec-finder { position: relative; z-index: 3; margin-top: clamp(-84px, -7vw, -52px); padding-top: 0; }

/* ---------- กล่องค้นหา ขอบทอง ---------- */
.finder {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 30px 60px -28px rgba(10, 42, 102, .5), 0 8px 18px -10px rgba(10, 42, 102, .25);
}
.finder-head { position: relative; overflow: hidden; }
.finder-head::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 26px; background: var(--sky-white) bottom / 100% 100% no-repeat; opacity: .35; pointer-events: none;
}
.finder-count b { color: var(--navy); font-variant-numeric: tabular-nums; }
.fld input:hover, .fld select:hover { border-color: #b9cdea; }

/* ---------- แถบป้ายเลื่อน ---------- */
.showcase { position: relative; padding: 26px 0 30px; background: var(--dusk-x); overflow: hidden; isolation: isolate; }
.showcase::before { content: ''; position: absolute; inset: auto 0 0 0; height: 56px; background: var(--sky-white) bottom / 100% 100% no-repeat; opacity: .12; z-index: -1; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 48s linear infinite; padding-block: 6px; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }
.mq-item {
  flex: none; width: clamp(170px, 22vw, 230px); display: grid; gap: 8px; padding: 8px 8px 10px; border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 228, 160, .35); backdrop-filter: blur(4px);
  transition: transform .25s var(--ease), background-color .25s;
}
.mq-item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .18); }
.mq-item span { text-align: center; color: var(--gold-l); font-weight: 700; font-size: 17px; }

/* ---------- หัวข้อของแต่ละส่วน ---------- */
.sec-head:not(.sec-head-row) { text-align: center; }
.sec-head:not(.sec-head-row) p { margin-inline: auto; }
.sec-head:not(.sec-head-row)::after {
  content: ''; display: block; width: 150px; height: 12px; margin: 14px auto 0;
  background:
    radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px) center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 45%, transparent 45% 55%, var(--gold) 55%, transparent) center / 100% 2px no-repeat;
}
.sec-head-row .more-link { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #ecd28a; background: #fffaf0; color: #8a5a00; }
.sec-head-row .more-link:hover { background: #fff3d6; }
.sec-plates + .sec-plates { padding-top: 0; }

/* ---------- ภาพป้ายวาด: ฟ้ายามเย็น + พระธาตุ ---------- */
.plate { background: linear-gradient(180deg, #9fd4f6 0%, #e6f5ff 48%, #ffe7cf 72%, #cfe3fb 100%); }
.plate::before {
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 246, 214, .95) 0 11%, rgba(255, 214, 140, .45) 16%, transparent 26%),
    var(--sky-plate) bottom / 100% 34% no-repeat;
}
.tone-sunset { background: linear-gradient(180deg, #a99cf0 0%, #f0c6dc 42%, #ffe0c2 70%, #cdc4f6 100%); }
.tone-gold { background: linear-gradient(180deg, #ffd66a 0%, #fff4cc 46%, #ffe3a6 72%, #f3d98c 100%); }
.tone-mint { background: linear-gradient(180deg, #9fe3cc 0%, #effff8 46%, #fff0d6 72%, #c4ecdc 100%); }

/* ---------- การ์ดป้าย ---------- */
.pc { border-radius: 18px; }
.pc::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--gold-grad); opacity: 0; transition: opacity .25s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.pc:hover::before { opacity: 1; }
.pc:hover { box-shadow: 0 18px 36px -18px rgba(185, 120, 0, .45), var(--shadow-1); border-color: transparent; }
.pc-link { position: relative; overflow: hidden; }
.pc-link .plate::after, .mq-item .plate::after {
  content: ''; position: absolute; inset: 0; z-index: 1; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, .65) 50%, transparent 80%);
  transition: transform .8s var(--ease);
}
.pc:hover .plate::after, .mq-item:hover .plate::after { transform: translateX(120%) skewX(-18deg); }
.pc-luck { background: linear-gradient(180deg, #fffdf5, #fff1c9); box-shadow: 0 0 0 1.5px #e9c25c, 0 4px 10px -2px rgba(150, 95, 0, .45); }
.pc-luck svg { animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(18deg) scale(1.15); } }
.pc-new { background: linear-gradient(180deg, #2a6ff0, var(--navy)); box-shadow: 0 3px 8px -2px rgba(18, 87, 214, .6); }

/* ---------- การ์ดจังหวัด: ป้ายกรอบทอง แบบในแบนเนอร์ ---------- */
.prov-tile {
  border: 3px solid transparent; border-radius: 16px;
  background: linear-gradient(180deg, #8fc9f3 0%, #dff1ff 46%, #ffe3c8 74%, #cfe2fb 100%) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 10px 24px -14px rgba(10, 42, 102, .45);
}
.prov-tile.tone-sunset { background: linear-gradient(180deg, #9a8cf0 0%, #eec1da 44%, #ffd9b8 72%, #cbc0f5 100%) padding-box, var(--gold-grad) border-box; }
.prov-tile.tone-gold { background: linear-gradient(180deg, #ffd25a 0%, #fff2c4 46%, #ffdca0 72%, #f1d27e 100%) padding-box, var(--gold-grad) border-box; }
.prov-tile.tone-mint { background: linear-gradient(180deg, #8edcc2 0%, #ecfff6 46%, #ffeccc 72%, #bfe9d8 100%) padding-box, var(--gold-grad) border-box; }
.prov-tile::before { background: var(--sky-plate) bottom / 100% 40% no-repeat; }
.prov-sun {
  position: absolute; z-index: -1; left: 50%; top: 58%; width: 34%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 250, 225, 1) 0 34%, rgba(255, 210, 120, .55) 52%, transparent 70%);
  transition: top .5s var(--ease), transform .5s var(--ease);
}
.prov-tile:hover .prov-sun { top: 48%; transform: scale(1.12); }
.prov-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(185, 120, 0, .55); }
.prov-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.prov-count { background: linear-gradient(180deg, #164fb8, var(--navy)); box-shadow: inset 0 -2px 0 rgba(245, 180, 0, .7); }

/* ---------- จุดเด่น: แถบน้ำเงินเข้ม เหรียญทองแบบแบนเนอร์ ---------- */
.sec-features { position: relative; overflow: hidden; isolation: isolate; color: #e7ecff;
  background: radial-gradient(90% 120% at 85% 0%, rgba(245, 180, 0, .18), transparent 55%), linear-gradient(180deg, #0b1a45, #102a6b); }
.sec-features::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 70%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%);
  background-size: 260px 200px; }
.sec-features::after { content: ''; position: absolute; inset: auto 0 -1px 0; height: 70px; z-index: -1; background: var(--sky-navy) bottom / 100% 100% no-repeat; opacity: .5; }
.sec-features .sec-head p { color: #c5d0ef; }
.sec-features .feature { background: rgba(255, 255, 255, .06); border-color: rgba(255, 228, 160, .22); backdrop-filter: blur(3px); transition: transform .25s var(--ease), background-color .25s; }
.sec-features .feature:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.sec-features .feature h3 { color: #fff; }
.sec-features .feature p { color: #c5d0ef; }
.feature-icon { width: 56px; height: 56px; border-radius: 50%; color: var(--gold-l);
  background: radial-gradient(circle at 35% 30%, #23408f, #0b1a45 70%);
  box-shadow: 0 0 0 2px #e9b937, 0 0 0 5px rgba(233, 185, 55, .22), 0 8px 16px -6px rgba(0, 0, 0, .5); }
.feature-icon svg { width: 26px; height: 26px; }

/* ---------- แถบชวนติดต่อ: ฟ้ายามเย็น ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding-bottom: calc(var(--gap) + 30px); }
.cta-dark { background: var(--dusk); }
.cta-dark h2 { text-shadow: 0 2px 12px rgba(20, 10, 60, .45); }
.cta-sun { position: absolute; z-index: -1; left: 50%; bottom: 10px; width: 420px; height: 420px; translate: -50% 40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, .95) 0 20%, rgba(255, 180, 90, .45) 42%, transparent 68%); animation: glow 7s ease-in-out infinite; }
.cta-soft .cta-sun { opacity: .45; }
.sky-cta { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; height: 80px; color: var(--navy-2); }
.cta-soft .sky-cta { color: #bfe8f8; }
.cta-soft { background: linear-gradient(180deg, #f2fbff, var(--cap-soft)); }

/* ---------- คำถาม / ติดต่อ ---------- */
.faq details { transition: box-shadow .2s var(--ease), border-color .2s; position: relative; }
.faq details[open] { border-color: #ecd28a; box-shadow: 0 10px 24px -16px rgba(185, 120, 0, .5); }
.faq details[open]::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold-grad); }
.faq-a { animation: rise .35s var(--ease); }
.contact-card { border-top: 3px solid transparent; border-image: var(--gold-grad) 1; border-radius: 0 0 20px 20px; }
.lead { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #d8e4f5, #ecd28a) border-box; }

/* ---------- หัวหน้ารอง: ฟ้ายามเย็นแบบแบนเนอร์ ---------- */
.page-head { position: relative; overflow: hidden; isolation: isolate; background: var(--dusk-x); color: #fff; padding-block: clamp(26px, 5vw, 52px) clamp(56px, 7vw, 84px); }
.page-head .wrap { position: relative; z-index: 2; }
.page-head .crumbs, .page-head .crumbs span { color: #d9e2ff; }
.page-head .crumbs a { color: #fff; }
.page-lead { color: #eef2ff !important; }
.sky-head { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: 56px; color: #fff; }

/* ---------- ท้ายเว็บ ---------- */
.site-foot { position: relative; background: linear-gradient(180deg, var(--navy-2), #081233); padding-top: 70px; }
.sky-foot { position: absolute; left: 0; right: 0; top: -55px; height: 56px; color: var(--navy-2); }
.site-foot h2 { background: linear-gradient(90deg, #ffe39a, #f2b10a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-foot .logo img { box-shadow: 0 0 0 2px #e6b23a; }
.disclaimer { border-top-color: rgba(233, 185, 55, .25); }

/* ---------- ปุ่มติดต่อลอย (จอใหญ่เป็นวงกลม ป้ายชื่อเลื่อนออกเมื่อชี้) ---------- */
@media (min-width: 1000px) {
  .float-contact { width: auto; align-items: flex-end; }
  .float-contact a { width: 58px; min-height: 58px; height: 58px; border-radius: 999px; padding: 0 !important; justify-content: center !important; overflow: hidden;
    transition: width .3s var(--ease), padding .3s var(--ease); white-space: nowrap; }
  .float-contact a span { width: 0; opacity: 0; transition: opacity .2s; }
  .float-contact a:hover, .float-contact a:focus-visible { width: 220px; padding: 0 16px !important; justify-content: flex-start !important; }
  .float-contact a:hover span, .float-contact a:focus-visible span { width: auto; opacity: 1; }
  .fl-call { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 22px -8px rgba(18, 87, 214, .7) !important; animation: ring 6s ease-in-out infinite; }
  .fl-line { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 22px -8px rgba(6, 199, 85, .7) !important; }
  .fl-fb { width: 58px !important; }
  .fl-fb:hover { width: 58px !important; }
}
@keyframes ring { 0%, 86%, 100% { transform: none; } 88% { transform: rotate(-10deg); } 90% { transform: rotate(10deg); } 92% { transform: rotate(-8deg); } 94% { transform: rotate(6deg); } }

/* ---------- การปรากฏตอนเลื่อน ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; }
.js .stagger.in > * { opacity: 1; animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* หน้ารายละเอียดป้าย */
.plate-stage { background: radial-gradient(120% 100% at 50% 0%, rgba(255, 222, 150, .55), transparent 60%), var(--dusk-x); border: 2px solid transparent;
  background-clip: padding-box; box-shadow: 0 0 0 2px #e6b23a, 0 24px 48px -26px rgba(10, 42, 102, .6); }
.plate-stage .plate { box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .75); }
.plate-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; border-radius: 0 0 20px 20px; background: var(--sky-white) bottom / 100% 100% no-repeat; opacity: .14; pointer-events: none; }
.plate-info h1 { color: var(--navy); }
.howto-card { border: 2px solid transparent; background: linear-gradient(180deg, #f2fbff, var(--cap-soft)) padding-box, linear-gradient(135deg, #bfe8f8, #ecd28a) border-box; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; }
  .marquee-track { animation: none; }
  .gold-text, .hero-glow, .cta-sun, .btn-gold::after, .btn-search::after, .pc-luck svg, .fl-call { animation: none !important; }
}

@media (min-width: 1000px) {
  .js .is-home .float-contact { opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .js.past-hero .is-home .float-contact { opacity: 1; transform: none; pointer-events: auto; }
}
@media (min-width: 1000px) {
  .float-contact a span { display: none; }
  .float-contact a:hover span, .float-contact a:focus-visible span { display: grid; }
}