/* ═══════════════════════════════════════════════════════════════
   หน้า "ค้นหาสปา" — /explore

   ใช้ของเดิมซ้ำเป็นหลัก:
     .blk-hero / .blk-h / .pg  → blocks.css
     .hm-card / .hm-fav / .hm-rate / .hm-tag → onzon.css (บล็อก "สปาแนะนำ" หน้าแรก)
   ไฟล์นี้มีเฉพาะส่วนที่หน้านี้ใช้คนเดียว (prefix .ex-*)

   ⚠️ ห้ามแก้ .hero / .chip / .shop-card ของเดิมเพื่อหน้านี้
      คลาสพวกนั้นใช้ร่วมกับ /contact · /welcome และหน้าร้านฝั่งหลังบ้าน
   ต้องโหลด "หลัง" onzon.css และ blocks.css
   ═══════════════════════════════════════════════════════════════ */

/* ── แบนเนอร์ ──
   ⚠️ เคยลองจัดข้อความกึ่งกลางแล้วอ่านไม่ออก — รูปแบนเนอร์สว่างและรกทางฝั่งขวา
      หัวข้อบรรทัดที่ 2 เป็นสีทองจึงจมหายไปเลย (ต่อให้คลุมม่านครีมทับก็ยังจาง)
      สุดท้ายใช้ชิดซ้ายเหมือนอีก 6 หน้า ซึ่งเป็นโซนสว่าง-เรียบของรูปพอดี ไม่ต้องมีม่าน */
.ex-hero {
  min-height: clamp(250px, 20vw, 310px);
}
.ex-hero-text {
  max-width: min(560px, 46vw);   /* พอดีกับโซนสว่างของรูป */
}

/* ── แถบค้นหา — โครงเดียวกับหน้า /spa_tourism แต่ยิงจริง ── */
.ex-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 860px;
  padding: 5px 5px 5px 8px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.ex-search-field {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  color: var(--gold-ink);
}
.ex-search-field input {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  outline: none;
}
.ex-search-field input::placeholder { color: var(--ink-faint); }

/* เส้นคั่นในแถบ = border-left ของ select (ไม่ต้องใส่ element คั่นเพิ่ม) */
.ex-search-select {
  flex: 0 0 auto;
  max-width: 175px;
  padding: 8px 34px 8px 16px;
  border: 0;
  border-left: 1px solid var(--hair);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
  /* ลูกศรวาดเอง — ของแต่ละ OS หน้าตาไม่เหมือนกันและกินที่ต่างกัน */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23404040%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
.ex-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  padding: 11px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  transition: filter 0.2s;
}
.ex-search-btn:hover { filter: brightness(1.15); }

.ex-note {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--warn);
}

/* จอแคบ — แถบเม็ดเดียวใส่ไม่ลง แตกเป็น 3 บรรทัด */
@media (max-width: 720px) {
  .ex-search {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
  }
  .ex-search-field { flex: 1 1 100%; }
  .ex-search-select {
    flex: 1 1 auto;
    max-width: none;
    border-left: 0;
    border: 1px solid var(--hair);
    border-radius: 999px;
  }
  .ex-search-btn { flex: 0 0 auto; margin-left: 0; }
}

/* ── แถวสรุปผล ── */
.ex-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ex-head .blk-h { margin-bottom: 0; }
.ex-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
}
.ex-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink-soft);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ex-clear:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

/* ── กริดการ์ดร้าน ──
   .hm-card มากับสไตล์ของตัวเองแล้ว ที่นี่คุมแค่จำนวนคอลัมน์ */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: 18px;
}
@media (max-width: 1180px) { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ex-grid { grid-template-columns: 1fr; } }

/* บรรทัดที่อยู่ — หน้าแรกไม่มีเพราะการ์ดเล็กกว่า */
.ex-card-loc {
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* ── ไม่พบผลลัพธ์ ── */
.ex-empty {
  margin: clamp(20px, 4vw, 40px) auto;
  padding: clamp(28px, 5vw, 52px) 24px;
  max-width: 560px;
  text-align: center;
  border: 1px dashed var(--hair);
  border-radius: 18px;
  background: var(--panel);
}
.ex-empty-ico {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
}
.ex-empty h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--accent);
}
.ex-empty p {
  margin-top: 6px;
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.ex-empty-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.84rem;
  text-decoration: none;
  transition: filter 0.2s;
}
.ex-empty-btn:hover { filter: brightness(1.15); }