1943 lines
127 KiB
HTML
1943 lines
127 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="vi">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>MIQ - Trang Chủ</title>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|||
|
|
<link
|
|||
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800&family=Inter:wght@400;600&display=swap"
|
|||
|
|
rel="stylesheet" />
|
|||
|
|
<link rel="stylesheet" href="style.css" />
|
|||
|
|
<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]">
|
|||
|
|
|
|||
|
|
<!-- ===================== HEADER ===================== -->
|
|||
|
|
<header class="w-full flex flex-col items-center bg-white relative z-50" style="min-width:1440px">
|
|||
|
|
|
|||
|
|
<!-- Slogan Bar -->
|
|||
|
|
<div class="w-full relative h-8 flex items-center px-[120px] 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="flex items-center gap-[22px]">
|
|||
|
|
<div class="flex items-center gap-1">
|
|||
|
|
<img src="image/icon_certificate.svg" alt="" class="w-5 h-5" />
|
|||
|
|
<span class="text-white text-xs font-semibold tracking-tight">Sản phẩm <strong>Chính hãng - xuất
|
|||
|
|
VAT</strong> đầy đủ</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1">
|
|||
|
|
<img src="image/icon_delivery_truck.svg" alt="" class="w-5 h-5" />
|
|||
|
|
<span class="text-white text-xs font-semibold tracking-tight">Giao nhanh - Miễn phí</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-[5px]">
|
|||
|
|
<img src="image/icon_customer_support.svg" alt="" class="w-5 h-5" />
|
|||
|
|
<span class="text-white text-xs font-semibold font-inter tracking-tight">Hotline:
|
|||
|
|
<strong>0967641641</strong></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</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">
|
|||
|
|
<!-- Search Input + Popup -->
|
|||
|
|
<div class="relative w-[465px] shrink-0">
|
|||
|
|
<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" />
|
|||
|
|
<input type="text" id="search" name="q" placeholder="Tivi Samsung giá sốc"
|
|||
|
|
class="absolute inset-0 bg-transparent rounded-full pl-[44px] pr-4 text-[13px] text-[#e4057c] outline-none w-full"
|
|||
|
|
onfocus="showSearch()" onblur="setTimeout(hideSearch, 200)" />
|
|||
|
|
</form>
|
|||
|
|
<!-- Search Popup -->
|
|||
|
|
<div id="search-popup"
|
|||
|
|
class="hidden absolute top-[calc(100%+8px)] left-0 bg-white rounded-[8px] flex-col gap-3 p-3 z-[60]"
|
|||
|
|
style="width:562px; box-shadow:-2px 10px 25.4px 0px rgba(0,0,0,0.25)">
|
|||
|
|
<!-- Header row -->
|
|||
|
|
<div class="flex items-center justify-between shrink-0">
|
|||
|
|
<span class="text-[14px] font-medium text-[#585858]">Tìm kiếm gần đây</span>
|
|||
|
|
<button type="button" onclick="hideSearch()" class="w-6 h-6 flex items-center justify-center">
|
|||
|
|
<img src="image/icon_close.svg" alt="" class="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- Recent tags -->
|
|||
|
|
<div class="flex items-center gap-2 flex-wrap shrink-0">
|
|||
|
|
<span
|
|||
|
|
class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">Nồi
|
|||
|
|
cơm điện</span>
|
|||
|
|
<span
|
|||
|
|
class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">lõi
|
|||
|
|
lọc không khí</span>
|
|||
|
|
<span
|
|||
|
|
class="bg-[#f1f3f9] rounded-full px-3 h-7 flex items-center text-[12px] font-medium text-[#585858] cursor-pointer">nồi
|
|||
|
|
nấu chậm</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Divider -->
|
|||
|
|
<div class="h-px bg-[#ebebeb] shrink-0"></div>
|
|||
|
|
<!-- Promo section -->
|
|||
|
|
<div class="flex flex-col gap-3">
|
|||
|
|
<span class="text-[14px] font-medium text-[#585858]">Ưu đãi đặc biệt</span>
|
|||
|
|
<div class="w-full h-[146px] rounded-[8px] overflow-hidden shrink-0">
|
|||
|
|
<img src="image/search_promo_banner.png" alt="" class="w-full h-full object-cover" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col gap-2">
|
|||
|
|
<div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
|
|||
|
|
<div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
|
|||
|
|
<span class="text-[12px] font-medium text-white whitespace-nowrap">Máy lạnh 1 HP</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Giá chỉ từ 5.632.000đ</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
|
|||
|
|
<div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
|
|||
|
|
<span class="text-[12px] font-medium text-white whitespace-nowrap">Tuần lễ tủ lạnh LG</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Deal hời chỉ từ
|
|||
|
|
5.632.000đ</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center h-8 bg-[#ffe4e9] rounded-[8px] overflow-hidden">
|
|||
|
|
<div class="bg-[#90004b] h-full flex items-center px-[13px] shrink-0 rounded-l-[8px]">
|
|||
|
|
<span class="text-[12px] font-medium text-white whitespace-nowrap">Smart TV 2026</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="flex-1 text-[12px] font-medium text-black text-right pr-3">Giá chỉ từ 3.900.000đ</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Login -->
|
|||
|
|
<div class="flex items-center gap-[10px] cursor-pointer">
|
|||
|
|
<img src="image/icon_login.svg" alt="" class="w-[15px] h-[18px]" />
|
|||
|
|
<span class="text-white text-sm font-semibold">Đăng nhập</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Cart -->
|
|||
|
|
<div class="flex items-center gap-[10px] cursor-pointer">
|
|||
|
|
<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>
|
|||
|
|
</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>
|
|||
|
|
</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"
|
|||
|
|
onmouseenter="cancelMenuClose()" onmouseleave="scheduleMenuClose()">
|
|||
|
|
<div class="w-[1200px] mx-auto 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"
|
|||
|
|
onmouseenter="switchCat('hot')">
|
|||
|
|
<img src="image/icon_fire.png" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<span class="cat-label text-[13px] ml-5">Chương trình hot</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 ml-auto mr-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/hang-chuan-gia-me" id="cat-hang-chuan"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pl-[44px] pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('hang-chuan')">
|
|||
|
|
<span class="cat-label text-[13px]">Hàng chuẩn, giá mê</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/dien-may-dien-lanh" id="cat-dien-may"
|
|||
|
|
class="cat-item cat-active flex items-center justify-between h-9 pl-[44px] pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('dien-may')">
|
|||
|
|
<span class="cat-label text-[13px]">Điện máy, điện lạnh</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/dien-tu-vien-thong" id="cat-dien-tu"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pr-3 shrink-0" onmouseenter="switchCat('dien-tu')">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<div class="w-[34px] h-[25px] shrink-0 overflow-hidden"><img src="image/icon_sale_badge.png" alt=""
|
|||
|
|
class="h-full object-contain" /></div><span class="cat-label text-[13px] ml-2">Điện tử, viễn
|
|||
|
|
thông</span>
|
|||
|
|
</div>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/dien-gia-dung" id="cat-dien-gia-dung"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('dien-gia-dung')">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<div class="w-[34px] h-[25px] shrink-0 overflow-hidden"><img src="image/icon_sale_badge.png" alt=""
|
|||
|
|
class="h-full object-contain" /></div><span class="cat-label text-[13px] ml-2">Điện gia dụng</span>
|
|||
|
|
</div>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/phu-kien" id="cat-phu-kien" class="cat-item flex items-center justify-between h-9 pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('phu-kien')">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<div class="w-[34px] h-[25px] shrink-0 overflow-hidden"><img src="image/icon_sale_badge.png" alt=""
|
|||
|
|
class="h-full object-contain" /></div><span class="cat-label text-[13px] ml-2">Phụ kiện</span>
|
|||
|
|
</div>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/lam-dep" id="cat-lam-dep"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pl-[44px] pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('lam-dep')">
|
|||
|
|
<span class="cat-label text-[13px]">Làm đẹp, chăm sóc cá nhân</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/do-gia-dung" id="cat-do-gia-dung"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pl-[44px] pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('do-gia-dung')">
|
|||
|
|
<span class="cat-label text-[13px]">Đồ gia dụng</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/may-cu" id="cat-may-cu"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pl-[44px] pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('may-cu')">
|
|||
|
|
<span class="cat-label text-[13px]">Máy cũ, trưng bày</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
<div class="border-t border-[#d3d7df]"></div>
|
|||
|
|
<a href="/san-pham-khac" id="cat-san-pham-khac"
|
|||
|
|
class="cat-item flex items-center justify-between h-9 pl-[44px] pr-3 shrink-0"
|
|||
|
|
onmouseenter="switchCat('san-pham-khac')">
|
|||
|
|
<span class="cat-label text-[13px]">Sản phẩm khác</span>
|
|||
|
|
<img src="image/icon_chevron_right_menu.svg" alt="" class="cat-chevron w-[7px] h-3 shrink-0" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<!-- Right panel -->
|
|||
|
|
<div class="flex-1 bg-white rounded-tr-[4px] rounded-br-[4px] overflow-hidden relative">
|
|||
|
|
|
|||
|
|
<!-- Brand row snippet (reused) — defined via CSS class -->
|
|||
|
|
|
|||
|
|
<!-- rp-hot -->
|
|||
|
|
<div id="rp-hot" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Chương trình hot</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Flash Sale</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Deal hôm nay</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Hàng thanh lý</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Giảm đến 50%</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Combo tiết kiệm</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Mua trả góp 0%</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-hang-chuan -->
|
|||
|
|
<div id="rp-hang-chuan" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Hàng chuẩn, giá mê</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/brand_samsung.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Samsung</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/brand_lg.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>LG</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/brand_sony.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Sony</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/brand_toshiba.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Toshiba</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/brand_aqua.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Aqua</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/brand_tcl.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>TCL</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-dien-may (default active) -->
|
|||
|
|
<div id="rp-dien-may" class="menu-rp-panel" style="display:flex">
|
|||
|
|
<p class="menu-rp-title">Điện máy, điện lạnh</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="/may-lanh" class="menu-subcat-item"><img src="image/menu_may_lanh.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy lạnh</span></a>
|
|||
|
|
<a href="/tu-lanh" class="menu-subcat-item"><img src="image/menu_tu_lanh.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tủ lạnh</span></a>
|
|||
|
|
<a href="/tivi" class="menu-subcat-item"><img src="image/menu_tivi.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tivi</span></a>
|
|||
|
|
<a href="/may-say" class="menu-subcat-item"><img src="image/menu_may_say.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy sấy</span></a>
|
|||
|
|
<a href="/may-giat" class="menu-subcat-item"><img src="image/menu_may_giat.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy giặt</span></a>
|
|||
|
|
<a href="/may-nuoc-nong" class="menu-subcat-item"><img src="image/menu_may_nuoc_nong.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy nước nóng</span></a>
|
|||
|
|
<a href="/tu-mat" class="menu-subcat-item"><img src="image/menu_tu_mat.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tủ mát</span></a>
|
|||
|
|
<a href="/tu-dong" class="menu-subcat-item"><img src="image/menu_tu_dong.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tủ đông</span></a>
|
|||
|
|
<a href="/may-rua-bat" class="menu-subcat-item"><img src="image/menu_may_rua_bat.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy rửa bát</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-dien-tu -->
|
|||
|
|
<div id="rp-dien-tu" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Điện tử, viễn thông</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Điện thoại</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Laptop</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy tính bảng</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tai nghe</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Loa bluetooth</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Màn hình</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy tính để bàn</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Smart Watch</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Camera</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-dien-gia-dung -->
|
|||
|
|
<div id="rp-dien-gia-dung" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Điện gia dụng</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Nồi cơm điện</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bếp từ, bếp điện</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Lò vi sóng</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy xay sinh tố</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy pha cà phê</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bàn là hơi nước</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Nồi chiên không dầu</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy lọc không khí</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Quạt điện</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-phu-kien -->
|
|||
|
|
<div id="rp-phu-kien" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Phụ kiện</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Ốp lưng</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Cáp sạc</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Pin dự phòng</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tai nghe bluetooth</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bàn phím</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Chuột máy tính</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Túi, balo laptop</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bộ sạc nhanh</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Ổ cứng, thẻ nhớ</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-lam-dep -->
|
|||
|
|
<div id="rp-lam-dep" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Làm đẹp, chăm sóc cá nhân</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy sấy tóc</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy cạo râu</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bàn chải điện</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy uốn tóc</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy massage</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy rửa mặt</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-do-gia-dung -->
|
|||
|
|
<div id="rp-do-gia-dung" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Đồ gia dụng</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bộ nồi, chảo</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Dao làm bếp</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Thớt</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Hộp đựng thực phẩm</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy hút chân không</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Bình lọc nước</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-may-cu -->
|
|||
|
|
<div id="rp-may-cu" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Máy cũ, trưng bày</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/menu_tivi.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tivi cũ</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/menu_tu_lanh.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Tủ lạnh cũ</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/menu_may_lanh.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy lạnh cũ</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/menu_may_giat.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy giặt cũ</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Laptop cũ</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Điện thoại cũ</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- rp-san-pham-khac -->
|
|||
|
|
<div id="rp-san-pham-khac" class="menu-rp-panel" style="display:none">
|
|||
|
|
<p class="menu-rp-title">Sản phẩm khác</p>
|
|||
|
|
<div class="menu-subcat-grid">
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Thiết bị mạng</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Năng lượng mặt trời</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Thiết bị âm thanh</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Đèn LED</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Máy chiếu</span></a>
|
|||
|
|
<a href="#" class="menu-subcat-item"><img src="image/icon_category_item.png" alt=""
|
|||
|
|
class="w-12 h-12 object-contain" /><span>Camera an ninh</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-brand-row">
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">1</span><img src="image/brand_samsung.png"
|
|||
|
|
alt="Samsung" class="h-5 object-contain" style="max-width:93px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">2</span><img src="image/brand_lg.png" alt="LG"
|
|||
|
|
class="h-5 object-contain" style="max-width:44px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">3</span><img src="image/brand_sony.png"
|
|||
|
|
alt="Sony" class="h-5 object-contain" style="max-width:81px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">4</span><img src="image/brand_toshiba.png"
|
|||
|
|
alt="Toshiba" class="h-5 object-contain" style="max-width:105px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">5</span><img src="image/brand_aqua.png"
|
|||
|
|
alt="Aqua" class="h-5 object-contain" style="max-width:57px" /></div>
|
|||
|
|
<div class="menu-brand-item"><span class="menu-brand-num">6</span><img src="image/brand_tcl.png" alt="TCL"
|
|||
|
|
class="h-5 object-contain" style="max-width:43px" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== 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]">
|
|||
|
|
<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">
|
|||
|
|
<!-- Hà Nội -->
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="bg-[#db0000] rounded-[4px] h-11 flex items-center justify-between px-4">
|
|||
|
|
<span class="font-semibold text-[16px] text-white uppercase tracking-[-0.32px]">Cơ sở Hà Nội</span>
|
|||
|
|
<span class="text-[13px] text-white tracking-[-0.26px]">Thời gian mở cửa: 8h00 - 18h00 hàng ngày</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pt-3 flex flex-col gap-[18px]">
|
|||
|
|
<div class="flex items-start gap-2">
|
|||
|
|
<img src="image/icon_map_pin.svg" alt="" class="w-4 h-4 shrink-0 mt-[1px]" />
|
|||
|
|
<span class="text-[13px] text-black tracking-[-0.26px]">Địa chỉ: Số 2 Lương Ngọc Quyến, Phường Thanh
|
|||
|
|
Liệt, TP Hà Nội</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<img src="image/icon_phone.svg" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<span class="text-[13px] text-black tracking-[-0.26px]">Tel: 082.418.4444</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<img src="image/icon_support.svg" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<span class="text-[13px] text-black tracking-[-0.26px]">Bảo hành: 082.418.4444</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<img src="image/icon_map_fill.svg" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<a href="#" class="text-[13px] text-[#0084ff] underline tracking-[-0.26px]">Xem bản đồ</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Hồ Chí Minh -->
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="bg-[#db0000] rounded-[4px] h-11 flex items-center justify-between px-4">
|
|||
|
|
<span class="font-semibold text-[16px] text-white uppercase tracking-[-0.32px]">Cơ sở Hồ Chí Minh</span>
|
|||
|
|
<span class="text-[13px] text-white tracking-[-0.26px]">Thời gian mở cửa: 8h00 - 18h00 hàng ngày</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pt-3 flex flex-col gap-[18px]">
|
|||
|
|
<div class="flex items-start gap-2">
|
|||
|
|
<img src="image/icon_map_pin.svg" alt="" class="w-4 h-4 shrink-0 mt-[1px]" />
|
|||
|
|
<span class="text-[13px] text-black tracking-[-0.26px]">Địa chỉ: 74 Bàu Cát 1, Phường Tân Bình, TP Hồ
|
|||
|
|
Chí Minh</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<img src="image/icon_phone.svg" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<span class="text-[13px] text-black tracking-[-0.26px]">Tel: 0971.49.0000</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<img src="image/icon_support.svg" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<span class="text-[13px] text-black tracking-[-0.26px]">Bảo hành: 082.418.4444</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<img src="image/icon_map_fill.svg" alt="" class="w-4 h-4 shrink-0" />
|
|||
|
|
<a href="#" class="text-[13px] text-[#0084ff] underline tracking-[-0.26px]">Xem bản đồ</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- Overlay backdrop -->
|
|||
|
|
<div id="overlay" class="hidden fixed inset-0 bg-black/30 z-40" onclick="closeAll()"></div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var menuTimer = null;
|
|||
|
|
var catIds = ['hot', 'hang-chuan', 'dien-may', 'dien-tu', 'dien-gia-dung', 'phu-kien', 'lam-dep', 'do-gia-dung', 'may-cu', 'san-pham-khac'];
|
|||
|
|
|
|||
|
|
function switchCat(id) {
|
|||
|
|
catIds.forEach(function (c) {
|
|||
|
|
var item = document.getElementById('cat-' + c);
|
|||
|
|
var panel = document.getElementById('rp-' + c);
|
|||
|
|
if (item) item.classList.remove('cat-active');
|
|||
|
|
if (panel) panel.style.display = 'none';
|
|||
|
|
});
|
|||
|
|
var activeItem = document.getElementById('cat-' + id);
|
|||
|
|
var activePanel = document.getElementById('rp-' + id);
|
|||
|
|
if (activeItem) activeItem.classList.add('cat-active');
|
|||
|
|
if (activePanel) activePanel.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showMenu() {
|
|||
|
|
cancelMenuClose();
|
|||
|
|
closeShowroom();
|
|||
|
|
document.getElementById('mega-menu').classList.remove('hidden');
|
|||
|
|
document.getElementById('overlay').classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scheduleMenuClose() {
|
|||
|
|
menuTimer = setTimeout(function () {
|
|||
|
|
document.getElementById('mega-menu').classList.add('hidden');
|
|||
|
|
document.getElementById('overlay').classList.add('hidden');
|
|||
|
|
}, 150);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function cancelMenuClose() {
|
|||
|
|
if (menuTimer) { clearTimeout(menuTimer); menuTimer = null; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleShowroom() {
|
|||
|
|
const panel = document.getElementById('showroom-panel');
|
|||
|
|
const arrow = document.getElementById('showroom-arrow');
|
|||
|
|
const isOpen = !panel.classList.contains('hidden');
|
|||
|
|
closeAll();
|
|||
|
|
if (!isOpen) {
|
|||
|
|
panel.classList.remove('hidden');
|
|||
|
|
document.getElementById('overlay').classList.remove('hidden');
|
|||
|
|
arrow.style.transform = 'rotate(90deg)';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeShowroom() {
|
|||
|
|
document.getElementById('showroom-panel').classList.add('hidden');
|
|||
|
|
document.getElementById('showroom-arrow').style.transform = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeAll() {
|
|||
|
|
document.getElementById('mega-menu').classList.add('hidden');
|
|||
|
|
document.getElementById('showroom-panel').classList.add('hidden');
|
|||
|
|
document.getElementById('overlay').classList.add('hidden');
|
|||
|
|
document.getElementById('showroom-arrow').style.transform = '';
|
|||
|
|
cancelMenuClose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showSearch() {
|
|||
|
|
closeAll();
|
|||
|
|
var p = document.getElementById('search-popup');
|
|||
|
|
p.classList.remove('hidden');
|
|||
|
|
p.style.display = 'flex';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hideSearch() {
|
|||
|
|
var p = document.getElementById('search-popup');
|
|||
|
|
p.style.display = 'none';
|
|||
|
|
p.classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener('keydown', function (e) {
|
|||
|
|
if (e.key === 'Escape') { closeAll(); hideSearch(); }
|
|||
|
|
});
|
|||
|
|
</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]">
|
|||
|
|
|
|||
|
|
<!-- Banner Slider -->
|
|||
|
|
<div class="w-full h-[364px] rounded-[12px] overflow-hidden relative">
|
|||
|
|
<img src="image/banner_slider.png" alt="Banner" class="absolute inset-0 w-full h-full object-cover" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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 & làm đẹp</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="flex flex-col items-center justify-center h-[99px] hover:bg-gray-50 rounded">
|
|||
|
|
<img src="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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="image/icon_category_item.png" 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>
|
|||
|
|
|
|||
|
|
<!-- 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="image/icon_star_gold.svg" 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.html" class="shrink-0 block"><img src="image/product_history_1.png" 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.html"
|
|||
|
|
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="image/icon_close.svg" 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>
|
|||
|
|
<!-- Item 2 -->
|
|||
|
|
<div class="bg-white border border-[#f2f2f2] rounded-[4px] flex items-start gap-2 p-[10px]">
|
|||
|
|
<a href="product-detail.html" class="shrink-0 block"><img src="image/product_history_2.png" 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.html"
|
|||
|
|
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="image/icon_close.svg" 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>
|
|||
|
|
<!-- Item 3 -->
|
|||
|
|
<div class="bg-white border border-[#f2f2f2] rounded-[4px] flex items-start gap-2 p-[10px]">
|
|||
|
|
<a href="product-detail.html" class="shrink-0 block"><img src="image/product_history_3.png" 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.html"
|
|||
|
|
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="image/icon_close.svg" 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>
|
|||
|
|
<!-- Item 4 -->
|
|||
|
|
<div class="bg-white border border-[#f2f2f2] rounded-[4px] flex items-start gap-2 p-[10px]">
|
|||
|
|
<a href="product-detail.html" class="shrink-0 block"><img src="image/product_history_4.png" 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.html"
|
|||
|
|
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="image/icon_close.svg" 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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- BST Sale -->
|
|||
|
|
<div class="relative w-full h-[1006px] rounded-[12px] overflow-hidden">
|
|||
|
|
<img src="image/bst_sale_bg.png" 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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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.html" class="block"><img src="image/product_sale_image.png" 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="image/sale_price_box_bg.svg" 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.html"
|
|||
|
|
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="image/icon_double_next.svg" alt="" class="w-[10px] h-[10px]" />
|
|||
|
|
<img src="image/icon_double_next.svg" alt="" class="w-[10px] h-[10px] -ml-1" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 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="image/trending_may_in_laser.png" alt="" class="h-[83px] object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<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="image/trending_man_hinh.png" alt="" class="h-[83px] object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<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="image/trending_mac_mini.png" alt="" class="h-[83px] object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<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="image/trending_muc_in.png" alt="" class="h-[83px] object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<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="image/trending_tivi_main.png" alt="" class="w-full aspect-square rounded-[4px] object-cover" />
|
|||
|
|
<div class="flex gap-3">
|
|||
|
|
<img src="image/trending_tivi_main.png" alt=""
|
|||
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
|
|||
|
|
<img src="image/trending_tivi_2.png" alt="" class="w-[79px] h-[80px] rounded-[4px] object-cover" />
|
|||
|
|
<img src="image/trending_tivi_3.png" 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="image/trending_suc_khoe_main.png" alt=""
|
|||
|
|
class="w-full aspect-square rounded-[4px] object-cover" />
|
|||
|
|
<div class="flex gap-3">
|
|||
|
|
<img src="image/trending_suc_khoe_1.png" alt=""
|
|||
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
|
|||
|
|
<img src="image/trending_suc_khoe_2.png" alt="" class="w-[79px] h-[80px] rounded-[4px] object-cover" />
|
|||
|
|
<img src="image/trending_suc_khoe_3.png" 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="image/trending_gia_dung_main.png" alt=""
|
|||
|
|
class="absolute inset-0 w-full h-full object-cover" />
|
|||
|
|
</div>
|
|||
|
|
<img src="image/trending_gia_dung_1.png" alt=""
|
|||
|
|
class="w-[80px] h-[80px] rounded-[4px] object-cover border border-[#90004b]" />
|
|||
|
|
<img src="image/trending_gia_dung_2.png" alt="" class="w-[78px] h-[80px] rounded-[4px] object-cover" />
|
|||
|
|
<img src="image/trending_gia_dung_3.png" 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="image/category_banner_dien_tu.png" 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ả >></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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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="image/category_banner_dien_may.png" 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ả >></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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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="image/category_banner_vien_thong.png" 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ả >></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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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="image/category_banner_gia_dung.png" 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ả >></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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" 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.html" class="block"><img src="image/product_card_image.png" 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.html" 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="image/product_badge_1.png" alt="" class="w-8 h-8" />
|
|||
|
|
<img src="image/product_badge_2.png" alt="" class="w-8 h-8" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-1 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="absolute right-2 bottom-2">
|
|||
|
|
<div class="w-6 h-6 bg-[#BBBBBB] rounded-full flex items-center justify-center shadow">
|
|||
|
|
<img src="image/icon_cart_circle.svg" alt="" class="w-4 h-4" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 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="image/article_main_image.png" alt="" class="w-full h-full object-cover" />
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-2 text-[20px] font-bold text-black tracking-tight">Ngày hội ĐIỆN MÁY - SIÊU RẺ. Duy nhất 17h
|
|||
|
|
ngày 10/02 Cơ hội trúng Máy nước</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- Side articles -->
|
|||
|
|
<div class="flex flex-col gap-3 flex-1">
|
|||
|
|
<div class="flex gap-3 items-start">
|
|||
|
|
<img src="image/article_thumb_1.png" 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="image/article_thumb_2.png" 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="image/article_thumb_3.png" 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="image/video_main.png" 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="image/video_thumb_1.png" 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="image/video_thumb_2.png" 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>
|
|||
|
|
|
|||
|
|
<!-- 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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div><!-- /container -->
|
|||
|
|
</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">
|
|||
|
|
<!-- 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>
|
|||
|
|
<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">0987.762.444</a> <span>(8h00-18h00)</span></p>
|
|||
|
|
<p>Góp ý - Khiếu nại: <a href="tel:0824184444" class="font-bold">082.418.4444</a> <span>(8h00-18h00)</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Về công ty -->
|
|||
|
|
<div class="flex flex-col gap-1 w-[148px] shrink-0">
|
|||
|
|
<p class="text-[14px] font-bold text-black leading-[27px]">Về công ty</p>
|
|||
|
|
<div class="text-[13px] text-black leading-[30px]">
|
|||
|
|
<p>Giới thiệu về công ty</p>
|
|||
|
|
<p>Tuyển dụng</p>
|
|||
|
|
<p>Gửi góp ý, khiếu nại</p>
|
|||
|
|
<p>Tìm siêu thị (215 shop)</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Chính sách -->
|
|||
|
|
<div class="flex flex-col gap-1 w-[209px] shrink-0">
|
|||
|
|
<p class="text-[14px] font-bold text-black leading-[27px]">Chính sách chung</p>
|
|||
|
|
<div class="text-[13px] text-black leading-[30px]">
|
|||
|
|
<p>Quy định truy cập Website</p>
|
|||
|
|
<p>Chính sách bảo mật thông tin</p>
|
|||
|
|
<p>Chính sách vận chuyển, giao nhận</p>
|
|||
|
|
<p>Chính sách cho doanh nghiệp</p>
|
|||
|
|
<p>Chính sách bảo hành, đổi trả</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Kết nối -->
|
|||
|
|
<div class="flex flex-col gap-2 w-[291px] shrink-0">
|
|||
|
|
<p class="text-[14px] font-bold text-black leading-[27px]">Kết nối với chúng tôi</p>
|
|||
|
|
<div class="flex flex-col gap-3">
|
|||
|
|
<div class="flex items-center gap-3">
|
|||
|
|
<!-- Facebook -->
|
|||
|
|
<div class="flex items-center gap-1">
|
|||
|
|
<div class="w-5 h-5">
|
|||
|
|
<img src="image/icon_facebook.svg" alt="Facebook" class="w-full h-full" />
|
|||
|
|
</div>
|
|||
|
|
<span class="text-[11px] text-[#0084ff]">12.8k lượt thích</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- YouTube -->
|
|||
|
|
<div class="flex items-center gap-1">
|
|||
|
|
<img src="image/icon_youtube.svg" alt="YouTube" class="w-[28px] h-5 object-contain" />
|
|||
|
|
<span class="text-[11px] text-[#0084ff]">2.2T Đăng ký</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- Zalo -->
|
|||
|
|
<div class="flex items-center gap-1">
|
|||
|
|
<img src="image/icon_zalo.png" alt="Zalo" class="w-5 h-5 object-contain" />
|
|||
|
|
<span class="text-[11px] text-[#0084ff]">Zalo MIQ</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<img src="image/logo_bct.png" alt="Đã thông báo Bộ Công Thương" class="w-[100px] h-[38px] object-contain" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Copyright -->
|
|||
|
|
<div class="bg-[#e4e4e4] h-9 flex items-center justify-center">
|
|||
|
|
<p class="text-[#353535] text-[13px]">Bản quyền thuộc về MIQ Việt Nam</p>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|