/* ======================================================
   ELECTIVE GUIDE — Yoga-Inspired Design System
   Palette: warm sand · sage green · terracotta · dusk pink
   ====================================================== */

/* ---------- RESET & TOKENS ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sand:       #f5efe6;
  --sand-mid:   #ede4d7;
  --sand-dark:  #d8cbbf;
  --off-white:  #fdfaf6;
  --sage:       #7d9b76;
  --sage-light: #a8c4a0;
  --sage-dark:  #4f7047;
  --terra:      #c4714b;
  --terra-light:#e0977a;
  /* สีเข้มขึ้นสำหรับ "ตัวอักษรขาวบนพื้น terracotta" และ "ตัวอักษร terracotta บนพื้นอ่อน"
     — สีเดิมผ่าน AA ไม่พอ (3.61:1) จึงแยกโทนสำหรับข้อความออกจากโทนตกแต่ง */
  --terra-deep: #a85b36;   /* ขาวบนสีนี้ = 4.96:1 */
  --terra-ink:  #8f4527;   /* สีนี้บนพื้นอ่อน = 6.7:1 */
  --dusk:       #c9849a;
  --dusk-light: #e8b4c6;
  --charcoal:   #2c2824;
  --warm-gray:  #6b6157;
  --border:     rgba(100,80,60,0.12);
  --shadow:     0 2px 20px rgba(44,40,36,0.08);
  --shadow-lg:  0 8px 40px rgba(44,40,36,0.13);

  --font-head:  'Lora', 'Noto Serif Thai', Georgia, serif;
  --font-body:  'Inter', 'Noto Sans Thai', system-ui, sans-serif;

  --radius:     14px;
  --radius-sm:  8px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--charcoal);
  line-height: 1.75;
  font-size: 15px;
  /* Linen texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ฟอร์มคอนโทรล inherits ฟอนต์เสมอ — เดิม <button> ใช้ Arial ทำให้ข้อความไทย
   ในชิปตัวกรองถูกวาดด้วยฟอนต์ระบบ (Tahoma) ไม่ใช่ Noto Sans Thai */
button, input, select, textarea { font-family: inherit; }
::placeholder { color: var(--warm-gray); opacity: 1; }

/* ============================
   HERO
   ============================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, #2c2824 0%, #3d3226 40%, #4a3d2e 70%, #5a4a37 100%);
}

.hero-breath-bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(197,149,100,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 80% 30%, rgba(125,155,118,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 60% 80%, rgba(201,132,154,0.15) 0%, transparent 50%);
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.85; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(44,40,36,0.3) 0%, rgba(44,40,36,0.1) 60%, rgba(44,40,36,0.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 700px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,239,230,0.7);
  margin-bottom: 1.2rem;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--sand);
  margin-bottom: 1.2rem;
}

.hero-title em {
  /* Thai has no italic cut: leaving font-style:italic makes the browser
     synthesise a slanted (oblique) Thai face. Emphasis is by colour. */
  font-style: normal;
  color: var(--terra-light);
}

.hero-cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  background: var(--terra-deep);
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 4px 20px rgba(196,113,75,0.4);
}
.btn-primary:hover {
  background: var(--terra-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(196,113,75,0.5);
}

.btn-ghost {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border: 1.5px solid rgba(245,239,230,0.4);
  color: var(--sand);
  border-radius: 50px;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, background 0.3s;
}
.btn-ghost:hover {
  border-color: rgba(245,239,230,0.8);
  background: rgba(245,239,230,0.1);
}

.hero-cta-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  color: rgba(245,239,230,0.6);
  font-size: 0.82rem;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s;
  /* เป้าแตะขั้นต่ำ: เดิมสูงแค่ 23px กดบนมือถือยาก */
  min-height: 34px;
  padding: 0.35rem 0.15rem;
}
.btn-link:hover {
  color: rgba(245,239,230,0.95);
  text-decoration: underline;
}

.btn-link-divider {
  color: rgba(245,239,230,0.3);
  font-size: 0.85rem;
  user-select: none;
}


.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-scroll-hint span {
  display: block;
  width: 1.5px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(245,239,230,0.5), transparent);
  margin: auto;
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============================
   STICKY NAV
   ============================ */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,250,246,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(44,40,36,0.06);
  transition: background 0.3s;
}
.nav-inner {
  max-width: 1200px;
  margin: auto;
  padding: 0.85rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: 0.02em;
}
.nav-links {
  display: flex;
  gap: 1.8rem;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;          /* เป้าแตะขั้นต่ำ (เดิมสูงแค่ 23px) */
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--warm-gray);
  position: relative;
  transition: color 0.2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--terra);
  transition: width 0.3s;
}
.nav-links a:hover { color: var(--charcoal); }
.nav-links a:hover::after { width: 100%; }
.nav-links .nav-github { display: flex; align-items: center; opacity: 0.8; }
.nav-links .nav-github:hover { opacity: 1; }
.nav-links .nav-github::after { display: none; }

/* ── เนวิเกชันลอยบน hero ─────────────────────────────────────────
   เดิม nav อยู่ในลำดับถัดจาก hero (สูง 100vh) ทำให้ "จอแรกไม่มีเมนูเลย"
   ทั้งคอม/แท็บเล็ต/มือถือ · เปิดใช้เฉพาะเมื่อ JS ทำงาน (html.js)
   เพื่อให้กรณีไม่มี JS ยังเป็นแถบทีบอ่านได้ตามเดิม */
html.js .sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.js .sticky-nav .nav-logo { color: var(--sand); }
html.js .sticky-nav .nav-links a,
html.js .sticky-nav .nav-github { color: rgba(245, 239, 230, 0.86); }
html.js .sticky-nav .nav-links a:hover { color: var(--sand); }
html.js .sticky-nav .nav-links a.active { color: var(--terra-light); }
html.js .sticky-nav.eg-scrolled {
  background: rgba(253, 250, 246, 0.94);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px -16px rgba(44, 40, 36, 0.5);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
html.js .sticky-nav.eg-scrolled .nav-logo { color: var(--charcoal); }
html.js .sticky-nav.eg-scrolled .nav-links a,
html.js .sticky-nav.eg-scrolled .nav-github { color: var(--warm-gray); }
html.js .sticky-nav.eg-scrolled .nav-links a:hover,
html.js .sticky-nav.eg-scrolled .nav-links a.active { color: var(--terra); }

/* nav เป็น fixed แล้ว → anchor ต้องเว้นที่ให้แถบเมนู */
section[id], [id="institutions"] { scroll-margin-top: 84px; }

/* ============================
   SEARCH SECTION
   ============================ */
.search-section {
  padding: 4rem 2rem 2rem;
}
.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  /* เดิมสืบทอด line-height 1.75 จาก body ทำให้หัวข้อทุกภาคกินที่เกินจำเป็น */
  line-height: 1.22;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}
.section-sub {
  color: var(--warm-gray);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.search-wrapper {
  position: relative;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}
.search-input {
  width: 100%;
  padding: 1rem 3rem 1rem 1.5rem;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.search-input:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(125,155,118,0.12);
}
.search-clear {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--warm-gray);
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.2s;
}
.search-clear.visible { opacity: 1; pointer-events: auto; }
.search-clear:hover { background: rgba(100,80,60,0.08); }

.filter-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}
.filter-btn {
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
  color: var(--warm-gray);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}

#searchResults {
  display: none;
}
#searchResults.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

/* ============================
   STATS
   ============================ */
.stats-section {
  padding: 2rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
}
.stat-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--terra);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--warm-gray);
  font-weight: 500;
}

/* ============================
   INSTITUTION SECTIONS
   ============================ */
.inst-section {
  padding: 4rem 2rem;
}
.bg-sand { background: var(--sand-mid); }

.section-header {
  margin-bottom: 2.5rem;
}
.section-badge {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.6rem;
}

/* ============================
   CARDS GRID
   ============================ */
.cards-grid {
  display: grid;
  /* ขั้นต่ำ 280px (เดิม 320) — จอ 900px ได้ 3 คอลัมน์, จอเต็ม 1200px ได้ 4 คอลัมน์
     min(100%, 280px) กันไม่ให้การ์ดล้นจอเล็กระหว่างที่เบราว์เซอร์คำนวณ */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 1.5rem;
  /* การ์ดเป็น grid item ที่ min-width: auto ตามค่าเริ่มต้น → ถ้าเนื้อหาข้างใน
     มี min-content กว้าง การ์ดจะไม่ยอมแคบกว่า ทำให้ได้คอลัมน์น้อยกว่าที่ควร */
  /* align-items: start + min-height ต่อแถวที่คำนวณใน app.js (equalizeCardRows)
     → ตอนพับอยู่การ์ดในแถวเดียวกันสูงเท่ากัน แต่พอใบหนึ่งกางรายละเอียด
       ใบข้าง ๆ ไม่ถูกถ่างตามจนเหลือที่ว่างท้ายการ์ด (ข้อเสียของ align-items: stretch) */
  align-items: start;
}
/* ให้การ์ดยอมแคบลงได้จริงตามคอลัมน์ที่คำนวณไว้ */
.cards-grid > .card,
#searchResults.active > .card { min-width: 0; }

