/* อยุธยา AED — สีอิฐกรุงเก่า + ทองลายรดน้ำ + ลายกนก · ฟอนต์ Mitr (หัวข้อ) Sarabun (เนื้อหา) ฝังในเครื่อง ไม่โหลดจากภายนอก
   ลายไทยทั้งหมดอยู่ใน site/ornaments/*.svg → node site/tools/ornaments.mjs ฝังเป็น data URI (ไม่ต้องโหลดรูปเพิ่ม) */
@font-face { font-family: Mitr; font-weight: 500; font-display: swap; src: url(../fonts/mitr-500-thai.woff2) format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Mitr; font-weight: 500; font-display: swap; src: url(../fonts/mitr-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url(../fonts/sarabun-thai-400.woff2) format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url(../fonts/sarabun-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url(../fonts/sarabun-thai-700.woff2) format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url(../fonts/sarabun-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

/* ornaments:start — สร้างโดย site/tools/ornaments.mjs ห้ามแก้ตรงนี้ */
:root {
  --orn-kruay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Crect width='32' height='1.8'/%3E%3Ccircle cx='4' cy='4.2' r='1.15'/%3E%3Ccircle cx='12' cy='4.2' r='1.15'/%3E%3Ccircle cx='20' cy='4.2' r='1.15'/%3E%3Ccircle cx='28' cy='4.2' r='1.15'/%3E%3Cpath fill-rule='evenodd' d='M0.4 6.6Q12 7.6 16 21.6Q20 7.6 31.6 6.6ZM5.6 8.2Q13 9.2 16 17.4Q19 9.2 26.4 8.2ZM16 9.6C17.9 11.6 17.9 13.4 16 15.6C14.1 13.4 14.1 11.6 16 9.6Z'/%3E%3Cpath d='M0 6.6C1.6 8.4 1.6 10 0 11.6ZM32 6.6C30.4 8.4 30.4 10 32 11.6Z'/%3E%3C/svg%3E");
  --orn-prajamyam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M24 0L48 24L24 48L0 24ZM24 1.6L46.4 24L24 46.4L1.6 24Z'/%3E%3Cpath fill-rule='evenodd' d='M24 4.2L43.8 24L24 43.8L4.2 24ZM24 5.2L42.8 24L24 42.8L5.2 24Z'/%3E%3Cg transform='translate(24 24)'%3E%3Cpath id='p' d='M0-14.5C3.6-11.2 4.4-6.6 0-2.9C-4.4-6.6-3.6-11.2 0-14.5ZM0-11.2C1.4-9.4 1.6-7.4 0-5.6C-1.6-7.4-1.4-9.4 0-11.2Z' fill-rule='evenodd'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cpath id='l' d='M0-9.6C1.5-8 1.5-6 0-4.6C-1.5-6-1.5-8 0-9.6Z' transform='rotate(45)'/%3E%3Cuse href='%23l' transform='rotate(90)'/%3E%3Cuse href='%23l' transform='rotate(180)'/%3E%3Cuse href='%23l' transform='rotate(270)'/%3E%3Ccircle r='2.1'/%3E%3C/g%3E%3Cg id='c'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='0' cy='-6' r='1.2'/%3E%3Ccircle cx='6' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='6' r='1.2'/%3E%3Ccircle cx='-6' cy='0' r='1.2'/%3E%3C/g%3E%3Cuse href='%23c' x='48'/%3E%3Cuse href='%23c' y='48'/%3E%3Cuse href='%23c' x='48' y='48'/%3E%3C/svg%3E");
  --orn-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cpath fill-rule='evenodd' d='M80 0L89 9L80 18L71 9ZM80 1.8L87.2 9L80 16.2L72.8 9Z'/%3E%3Cpath d='M80 3.4C81.6 5 81.8 6.6 80 8C78.2 6.6 78.4 5 80 3.4ZM80 14.6C81.6 13 81.8 11.4 80 10C78.2 11.4 78.4 13 80 14.6ZM74.4 9C76 7.4 77.6 7.2 79 9C77.6 10.8 76 10.6 74.4 9ZM85.6 9C84 7.4 82.4 7.2 81 9C82.4 10.8 84 10.6 85.6 9Z'/%3E%3Cpath d='M91 8L132 8.6L132 9.4L91 10ZM69 8L28 8.6L28 9.4L69 10Z'/%3E%3Cpath d='M132 9C136 5 141 5.4 142 9C142.6 11.6 139.4 12.6 138.4 10.6C137.8 9.4 139.2 8.4 140 9.2C139.6 7.4 136 7.6 133.6 10Z'/%3E%3Cpath d='M28 9C24 5 19 5.4 18 9C17.4 11.6 20.6 12.6 21.6 10.6C22.2 9.4 20.8 8.4 20 9.2C20.4 7.4 24 7.6 26.4 10Z'/%3E%3Cpath d='M144 9C148 6.8 152 7.4 156 9C152 10.6 148 11.2 144 9ZM16 9C12 6.8 8 7.4 4 9C8 10.6 12 11.2 16 9Z'/%3E%3Ccircle cx='98' cy='9' r='1.3'/%3E%3Ccircle cx='62' cy='9' r='1.3'/%3E%3C/svg%3E");
  --orn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='k' fill-rule='evenodd' d='M30 98C16 98 8 88 12 80C5 76 2 68 3 58C6 62 11 63 16 62C9 58 6 48 8 40C11 44 15 45 20 44C14 40 12 30 15 22C18 26 22 27 26 27C26 16 34 6 46 2C38 10 37 20 39 30C44 46 45 60 40 72C36 82 40 92 30 98ZM31 84A6 6 0 1 0 19 84A6 6 0 1 0 31 84ZM27.6 84A2.6 2.6 0 1 0 22.4 84A2.6 2.6 0 1 0 27.6 84Z'/%3E%3C/defs%3E%3Cpath d='M0 0H64V2.2H2.2V64H0Z'/%3E%3Cpath fill-rule='evenodd' d='M10 2.6L17.4 10L10 17.4L2.6 10ZM10 4.8L15.2 10L10 15.2L4.8 10Z'/%3E%3Ccircle cx='10' cy='10' r='1.9'/%3E%3Cuse href='%23k' transform='translate(63 4) scale(0.46 0.25) rotate(90)'/%3E%3Cuse href='%23k' transform='matrix(0 1 1 0 0 0) translate(63 4) scale(0.46 0.25) rotate(90)'/%3E%3C/svg%3E");
  --orn-dok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0L20 10L10 20L0 10ZM10 2L18 10L10 18L2 10Z'/%3E%3Cpath d='M10 3.6C11.6 5.2 11.8 6.8 10 8.4C8.2 6.8 8.4 5.2 10 3.6ZM10 16.4C11.6 14.8 11.8 13.2 10 11.6C8.2 13.2 8.4 14.8 10 16.4ZM3.6 10C5.2 8.4 6.8 8.2 8.4 10C6.8 11.8 5.2 11.6 3.6 10ZM16.4 10C14.8 8.4 13.2 8.2 11.6 10C13.2 11.8 14.8 11.6 16.4 10Z'/%3E%3Ccircle cx='10' cy='10' r='1.3'/%3E%3C/svg%3E");
  --bg-prajamyam-paper: url("data:image/svg+xml,%3Csvg fill='%23b8862a' fill-opacity='.075' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M24 0L48 24L24 48L0 24ZM24 1.6L46.4 24L24 46.4L1.6 24Z'/%3E%3Cpath fill-rule='evenodd' d='M24 4.2L43.8 24L24 43.8L4.2 24ZM24 5.2L42.8 24L24 42.8L5.2 24Z'/%3E%3Cg transform='translate(24 24)'%3E%3Cpath id='p' d='M0-14.5C3.6-11.2 4.4-6.6 0-2.9C-4.4-6.6-3.6-11.2 0-14.5ZM0-11.2C1.4-9.4 1.6-7.4 0-5.6C-1.6-7.4-1.4-9.4 0-11.2Z' fill-rule='evenodd'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cpath id='l' d='M0-9.6C1.5-8 1.5-6 0-4.6C-1.5-6-1.5-8 0-9.6Z' transform='rotate(45)'/%3E%3Cuse href='%23l' transform='rotate(90)'/%3E%3Cuse href='%23l' transform='rotate(180)'/%3E%3Cuse href='%23l' transform='rotate(270)'/%3E%3Ccircle r='2.1'/%3E%3C/g%3E%3Cg id='c'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='0' cy='-6' r='1.2'/%3E%3Ccircle cx='6' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='6' r='1.2'/%3E%3Ccircle cx='-6' cy='0' r='1.2'/%3E%3C/g%3E%3Cuse href='%23c' x='48'/%3E%3Cuse href='%23c' y='48'/%3E%3Cuse href='%23c' x='48' y='48'/%3E%3C/svg%3E");
  --bg-prajamyam-brick: url("data:image/svg+xml,%3Csvg fill='%23e9c46a' fill-opacity='.13' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M24 0L48 24L24 48L0 24ZM24 1.6L46.4 24L24 46.4L1.6 24Z'/%3E%3Cpath fill-rule='evenodd' d='M24 4.2L43.8 24L24 43.8L4.2 24ZM24 5.2L42.8 24L24 42.8L5.2 24Z'/%3E%3Cg transform='translate(24 24)'%3E%3Cpath id='p' d='M0-14.5C3.6-11.2 4.4-6.6 0-2.9C-4.4-6.6-3.6-11.2 0-14.5ZM0-11.2C1.4-9.4 1.6-7.4 0-5.6C-1.6-7.4-1.4-9.4 0-11.2Z' fill-rule='evenodd'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cpath id='l' d='M0-9.6C1.5-8 1.5-6 0-4.6C-1.5-6-1.5-8 0-9.6Z' transform='rotate(45)'/%3E%3Cuse href='%23l' transform='rotate(90)'/%3E%3Cuse href='%23l' transform='rotate(180)'/%3E%3Cuse href='%23l' transform='rotate(270)'/%3E%3Ccircle r='2.1'/%3E%3C/g%3E%3Cg id='c'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='0' cy='-6' r='1.2'/%3E%3Ccircle cx='6' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='6' r='1.2'/%3E%3Ccircle cx='-6' cy='0' r='1.2'/%3E%3C/g%3E%3Cuse href='%23c' x='48'/%3E%3Cuse href='%23c' y='48'/%3E%3Cuse href='%23c' x='48' y='48'/%3E%3C/svg%3E");
}
/* ornaments:end */

:root {
  --brick: #9e2b25; --brick-dark: #6f1b17; --brick-soft: #f6e7e3; --lacquer: #2c0d0a; --lacquer-2: #4a1410;
  --gold: #c8962e; --gold-deep: #9a6b14; --gold-hi: #f3d38a; --gold-soft: #f7edd6;
  --gold-sheen: linear-gradient(100deg, #9a6b14 0%, #c8962e 30%, #f6dd9a 46%, #fff4cf 50%, #f6dd9a 54%, #c8962e 70%, #9a6b14 100%);
  --ink: #221b18; --muted: #6d625c; --line: #e6d8c4; --paper: #f8f1e5; --card: #fffdf9;
  --ready: #1b8a4b; --attention: #c98a00; --notready: #e05a12; --offline: #8a8580; --inuse: #1565c0; --sos: #d50000;
  --radius: 14px; --shadow: 0 1px 2px rgba(60, 30, 20, .06), 0 6px 20px rgba(60, 30, 20, .07);
  --head: 'Mitr', 'Sarabun', system-ui, sans-serif; --body: 'Sarabun', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper) var(--bg-prajamyam-paper) 0 0 / 56px 56px; }
body.full { background: var(--paper); }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 500; line-height: 1.3; margin: 0 0 .5em; }
a { color: var(--brick); }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header */
.top { position: sticky; top: 0; z-index: 1000; color: #fff; box-shadow: 0 3px 12px rgba(44,13,10,.28); padding-bottom: 13px;
  background: var(--bg-prajamyam-brick) 0 0 / 36px 36px, linear-gradient(180deg, var(--brick) 0%, var(--brick-dark) 100%); }
/* กรวยเชิงทองห้อยที่ขอบล่างแถบหัว มีแสงทองวิ่งผ่านเป็นระยะ */
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 13px; pointer-events: none;
  background: var(--gold-sheen) 0 0 / 300% 100%; animation: sheen 7s linear infinite;
  -webkit-mask: var(--orn-kruay) 0 0 / auto 100% repeat-x; mask: var(--orn-kruay) 0 0 / auto 100% repeat-x; }
@keyframes sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.top-in { display: flex; align-items: center; gap: 16px; padding: 8px 16px 6px; max-width: 1400px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--head); font-size: 20px; font-weight: 500; white-space: nowrap; }
.brand svg { width: 38px; height: 38px; flex: none; overflow: visible; }
.brand .beat-heart { transform-origin: 20px 21px; animation: lubdub 3.2s ease-in-out infinite; }
@keyframes lubdub { 0%, 30%, 100% { transform: scale(1); } 6% { transform: scale(1.14); } 12% { transform: scale(.98); } 18% { transform: scale(1.1); } }
.brand small { display: block; font-family: var(--body); font-size: 12px; opacity: .85; font-weight: 400; line-height: 1.1; }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 10px; white-space: nowrap; font-size: 15px; opacity: .92; }
.nav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.nav a[aria-current=page] { background: rgba(255,255,255,.14); opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold-hi); }
.nav a.ext::after { content: ' \2197'; font-size: 12px; opacity: .8; }
.call { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--sos); font-family: var(--head); font-weight: 500;
  border-radius: 999px; padding: 6px 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 5px rgba(243,211,138,.25); }
