/* ---------------------------------------------------------------------------
   Tìm kiếm: ô trên thanh điều hướng và trang kết quả.
   --------------------------------------------------------------------------- */

/* --- Ô tìm kiếm trên thanh điều hướng --- */

.nv-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

.nv-search-form {
  display: flex;
  align-items: center;
}

/* Nút kính lúp giữ đúng dáng và màu của biểu tượng giỏ hàng bên cạnh. */
.nv-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nv-primary);
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.nv-search-btn:hover,
.nv-search-btn:focus {
  background: rgba(var(--nv-primary-rgb), .12);
  color: var(--nv-primary-deep);
  outline: none;
}

/* Ô nhập định vị tuyệt đối, mở ra phía bên TRÁI nút.

   Nằm ngoài dòng chảy nên lúc trượt ra nó không đẩy giỏ hàng với nút ngôn ngữ
   chạy sang chỗ khác - thanh điều hướng đứng yên, chỉ có ô nhập dài ra.
   Không dùng display:none/block vì như thế không có gì để chuyển động mượt;
   đóng lại là width 0 cộng opacity 0, và visibility để lúc đóng không bấm nhầm
   vào ô vô hình.

   `right: 36px` là mép trái của nút, KHÔNG chừa khe hở: chừa ra thì chuột đi từ
   nút sang ô nhập phải băng qua một quãng không thuộc về ai, mất :hover và ô
   đóng sập ngay trước mũi. Muốn cách nhau thì lấy padding bên trong nút, đừng
   lấy khoảng trống bên ngoài.

   Chiều cao bám theo thanh điều hướng: 90% của --nv-nav-h, biến này do
   measureNav() trong main.js đo rồi đặt. Có sẵn giá trị dự phòng để lúc chưa
   chạy JavaScript ô vẫn đúng dáng. */
.nv-search-input {
  position: absolute;
  right: 36px;
  top: 50%;
  width: 0;
  height: calc(var(--nv-nav-h, 61px) * .9);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: #17242f;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  /* Độ trễ 0,3s nằm ở trạng thái ĐÓNG, nên nó chỉ tính lúc đóng lại: chuột lỡ
     ra ngoài một nhịp rồi quay lại thì ô vẫn còn đó. Giống cách xử lý của danh
     sách đổi ngôn ngữ. */
  transition: width .28s ease .3s, opacity .2s ease .3s, padding .28s ease .3s;
}

/* Mở khi rê chuột, khi con trỏ đang ở trong ô (focus-within), hoặc khi JavaScript
   bật lớp is-open - trường hợp màn hình cảm ứng, vốn không có "rê chuột". */
.nv-search:hover .nv-search-input,
.nv-search:focus-within .nv-search-input,
.nv-search.is-open .nv-search-input {
  width: 300px;
  padding: 0 20px;
  border-color: #d7e0e8;
  opacity: 1;
  visibility: visible;
  box-shadow: 0 6px 18px rgba(23, 36, 47, .1);
  /* Mở ra thì mở ngay, không đợi - độ trễ ở trên chỉ dành cho lúc đóng. */
  transition-delay: 0s;
}

.nv-search-input:focus {
  border-color: var(--nv-primary);
  outline: none;
}

/* Trình duyệt nền WebKit tự thêm nút "x" xoá chữ, đè lên bo tròn của ô. */
.nv-search-input::-webkit-search-cancel-button {
  display: none;
}

/* --- Danh sách gợi ý --- */

/* Neo dưới ô nhập, canh phải theo nút kính lúp. Cùng bề ngang với ô nhập lúc mở.

   Là con của .nv-search nên rê chuột vào danh sách vẫn tính là đang rê chuột
   trong ô tìm kiếm (:hover truyền lên cha theo cây DOM, không theo vị trí trên
   màn hình) - đọc danh sách thoải mái mà ô không tự đóng. */
.nv-search-drop {
  /* Mặc định không hiện: chuột rời khỏi ô tìm kiếm là ô nhập đóng lại, mà danh
     sách gợi ý còn lơ lửng giữa trang thì rất vô duyên. Ba trạng thái mở bên
     dưới giống hệt của ô nhập, để hai thứ luôn đi cùng nhau. */
  display: none;
  position: absolute;
  top: calc(50% + var(--nv-nav-h, 61px) * .45 + 8px);
  right: 36px;
  width: 300px;
  /* Cao nhất là 62% màn hình, nhưng không quá 460px: cao hơn thì nó thành một
     trang con lơ lửng, chứ không còn là gợi ý để liếc qua. */
  max-height: min(62vh, 460px);
  overflow-y: auto;
  padding: 6px 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(23, 36, 47, .18);
  z-index: 1050;
  text-align: left;
}

/* :not([hidden]) để lúc JavaScript chưa có gì để hiện thì không bung ra một hộp
   trắng rỗng. */
.nv-search:hover .nv-search-drop:not([hidden]),
.nv-search:focus-within .nv-search-drop:not([hidden]),
.nv-search.is-open .nv-search-drop:not([hidden]) {
  display: block;
}