.card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.card-premium {
  grid-column: 1 / -1;            /* การ์ดเดียวในหมวดนี้: ให้กว้างเต็มแถว อ่านสบาย */
  border-color: rgba(196, 113, 75, 0.35);
  background: linear-gradient(150deg, var(--off-white) 45%, rgba(196, 113, 75, 0.07));
  box-shadow: 0 6px 30px rgba(196, 113, 75, 0.13);
}
.card-premium:hover { box-shadow: 0 10px 38px rgba(196, 113, 75, 0.18); }
.card-premium .card-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 2.5rem;
  align-content: start;
}
.card-premium .card-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  align-items: start;
}
.card-premium .card-detail .detail-group { min-width: 0; }
@media (max-width: 900px) {
  .card-premium .card-body,
  .card-premium .card-detail { grid-template-columns: 1fr; gap: 0.45rem; }
  .card-premium .card-detail .detail-group + .detail-group { margin-top: 0.9rem; }
}

.card-header {
  padding: 1.2rem 1.4rem 0.8rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid var(--border);
  /* การ์ดแคบ (250px): ถ้าชื่อกับ badge อยู่บรรทัดเดียวกันไม่พอ ให้ badge ตกลงบรรทัดใหม่
     ดีกว่าดันหัวการ์ดให้ล้นออกนอกการ์ด */
  flex-wrap: wrap;
}
.card-title {
  /* ไม่ตั้ง min-width: 0 — ถ้าชื่อกับ badge อยู่บรรทัดเดียวกันไม่พอ
     ให้ flex-wrap พา badge ลงบรรทัดใหม่ ดีกว่าบีบชื่อจนแตกทุกคำ */
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.35;
  flex: 1;
}

/* Code badge */
.code {
  display: inline-block;
  background: var(--sage-dark);
  color: #fff;
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-dormitory {
  background: rgba(125,155,118,0.15);
  color: var(--sage-dark);
  border: 1px solid rgba(125,155,118,0.3);
}
.badge-cpird {
  background: rgba(44,40,36,0.06);
  color: var(--charcoal);
  border: 1px solid rgba(44,40,36,0.16);
}
.badge-loc {
  background: rgba(196,113,75,0.1);
  color: var(--terra-ink);
  border: 1px solid rgba(196,113,75,0.2);
  font-size: 0.65rem;
  /* badge สถานที่บางอันยาว (เช่น «รัตนวิทยาพัฒน์ ชั้น 15B ห้อง 1512»)
     การ์ดแคบ 250px จึงต้องตัดบรรทัดได้ ไม่ดันหัวการ์ดให้ล้น */
  white-space: normal;
  flex-shrink: 1;
  min-width: 0;
  text-align: right;
  line-height: 1.35;
}
.badge-special {
  background: var(--terra-deep);
  color: #fff;
  box-shadow: 0 2px 10px rgba(196, 113, 75, 0.3);
}

/* ── ป้าย กทม. ที่กดได้ (ทางเข้าโหมด «เจาะลึก กทม.») ────────── */
.plate-label-cta { cursor: pointer; }
.plate-label-cta .plate-label { transition: fill 0.2s ease; }
.plate-label-cta:hover .plate-label,
.plate-label-cta:focus-visible .plate-label { fill: var(--terra-ink); }
.plate-label-cta:focus-visible { outline: none; }
.plate-label-bg.is-hit { display: block; fill: transparent; pointer-events: all; }
.map-svg.bkk-exploded .plate-label-cta { pointer-events: none; }

/* ── ไอคอน SVG (แทน emoji) ───────────────────────────────── */
.eg-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: 0 0 auto; }
/* คอนเทนเนอร์แบบ flex ตัดช่องว่างหัวข้อความทิ้ง → ต้องเว้นระยะด้วย gap ไม่ใช่ spacebar */
.btn-link { gap: 0.4em; }
.map-layer-btn, .map-compare-btn { gap: 0.35em; }
.icon > .eg-icon { width: 1.15em; height: 1.15em; vertical-align: -0.16em; }
.section-badge > .eg-icon { width: 1em; height: 1em; }
.map-search-icon > .eg-icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.map-layer-btn > .eg-icon,
.map-bkk-btn > .eg-icon,
.map-compare-btn > .eg-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.map-home-label > .eg-icon { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }
.btn-link > .eg-icon { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ── เมนู "เพิ่มเติม" บนมือถือ (แทนการเลื่อนแนวนอนที่ซ่อน 3/7 ลิงก์) ── */
.nav-more {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 0.2rem;
  border: 0; background: none; color: inherit; cursor: pointer; border-radius: 10px;
}
.nav-more:hover { background: rgba(245, 239, 230, 0.12); }
.nav-more-menu {
  position: absolute; top: calc(100% - 4px);
  right: max(1rem, env(safe-area-inset-right, 0px) + 0.6rem);
  min-width: 200px; padding: 0.45rem;
  background: var(--off-white); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 120;
}
.nav-more-menu a {
  display: block; padding: 0.6rem 0.8rem; border-radius: 10px;
  color: var(--charcoal); text-decoration: none; font-size: 0.95rem; line-height: 1.35;
}
.nav-more-menu a:hover { background: var(--sand); }
@media (max-width: 760px) {
  .nav-links { overflow: visible; -webkit-mask-image: none; mask-image: none; gap: 1.15rem; }
  .nav-links > a:not(.nav-primary) { display: none; }
  .nav-more { display: inline-flex; }
  html.js .sticky-nav.eg-scrolled .nav-more:hover { background: rgba(44, 40, 36, 0.06); }
}

/* ── โครงร่างแผนที่ระหว่างรอสคริปต์ (lazy load) ──────────────── */
html.js #elective-map { position: relative; min-height: 220px; }
html.js .map-fallback { display: none; }
.map-skeleton {
  width: 100%; aspect-ratio: 807 / 1483; border-radius: 10px;
  background: linear-gradient(100deg, #f2eade 22%, #fbf7f0 42%, #f2eade 62%);
  background-size: 240% 100%;
  animation: egShimmer 1.5s linear infinite;
}
@keyframes egShimmer { to { background-position: -140% 0; } }
.map-error {
  display: block !important;
  font-size: 0.9rem; color: var(--warm-gray); padding: 2.5rem 1rem; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .map-skeleton { animation: none; } }

.card-body {
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

/* ใช้ block + ไอคอนลอย แทน flex: ข้อความไหลเป็นเนื้อเดียว ตัดบรรทัดตรงตัวคั่นเอง
   (ถ้าใช้ flex หลายเบอร์จะดันล้นการ์ด หรือไอคอนหลงไปอยู่บรรทัดเดี่ยว) */
.contact-row {
  display: block;
  position: relative;
  font-size: 0.875rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.contact-row.has-icon { padding-left: 1.75rem; }
.contact-row .icon {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
/* การ์ดแคบลง (250-320px) — อีเมล/ชื่อยาวต้องตัดบรรทัดได้ ไม่ดันการ์ดให้ล้น */
.contact-row > * { min-width: 0; }
.contact-row span,
.contact-row a { overflow-wrap: break-word; }
/* เบอร์โทรไม่ให้ขาดกลางเบอร์ (ขีดกลางในเบอร์เป็นจุดตัดบรรทัด) */
.contact-row a[href^="tel:"] { white-space: nowrap; }
/* บรรทัดสุดท้ายไม่ให้เหลือคำโดด */
p, li, .contact-row, .card-title, .tip-card p, .ssc-link-title, .ssc-link-meta,
.stat-label, .results-count, .filter-group-label { text-wrap: pretty; }
h1, h2, h3, .section-title, .ssc-title, .tip-card h3 { text-wrap: balance; }

/* การ์ดที่แคบกว่า ~300px ลดฟอนต์ลงนิดเดียว (14 → 13.1px) ให้อีเมลยาว ๆ
   อยู่บรรทัดเดียวได้ ไม่ต้องตัดกลางคำ (เบราว์เซอร์ที่ไม่รองรับ container query
   จะไม่ลดฟอนต์ ก็ยังใช้งานได้ปกติ) */
.card { container-type: inline-size; }
@container (max-width: 300px) {
  .contact-row { font-size: 0.78rem; }
  .badge-loc { font-size: 0.62rem; }
}

.contact-row a {
  color: var(--sage-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.contact-row a:hover { color: var(--terra); text-decoration: underline; }

/* Card expandable detail */
.card-detail {
  padding: 1rem 1.4rem;
  background: rgba(125,155,118,0.04);
  border-top: 1px solid var(--border);
  font-size: 0.855rem;
}
.card-detail h4 {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--warm-gray);
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}
.card-detail h4:first-child { margin-top: 0; }
.card-detail p { color: var(--charcoal); margin-bottom: 0.5rem; }
.card-detail ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.card-detail ul li {
  padding-left: 1.1em;
  position: relative;
  color: var(--charcoal);
  line-height: 1.55;
}
.card-detail ul li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: bold;
}
.sub-list li { padding-left: 0.5em; }
.sub-list li::before { content: '–'; color: var(--sand-dark); }

.detail-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--sage-dark);
  font-size: 0.82rem;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed var(--sage-light);
  transition: color 0.2s;
}
.detail-link:hover { color: var(--terra); border-color: var(--terra); }

.note {
  font-size: 0.75rem;
  color: var(--terra);
  font-style: italic;
  display: inline-block;
  margin-left: 0.3em;
}

.special-box {
  margin-top: 0.8rem;
  padding: 0.8rem;
  background: rgba(196,113,75,0.07);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--terra-light);
}
.special-box h4 {
  color: var(--terra) !important;
}

/* Mini table inside cards */
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0.5rem 0;
}
.mini-table th, .mini-table td {
  padding: 0.35rem 0.6rem;
  text-align: left;
  border: 1px solid var(--border);
}
.mini-table th {
  background: var(--sage);
  color: #fff;
  font-weight: 600;
}
.mini-table tr:nth-child(even) td { background: var(--sand); }

/* ============================
   TIPS SECTION
   ============================ */
.tips-section {
  padding: 5rem 2rem;
  background: linear-gradient(160deg, var(--charcoal) 0%, #3d3226 100%);
  position: relative;
  overflow: hidden;
}
.tips-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(125,155,118,0.15) 0%, transparent 60%);
}
.tips-section .section-title { color: var(--sand); }
.tips-section .section-badge { color: var(--dusk-light); }
.tips-section .section-header { position: relative; }

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  position: relative;
}
.tip-card {
  background: rgba(253,250,246,0.07);
  border: 1px solid rgba(245,239,230,0.12);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: background 0.25s, transform 0.25s;
  backdrop-filter: blur(6px);
}
.tip-card:hover {
  background: rgba(253,250,246,0.12);
  transform: translateY(-4px);
}
.tip-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}
.tip-card h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 0.5rem;
}
.tip-card p {
  font-size: 0.875rem;
  color: rgba(245,239,230,0.7);
  line-height: 1.7;
}

