tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2026-03-08 23:40:18 +07:00
parent 327b2645f2
commit e2189983f6
2201 changed files with 147205 additions and 20310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

431
template/product/detail.html Normal file
View File

@@ -0,0 +1,431 @@
{% 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>