tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
327b2645f2443ddf49f0e682e4c3e18352dfcc25
agent_test/template/home/home.html

1148 lines
73 KiB
HTML
Raw Normal View History

uppdate
2026-03-07 12:09:01 +07:00
<div class="layout-container flex flex-col gap-[27px]">
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- Banner Slider -->
<div class="w-full h-[364px] rounded-[12px] overflow-hidden relative">
<div class="swiper homepage-banner-slider h-full">
<div class="swiper-wrapper">
{% assign _homepage_banners = banner.homepage.banner_slider_homepage %}
{% if _homepage_banners and _homepage_banners.size > 0 %}
{% for _banner in _homepage_banners %}
<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 %}
{% else %}
<a href="#" class="swiper-slide block h-full">
<img src="{{ 'banner_slider.png' | asset_url }}" alt="Banner" class="w-full h-full object-cover" />
</a>
{% endif %}
</div>
<div class="swiper-pagination homepage-banner-pagination"></div>
</div>
</div>
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- Category Icons -->
<div
class="bg-white border border-dashed border-[#db0000] rounded-[8px] p-3 h-[236px] grid grid-cols-8 grid-rows-2 gap-3">
<!-- Row 1 -->
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Máy giặt" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Máy giặt</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Tivi" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Tivi</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Tủ lạnh" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Tủ lạnh</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Sức khỏe & làm đẹp" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Sức khỏe &amp; làm đẹp</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Máy lọc nước" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Máy lọc nước</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Hút bụi" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Hút bụi</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Máy lọc không khí" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Máy lọc không khí</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Loa" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Loa</span>
</a>
<!-- Row 2 -->
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Máy lạnh" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Máy lạnh</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Gia dụng" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Gia dụng</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Máy sấy quần áo" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Máy sấy quần áo</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Máy nước nóng" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Máy nước nóng</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Nồi cơm điện" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Nồi cơm điện</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Tủ đông mát" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Tủ đông mát</span>
</a>
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
<img src="{{ 'icon_category_item.png' | asset_url }}" alt="Bếp từ" class="w-12 h-12 object-cover" />
<span class="text-xs text-black text-center mt-[6px] tracking-tight">Bếp từ</span>
</a>
<div class="h-[99px]"></div>
</div>
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- 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">
<!-- Item 1 -->
<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_history_1.png' | asset_url }}" alt=""
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]">Toshiba
inverter 555 lít GR - SFSADUYW - 234</a>
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
</div>
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">12.990.000 <span
class="underline">đ</span></p>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
</div>
<!-- Item 2 -->
<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_history_2.png' | asset_url }}" alt=""
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]">Toshiba
inverter 555 lít GR - SFSADUYW - 234</a>
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
</div>
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">12.990.000 <span
class="underline">đ</span></p>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
</div>
<!-- Item 3 -->
<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_history_3.png' | asset_url }}" alt=""
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]">Toshiba
inverter 555 lít GR - SFSADUYW - 234</a>
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
</div>
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">12.990.000 <span
class="underline">đ</span></p>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
</div>
<!-- Item 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_history_4.png' | asset_url }}" alt=""
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]">Toshiba
inverter 555 lít GR - SFSADUYW - 234</a>
<img src="{{ 'icon_close.svg' | asset_url }}" alt="" class="w-4 h-4 shrink-0" />
</div>
<p class="text-[13px] font-extrabold text-[#e00000] tracking-tight">12.990.000 <span
class="underline">đ</span></p>
</div>
</div>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
</div>
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- BST Sale -->
<div class="relative w-full h-[1006px] rounded-[12px] overflow-hidden">
<img src="{{ 'bst_sale_bg.png' | asset_url }}" alt="" class="absolute inset-0 w-full h-full object-cover" />
<div class="absolute inset-0 flex flex-col gap-3 px-[11px] pt-[93px]">
<!-- Title -->
<div class="flex justify-center">
<div class="flex items-center justify-center h-[54px] w-[608px] rounded-full"
style="background: linear-gradient(90deg, #bf4000 0%, #e86020 50%, #f07810 100%)">
<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 gap-2">
<!-- 10 products -->
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<!-- Row 2 -->
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
<div class="bg-white rounded-[8px] flex flex-col items-center gap-[11px] px-[11px] py-3 h-[372px]">
<a href="/product-detail" class="block"><img src="{{ 'product_sale_image.png' | asset_url }}" alt=""
class="w-[204px] h-[204px] rounded-[4px] object-cover" /></a>
<div class="relative w-[204px] 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" />
<p class="relative text-[16px] font-bold text-white tracking-tight">15.000.000 đ</p>
<p class="relative text-[11px] text-white tracking-tight">18.000.000 đ (-20%)</p>
</div>
<a href="/product-detail"
class="text-[13px] font-bold text-black tracking-tight w-[204px] hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div
class="bg-white border border-[#e00000] rounded-full h-7 flex items-center justify-center w-[204px] cursor-pointer hover:bg-red-50">
<span class="text-[#bd0000] text-[14px] font-medium tracking-tight">MUA DEAL HỜI</span>
</div>
</div>
</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>
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- 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" />
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<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" />
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<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" />
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<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" />
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<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 1: Điện Tử - Điện Máy -->
<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">Điện Tử - Điện Máy</p>
<p class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả &gt;&gt;</p>
</div>
</div>
<div class="bg-white rounded-[12px] px-3 py-[17px] grid grid-cols-5 gap-3 mt-[10px]">
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
</div>
</div>
<!-- Product Category 2: Điện Tử - Điện Máy (2nd) -->
<div class="relative w-full">
<div class="relative w-[794px] h-[123px] mx-auto">
<img src="{{ 'category_banner_dien_may.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">Điện Tử - Điện Máy</p>
<p class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả &gt;&gt;</p>
</div>
</div>
<div class="bg-white rounded-[12px] px-3 py-[17px] grid grid-cols-5 gap-3 mt-[10px]">
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
</div>
</div>
<!-- Product Category 3: Điện Tử - Viễn Thông -->
<div class="relative w-full">
<div class="relative w-[794px] h-[123px] mx-auto">
<img src="{{ 'category_banner_vien_thong.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">Điện Tử - Viễn Thông</p>
<p class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả &gt;&gt;</p>
</div>
</div>
<div class="bg-white rounded-[12px] px-3 py-[17px] grid grid-cols-5 gap-3 mt-[10px]">
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
</div>
</div>
<!-- Product Category 4: Điện Gia Dụng -->
<div class="relative w-full">
<div class="relative w-[794px] h-[123px] mx-auto">
<img src="{{ 'category_banner_gia_dung.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">Điện Gia Dụng</p>
<p class="text-[12px] font-semibold text-[#fdd717] text-center font-inter">Xem tất cả &gt;&gt;</p>
</div>
</div>
<div class="bg-white rounded-[12px] px-3 py-[17px] grid grid-cols-5 gap-3 mt-[10px]">
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] p-[9px] pt-[10px] flex flex-col gap-[10px]">
<a href="/product-detail" class="block"><img src="{{ 'product_card_image.png' | asset_url }}" alt=""
class="w-full aspect-square rounded-[4px] object-cover" /></a>
<span class="inline-block h-5 rounded-full text-white text-[10px] font-medium px-2 leading-5 w-fit"
style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
<div class="flex items-center gap-1">
<p class="text-[18px] font-bold text-[#db0000]">7.490.000 <span class="underline">đ</span></p><span
class="bg-[#ffeef0] rounded-full px-[7px] py-[2px] text-[10px] font-medium text-[#dc0d28]">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 đ</p>
<a href="/product-detail" class="text-[13px] font-bold text-black hover:text-[#e4057c]">Máy lạnh Casper
Inverter 1.5 HP GC-12IB36</a>
<div class="flex items-center gap-2">
<img src="{{ 'product_badge_1.png' | asset_url }}" alt="" class="w-8 h-8" />
<img src="{{ 'product_badge_2.png' | asset_url }}" alt="" class="w-8 h-8" />
</div>
<div class="flex items-center gap-1 text-[12px] text-[#707070]"><img
src="{{ 'icon_rating_star.svg' | asset_url }}" alt="" class="w-[11px] h-[11px]" /><span>5 · Đã bán
24,9k</span></div>
<div class="absolute right-2 bottom-2">
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
<img src="{{ 'icon_cart_circle.svg' | asset_url }}" alt="" class="w-4 h-4" />
</div>
</div>
</div>
</div>
</div>
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- Box Article + Video Review -->
<div class="bg-white rounded-[12px] h-[431px] overflow-hidden flex gap-3 px-3 py-4">
<!-- Tin khuyến mãi -->
<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">
<!-- Main article -->
<div class="w-[481px] shrink-0 relative">
<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>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
<!-- Side articles -->
<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>
<!-- Video Review -->
<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 line-clamp-3">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 line-clamp-3">Duy nhất 17h ngày 10/02 Cơ
hội trúng Máy nước</p>
</div>
</div>
</div>
</div>
u
2026-03-07 10:26:20 +07:00
uppdate
2026-03-07 12:09:01 +07:00
<!-- Key Search -->
<div class="bg-white rounded-[12px] 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] h-[156px] overflow-hidden px-3 py-4 flex flex-wrap gap-x-5 gap-y-[34px] 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>máy massage X5 Pro Omni</span>
<span>máy massage X5 Pro Omni</span>
<span>máy massage X5 Pro Omni</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>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>máy massage X5 Pro Omni</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>MacBook Air M4</span>
<span>điều hòa Nagakawa</span>
u
2026-03-07 10:26:20 +07:00
</div>
uppdate
2026-03-07 12:09:01 +07:00
</div>
</div><!-- /container -->
Reference in New Issue Copy Permalink