/* ==========================================================================
   PIN HOÀNG LONG — BẢNG GỢI Ý CỦA THANH TÌM KIẾM
   Làm 13/09/2026. Tách riêng khỏi hl-theme.css vì tệp đó đang có nhiều phiên
   cùng sửa; để riêng thì gỡ bỏ hay quay lui chỉ việc bỏ 1 dòng trong config.php.

   Khung ngoài .panel--search-result do theme.css (Ninico gốc) vẽ. Ở đây chỉ
   khoác lại cho hợp bộ HL và chữa mấy chỗ sai của nó — xem ghi chú từng khối.
   ========================================================================== */

/* ---- khung ngoài ---- */
.hl-search .panel--search-result {
    top: calc(100% + 8px);
    border: 1px solid var(--hl-line-2);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(80, 55, 10, .2);
    overflow: hidden;
    /* theme.css đặt transform: scaleZ(0) rồi scaleX(1) khi mở — scaleZ trên phần tử
       2D không có tác dụng gì ngoài việc tạo lớp dựng hình thừa, còn scaleX(1) làm
       chữ bị nhoè một nhịp trên màn thường. Bỏ hẳn biến đổi, chỉ mờ dần. */
    transform: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.hl-search .panel--search-result .panel__content {
    /* Cao hơn mức 400px cũ một chút và bám theo màn hình để trên máy thấp không bị
       tràn khỏi khung nhìn. */
    max-height: min(62vh, 436px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hl-line-2) transparent;
}

.hl-search .panel--search-result .panel__content::-webkit-scrollbar { width: 8px; }
.hl-search .panel--search-result .panel__content::-webkit-scrollbar-thumb {
    background: var(--hl-line-2);
    border-radius: 8px;
    border: 2px solid #fff;
}

/* ---- danh sách ---- */
.hl-sug__list { list-style: none; margin: 0; padding: 6px; }
.hl-sug__item { margin: 0; }

.hl-sug__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--hl-ink);
    text-decoration: none;
    transition: background-color .12s ease;
}

.hl-sug__link:hover,
.hl-sug__link:focus-visible,
.hl-sug__item.is-active .hl-sug__link {
    background: var(--hl-gold-soft);
    color: var(--hl-ink);
}

.hl-sug__link:focus-visible { outline: 2px solid var(--hl-gold-2); outline-offset: -2px; }

/* ---- ảnh ----
   ĐÂY LÀ CHỖ TỪNG HỎNG: thẻ img mang width/height 400 mà CSS chỉ ép chiều rộng,
   thiếu height nên ảnh bị kéo thành 103×400 và mỗi dòng cao 400px. Nay khung có
   kích thước cứng và ảnh luôn được ép cả hai chiều, không thể lặp lại. */
.hl-sug__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hl-surface-2);
    border: 1px solid var(--hl-line);
    display: block;
}

.hl-sug__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain chứ không phải cover: hàng kỹ thuật (mạch, cell, đầu nối) mà bị cắt
       mất mép thì khách khó nhận ra món hàng. */
    object-fit: contain;
}

/* ---- phần chữ ---- */
.hl-sug__body { flex: 1; min-width: 0; display: block; }

.hl-sug__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hl-ink);
}

.hl-sug__name mark {
    background: transparent;
    color: var(--hl-gold-ink);
    font-weight: 800;
    padding: 0;
}

.hl-sug__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: 3px;
}

.hl-sug__price { font-size: 14px; font-weight: 800; color: var(--hl-price); }
.hl-sug__old { font-size: 12px; color: var(--hl-muted); text-decoration: line-through; }

.hl-sug__sku {
    font-size: 12px;
    color: var(--hl-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hl-sug__sku mark { background: var(--hl-gold-soft); color: var(--hl-gold-ink); font-weight: 700; padding: 0 2px; border-radius: 3px; }

/* ---- chân bảng ---- */
.hl-search .panel--search-result .panel__footer {
    border-top: 1px solid var(--hl-line);
    background: var(--hl-surface-2);
    padding: 0;
}

.hl-sug__all {
    display: block;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    color: var(--hl-link);
    text-decoration: none;
}

.hl-sug__all:hover,
.hl-sug__all:focus-visible { background: var(--hl-gold-soft); color: var(--hl-ink-strong); }
.hl-sug__all:focus-visible { outline: 2px solid var(--hl-gold-2); outline-offset: -2px; }

/* ---- không có kết quả ---- */
.hl-sug__empty { padding: 22px 18px 8px; text-align: center; }
.hl-sug__empty-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--hl-ink); }
.hl-sug__empty-hint { margin: 5px 0 12px; font-size: 13px; color: var(--hl-muted); }
.hl-sug__empty .hl-sug__all { border-top: 1px solid var(--hl-line); }

/* ---- đang tải ---- */
.hl-search.is-searching button { opacity: .7; }

/* ---- màn hình nhỏ ---- */
@media (max-width: 767px) {
    .hl-search .panel--search-result { border-radius: 14px; }
    .hl-search .panel--search-result .panel__content { max-height: min(56vh, 360px); }
    .hl-sug__thumb { flex-basis: 48px; width: 48px; height: 48px; }
    .hl-sug__name { font-size: 13.5px; }
    .hl-sug__link { gap: 10px; padding: 8px; }
}