/* ============================
   FOOTER
   ============================ */
.footer {
  background: var(--charcoal);
  padding: 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(245,239,230,0.08);
}
.footer-title {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--sand);
  margin-bottom: 0.4rem;
}
.footer-sub {
  font-size: 0.8rem;
  color: rgba(245,239,230,0.45);
}

/* ============================
   FADE-UP ANIMATION
   ============================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.2,0.8,0.3,1), transform 0.65s cubic-bezier(0.2,0.8,0.3,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── แถวเปิด/ปิดรายละเอียด: ทำเป็น footer ของการ์ด เพื่อให้ตำแหน่งนิ่งและกดง่าย ── */
.expand-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--border);
  background: rgba(125, 155, 118, 0.06);
  color: var(--sage-dark);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
}
.card:hover .expand-hint { background: rgba(125, 155, 118, 0.14); }
.card.expanded .expand-hint { background: transparent; border-top-color: transparent; }

/* รายละเอียดที่ปิดอยู่ต้องไม่เหลือ padding ค้าง (ของเดิมเหลือ 32px ทำให้เกิดช่องว่าง) */
.card-detail {
  transition: max-height 0.4s ease, opacity 0.4s ease,
              padding-top 0.4s ease, padding-bottom 0.4s ease, border-color 0.4s ease;
}
.card:not(.expanded) .card-detail {
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}

/* Search highlight */
.highlight {
  background: rgba(196,113,75,0.2);
  border-radius: 3px;
  padding: 0 1px;
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
  .nav-inner { padding: 0.7rem 1rem; gap: 0.75rem; }
  .nav-logo { font-size: 0.95rem; white-space: nowrap; }
  .nav-links {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 0.82rem; white-space: nowrap; }
  /* การ์ด/ทิปส์ ปล่อยให้ auto-fill จัดคอลัมน์เอง (เดิมบังคับ 1 คอลัมน์ถึง 768px
     ทำให้การ์ดกว้าง 620-700px บนจอแนวนอนเตี้ย ๆ) */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-row { gap: 0.4rem; }
  .filter-btn { font-size: 0.78rem; padding: 0.55rem 0.9rem; min-height: 40px; }
  .hero-title { font-size: 2.5rem; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .hero-cta-row { flex-direction: column; align-items: center; }
  .inst-section { padding: 2.5rem 1rem; }
}

/* ============================
   SCROLLBAR
   ============================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sand-mid); }
::-webkit-scrollbar-thumb { background: var(--sage-light); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--sage); }

/* ============================
   SEARCH / FILTER RESULTS PANEL
   ============================ */
[hidden] { display: none !important; }

#searchResults.active { align-items: start; }

/* Result cards have their own entrance — they are clones, so they never
   run through the scroll-reveal observer. */
.result-clone { animation: resultIn 0.35s cubic-bezier(0.2,0.8,0.3,1) both; }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.results-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.results-count {
  font-size: 0.9rem;
  color: var(--warm-gray);
}
.results-count strong { color: var(--terra); font-size: 1.05rem; }
.results-reset {
  padding: 0.45rem 1rem;
  min-height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: var(--off-white);
  color: var(--warm-gray);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.results-reset:hover { border-color: var(--terra); color: var(--terra); }
.results-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--warm-gray);
  font-size: 0.9rem;
  padding: 1rem 1rem 2rem;
}

/* ============================
   BACK TO TOP
   ============================ */
.to-top {
  position: fixed;
  /* เผื่อ safe area ของมือถือ (แถบ home indicator / มุมโค้งจอ) ไม่ให้ปุ่มไปชิดขอบจอ */
  right: max(1.25rem, calc(env(safe-area-inset-right, 0px) + 0.9rem));
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.9rem));
  z-index: 90;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--off-white);
  color: var(--sage-dark);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s;
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--sage); color: #fff; border-color: var(--sage); }

/* ============================
   KEYBOARD FOCUS
   ============================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.card:focus-visible { outline-offset: 0; }

/* ============================
   REDUCED MOTION
   ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .hero-breath-bg, .hero-scroll-hint span { animation: none; }
}


/* ============================
   SSC — รายวิชาเลือก « นอกคณะ »
   ============================ */
.ssc-section {
  padding: 4.5rem 2rem;
  background:
    radial-gradient(ellipse 55% 70% at 12% 0%, rgba(125, 155, 118, 0.10), transparent 62%),
    radial-gradient(ellipse 45% 60% at 92% 100%, rgba(196, 113, 75, 0.07), transparent 60%),
    var(--sand);
}
.ssc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.4rem;
  align-items: start;
}
/* การ์ด SSC ในแถวเดียวกันสูงเท่ากัน (min-height จาก app.js) — ให้รายการลิงก์
   เป็นตัวดูดช่องว่างที่เหลือ การ์ด «แบบฟอร์มที่ใช้» 2 ลิงก์จึงสูงเท่ากับการ์ดกำหนดการ */
.ssc-card { display: flex; flex-direction: column; }
.ssc-links { flex: 1; display: flex; flex-direction: column; }
.ssc-links li { display: flex; }
.ssc-links li > a { flex: 1; justify-content: center; }


.ssc-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--shadow);
}
.ssc-card--primary {
  border-color: rgba(125, 155, 118, 0.5);
  box-shadow: 0 6px 28px rgba(79, 112, 71, 0.13);
}
.ssc-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark);
  background: rgba(125, 155, 118, 0.14);
  border-radius: 50px;
  padding: 0.22rem 0.65rem;
  margin-bottom: 0.7rem;
}
.ssc-title {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.4;
}
.ssc-desc {
  font-size: 0.83rem;
  color: var(--warm-gray);
  line-height: 1.65;
  margin: 0.3rem 0 0.9rem;
}

