/*
  Trang kết quả tìm kiếm (Search/Views/Search/Index.cshtml, template tim-kiem.html) - tiền tố .sr-.
  Màu theo thương hiệu: navy chủ đạo (--brand-navy), cam đỏ nhấn (--brand-orange). 1rem = 10px.
*/
.sr [hidden] { display: none !important; }
.sr .menu-icon { display: block; width: 100%; height: 100%; }

/* Hộp tiêu đề + tìm lại */
.sr-head { border: 1px solid var(--color-border, #e3e8f0); }
.sr-summary { margin: 0 0 1.6rem; color: var(--color-neutral-300); font-size: 1.5rem; }
.sr-summary b { color: var(--brand-navy, #0B2D66); }
.sr-form { display: flex; gap: .8rem; max-width: 64rem; margin: 0 auto; }
.sr-form input {
  flex: 1 1 auto; min-width: 0; height: 4.8rem; padding: 0 1.6rem; border: 1px solid var(--color-border, #e3e8f0);
  border-radius: 99rem; font: inherit; font-size: 1.5rem; background: #fff;
}
.sr-form input:focus { outline: none; border-color: var(--brand-navy, #0B2D66); box-shadow: 0 0 0 3px rgba(11, 45, 102, .12); }
.sr-form .btn { display: inline-flex; align-items: center; gap: .8rem; height: 4.8rem; padding: 0 2.4rem; border-radius: 99rem; flex: 0 0 auto; }

/* Gợi ý nhanh */
.sr-links { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 2rem 0 0; }
.sr-links__label { font-weight: 700; color: var(--brand-navy, #0B2D66); margin-right: .4rem; }
.sr-link {
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-radius: 99rem;
  background: #fff; border: 1px solid var(--brand-navy-line, #CFDCF0); color: var(--brand-navy, #0B2D66); font-weight: 600; font-size: 1.4rem;
  transition: border-color .2s, background .2s;
}
.sr-link:hover { border-color: var(--brand-orange, #F26522); background: var(--brand-orange-soft, #FFEFE6); }
.sr-link__icon { width: 1.6rem; height: 1.6rem; color: var(--brand-orange, #F26522); }
.sr-link small { font-weight: 400; color: var(--color-neutral-200); font-size: 1.2rem; }

/* Tab nhóm + sắp xếp */
.sr-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin: 2.8rem 0 2rem; }
.sr-tabs { display: flex; flex-wrap: wrap; gap: .8rem; }
.sr-tab {
  display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; border-radius: 99rem;
  border: 1px solid var(--color-border, #e3e8f0); background: #fff; color: var(--brand-navy, #0B2D66); font-weight: 700; font-size: 1.5rem;
  transition: background .2s, color .2s, border-color .2s;
}
.sr-tab__icon { width: 2rem; height: 2rem; }
.sr-tab__count { min-width: 2.4rem; padding: 0 .7rem; border-radius: 99rem; background: var(--brand-navy-soft, #EEF3FB); font-size: 1.3rem; line-height: 2.4rem; text-align: center; }
.sr-tab:hover { border-color: var(--brand-navy, #0B2D66); }
.sr-tab.is-active { background: var(--brand-navy, #0B2D66); border-color: var(--brand-navy, #0B2D66); color: #fff; }
.sr-tab.is-active .sr-tab__count { background: var(--brand-orange, #F26522); color: #fff; }
.sr-tab.is-empty:not(.is-active) { opacity: .55; }
.sr-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.4rem; color: var(--color-neutral-300); }
.sr-sort__item { padding: .5rem 1.2rem; border-radius: 99rem; color: var(--color-neutral-400); }
.sr-sort__item:hover { color: var(--brand-navy, #0B2D66); }
.sr-sort__item.is-active { background: var(--brand-navy-soft, #EEF3FB); color: var(--brand-navy, #0B2D66); font-weight: 600; }

.sr-grid-wrap { padding: 0; }
.sr .rp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Không có kết quả */
.sr-empty { margin-top: 2.4rem; padding: 2.4rem; border: 1px dashed var(--color-border, #e3e8f0); border-radius: 1.2rem; text-align: center; background: #fff; }
.sr-empty p { margin: 0; }
.sr-empty__link { margin: 0 .6rem; color: var(--brand-orange, #F26522); font-weight: 700; text-decoration: underline; }
.sr-empty--none { padding: 4rem 2rem; }
.sr-empty__icon { display: block; width: 5.6rem; height: 5.6rem; margin: 0 auto 1.2rem; color: var(--brand-navy, #0B2D66); }
.sr-empty__title { font-size: 2rem; font-weight: 800; color: var(--brand-navy, #0B2D66); margin-bottom: .6rem !important; }
.sr-keywords { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem; margin-top: 2rem; }
.sr-keywords span { font-weight: 600; }
.sr-keyword { padding: .5rem 1.4rem; border-radius: 99rem; background: var(--brand-navy-soft, #EEF3FB); color: var(--brand-navy, #0B2D66); font-size: 1.4rem; }
.sr-keyword:hover { background: var(--brand-navy, #0B2D66); color: #fff; }
.sr-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.4rem; }
.sr-btn-ghost { border: 1px solid var(--brand-navy, #0B2D66); color: var(--brand-navy, #0B2D66); background: #fff; }
.sr-btn-ghost:hover { background: var(--brand-navy, #0B2D66); color: #fff; }

@media (max-width: 1023px) { .sr .rp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sr .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .sr-form .btn span { display: none; }
  .sr-form .btn { padding: 0 1.8rem; }
  .sr-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sr-tab { flex: 0 0 auto; padding: .8rem 1.4rem; font-size: 1.4rem; }
  .sr-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .sr-link { flex: 0 0 auto; }
}

/* =====================================================================
   Drawer tìm kiếm (#search-drawer, Search/Views/Shared/Components/SearchForm/Default.cshtml)
   ===================================================================== */
#search-drawer .portal-inner { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--color-background, #fff); }
#search-drawer .search-bar { padding: 0 .8rem 2rem; }
#search-drawer .search-dropdown { position: static !important; display: block !important; max-height: none; margin-top: 1.2rem; padding: 0; box-shadow: none; background: transparent; }
#search-drawer .search-loading { display: none; }
#search-drawer quick-search.loading .search-loading { display: flex; position: static; transform: none; height: 4rem; }
#search-drawer quick-search.loading .search-loading .loading-icon { display: flex; }
.sd-quick__group { margin-top: 1.8rem; }
.sd-quick__title { margin: 0 0 1rem; font-weight: 700; font-size: 1.4rem; color: var(--brand-navy, #0B2D66); text-transform: uppercase; letter-spacing: .02em; }
.sd-quick__chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.sd-quick__chip {
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-radius: 99rem; font-size: 1.4rem; font-weight: 600;
  border: 1px solid var(--brand-navy-line, #CFDCF0); background: var(--brand-navy-soft, #EEF3FB); color: var(--brand-navy, #0B2D66);
}
.sd-quick__chip:hover { background: var(--brand-navy, #0B2D66); border-color: var(--brand-navy, #0B2D66); color: #fff; }
.sd-quick__chip .menu-icon { width: 1.6rem; height: 1.6rem; display: block; }
/* Gợi ý khi gõ (ega-store.js renderSuggest) */
.ega-suggest-group + .ega-suggest-group { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--color-border, #e3e8f0); }
.ega-suggest-title { margin: 0 0 .6rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; color: var(--brand-navy, #0B2D66); }
.ega-suggest-count { color: var(--color-neutral-200); font-weight: 400; }
.ega-suggest-item:hover { background: var(--brand-navy-soft, #EEF3FB); }
.ega-suggest-item img { flex: 0 0 5.6rem; width: 5.6rem; height: 4.2rem; object-fit: cover; border-radius: .8rem; }
.ega-suggest-item .price { color: var(--brand-orange, #F26522); font-weight: 700; font-size: 1.3rem; }
.ega-suggest-meta { color: var(--color-neutral-200); font-size: 1.3rem; }
.ega-suggest-links { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 .8rem; }
.ega-suggest-all { margin-top: 1.6rem; display: flex; justify-content: center; }