/* ============================================================================
   Auto-suggest (typeahead) dropdown cho ô tìm kiếm. JS (app.js > initSuggest)
   chèn <div class="sug-pop"> vào trong form.sug-form và đổ fragment listbox vào.
   Mobile-first; bám design tokens (surface/border/shadow/radius). Mục option cao
   ≥44px (vùng chạm). Không hardcode màu — dùng var(--…).
   ============================================================================ */

/* Form phải relative để dropdown neo theo ô nhập. .ahh-search/.rail-search vốn là
   flex hàng ngang — thêm position không phá layout. */
.sug-form { position: relative; }

.sug-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: min(70vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sug-pop[hidden] { display: none; }

.sug-list { list-style: none; margin: 0; padding: 6px; }

.sug-group {
  padding: 8px 10px 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sug-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
}
.sug-opt:hover,
.sug-opt.on { background: var(--surface-2); }
.sug-opt.on { outline: 2px solid var(--accent-soft); outline-offset: -2px; }

.sug-thumb {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-3);
}
.sug-thumb-av { border-radius: var(--r-pill); }
.sug-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.sug-thumb-fb { color: var(--muted); display: grid; place-items: center; }
.sug-thumb-fb .fa-icon { width: 18px; height: 18px; }

.sug-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sug-title {
  font-weight: 400; font-size: .85rem; color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sug-sub {
  font-size: .82rem; color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sug-kind { flex: none; color: var(--muted); }
.sug-kind .fa-icon { width: 15px; height: 15px; }

/* Lối tắt "Tìm tất cả" — ngăn cách với danh sách, nhấn nhẹ màu brand. */
.sug-all {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.sug-all .sug-title { color: var(--accent); font-weight: 600; }
.sug-all .sug-thumb { background: var(--accent-soft); }
.sug-all .sug-thumb-fb { color: var(--accent); }