.ssc-links { list-style: none; margin: 0; padding: 0; }
.ssc-links li + li { border-top: 1px solid var(--border); }
.ssc-links a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1.5rem 0.7rem 0;
  text-decoration: none;
  color: var(--charcoal);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 10px;
  transition: color 0.2s;
}
/* ลูกศร «เปิดที่อื่น» — เดิมปักไว้มุมขวาบนของแถวโดยใช้ top ตายตัว
   ทำให้ห่างจากข้อความ ~25px และตัวอักษรมีขนาดจริงแค่ ~9px สีจาง ดูเหมือนเศษหมึก
   → ย้ายไปต่อท้ายชื่อเรื่อง (ไหลตามข้อความ) ใหญ่ขึ้นและใช้สีที่อ่านออก */
.ssc-links a::after { content: none; }
.ssc-link-title::after {
  /* ใช้ non-breaking space นำหน้า เพื่อไม่ให้ลูกศรหลุดไปอยู่บรรทัดใหม่คนเดียว */
  content: ' ↗';
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1;
  color: var(--sage-dark);
  transition: transform 0.2s, color 0.2s;
}
.ssc-links a:hover { color: var(--terra); }
.ssc-links a:hover .ssc-link-title::after { color: var(--terra); transform: translate(2px, -2px); }
/* ให้ชื่อเรื่องกินความกว้างเต็ม (เดิมเว้นที่ให้ลูกศรที่ปักมุม) */
.ssc-links a { padding-right: 0; }
.ssc-link-meta {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--warm-gray);
  line-height: 1.5;
}
.ssc-links a.is-internal::after { content: '↓'; }

.ssc-sched { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.ssc-sched li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}
.ssc-sched li:first-child { border-top: none; }
.ssc-sched .lbl { color: var(--charcoal); font-weight: 500; }
.ssc-sched .date { color: var(--warm-gray); white-space: nowrap; font-weight: 500; }
/* «ยังไม่ประกาศ» เดิมใช้ sand-dark (contrast 1.5:1 — อ่านยากและดูเหมือนข้อมูลพัง)
   ใช้สีเดียวกับวันที่จริง (5.8:1) แล้วแยกด้วยน้ำหนักตัวอักษรแทน */
.ssc-sched .date.is-empty { color: var(--warm-gray); font-weight: 400; }


.ssc-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--charcoal);
}
.ssc-contact strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sage-dark);
  margin-bottom: 0.1rem;
}
.ssc-contact a { color: var(--sage-dark); text-decoration: none; font-weight: 500; }
.ssc-contact a:hover { color: var(--terra); text-decoration: underline; }
.ssc-contact-unit {
  font-size: 0.74rem;
  color: var(--warm-gray);
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
}

@media (max-width: 768px) {
  .ssc-section { padding: 3rem 1rem; }
  .ssc-card { padding: 1.25rem 1.2rem 1.1rem; }
  .ssc-status-block { padding: 1.2rem 1.2rem; }
}

@media (max-width: 480px) {
  .ssc-status { font-size: 0.84rem; padding: 0.5rem 0.25rem; }
  .ssc-status-row { gap: 0.45rem; }
  .ssc-cta { padding: 1.15rem 1.2rem; gap: 0.75rem; }
  .ssc-cta-title { font-size: 1.02rem; }
}


/* ── 2 ทางที่นิสิตใช้บ่อยที่สุด: ยื่นความจำนง + เช็คสถานะ ── */
.ssc-actions {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .ssc-actions { grid-template-columns: 1.12fr 1fr; }
}

.ssc-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--terra);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(196, 113, 75, 0.32);
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
}
.ssc-cta:hover {
  background: var(--terra-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(196, 113, 75, 0.42);
}
.ssc-cta:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
.ssc-cta-icon { font-size: 1.7rem; line-height: 1; }
.ssc-cta-text { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.ssc-cta-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}
.ssc-cta-meta { font-size: 0.78rem; color: rgba(255, 255, 255, 0.88); line-height: 1.5; }
/* ลูกศรบนการ์ด CTA — เดิมจาง (opacity .9) มองไม่ออกว่าเป็นลูกศร */
.ssc-cta-arrow { font-size: 1.5rem; line-height: 1; opacity: 1; font-weight: 600; transition: transform 0.2s; }
.ssc-cta:hover .ssc-cta-arrow { transform: translate(3px, -3px); }

.ssc-status-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--off-white);
  border: 1px solid rgba(125, 155, 118, 0.4);
  border-radius: var(--radius);
  box-shadow: 0 6px 28px rgba(79, 112, 71, 0.12);
}
.ssc-status-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sage-dark);
  letter-spacing: 0.01em;
}
.ssc-status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.ssc-status {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--sage-light);
  border-radius: 12px;
  background: rgba(125, 155, 118, 0.09);
  color: var(--sage-dark);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.ssc-status:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
  transform: translateY(-2px);
}
.ssc-status-note { font-size: 0.76rem; line-height: 1.65; color: var(--warm-gray); }
.ssc-status-note strong { color: var(--charcoal); }
.ssc-status-note a {
  color: var(--terra);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.ssc-status-note a:hover { color: var(--terra-light); }

.ssc-stamp {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--warm-gray);
}
.ssc-stamp a { color: var(--sage-dark); text-decoration: none; border-bottom: 1px dashed var(--sage-light); }
.ssc-stamp a:hover { color: var(--terra); }


/* ── การ์ดแบบฟอร์มที่ใช้บ่อย / การ์ดกว้าง ── */
.ssc-links--forms li + li { border-top: none; }
.ssc-links a.is-form {
  background: rgba(125, 155, 118, 0.10);
  border: 1px solid rgba(125, 155, 118, 0.30);
  border-radius: 12px;
  padding: 0.9rem 1.7rem 0.9rem 0.95rem;
  margin-top: 0.45rem;
  font-size: 0.9rem;
}
.ssc-links a.is-form::after { top: 1.1rem; }
.ssc-links a.is-form:hover {
  background: rgba(125, 155, 118, 0.18);
  border-color: var(--sage);
  color: var(--terra);
}

.ssc-card--wide { grid-column: 1 / -1; }
.ssc-card--wide .ssc-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  border-top: 1px dashed var(--border);
}
@media (max-width: 768px) {
  .ssc-card--wide .ssc-contact { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ── การ์ดสถิติ = ทางลัดกรองข้อมูล (กดได้) ───────────────────── */
.stat-card {
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  display: block;
}
.stat-card:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}
.stat-card.is-active {
  border-color: var(--terra);
  background: #fff;
}
/* กะพริบเบา ๆ ที่กล่องค้นหา เมื่อกดการ์ดสถิติ */
.search-section.flash {
  animation: panelFlash 1.1s ease-out 2;
}
@keyframes panelFlash {
  0%, 100% { background: transparent; }
  50%      { background: rgba(196, 113, 75, 0.07); }
}
@media (prefers-reduced-motion: reduce) {
  .search-section.flash { animation: none; }
}

/* ============================
   FILTER PANEL (เลือกได้หลายเงื่อนไข)
   ============================ */
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.filter-group-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
  margin-right: 0.1rem;
}
.filter-tail {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.filter-clear {
  font: inherit;
  font-size: 0.78rem;
  color: var(--terra);
  background: none;
  border: 1px dashed rgba(196,113,75,0.5);
  border-radius: 50px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-clear:hover { background: rgba(196,113,75,0.08); }
.filter-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--warm-gray);
}
.filter-sort select {
  font: inherit;
  font-size: 0.85rem;
  min-height: 40px;              /* เดิมสูง 30px — เล็กเกินไปสำหรับนิ้ว */
  color: var(--charcoal);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}
.filter-sort select:focus-visible,
.filter-clear:focus-visible,
.filter-btn:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .filter-panel { gap: 0.7rem 1rem; }
  .filter-tail { margin-left: 0; }
  .filter-group { gap: 0.35rem; }
}

/* ชื่อที่คั่นด้วย « / » ให้ตัดบรรทัดระหว่างชื่อ ไม่ตัดกลางชื่อ
   (max-width 100% กันกรณีชื่อยาวเกินคอลัมน์ — จะกลับไปตัดในก้อนนั้นแทน) */
.nm { display: inline-block; max-width: 100%; vertical-align: top; }
/* ชิปตัวกรอง: เป้าแตะขั้นต่ำ 36px (เดิม 32px บนเดสก์ท็อป) */
.filter-btn { min-height: 44px; }   /* เป้าสัมผัสขั้นต่ำ 44px ทุกขนาดจอ */

