{% assign no_image_url = 'no-image.png' | asset_url %}
{% assign _product = page.product_info %}
{% assign _rating_summary = _product.review.summary %}

<style>
  .font-inter {
    font-family: 'Inter', sans-serif;
  }

  .star-row {
    display: grid;
    grid-template-columns: 10px 12px 1fr 36px;
    align-items: center;
    column-gap: 9px;
  }

  .star-bar {
    height: 6px;
    border-radius: 9999px;
    background: #e6e6e6;
    overflow: hidden;
  }

  .star-bar > span {
    display: block;
    height: 100%;
    background: #0084ff;
  }

  .product-description img,
  .product-description iframe,
  .product-description table {
    max-width: 100%;
  }

  .product-description table {
    width: 100%;
  }
</style>

<div class="w-[1200px] mx-auto flex flex-col gap-3 py-5">
  <div class="flex items-center gap-2 text-[13px] text-black">
    <a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
    {% if _product.productPath.size > 0 %}
    {% for _path in _product.productPath[0].path %}
    <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
    <a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name }}</a>
    {% endfor %}
    {% elsif _product.categoryInfo.size > 0 %}
    <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
    <a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name }}</a>
    {% endif %}
  </div>

  <div class="flex flex-col gap-2">
    <div class="flex items-center gap-3">
      <h1 class="text-[20px] font-bold tracking-[-0.4px] text-black leading-none">{{ _product.productName }}</h1>
      {% if _product.productType.isNew == 1 %}
      <span class="h-5 rounded-[4px] bg-[#fff3f3] text-[#e40000] text-[12px] px-[11px] leading-5">Mẫu mới</span>
      {% elsif _product.productType.isHot == 1 %}
      <span class="h-5 rounded-[4px] bg-[#fff6ed] text-[#fc7600] text-[12px] px-[11px] leading-5">Bán chạy</span>
      {% endif %}
    </div>
    <div class="flex items-center gap-3 text-[14px] tracking-[-0.28px]">
      <span class="text-[#959595]">Đã bán {{ _product.buy_count | default: 0 }}</span>
      <span class="text-[#959595] flex items-center gap-1">
        <img src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[13px] h-[13px]" />
        {{ _rating_summary.avgRate | default: 0 }}
      </span>
      <a href="#product-spec" class="text-[#0084ff] flex items-center gap-1">
        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full border border-[#0084ff] text-[11px]">i</span>
        Thông số
      </a>
    </div>
  </div>

  <div class="flex items-start gap-3">
    <section class="w-[796px] flex flex-col gap-3">
      <div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
        <div class="w-[392px] h-[392px] mx-auto rounded-[8px] overflow-hidden bg-white flex items-center justify-center">
          <img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}" class="w-full h-full object-contain"
            onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
        </div>
        <div class="flex flex-wrap gap-2">
          {% if _product.productImageGallery.size > 0 %}
          {% for _image in _product.productImageGallery limit:13 %}
          <button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden {% if forloop.first %}border border-[#57aeff]{% else %}border border-transparent{% endif %}">
            <img src="{{ _image.large | default: _image.original | default: _image.small }}" alt="{{ _product.productName }}"
              class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
          </button>
          {% endfor %}
          {% else %}
          <button class="w-[52px] h-[52px] rounded-[2px] overflow-hidden border border-[#57aeff]">
            <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-full h-full object-cover"
              onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
          </button>
          {% endif %}
        </div>
      </div>

      <div class="bg-white rounded-[8px] px-3 py-2 flex flex-col gap-3">
        <h2 class="font-inter text-[16px] font-bold tracking-[-0.32px]">MIQ cam kết</h2>
        <div class="h-px bg-[#ececec]"></div>
        <div class="grid grid-cols-2 gap-x-[40px] gap-y-3 text-[13px] text-black tracking-[-0.26px]">
          <p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
            Hàng chính hãng, hỗ trợ kỹ thuật nhanh chóng.</p>
          <p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
            {% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành theo chính sách của nhà sản xuất.{% endif %}</p>
          <p class="flex items-start gap-2"><img src="{{ 'icon_certificate.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
            {% if _product.price > 0 %}Giá bán minh bạch, cập nhật theo dữ liệu sản phẩm.{% else %}Giá đang được cập nhật, vui lòng liên hệ để nhận báo giá.{% endif %}</p>
          <p class="flex items-start gap-2"><img src="{{ 'icon_customer_support.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
            Tư vấn trước và sau mua hàng trong giờ hành chính.</p>
          <p class="flex items-start gap-2"><img src="{{ 'icon_double_next_small.svg' | asset_url }}" alt="" class="w-7 h-7 mt-[-2px]" />
            {% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Phụ kiện và quà tặng áp dụng theo từng chương trình cụ thể.{% endif %}</p>
        </div>
      </div>

      <div class="bg-white rounded-[8px] p-3 flex flex-col gap-3">
        <h3 class="text-[16px] font-bold tracking-[-0.32px]">Tham khảo thêm sản phẩm đang xem</h3>
        <div class="min-h-[98px] rounded-[8px] border border-[#ebebeb] flex items-center gap-3 px-3 py-[9px]">
          <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[2px] object-cover"
            onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
          <div class="w-[472px] flex flex-col gap-1">
            <p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">{{ _product.productName }}</p>
            <div class="flex items-center gap-2 flex-wrap">
              {% if _product.price > 0 %}
              <p class="text-[15px] font-bold text-[#cd0000]">{{ _product.price | number_format }}₫</p>
              {% else %}
              <p class="text-[15px] font-bold text-[#cd0000]">Liên hệ</p>
              {% endif %}
              {% if _product.marketPrice > 0 %}
              <p class="text-[13px] text-[#9d9d9d] line-through">{{ _product.marketPrice | number_format }}₫</p>
              {% endif %}
            </div>
            <p class="text-[13px] leading-6 tracking-[-0.26px]">{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Thông tin bảo hành đang cập nhật.{% endif %}</p>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-[8px] px-3 py-[15px] flex flex-col gap-2">
        <h3 class="text-[16px] font-bold tracking-[-0.32px]">Đặc điểm nổi bật</h3>
        {% if _product.productSummary != '' %}
        <div class="text-[13px] leading-[22px] tracking-[-0.26px] whitespace-pre-line">{{ _product.productSummary }}</div>
        {% else %}
        <ul class="list-disc ps-5 text-[13px] leading-[22px] tracking-[-0.26px]">
          <li>Sản phẩm đang được cập nhật phần mô tả nổi bật.</li>
          <li>Vui lòng xem thêm thông tin chi tiết ở phần mô tả bên dưới.</li>
        </ul>
        {% endif %}
      </div>

      <div id="product-spec" class="bg-white rounded-[8px] px-3 py-[22px] flex flex-col gap-4">
        <div class="flex items-center justify-center gap-3">
          <button class="w-[205px] h-10 rounded-[4px] border border-[#0084ff] bg-[#edf7ff] text-[16px] text-[#0084ff] font-bold tracking-[-0.32px]">Thông số kỹ thuật</button>
          <button class="w-[205px] h-10 rounded-[4px] border border-[#e6e6e6] bg-white text-[16px] text-black font-bold tracking-[-0.32px]">Thông tin sản phẩm</button>
        </div>
        <div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2">
          <p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Tổng quan</p>
          <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
        </div>
        <div class="grid grid-cols-[196px_1fr] gap-x-[88px] gap-y-[24px] px-3 text-[13px] tracking-[-0.26px]">
          <p>Tên sản phẩm</p>
          <p>{{ _product.productName }}</p>
          <p>Danh mục</p>
          <p>{% if _product.categoryInfo.size > 0 %}{{ _product.categoryInfo[0].name }}{% else %}Đang cập nhật{% endif %}</p>
          <p>Thương hiệu</p>
          <p>{% if _product.brand.name != '' %}{{ _product.brand.name }}{% else %}Đang cập nhật{% endif %}</p>
          <p>Model</p>
          <p>{% if _product.productModel != '' %}{{ _product.productModel }}{% else %}Đang cập nhật{% endif %}</p>
          <p>SKU</p>
          <p>{% if _product.productSKU != '' %}{{ _product.productSKU }}{% else %}Đang cập nhật{% endif %}</p>
          <p>Bảo hành</p>
          <p>{% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Đang cập nhật{% endif %}</p>
          <p>Đơn vị tính</p>
          <p>{{ _product.priceUnit }}</p>
          <p>Cập nhật</p>
          <p>{{ _product.lastUpdate }}</p>
        </div>

        <div class="h-10 rounded-[4px] bg-[#f2f4f7] flex items-center justify-between px-2 mt-2">
          <p class="font-inter font-semibold text-[13px] tracking-[-0.26px]">Mô tả sản phẩm</p>
          <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-5 h-5 rotate-90" />
        </div>
        <div class="product-description px-3 text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden">
          {% if _product.productDescription != '' %}
          {{ _product.productDescription }}
          {% else %}
          <p>Thông tin mô tả sản phẩm đang được cập nhật.</p>
          {% endif %}
        </div>
      </div>

      <div class="bg-white rounded-[12px] px-3 py-4 flex flex-col gap-5">
        <h3 class="text-[18px] font-semibold tracking-[-0.36px]">Đánh giá {{ _product.productName }}</h3>
        <div class="flex items-center justify-center gap-5">
          <div class="w-[112px] flex flex-col items-center gap-1">
            <p class="text-[32px] font-extrabold font-inter tracking-[-0.64px]">{{ _rating_summary.avgRate | default: 0 }}<span class="text-[13px] text-[#9d9d9d] font-normal">/5</span></p>
            <p class="text-[13px] font-inter">{{ page.product_info.comment.summary.total | default: 0 }} khách hài lòng</p>
            <p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_summary.total | default: 0 }} đánh giá</p>
          </div>
          <div class="w-[315px] flex flex-col gap-2 text-[13px]">
            <div class="star-row"><span>5</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
            <div class="star-row"><span>4</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
            <div class="star-row"><span>3</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
            <div class="star-row"><span>2</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
            <div class="star-row"><span>1</span><span>★</span><div class="star-bar"><span style="width:0%"></span></div><span>0%</span></div>
          </div>
          <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
          <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
          <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-20 h-20 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
        </div>

        <div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
          <div class="flex items-center gap-1">
            <p class="font-bold">MIQ</p>
            <span class="text-[#35b327]">●</span>
            <p class="text-[#35b327] font-medium">Thông tin đánh giá đang được cập nhật</p>
          </div>
          <p>★★★★★ <span class="mx-2 text-[#9d9d9d]">|</span> Chưa có nội dung đánh giá hiển thị</p>
          <p>Khách hàng có thể để lại đánh giá sau khi mua hàng để hoàn thiện phần trải nghiệm thực tế cho sản phẩm này.</p>
        </div>

        <div class="h-px bg-[#e8e8e8] w-[772px]"></div>

        <div class="w-[754px] grid gap-2 text-[13px] tracking-[-0.26px]">
          <div class="flex items-center gap-1">
            <p class="font-bold">MIQ</p>
            <span class="text-[#35b327]">●</span>
            <p class="text-[#35b327] font-medium">Chưa có bình luận nổi bật</p>
          </div>
          <p>Đội ngũ tư vấn sẽ cập nhật phản hồi khách hàng khi có dữ liệu mới.</p>
        </div>

        <div class="flex items-center justify-center gap-2">
          <button class="w-[231px] h-10 rounded-[4px] border border-[#8c8c8c] text-[#6b6b6b] text-[13px] font-medium">Xem {{ _rating_summary.total | default: 0 }} đánh giá</button>
          <button class="w-[231px] h-10 rounded-[4px] bg-[#0084ff] text-white text-[13px] font-medium">Viết đánh giá</button>
        </div>
      </div>
    </section>

    <aside class="w-[392px] flex flex-col gap-3">
      <div class="bg-white rounded-[8px] px-3 py-[14px] flex flex-col gap-[11px]">
        <img src="{{ 'category_qc_lg.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
        <img src="{{ 'category_qc_samsung.png' | asset_url }}" alt="" class="w-[367px] h-[144px] rounded-[8px] object-cover" />
        <div class="flex items-center gap-2 flex-wrap">
          {% if _product.categoryInfo.size > 0 %}
          {% for _category in _product.categoryInfo limit:3 %}
          <a href="{{ _category.url }}" class="px-3 h-7 rounded-[4px] border {% if forloop.first %}border-[#50aaff] text-[#0084ff]{% else %}border-[#e8e8e8] text-black{% endif %} text-[13px] font-medium inline-flex items-center">{{ _category.name }}</a>
          {% endfor %}
          {% else %}
          <span class="px-3 h-7 rounded-[4px] border border-[#50aaff] text-[#0084ff] text-[13px] font-medium inline-flex items-center">Sản phẩm</span>
          {% endif %}
        </div>
      </div>

      <div class="rounded-[8px] p-[4px] bg-gradient-to-b from-[#6b1440] via-[#e4057c] to-[#6b1440]">
        <div class="bg-white rounded-[6px] p-[11px] flex flex-col gap-3">
          <p class="text-[13px] font-semibold tracking-[-0.26px]">Loại dịch vụ lắp đặt</p>
          {% if _product.addon.size > 0 %}
          {% for _addon in _product.addon limit:3 %}
          <div class="rounded-[8px] border {% if forloop.first %}border-[#e4057c] bg-[#fff6f6]{% else %}border-[#e2e2e2]{% endif %} p-[13px] grid grid-cols-2 gap-x-[12px] gap-y-2">
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full border border-[#a9a9a9]"></span>
              <p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
            </div>
            <div class="text-right">
              {% if _addon.price > 0 %}
              <p class="text-[14px] font-bold text-[#e40000]">{{ _addon.price | number_format }}đ</p>
              {% else %}
              <p class="text-[14px] font-bold text-[#35b327]">Miễn phí</p>
              {% endif %}
            </div>
            <div class="col-span-2 flex items-center gap-1 ps-5">
              <span class="text-[#35b327]">◉</span>
              <p class="text-[12px]">{% if forloop.first %}Gói tiêu chuẩn{% else %}Tuỳ chọn dịch vụ đi kèm{% endif %}</p>
            </div>
          </div>
          {% endfor %}
          {% else %}
          <div class="rounded-[8px] border border-[#e4057c] bg-[#fff6f6] p-[13px]">
            <p class="text-[13px] font-semibold tracking-[-0.26px]">Chưa có gói dịch vụ bổ sung</p>
          </div>
          {% endif %}

          {% if _product.specialOffer.all.size > 0 %}
          <div class="rounded-[8px] border border-[#e2e2e2] overflow-hidden">
            <div class="h-[43px] bg-[#f9fafb] px-2 flex items-center">
              <p class="text-[14px] font-semibold tracking-[-0.28px]">Khuyến mãi</p>
            </div>
            <div class="p-[10px] flex flex-col gap-3">
              {% for _offer in _product.specialOffer.all limit:3 %}
              <p class="text-[13px] tracking-[-0.26px] flex items-start gap-2">
                <span class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#a0045c] text-white text-[13px] shrink-0">{{ forloop.index }}</span>
                <span class="line-clamp-3">{{ _offer.title }}</span>
              </p>
              {% endfor %}
            </div>
          </div>
          {% endif %}

          {% if _product.specialOffer.gift.size > 0 %}
          <div class="h-px bg-[#ececec]"></div>
          <p class="text-[13px] font-medium tracking-[-0.26px]">Hình ảnh quà khuyến mãi</p>
          <div class="flex items-center gap-2 flex-wrap">
            {% for _gift in _product.specialOffer.gift limit:2 %}
            {% if _gift.thumbnail != '' and _gift.thumbnail contains '/' %}
            {% assign _gift_image = _gift.thumbnail %}
            {% else %}
            {% assign _gift_image = no_image_url %}
            {% endif %}
            <div class="w-[128px] h-12 rounded-[4px] border border-[#ebebeb] p-[6px] flex items-center gap-1">
              <img src="{{ _gift_image }}" alt="{{ _gift.title }}" class="w-9 h-9 rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
              <p class="text-[10px] font-medium leading-[14px] line-clamp-2">{{ _gift.title }}</p>
            </div>
            {% endfor %}
          </div>
          {% endif %}

          <div class="h-px bg-[#ececec]"></div>
          <div class="flex items-center gap-3">
            <button class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] text-[#0084ff] text-[25px] leading-4 pb-1">⍟<span class="block text-[13px] leading-4">Thêm vào giỏ</span></button>
            <button class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[20px] font-semibold">Mua ngay</button>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-[8px] p-3 flex flex-col gap-2">
        <p class="text-[14px] font-semibold leading-6 tracking-[-0.28px]">Sản phẩm đã xem</p>
        <div class="grid grid-cols-2 gap-3">
          <a href="{{ _product.productUrl }}" class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
            <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
            <div class="flex-1 min-w-0">
              <p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
              {% if _product.price > 0 %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
              {% else %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
              {% endif %}
            </div>
          </a>
          <a href="{{ _product.productUrl }}" class="h-[76px] rounded-[4px] border border-[#d9d9d9] p-2 flex items-center gap-2 no-underline">
            <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}" class="w-[60px] h-[60px] rounded-[4px] object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
            <div class="flex-1 min-w-0">
              <p class="text-[11px] leading-4 line-clamp-2 text-black">{{ _product.productName }}</p>
              {% if _product.marketPrice > 0 %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.marketPrice | number_format }}đ</p>
              {% elsif _product.price > 0 %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | number_format }}đ</p>
              {% else %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
              {% endif %}
            </div>
          </a>
        </div>
      </div>
    </aside>
  </div>

  <div class="bg-white rounded-[12px] h-[431px] overflow-hidden flex gap-3 px-3 py-4">
    <div class="flex flex-col gap-3 w-[885px] shrink-0 h-[399px]">
      <h2 class="text-[28px] font-bold text-black tracking-tight">TIN KHUYẾN MẠI</h2>
      <div class="flex gap-3 items-start">
        <div class="w-[481px] shrink-0">
          <div class="w-[481px] h-[300px] rounded-[4px] overflow-hidden">
            <img src="{{ 'article_main_image.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
          </div>
          <p class="mt-2 text-[20px] font-bold text-black tracking-tight">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
        </div>
        <div class="flex flex-col gap-3 flex-1">
          <div class="flex gap-3 items-start">
            <img src="{{ 'article_thumb_1.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
            <p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
          </div>
          <div class="flex gap-3 items-start">
            <img src="{{ 'article_thumb_2.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
            <p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
          </div>
          <div class="flex gap-3 items-start">
            <img src="{{ 'article_thumb_3.png' | asset_url }}" alt="" class="w-[153px] h-[92px] rounded-[4px] object-cover shrink-0" />
            <p class="text-[14px] text-black tracking-tight overflow-hidden">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-3 flex-1 h-[356px]">
      <h2 class="text-[28px] font-bold text-black tracking-tight">VIDEO REVIEW</h2>
      <div class="flex flex-col gap-3">
        <div class="w-full h-[159px] rounded-[4px] overflow-hidden relative">
          <img src="{{ 'video_main.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
          <div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
        </div>
        <div class="flex gap-3 items-start">
          <div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
            <img src="{{ 'video_thumb_1.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
          </div>
          <p class="text-[14px] text-black tracking-tight overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
        </div>
        <div class="flex gap-3 items-start">
          <div class="w-[107px] h-[64px] rounded-[4px] overflow-hidden relative shrink-0">
            <img src="{{ 'video_thumb_2.png' | asset_url }}" alt="" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-black/20 rounded-[4px]"></div>
          </div>
          <p class="text-[14px] text-black tracking-tight overflow-hidden">Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước</p>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-white rounded-[12px] min-h-[231px] overflow-hidden flex flex-col gap-3 px-3 py-4">
    <h2 class="text-[24px] leading-[28px] font-bold text-black tracking-tight">Mọi người cũng tìm kiếm</h2>
    <div class="bg-[#f3f4f7] rounded-[12px] min-h-[156px] overflow-hidden px-3 py-4 flex flex-wrap gap-5 text-[12px] text-black">
      <span>hút mùi hafele</span>
      <span>bếp từ cheft</span>
      <span>nồi cơm điện Tiger</span>
      <span>máy cạo râu Enchen</span>
      <span>mũ bảo hiểm</span>
      <span>nồi cơm điện Cuckoo</span>
      <span>iPhone 15</span>
      <span>chảo chống dính Elmich</span>
      <span>máy massage X5 Pro Omni</span>
      <span>điều hòa Samsung</span>
      <span>máy lọc nước Korihome Kangen K8</span>
      <span>tông đơ cắt tóc</span>
      <span>điều hoà Hisense</span>
      <span>Máy chạy bộ</span>
      <span>MacBook Air M4</span>
      <span>điều hòa Nagakawa</span>
    </div>
  </div>
</div>