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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5/dist/fancybox/fancybox.umd.js"></script>

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

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

  .star-bar {
    width: 232px;
    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%;
  }

  .product-thumbs-swiper .swiper-slide {
    opacity: 0.5;
    border: 2px solid transparent;
    border-radius: 2px;
    cursor: pointer;
  }

  .product-thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1;
    border-color: #57aeff;
  }
</style>

<div class="layout-container flex flex-col gap-3 py-5">
  <div class="flex items-center gap-2 text-[13px] text-black">
    {% assign _product_paths = _product.productPath[0].path | to_array %}
    {% if _product_paths.size > 0 %}
    {% for _path_entry in _product_paths %}
    {% assign _path = _path_entry.value %}
    {% if _path.url != '' %}
    <a href="{{ _path.url }}" class="hover:text-[#e4057c]">{{ _path.name | strip }}</a>
    {% else %}
    <span>{{ _path.name | strip }}</span>
    {% endif %}
    {% unless forloop.last %}
    <svg class="w-2.5 h-2.5 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    </svg>
    {% endunless %}
    {% endfor %}
    {% elsif _product.categoryInfo.size > 0 %}
    <a href="{{ _product.categoryInfo[0].url }}" class="hover:text-[#e4057c]">{{ _product.categoryInfo[0].name | strip
      }}</a>
    {% else %}
    <span>Chi tiết sản phẩm</span>
    {% endif %}
  </div>

  {% if false %}
  <div class="flex items-center gap-2 text-[13px] text-black">
    <a href="/" class="hover:text-[#e4057c]">Trang chủ</a>
    {% assign _product_paths = _product.productPath[0].path | to_array %}
    {% if _product_paths.size > 0 %}
    {% for _path_entry in _product_paths %}
    {% assign _path = _path_entry.value %}
    <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 %}
    <img src="{{ 'icon_arrow_next.svg' | asset_url }}" alt="" class="w-[10px] h-[10px]" />
    <span class="text-black line-clamp-1">{{ _product.productName }}</span>
  </div>
  {% endif %}

  <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="flex-1 min-w-0 flex flex-col gap-3">
      <div class="bg-white rounded-[8px] px-3 py-[10px] flex flex-col gap-2">
        <!-- Main image swiper -->
        <div
          class="swiper product-main-swiper w-full max-w-[460px] aspect-square mx-auto rounded-[8px] overflow-hidden bg-white">
          <div class="swiper-wrapper">
            {% if _product.productImageGallery.size > 0 %}
            {% for _image in _product.productImageGallery limit:13 %}
            <div class="swiper-slide flex items-center justify-center">
              <a data-fancybox="product-gallery"
                href="{{ _image.large | default: _image.original | default: _image.small }}"
                class="block w-full h-full">
                <img src="{{ _image.large | default: _image.original | default: _image.small }}"
                  alt="{{ _product.productName }}" class="w-full h-full object-contain"
                  onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
              </a>
            </div>
            {% endfor %}
            {% else %}
            <div class="swiper-slide flex items-center justify-center">
              <a data-fancybox="product-gallery" href="{{ _product.productImage.large }}" class="block w-full h-full">
                <img src="{{ _product.productImage.large }}" alt="{{ _product.productName }}"
                  class="w-full h-full object-contain" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
              </a>
            </div>
            {% endif %}
          </div>
        </div>
        <!-- Thumbnails swiper -->
        <div class="swiper product-thumbs-swiper mt-1">
          <div class="swiper-wrapper">
            {% if _product.productImageGallery.size > 0 %}
            {% for _image in _product.productImageGallery limit:13 %}
            <div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
              <img src="{{ _image.small | default: _image.original | default: _image.large }}"
                alt="{{ _product.productName }}" class="w-full h-full object-cover"
                onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
            </div>
            {% endfor %}
            {% else %}
            <div class="swiper-slide !w-[52px] !h-[52px] rounded-[2px] overflow-hidden">
              <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
                class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
            </div>
            {% endif %}
          </div>
        </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="https://www.figma.com/api/mcp/asset/1eb5d75b-4d86-4183-afc5-4ea470d2b03a" alt=""
              class="w-7 h-7 shrink-0" />
            Hư gì đổi nấy 12 tháng tận nhà (miễn phí tháng đầu)
          </p>
          <p class="flex items-start gap-2">
            <img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
              class="w-7 h-7 shrink-0" />
            {% if _product.warranty != '' %}{{ _product.warranty }}{% else %}Bảo hành chính hãng 2 năm, có người đến tận
            nhà{% endif %}
          </p>
          <p class="flex items-start gap-2">
            <img src="https://www.figma.com/api/mcp/asset/67ff0e18-ae1e-4a60-b2f7-7adce5447103" alt=""
              class="w-7 h-7 shrink-0" />
            {% 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="https://www.figma.com/api/mcp/asset/ad1d1545-2457-4297-9260-befa7a7ae7c3" alt=""
              class="w-7 h-7 shrink-0" />
            Nếu dùng cho hoạt động kinh doanh (nhà máy, khách sạn, giặt ủi,...) thì không được bảo hành.
          </p>
          <p class="flex items-start gap-2">
            <img src="https://www.figma.com/api/mcp/asset/8ccb7b02-0447-4725-9436-399b0fdcdea2" alt=""
              class="w-7 h-7 shrink-0" />
            {% if _product.package_accessory != '' %}{{ _product.package_accessory }}{% else %}Lắp đặt miễn phí lúc giao
            hàng{% 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="flex-1 min-w-0 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 | format_number }}₫</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 | format_number }}₫</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 id="tab-btn-spec"
            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 id="tab-btn-info"
            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>
        <!-- Tab: Thông số kỹ thuật -->
        <div id="tab-content-spec">
          <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 mt-4 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>
        <!-- Tab: Thông tin sản phẩm -->
        <div id="tab-content-info" class="hidden">
          <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]">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="relative mt-4 px-3">
            <div id="product-description-content"
              class="product-description text-[13px] leading-[22px] tracking-[-0.26px] text-black overflow-hidden max-h-[420px] transition-all duration-300 ease-in-out">
              {% 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 id="product-description-fade"
              class="pointer-events-none absolute left-3 right-3 bottom-0 h-20 bg-gradient-to-t from-white to-transparent">
            </div>
          </div>
          <div class="mt-3 flex justify-center">
            <button id="btn-toggle-description" type="button"
              class="hidden h-10 rounded-[4px] border border-[#8c8c8c] px-6 text-[#6b6b6b] text-[13px] font-medium">
              Xem thêm
            </button>
          </div>
        </div>
      </div>

      {% comment %}
      <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-full 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-full"></div>

        <div class="w-full 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>
      {% endcomment %}

      {% assign _rating_total = _rating_summary.total | default: 0 | plus: 0 %}
      {% assign _rating_avg = _rating_summary.avgRate | default: 0 %}
      {% assign _happy_total = page.product_info.comment.summary.total | default: _rating_total %}
      <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 shrink-0">
            <div class="flex items-center gap-[2px]">
              <span class="text-[#f9a000] text-[18px] leading-none">★</span>
              <p class="text-[32px] leading-none font-extrabold font-inter tracking-[-0.64px]">{{ _rating_avg }}</p>
              <p class="text-[13px] text-[#9d9d9d] font-inter">/5</p>
            </div>
            <p class="text-[13px] font-inter text-black">{{ _happy_total }} khách hài lòng</p>
            <p class="text-[13px] text-[#9d9d9d] font-inter">{{ _rating_total }} đánh giá</p>
          </div>

          <div class="w-[315px] flex flex-col gap-2 text-[13px] shrink-0">
            {% assign _rating_keys = '5,4,3,2,1' | split: ',' %}
            {% for _star in _rating_keys %}
            {% assign _rate_point = _star | plus: 0 %}
            {% assign _rate_count = 0 %}
            {% if _rating_summary.list_rate.size > 0 %}
            {% for _rate in _rating_summary.list_rate %}
            {% assign _rate_key = _rate.rate | default: _rate.star | default: _rate.key | default: _rate.id | plus: 0 %}
            {% if _rate_key == _rate_point %}
            {% assign _rate_count = _rate.total | default: _rate.count | default: _rate.value | plus: 0 %}
            {% endif %}
            {% endfor %}
            {% endif %}
            {% assign _rate_percent = 0 %}
            {% if _rating_total > 0 %}
            {% assign _rate_percent = _rate_count | times: 100.0 | divided_by: _rating_total %}
            {% endif %}
            <div class="star-row">
              <span class="text-[13px] font-medium">{{ _star }}</span>
              <span class="text-[#f9a000] text-[12px] leading-none">★</span>
              <div class="star-bar">
                <span
                  style="width:{% if _rate_percent > 100 %}100{% elsif _rate_percent < 0 %}0{% else %}{{ _rate_percent }}{% endif %}%"></span>
              </div>
              <span class="text-[13px] font-medium tracking-[-0.26px]">
                {% if _rate_percent > 0 %}{{ _rate_percent | round: 1 }}%{% else %}0{% endif %}
              </span>
            </div>
            {% endfor %}
          </div>

          <img src="{{ _product.productImage.small }}" alt="{{ _product.productName }}"
            class="w-20 h-20 rounded-[4px] object-cover shrink-0"
            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 shrink-0"
            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 shrink-0"
            onerror="this.onerror=null;this.src='{{ no_image_url }}'" />
        </div>

        <div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
          <div class="flex items-center gap-[6px]">
            <p class="font-bold">Nguyễn Lê Tuấn</p>
            <svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="12" cy="12" r="9.5" stroke="#35b327" />
              <path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
            <span class="w-px h-[14px] bg-[#d5d5d5]"></span>
            <span class="text-[#df0000] text-[12px] leading-none">♥</span>
            <p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
          </div>
          <p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
            lợi,
            mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</p>
        </div>

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

        <div class="w-full grid gap-2 text-[13px] tracking-[-0.26px]">
          <div class="flex items-center gap-[6px]">
            <p class="font-bold">Nguyễn Lê Tuấn</p>
            <svg class="w-[15px] h-[15px] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="12" cy="12" r="9.5" stroke="#35b327" />
              <path d="M8.5 12.5L11 15L15.5 9.8" stroke="#35b327" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <p class="text-[#35b327] font-medium">Đã mua tại MIQ</p>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-[#f9a000] text-[12px] leading-none tracking-[1px]">★★★★★</span>
            <span class="w-px h-[14px] bg-[#d5d5d5]"></span>
            <span class="text-[#df0000] text-[12px] leading-none">♥</span>
            <p class="font-medium">Sẽ giới thiệu cho bạn bè, người thân</p>
          </div>
          <p class="font-medium">Tủ lạnh có ngăn chứa rất rộng rãi để được nhiều thực phẩm, có app theo dõi rất tiện
            lợi,
            mua được ngay dịp sale giá rẻ, có dịp mình sẽ ủng hộ nữa</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_total }} đá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] shrink-0 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-full h-[144px] rounded-[8px] object-cover" />
        <img src="{{ 'category_qc_samsung.png' | asset_url }}" alt=""
          class="w-full 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 %}
          <input type="hidden" id="selected-addon-id" value="{{ _product.addon[0].addon_id | default: '' }}">
          <div id="install-option-group" class="flex flex-col gap-2">
            {% for _addon in _product.addon limit:3 %}
            {% assign _addon_old_price = _addon.market_price | default: 0 | plus: 0 %}
            {% assign _addon_price = _addon.price | default: 0 | plus: 0 %}
            <div
              class="js-install-option relative rounded-[8px] border p-[11px] h-[65px] transition-all cursor-pointer {% if forloop.first %}border-[#e4057c] bg-[#fff6f6] is-selected{% else %}border-[#e2e2e2] bg-white{% endif %}"
              data-addon-id="{{ _addon.addon_id }}" role="radio" tabindex="0"
              aria-checked="{% if forloop.first %}true{% else %}false{% endif %}">
              <div class="flex items-center justify-between gap-3">
                <div class="flex items-center gap-2">
                  <span
                    class="js-install-radio w-3 h-3 rounded-full border {% if forloop.first %}border-[#a0045c]{% else %}border-[#a9a9a9]{% endif %} inline-flex items-center justify-center">
                    <span
                      class="js-install-radio-dot w-[5px] h-[5px] rounded-full bg-[#a0045c] {% unless forloop.first %}hidden{% endunless %}"></span>
                  </span>
                  <p class="text-[13px] font-semibold tracking-[-0.26px]">{{ _addon.title }}</p>
                </div>
                <div class="flex items-center gap-2">
                  {% if _addon_old_price > _addon_price and _addon_old_price > 0 %}
                  <p class="text-[11px] text-[#868686] line-through">{{ _addon_old_price | format_number }}đ</p>
                  {% endif %}
                  {% if _addon_price > 0 %}
                  <p class="text-[14px] font-bold text-[#e40000]">{{ _addon_price | format_number }}đ</p>
                  {% else %}
                  <p class="text-[14px] font-bold text-[#e40000]">Miễn phí</p>
                  {% endif %}
                </div>
              </div>
              <div class="flex items-center gap-1 ps-5 mt-1">
                {% if forloop.first %}
                <svg class="w-3 h-3 shrink-0 text-[#35b327]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <circle cx="12" cy="12" r="9.5" stroke="currentColor" />
                  <path d="M8.5 12.5L11 15L15.5 9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
                <p class="text-[12px]">Gói tiêu chuẩn</p>
                {% elsif forloop.index == 2 %}
                <span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
                <p class="text-[12px] text-[#ff7300]">Bảo hành 4 năm (2 năm chính hãng, 2 năm MIQ)</p>
                {% else %}
                <span class="text-[#ff7300] text-[10px] leading-none font-semibold">VIP</span>
                <p class="text-[12px] text-[#ff7300]">Tuỳ chọn dịch vụ đi kèm</p>
                {% endif %}
              </div>
              <span
                class="js-install-selected-dot absolute left-[17px] bottom-[8px] w-[6px] h-[6px] rounded-full bg-[#90004b] {% unless forloop.first %}hidden{% endunless %}"></span>
            </div>
            {% endfor %}
          </div>
          {% comment %}
          {% 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 | format_number }}đ</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 %}
          {% endcomment %}
          {% 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 id="btn-add-to-cart" type="button" data-product-name="{{ _product.productName }}"
              data-product-image="{{ _product.productImage.small | default: _product.productImage.large | default: no_image_url }}"
              data-product-price="{% if _product.price > 0 %}{{ _product.price | format_number }}đ{% else %}Liên hệ{% endif %}"
              class="w-[166px] h-12 rounded-[4px] border border-[#0084ff] bg-white text-[#0084ff] flex flex-col items-center justify-center gap-1 shrink-0">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path
                  d="M2.25 3.75H3.73C4.14 3.75 4.48 4.04 4.55 4.44L5.97 12.69C6.09 13.41 6.71 13.94 7.44 13.94H17.53C18.2 13.94 18.79 13.5 18.99 12.86L20.54 7.86C20.78 7.08 20.2 6.28 19.39 6.28H6.11"
                  stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M9.25 20.25C9.94 20.25 10.5 19.69 10.5 19C10.5 18.31 9.94 17.75 9.25 17.75C8.56 17.75 8 18.31 8 19C8 19.69 8.56 20.25 9.25 20.25Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                <path
                  d="M16.75 20.25C17.44 20.25 18 19.69 18 19C18 18.31 17.44 17.75 16.75 17.75C16.06 17.75 15.5 18.31 15.5 19C15.5 19.69 16.06 20.25 16.75 20.25Z"
                  stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M12.25 8.25V11.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M10.5 10H14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              <span class="block text-[13px] leading-none tracking-[-0.26px]">Thêm vào giỏ</span>
            </button>
            <button id="btn-buy-now"
              class="w-[166px] h-12 rounded-[4px] bg-[#fc7600] text-white text-[13px] font-semibold tracking-[-0.26px] shrink-0">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 | format_number }}đ</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 | format_number }}đ
              </p>
              {% elsif _product.price > 0 %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">{{ _product.price | format_number }}đ</p>
              {% else %}
              <p class="text-[13px] leading-6 font-semibold text-[#d90000]">Liên hệ</p>
              {% endif %}
            </div>
          </a>
        </div>
      </div>
    </aside>
  </div>

</div>

<!-- Toast thêm vào giỏ -->
<div id="cart-toast" class="fixed bottom-6 right-6 z-50 hidden transition-all">
  <div
    class="bg-[#35b327] text-white px-5 py-3 rounded-[8px] shadow-lg flex items-center gap-3 text-[14px] font-medium">
    <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Đã thêm sản phẩm vào giỏ hàng!
  </div>
</div>