/* จอแคบมาก (≤360px): ให้ badge ลงมาอยู่ใต้ชื่อสถานที่
   ไม่งั้นชื่อยาว ๆ จะถูกเบียดเป็น 4 บรรทัด («โรง» «พยาบาล» «พระ» «ปกเกล้า») */
@media (max-width: 360px) {
  .card-header { row-gap: 0.5rem; }
  .card-header .card-title { flex: 1 0 100%; }
}

/* ── map toolbar ────────────────────────────────────── */
.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
}

/* Search */
.map-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 360px;
}
.map-search-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}
.map-search-input {
  width: 100%;
  padding: 0.55rem 0.9rem 0.55rem 2.3rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--off-white);
  font-size: 0.9rem;
  color: var(--charcoal);
  font-family: var(--font-body);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.map-search-input:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(196, 113, 75, 0.14);
}
.map-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  z-index: 200;
  overflow: hidden;
}
.map-search-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.87rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  text-align: left;
  transition: background 0.12s;
}
.map-search-item:hover,
.map-search-item:focus { background: var(--sand); outline: none; }
.map-search-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.map-search-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-search-region { font-size: 0.76rem; color: var(--warm-gray); flex: 0 0 auto; }

/* Layer toggles */
.map-layers { display: flex; gap: 0.45rem; }
.map-layer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;             /* เป้าแตะขั้นต่ำบนจอสัมผัส (เดิมสูง 36px) */
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--off-white);
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.map-layer-btn:hover { background: var(--sand); border-color: var(--terra); }
.map-layer-btn[aria-pressed="true"] {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
  color: #fff;
  font-weight: 600;
}

/* Compare toggle button */
.map-compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--off-white);
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.map-compare-btn:hover { background: var(--sand); border-color: var(--sage-dark); }
.map-compare-btn.is-active {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
  font-weight: 600;
}

/* Home Province selector */
.map-home-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.map-home-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
}
.map-home-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.map-home-select {
  padding: 0.45rem 0.75rem;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--off-white);
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.18s;
  min-width: 180px;
}
.map-home-select:focus { outline: none; border-color: var(--terra); }
.map-home-clear {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--warm-gray);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.map-home-clear:hover { background: var(--sand); color: var(--charcoal); }

/* Home mode — pin states */
.map-pin.home-near .pin-dot { opacity: 1; transform: scale(1.4); }
.map-pin.home-near .pin-halo { opacity: 0.35; }
.map-pin.home-far .pin-dot { opacity: 0.12; }
.map-pin.home-far .pin-halo { opacity: 0; }
.pin-hub.home-far { opacity: 0.12; }
.pin-hub.home-near .hub-dot { opacity: 1; }
.plate.home-lit .plate-face { fill: var(--rc-lift); stroke: var(--rc-lift); }
.plate.home-dim .plate-face { opacity: 0.25; }

/* Layer dim state */
.map-pin.layer-dim .pin-dot { opacity: 0.1; }
.map-pin.layer-dim .pin-halo { opacity: 0; }
.pin-hub.layer-dim { opacity: 0.1; }

/* Compare mode */
#elective-map.compare-mode { cursor: crosshair; }
.map-pin.cmp-selected .pin-dot { stroke: #fff; stroke-width: 2; transform: scale(1.7); opacity: 1; }
.map-pin.cmp-selected .pin-halo { opacity: 0.45; }

/* Compare panel */
.map-compare-panel {
  margin-top: 1.2rem;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--off-white);
  padding: 1.2rem 1.4rem 1.4rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}
.cmp-header { margin-bottom: 1rem; }
.cmp-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--charcoal); }
.cmp-hint { margin: 0; font-size: 0.78rem; color: var(--warm-gray); }
.cmp-cols {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.cmp-col {
  flex: 1;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--sand);
}
.cmp-col + .cmp-vs + .cmp-col { border-left: none; border-radius: 0 10px 10px 0; }
.cmp-col:first-child { border-radius: 10px 0 0 10px; }
.cmp-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--warm-gray);
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.cmp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-gray);
  font-size: 0.87rem;
  border-style: dashed;
  background: transparent;
}
.cmp-region { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.cmp-name { margin: 0 0 0.55rem; font-size: 0.95rem; line-height: 1.35; color: var(--charcoal); font-weight: 700; }
.cmp-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.7rem; }
.cmp-badges span {
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  background: var(--sand-mid);
  font-size: 0.72rem;
  color: var(--charcoal);
}
.cmp-facts { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 0.8rem; }
.cmp-facts > div { display: flex; gap: 0.5rem; align-items: baseline; }
.cmp-facts dt { font-size: 0.72rem; color: var(--warm-gray); min-width: 4rem; }
.cmp-facts dd { margin: 0; font-size: 0.87rem; color: var(--charcoal); }
.cmp-remove {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  font-size: 0.75rem;
  color: var(--warm-gray);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.12s, color 0.12s;
}
.cmp-remove:hover { background: var(--sand-mid); color: var(--charcoal); }

/* ── Bangkok Exploded View button ── */
.map-bkk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--off-white);
  color: var(--charcoal);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.map-bkk-btn:hover {
  background: var(--sand-mid);
  border-color: var(--terra);
}
.map-bkk-btn[aria-pressed="true"],
.map-bkk-btn.is-active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  box-shadow: 0 2px 8px rgba(196, 113, 75, 0.3);
}

/* ── Bangkok Explorer Drawer / Panel ── */
.map-bkk-explorer {
  padding: 0.95rem 1rem 1.1rem;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  animation: fadeIn 0.22s ease;
}
.bkk-exp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.bkk-exp-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--charcoal);
}
.bkk-exp-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--warm-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.bkk-exp-close:hover {
  background: var(--sand-mid);
  color: var(--charcoal);
}
.bkk-exp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}
.bkk-tab {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--sand);
  color: var(--charcoal);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.bkk-tab:hover {
  background: var(--sand-mid);
}
.bkk-tab.is-active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.bkk-exp-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.bkk-exp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.8rem;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.bkk-exp-item:hover {
  background: var(--sand-mid);
  border-color: var(--terra);
  transform: translateX(2px);
}
.bkk-exp-item.is-chula {
  border-left: 3px solid var(--terra);
  background: rgba(196, 113, 75, 0.05);
}
.bkk-exp-item.is-active {
  background: rgba(196, 113, 75, 0.12);
  border-color: var(--terra);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(196, 113, 75, 0.18);
  transform: translateX(3px);
}
.bkk-exp-item .bkk-item-tag {
  font-size: 0.68rem;
  color: var(--warm-gray);
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* ── Bangkok Explorer Search Box ── */
.bkk-exp-search {
  margin-bottom: 0.65rem;
}
.bkk-search-input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bkk-search-input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(196, 113, 75, 0.15);
}