.call svg { width: 18px; height: 18px; }
.demo-bar { background: var(--gold-soft); color: #6b4a00; font-size: 13px; text-align: center; padding: 4px 16px; border-bottom: 1px solid #ecdcb3; }

/* ---------- generic */
.wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; position: relative; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 10px 16px; cursor: pointer; text-decoration: none; color: var(--ink); font-weight: 600; min-height: 44px; }
.btn:hover { border-color: #cdbfb1; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn-primary:hover { background: var(--brick-dark); border-color: var(--brick-dark); }
.btn-sos { background: var(--sos); border-color: var(--sos); color: #fff; }
.btn-gold { background: var(--gold-sheen) 100% 0 / 300% 100%; border-color: var(--gold-deep); color: var(--lacquer); transition: background-position .8s ease; }
.btn-gold:hover { background-position: 0 0; border-color: var(--gold-deep); }
.btn-block { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-ready { color: var(--ready); background: #e6f4ec; }
.s-attention { color: #8a5d00; background: #fdf3d6; }
.s-notready { color: #b2420b; background: #fde9dd; }
.s-offline { color: #5f5b57; background: #eeece9; }
.s-inuse { color: var(--inuse); background: #e3eefb; }
.s-sos { color: #fff; background: var(--sos); animation: blink 1s steps(2) infinite; }
.s-sos::before { background: #fff; }
@keyframes blink { 50% { opacity: .55; } }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 600; font-size: 15px; }
input[type=text], input[type=search], input[type=tel], input[type=password], select, textarea {
  width: 100%; border: 1px solid #d9cdc0; border-radius: 10px; padding: 10px 12px; background: #fff; min-height: 44px; }
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.kpi { padding: 16px 18px; border-top: 3px double var(--gold); }
.kpi b { display: block; font-family: var(--head); font-size: 34px; font-weight: 500; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: 14px; }
.kpi.k-ready b { color: var(--ready); } .kpi.k-attention b { color: #a87300; } .kpi.k-notready b { color: var(--notready); }
.kpi.k-offline b { color: var(--offline); } .kpi.k-inuse b { color: var(--inuse); } .kpi.k-sos b { color: var(--sos); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--head); font-weight: 500; font-size: 14px; color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #eee8e1; min-width: 120px; }
.bar i { display: block; height: 100%; }
.bar { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* เน็ตช้า/ประหยัดข้อมูล (kanok.js ใส่ .lite): หยุดลายที่ขยับวนตลอด แต่ไฟกระพริบ SOS ยังทำงาน */
.lite .top::after, .lite .brand .beat-heart, .lite .k-med { animation: none !important; }
.b-ready { background: var(--ready); } .b-attention { background: var(--attention); } .b-notready { background: var(--notready); }
.b-offline { background: var(--offline); } .b-inuse { background: var(--inuse); } .b-sos { background: var(--sos); }
.feed { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.feed li { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.feed time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.feed .new { animation: flash 2s ease-out; }
@keyframes flash { from { background: var(--gold-soft); } to { background: transparent; } }
.empty { color: var(--muted); padding: 16px 0; }
/* ---------- ท้ายหน้า: พื้นรักดำ กรวยเชิงทองชี้ขึ้น เงาปรางค์-เจดีย์ */
.foot { position: relative; overflow: hidden; color: #e9d9bf; font-size: 13px; padding: 34px 16px 28px; text-align: center; margin-top: 24px;
  background: var(--bg-prajamyam-brick) 0 0 / 44px 44px, linear-gradient(180deg, var(--lacquer-2), var(--lacquer)); }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 13px; transform: scaleY(-1); background: var(--gold);
  -webkit-mask: var(--orn-kruay) 0 0 / auto 100% repeat-x; mask: var(--orn-kruay) 0 0 / auto 100% repeat-x; }
.foot .k-sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; fill: var(--gold); opacity: .16; pointer-events: none; }
.foot p { position: relative; margin: 0 0 6px; }
.foot a { color: var(--gold-hi); }
.foot .brandline { font-family: var(--head); font-size: 17px; color: var(--gold-hi); }

/* ---------- map page */
body.full { display: flex; flex-direction: column; height: 100dvh; }
body.full > main { flex: 1; min-height: 0; }
.finder { display: grid; grid-template-columns: 400px 1fr; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "emg map" "panel map"; }
.finder > .emergency { grid-area: emg; border-right: 1px solid var(--line); padding: 14px 16px; }
.finder > #map { grid-area: map; }
.finder > .panel { grid-area: panel; min-height: 0; }
.panel { overflow: auto; background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.panel-sec { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.emergency { background: #fff4f2; border-bottom: 1px solid #f1d2cc; box-shadow: inset 0 3px 0 var(--sos); }
.btn-lg { min-height: 54px; font-size: 18px; font-family: var(--head); font-weight: 500; }
.map-wait { margin: 0; padding: 40px 16px; text-align: center; color: var(--muted); }
.near-card { margin-top: 10px; background: #fff; border: 2px solid var(--ready); border-radius: 14px; padding: 12px 14px; }
.near-card .nm { font-family: var(--head); font-size: 18px; line-height: 1.3; }
.near-card .walk { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.near-card .walk b { font-family: var(--head); font-size: 34px; color: var(--ready); line-height: 1; }
.near-card .more { font-size: 13px; color: var(--muted); margin-top: 8px; }
.emergency h1 { font-size: 20px; margin-bottom: 4px; color: var(--brick-dark); }
.emergency .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.steps { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.steps li { margin: 2px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filters button { border: 1px solid #d9cdc0; background: #fff; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 14px; min-height: 34px; }
.filters button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results { list-style: none; margin: 0; padding: 0; }
.results li { border-bottom: 1px solid var(--line); }
.results button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; width: 100%; padding: 12px 16px; cursor: pointer; }
.results button:hover, .results button:focus-visible { background: #fff; }
.results .nm { font-weight: 600; line-height: 1.35; }
.results .sub { font-size: 13px; color: var(--muted); }
.results .dist { text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; }
.results .dist b { display: block; font-size: 16px; color: var(--ink); }
.ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.ico svg { width: 20px; height: 20px; }
.ico.k-sos { border-radius: 8px; }
.ico.k-mobile { border-radius: 50%; }
#map { width: 100%; height: 100%; background: #e8e4dc; }
.count { font-size: 13px; color: var(--muted); }

/* markers */
.pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pin svg { width: 16px; height: 16px; }
.pin.k-sos { border-radius: 8px; width: 34px; height: 34px; }
.pin.k-sos svg { width: 19px; height: 19px; }
.pin.k-mobile { border-radius: 50% 50% 50% 4px; }
.bg-ready { background: var(--ready); } .bg-attention { background: var(--attention); } .bg-notready { background: var(--notready); }
.bg-offline { background: var(--offline); } .bg-inuse { background: var(--inuse); } .bg-sos { background: var(--sos); }
.pin.bg-sos, .pin.bg-inuse { animation: pulse 1.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(213,0,0,.55); } 100% { box-shadow: 0 0 0 16px rgba(213,0,0,0); } }
.me { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.25); }
.leaflet-popup-content { font-family: var(--body); font-size: 15px; margin: 14px 16px; min-width: 220px; }
.pop h3 { font-size: 17px; margin: 0 0 6px; }
.pop p { margin: 4px 0; }
.pop .acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pop .acts a { flex: 1; min-height: 38px; padding: 6px 10px; font-size: 14px; }
.leaflet-container .pop a.btn { color: var(--ink); }
.leaflet-container .pop a.btn-primary { color: #fff; }
.legend { background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.7; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- hero (campaign / station): พื้นอิฐแดงยามเย็น แสงทองหลังเจดีย์ ลายกนกมุม ดอกประจำยามหมุน (kanok.js วาดลายให้) */
.hero { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(ellipse 60% 70% at 62% 100%, rgba(246,190,96,.55), rgba(246,190,96,0) 70%),
    var(--bg-prajamyam-brick) 0 0 / 44px 44px, linear-gradient(160deg, var(--lacquer) 0%, var(--brick-dark) 45%, var(--brick) 80%, #b5562b 100%); }
.hero .wrap { position: relative; padding: 64px 28px 150px; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; transform: scaleY(-1); background: var(--gold);
  -webkit-mask: var(--orn-kruay) 0 0 / auto 100% repeat-x; mask: var(--orn-kruay) 0 0 / auto 100% repeat-x; pointer-events: none; }
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: var(--gold-hi); }
.hero-art .ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke-dashoffset 1.8s ease-in-out; }
.hero-art .fl { fill: currentColor; fill-rule: evenodd; fill-opacity: .2; transition: fill-opacity 1s ease .9s; }
.hero-art .dot { fill-opacity: .9; }
.hero-art .k-corner { position: absolute; top: 10px; width: min(300px, 38vw); height: auto; opacity: .9; }
.hero-art .k-l { left: 10px; }
.hero-art .k-r { right: 10px; transform: scaleX(-1); }
.hero-art .k-med { position: absolute; right: 7%; top: 50%; width: 300px; height: 300px; margin-top: -190px; opacity: .3; animation: spin 160s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-art .k-sky { position: absolute; left: 0; bottom: 0; width: 100%; height: 132px; fill: var(--lacquer); opacity: .82; transition: opacity 1s, transform 1.1s ease-out; }
.hero-art.k-wait .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-art.k-wait .fl { fill-opacity: 0; }
.hero-art.k-wait .k-sky { opacity: 0; transform: translateY(36px); }
.hero-art.k-anime .ln, .hero-art.k-anime .fl, .hero-art.k-anime .k-sky { transition: none; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); margin-bottom: 8px; }
.hero p { font-size: 18px; max-width: 720px; opacity: .95; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-ghost { background: rgba(44,13,10,.25); border-color: var(--gold-hi); color: #fff; }
.btn-ghost:hover { background: rgba(44,13,10,.45); border-color: #fff4cf; }
.hero .kicker { font-family: var(--head); color: var(--gold-hi); letter-spacing: .02em; }
.hero h1 { text-shadow: 0 2px 18px rgba(44,13,10,.5); }
/* หัวข้อมีเส้นคั่นลายทองใต้หัวข้อ (kanok.js ใส่ .orn-h และวาดออกจากกลางเมื่อเลื่อนมาถึง) */
.orn-h::after { content: ''; display: block; width: 150px; height: 17px; margin-top: 6px; background: var(--gold);
  -webkit-mask: var(--orn-rule) 0 0 / 100% 100% no-repeat; mask: var(--orn-rule) 0 0 / 100% 100% no-repeat;
  transform-origin: center; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s; }
.hero .orn-h::after { background: var(--gold-hi); width: 190px; height: 21px; }
.card h2.orn-h::after { width: 120px; height: 14px; }
.orn-js .orn-h:not(.in)::after { transform: scaleX(.15); opacity: 0; }
.pillar { border-top: 3px double var(--gold); }
.pillar::after { content: ''; position: absolute; top: 6px; right: 6px; width: 46px; height: 46px; background: var(--gold); opacity: .85; transform: scaleX(-1);
  -webkit-mask: var(--orn-corner) 0 0 / 100% 100% no-repeat; mask: var(--orn-corner) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.pillar h3 { font-size: 20px; }
.big-num { font-family: var(--head); font-size: 44px; color: var(--brick); line-height: 1; }
.price-bar { position: relative; height: 14px; background: #eee6dc; border-radius: 8px; overflow: hidden; margin: 8px 0 4px; }
.price-bar i { position: absolute; inset: 0 auto 0 0; transform-origin: left center; background: linear-gradient(90deg, var(--gold), var(--brick)); border-radius: 8px; }
.ok { color: var(--ready); font-weight: 700; }
.metronome { display: grid; place-items: center; gap: 12px; text-align: center; }
.beat { width: 160px; height: 160px; border-radius: 50%; border: 0; background: var(--brick); color: #fff; font-family: var(--head); font-size: 22px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(158,43,37,.35); transition: transform .06s; touch-action: manipulation; }
.beat.on { transform: scale(.92); background: var(--sos); }
.lb li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lb { list-style: none; padding: 0; margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px double var(--gold); }
.timeline li { padding: 0 0 18px 20px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -12px; top: 4px; width: 21px; height: 21px; background: var(--brick);
  -webkit-mask: var(--orn-dok) 0 0 / 100% 100%; mask: var(--orn-dok) 0 0 / 100% 100%; }
.notice { background: var(--gold-soft); border: 1px solid #ecdcb3; border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.ok-box { background: #e6f4ec; border: 1px solid #bfe3cd; border-radius: 12px; padding: 14px; }
.err-box { background: #fde9dd; border: 1px solid #f5c7ab; border-radius: 12px; padding: 14px; }
.mini-map { height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.track-wrap { display: grid; grid-template-columns: 1fr 380px; }
.track-wrap .panel { border-right: 0; border-left: 1px solid var(--line); order: 2; }

@media (max-width: 900px) {
  .top-in { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .nav { order: 3; width: 100%; margin: 0 -4px; }
  .call { margin-left: auto; }
  body.full { display: block; height: auto; }
  .finder { grid-template-columns: 1fr; grid-template-rows: auto 46dvh auto; grid-template-areas: "emg" "map" "panel"; }
  .finder > .emergency { border-right: 0; }
  .finder #map { height: 46dvh; }
  .track-wrap { grid-template-columns: 1fr; grid-template-rows: 52dvh auto; height: auto; }
  .track-wrap #map { height: 52dvh; order: -1; }
  .panel { border: 0; overflow: visible; }
  .track-wrap .panel { order: 2; border: 0; }
  .hero .wrap { padding: 66px 18px 112px; }
  .hero-art .k-med { display: none; }
  .hero-art .k-sky { height: 92px; }
  .hero-art .k-corner { width: 128px; top: 6px; }
  .hero-art .k-l { left: 4px; } .hero-art .k-r { right: 4px; }
  .top { padding-bottom: 10px; } .top::after { height: 10px; }
  .legend { font-size: 11px; line-height: 1.45; padding: 5px 7px; }
  .legend > div:last-child { display: none; }
}