/**
 * Target: Ajax Search Lite - Ultra-Lean Clean Style (Imperial Zen Palette)
 * Website: trankytra.vn
 * Standard: Refactored W3C CSS Layer - Zero Bloat & High Performance
 * Version: 2.0 (Mobile Virtual-Keyboard & Adaptive Positioning Fixed)
 */

@layer base, components, overrides;

@layer overrides {
    /* ===================================================================
       1. MÀU CHỮ VĂN BẢN KHI GÕ & PLACEHOLDER (NỀN GIẤY BẢN #FBF9F6)
       =================================================================== */
    body div.asl_w.asl_m input.orig,
    body div.asl_w.asl_m .pro_inner input.orig {
        color: #3c2415 !important;
        -webkit-text-fill-color: #3c2415 !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }

    body div.asl_w.asl_m .pro_inner input.orig::placeholder,
    body div.asl_w.asl_m .pro_inner input.orig::-webkit-input-placeholder {
        color: #7a6e65 !important;
        -webkit-text-fill-color: #7a6e65 !important;
        opacity: 0.85 !important;
    }

    body div.asl_w.asl_m .pro_inner input.autocomplete {
        color: rgba(122, 110, 101, 0.35) !important;
        -webkit-text-fill-color: rgba(122, 110, 101, 0.35) !important;
    }

    /* ===================================================================
       2. NÚT KÍNH LÚP & ICON (#8B4513)
       =================================================================== */
    body div.asl_w.asl_m .pro_inner .pro_search,
    body div.asl_w.asl_m .pro_inner .pro_magnifier { 
        background: #8b4513 !important; 
        transition: background 0.2s ease;
    }
    body div.asl_w.asl_m .pro_inner .pro_search:hover,
    body div.asl_w.asl_m .pro_inner .pro_magnifier:hover { 
        background: #6e350e !important; 
    }
    body div.asl_w.asl_m .pro_inner .pro_magnifier svg,
    body div.asl_w.asl_m .pro_inner .pro_search svg { 
        fill: #ffffff !important; 
    }

    /* ===================================================================
       3. KHUNG KẾT QUẢ TÌM KIẾM (DYNAMIC POPUP OVERLAY)
       =================================================================== */
    body div.asl_r.asl_w,
    div.asl_r.asl_w {
        position: absolute !important;
        width: min(92vw, 600px) !important;
        max-width: calc(100vw - 20px) !important;
        margin-top: 8px !important;
        background: #ffffff !important;
        border: 1px solid #e5dec9 !important;
        border-radius: 8px !important;
        box-shadow: 0 12px 32px rgba(60, 36, 21, 0.18) !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Danh sách mục kết quả cuộn mượt trên Di động */
    body div.asl_r .results {
        max-height: clamp(280px, 45vh, 500px) !important;
        max-width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Tối ưu thanh cuộn (Scrollbar) chuẩn Zen */
    body div.asl_r .results::-webkit-scrollbar {
        width: 5px;
    }
    body div.asl_r .results::-webkit-scrollbar-thumb {
        background: #c19a6b;
        border-radius: 4px;
    }

    /* ===================================================================
       4. MÀU HIGHLIGHT TỪ KHÓA ĐỎ NHẠT ZEN HOÀNG GIA & ITEM HOVER
       =================================================================== */
    body div.asl_r .results .item:hover,
    body div.asl_r .results .item.highlighted { 
        background: #fbf8f3 !important; 
    }

    body div.asl_r .results .item .asl_content h3 a {
        color: #3c2415 !important;
        font-family: inherit !important;
        font-weight: 600 !important;
    }

    body div.asl_r span.highlighted {
        background: #fce8e6 !important;
        color: #c0392b !important;
        border-radius: 3px !important;
        padding: 1px 5px !important;
        font-weight: 700 !important;
        display: inline-block !important;
    }

    body div.asl_r .asl_showmore {
        background: #8b4513 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        text-align: center !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
        transition: background 0.2s ease;
    }
    body div.asl_r .asl_showmore:hover {
        background: #6e350e !important;
    }

    /* ===================================================================
       5. DỌN SẠCH THÀNH PHẦN RÁC & CẮT PHẦN THỪA
       =================================================================== */
    body .asl_w .asl_sb,
    body .asl_w .promob_w,
    body .asl_w .asl_settings_btn,
    body div.asl_w .asl_settings { 
        display: none !important; 
    }
}