/* Tên mục, để biết dòng bên dưới là sản phẩm hay tin tức. */
.nv-search-drop-group {
  padding: 10px 16px 6px;
  color: var(--nv-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nv-search-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #17242f;
  font-size: 14px;
  line-height: 1.45;
}

.nv-search-drop-item:hover,
.nv-search-drop-item.is-active {
  background: rgba(var(--nv-primary-rgb), .08);
  color: var(--nv-primary-deep);
  text-decoration: none;
}

.nv-search-drop-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #eef3f7;
}

.nv-search-drop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* min-width: 0 để tên dài bị cắt bằng "…" thay vì kéo giãn cả dòng. */
.nv-search-drop-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nv-search-drop-item mark {
  padding: 0;
  background: transparent;
  color: var(--nv-primary);
  font-weight: 700;
}

.nv-search-drop-note {
  padding: 16px;
  color: #8a97a1;
  font-size: 14px;
  text-align: center;
}

/* Dính đáy khung: danh sách dài phải cuộn, mà cuộn thì dòng "Xem tất cả" trôi
   mất tăm - đúng lúc người ta cần nó nhất. */
.nv-search-drop-all {
  display: block;
  position: sticky;
  bottom: 0;
  margin-top: 6px;
  padding: 12px 16px;
  border-top: 1px solid #eef2f5;
  background: #fff;
  color: var(--nv-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.nv-search-drop-all:hover {
  background: rgba(var(--nv-primary-rgb), .08);
  text-decoration: none;
}

/* Trên thanh menu bung ra ở màn hình hẹp không có chuyện rê chuột, mà chỗ thì
   rộng - nên hiện thẳng ô nhập, không giấu sau biểu tượng nữa. */
@media (max-width: 991px) {
  .nv-search {
    width: 100%;
    margin: 8px 0;
  }

  .nv-search-form {
    width: 100%;
  }

  /* flex: 1 1 auto + min-width: 0 chứ không phải width: 100%: để 100% thì ô nhập
     chiếm trọn hàng và đẩy nút kính lúp ra ngoài mép màn hình. */
  .nv-search-input {
    position: static;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 16px;
    border-color: #d7e0e8;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nv-search-btn {
    margin-left: 8px;
    background: rgba(var(--nv-primary-rgb), .12);
  }

  /* Trong menu bung ra, danh sách gợi ý chạy hết bề ngang ngay dưới ô nhập. */
  .nv-search-drop {
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    width: auto;
    max-height: 50vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-search-input {
    transition: none;
  }
}

/* --- Trang kết quả --- */

.nv-search-page {
  padding-bottom: 20px;
}

/* Ô tìm lại, đặt ngay đầu trang kết quả: sửa từ khoá tại chỗ, khỏi cuộn ngược
   lên thanh điều hướng. */
.nv-search-again {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 0 0 28px;
}

.nv-search-again .form-control {
  height: 46px;
  border-radius: 10px;
}

.nv-search-again .btn {
  flex: 0 0 auto;
}

.nv-search-summary {
  margin: -8px 0 24px;
  color: #6b7a86;
}

.nv-search-group {
  margin-bottom: 34px;
}

/* Tiêu đề phân tầng: tên mục, số kết quả, và link xem tất cả đẩy sang phải. */
.nv-search-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(var(--nv-primary-rgb), .18);
}

.nv-search-group-title {
  margin: 0;
  color: var(--nv-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.nv-search-count {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(var(--nv-primary-rgb), .1);
  color: var(--nv-primary-deep);
  font-size: 12px;
  font-weight: 700;
}

.nv-search-group-more {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
}

.nv-search-list {
  display: grid;
  gap: 14px;
}

.nv-search-item {
  display: flex;
  gap: 16px;
  padding: 14px;
  border: 1px solid #e6ebef;
  border-radius: 12px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.nv-search-item:hover {
  border-color: rgba(var(--nv-primary-rgb), .45);
  box-shadow: 0 6px 18px rgba(23, 36, 47, .08);
}

.nv-search-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #eef3f7;
}

.nv-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* min-width: 0 để tiêu đề dài xuống dòng thay vì kéo giãn cả thẻ. */
.nv-search-body {
  flex: 1 1 auto;
  min-width: 0;
}

.nv-search-title {
  display: block;
  color: #17242f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.nv-search-title:hover {
  color: var(--nv-primary);
  text-decoration: none;
}

.nv-search-excerpt {
  margin: 6px 0 0;
  color: #6b7a86;
  font-size: 14px;
  line-height: 1.65;
}

.nv-search-item mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(var(--nv-primary-rgb), .18);
  color: inherit;
}

.nv-search-date {
  display: block;
  margin-top: 6px;
  color: #8a97a1;
  font-size: 12px;
}

/* Không có kết quả nào: một khối ở giữa, cùng kiểu với giỏ hàng trống. */
.nv-search-empty {
  max-width: 560px;
  margin: 10px auto 40px;
  padding: 40px 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 36, 47, .06);
  text-align: center;
}

.nv-search-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(var(--nv-primary-rgb), .1);
  color: var(--nv-primary);
  font-size: 34px;
}

.nv-search-empty h2 {
  margin: 0 0 10px;
  color: #17242f;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.nv-search-empty p {
  margin: 0;
  color: #6b7a86;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 575px) {
  .nv-search-item {
    gap: 12px;
  }

  .nv-search-thumb {
    width: 68px;
    height: 60px;
  }
}