/* ============================================================================
 * search.css — Popup tìm kiếm (.aq-search-area) dạng THẺ GỌN thả xuống từ header
 * (dưới icon kính lúp): icon trái + nền xám, gợi ý sản phẩm gắn ngay bên dưới.
 * Tách riêng (CLAUDE.md 6.3). Tái dùng JS gợi ý (search-suggest.js). Responsive.
 * ========================================================================== */

:root {
    --se-accent: var(--aq-common-red, #e11d2a);
    --se-ink: #16181c;
    --se-muted: #8a9098;
    --se-line: #e6e8ec;
    --se-soft: #f3f4f6;
}

/* ---- Thẻ gọn neo góc trên-phải (dưới icon kính lúp ở header) ------------- */
.oe-search.aq-search-area {
    width: min(440px, calc(100vw - 24px));
    inset-inline-start: auto;
    inset-inline-end: 16px;
    padding: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .16);
    overflow: visible;                 /* KHÔNG cắt dropdown gợi ý */
}

/* Bỏ giới hạn chiều cao + overflow của theme để dropdown không bị cắt */
.oe-search .aq-search-inner-wrap {
    max-height: none;
    overflow: visible;
}

/* Vô hiệu .container bên trong để thẻ ôm sát nội dung */
.oe-search .aq-search-inner-wrap .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.oe-search-panel {
    max-width: none;
    margin: 0;
    padding: 14px;
}

/* Màn nhỏ: gần full-width, canh giữa cho dễ thao tác */
@media (max-width: 575px) {
    .oe-search.aq-search-area {
        width: calc(100vw - 20px);
        inset-inline-start: 10px;
        inset-inline-end: 10px;
    }
}

/* ---- Thanh tìm kiếm: nền xám nhạt, icon trái, không nút submit ---------- */
.oe-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    margin-bottom: 0 !important;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--se-soft);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.oe-search-form:focus-within {
    background: #fff;
    border-color: var(--se-line);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .07);
}

.oe-search-ico { flex: 0 0 auto; color: var(--se-muted); }

/* Override rule input toàn cục của theme (height 46/padding 20-60/box-shadow) */
.oe-search-form input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 14.5px;
    color: var(--se-ink);
}

.oe-search-form input[type="text"]::placeholder { color: var(--se-muted); font-weight: 400; }

/* Ẩn nút submit — dùng icon kính lúp bên trái + gợi ý trực tiếp */
.oe-search-submit.aq-search-input-btn { display: none !important; }

/* ---- Dropdown gợi ý (gắn ngay dưới thanh; search-suggest.js render .oe-ss-*) */
.oe-search-form .oe-ss-box {
    top: calc(100% + 8px);
    border-radius: 10px;
    border-color: var(--se-line);
    box-shadow: 0 16px 44px rgba(15, 23, 42, .16);
    max-height: 70vh;
}

.oe-search-form .oe-ss-item { padding: 10px 12px; }
.oe-search-form .oe-ss-thumb { flex-basis: 48px; width: 48px; height: 48px; border-radius: 8px; }
.oe-search-form .oe-ss-name { font-weight: 500; font-size: 13.5px; }
.oe-search-form .oe-ss-price { font-size: 13.5px; }