<header class="w-full flex flex-col items-center bg-white relative z-50">
  <div class="w-full relative h-8 flex items-center overflow-hidden" style="background:#c00060">
    <img src="{{ 'header_slogan_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" />
    <div class="layout-container relative flex items-center justify-between">
      <div class="flex items-center gap-[22px]">
        <div class="flex items-center gap-1">
          <img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-5 h-5" />
          <span class="text-white text-xs font-semibold tracking-tight">Sản phẩm <strong>Chính hãng - xuất VAT</strong> đầy đủ</span>
        </div>
        <div class="flex items-center gap-1">
          <img src="{{ 'icon_delivery_truck.svg' | asset_url }}" alt="" class="w-5 h-5" />
          <span class="text-white text-xs font-semibold tracking-tight">Giao nhanh - Miễn phí</span>
        </div>
      </div>
      <div class="flex items-center gap-[5px]">
        <img src="{{ 'icon_customer_support.svg' | asset_url }}" alt="" class="w-5 h-5" />
        <span class="text-white text-xs font-semibold font-inter tracking-tight">Hotline: <strong>0967641641</strong></span>
      </div>
    </div>
  </div>

  <div class="w-full bg-[#e4057c] h-[68px] flex items-center">
    <div class="layout-container h-full py-[7px]">
      <div class="w-full flex items-center gap-9">
        <div class="h-[54px] w-[79px] relative shrink-0">
          <img src="{{ 'logo_miq.png' | asset_url }}" alt="MIQ Logo" class="absolute inset-0 w-full h-full object-contain" />
        </div>

        <div id="menu-trigger" class="flex items-center gap-[10px] cursor-pointer select-none" onmouseenter="showMenu()" onmouseleave="scheduleMenuClose()">
          <img src="{{ 'icon_menu.svg' | asset_url }}" alt="" class="w-6 h-6" />
          <span class="text-white text-sm font-semibold">Danh mục</span>
        </div>

        <div class="flex items-center gap-[35px] flex-1 justify-end">
          <div class="relative flex-1 min-w-[465px]">
            <form action="/search" method="get" class="relative h-9">
              <div class="absolute inset-0 bg-white rounded-full"></div>
              <img src="{{ 'icon_search.svg' | asset_url }}" alt="" class="absolute left-[15px] top-[8px] w-5 h-5" />
              <input type="text" id="search" name="q" placeholder="Tivi Samsung giá sốc"
                class="absolute inset-0 bg-transparent rounded-full pl-[44px] pr-4 text-[13px] text-[#e4057c] outline-none w-full"
                onfocus="showSearch()" onblur="setTimeout(hideSearch, 200)" />
            </form>

            <div id="search-popup" class="hidden absolute top-[calc(100%+8px)] left-0 bg-white rounded-[8px] flex-col gap-3 p-3 z-[60]"
              style="width:562px; box-shadow:-2px 10px 25.4px 0px rgba(0,0,0,0.25)">
              <div class="flex items-center justify-between shrink-0">
                <span class="text-[14px] font-medium text-[#585858]">Tìm kiếm gần đây</span>
                <button type="button" onclick="hideSearch()" class="w-6 h-6 flex items-center justify-center">
                  <img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4" />
                </button>
              </div>
              <div class="flex items-center gap-2 flex-wrap shrink-0">
                <span class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">Nồi cơm điện</span>
                <span class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">lõi lọc không khí</span>
                <span class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">nồi nấu chậm</span>
              </div>
              <div class="h-px bg-[#ebebeb] shrink-0"></div>
              <div class="flex flex-col gap-3">
                <span class="text-[14px] font-medium text-[#585858]">Ưu đãi đặc biệt</span>
                <div class="w-full h-[146px] rounded-[8px] overflow-hidden shrink-0">
                  <img src="{{ 'search_promo_banner.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
                </div>
                <div class="flex flex-col gap-2">
                  <div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
                    <div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
                      <span class="text-[12px] font-medium text-white whitespace-nowrap">Máy lạnh 1 HP</span>
                    </div>
                    <span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Giá chỉ từ 5.632.000đ</span>
                  </div>
                  <div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
                    <div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
                      <span class="text-[12px] font-medium text-white whitespace-nowrap">Tuần lễ tủ lạnh LG</span>
                    </div>
                    <span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Deal hời chỉ từ 5.632.000đ</span>
                  </div>
                  <div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
                    <div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
                      <span class="text-[12px] font-medium text-white whitespace-nowrap">Smart TV 2026</span>
                    </div>
                    <span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Giá chỉ từ 3.900.000đ</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="flex items-center gap-[10px] cursor-pointer">
            <img src="{{ 'icon_login.svg' | asset_url }}" alt="" class="w-[15px] h-[18px]" />
            <span class="text-white text-sm font-semibold">Đăng nhập</span>
          </div>

          <div class="flex items-center gap-[10px] cursor-pointer">
            <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[20.844px] h-[18.688px]" />
            <span class="text-white text-sm font-semibold">Giỏ hàng</span>
          </div>

          <div id="btn-showroom"
            class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
            onclick="toggleShowroom()">
            <div class="flex items-center gap-[10px]">
              <img src="{{ 'icon_map.svg' | asset_url }}" alt="" class="w-[15.5px] h-5" />
              <span class="text-white text-[13px]">Showroom</span>
            </div>
            <img src="{{ 'icon_cart.svg' | asset_url }}" alt="" id="showroom-arrow" class="w-[6px] h-[10.7px] transition-transform duration-200" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="w-full bg-[#ebecf0] h-8 flex items-center">
    <div class="layout-container">
      <div class="h-8 flex items-center justify-center gap-[20px] text-[#90004b] text-[13px] font-normal tracking-[-0.26px]">
        {% for _menu_item in component.main_menu.product.all_category | limit: 9 %}
        <a href="{{ _menu_item.url }}" class="hover:underline">{{ _menu_item.title }}</a>
        {% endfor %}
      </div>
    </div>
  </div>

  <div id="mega-menu" class="hidden absolute top-full left-0 w-full z-50" onmouseenter="cancelMenuClose()" onmouseleave="scheduleMenuClose()">
    <div class="layout-container flex rounded-[4px] overflow-hidden">
      <div class="w-[231px] shrink-0 bg-[#eaecf0] rounded-tl-[4px] rounded-bl-[4px] flex flex-col">
        {% for _menu_item in component.main_menu.product.all_category %}
        <a href="{{ _menu_item.url }}" id="cat-{{ forloop.index0 }}" data-menu-cat="{{ forloop.index0 }}"
          class="cat-item {% if forloop.first %}cat-active{% endif %} flex items-center justify-between h-9 pr-3 shrink-0"
          onmouseenter="switchCat('{{ forloop.index0 }}')">
          <div class="flex items-center min-w-0">
            {% if forloop.first %}
            <img src="{{ 'icon_fire.png' | asset_url }}" alt="" class="w-4 h-4 shrink-0 ml-[15px]" />
            <span class="cat-label text-[13px] ml-5 truncate">{{ _menu_item.title }}</span>
            {% elsif _menu_item.is_featured == '1' %}
            <div class="w-[34px] h-[25px] shrink-0 overflow-hidden ml-[10px]">
              <img src="{{ 'icon_sale_badge.png' | asset_url }}" alt="" class="h-full object-contain" />
            </div>
            <span class="cat-label text-[13px] ml-2 truncate">{{ _menu_item.title }}</span>
            {% else %}
            <span class="cat-label text-[13px] ml-[44px] truncate">{{ _menu_item.title }}</span>
            {% endif %}
          </div>
          <img src="{{ 'icon_chevron_right_menu.svg' | asset_url }}" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
        </a>
        {% unless forloop.last %}
        <div class="border-t border-[#d3d7df]"></div>
        {% endunless %}
        {% endfor %}
      </div>

      <div class="flex-1 bg-white rounded-tr-[4px] rounded-br-[4px] overflow-hidden relative">
        {% for _menu_item in component.main_menu.product.all_category %}
        <div id="rp-{{ forloop.index0 }}" data-menu-panel="{{ forloop.index0 }}" class="menu-rp-panel" style="{% if forloop.first %}display:flex{% else %}display:none{% endif %}">
          <p class="menu-rp-title">{{ _menu_item.title }}</p>
          <div class="menu-subcat-grid">
            {% if _menu_item.children and _menu_item.children.size > 0 %}
            {% for _item in _menu_item.children %}
            <a href="{{ _item.url }}" class="menu-subcat-item">
              {% if _item.thumnail %}
              <img src="{{ _item.thumnail }}" alt="{{ _item.title }}" class="w-12 h-12 object-contain" />
              {% else %}
              <img src="{{ 'icon_category_item.png' | asset_url }}" alt="{{ _item.title }}" class="w-12 h-12 object-contain" />
              {% endif %}
              <span>{{ _item.title }}</span>
            </a>
            {% endfor %}
            {% else %}
            <a href="{{ _menu_item.url }}" class="menu-subcat-item">
              {% if _menu_item.thumnail %}
              <img src="{{ _menu_item.thumnail }}" alt="{{ _menu_item.title }}" class="w-12 h-12 object-contain" />
              {% else %}
              <img src="{{ 'icon_category_item.png' | asset_url }}" alt="{{ _menu_item.title }}" class="w-12 h-12 object-contain" />
              {% endif %}
              <span>{{ _menu_item.title }}</span>
            </a>
            {% endif %}
          </div>
          <div class="menu-brand-row">
            <div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="{{ 'brand_samsung.png' | asset_url }}" alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
            <div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="{{ 'brand_lg.png' | asset_url }}" alt="LG" class="h-5 object-contain" style="max-width:44px" /></div>
            <div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="{{ 'brand_sony.png' | asset_url }}" alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
            <div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="{{ 'brand_toshiba.png' | asset_url }}" alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
            <div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="{{ 'brand_aqua.png' | asset_url }}" alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
            <div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="{{ 'brand_tcl.png' | asset_url }}" alt="TCL" class="h-5 object-contain" style="max-width:43px" /></div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <div id="showroom-panel" class="hidden absolute top-full left-0 w-full z-50 bg-white shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1)]">
    <div class="layout-container py-[18px]">
      <p class="text-center font-semibold text-[16px] text-black uppercase tracking-[-0.32px] mb-4">Địa điểm showroom của MIQ</p>
      <div class="flex gap-3">
        <div class="flex-1">
          <div class="bg-[#db0000] rounded-[4px] h-11 flex items-center justify-between px-4">
            <span class="font-semibold text-[16px] text-white uppercase tracking-[-0.32px]">Cơ sở Hà Nội</span>
            <span class="text-[13px] text-white tracking-[-0.26px]">Thời gian mở cửa: 8h00 - 18h00 hằng ngày</span>
          </div>
          <div class="pt-3 flex flex-col gap-[18px]">
            <div class="flex items-start gap-2"><img src="{{ 'icon_map_pin.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0 mt-[1px]" /><span class="text-[13px] text-black tracking-[-0.26px]">Địa chỉ: Số 2 Lương Ngọc Quyến, Phường Thanh Liệt, TP Hà Nội</span></div>
            <div class="flex items-center gap-2"><img src="{{ 'icon_phone.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Tel: 082.418.4444</span></div>
            <div class="flex items-center gap-2"><img src="{{ 'icon_support.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Bảo hành: 082.418.4444</span></div>
          </div>
        </div>
        <div class="flex-1">
          <div class="bg-[#db0000] rounded-[4px] h-11 flex items-center justify-between px-4">
            <span class="font-semibold text-[16px] text-white uppercase tracking-[-0.32px]">Cơ sở Hồ Chí Minh</span>
            <span class="text-[13px] text-white tracking-[-0.26px]">Thời gian mở cửa: 8h00 - 18h00 hằng ngày</span>
          </div>
          <div class="pt-3 flex flex-col gap-[18px]">
            <div class="flex items-start gap-2"><img src="{{ 'icon_map_pin.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0 mt-[1px]" /><span class="text-[13px] text-black tracking-[-0.26px]">Địa chỉ: 74 Bàu Cát 1, Phường Tân Bình, TP Hồ Chí Minh</span></div>
            <div class="flex items-center gap-2"><img src="{{ 'icon_phone.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Tel: 0971.49.0000</span></div>
            <div class="flex items-center gap-2"><img src="{{ 'icon_support.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" /><span class="text-[13px] text-black tracking-[-0.26px]">Bảo hành: 082.418.4444</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
