/* ==========================================================
   Header desktop: ô tìm kiếm, nút thao tác, gợi ý tìm kiếm
   Dược Giá Sỉ 2026 – nạp sau brand.css / footer.css
   ========================================================== */
.header_bottom { gap: 24px; }
.header_bottom .img-logo { flex: 0 0 auto; }

/* ---------- Ô tìm kiếm ---------- */
.header_bottom .search-input {
    flex: 1 1 auto; width: auto !important; max-width: 640px; padding: 0 !important; position: relative;
}
.header_bottom .search-input input,
.active .header_bottom .search-input input {
    width: 100%; height: 46px; padding: 0 128px 0 16px !important; font-size: 14.5px; color: var(--brand-ink, #0E1A2B);
    background: #fff !important; border: 2px solid transparent !important; border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(6, 27, 68, .18); transition: border-color .15s, box-shadow .15s;
}
.header_bottom .search-input input::placeholder { color: #8695AA; }
.header_bottom .search-input input:focus {
    outline: none; border-color: var(--brand-blue, #1C88D0) !important; box-shadow: 0 0 0 4px rgba(28, 136, 208, .25);
}
.header_bottom .search-input span.btn-search {
    position: absolute !important; top: 4px !important; right: 4px !important; height: 38px !important; width: 56px; padding: 0 !important;
    display: flex; align-items: center; justify-content: center; border-radius: 6px !important;
    background: var(--brand-blue, #1C88D0) !important; box-shadow: none !important; cursor: pointer; transition: background .15s;
}
.header_bottom .search-input span.btn-search:hover { background: var(--brand-blue-dark, #1673B2) !important; }
.header_bottom .search-input span.btn-search i { font-size: 16px !important; color: #fff !important; }
.header_bottom .search-input span.clear-text {
    position: absolute !important; top: 50% !important; right: 70px !important; transform: translateY(-50%);
    width: 26px !important; height: 26px !important; border-radius: 6px !important; padding: 0 !important; margin: 0 !important;
    display: flex; align-items: center; justify-content: center; background: #EEF2F7 !important; color: #5B6B80 !important;
    border: 0 !important; box-shadow: none !important; font-size: 13px; cursor: pointer; line-height: 1;
}
.header_bottom .search-input span.clear-text:hover { background: #DCE6F0 !important; color: var(--brand-navy, #0B2D6E) !important; }
.header_bottom .search-input span.clear-text.hide { display: none !important; }

/* ---------- Bảng gợi ý ---------- */
.header_bottom div.show-tu-khoa {
    top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; width: auto !important;
    padding: 8px !important; border-radius: 8px !important; background: #fff; border: 1px solid #DCE6F0;
    box-shadow: 0 18px 40px -12px rgba(6, 27, 68, .35); z-index: 1000;
}
div.show-tu-khoa p {
    margin: 6px 8px 8px !important; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #5B6B80;
}
div.show-tu-khoa div.list-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 8px 10px !important; }
div.show-tu-khoa div.list-key span {
    margin: 0 !important; padding: 5px 12px !important; border-radius: 6px !important; border: 1px solid #DCE6F0 !important;
    background: #F5F8FC; font-size: 13px !important; color: var(--brand-ink, #0E1A2B) !important;
}
div.show-tu-khoa div.list-key span:hover { background: #EAF3FB; border-color: var(--brand-blue, #1C88D0) !important; color: var(--brand-navy, #0B2D6E) !important; }
div.show-tu-khoa:has(ul.ajax_search_result.active) > p,
div.show-tu-khoa:has(ul.ajax_search_result.active) > .list-key { display: none !important; }

ul.ajax_search_result.wrap-suggestion {
    border: 0 !important; max-height: min(460px, 70vh); overflow-y: auto; padding: 0 !important; margin: 0 !important; background: #fff;
}
ul.ajax_search_result:empty { display: none !important; }
.wrap-suggestion li.sr-head {
    display: flex !important; justify-content: space-between; align-items: center; padding: 6px 10px 8px; border: 0 !important;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #5B6B80; cursor: default; background: #fff !important;
    position: sticky; top: 0; z-index: 2;
}
.wrap-suggestion li.sr-head em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: #8695AA; }
.wrap-suggestion li.sr-item { border: 0 !important; border-radius: 6px; background: transparent !important; }
.wrap-suggestion li.sr-item + li.sr-item { border-top: 1px solid #EEF2F7 !important; }
.wrap-suggestion li.sr-item a.sr-link {
    display: flex !important; align-items: center; gap: 12px; padding: 8px 10px !important; border-radius: 6px; text-decoration: none; color: inherit;
}
.wrap-suggestion li.sr-item:hover { background: #F2F7FC !important; }
.wrap-suggestion li.sr-item .sr-thumb {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 6px; border: 1px solid #DCE6F0; background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.wrap-suggestion li.sr-item .sr-thumb img { float: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: contain; padding: 3px; }
.wrap-suggestion .sr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wrap-suggestion .sr-name {
    font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--brand-ink, #0E1A2B);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wrap-suggestion .sr-name mark { background: transparent; color: var(--brand-blue, #1C88D0); font-weight: 700; padding: 0; }
.wrap-suggestion .sr-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wrap-suggestion .sr-price { font-size: 14px; font-weight: 700; color: #D62828; }
.wrap-suggestion .sr-price--contact { color: var(--brand-blue, #1C88D0); font-weight: 600; font-size: 13px; }
.wrap-suggestion .sr-old { font-size: 12px; color: #8695AA; text-decoration: line-through; }
.wrap-suggestion .sr-sku { font-size: 12px; color: #8695AA; }
.wrap-suggestion .sr-go { color: #B7C3D3; font-size: 12px; transition: transform .15s, color .15s; }
.wrap-suggestion li.sr-item:hover .sr-go { color: var(--brand-blue, #1C88D0); transform: translateX(3px); }
.wrap-suggestion li.sr-all { border: 0 !important; border-top: 1px solid #EEF2F7 !important; background: #fff !important; position: sticky; bottom: 0; }
.wrap-suggestion li.sr-all a {
    display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px !important;
    font-size: 13.5px; font-weight: 600; color: var(--brand-blue, #1C88D0) !important; text-decoration: none;
}
.wrap-suggestion li.sr-all a:hover { color: var(--brand-navy, #0B2D6E) !important; }
.ajax_search_result::-webkit-scrollbar { width: 6px; }
.ajax_search_result::-webkit-scrollbar-thumb { background: #C9D5E3; border-radius: 3px; }
.ajax_search_result::-webkit-scrollbar-track { background: transparent; }

/* ---------- Nút thao tác: Thông báo / Giỏ hàng / Tài khoản ---------- */
.header_bottom .header_bottom-right.hd-actions {
    width: auto !important; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; position: relative;
}
.hd-actions a.hd-action {
    display: flex !important; align-items: center; gap: 10px; padding: 6px 10px !important; border-radius: 8px !important;
    color: #fff !important; text-decoration: none; transition: background .15s;
}
.hd-actions a.hd-action:hover { background: rgba(255, 255, 255, .08) !important; }
.hd-action__icon {
    position: relative; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 17px; transition: background .15s, border-color .15s;
}
.hd-actions a.hd-action:hover .hd-action__icon { background: var(--brand-blue, #1C88D0); border-color: var(--brand-blue, #1C88D0); }
.hd-action__text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.hd-action__text small { font-size: 11.5px; color: #A9BEDF; font-weight: 400; }
.hd-action__text strong { font-size: 13.5px; color: #fff; font-weight: 600; }
.hd-actions .hd-badge {
    position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important; min-width: 19px; height: 19px; padding: 0 5px !important;
    border-radius: 10px !important; background: #E5383B !important; color: #fff; font-size: 11px !important; font-weight: 700; line-height: 15px;
    display: flex !important; align-items: center; justify-content: center; border: 2px solid var(--brand-navy, #0B2D6E) !important;
}
.hd-actions .hd-badge.is-empty { display: none !important; }

.hd-account { position: relative; }
.hd-account ul.profile.hd-dropdown {
    display: block !important; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
    position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; width: 230px !important;
    margin: 0 !important; padding: 6px !important; list-style: none; background: #fff; border: 1px solid #DCE6F0;
    border-radius: 8px !important; box-shadow: 0 18px 40px -12px rgba(6, 27, 68, .35) !important; z-index: 1200;
}
.hd-account ul.profile.hd-dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.hd-account:hover ul.profile.hd-dropdown, .hd-account:focus-within ul.profile.hd-dropdown { visibility: visible; opacity: 1; transform: none; }
.hd-account ul.profile.hd-dropdown li { padding: 0 !important; }
.hd-account ul.profile.hd-dropdown li a {
    display: flex !important; align-items: center; gap: 10px; padding: 10px 12px !important; border-radius: 6px;
    color: var(--brand-ink, #0E1A2B) !important; font-size: 13.5px; text-decoration: none;
}
.hd-account ul.profile.hd-dropdown li a i { width: 16px; text-align: center; color: var(--brand-blue, #1C88D0); }
.hd-account ul.profile.hd-dropdown li a:hover { background: #EAF3FB; color: var(--brand-navy, #0B2D6E) !important; }

@media (max-width: 1200px) {
    .hd-action__text small { display: none; }
    .hd-actions a.hd-action { padding: 6px 6px !important; gap: 8px; }
}
@media (max-width: 1100px) {
    .hd-action__text { display: none; }
}
.header_bottom .header_bottom-right.hd-actions .cart-header span.hd-action__icon i,
.hd-actions .hd-action__icon i { font-size: 17px !important; padding: 0 !important; color: #fff; }
.header_bottom .header_bottom-right.hd-actions .cart-header { font-size: inherit; }
/* Không có từ khoá gợi ý và chưa có kết quả: không hiện khung rỗng */
div.show-tu-khoa:not(:has(.list-key)):not(:has(ul.ajax_search_result.active)) { display: none !important; }

/* Mobile: kết quả gợi ý dùng chung giao diện */
.header_mobile ul.ajax_search_result.active { background: #fff; border-radius: 8px !important; box-shadow: 0 18px 40px -12px rgba(6, 27, 68, .35); padding: 4px !important; margin-top: 6px !important; }
.header_mobile .wrap-suggestion .sr-name { font-size: 13.5px; }
.header_mobile .wrap-suggestion li.sr-item .sr-thumb { flex-basis: 46px; width: 46px; height: 46px; }
/* Chặn rule cũ ".header_mobile .col-12 span" làm lệch nội dung gợi ý */
.wrap-suggestion li.sr-item span, .wrap-suggestion li.sr-head span, .wrap-suggestion li.sr-head em {
    position: static !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 !important;
}
.header_mobile .col-12 span.clear-text {
    width: 26px !important; height: 26px !important; border-radius: 6px !important; background: #EEF2F7 !important; color: #5B6B80 !important;
    display: flex; align-items: center; justify-content: center; border: 0 !important; box-shadow: none !important; font-size: 13px; padding: 0 !important;
    top: 50% !important; transform: translateY(-50%); right: 12px !important; left: auto !important;
}
.header_mobile .col-12 span.clear-text.hide { display: none !important; }
.header_mobile .col-12 span.clear-text { top: 35px !important; right: 20px !important; }