560 lines
29 KiB
HTML
560 lines
29 KiB
HTML
<!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> |