/* ============================================================
   Trà Sữa TuiBao — Store Locator (bản plugin WordPress)
   Mọi rule dùng tiền tố #tb-store-locator (ID) để thắng các rule
   form-control của theme (Flatsome, Astra, ...: select { height },
   button { text-transform }, margin-bottom: 1em, box-shadow...).
   Các thuộc tính theme hay đụng đều được khai báo TƯỜNG MINH —
   không dựa vào giá trị mặc định của trình duyệt.
   Bảng màu lấy từ logo-tui-bao.png: cam #F4580A, xanh lá #66AF24,
   vàng #F6C81F, xanh rêu #243107.
   ============================================================ */

:root {
  --tb-cream:       #FFF8E7;   /* nền kem vàng nhạt */
  --tb-milk:        #FFFDF6;   /* thẻ trắng sữa */
  --tb-ink:         #243107;   /* chữ chính — xanh rêu đậm của viền logo */
  --tb-ink-soft:    #67713F;   /* chữ phụ */
  --tb-orange:      #F4580A;   /* cam chủ đạo — chữ TUIBAO */
  --tb-orange-deep: #C24503;   /* cam đậm — hover/nhấn */
  --tb-orange-tint: #FEEAD8;   /* cam nhạt — nền nhấn */
  --tb-green:       #66AF24;   /* xanh lá — thân mèo */
  --tb-green-deep:  #448010;   /* xanh đậm — nhãn, pill khu vực */
  --tb-green-tint:  #EAF4DA;   /* xanh nhạt — nền pill */
  --tb-yellow:      #F6C81F;   /* vàng — bụng mèo, điểm gradient */
  --tb-line:        #F0E2C6;   /* viền */
  --tb-radius: 18px;
  --tb-shadow: 0 10px 30px -12px rgba(54, 49, 7, .28);
  --tb-font-display: "Baloo 2", cursive;
  --tb-font-body: "Be Vietnam Pro", sans-serif;
}

#tb-store-locator,
#tb-store-locator *,
#tb-store-locator *::before,
#tb-store-locator *::after { box-sizing: border-box; }

#tb-store-locator {
  font-family: var(--tb-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tb-ink);
  background-color: var(--tb-cream);
  /* hoạ tiết chấm trân châu chìm — cam và xanh lá nhạt */
  background-image:
    radial-gradient(rgba(102, 175, 36, .08) 2.5px, transparent 2.5px),
    radial-gradient(rgba(244, 88, 10, .07) 2px, transparent 2px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  border-radius: var(--tb-radius);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* bỏ ô xám nháy khi chạm trên mobile */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

/* ---------- Header ---------- */

#tb-store-locator .tb-header {
  position: relative;
  text-align: center;
  padding: 38px 0 30px;
  margin: 0;
  border: 0;
  background: none;
}

#tb-store-locator .tb-header__logo {
  display: inline-block;
  height: 104px;
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 18px rgba(54, 49, 7, .22));
  animation: tb-float 3.2s ease-in-out infinite;
}

@keyframes tb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

#tb-store-locator .tb-header__title {
  font-family: var(--tb-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  margin: 14px 0 6px;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--tb-ink);
}

#tb-store-locator .tb-header__title::after {
  content: "";
  display: block;
  width: 86px; height: 6px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tb-orange), var(--tb-yellow));
}

#tb-store-locator .tb-header__subtitle {
  margin: 10px 0 0;
  padding: 0;
  color: var(--tb-ink-soft);
  font-size: 1.02rem;
}

/* ---------- Filter bar ---------- */

#tb-store-locator .tb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
  padding: 18px;
  background: var(--tb-milk);
  border: 1.5px solid var(--tb-line);
  border-radius: calc(var(--tb-radius) + 6px);
  box-shadow: var(--tb-shadow);
  position: relative;
  z-index: 2;
}

#tb-store-locator .tb-filters__group { flex: 1 1 220px; margin: 0; padding: 0; }

#tb-store-locator .tb-filters__label {
  display: block;
  font-family: var(--tb-font-body);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tb-green-deep);
  margin: 0 2px 7px;
  padding: 0;
}

#tb-store-locator .tb-select-wrap { position: relative; margin: 0; }

/* mũi tên chevron tự vẽ */
#tb-store-locator .tb-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--tb-orange-deep);
  border-bottom: 2.5px solid var(--tb-orange-deep);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  transition: transform .2s;
}