/* ── Floating Pin Tooltip on Map ── */
.map-float-tip {
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.map-tip-bg {
  fill: #fff;
  stroke: var(--terra);
  stroke-width: 1.2px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}
.map-tip-text {
  font-size: 11px;
  font-weight: 600;
  fill: var(--charcoal);
  dominant-baseline: central;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Sarabun", sans-serif;
}

/* ── Bangkok Focus View (เจาะลึก กทม.) ── */
.map-svg.bkk-exploded .pin-halo {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}
.map-svg.bkk-exploded .map-pin:hover .pin-halo,
.map-svg.bkk-exploded .map-pin.hover .pin-halo,
.map-svg.bkk-exploded .map-pin.on .pin-halo {
  opacity: 0.45 !important;
}
.map-svg.bkk-exploded .chula-ring {
  display: none !important;
}
.map-svg.bkk-exploded .chula-label,
.map-svg.bkk-exploded .plate-labels,
.map-svg.bkk-exploded .plate-stat {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease;
}
.map-svg.bkk-exploded .plate:not([data-region="bkk"]) {
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.map-svg.bkk-exploded .pin-group:not([data-region="bkk"]) {
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.map-svg.bkk-exploded .plate[data-region="bkk"] .plate-face {
  fill: #ecd8cc;
  filter: drop-shadow(0 4px 18px rgba(196, 113, 75, 0.32));
  stroke: var(--terra);
  stroke-width: 1.6px;
}

@media (max-width: 600px) {
  .map-toolbar { gap: 0.5rem; }
  .map-search-wrap { min-width: 0; flex: 1 1 100%; max-width: none; }
  .map-layers { flex-wrap: wrap; }
  .cmp-cols { flex-direction: column; }
  .cmp-col + .cmp-vs + .cmp-col { border-left: 1.5px solid var(--border); border-radius: 0 0 10px 10px; }
  .cmp-col:first-child { border-radius: 10px 10px 0 0; }
  .cmp-vs { padding: 0.4rem; writing-mode: horizontal-tb; }
  .map-home-row { gap: 0.5rem; }
  .map-home-select { min-width: 0; flex: 1; }
}

/* ============================
   แผนที่สถาบัน (แผนที่ไทย interactive)
   ============================ */
.map-section {
  padding: 4.5rem 2rem;
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%, rgba(196, 113, 75, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 45% at 8% 92%, rgba(125, 155, 118, 0.07), transparent 60%),
    var(--off-white);
}
.map-wrap {
  display: grid;
  /* แผนที่ ≤470px เหมือนเวอร์ชันแรก · คอลัมน์ขวาล็อกขั้นต่ำไว้ ไม่ให้การ์ดดันจนแผนที่ขยับ */
  grid-template-columns: minmax(310px, 470px) minmax(320px, 1fr);
  gap: 2.6rem;
  align-items: start;
}
.map-paper {
  position: relative;
  padding: 0.9rem;
  background: radial-gradient(120% 82% at 50% 0%, #fbf7f0 0%, #f2eade 58%, #eae0cf 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* แสงนุ่มจากด้านบน — เลิกใช้เส้นกริด 28px ที่ทำให้ตาลาย */
.map-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(92% 58% at 50% 0%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
/* ── map zoom controls (ปุ่ม + / - / reset) ─────────────── */
.map-controls {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 20;
}
.map-ctrl-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--charcoal);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(44, 40, 36, 0.1);
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}
.map-ctrl-btn:hover {
  background: #fff;
  color: var(--terra);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(44, 40, 36, 0.15);
}
.map-ctrl-btn:active {
  transform: translateY(1px);
}

/* ── map scroll hint overlay (แจ้งเตือนกัน scroll hijack) ── */
.map-scroll-hint {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(44, 40, 36, 0.92);
  color: #fff;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 25;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.map-scroll-hint strong {
  color: #f7d286;
}
.map-scroll-hint.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.map-svg { position: relative; display: block; width: 100%; height: auto; }
.map-land path {
  fill: #fbf6ec;                        /* แผ่นดินสว่างกว่า «ทะเล» ให้อ่านเป็นเกาะได้ทันที */
  stroke: #fbf6ec;                      /* ★ เส้นสีเดียวกับพื้น = กลบรอยต่อระหว่างจังหวัด
                                           (เดิมตีเส้นสีน้ำตาลทุกจังหวัด → ทั้งประเทศเป็นตะแกรงเส้น) */
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* เงา 2 ชั้น: ชั้นแรก 0 เบลอ = เส้นขอบบาง ๆ ตามรูปทรงจริงของประเทศ · ชั้นสอง = เงานุ่ม */
.map-land { filter: drop-shadow(0 0 1px rgba(124, 102, 74, 0.55)) drop-shadow(0 5px 11px rgba(96, 70, 44, 0.13)); }
.map-land .map-land-depth {
  fill: #e7d8bf;
  stroke: none;
  transform: translate(3px, 4.5px);     /* ขอบหนาของแผ่นประเทศ */
  opacity: 0.85;
}
.map-svg { cursor: default; touch-action: auto; }   /* แผนที่ = ภาพประกอบ */
.map-svg.grabbing { cursor: grabbing; }
.pin-dot, .pin-halo, .map-home { vector-effect: non-scaling-stroke; }
.chula-label { font-size: 17px; font-weight: 600; fill: var(--charcoal); opacity: 0;
  pointer-events: none;   /* ป้ายประดับ — ต้องไม่บังการคลิกป้าย กทม./หมุดที่อยู่ใต้ */
  paint-order: stroke; stroke: rgba(250, 246, 238, 0.9); stroke-width: 4px; stroke-linejoin: round;
  transition: opacity 0.26s ease; }
.map-svg.is-zoomed .chula-label { opacity: 0.85; }   /* ซูมเข้าแล้วค่อยบอกว่าจุดนี้คือ รพ.จุฬาฯ (ตอนซูมออกมีกระจุกบอกจำนวนอยู่แล้ว) */

/* ── แผ่นภาค (plate): พื้นที่ของภาค ไม่ใช่ «แผ่นลอยขึ้น» ─────────────
   สีเดียวกับเส้นขอบ → รอยต่อระหว่างจังหวัดถูกกลบ ไม่เหลือเส้นซ้อนให้ตาลาย */
.map-plates { pointer-events: none; }
.plate { pointer-events: auto; cursor: pointer; transform-box: view-box;
  transition: opacity 0.26s ease, filter 0.3s ease; }
.plate-face { fill: var(--rc-soft, var(--rc)); stroke: var(--rc-soft, var(--rc));
  stroke-width: 2.4; vector-effect: non-scaling-stroke;
  transition: fill 0.26s ease, stroke 0.26s ease; }
.plate-hit { fill: transparent; }
.plate-label-wrap { opacity: 1; transition: opacity 0.26s ease, transform 0.26s ease;
  transform: scale(var(--lk, 1)); transform-box: fill-box; transform-origin: center; }
.plate-label-bg { display: none; }         /* ใช้เส้นขอบขาวรอบตัวอักษรแทนกล่อง (สะอาดกว่า) */
.plate-label { font-size: 18px; font-weight: 600; letter-spacing: 0.015em; fill: #453d34;
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(253, 250, 246, 0.92); stroke-width: 5px; stroke-linejoin: round; }

/* "เพ่งภาค": สว่างขึ้น + เรืองแสงนุ่ม · ไม่ขยับตำแหน่ง (ตำแหน่งหมุดตรงกับที่กดเสมอ) */
.plate.lit .plate-face { fill: var(--rc-lift, var(--rc)); stroke: var(--rc-lift, var(--rc)); }
.plate.lit { filter: drop-shadow(0 0 9px rgba(160, 120, 80, 0.22)); }
.plate.sel .plate-face { fill: var(--rc-lift, var(--rc)); stroke: var(--rc-lift, var(--rc)); }
/* ป้ายชื่อภาค: แยกชั้นการแสดงผลออกจาก .plate (เพื่อไม่ให้โดน clip ตามรูปประเทศ) */
.plate-labels.lit .plate-label-wrap, .plate-label-wrap.lit { opacity: 1; transform: scale(calc(var(--lk, 1) * 1.06)); }
.plate-labels.sel .plate-label-wrap, .plate-label-wrap.sel { opacity: 1; }
.plate-labels.dim .plate-label-wrap, .plate-label-wrap.dim { opacity: 0.18; }
.plate.dim { opacity: 0.14; }
.plate:focus-visible { outline: none; }
.plate:focus-visible .plate-face { stroke: var(--rc); stroke-width: 2.6; }

/* ป้ายสรุปตัวเลขจริงของภาค — โผล่ตอน «เพ่งดู» ให้การ hover มีความหมาย */
.plate-stat { opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
  transform: scale(var(--lk, 1)); transform-box: fill-box; transform-origin: center; }
.plate-stat.on { opacity: 1; }
.plate-stat-bg { fill: rgba(44, 40, 36, 0.88); }
.plate-stat-text { font-size: 15px; font-weight: 500; fill: #fdfaf6; text-anchor: middle;
  font-variant-numeric: tabular-nums; }

/* กลุ่มหมุดรายภาค — สว่าง/จางตาม «การเพ่งภาค» (ไม่ขยับตำแหน่ง) */
.pin-group { transition: opacity 0.26s ease; }
.pin-group.dim { opacity: 0.12; }
.pin-group.lit .pin-dot { opacity: 1; }
.pin-group.lit .pin-halo { opacity: 0.3; }

/* หมุด: ค่อย ๆ ปรากฏไล่กันเมื่อเลื่อนมาถึง */
.pin-dot {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;      /* สำคัญ: ไม่งั้น SVG จะสเกลรอบมุม viewBox → จุดเด้งหนีเมาส์ตอนชี้ */
  transform-origin: center;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 9ms);
}
.map-paper.in .pin-dot { opacity: 0.86; transform: scale(1); }
.pin-halo { opacity: 0; transition: opacity 0.6s ease; transition-delay: calc(var(--i) * 9ms); }
.map-paper.in .pin-halo { opacity: 0.16; }
.pin-hit { fill: transparent; cursor: pointer; }
.map-pin .pin-dot:not(.is-approx) { stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.7; }
.map-pin.on .pin-dot,
.map-pin.hover .pin-dot,
.map-pin:hover .pin-dot { opacity: 1; transform: scale(1.55); }
.map-pin.hover .pin-halo,
.map-pin:hover .pin-halo { opacity: 0.3; }
.map-pin.on .pin-dot { stroke: var(--off-white); stroke-width: 1.1; }
.map-pins.touching .pin-dot { opacity: 0.28; }
.map-pins.touching .map-pin.on .pin-dot { opacity: 1; }

/* เส้นทางจากจุฬาฯ ไปหมุดที่ชี้ */
.map-arc {
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.88;
  vector-effect: non-scaling-stroke;
}
.map-arc-pulse {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 8 28;
  vector-effect: non-scaling-stroke;
  animation: arcFlow 1.1s linear infinite;
  pointer-events: none;
}
@keyframes arcFlow {
  from { stroke-dashoffset: 36; }
  to { stroke-dashoffset: 0; }
}
.map-home {
  fill: var(--terra);
  stroke: var(--off-white);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* ป้ายชื่อสถาบัน */
.map-tip {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -100%);
  margin-top: -0.55rem;
  max-width: 15rem;
  padding: 0.5rem 0.7rem;
  background: var(--charcoal);
  color: var(--sand);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transition: opacity 0.15s;
}
.map-tip.below { transform: translate(-50%, 0); margin-top: 0.9rem; }
.map-tip strong { display: block; font-weight: 600; }
.map-tip em { display: block; font-style: normal; opacity: 0.72; font-size: 0.72rem; margin-top: 0.1rem; }
.map-tip-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.map-tip-badges span {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(245, 239, 230, 0.16);
}

/* ฝั่งขวา: คำอธิบาย + ตัวเลข */
.map-side { display: flex; flex-direction: column; gap: 1.1rem; }
.map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.map-legend-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  min-height: 40px;
  border: 0;                       /* เป็น <button> แล้ว ต้องรีเซ็ตสไตล์ปุ่ม */
  background: none;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  color: var(--charcoal);
  transition: background 0.2s;
}
.map-legend-row[aria-pressed="true"] { background: var(--sand-mid); font-weight: 600; }
.map-legend-row:hover { background: var(--sand); }
.map-legend-row .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.map-legend-row .legend-count { margin-left: auto; color: var(--warm-gray); font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.map-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.map-fact {
  font-size: 0.76rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--sand);
  color: var(--warm-gray);
}

/* การ์ดที่ถูกกดจากแผนที่ */
.card.map-flash { animation: mapFlash 2.2s ease; }
@keyframes mapFlash {
  0%, 100% { box-shadow: var(--shadow); }
  14%      { box-shadow: 0 0 0 3px var(--terra), var(--shadow-lg); }
  60%      { box-shadow: 0 0 0 3px rgba(196, 113, 75, 0.35), var(--shadow-lg); }
}

@media (max-width: 900px) {
  .map-section { padding: 3.5rem 1.25rem; }
  .map-legend-row { min-height: 44px; }
}
/* แผนที่ยังคง 2 คอลัมน์ (แผนที่ + เลเจนด์) จนถึง 760px
   เดิมยุบที่ 900px ทำให้แท็บเล็ต 834 มีแผ่นแผนที่เล็ก 300px กลางคอลัมน์ 762px */
@media (max-width: 760px) {
  .map-wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .map-paper { max-width: 420px; margin: 0 auto; }
}
/* hero: ลดขนาดหัวข้อลงเล็กน้อยบนจอ ≤900 เพื่อไม่ให้ «จุฬาฯ» ตกไปอยู่บรรทัดเดี่ยว */
@media (max-width: 900px) {
  .hero-title { font-size: clamp(2rem, 7.2vw, 3.2rem); }
  /* iOS จะซูมหน้าเองเมื่อโฟกัส input ที่ฟอนต์ < 16px */
  .map-search-input,
  .map-home-select,
  .filter-sort select { font-size: 16px; }
  .filter-sort select { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-dot { transition: none; opacity: 0.78; transform: none; }
  .card.map-flash { animation: none; box-shadow: 0 0 0 3px var(--terra), var(--shadow-lg); }
}

/* ============================
   ลูกเล่น: ฉากหลัง hero, แถบอ่าน, สปอตไลต์, เมนูตามส่วน
   ============================ */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 130;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--sage) 0%, var(--terra) 55%, var(--dusk) 100%);
  pointer-events: none;
}

/* เมนูบน: ไฮไลต์ส่วนที่กำลังอ่าน */
.nav-links a.active { color: var(--terra); }
.nav-links a.active::after { width: 100%; }

/* ไฟสปอตไลต์นุ่ม ๆ ตามเมาส์บนการ์ด (ไม่บังข้อความ — เป็นเลเยอร์พื้นหลัง) */
.card,
.ssc-card,
.tip-card,
.stat-card {
  background-image: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(196, 113, 75, 0.055),
    transparent 68%
  );
}

