tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
bf8e679b752583117207d0374e388aaee7a3f5ed
bestpc/src/pages/Home/index.tsx

2323 lines
96 KiB
TypeScript
Raw Normal View History

upload 13/5
2025-05-13 09:37:53 +07:00
import { useState, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
up
2025-04-29 11:36:07 +07:00
export function Home() {
update
2025-05-05 17:28:22 +07:00
return (
update 16:18 12/05
2025-05-12 16:18:45 +07:00
<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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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"
/>
<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 &amp; 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>
<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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]">
<a href="/buildpc" class="flex items-center group">
<i class="icon_2025 buildpc"></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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-slider.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-slider.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-slider.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-slider.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-right-slider-1.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-right-slider-2.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-right-slider-3.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-right-slider-4.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-1.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-2.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-3.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-4.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-5.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-6.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-7.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-8.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-9.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-10.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-11.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-12.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-13.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-14.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-15.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/icon-cate-16.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-hacom.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-anphat.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-gearvn.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-hacom.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-anphat.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-gearvn.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-hacom.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-anphat.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-gearvn.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/box-image.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/avartar.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/avartar.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/avartar.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/image-article.png" alt="" />
update 16:18 12/05
2025-05-12 16:18:45 +07:00
</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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/avartar.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-sale-1.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
width="100%"
height="100%"
class="object-contain w-full h-full rounded-xl"
alt=""
/>
</a>
<a href="" class="item effect-image">
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-sale-2.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
width="100%"
height="100%"
class="object-contain w-full h-full rounded-xl"
alt=""
/>
</a>
<a href="" class="item effect-image">
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-sale-3.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
width="100%"
height="100%"
class="object-contain w-full h-full rounded-xl"
alt=""
/>
</a>
<a href="" class="item effect-image">
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/banner-sale-4.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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-[47%] h-[365px]"
href="javascript:void(0)"
id="js-video"
data-url="https://www.youtube.com/watch?v=LcQBXGLWX8I"
>
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/promotions-big.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/promotions-1.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
class="object-contain w-full h-full rounded-xl"
width="100%"
height="100%"
alt=""
/>
</a>
<a href="" class="item effect-image">
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/promotions-2.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
class="object-contain w-full h-full rounded-xl"
width="100%"
height="100%"
alt=""
/>
</a>
<a href="" class="item effect-image">
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/promotions-3.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
class="object-contain w-full h-full rounded-xl"
width="100%"
height="100%"
alt=""
/>
</a>
<a href="" class="item effect-image">
<img
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/promotions-4.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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
upload 13/5
2025-05-13 09:37:53 +07:00
src="/assets/images/logo-footer.png"
update 16:18 12/05
2025-05-12 16:18:45 +07:00
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>
update
2025-05-05 17:28:22 +07:00
);
up
2025-04-29 11:36:07 +07:00
}
Reference in New Issue Copy Permalink