/* Khai báo đầy đủ: height/min-height/margin/box-shadow... là những thuộc
   tính theme (vd Flatsome: select { height: 2.507em }) hay áp lên select. */
#tb-store-locator select.tb-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 12px 42px 12px 18px;
  font-family: var(--tb-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tb-ink);
  background: var(--tb-cream) none; /* "none" xoá luôn ảnh mũi tên của theme */
  border: 1.5px solid var(--tb-line);
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

#tb-store-locator select.tb-select:hover:not(:disabled) {
  border-color: var(--tb-orange);
  background-color: var(--tb-cream);
  color: var(--tb-ink);
}

#tb-store-locator select.tb-select:focus,
#tb-store-locator select.tb-select:focus-visible {
  outline: none;
  border-color: var(--tb-orange);
  background-color: var(--tb-cream);
  color: var(--tb-ink);
  box-shadow: 0 0 0 4px rgba(244, 88, 10, .16);
}

#tb-store-locator select.tb-select:disabled { opacity: .55; cursor: not-allowed; }

#tb-store-locator .tb-filters__count {
  flex: 0 0 auto;
  align-self: flex-end;
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--tb-orange-deep);
  background: var(--tb-orange-tint);
  border: 1.5px dashed var(--tb-orange);
  border-radius: 999px;
  margin: 0;
  padding: 11px 20px;
  white-space: nowrap;
}

#tb-store-locator .tb-filters__count strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: inherit;
}

/* ---------- Layout 2 cột ---------- */

#tb-store-locator .tb-layout {
  display: grid;
  grid-template-columns: minmax(330px, 5fr) 7fr;
  grid-template-areas: "list map"; /* DOM để map trước, nhưng desktop vẫn xếp list bên trái */
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
  align-items: start;
}

/* ---------- Cột trái: danh sách ---------- */

#tb-store-locator .tb-list-panel {
  grid-area: list;
  max-height: 640px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 10px 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--tb-orange) transparent;
}

#tb-store-locator .tb-list-panel::-webkit-scrollbar { width: 8px; }
#tb-store-locator .tb-list-panel::-webkit-scrollbar-thumb {
  background: var(--tb-orange);
  border-radius: 999px;
}

#tb-store-locator ol.tb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#tb-store-locator .tb-list .tb-card {
  list-style: none;
  background: var(--tb-milk);
  border: 1.5px solid var(--tb-line);
  border-radius: var(--tb-radius);
  margin: 0;
  padding: 16px 18px;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: tb-rise .45s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes tb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

#tb-store-locator .tb-card:hover {
  transform: translateY(-3px);
  border-color: var(--tb-orange);
  box-shadow: var(--tb-shadow);
}

/* phản hồi khi chạm — thay cho hover vốn không có trên màn cảm ứng */
#tb-store-locator .tb-card:active { transform: scale(.985); }

#tb-store-locator .tb-card.is-active {
  border-color: var(--tb-orange);
  background: linear-gradient(135deg, var(--tb-orange-tint), var(--tb-milk) 70%);
  box-shadow: var(--tb-shadow);
}

/* "ống hút" cam-vàng bên trái thẻ đang chọn */
#tb-store-locator .tb-card.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--tb-orange), var(--tb-yellow));
}

#tb-store-locator .tb-card__name {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tb-ink);
}

#tb-store-locator .tb-card.is-active .tb-card__name { color: var(--tb-orange-deep); }

#tb-store-locator .tb-card__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--tb-ink-soft);
  margin: 5px 0;
  padding: 0;
  line-height: 1.45;
}

#tb-store-locator .tb-card__icon {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: 2px 0 0;
  fill: var(--tb-orange);
}

#tb-store-locator .tb-card__area {
  display: inline-block;
  margin: 9px 0 0;
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: none;
  color: var(--tb-green-deep);
  background: var(--tb-green-tint);
  border-radius: 999px;
}

#tb-store-locator a.tb-card__hotline {
  font-weight: 700;
  color: var(--tb-orange-deep);
  background: none;
  text-decoration: none;
  box-shadow: none;
  border: 0;
  border-bottom: 2px dotted rgba(194, 69, 3, .45);
  transition: color .15s, border-color .15s;
}

