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

uppdate

Browse Source
This commit is contained in:
tieptk
2026-03-07 12:09:01 +07:00
parent aa223ce3bb
commit 327b2645f2
124 changed files with 2189 additions and 1696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
export_to_html/category.html
View File

@@ -105,143 +105,51 @@
</div>
<!-- 5 sale product cards -->
<div class="absolute bottom-[23px] left-[12px] right-[12px] flex gap-3">
<!-- Card 1 -->
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 overflow-hidden">
<div class="absolute top-2 left-2 flex gap-1">
<span class="bg-[#fff1f1] text-[#e40000] text-[10px] rounded-[4px] px-[5px] py-[2px]">Mẫu mới</span>
<span class="bg-[#f1f1f1] text-[#484848] text-[10px] rounded-[4px] px-[5px] py-[2px]">Trả chậm 0%</span>
</div>
<div class="flex flex-col gap-[8px] px-[7px] pt-[36px] pb-[8px]">
<img src="image/category_sale_product_1.png" alt="" class="w-full aspect-square rounded-[4px] object-contain bg-white" />
<div class="flex items-center gap-1">
<span class="inline-flex items-center h-5 rounded-full text-white text-[10px] font-medium px-2" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
</div>
<div class="flex items-center gap-[6px]">
<p class="text-[18px] font-bold text-[#db0000]">72.490.000 <span class="underline">Ä‘</span></p>
<span class="bg-[#c5001a] text-white text-[10px] font-bold rounded-[2px] px-1">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 Ä‘</p>
<p class="text-[13px] font-bold text-black leading-tight">Tủ lạnh Hitachi Inverter 540 lít Multi Door R-HW540RV(X)</p>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-[6px] text-[12px] text-[#707070]">
<img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" />
<span>5 · Đã bán 24,9k</span>
</div>
<div class="w-6 h-6 rounded-full bg-[#e4057c] flex items-center justify-center shrink-0">
<img src="image/icon_cart.svg" alt="" class="w-4 h-4 brightness-0 invert" />
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 overflow-hidden">
<div class="absolute top-2 left-2 flex gap-1">
<span class="bg-[#f1f1f1] text-[#484848] text-[10px] rounded-[4px] px-[5px] py-[2px]">Trả chậm 0%</span>
</div>
<div class="flex flex-col gap-[8px] px-[7px] pt-[36px] pb-[8px]">
<img src="image/category_sale_product_2.png" alt="" class="w-full aspect-square rounded-[4px] object-contain bg-white" />
<div class="flex items-center gap-1">
<span class="inline-flex items-center h-5 rounded-full text-white text-[10px] font-medium px-2" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
</div>
<div class="flex items-center gap-[6px]">
<p class="text-[18px] font-bold text-[#db0000]">72.490.000 <span class="underline">Ä‘</span></p>
<span class="bg-[#c5001a] text-white text-[10px] font-bold rounded-[2px] px-1">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 Ä‘</p>
<p class="text-[13px] font-bold text-black leading-tight">Tủ lạnh Hitachi Inverter 540 lít Multi Door R-HW540RV(X)</p>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-[6px] text-[12px] text-[#707070]">
<img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" />
<span>5 · Đã bán 24,9k</span>
</div>
<div class="w-6 h-6 rounded-full bg-[#e4057c] flex items-center justify-center shrink-0">
<img src="image/icon_cart.svg" alt="" class="w-4 h-4 brightness-0 invert" />
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 overflow-hidden">
<div class="absolute top-2 left-2 flex gap-1">
<span class="bg-[#fff1f1] text-[#e40000] text-[10px] rounded-[4px] px-[5px] py-[2px]">Mẫu mới</span>
<span class="bg-[#f1f1f1] text-[#484848] text-[10px] rounded-[4px] px-[5px] py-[2px]">Trả chậm 0%</span>
</div>
<div class="flex flex-col gap-[8px] px-[7px] pt-[36px] pb-[8px]">
<img src="image/category_sale_product_3.png" alt="" class="w-full aspect-square rounded-[4px] object-contain bg-white" />
<div class="flex items-center gap-1">
<span class="inline-flex items-center h-5 rounded-full text-white text-[10px] font-medium px-2" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
</div>
<div class="flex items-center gap-[6px]">
<p class="text-[18px] font-bold text-[#db0000]">72.490.000 <span class="underline">Ä‘</span></p>
<span class="bg-[#c5001a] text-white text-[10px] font-bold rounded-[2px] px-1">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 Ä‘</p>
<p class="text-[13px] font-bold text-black leading-tight">Tủ lạnh Hitachi Inverter 540 lít Multi Door R-HW540RV(X)</p>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-[6px] text-[12px] text-[#707070]">
<img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" />
<span>5 · Đã bán 24,9k</span>
</div>
<div class="w-6 h-6 rounded-full bg-[#e4057c] flex items-center justify-center shrink-0">
<img src="image/icon_cart.svg" alt="" class="w-4 h-4 brightness-0 invert" />
</div>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 overflow-hidden">
<div class="absolute top-2 left-2 flex gap-1">
<span class="bg-[#f1f1f1] text-[#484848] text-[10px] rounded-[4px] px-[5px] py-[2px]">Trả chậm 0%</span>
</div>
<div class="flex flex-col gap-[8px] px-[7px] pt-[36px] pb-[8px]">
<img src="image/category_sale_product_4.png" alt="" class="w-full aspect-square rounded-[4px] object-contain bg-white" />
<div class="flex items-center gap-1">
<span class="inline-flex items-center h-5 rounded-full text-white text-[10px] font-medium px-2" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
</div>
<div class="flex items-center gap-[6px]">
<p class="text-[18px] font-bold text-[#db0000]">72.490.000 <span class="underline">Ä‘</span></p>
<span class="bg-[#c5001a] text-white text-[10px] font-bold rounded-[2px] px-1">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 Ä‘</p>
<p class="text-[13px] font-bold text-black leading-tight">Tủ lạnh Hitachi Inverter 540 lít Multi Door R-HW540RV(X)</p>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-[6px] text-[12px] text-[#707070]">
<img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" />
<span>5 · Đã bán 24,9k</span>
</div>
<div class="w-6 h-6 rounded-full bg-[#e4057c] flex items-center justify-center shrink-0">
<img src="image/icon_cart.svg" alt="" class="w-4 h-4 brightness-0 invert" />
</div>
</div>
</div>
</div>
<!-- Card 5 -->
<div class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 overflow-hidden">
<div class="absolute top-2 left-2 flex gap-1">
<span class="bg-[#f1f1f1] text-[#484848] text-[10px] rounded-[4px] px-[5px] py-[2px]">Trả chậm 0% trả trước 0đ</span>
</div>
<div class="flex flex-col gap-[8px] px-[7px] pt-[36px] pb-[8px]">
<img src="image/category_sale_product_5.png" alt="" class="w-full aspect-square rounded-[4px] object-contain bg-white" />
<div class="flex items-center gap-1">
<span class="inline-flex items-center h-5 rounded-full text-white text-[10px] font-medium px-2" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)">Sắm tết vô tư</span>
</div>
<div class="flex items-center gap-[6px]">
<p class="text-[18px] font-bold text-[#db0000]">72.490.000 <span class="underline">Ä‘</span></p>
<span class="bg-[#c5001a] text-white text-[10px] font-bold rounded-[2px] px-1">-20%</span>
</div>
<p class="text-[12px] text-[#c5c5c5] line-through">7.490.000 Ä‘</p>
<p class="text-[13px] font-bold text-black leading-tight">Tủ lạnh Hitachi Inverter 540 lít Multi Door R-HW540RV(X)</p>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-[6px] text-[12px] text-[#707070]">
<img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" />
<span>5 · Đã bán 24,9k</span>
</div>
<div class="w-6 h-6 rounded-full bg-[#e4057c] flex items-center justify-center shrink-0">
<img src="image/icon_cart.svg" alt="" class="w-4 h-4 brightness-0 invert" />
</div>
</div>
</div>
</div>
<a href="#" class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
<div class="h-[173px] flex items-center justify-center"><img src="image/product_card_image.png" alt="" class="w-[173px] h-[173px] rounded-[4px] object-cover" /></div>
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)"><span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img src="../assets/images/icon_gift.png" alt="" class="w-[11px] h-[11px] object-contain" /></span><span>Sam tet vo tu</span></div>
<div class="flex items-center gap-[6px]"><p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">7.490.000 <span class="underline">&#273;</span></p><span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-20%</span></div>
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">7.490.000 &#273;</p>
<p class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">May lanh Casper Inverter 1.5 HP GC-12IB36</p>
<div class="flex items-center gap-2"><img src="image/product_badge_1.png" alt="" class="w-8 h-8 rounded-full object-cover" /><img src="image/product_badge_2.png" alt="" class="w-8 h-8 rounded-full object-cover" /></div>
<div class="mt-auto flex items-center justify-between gap-[6px]"><div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap"><img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" /><span>5</span><span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span><span>Da ban 24,9k</span></div><button type="button" class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0" aria-label="Add to cart"><img src="image/icon_cart_circle.svg" alt="" class="w-4 h-4" /></button></div>
</a>
<a href="#" class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
<div class="h-[173px] flex items-center justify-center"><img src="image/category_sale_product_2.png" alt="" class="w-[173px] h-[173px] rounded-[4px] object-cover" /></div>
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)"><span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img src="../assets/images/icon_gift.png" alt="" class="w-[11px] h-[11px] object-contain" /></span><span>Sam tet vo tu</span></div>
<div class="flex items-center gap-[6px]"><p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">7.490.000 <span class="underline">&#273;</span></p><span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-20%</span></div>
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">7.490.000 &#273;</p>
<p class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">May lanh Casper Inverter 1.5 HP GC-12IB36</p>
<div class="flex items-center gap-2"><img src="image/product_badge_1.png" alt="" class="w-8 h-8 rounded-full object-cover" /><img src="image/product_badge_2.png" alt="" class="w-8 h-8 rounded-full object-cover" /></div>
<div class="mt-auto flex items-center justify-between gap-[6px]"><div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap"><img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" /><span>5</span><span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span><span>Da ban 24,9k</span></div><button type="button" class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0" aria-label="Add to cart"><img src="image/icon_cart_circle.svg" alt="" class="w-4 h-4" /></button></div>
</a>
<a href="#" class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
<div class="h-[173px] flex items-center justify-center"><img src="image/category_sale_product_3.png" alt="" class="w-[173px] h-[173px] rounded-[4px] object-cover" /></div>
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)"><span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img src="../assets/images/icon_gift.png" alt="" class="w-[11px] h-[11px] object-contain" /></span><span>Sam tet vo tu</span></div>
<div class="flex items-center gap-[6px]"><p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">7.490.000 <span class="underline">&#273;</span></p><span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-20%</span></div>
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">7.490.000 &#273;</p>
<p class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">May lanh Casper Inverter 1.5 HP GC-12IB36</p>
<div class="flex items-center gap-2"><img src="image/product_badge_1.png" alt="" class="w-8 h-8 rounded-full object-cover" /><img src="image/product_badge_2.png" alt="" class="w-8 h-8 rounded-full object-cover" /></div>
<div class="mt-auto flex items-center justify-between gap-[6px]"><div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap"><img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" /><span>5</span><span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span><span>Da ban 24,9k</span></div><button type="button" class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0" aria-label="Add to cart"><img src="image/icon_cart_circle.svg" alt="" class="w-4 h-4" /></button></div>
</a>
<a href="#" class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
<div class="h-[173px] flex items-center justify-center"><img src="image/category_sale_product_4.png" alt="" class="w-[173px] h-[173px] rounded-[4px] object-cover" /></div>
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)"><span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img src="../assets/images/icon_gift.png" alt="" class="w-[11px] h-[11px] object-contain" /></span><span>Sam tet vo tu</span></div>
<div class="flex items-center gap-[6px]"><p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">7.490.000 <span class="underline">&#273;</span></p><span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-20%</span></div>
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">7.490.000 &#273;</p>
<p class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">May lanh Casper Inverter 1.5 HP GC-12IB36</p>
<div class="flex items-center gap-2"><img src="image/product_badge_1.png" alt="" class="w-8 h-8 rounded-full object-cover" /><img src="image/product_badge_2.png" alt="" class="w-8 h-8 rounded-full object-cover" /></div>
<div class="mt-auto flex items-center justify-between gap-[6px]"><div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap"><img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" /><span>5</span><span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span><span>Da ban 24,9k</span></div><button type="button" class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0" aria-label="Add to cart"><img src="image/icon_cart_circle.svg" alt="" class="w-4 h-4" /></button></div>
</a>
<a href="#" class="relative bg-white border border-[#dcdcdc] rounded-[8px] w-[226px] h-[426px] shrink-0 px-[9px] py-[10px] flex flex-col gap-[8px] no-underline">
<div class="h-[173px] flex items-center justify-center"><img src="image/category_sale_product_5.png" alt="" class="w-[173px] h-[173px] rounded-[4px] object-cover" /></div>
<div class="inline-flex w-fit h-5 items-center gap-1 rounded-full pl-1 pr-[10px] text-white text-[10px] font-medium tracking-[-0.2px]" style="background:linear-gradient(89.82deg,#ff0000 2.38%,#cc0003 94.82%)"><span class="w-4 h-4 rounded-full bg-white flex items-center justify-center overflow-hidden"><img src="../assets/images/icon_gift.png" alt="" class="w-[11px] h-[11px] object-contain" /></span><span>Sam tet vo tu</span></div>
<div class="flex items-center gap-[6px]"><p class="m-0 text-[18px] leading-none font-bold text-[#db0000] tracking-[-0.36px]">7.490.000 <span class="underline">&#273;</span></p><span class="min-w-[35px] h-4 px-[7px] rounded-full bg-[#ffeef0] text-[#dc0d28] text-[10px] leading-none font-medium tracking-[-0.2px] inline-flex items-center justify-center">-20%</span></div>
<p class="m-0 text-[12px] leading-none text-[#c5c5c5] tracking-[-0.24px] line-through">7.490.000 &#273;</p>
<p class="m-0 h-[32px] overflow-hidden text-[13px] leading-[16px] font-bold tracking-[-0.26px] text-black">May lanh Casper Inverter 1.5 HP GC-12IB36</p>
<div class="flex items-center gap-2"><img src="image/product_badge_1.png" alt="" class="w-8 h-8 rounded-full object-cover" /><img src="image/product_badge_2.png" alt="" class="w-8 h-8 rounded-full object-cover" /></div>
<div class="mt-auto flex items-center justify-between gap-[6px]"><div class="inline-flex items-center gap-1 text-[#707070] text-[12px] leading-none tracking-[-0.24px] whitespace-nowrap"><img src="image/icon_rating_star.svg" alt="" class="w-[11px] h-[11px]" /><span>5</span><span class="w-[2px] h-[2px] rounded-full bg-[#707070]"></span><span>Da ban 24,9k</span></div><button type="button" class="w-6 h-6 rounded-full bg-[#c1c1c1] flex items-center justify-center shrink-0" aria-label="Add to cart"><img src="image/icon_cart_circle.svg" alt="" class="w-4 h-4" /></button></div>
</a>
</div>
</div>

