tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
agent_test/export_to_html/home-article.html

560 lines
29 KiB
HTML
Raw Permalink Normal View History

u
2026-03-07 10:26:20 +07:00
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tin Tức - MIQ Việt Nam</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
roboto: ['Roboto', 'Arial', 'sans-serif'],
},
colors: {
brand: '#E4057C',
brandDeep: '#6B1440',
}
}
}
}
</script>
</head>
<body class="bg-[#f4f4f4] font-roboto text-[#111]">
<!-- Topbar -->
<div class="bg-gradient-to-r from-brandDeep via-brand to-brandDeep text-white text-xs">
<div class="mx-auto flex h-8 w-[1200px] items-center justify-between">
<div class="flex items-center gap-5">
<span class="flex items-center gap-1">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="8" r="4" />
<path d="M20 21a8 8 0 10-16 0" />
</svg>
Sản phẩm <strong>Chính hãng - xuất VAT</strong> đầy đủ
</span>
<span class="flex items-center gap-1">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="1" y="3" width="15" height="13" />
<path d="M16 8h4l3 3v5h-7V8z" />
<circle cx="5.5" cy="18.5" r="2.5" />
<circle cx="18.5" cy="18.5" r="2.5" />
</svg>
<strong>Giao nhanh - Miễn phí</strong>
</span>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.63A2 2 0 012 .18h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14.92z" />
</svg>
<strong>Hotline: 0967641641</strong>
</div>
</div>
</div>
<!-- Main Header -->
<header class="bg-brand text-white">
<div class="mx-auto flex h-[68px] w-[1200px] items-center gap-7">
<!-- Logo -->
<a href="index.html" class="text-[34px] font-bold tracking-tight shrink-0">MIQ</a>
<!-- Menu button -->
<button class="flex items-center gap-2 text-sm font-semibold shrink-0">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18" />
</svg>
Danh mục
</button>
<!-- Search -->
<div class="flex flex-1 items-center gap-8">
<div class="relative flex-1">
<div class="flex items-center gap-2 rounded-full bg-white px-4 py-2">
<svg class="w-5 h-5 text-brand shrink-0" viewBox="0 0 24 24" fill="none" stroke="#E4057C" stroke-width="2">
<circle cx="11" cy="11" r="8" />
<path d="M21 21l-4.35-4.35" />
</svg>
<span class="text-[13px] text-brand">Tivi Samsung giá sốc</span>
</div>
</div>
<!-- Login -->
<div class="flex items-center gap-2 text-sm font-semibold shrink-0 cursor-pointer">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
Đăng nhập
</div>
<!-- Cart -->
<div class="flex items-center gap-2 text-sm font-semibold shrink-0 cursor-pointer">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="9" cy="21" r="1" />
<circle cx="20" cy="21" r="1" />
<path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6" />
</svg>
Giỏ hàng
</div>
<!-- Showroom -->
<button class="flex items-center gap-2 rounded-full bg-[#b70061] px-4 py-1.5 text-sm shrink-0">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
Showroom
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6" />
</svg>
</button>
</div>
</div>
</header>
<!-- Category bar -->
<div class="bg-[#ebecf0]">
<div class="mx-auto flex h-8 w-[1200px] items-center gap-6 text-[13px] text-[#90004b]">
<span class="cursor-pointer hover:underline">máy lạnh</span>
<span class="cursor-pointer hover:underline">tủ lạnh</span>
<span class="cursor-pointer hover:underline">máy lọc nước</span>
<span class="cursor-pointer hover:underline">quạt sưởi</span>
<span class="cursor-pointer hover:underline">nồi chiên</span>
<span class="cursor-pointer hover:underline">smart tivi</span>
<span class="cursor-pointer hover:underline">loa</span>
<span class="cursor-pointer hover:underline">nồi cơm điện</span>
<span class="cursor-pointer hover:underline">màn hình máy tính</span>
</div>
</div>
<main class="mx-auto w-[1200px] py-4">
<!-- Breadcrumb -->
<div class="mb-3 flex items-center gap-2 text-[12px] text-[#888]">
<a href="#" class="hover:text-brand">Tin tức</a>
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M9 18l6-6-6-6" />
</svg>
<span class="text-black">Chi tiết tin tức</span>
</div>
<!-- News Tabs + Cards -->
<div class="bg-white rounded-xl p-4">
<!-- Tab Navigation -->
<nav class="flex border-b border-[#e5e7eb] mb-5">
<a href="#"
class="border-b-2 border-[#e91e63] pb-2.5 pt-2 px-5 text-[13px] font-bold text-[#e91e63] uppercase tracking-[0.35px] whitespace-nowrap">Tin
Công Ty</a>
<a href="#"
class="border-b-2 border-transparent pb-2.5 pt-2 px-4 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63]">Mẹo
Vặt Và Đời Sống</a>
<a href="#"
class="border-b-2 border-transparent pb-2.5 pt-2 px-4 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63]">Tư
Vấn</a>
<a href="#"
class="border-b-2 border-transparent pb-2.5 pt-2 px-4 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63]">Video</a>
<a href="#"
class="border-b-2 border-transparent pb-2.5 pt-2 px-4 text-[13px] text-[#6a7282] uppercase tracking-[0.35px] whitespace-nowrap hover:text-[#e91e63]">Khuyến
Mại</a>
</nav>
<!-- News Cards Grid 3x3 -->
<div class="grid grid-cols-3 gap-3 mb-6">
<!-- Card template (×9) -->
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
<article class="flex flex-col gap-2">
<a href="#" class="block overflow-hidden rounded-lg">
<img src="https://www.figma.com/api/mcp/asset/2846d027-64c4-4daf-8579-b9d888ee783e"
alt="Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít"
class="h-[260px] w-full object-cover rounded-lg hover:scale-105 transition-transform duration-300">
</a>
<h3 class="text-[16px] font-bold leading-[1.625] text-[#101828] line-clamp-2">
Tết 2026: Sắm máy lọc nước Korihome tặng ngay tủ lạnh Aqua 90 lít và lì xì đến 1.780.000đ duy nhất tại MIQ
</h3>
<div class="flex items-center gap-2 text-[12px] text-[#6a7282]">
<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
15/01/2026
</div>
</article>
</div>
<!-- Pagination -->
<div class="flex justify-center gap-1">
<a href="#"
class="flex h-10 w-10 items-center justify-center rounded bg-[#e91e63] text-white text-[16px] font-medium">1</a>
<a href="#"
class="flex h-10 w-10 items-center justify-center rounded border border-[#d1d5dc] bg-white text-[#364153] text-[16px] font-medium hover:bg-gray-50">2</a>
<a href="#"
class="flex h-10 w-10 items-center justify-center rounded border border-[#d1d5dc] bg-white text-[#364153] text-[16px] font-medium hover:bg-gray-50">3</a>
<span class="flex h-10 w-10 items-center justify-center text-[#99a1af] text-[16px]">...</span>
<a href="#"
class="flex h-10 w-10 items-center justify-center rounded border border-[#d1d5dc] bg-white text-[#364153] hover:bg-gray-50">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M9 18l6-6-6-6" />
</svg>
</a>
</div>
</div>
<!-- Promotional News + Video Review -->
<div class="mt-4 bg-white rounded-xl p-3 flex gap-3">
<!-- TIN KHUYẾN MẠI -->
<div class="flex flex-col gap-3 flex-1">
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">TIN KHUYẾN MẠI</h2>
<div class="flex gap-3">
<!-- Main article -->
<a href="#" class="flex flex-col gap-2 w-[481px] shrink-0">
<div class="overflow-hidden rounded-[4px]">
<img src="https://www.figma.com/api/mcp/asset/bb263e89-75e0-4dbc-87c3-d5f45d255a9e"
alt="Ngày hội ĐIỆN MÁY"
class="h-[300px] w-full object-cover rounded-[4px] hover:scale-105 transition-transform duration-300">
</div>
<p class="text-[20px] font-bold text-black tracking-[-0.4px] leading-snug">
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>
</a>
<!-- Related articles list -->
<div class="flex flex-col gap-3 flex-1">
<a href="#" class="flex gap-3 items-start">
<img src="https://www.figma.com/api/mcp/asset/1b966767-e5a2-4f21-b9fd-bd4ce19d4552" alt="Related article"
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0">
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-brand">
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>
</a>
<a href="#" class="flex gap-3 items-start">
<img src="https://www.figma.com/api/mcp/asset/16119e4f-efba-48ca-a02f-074737cc5f59" alt="Related article"
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0">
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-brand">
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>
</a>
<a href="#" class="flex gap-3 items-start">
<img src="https://www.figma.com/api/mcp/asset/f0ed4844-c4a1-4fe8-86f4-88ea72b58a79" alt="Related article"
class="h-[92px] w-[153px] object-cover rounded-[4px] shrink-0">
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-3 hover:text-brand">
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>
</a>
</div>
</div>
</div>
<!-- Divider -->
<div class="w-px bg-gray-200 self-stretch"></div>
<!-- VIDEO REVIEW -->
<div class="flex flex-col gap-3 w-[279px] shrink-0">
<h2 class="text-[28px] font-bold text-black tracking-[-0.56px]">VIDEO REVIEW</h2>
<div class="flex flex-col gap-3">
<!-- Main video -->
<a href="#" class="relative block rounded-[4px] overflow-hidden group">
<img src="https://www.figma.com/api/mcp/asset/7820de65-617e-4720-8074-f94ce36c16fd" alt="Video review"
class="h-[159px] w-full object-cover rounded-[4px]">
<div class="absolute inset-0 bg-black/20 flex items-center justify-center rounded-[4px]">
<div
class="w-10 h-10 bg-white/80 rounded-full flex items-center justify-center group-hover:bg-white transition-colors">
<svg class="w-5 h-5 text-brand ml-0.5" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
</a>
<!-- Video items -->
<a href="#" class="flex gap-3 items-start group">
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
<img src="https://www.figma.com/api/mcp/asset/fbf62e43-a961-4660-92c9-3c9b60a6936c" alt="Video thumbnail"
class="w-full h-full object-cover rounded-[4px]">
<div class="absolute inset-0 bg-black/20 flex items-center justify-center">
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-2 group-hover:text-brand">
Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
<a href="#" class="flex gap-3 items-start group">
<div class="relative w-[107px] h-[64px] rounded-[4px] overflow-hidden shrink-0">
<img src="https://www.figma.com/api/mcp/asset/a389d1c1-a7b9-44f2-967b-2e44dfeb23a5" alt="Video thumbnail"
class="w-full h-full object-cover rounded-[4px]">
<div class="absolute inset-0 bg-black/20 flex items-center justify-center">
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
<p class="text-[14px] text-black tracking-[-0.28px] leading-snug line-clamp-2 group-hover:text-brand">
Duy nhất 17h ngày 10/02 Cơ hội trúng Máy nước
</p>
</a>
</div>
</div>
</div>
<!-- Search Suggestions -->
<div class="mt-4 bg-white rounded-xl p-4">
<h2 class="text-[24px] font-bold text-black tracking-[-0.48px] mb-3">Mọi người cũng tìm kiếm</h2>
<div class="bg-[#f3f4f7] rounded-xl px-3 py-5 flex flex-wrap gap-5 text-[12px] text-black">
<span class="cursor-pointer hover:text-brand">hút mùi hafele</span>
<span class="cursor-pointer hover:text-brand">bếp từ cheft</span>
<span class="cursor-pointer hover:text-brand">nồi cơm điện Tiger</span>
<span class="cursor-pointer hover:text-brand">máy cạo râu Enchen</span>
<span class="cursor-pointer hover:text-brand">mũ bảo hiểm</span>
<span class="cursor-pointer hover:text-brand">nồi cơm điện Cuckoo</span>
<span class="cursor-pointer hover:text-brand">iPhone 15</span>
<span class="cursor-pointer hover:text-brand">chảo chống dính Elmich</span>
<span class="cursor-pointer hover:text-brand">máy massage X5 Pro Omni</span>
<span class="cursor-pointer hover:text-brand">điều hòa Samsung</span>
<span class="cursor-pointer hover:text-brand">máy lọc nước Korihome Kangen K8</span>
<span class="cursor-pointer hover:text-brand">tông đơ cắt tóc</span>
<span class="cursor-pointer hover:text-brand">điều hoà Hisense</span>
<span class="cursor-pointer hover:text-brand">Máy chạy bộ</span>
<span class="cursor-pointer hover:text-brand">MacBook Air M4</span>
<span class="cursor-pointer hover:text-brand">điều hòa Nagakawa</span>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-6 bg-white">
<div class="mx-auto flex w-[1200px] gap-24 px-0 py-4">
<!-- Support hotline -->
<div class="flex flex-col gap-1 w-[267px]">
<p class="text-[14px] font-bold text-black leading-[1.9]">Tổng đài hỗ trợ</p>
<div class="text-[13px] text-black leading-[30px]">
<p>Gọi mua: <a href="tel:0971490000" class="font-bold text-[#0084ff]">0971.49.0000</a>
<span>(8h00-18h00)</span>
</p>
<p>Hỗ trợ kỹ thuật: <a href="tel:0987762444" class="font-bold text-black">0987.762.444</a>
<span>(8h00-18h00)</span>
</p>
<p>Góp ý - Khiếu nại: <a href="tel:0824184444" class="font-bold text-black">082.418.4444</a>
<span>(8h00-18h00)</span>
</p>
</div>
</div>
<!-- About -->
<div class="flex flex-col gap-1">
<p class="text-[14px] font-bold text-black leading-[1.9]">Về công ty</p>
<div class="text-[13px] text-black leading-[30px]">
<p class="cursor-pointer hover:text-brand">Giới thiệu về công ty</p>
<p class="cursor-pointer hover:text-brand">Tuyển dụng</p>
<p class="cursor-pointer hover:text-brand">Gửi góp ý, khiếu nại</p>
<p class="cursor-pointer hover:text-brand">Tìm siêu thị (215 shop)</p>
</div>
</div>
<!-- Policies -->
<div class="flex flex-col gap-1">
<p class="text-[14px] font-bold text-black leading-[1.9]">Chính sách chung</p>
<div class="text-[13px] text-black leading-[30px]">
<p class="cursor-pointer hover:text-brand">Quy định truy cập Website</p>
<p class="cursor-pointer hover:text-brand">Chính sách bảo mật thông tin</p>
<p class="cursor-pointer hover:text-brand">Chính sách vận chuyển, giao nhận</p>
<p class="cursor-pointer hover:text-brand">Chính sách cho doanh nghiệp</p>
<p class="cursor-pointer hover:text-brand">Chính sách bảo hành, đổi trả</p>
</div>
</div>
<!-- Connect -->
<div class="flex flex-col gap-2 flex-1">
<p class="text-[14px] font-bold text-black leading-[1.9]">Kết nối với chúng tôi</p>
<div class="flex gap-4 items-center text-[11px] text-[#0084ff]">
<div class="flex items-center gap-1">
<svg class="w-5 h-5 text-[#1877f2]" viewBox="0 0 24 24" fill="currentColor">
<path
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
12.8k lượt thích
</div>
<div class="flex items-center gap-1">
<svg class="w-5 h-5 text-[#ff0000]" viewBox="0 0 24 24" fill="currentColor">
<path
d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
</svg>
2.2T Đăng ký
</div>
<div class="flex items-center gap-1">
<svg class="w-5 h-5 text-[#0084ff]" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0C5.373 0 0 4.975 0 11.111c0 3.498 1.744 6.614 4.469 8.654V24l4.088-2.242c1.092.3 2.246.464 3.443.464 6.627 0 12-4.975 12-11.111C24 4.975 18.627 0 12 0zm1.191 14.963l-3.055-3.26-5.963 3.26L10.732 8l3.131 3.259L19.752 8l-6.561 6.963z" />
</svg>
Zalo MIQ
</div>
</div>
<!-- BCT badge placeholder -->
<div
class="mt-1 w-[100px] h-[38px] bg-gray-100 rounded flex items-center justify-center text-[10px] text-gray-400">
BCT Đã ĐK</div>
</div>
</div>
<!-- Copyright bar -->
<div class="bg-[#e4e4e4]">
<p class="py-2 text-center text-[13px] text-[#353535]">Bản quyền thuộc về MIQ Việt Nam</p>
</div>
</footer>
</body>
</html>
Reference in New Issue Copy Permalink