This commit is contained in:
2026-03-07 12:09:01 +07:00
parent aa223ce3bb
commit 327b2645f2
124 changed files with 2189 additions and 1696 deletions

View File

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