/* --- FONT & VARIABLES --- */
@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

        :root { --primary-orange: #f05a22; --dark-blue: #001529; }
        * { box-sizing: border-box; padding: 0; margin: 0; }
        body { font-family: 'Lato', sans-serif; overflow-x: hidden; }

        /* --- TOP BAR (Cam) --- */
        .top-bar { background: var(--primary-orange); color: #fff; padding: 6px 0; }
        .top-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; }
        
        .top-left { display: flex; align-items: center; gap: 8px; }
        .icon-delivery { width: 30px; height: auto; }
        .text-delivery { font-size: 12px; white-space: nowrap; }

        .top-right { display: flex; align-items: center; gap: 20px; }
        .top-link-item { 
            text-decoration: none; color: #fff; 
            display: flex; align-items: center; gap: 6px; /* Icon và Chữ nằm ngang */
            transition: 0.3s;
        }
        .top-link-item:hover { opacity: 0.8; }
        .top-link-item img { width: 18px; height: 18px; }
        .top-link-item span { font-size: 12px; font-weight: 500; }

        /* --- MAIN HEADER --- */
        .site-header { background: #fff; position: sticky; top: 0; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .main-header { max-width: 1200px; margin: 0 auto; padding: 10px 15px; display: flex; align-items: center; gap: 20px; }

        /* Logo */
        .logo-container { flex-shrink: 0; }
        .logo-container img { height: 45px; width: auto; }

        /* Search */
        .search-box { flex-grow: 1; display: flex; position: relative; }
        .search-input { width: 100%; height: 38px; padding: 0 45px 0 12px; border: 2px solid var(--primary-orange); border-radius: 4px; outline: none; font-size: 14px; }
        .search-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: var(--primary-orange); border: none; border-radius: 0 3px 3px 0; color: white; cursor: pointer; }

        /* Actions Desktop */
        .header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
        .action-item { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--dark-blue); }
        .action-img-icon { width: 28px; height: 28px; }
        .action-info { display: flex; flex-direction: column; line-height: 1.2; }
        .info-label { font-size: 10px; color: #777; }
        .info-val { font-size: 12px; font-weight: 700; }

        /* --- MOBILE LAYOUT (Cực kỳ quan trọng) --- */
        @media (max-width: 1024px) {
            .main-header {
                display: grid;
                grid-template-columns: 1fr 2fr 1fr; /* User | Logo | Cart */
                grid-template-areas: "user logo cart" "search search search";
                gap: 10px; padding: 10px 15px;
            }
            .mobile-user { grid-area: user; display: flex; justify-content: flex-start; }
            .logo-container { grid-area: logo; display: flex; justify-content: center; }
            .mobile-cart { grid-area: cart; display: flex; justify-content: flex-end; }
            .search-box { grid-area: search; width: 100%; margin-top: 2px; }

            .header-actions, .text-delivery { display: none; } /* Ẩn bớt để chống vỡ */
            .logo-container img { height: 32px; }
            .mobile-icon { width: 26px; height: 26px; }
            .top-container { justify-content: center; } /* Mobile dồn menu về giữa */
            .top-left { display: none; } 
        }

        @media (min-width: 1025px) {
            .mobile-user, .mobile-cart { display: none; }
        }