<div class="layout-container flex flex-col gap-[27px]">

  <!-- Banner Slider -->
  <div class="w-full h-[364px] rounded-[12px] overflow-hidden relative mt-[20px]">
    <div class="swiper homepage-banner-slider h-full">
      <div class="swiper-wrapper">
        {% for _banner in banner.banner.homepage.banner_slider_homepage %}
        <a href="{{ _banner.desUrl | default: '#' }}" class="swiper-slide block h-full">
          <img src="{{ _banner.fileUrl }}" alt="{{ _banner.title | default: 'Banner' }}"
            class="w-full h-full object-cover" />
        </a>
        {% endfor %}
      </div>
      <div class="swiper-pagination homepage-banner-pagination"></div>
    </div>
  </div>

  <!-- Category Icons -->
  <div class="bg-white border border-dashed border-[#db0000] rounded-[8px] p-3 grid grid-cols-8 gap-3">
    {% assign no_image_url = 'no-image.png' | asset_url %}
    {% for _cat in component.main_menu.product.all_category %}
    {% if _cat.is_featured == '1' %}
    <a href="{{ _cat.url }}" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
      <img src="{{ _cat.thumnail }}" alt="{{ _cat.title }}" class="w-12 h-12 object-cover"
        onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
      <span class="text-xs text-black text-center mt-[6px] tracking-tight">{{ _cat.title }}</span>
    </a>
    {% endif %}
    {% endfor %}
  </div>

  <!-- Product History -->
  <div class="bg-white rounded-[4px] px-3 py-[9px] flex flex-col gap-3">
    <div class="flex items-center gap-2">
      <img src="{{ 'icon_star_gold.svg' | asset_url }}" alt="" class="w-5 h-5" />
      <span class="text-[20px] font-bold text-black tracking-tight">Sản phẩm đã xem</span>
    </div>
    <div class="grid grid-cols-4 gap-3">
      {% for _product in page.product_history | limit: 4 %}
      <div class="bg-white border border-[#f2f2f2] rounded-[4px] flex items-start gap-2 p-[10px]">
        <a href="/product/detail" class="shrink-0 block"><img src="{{ _product.productImage.small }}"
            alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover shrink-0" /></a>
        <div class="flex flex-col gap-3 flex-1">
          <div class="flex items-start justify-between gap-1">
            <a href="/product/detail"
              class="text-[13px] text-black tracking-tight line-clamp-2 w-[177px] hover:text-[#e4057c]">{{
              _product.productName }}</a>
            <img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
          </div>
          {% if _product.price > 0 %}
          <p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">{{ _product.price | format_number }} <span
              class="underline">đ</span></p>
          {% else %}
          <p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">Liên hệ</p>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- BST Sale -->
  {% if page.product_collection.size > 0 %}
  <div class="relative w-full rounded-[12px] overflow-hidden">
    <img src="{{ 'bst_sale_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full" />
    <div class="relative flex flex-col gap-3 px-[11px] pt-[93px] pb-5">
      <!-- Title -->
      <div class="flex justify-center">
        <div class="flex items-center justify-center h-[54px] w-[608px] rounded-full" style="">
          <p class="text-[24px] font-bold text-white uppercase text-center tracking-tight">Ngập tràn ưu đãi- Đừng bỏ
            lỡ!</p>
        </div>
      </div>
      <!-- Tab Filters -->
      <div class="flex items-center gap-2 flex-wrap">
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">TẾT
          CHILL - VOUCHER 15%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">TIVI
          - GIẢM 50%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">GIA
          DỤNG - 50%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">MÁY
          GIẶT - 50%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">PHỤ
          KIỆN - 50%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">CÔNG
          NGHỆ CAO - 50%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">ĐIỀU
          HÒA - 50%</span>
        <span
          class="bg-white text-black text-[13px] px-[17px] py-[6px] rounded-full cursor-pointer hover:bg-gray-100 capitalize">TỦ
          LẠNH - 50%</span>
      </div>
      <!-- Product Grid -->
      <div class="grid grid-cols-5 2xl:grid-cols-6 gap-2">
        {% for _product in page.product_collection limit:12 %}
        <div
          class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3{% if forloop.index > 10 %} hidden 2xl:block{% endif %}">
          <a href="/product/detail" class="block w-full"><img src="{{ _product.productImage.large }}"
              alt="{{ _product.productName }}" class="w-full aspect-square rounded-[4px] object-cover" /></a>
          <div class="relative w-full h-[51px] flex flex-col justify-center px-2 py-[7px]">
            <img src="{{ 'sale_price_box_bg.svg' | asset_url }}" alt=""
              class="absolute inset-0 w-full h-full object-cover" />
            {% if _product.price > 0 %}
            <p class="relative text-[16px] font-bold text-white tracking-tight">{{ _product.price | format_number }} đ
            </p>
            {% if _product.marketPrice > 0 and _product.price_off != '' %}
            <p class="relative text-[11px] text-white tracking-tight">{{ _product.marketPrice | format_number }} đ (-{{
              _product.price_off }}%)</p>
            {% endif %}
            {% else %}
            <p class="relative text-[16px] font-bold text-white tracking-tight">Liên hệ</p>
            {% endif %}
          </div>
          <a href="/product/detail"
            class="text-[13px] font-bold text-black tracking-tight w-full hover:text-[#e4057c] line-clamp-2 h-[40px]">{{
            _product.productName }}</a>
          <div
            class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-full cursor-pointer hover:bg-red-50">
            <span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
          </div>
        </div>
        {% endfor %}
      </div>
      <!-- Xem thêm deal -->
      <div class="flex items-center gap-1 cursor-pointer">
        <span class="text-[#db0000] text-[13px] font-medium tracking-tight">Xem thêm deal</span>
        <img src="{{ 'icon_double_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
        <img src="{{ 'icon_double_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px] -ml-1" />
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Top Trending -->
  <div class="bg-white rounded-[8px] px-3 pt-5 pb-0 h-[505px] overflow-hidden flex flex-col gap-3">
    <h2 class="text-[28px] font-bold text-black tracking-tight">Top trending</h2>
    <div class="grid grid-cols-4 gap-3 h-[420px]">
      <!-- Combo văn phòng -->
      <div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-[19px] p-3">
        <div class="flex items-center gap-1">
          <a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Combo văn phòng</a>
          <i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
        </div>
        <div class="flex flex-wrap gap-3 w-[262px]">
          <div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
            <div class="h-[125px] flex items-center justify-center overflow-hidden">
              <img src="{{ 'trending_may_in_laser.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
            </div>
            <p class="text-[13px] text-black text-center px-1">Máy in laser trắng...</p>
          </div>
          <div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
            <div class="h-[125px] flex items-center justify-center overflow-hidden">
              <img src="{{ 'trending_man_hinh.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
            </div>
            <p class="text-[13px] text-black text-center px-1">Màn hình máy tính...</p>
          </div>
          <div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
            <div class="h-[125px] flex items-center justify-center overflow-hidden">
              <img src="{{ 'trending_mac_mini.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
            </div>
            <p class="text-[13px] text-black text-center px-1">Mac mini ...</p>
          </div>
          <div class="bg-white rounded-[4px] w-[124px] h-[166px] flex flex-col">
            <div class="h-[125px] flex items-center justify-center overflow-hidden">
              <img src="{{ 'trending_muc_in.png' | asset_url }}" alt="" class="h-[83px] object-contain" />
            </div>
            <p class="text-[13px] text-black text-center px-1">Mực in phun...</p>
          </div>
        </div>
      </div>
      <!-- Tivi bán chạy nhất -->
      <div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-4 p-3">
        <div class="flex items-center gap-1">
          <a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Tivi bán chạy nhất</a>
          <i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
        </div>
        <div class="flex flex-col gap-3">
          <img src="{{ 'trending_tivi_main.png' | asset_url }}" alt=""
            class="w-full aspect-square rounded-[4px] object-cover" />
          <div class="flex gap-3">
            <img src="{{ 'trending_tivi_main.png' | asset_url }}" alt=""
              class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
            <img src="{{ 'trending_tivi_2.png' | asset_url }}" alt=""
              class="w-[79px] h-[80px] rounded-[4px] object-cover" />
            <img src="{{ 'trending_tivi_3.png' | asset_url }}" alt=""
              class="w-[79px] h-[80px] rounded-[4px] object-cover" />
          </div>
        </div>
      </div>
      <!-- Sống khỏe mỗi ngày -->
      <div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-4 p-3">
        <div class="flex items-center gap-1">
          <a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Sống khỏe mỗi ngày</a>
          <i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
        </div>
        <div class="flex flex-col gap-3">
          <img src="{{ 'trending_suc_khoe_main.png' | asset_url }}" alt=""
            class="w-full aspect-square rounded-[4px] object-cover" />
          <div class="flex gap-3">
            <img src="{{ 'trending_suc_khoe_1.png' | asset_url }}" alt=""
              class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
            <img src="{{ 'trending_suc_khoe_2.png' | asset_url }}" alt=""
              class="w-[79px] h-[80px] rounded-[4px] object-cover" />
            <img src="{{ 'trending_suc_khoe_3.png' | asset_url }}" alt=""
              class="w-[79px] h-[80px] rounded-[4px] object-cover" />
          </div>
        </div>
      </div>
      <!-- Gia dụng tiện ích -->
      <div class="bg-white rounded-[4px] h-[420px] overflow-hidden flex flex-col gap-4 p-3">
        <div class="flex items-center gap-1">
          <a href="#" class="text-[16px] font-bold text-[#1877f2] tracking-tight">Gia dụng tiện ích</a>
          <i class="fa-solid fa-angles-right text-[#1877f2] text-[10px]"></i>
        </div>
        <div class="flex flex-wrap gap-3">
          <div class="w-[262px] h-[262px] bg-white rounded-[4px] relative overflow-hidden">
            <img src="{{ 'trending_gia_dung_main.png' | asset_url }}" alt=""
              class="absolute inset-0 w-full h-full object-cover" />
          </div>
          <img src="{{ 'trending_gia_dung_1.png' | asset_url }}" alt=""
            class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
          <img src="{{ 'trending_gia_dung_2.png' | asset_url }}" alt=""
            class="w-[78px] h-[80px] rounded-[4px] object-cover" />
          <img src="{{ 'trending_gia_dung_3.png' | asset_url }}" alt=""
            class="w-[80px] h-[80px] rounded-[4px] object-cover" />
        </div>
      </div>
    </div>
  </div>
  <!-- Product Category -->
  {% assign no_image_url = 'no-image.png' | asset_url %}
  {% for _cat_products in page.product_category %}
  {% if _cat_products.size > 0 %}
  {% assign _cat_first = _cat_products | first %}
  {% assign _cat_info = _cat_first.categories | first %}
  <div class="relative w-full">
    <div class="relative w-[794px] h-[123px] mx-auto">
      <img src="{{ 'category_banner_dien_tu.png' | asset_url }}" alt=""
        class="absolute inset-0 w-full h-full object-cover" />
      <div class="absolute inset-0 flex flex-col items-center justify-end pb-[5px]">
        <p class="text-[28px] font-bold text-white text-center capitalize tracking-tight">{{ _cat_info.name }}</p>
        <a href="/product/category" class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả
          &gt;&gt;</a>
      </div>
    </div>
    <div class="bg-white rounded-[12px] px-3 py-[17px] mt-[10px] relative">
      <div class="swiper product-category-slider overflow-hidden">
        <div class="swiper-wrapper">
          {% for _product in _cat_products %}
          <div class="swiper-slide">
            <div
              class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px] h-full">
              <a href="/product/detail?id={{ _product.productId }}" class="block">
                <img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
                  class="w-full aspect-square rounded-[4px] object-cover"
                  onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
              </a>
              <div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]"
                style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">
                <span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img
                    src="{{ 'icon_gift.png' | asset_url }}" alt="" class="w-[11px] h-[11px] object-contain" /></span>
                <span>{{ _product.label | strip | default: 'Sắm tết vô tư' }}</span>
              </div>
              {% if _product.price > 0 %}
              <div class="flex items-center gap-[6px]">
                <p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">{{ _product.price | format_number }} <span
                    class="underline">đ</span></p>
                {% assign _price_off = _product.price_off | strip %}
                {% if _price_off != '' and _price_off != '0' %}
                <span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-{{
                  _price_off }}%</span>
                {% endif %}
              </div>
              {% if _product.marketPrice > 0 %}
              <p class="text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">{{ _product.marketPrice | format_number }} đ</p>
              {% endif %}
              {% else %}
              <p class="text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">Liên hệ</p>
              {% endif %}
              <a href="/product/detail?id={{ _product.productId }}" class="h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black hover:text-[#e4057c]">{{
                _product.productName
                }}</a>
              <div class="flex items-center gap-2">
                <img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
                  onerror="this.style.display='none'">
                <img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8 rounded-full object-cover"
                  onerror="this.style.display='none'">
              </div>
              <div class="mt-auto flex items-center justify-between gap-[6px]">
              <div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap">
                <img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" />
                <span>{{ _product.rating | default: 0 }} · Đã bán {{ _product.reviewCount | default: 0 }}</span>
              </div>
              
                <div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shrink-0 shadow">
                  <img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        <div
          class="swiper-button-prev !w-8 !h-8 !bg-white !rounded-full shadow-md after:!text-[14px] after:!font-bold after:!text-gray-600">
        </div>
        <div
          class="swiper-button-next !w-8 !h-8 !bg-white !rounded-full shadow-md after:!text-[14px] after:!font-bold after:!text-gray-600">
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}

</div>
<!-- /container -->