/* หมุดที่พิกัดเป็นเพียงตำแหน่งโดยประมาณ — วงกลมกลวง */
.pin-dot.is-approx { fill: none; }
.map-tip em.approx { color: var(--terra-light); opacity: 1; font-size: 0.7rem; }

.map-fallback { font-size: 0.85rem; color: var(--warm-gray); padding: 2rem; text-align: center; }

/* ระยะทางจากคณะฯ */
.map-near-title { font-size: 0.95rem; font-weight: 600; color: var(--charcoal); margin: 0.4rem 0 0.55rem; }
.map-near-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.map-near-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
}
.map-near-row:hover { background: var(--sand); }
.map-near-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: var(--sand-mid);
  color: var(--warm-gray);
}
.map-near-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-near-km { flex: 0 0 auto; color: var(--terra-ink); font-variant-numeric: tabular-nums; }
.map-near-note { font-size: 0.72rem; color: var(--warm-gray); margin: 0.5rem 0 0; }

/* ── แผนที่: การ์ดข้างแผนที่ (ย่อตอนชี้ / เต็มตอนคลิก) ────────── */
.map-card {
  position: relative;
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}
.map-card-close {
  position: absolute; top: 0.5rem; right: 0.55rem;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  color: var(--warm-gray); font-size: 1rem; line-height: 1;
  border-radius: 50%;
}
.map-card-close:hover { background: var(--sand); color: var(--charcoal); }
.map-card-eyebrow { margin: 0 0 0.15rem; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--sage-dark); }
.map-card-name { margin: 0 0 0.5rem; font-size: 1.12rem; line-height: 1.35; color: var(--charcoal); padding-right: 2rem; }
.map-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.map-card-badges span {
  font-size: 0.7rem; padding: 0.16rem 0.45rem; border-radius: 999px;
  background: var(--sand); color: var(--warm-gray);
}
.map-card-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0 0 0.9rem; }
.map-card-facts > div { display: flex; gap: 0.4rem; align-items: baseline; }
.map-card-facts dt { font-size: 0.72rem; color: var(--warm-gray); }
.map-card-facts dd { margin: 0; font-size: 0.88rem; color: var(--charcoal); }
.map-card-hint { margin: 0; font-size: 0.76rem; color: var(--warm-gray); }
.map-card-go {
  width: 100%; min-height: 42px;
  border: 1px solid var(--sage); border-radius: 10px;
  background: var(--sage); color: #fff;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.map-card-go:hover { background: var(--sage-dark); border-color: var(--sage-dark); }

/* ── จุดจุฬาฯ (รวม 25 ภาควิชาเป็นจุดเดียว) ───────────────────── */
.chula-ring { fill: none; stroke: var(--terra); stroke-width: 1.6; opacity: 0.45;
  vector-effect: non-scaling-stroke; }
.chula-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  fill: var(--terra); paint-order: stroke; stroke: var(--off-white); stroke-width: 3px;
}
.map-chula .pin-hit { cursor: pointer; }

