/**
 * search-overlay.css — trang tìm kiếm toàn màn hình mở ra khi bấm vào ô tìm sản phẩm
 * (điện thoại, tablet, desktop — xem public/js/search-page.js).
 *
 * Chỉ định vị overlay + bố cục thanh trên; chip/lưới/trạng thái rỗng TÁI DÙNG nguyên khuôn
 * CSS của trang "Đã lưu" (css/saved.css: .sv-chips/.sv-chip/.sv-section__head/.sv-state).
 */

/* Lớp phủ KHÔNG tự cuộn — phần cuộn nhường hẳn cho .sp-body bên dưới, còn .sp-head đứng yên
   như một phần tử flex. CỐ Ý không dùng position:sticky cho thanh tìm: trên iOS, một ô nhập
   nằm trong phần tử sticky BÊN TRONG một lớp phủ position:fixed tự cuộn làm Safari vẽ con trỏ
   gõ chữ lệch xuống dưới ô (chữ vẫn vào đúng ô, chỉ mỗi con trỏ vẽ sai chỗ). */
#search-page-content {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--text-normal);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

/* .sv-chips { display:flex } (saved.css) thắng [hidden] mặc định của trình duyệt vì cùng
   specificity (0-1-0) — không ép !important thì thuộc tính hidden không ẩn được phần tử. */
#search-page-content [hidden] {
  display: none !important;
}

.sp-head {
  flex: 0 0 auto;
  background: #fff;
}

/* Cùng bề ngang tối đa với .sp-wrap để thanh tìm thẳng hàng với nội dung bên dưới. */
.sp-head-in {
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-body {
  flex: 1 1 auto;
  /* min-height:0 là BẮT BUỘC: mặc định min-height của một flex item là `auto`, tức không co
     xuống dưới chiều cao nội dung — thiếu dòng này thì .sp-body cao bằng cả danh sách kết quả
     (đo được 3116px trên màn 812px), tràn khỏi lớp phủ và overflow-y không có gì để cuộn. */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Chặn cuộn "tràn" sang trang bên dưới khi chạm đáy/đỉnh .sp-body — không có dòng này,
     cuộn tiếp sau khi đã hết nội dung có thể bị trình duyệt chuyển sang cuộn phần tử NGOÀI
     lớp phủ (dù nó fixed, iOS vẫn có thể "chuyền" cử chỉ chạm ra ngoài ở biên cuộn). */
  overscroll-behavior: contain;
}

.sp-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 12px 2rem;
}

.sp-head .hdr-search {
  flex: 1;
  max-width: none;
}

/* Ô cuối dãy chip lịch sử: "Xoá tất cả". Cùng khuôn .sv-chip (css/saved.css) nhưng viền đứt
   + chữ mờ để đọc ra ngay đây là hành động, không phải một từ khoá đã tìm. */
.sv-chip--xoa {
  color: var(--text-normal-muted);
  border-style: dashed;
}

/* Mỗi loại kết quả (Sản phẩm/Dịch vụ/Bác sĩ/Tin tức) là một .sp-cat, dựng động trong
   #sp-sections mỗi lượt tìm (search-page.js) — mục nào rỗng thì không dựng, khỏi cần ẩn. */
.sp-cat { margin-top: 1.1rem; }
.sp-cat:first-child { margin-top: 0; }

.sp-cat-head {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0 0 .5rem;
}
.sp-cat-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 0;
}
.sp-cat-count {
  font-size: .8rem;
  color: var(--text-normal-muted);
}

/* Mục Sản phẩm: lưới 2 cột LUÔN CỐ ĐỊNH, mọi bề ngang. Thẻ dựng bằng dungTheGoiY()
   (search-page.js) mang lớp .dh-goiy-the — TÁI DÙNG nguyên kiểu thẻ "Có thể bạn cũng thích"
   của trang Đơn hàng (css/don-hang.css: chỉ ảnh/tên/giá, không nhãn giảm giá/thương hiệu/nút
   hành động). KHÔNG gắn thêm lớp .dh-goiy-luoi: lớp đó tự giãn 3 cột từ 640px trở lên, còn
   khung .sp-wrap ở đây rộng tối đa 680px nên muốn CỐ ĐỊNH 2 cột ở mọi bề ngang. */
.sp-cat[data-cat="san-pham"] .sp-cat-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

/* Ba mục còn lại (Dịch vụ/Bác sĩ/Tin tức) không có giá như sản phẩm — hợp lý hơn là DÒNG
   danh sách (ảnh nhỏ + tên/tiêu đề + một dòng phụ) thay vì lưới ảnh lớn. Viết riêng, không
   tái dùng chéo .dh-goiy-the/.dh-ds-mon của don-hang.css để khỏi phụ thuộc ngầm vào file
   khác có thể đổi hình dạng sau này. */
.sp-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  padding: .65rem 0;
  font: inherit;
  color: inherit;
}
.sp-cat-body .sp-row:last-child { border-bottom: 0; }

.sp-row-anh {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: #f2f2f2;
}
/* Bác sĩ chưa có ảnh, hoặc dịch vụ chưa gắn ảnh nào — bỏ hẳn khung thay vì hiện ô nền xám
   trống, cùng lẽ với buildCard() của service-grids.js khi một thẻ không có ảnh. */
.sp-row--khong-anh .sp-row-anh { display: none; }

.sp-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.sp-row-ten {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-header);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-row-phu {
  font-size: .82rem;
  color: var(--text-normal-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}