100
export_to_html/index.html
View File

@@ -14,16 +14,16 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body class="bg-[#f4f4f4] min-w-[1440px]">
<body class="bg-[#f4f4f4]">
<!-- ===================== HEADER ===================== -->
<header class="w-full flex flex-col items-center bg-white relative z-50" style="min-width:1440px">
<header class="w-full flex flex-col items-center bg-white relative z-50">
<!-- Slogan Bar -->
<div class="w-full relative h-8 flex items-center px-[120px] overflow-hidden" style="background:#c00060">
<div class="w-full relative h-8 flex items-center overflow-hidden" style="background:#c00060">
<img src="image/header_slogan_bg.png" alt=""
class="absolute inset-0 w-full h-full object-cover pointer-events-none" />
<div class="relative flex items-center justify-between w-[1200px] mx-auto">
<div class="layout-container relative flex items-center justify-between">
<div class="flex items-center gap-[22px]">
<div class="flex items-center gap-1">
<img src="image/icon_certificate.svg" alt="" class="w-5 h-5" />
@@ -44,22 +44,23 @@
</div>
<!-- Main Header -->
<div class="w-full bg-[#e4057c] h-[68px] flex items-center px-[120px]">
<div class="flex items-center gap-9 w-[1200px] mx-auto">
<!-- Logo -->
<div class="h-[54px] w-[79px] relative shrink-0">
<img src="image/logo_miq.png" alt="MIQ Logo" class="absolute inset-0 w-full h-full object-contain" />
</div>
<!-- Menu (hover) -->
<div id="menu-trigger" class="flex items-center gap-[10px] cursor-pointer select-none" onmouseenter="showMenu()"
onmouseleave="scheduleMenuClose()">
<img src="image/icon_menu.svg" alt="" class="w-6 h-6" />
<span class="text-white text-sm font-semibold">Danh mục</span>
</div>
<!-- Search + Nav -->
<div class="flex items-center gap-[35px] flex-1">
<div class="w-full bg-[#e4057c] h-[68px] flex items-center">
<div class="layout-container h-full py-[7px]">
<div class="w-full flex items-center gap-9">
<!-- Logo -->
<div class="h-[54px] w-[79px] relative shrink-0">
<img src="image/logo_miq.png" alt="MIQ Logo" class="absolute inset-0 w-full h-full object-contain" />
</div>
<!-- Menu (hover) -->
<div id="menu-trigger" class="flex items-center gap-[10px] cursor-pointer select-none" onmouseenter="showMenu()"
onmouseleave="scheduleMenuClose()">
<img src="image/icon_menu.svg" alt="" class="w-6 h-6" />
<span class="text-white text-sm font-semibold">Danh mục</span>
</div>
<!-- Search + Nav -->
<div class="flex items-center gap-[35px] flex-1 justify-end">
<!-- Search Input + Popup -->
<div class="relative w-[465px] shrink-0">
<div class="relative flex-1 min-w-[465px]">
<form action="/search" method="get" class="relative h-9">
<div class="absolute inset-0 bg-white rounded-full"></div>
<img src="image/icon_search.svg" alt="" class="absolute left-[15px] top-[8px] w-5 h-5" />
@@ -132,40 +133,43 @@
<img src="image/icon_arrow_next.svg" alt="" class="w-[20.844px] h-[18.688px]" />
<span class="text-white text-sm font-semibold">Giỏ hàng</span>
</div>
<!-- Showroom (click) -->
<div id="btn-showroom"
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
onclick="toggleShowroom()">
<div class="flex items-center gap-[10px]">
<img src="image/icon_map.svg" alt="" class="w-[15.5px] h-5" />
<span class="text-white text-[13px]">Showroom</span>
<!-- Showroom (click) -->
<div id="btn-showroom"
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
onclick="toggleShowroom()">
<div class="flex items-center gap-[10px]">
<img src="image/icon_map.svg" alt="" class="w-[15.5px] h-5" />
<span class="text-white text-[13px]">Showroom</span>
</div>
<img src="image/icon_cart.svg" alt="" id="showroom-arrow"
class="w-[6px] h-[10.7px] transition-transform duration-200" />
</div>
<img src="image/icon_cart.svg" alt="" id="showroom-arrow"
class="w-[6px] h-[10.7px] transition-transform duration-200" />
</div>
</div>
</div>
</div>
<!-- Category Nav Bar -->
<div class="w-full bg-[#ebecf0] h-8 flex items-center justify-center">
<div class="flex items-center gap-[20px] text-[#90004b] text-[13px] font-normal tracking-[-0.26px]">
<a href="/may-lanh" class="hover:underline">máy lạnh</a>
<a href="/tu-lanh" class="hover:underline">tủ lạnh</a>
<a href="/may-loc-nuoc" class="hover:underline">máy lọc nước</a>
<a href="/quat-suoi" class="hover:underline">quạt sưởi</a>
<a href="/noi-chien" class="hover:underline">nồi chiên</a>
<a href="/smart-tivi" class="hover:underline">smart tivi</a>
<a href="/loa" class="hover:underline">loa</a>
<a href="/noi-com-dien" class="hover:underline">nồi cơm điện</a>
<a href="/man-hinh-may-tinh" class="hover:underline">màn hình máy tính</a>
<div class="w-full bg-[#ebecf0] h-8 flex items-center">
<div class="layout-container">
<div class="h-8 flex items-center justify-center gap-[20px] text-[#90004b] text-[13px] font-normal tracking-[-0.26px]">
<a href="/may-lanh" class="hover:underline">máy lạnh</a>
<a href="/tu-lanh" class="hover:underline">tủ lạnh</a>
<a href="/may-loc-nuoc" class="hover:underline">máy lọc nước</a>
<a href="/quat-suoi" class="hover:underline">quạt sưởi</a>
<a href="/noi-chien" class="hover:underline">nồi chiên</a>
<a href="/smart-tivi" class="hover:underline">smart tivi</a>
<a href="/loa" class="hover:underline">loa</a>
<a href="/noi-com-dien" class="hover:underline">nồi cơm điện</a>
<a href="/man-hinh-may-tinh" class="hover:underline">màn hình máy tính</a>
</div>
</div>
</div>
<!-- ===== MEGA MENU (hover, absolute to header) ===== -->
<div id="mega-menu" class="hidden absolute top-full left-0 w-full z-50" style="min-width:1440px"
<div id="mega-menu" class="hidden absolute top-full left-0 w-full z-50"
onmouseenter="cancelMenuClose()" onmouseleave="scheduleMenuClose()">
<div class="w-[1200px] mx-auto flex rounded-[4px] overflow-hidden">
<div class="layout-container flex rounded-[4px] overflow-hidden">
<!-- Left panel -->
<div class="w-[231px] shrink-0 bg-[#eaecf0] rounded-tl-[4px] rounded-bl-[4px] flex flex-col">
<a href="/chuong-trinh-hot" id="cat-hot" class="cat-item flex items-center h-9 pl-[15px] shrink-0"
@@ -612,8 +616,8 @@
<!-- ===== SHOWROOM PANEL (click, absolute to header) ===== -->
<div id="showroom-panel"
class="hidden absolute top-full left-0 w-full z-50 bg-white shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1)]"
style="min-width:1440px">
<div class="w-[1200px] mx-auto py-[18px]">
>
<div class="layout-container py-[18px]">
<p class="text-center font-semibold text-[16px] text-black uppercase tracking-[-0.32px] mb-4">Địa điểm showroom
của MIQ</p>
<div class="flex gap-3">
@@ -756,8 +760,8 @@
</script>
<!-- ===================== MAIN CONTENT ===================== -->
<main class="w-full px-[120px] py-[16px] flex flex-col gap-[27px]" style="min-width:1440px">
<div class="w-[1200px] mx-auto flex flex-col gap-[27px]">
<main class="w-full py-[16px] flex flex-col gap-[27px]">
<div class="layout-container flex flex-col gap-[27px]">
<!-- Banner Slider -->
<div class="w-full h-[364px] rounded-[12px] overflow-hidden relative">
@@ -1870,8 +1874,8 @@
</main>
<!-- ===================== FOOTER ===================== -->
<footer class="w-full bg-white mt-1" style="min-width:1440px">
<div class="flex gap-[95px] px-[120px] py-4 h-[212px] overflow-hidden items-start">
<footer class="w-full bg-white mt-1">
<div class="layout-container flex gap-[95px] py-4 h-[212px] overflow-hidden items-start">
<!-- Tổng đài -->
<div class="flex flex-col gap-1 w-[267px] shrink-0">
<p class="text-[14px] font-bold text-black leading-[27px]">Tổng đài hỗ trợ</p>
@@ -1940,4 +1944,4 @@
</body>
</html>
</html>

13
export_to_html/style.css
View File

@@ -2,6 +2,19 @@
body { font-family: 'Roboto', sans-serif; margin: 0; }
.font-inter { font-family: 'Inter', sans-serif; }
/* ===== Shared containers ===== */
.layout-container {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1920px) {
.layout-container {
width: 1600px;
}
}
/* ===== Mega menu — left panel items ===== */
.cat-item { transition: background 0.1s; }
.cat-item:hover { background: white; }