457 lines
26 KiB
HTML
457 lines
26 KiB
HTML
<!-- Header Section -->
|
|
<header class="w-full">
|
|
<div class="header-main py-6 bg-[var(--color-global)]">
|
|
<div class="container">
|
|
<div class="flex items-center justify-between">
|
|
<a href="/" class="logo block mr-[100px]">
|
|
<img src="../../assets/images/logo.png" class="object-contain w-[173px] h-[45px] block"
|
|
alt="Location icon" />
|
|
</a>
|
|
<div class="flex items-center mr-[100px]">
|
|
<i class="icon_2025 map"></i>
|
|
<div class="ml-[20px] ">
|
|
<span class="text-xs text-white block mb-[5px]">Bạn đang ở</span>
|
|
<div class="box-select">
|
|
<select name="" id="" class="select select_location">
|
|
<option value="">Hà Nội</option>
|
|
<option value="">TP HCM</option>
|
|
<option value="">Đà Nẵng</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[670px] relative mr-[135px] input-search">
|
|
<form action="/tim" enctype="text/plain" method="get"
|
|
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
|
|
<input type="text" name="q" placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
|
|
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base" />
|
|
<button type="submit"
|
|
class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"><i
|
|
class="icon_2025 search "></i></button>
|
|
</form>
|
|
<div class="autocomplete-suggestions hidden">
|
|
<p>TỪ KHOÁ HOT</p>
|
|
<ul class="ul">
|
|
<li><a href=""> laptop </a></li>
|
|
<li><a href=""> laptop </a></li>
|
|
<li><a href=""> laptop </a></li>
|
|
<li><a href=""> laptop </a></li>
|
|
<li><a href=""> laptop </a></li>
|
|
<li><a href=""> laptop </a></li>
|
|
<li><a href=""> laptop </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="box-user">
|
|
<a class="flex items-center" href="/taikhoan">
|
|
<i class="icon_2025 user"></i>
|
|
<b class="text-white p-[0_5px] whitespace-nowrap">Tài khoản</b>
|
|
<i class="icon_arrow"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Section -->
|
|
<nav class="header-bottom py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
|
|
<div class="container">
|
|
<div class="flex items-center justify-between w-full">
|
|
<div class="header-menu relative group">
|
|
<div
|
|
class="title-menu flex items-center justify-center w-[219px] h-[45px] rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
|
|
<i class="icon_2025 bar"></i>
|
|
<b class="ml-[8px] uppercase">Danh mục sản phẩm</b>
|
|
</div>
|
|
<div
|
|
class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/laptop.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href="/danh-muc-cap2.html"> Laptop 2 </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện 2 </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop 2 </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện 2 </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop 2 </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- copy -->
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/008-mouse.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/010-computer.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/013-fan.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/gamepad-1.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/server-4.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Laptop </a></li>
|
|
<li><a href="/danh-muc-cap2.html"> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/laptop.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/008-mouse.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/010-computer.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/013-fan.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/gamepad-1.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/danh-muc-cap1.html" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/server-4.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="" class="flex items-center">
|
|
<span class="cate-img"> <img src="/dev/images/server-4.png" alt=""> </span>
|
|
<span class="cate-name"> Laptop & phụ kiện</span>
|
|
</a>
|
|
|
|
<div class="sub-menu">
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
<li><a href=""> Laptop </a></li>
|
|
<li><a href=""> Phụ kiện </a></li>
|
|
</ul>
|
|
|
|
<ul class="ul sub-cate">
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
<li><a href=""> Laptop 2 </a></li>
|
|
<li><a href=""> Phụ kiện 2 </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- end copy -->
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-[40px] header-bottom-right">
|
|
<a href="/buildpc" class="flex items-center group">
|
|
<i class="icon_2025 buildpc group-hover:buildpc-hover"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Build
|
|
PC</span>
|
|
</a>
|
|
<a href="/tim-nguoi-ban" class="flex items-center group">
|
|
<i class="icon_2025 shop"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Tìm
|
|
người bán</span>
|
|
</a>
|
|
<a href="/dia-chi-sua-chua" class="flex items-center group">
|
|
<i class="icon_2025 map-2"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Địa
|
|
chỉ
|
|
sửa chữa</span>
|
|
</a>
|
|
<a href="/hoi-dap" class="flex items-center group">
|
|
<i class="icon_2025 question"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)">Hỏi
|
|
đáp</span>
|
|
</a>
|
|
<a href="/san-pham-da-luu" class="flex items-center group">
|
|
<i class="icon_2025 prduct-save"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Sản
|
|
phẩm
|
|
đã lưu</span>
|
|
</a>
|
|
<a href="/tin-rao-vat" class="flex items-center group">
|
|
<i class="icon_2025 article"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)]">Tin
|
|
rạo
|
|
vặt</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header> |