/* ── แผนผังอาคารจุฬาฯ (isometric) ────────────────────────────── */
.map-campus { width: 100%; height: auto; display: block; margin: 0.2rem 0 0.6rem; }
.campus-face { stroke: rgba(44, 40, 36, 0.18); stroke-width: 0.8; }
.campus-face.top { fill: #e8e2d5; }
.campus-face.side { fill: #cfc6b6; }
.campus-face.side2 { fill: #bdb3a2; }
.campus-label { font-family: var(--font-body); font-size: 12px; fill: var(--warm-gray); text-anchor: middle; }
.campus-dept { cursor: pointer; }
.campus-hit { fill: transparent; }
.campus-dot { stroke: var(--off-white); stroke-width: 1.2; transition: r 0.15s; }
.campus-dept:hover .campus-dot, .campus-dept.on .campus-dot, .campus-dept:focus-visible .campus-dot { r: 5.4; }
.campus-sub { font-size: 0.76rem; color: var(--warm-gray); margin: 0.4rem 0 0.35rem; }
.campus-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.campus-chip {
  font-family: inherit; font-size: 0.72rem;
  padding: 0.28rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--sand); color: var(--charcoal);
  cursor: pointer; transition: background 0.15s;
  min-height: 44px;
}
.campus-chip:hover { background: var(--sand-mid); }

/* ── หมุดที่ชี้/เลือกอยู่ ─────────────────────────────────────── */
.map-pin.hover .pin-dot { opacity: 1; }
.map-pin.on .pin-dot { opacity: 1; stroke: var(--charcoal); stroke-width: 1.1; }

/* ── มือถือ: การ์ดกลายเป็นแผ่นเลื่อนขึ้นจากขอบจอ (ไม่ดันเนื้อหา) ── */
@media (max-width: 900px) {
  .map-card {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    margin: 0; border-radius: 18px 18px 0 0;
    max-height: 64vh; overflow: auto;
    box-shadow: 0 -8px 34px rgba(44, 40, 36, 0.22);
    animation: cardUp 0.22s ease;
  }
  @keyframes cardUp { from { transform: translateY(18%); opacity: 0.6; } to { transform: none; opacity: 1; } }
}

/* ซ่อนจากตาแต่เหลือให้โปรแกรมอ่านหน้าจอ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* F7: ส่วนที่มีการ์ดน้อย (เช่น โรงพยาบาลพันธมิตร 2 ใบ) — ให้เต็มแถว ไม่เหลือที่ว่างครึ่งแถว */
.inst-section[data-category="hospital"] .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .inst-section[data-category="hospital"] .cards-grid { grid-template-columns: minmax(0, 1fr); } }

/* F8: เมนูบนมือถือที่ล้น — ทำขอบขวาเป็น fade ให้รู้ว่าปัดได้ */
@media (max-width: 760px) {
  .nav-links { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
               mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
}

/* F9: ป้ายชื่อภาคที่ถูกกรอบตัด — ซ่อนเมื่อจุดยึดหลุดกรอบ */
.plate-label-wrap.off { opacity: 0 !important; }

/* F10: ป้ายชื่ออาคารในแผนผังจุฬาฯ — ใส่ขอบขาวอ่านง่ายไม่ทับเส้นตึก */
.campus-label { paint-order: stroke; stroke: #fdfaf4; stroke-width: 4.5px; stroke-linejoin: round; fill: #4a4038; font-weight: 500; }

/* แถวเลือกสถาบันที่ตำแหน่งเดียวกัน (หมุดซ้อนกันแน่นจนคลิกแยกไม่ได้) */
.map-card-near { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.map-card-near p { margin: 0 0 0.45rem; font-size: 0.72rem; color: var(--warm-gray); }
.map-near-pick { display: block; width: 100%; text-align: left; padding: 0.45rem 0.6rem; margin-bottom: 0.3rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 0.8rem;
  color: var(--charcoal); cursor: pointer; min-height: 44px; }
.map-near-pick:hover { border-color: var(--terra); color: var(--terra); }
.map-near-pick.is-current { background: var(--sand); border-color: var(--terra); font-weight: 600; }

/* หมุดที่ใกล้พอจะชี้ — เคอร์เซอร์เป็น pointer ทั้งกรอบ เพื่อบอกว่ากดได้ */
.map-svg.pin-hot { cursor: pointer; }

/* แถบเมนูติดขอบบน (สูง ~62px) — กันไม่ให้ปลายทางของการเลื่อน/anchor ไปอยู่ใต้แถบ */
html { scroll-padding-top: 78px; }
/* ใช้ html { scroll-padding-top } อย่างเดียว ไม่ใส่ scroll-margin-top ซ้ำ (ไม่งั้นเบิ้ล 78+78px) */

/* =====================================================================
   แผนที่ (รอบออกแบบใหม่): กระจุกหมุด · ภาคที่ถูกเพ่ง · รายการภาค
   วางท้ายไฟล์เพื่อให้ชนะกฎเดิมเมื่อ specificity เท่ากัน
   ===================================================================== */

/* หมุดที่ถูกรวมอยู่ในกระจุก → ซ่อนไว้จนกว่าจะซูมเข้า (กดที่ปุ่มตัวเลขก่อน) */
.map-pin.in-hub .pin-dot,
.map-pin.in-hub .pin-halo { opacity: 0; }
.map-pin.in-hub .pin-hit { pointer-events: none; }
.map-svg.hub-open .map-pin.in-hub .pin-dot { opacity: 0.86; }
.map-svg.hub-open .map-pin.in-hub .pin-halo { opacity: 0.16; }
.map-svg.hub-open .map-pin.in-hub .pin-hit { pointer-events: auto; }

/* กระจุกหมุด: วงกลมสีภาค + ตัวเลขจำนวนสถาบัน (กดแล้วซูมเข้าไปแยกเป็นจุด) */
.map-hubs { pointer-events: none; }
.pin-hub { pointer-events: auto; cursor: pointer; transition: opacity 0.24s ease; }
.hub-dot { fill-opacity: 0.94; stroke: rgba(253, 250, 246, 0.95); stroke-width: 2.2;
  vector-effect: non-scaling-stroke; transition: fill-opacity 0.2s ease, stroke-width 0.2s ease; }
.hub-count { fill: #fdfaf6; font-weight: 700; text-anchor: middle; dominant-baseline: central;
  pointer-events: none; font-variant-numeric: tabular-nums; }
.pin-hub:hover .hub-dot,
.pin-hub.lit .hub-dot { fill-opacity: 1; }
.pin-hub:hover .hub-dot { stroke: #fff; stroke-width: 3; }
.pin-hub.dim { opacity: 0.14; }
.pin-hub:focus-visible { outline: none; }
.pin-hub:focus-visible .hub-dot { stroke: var(--charcoal); stroke-width: 3; }
.map-svg.hub-open .pin-hub { opacity: 0; pointer-events: none; }

/* รายการภาค (legend): ชี้ = เพ่งดูภาคนั้น · คลิก = กรองรายการสถาบัน */
.map-legend-row .legend-dot { transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.24s ease; }
.map-legend-row:hover .legend-dot,
.map-legend-row[aria-pressed="true"] .legend-dot { transform: scale(1.4); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8); }
.map-legend-row:hover .legend-count { color: var(--terra); font-weight: 700; }

/* หมายเหตุใต้การ์ด: เวลาขับรถเป็นค่าประมาณ (ไม่ใช่คำอธิบายวิธีใช้ UI) */
.map-card-traffic { margin: -0.5rem 0 0.9rem; font-size: 0.72rem; line-height: 1.5; color: var(--warm-gray); }

/* เป้าสัมผัสของลิงก์เมนูบนจอเล็ก ต้อง ≥44px (tester รอบ 5 วัดได้ 34px) */
@media (max-width: 480px) {
  .nav-links a { min-height: 44px; }
}

/* กระจุกหมุด: เป้าสัมผัสล่องหน ≥44px (ตัววงกลมยังเล็กตามดีไซน์) */
.hub-hit { fill: transparent; cursor: pointer; }

/* ── จอสัมผัส: กันไฮไลต์ค้าง ───────────────────────────────────────
   เบราว์เซอร์บนมือถือ "คง" สถานะ :hover ไว้หลังแตะ จนกว่าจะแตะที่อื่น
   ทำให้ผู้ใช้คิดว่ายกเลิกการเลือกไม่สำเร็จ → บนจอที่ไม่มี hover ให้ยกเลิกสไตล์ hover ทั้งหมด
   แล้วเหลือเฉพาะสถานะ "เลือกอยู่" (aria-pressed=true) ที่คงอยู่จริง                        */
@media (hover: none) {
  .map-legend-row:hover:not([aria-pressed="true"]) { background: none; }
  .map-legend-row:hover:not([aria-pressed="true"]) .legend-dot { transform: none; box-shadow: none; }
  .map-legend-row:hover:not([aria-pressed="true"]) .legend-count { color: var(--warm-gray); font-weight: 600; }
}
/* สถานะ "เลือกอยู่" — เห็นชัดและคงอยู่ ไม่ใช่แค่ตอนชี้ */
.map-legend-row[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1.5px rgba(196, 113, 75, 0.45);
}
.map-legend-row[aria-pressed="true"] .legend-count { color: var(--terra); font-weight: 700; }
/* เพิ่มคอนทราสต์เลขในฟองนับหมุด (เดิมขาวล้วนบนสีภาค = 2.78–3.47:1) */
.hub-count { paint-order: stroke; stroke: rgba(28, 20, 12, 0.55); stroke-width: 2.4px; stroke-linejoin: round; }