#tb-store-locator a.tb-card__hotline:hover,
#tb-store-locator a.tb-card__hotline:focus {
  color: var(--tb-ink);
  background: none;
  text-decoration: none;
  border-bottom-color: var(--tb-ink);
}

/* ---------- Nút "Xem thêm" ---------- */

/* Khai báo đầy đủ: theme thường áp text-transform/letter-spacing/box-shadow
   /min-height/màu nền primary lên mọi thẻ button. */
#tb-store-locator button.tb-load-more {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 14px 0 0;
  padding: 13px 18px;
  font-family: var(--tb-font-display);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  color: var(--tb-orange-deep);
  background: var(--tb-orange-tint) none;
  border: 1.5px dashed var(--tb-orange);
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .2s, transform .15s;
}

/* display:block ở trên sẽ đè thuộc tính hidden của trình duyệt nếu thiếu dòng này */
#tb-store-locator button.tb-load-more[hidden] { display: none; }

#tb-store-locator button.tb-load-more:hover,
#tb-store-locator button.tb-load-more:focus {
  background: #FDDCBF;
  color: var(--tb-orange-deep);
  border-color: var(--tb-orange);
  box-shadow: none;
  outline: none;
}
#tb-store-locator button.tb-load-more:active { transform: scale(.98); }

/* ---------- Trạng thái rỗng ---------- */

#tb-store-locator .tb-empty {
  text-align: center;
  margin: 0;
  padding: 56px 20px;
  background: var(--tb-milk);
  border: 1.5px dashed var(--tb-line);
  border-radius: var(--tb-radius);
}

#tb-store-locator .tb-empty__cup { font-size: 3rem; animation: tb-float 1.8s ease-in-out infinite; }

#tb-store-locator .tb-empty__title {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 12px 0 4px;
  padding: 0;
  color: var(--tb-ink);
}

#tb-store-locator .tb-empty__hint { color: var(--tb-ink-soft); margin: 0; padding: 0; font-size: .95rem; }

/* ---------- Cột phải: bản đồ ---------- */

#tb-store-locator .tb-map-panel {
  grid-area: map;
  position: sticky;
  top: 18px;
  margin: 0;
  padding: 0;
}

#tb-store-locator .tb-map-card {
  background: var(--tb-milk);
  border: 1.5px solid var(--tb-line);
  border-radius: calc(var(--tb-radius) + 6px);
  box-shadow: var(--tb-shadow);
  overflow: hidden;
  margin: 0;
}

#tb-store-locator .tb-map-card__caption {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--tb-orange-deep);
  background: linear-gradient(90deg, var(--tb-orange-tint), var(--tb-milk));
  border-bottom: 1.5px solid var(--tb-line);
  margin: 0;
  padding: 13px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tb-store-locator iframe.tb-map-card__frame {
  display: block;
  width: 100%;
  height: 584px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--tb-cream);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* mobile: ẩn hẳn cột bản đồ — bản đồ chỉ mở (accordion) ngay dưới thẻ
     cửa hàng được chạm. Trang mở lần đầu không tải Google Maps -> nhanh hơn. */
  #tb-store-locator .tb-layout { display: block; }
  #tb-store-locator .tb-map-panel { display: none; }
  #tb-store-locator .tb-list-panel { max-height: none; overflow: visible; padding: 0; }
}

/* ---------- Bản đồ inline dưới thẻ (mobile) ---------- */

#tb-store-locator .tb-inline-map { display: none; }

@media (max-width: 900px) {
  #tb-store-locator .tb-list .tb-inline-map {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    animation: tb-expand .35s ease-out both;
  }

  #tb-store-locator .tb-inline-map__inner {
    background: var(--tb-milk);
    border: 1.5px solid var(--tb-orange);
    border-radius: var(--tb-radius);
    overflow: hidden;
    box-shadow: var(--tb-shadow);
  }

  #tb-store-locator .tb-inline-map iframe.tb-inline-map__frame {
    display: block;
    width: 100%;
    height: 300px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--tb-cream);
  }

  @keyframes tb-expand {
    from { max-height: 0; opacity: .35; }
    to   { max-height: 420px; opacity: 1; }
  }
}

@media (max-width: 560px) {
  #tb-store-locator .tb-filters__count { width: 100%; text-align: center; }
  #tb-store-locator .tb-header__logo { height: 84px; }
}