/* Nha Khoa Ky Hoa - o tim kiem tren header
 * (dung chung trang chu + 38 trang sinh tu build.py)
 *
 * Vi sao la file rieng, giong css/ui.css va css/anim.css: trang chu KHONG nap
 * css/style.css (no co <style> inline rieng), nen moi thu dung chung phai nam
 * o file duoc CA HAI ben nap:
 *   - trang chu : _build/home_design.html  (<link> trong <head>)
 *   - 38 trang  : _build/build.py, ham head()
 * Thieu mot ben la nua site co o tim kiem, nua site khong - loi im lang.
 *
 * ⚠️ MAU HARDCODE, khong dung var(--brand-*): bien mau chi ton tai trong
 * css/style.css nen trang chu khong co. Dung var() thi o tim kiem mat mau
 * tren trang chu ma khong bao loi.
 *
 * ⚠️ Bang tim kiem dung position:absolute BAM VAO THE <header>, khong dung fixed.
 * Ly do: the <header> co `backdrop-filter: blur(14px)`, ma thuoc tinh do bien
 * header thanh khoi bao cua ca phan tu position:fixed ben trong (giong transform).
 * Viet fixed thi no van bam vao header chu khong bam man hinh - hanh vi danh lua
 * nguoi doc code. Header lai la position:sticky (tuc la phan tu co dinh vi) nen
 * absolute bam thang vao no, ket qua on dinh o ca hai he.
 *
 * ⚠️ Vi vay .kh-search KHONG duoc dat position:relative - dat vao la bang tim kiem
 * bam vao cai nut 44px thay vi bam ca chieu ngang header.
 *
 * ⚠️ Khong dung lop nen mo (backdrop) toan man hinh: no cung se bi giam trong
 * header vi ly do tren. Dong bang: bam ra ngoai, phim Esc, hoac nut Dong.
 *
 * ⚠️ Khoi [data-kh-search] nam trong <header>, KHONG nam trong <section>.
 * css/anim.css dang giau `section ~ section > * > *`; nam nham trong section la
 * ca o tim kiem bien mat. Xem ghi chu dau file css/anim.css.
 *
 * Tang z-index dang dung tren site (de khong dam nhau):
 *   thanh liên hệ nổi .kh-rail 99 - header sticky 100 - menu mobile 200.
 *   Lưu ý: .kh-rail cố ý THẤP hơn header (99 < 100), vì bảng kết quả tìm kiếm
 *   nằm bên trong header nên bị kẹp theo mức của header. Xem ghi chú trong ui.css.
 *   Bang tim kiem nam TRONG header nen z-index cua no chi so trong header.
 */

.kh-search{
  display: flex;
  align-items: center;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
}

/* ---------- Nut kinh lup tren header ---------- */

.kh-search__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #fff;
  border: 1px solid #d5cab6;
  border-radius: 999px;
  color: #14463b;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.kh-search__btn:hover{ border-color: #c2a15a; background: #fbf9f3; }
.kh-search__btn:active{ transform: translateY(1px); }
.kh-search__btn svg{ flex: none; }

/* ⚠️ CHI DUNG BIEU TUONG, KHONG kem chu "Tim kiem". Da thu roi va da bo:
   khung header rong toi da 1240px, ma logo + 7 muc menu + nut hotline gan nhu
   an het cho. Them chu vao la menu vo hai dong ngay tu man 1500px (dong chu
   "Trang chu" bi be doi), dong thoi dong phu "CHUYEN KHOA RANG HAM MAT" duoi
   logo cung xuong dong. Nut tron 44px la vua khit. Nguoi dung van hieu nho
   bieu tuong kinh lup + aria-label + title. */

/* ---------- Bang tim kiem ---------- */

/* top:100% = mep duoi cua the <header> (xem ghi chu dau file: bang bam vao
   <header> chu khong bam man hinh). Khong can biet header cao bao nhieu. */
.kh-search__panel{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 150;
  padding: 10px 0 0;
}

.kh-search.is-open .kh-search__panel{ display: block; }

.kh-search__inner{
  width: min(720px, calc(100% - 32px));
  margin-inline: auto;
  background: #fff;
  border: 1px solid #dcd3c3;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(14, 47, 39, .22);
  overflow: hidden;
  animation: kh-search-drop .22s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes kh-search-drop{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: none; }
}

/* ---------- Hang nhap tu khoa ---------- */

.kh-search__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eae3d3;
  background: #fbf9f3;
}
.kh-search__bar > svg{ flex: none; color: #1a5a4b; }

.kh-search__input{
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: #1c2b26;
  /* 16px tro len de iOS khong tu phong to trang khi bam vao o nhap */
  line-height: 1.4;
  padding: 6px 0;
}
.kh-search__input::placeholder{ color: #8a9490; font-weight: 400; }
/* Bo nut "x" mac dinh cua trinh duyet: da co nut Dong rieng, hai cai canh nhau roi mat */
.kh-search__input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }

.kh-search__close{
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dcd3c3;
  border-radius: 999px;
  background: #fff;
  color: #41514b;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.kh-search__close:hover{ border-color: #c2a15a; color: #14463b; }

/* ---------- Danh sach ket qua ---------- */

.kh-search__results{
  max-height: min(58vh, 430px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kh-search__hint{
  padding: 12px 16px 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a5a4b;
}

.kh-search__item{
  display: block;
  padding: 11px 16px;
  border-bottom: 1px solid #f1ece0;
  color: #1c2b26;
  text-decoration: none;
}
.kh-search__item:last-child{ border-bottom: none; }
.kh-search__item:hover,
.kh-search__item.is-active{ background: #f1f6f4; }
.kh-search__item.is-active{ outline: 2px solid #c2a15a; outline-offset: -2px; }

.kh-search__tag{
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e6efeb;
  color: #14463b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kh-search__title{
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #143a30;
  line-height: 1.35;
}

.kh-search__desc{
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  color: #5b6a64;
  line-height: 1.5;
  /* Gon 2 dong cho danh sach deu nhau */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Khong co ket qua / dang tai / loi ---------- */

.kh-search__msg{
  padding: 22px 18px 24px;
  text-align: center;
  color: #5b6a64;
  font-size: 0.9rem;
  line-height: 1.6;
}
.kh-search__msg strong{ display: block; color: #143a30; font-size: 1rem; margin-bottom: 6px; }
.kh-search__msg a{ color: #14463b; font-weight: 600; text-decoration: underline; }

.kh-search__foot{
  padding: 9px 16px;
  border-top: 1px solid #eae3d3;
  background: #fbf9f3;
  font-size: 0.76rem;
  color: #6c7a74;
}
.kh-search__foot a{ color: #14463b; font-weight: 600; }

/* ---------- Man hinh hep ---------- */

@media (max-width: 560px){
  .kh-search__inner{ width: calc(100% - 20px); border-radius: 14px; }
  .kh-search__results{ max-height: min(64vh, 380px); }
}

/* ---------- Ton trong lua chon cua nguoi dung ---------- */

@media (prefers-reduced-motion: reduce){
  .kh-search__inner{ animation: none; }
  .kh-search__btn,
  .kh-search__close{ transition: none; }
  .kh-search__btn:active{ transform: none; }
}
