1671 lines
103 KiB
HTML
1671 lines
103 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>BESTPC - Trang chủ</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
violet: {
|
|
50: "#f5f3ff",
|
|
900: "#4c1d95",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<link rel="stylesheet" href="/assets/css/style.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<main class="flex overflow-hidden flex-col items-center bg-white">
|
|
<!-- Header Section -->
|
|
<header class="w-full">
|
|
<div class="header-main px-16 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="/search" 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"
|
|
onclick="$('.autocomplete-suggestions').show();">
|
|
<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">
|
|
<div class="flex items-center">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Section -->
|
|
<nav class="header-bottom px-16 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)] group-hover:font-bold">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)] group-hover:font-bold">Tìm
|
|
người bán</span>
|
|
</a>
|
|
<a href="/" class="flex items-center group">
|
|
<i class="icon_2025 map-2"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Địa
|
|
chỉ
|
|
sửa chữa</span>
|
|
</a>
|
|
<a href="/" class="flex items-center group">
|
|
<i class="icon_2025 question"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Hỏi
|
|
đáp</span>
|
|
</a>
|
|
<a href="/" class="flex items-center group">
|
|
<i class="icon_2025 prduct-save"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Sản
|
|
phẩm
|
|
đã lưu</span>
|
|
</a>
|
|
<a href="/" class="flex items-center group">
|
|
<i class="icon_2025 article"></i>
|
|
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Tin
|
|
rạo
|
|
vặt</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Banner Section -->
|
|
<div class="banner mt-[10px]">
|
|
<div class="container">
|
|
<div class="flex gap-[10px]">
|
|
<div class="banner-slider w-1/2 swiper" id="js-banner-slider">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-slider.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-slider.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-slider.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-slider.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
<div class="banner-right w-1/2 grid grid-cols-2 gap-[10px]">
|
|
<a href="" class="item relative effect-image block rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-right-slider-1.png"
|
|
class="block w-full h-full object-contain transition-all duration-500 ease-in-out"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-right-slider-2.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-right-slider-3.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
|
|
<img src="/assets/images/banner-right-slider-4.png"
|
|
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best Rated Products Section -->
|
|
<div class="box-best-rated-products mt-[45px]">
|
|
<div class="container">
|
|
<div class="flex justify-center text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
<h2 class="mx-[5px]">
|
|
sản phẩm được đánh giá tốt nhất
|
|
</h2>
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
<p class="mt-[5px] text-base font-medium text-center text-black max-md:max-w-full">
|
|
Tổng hợp các sản phẩm hot theo xu hướng và có nhiều lượt review và
|
|
đánh giá nhất hiện nay
|
|
</p>
|
|
|
|
<div class="tabs-list flex items-center justify-center gap-[10px] mt-[15px]">
|
|
<a href="javascript:void(0)"
|
|
class="tabs-item active text-lg font-[400] px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px]">Laptop</a>
|
|
<a href="javascript:void(0)"
|
|
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">Màn
|
|
hình</a>
|
|
<a href="javascript:void(0)"
|
|
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">CPU</a>
|
|
<a href="javascript:void(0)"
|
|
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">Bàn
|
|
phím, chuột</a>
|
|
<a href="javascript:void(0)"
|
|
class="tabs-item text-lg px-16 py-2.5 text-[#595959] bg-[#ECECEC] rounded-[4px] hover:bg-[var(--color-global)] hover:text-white hover:font-bold">VGA</a>
|
|
</div>
|
|
|
|
<div class="relative mt-[15px]">
|
|
<div class="product-list swiper relative" id="js-product-best">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="box-saleoff">-20%</div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="price">15.000.000đ</div>
|
|
<div class="flex items-center justify-between mb-[5px]">
|
|
<del class="old-price">16.500.000đ</del>
|
|
<i class="icon-star star5"></i>
|
|
</div>
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-slider" id="js-product-best-btn">
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories Section -->
|
|
<div class="box-category-homepage mt-20">
|
|
<div class="container">
|
|
<div class="flex justify-center text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
<h2 class="mx-[5px] text-3xl">
|
|
Tìm theo danh mục
|
|
</h2>
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
<div class="list-category grid grid-cols-8 gap-[60px] mt-10">
|
|
<!-- Category 1 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-1.png" class="object-contain aspect-[1.29] w-[90px]"
|
|
alt="Laptop văn phòng" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Laptop văn phòng
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 2 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-2.png" class="object-contain aspect-[0.96] w-[89px]"
|
|
alt="Tản nhiệt, đèn" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Tản nhiệt, đèn
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 3 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-3.png" class="object-contain aspect-[1.06] w-[104px]"
|
|
alt="Linh kiện máy tính" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Linh kiện máy tính
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 4 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-4.png" class="object-contain aspect-[1.24] w-[107px]"
|
|
alt="Bàn phím, chuột" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Bàn phím, chuột
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 5 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-5.png"
|
|
class="object-contain aspect-[1.02] rounded-[50%] w-[122px] effect-image"
|
|
alt="Màn hình, tay treo" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Màn hình,tay treo</p>
|
|
</a>
|
|
|
|
<!-- Category 6 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-6.png" class="object-contain aspect-[0.88] w-[81px]"
|
|
alt="Lưu trữ, phần mềm" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Lưu trữ,phần mềm
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 7 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]">
|
|
<img src="/assets/images/icon-cate-7.png" class="object-contain aspect-[0.93] w-[92px]"
|
|
alt="Phụ kiện laptop" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Phụ kiện laptop
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 8 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-8.png" class="object-contain w-20 aspect-[1.18]"
|
|
alt="Phụ kiện PC" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[--color-global]">
|
|
Phụ kiện PC
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 9 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-9.png" class="object-contain aspect-[1.29] w-[90px]"
|
|
alt="Laptop Gaming" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Laptop Gaming
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 10 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-10.png" class="object-contain aspect-[0.83] w-[85px]"
|
|
alt="Phụ kiện đi kèm" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Phụ kiện đi kèm
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 11 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-11.png" class="object-contain aspect-[0.93] w-[100px]"
|
|
alt="PC đồ hoạ, gaming" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
PC đồ hoạ, gaming
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 12 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-12.png" class="object-contain aspect-[0.93] w-[100px]"
|
|
alt="PC Văn phòng" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
PC Văn phòng
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 13 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-13.png" class="object-contain aspect-[0.95] w-[95px]"
|
|
alt="Thiết bị mạng" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Thiết bị mạng
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 14 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-14.png" class="object-contain aspect-[0.67] w-[67px]"
|
|
alt="Loa, tai nghe, mic" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Loa, tai nghe, mic,..
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 15 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-15.png" class="object-contain aspect-[1.15] w-[100px]"
|
|
alt="Thiết bị văn phòng" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Thiết bị văn phòng
|
|
</p>
|
|
</a>
|
|
|
|
<!-- Category 16 -->
|
|
<a href="" class="item">
|
|
<div
|
|
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
|
|
<img src="/assets/images/icon-cate-16.png" class="object-contain aspect-[1.75] w-[98px]"
|
|
alt="Game pad" />
|
|
</div>
|
|
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
|
|
Game pad
|
|
</p>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Businesses Section -->
|
|
<div class="box-featured-businesses mt-24">
|
|
<div class="container">
|
|
<div class="flex justify-center text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
<h2 class="mx-[5px] text-3xl">
|
|
Doanh nghiệp NỔI BẬT
|
|
</h2>
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list p-[5px] swiper mt-8" id="list-businesses">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-hacom.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-anphat.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-gearvn.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-hacom.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-anphat.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-gearvn.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-hacom.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-anphat.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href=""
|
|
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
|
|
<img src="/assets/images/logo-gearvn.png"
|
|
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Saved Products Section -->
|
|
<div class="box-save-product mt-20">
|
|
<div class="container">
|
|
<div class="flex justify-center text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
<h2 class="mx-[5px] text-3xl">
|
|
SẢN PHẨM ĐÃ LƯU
|
|
</h2>
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
<div class="relative mt-5">
|
|
<div class="product-list swiper relative" id="js-product-best">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="flex items-center justify-center mt-[5px]">
|
|
<div class="price">15.000.000đ</div>
|
|
<del class="old-price ml-[5px]">16.500.000đ</del>
|
|
</div>
|
|
<div class="total-shop flex items-center justify-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="flex items-center justify-center mt-[5px]">
|
|
<div class="price">15.000.000đ</div>
|
|
<del class="old-price ml-[5px]">16.500.000đ</del>
|
|
</div>
|
|
<div class="total-shop flex items-center justify-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="flex items-center justify-center mt-[5px]">
|
|
<div class="price">15.000.000đ</div>
|
|
<del class="old-price ml-[5px]">16.500.000đ</del>
|
|
</div>
|
|
<div class="total-shop flex items-center justify-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="product-item">
|
|
<a href="" class="product-image">
|
|
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
|
|
<div class="icon-save"><i class="icon_2025 heart"></i></div>
|
|
</a>
|
|
<div class="info-product">
|
|
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
|
i7</a>
|
|
<div class="flex items-center justify-center mt-[5px]">
|
|
<div class="price">15.000.000đ</div>
|
|
<del class="old-price ml-[5px]">16.500.000đ</del>
|
|
</div>
|
|
<div class="total-shop flex items-center justify-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-slider" id="js-product-best-btn">
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- News and Classifieds Section -->
|
|
<div class="box-article-home mt-20">
|
|
<div class="container">
|
|
<div class="grid grid-cols-3 gap-[20px]">
|
|
<div class="article-industry">
|
|
<div class="flex text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<h2 class="mx-[5px] text-3xl">
|
|
THÔNG TIN NGÀNH
|
|
</h2>
|
|
<div
|
|
class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
<div class="list mt-5">
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="" class="more-link ">
|
|
<span class="">Xem tất cả</span> <i class="icon_2025 mouse"></i>
|
|
</a>
|
|
|
|
</div>
|
|
<!-- end article industry -->
|
|
|
|
<div class="article-sale">
|
|
<div class="flex text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<h2 class="mx-[5px] text-3xl">
|
|
THÔNG TIN khuyến mãi
|
|
</h2>
|
|
<div
|
|
class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
<div class="list mt-5">
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-article">
|
|
<a href="" class="image-article effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
|
|
<div class="summary line-clamp-2">Loạt sản phẩm trưng bày tại CES 2025 cho thấy AI
|
|
là xu hướng chính nhưng được...</div>
|
|
<div class="flex items-center mb-[5px]">
|
|
<div class="box-date flex items-center mr-[10px]"><i class="icon_2025 time"></i>
|
|
<p class="ml-[7px]">12/03/2025</p>
|
|
</div>
|
|
<div class="link-source flex items-center">
|
|
<i class="icon_2025 link mb-[4px]"></i>
|
|
<p class="ml-[5px]">Nguồn tin: vnexpress</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="link-article">Xem thêm</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="" class="more-link ">
|
|
<span class="">Xem tất cả</span> <i class="icon_2025 mouse"></i>
|
|
</a>
|
|
</div>
|
|
<!-- end article sale -->
|
|
|
|
<div class="article-classifieds">
|
|
<div class="flex text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<h2 class="mx-[5px] text-3xl">
|
|
Bản tin rao vặt
|
|
</h2>
|
|
<div
|
|
class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
<div class="list mt-5">
|
|
<div class="item-classifieds">
|
|
<a href="" class="image-classifieds effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
|
|
2025</a>
|
|
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
|
|
</div>
|
|
<div class="price">19.999.000đ</div>
|
|
<div class="flex items-center mb-[5px] text-[#595959]">
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 map-3"></i>
|
|
<p class="ml-[5px]">Quận thanh xuân</p>
|
|
</div>
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 time"></i>
|
|
<p class="ml-[5px]">30 phút trước</p>
|
|
</div>
|
|
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
|
|
<p>Còn 5 ngày</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="staff flex items-center">
|
|
<img src="/assets/images/avartar.png"
|
|
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
|
height="100%" alt="avartar">
|
|
<b class="ml-[5px]">Thanh mai</b>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-classifieds">
|
|
<a href="" class="image-classifieds effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
|
|
2025</a>
|
|
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
|
|
</div>
|
|
<div class="price">19.999.000đ</div>
|
|
<div class="flex items-center mb-[5px] text-[#595959]">
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 map-3"></i>
|
|
<p class="ml-[5px]">Quận thanh xuân</p>
|
|
</div>
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 time"></i>
|
|
<p class="ml-[5px]">30 phút trước</p>
|
|
</div>
|
|
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
|
|
<p>Còn 5 ngày</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="staff flex items-center">
|
|
<img src="/assets/images/avartar.png"
|
|
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
|
height="100%" alt="avartar">
|
|
<b class="ml-[5px]">Thanh mai</b>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-classifieds">
|
|
<a href="" class="image-classifieds effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
|
|
2025</a>
|
|
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
|
|
</div>
|
|
<div class="price">19.999.000đ</div>
|
|
<div class="flex items-center mb-[5px] text-[#595959]">
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 map-3"></i>
|
|
<p class="ml-[5px]">Quận thanh xuân</p>
|
|
</div>
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 time"></i>
|
|
<p class="ml-[5px]">30 phút trước</p>
|
|
</div>
|
|
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
|
|
<p>Còn 5 ngày</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="staff flex items-center">
|
|
<img src="/assets/images/avartar.png"
|
|
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
|
height="100%" alt="avartar">
|
|
<b class="ml-[5px]">Thanh mai</b>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="item-classifieds">
|
|
<a href="" class="image-classifieds effect-image">
|
|
<img src="/assets/images/image-article.png" alt="">
|
|
</a>
|
|
<div class="info">
|
|
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
|
|
2025</a>
|
|
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
|
|
</div>
|
|
<div class="price">19.999.000đ</div>
|
|
<div class="flex items-center mb-[5px] text-[#595959]">
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 map-3"></i>
|
|
<p class="ml-[5px]">Quận thanh xuân</p>
|
|
</div>
|
|
<div class="mr-[5px] flex items-center">
|
|
<i class="icon_2025 time"></i>
|
|
<p class="ml-[5px]">30 phút trước</p>
|
|
</div>
|
|
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
|
|
<p>Còn 5 ngày</p>
|
|
</div>
|
|
</div>
|
|
<a href="" class="staff flex items-center">
|
|
<img src="/assets/images/avartar.png"
|
|
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
|
|
height="100%" alt="avartar">
|
|
<b class="ml-[5px]">Thanh mai</b>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<a href="" class="more-link ">
|
|
<span class="">Xem tất cả</span> <i class="icon_2025 mouse"></i>
|
|
</a>
|
|
</div>
|
|
<!-- end article classifieds -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Banner sale -->
|
|
<div class="banner-sale mt-20">
|
|
<div class="container">
|
|
<div class="flex gap-[8px]">
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/banner-sale-1.png" width="100%" height="100%"
|
|
class="object-contain w-full h-full rounded-xl" alt="">
|
|
</a>
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/banner-sale-2.png" width="100%" height="100%"
|
|
class="object-contain w-full h-full rounded-xl" alt="">
|
|
</a>
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/banner-sale-3.png" width="100%" height="100%"
|
|
class="object-contain w-full h-full rounded-xl" alt="">
|
|
</a>
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/banner-sale-4.png" width="100%" height="100%"
|
|
class="object-contain w-full h-full rounded-xl" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Promotions Section -->
|
|
<div class="box-promotions mt-20">
|
|
<div class="container">
|
|
<div class="flex justify-center text-3xl font-bold text-[var(--color-title)] uppercase">
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
<h2 class="mx-[5px] text-3xl">
|
|
Sự kiện và chương trình khuyến mãi
|
|
</h2>
|
|
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list flex gap-[8px] mt-6">
|
|
<a class="box-big w-full w-[47%] h-[365px]" href="javascript:void(0)" id="js-video"
|
|
data-url="https://www.youtube.com/watch?v=LcQBXGLWX8I">
|
|
<img src="/assets/images/promotions-big.png" width="100%" height="100%"
|
|
class="object-cover w-full h-full rounded-xl" alt="">
|
|
</a>
|
|
<div class="grid grid-cols-2 w-[53%] gap-[8px]">
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/promotions-1.png" class="object-contain w-full h-full rounded-xl"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/promotions-2.png" class="object-contain w-full h-full rounded-xl"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/promotions-3.png" class="object-contain w-full h-full rounded-xl"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
<a href="" class="item effect-image">
|
|
<img src="/assets/images/promotions-4.png" class="object-contain w-full h-full rounded-xl"
|
|
width="100%" height="100%" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-20 border-t-[11px] border-[#1c039b] w-full">
|
|
<div class="container">
|
|
<a href="/" class="block my-[30px]">
|
|
<img src="/assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain"
|
|
width="100%" height="100%" alt="logo">
|
|
</a>
|
|
<div class="main-footer grid grid-cols-4">
|
|
<div class="item">
|
|
<h3 class="title">Về chúng tôi</h3>
|
|
<a href="" class="block">Độc quyền</a>
|
|
<a href="" class="block">Mua online</a>
|
|
<a href="" class="block">Bộ sưu tập</a>
|
|
<a href="/tin-tuc" class="block">Blog</a>
|
|
<div class="list-social flex items-center mt-[45px]">
|
|
<a href="" target="_blank" class="mr-[10px]"><i class="icon_2025 facebook"></i></a>
|
|
<a href="" target="_blank"><i class="icon_2025 zalo"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<h3 class="title">Tuyển dụng</h3>
|
|
<a href="">Liên hệ</a>
|
|
<a href="">Điều khoản</a>
|
|
<a href="">Chính sách bảo mật</a>
|
|
<a href="">Trở thành đối tác</a>
|
|
</div>
|
|
<div class="item">
|
|
<h3 class="title">Liên kết</h3>
|
|
<a href="hurasoft.com">Hurasoft.com</a>
|
|
</div>
|
|
<div class="item">
|
|
<h3 class="title">Giới thiệu</h3>
|
|
<b class="text-[16px]">BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở Việt Nam,
|
|
cho phép bạn tìm
|
|
kiếm mã giảm giá, tin ưu đãi
|
|
từ nghành hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC chuyên nghiệp. Và
|
|
còn rất nhiều mã giảm giá độc
|
|
quyền dành riêng cho bạn.</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom bg-[#ebebeb] py-[15px]">
|
|
<b class="text-center block">© Copyright 2025 by Hurasoft. All Rights Reserved.</b>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
|
<script>
|
|
var swiper = new Swiper("#js-banner-slider", {
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: "#js-banner-slider .swiper-button-next",
|
|
prevEl: "#js-banner-slider .swiper-button-prev",
|
|
},
|
|
});
|
|
|
|
var swiper_product = new Swiper("#js-product-best", {
|
|
slidesPerView: 5,
|
|
spaceBetween: 15,
|
|
loop: false,
|
|
rewind: false,
|
|
lazy: true,
|
|
navigation: {
|
|
nextEl: "#js-product-best-btn .swiper-button-next",
|
|
prevEl: "#js-product-best-btn .swiper-button-prev",
|
|
},
|
|
});
|
|
|
|
var swiper_businesses = new Swiper("#list-businesses", {
|
|
slidesPerView: 7,
|
|
spaceBetween: 20,
|
|
loop: false,
|
|
rewind: false,
|
|
lazy: true,
|
|
});
|
|
|
|
runVideo("#js-video");
|
|
|
|
|
|
function runVideo(holder) {
|
|
$(holder).on("click", function () {
|
|
$(this).addClass("active");
|
|
let url = $(holder).attr("data-url");
|
|
let width = $(holder).width();
|
|
let height = $(holder).height();
|
|
const videoUrl = getEmbedVideoUrl(url);
|
|
if (videoUrl) {
|
|
$(holder).html(`<iframe width="${width}" height="${height}" src="${videoUrl}?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>`);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function getEmbedVideoUrl(url) {
|
|
const youtubeRegex = /(?:youtube\.com\/(?:shorts\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/(?:shorts\/)?)([a-zA-Z0-9_-]{11})/;
|
|
const tiktokRegex = /(?:tiktok\.com\/@[^\/]+\/video\/)(\d+)/;
|
|
|
|
const youtubeMatch = url.match(youtubeRegex);
|
|
if (youtubeMatch) return 'https://www.youtube.com/embed/' + youtubeMatch[1];
|
|
|
|
const tiktokMatch = url.match(tiktokRegex);
|
|
if (tiktokMatch) return 'https://www.tiktok.com/player/v1/' + tiktokMatch[1];
|
|
|
|
return null;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |