tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upload 13/5

Browse Source
This commit is contained in:
Tieptk
2025-05-13 15:45:14 +07:00
parent bf8e679b75
commit b316563f0d
6 changed files with 838 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
assets/css/style.css
View File

@@ -45,7 +45,7 @@ html {
.icon_2025 {
background: url(../images/icon_2025.png) no-repeat;
background-size: 228px 236px;
background-size: 228px 260px;
display: block;
}
.icon_2025.map {
@@ -71,7 +71,7 @@ html {
.icon_2025.bar {
width: 18px;
height: 18px;
background-position: 1px -40px;
background-position: 1px -38px;
}
.icon_2025.buildpc {
width: 36px;
@@ -86,7 +86,12 @@ html {
.icon_2025.shop-3 {
width: 22px;
height: 24px;
background-position: -180px -163px;
background-position: -180px -186px;
}
.icon_2025.shop-hover {
width: 22px;
height: 24px;
background-position: -46px -65px;
}
.icon_2025.map-2 {
width: 15px;
@@ -108,75 +113,85 @@ html {
height: 24px;
background-position: -133px -35px;
}
.icon_2025.prduct-save-hover {
width: 24px;
height: 24px;
background-position: -140px -65px;
}
.icon_2025.article {
width: 30px;
height: 24px;
background-position: -162px -35px;
}
.icon_2025.article-hover {
width: 30px;
height: 24px;
background-position: -170px -63px;
}
.icon_2025.heart {
width: 24px;
height: 24px;
background-position: -98px -123px;
background-position: -98px -147px;
}
.icon_2025.heart-2 {
width: 24px;
height: 24px;
background-position: -126px -151px;
background-position: -126px -173px;
}
.icon_2025.shop-blue {
width: 24px;
height: 24px;
background-position: -100px -147px;
background-position: -96px -172px;
}
.icon_2025.link {
width: 14px;
height: 10px;
background-position: -212px -108px;
height: 12px;
background-position: -212px -130px;
}
.icon_2025.time {
width: 15px;
height: 14.5px;
background-position: -188px -147.5px;
background-position: -188px -172px;
}
.icon_2025.time-gray {
width: 16px;
height: 16px;
background-position: -34px -73px;
background-position: -34px -96px;
}
.icon_2025.mouse {
width: 20px;
height: 20px;
background-position: -160px -145px;
background-position: -160px -170px;
}
.icon_2025.facebook {
width: 41px;
height: 40px;
background-position: 0 -135px;
background-position: 0 -159px;
}
.icon_2025.zalo {
width: 41px;
height: 40px;
background-position: -50px -135px;
background-position: -50px -159px;
}
.icon_2025.home {
width: 20px;
height: 20px;
background-position: -207px -129px;
background-position: -207px -152px;
}
.icon_2025.angle-right {
width: 11px;
height: 17px;
background-position: -212px -152px;
background-position: -212px -176px;
}
.icon_2025.view {
width: 22px;
height: 16px;
background-position: -205px -8px;
background-position: -205px -9px;
}
.icon_2025.time-big {
width: 22px;
height: 22px;
background-position: -2px -70px;
background-position: -2px -93px;
}
.icon_2025.share {
width: 21px;
@@ -186,38 +201,38 @@ html {
.icon_2025.map-4 {
width: 18px;
height: 25px;
background-position: -152px -69px;
background-position: -152px -92px;
}
.icon_2025.link-review {
width: 18px;
height: 18px;
background-position: -27px -104px;
background-position: -27px -128px;
}
.icon_2025.angle-bottom {
width: 15px;
height: 12px;
background-position: -190px -133px;
background-position: -188px -156px;
}
.icon_2025.angle-top {
width: 15px;
height: 12px;
background-position: -190px -133px;
background-position: -190px -156px;
transform: rotate(180deg);
}
.icon_2025.upload_image {
width: 24px;
height: 24px;
background-position: -88px -70px;
background-position: -86px -91px;
}
.icon_2025.remove {
width: 24px;
height: 26px;
background-position: -126px -124px;
background-position: -126px -147px;
}
.icon_2025.showroom {
width: 24px;
height: 24px;
background-position: -119px -69px;
background-position: -119px -92px;
}
.icon_2025.phone {
width: 18px;
@@ -227,103 +242,103 @@ html {
.icon_2025.earth {
width: 22px;
height: 24px;
background-position: 0 -102px;
background-position: 0 -125px;
}
.icon_2025.copy {
width: 20px;
height: 20px;
background-position: -208px -71px;
background-position: -208px -94px;
}
.icon_2025.history {
width: 24px;
height: 24px;
background-position: -45px -102px;
background-position: -45px -126px;
}
.icon_2025.download {
width: 22px;
height: 22px;
background-position: -74px -102px;
background-position: -74px -126px;
}
.icon_2025.return {
width: 18px;
height: 18px;
background-position: -155px -105px;
background-position: -155px -129px;
}
.icon_2025.close {
width: 16px;
height: 16px;
background-position: -160px -126px;
background-position: -160px -149px;
}
.icon_2025.print {
width: 18px;
height: 19px;
background-position: -187px -4px;
background-position: -187px -2px;
}
.icon_2025.filter {
width: 20px;
height: 20px;
background-position: 0px -187px;
background-position: 0px -209px;
}
.icon_2025.comment {
width: 20px;
height: 20px;
background-position: -84px -25px;
background-size: 190px 175px;
background-size: 190px 200px;
}
.icon_2025.faq {
width: 20px;
height: 20px;
background-position: -129px -105px;
background-position: -129px -127px;
}
.icon_2025.tag {
width: 20px;
height: 20px;
background-position: -102px -105px;
background-position: -102px -127px;
}
.icon_2025.images {
width: 22px;
height: 22px;
background-position: -164px -186px;
background-position: -164px -209px;
}
.icon_2025.like {
width: 22px;
height: 22px;
background-position: -209px -213px;
background-position: -209px -234px;
}
.icon_2025.sort_list {
width: 34px;
height: 22px;
background-position: -50px -185px;
background-position: -50px -209px;
}
.icon_2025.sort_gird {
width: 22px;
height: 22px;
background-position: -96px -186px;
height: 23px;
background-position: -96px -209px;
}
.icon_2025.spec {
width: 22px;
height: 22px;
background-position: -130px -186px;
background-position: -130px -209px;
}
.icon_2025.list_faq {
width: 21px;
height: 24px;
background-position: -1px -211px;
background-position: -1px -236px;
}
.icon_2025.list_raovat {
width: 21px;
height: 25px;
background-position: -52px -211px;
background-position: -52px -236px;
}
.icon_2025.list_inbox {
width: 22px;
height: 25px;
background-position: -105px -211px;
background-position: -105px -236px;
}
.icon_2025.info_save {
width: 22px;
height: 25px;
background-position: -164px -211px;
background-position: -164px -236px;
}
.icon-star {
@@ -469,6 +484,26 @@ html {
margin-top: 0;
border-top: 0;
}
.header-bottom .header-bottom-right a:hover .buildpc {
width: 36px;
height: 24px;
background-position: -4px -65px;
}
.header-bottom .header-bottom-right a:hover .shop {
background-position: -46px -65px;
}
.header-bottom .header-bottom-right a:hover .map-2 {
background-position: -77px -65px;
}
.header-bottom .header-bottom-right a:hover .question {
background-position: -104px -64px;
}
.header-bottom .header-bottom-right a:hover .prduct-save {
background-position: -140px -64px;
}
.header-bottom .header-bottom-right a:hover .article {
background-position: -172px -63px;
}
.effect-image {
position: relative;
@@ -599,7 +634,6 @@ html {
font-weight: 700;
font-size: 18px;
color: #d80a00;
margin-bottom: 5px;
}
.product-item .old-price {
color: #b0b0b0;

2
assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

130
assets/css/style.scss
View File

@@ -46,7 +46,7 @@ html {
.icon_2025 {
background: url(../images/icon_2025.png) no-repeat;
background-size: 228px 236px;
background-size: 228px 260px;
display: block;
&.map {
width: 20px;
@@ -71,7 +71,7 @@ html {
&.bar {
width: 18px;
height: 18px;
background-position: 1px -40px;
background-position: 1px -38px;
}
&.buildpc {
width: 36px;
@@ -86,7 +86,12 @@ html {
&.shop-3 {
width: 22px;
height: 24px;
background-position: -180px -163px;
background-position: -180px -186px;
}
&.shop-hover {
width: 22px;
height: 24px;
background-position: -46px -65px;
}
&.map-2 {
width: 15px;
@@ -108,77 +113,87 @@ html {
height: 24px;
background-position: -133px -35px;
}
&.prduct-save-hover {
width: 24px;
height: 24px;
background-position: -140px -65px;
}
&.article {
width: 30px;
height: 24px;
background-position: -162px -35px;
}
&.article-hover {
width: 30px;
height: 24px;
background-position: -170px -63px;
}
&.heart {
width: 24px;
height: 24px;
background-position: -98px -123px;
background-position: -98px -147px;
}
&.heart-2 {
width: 24px;
height: 24px;
background-position: -126px -151px;
background-position: -126px -173px;
}
&.shop-blue {
width: 24px;
height: 24px;
background-position: -100px -147px;
background-position: -96px -172px;
}
&.link {
width: 14px;
height: 10px;
background-position: -212px -108px;
height: 12px;
background-position: -212px -130px;
}
&.time {
width: 15px;
height: 14.5px;
background-position: -188px -147.5px;
background-position: -188px -172px;
}
&.time-gray {
width: 16px;
height: 16px;
background-position: -34px -73px;
background-position: -34px -96px;
}
&.mouse {
width: 20px;
height: 20px;
background-position: -160px -145px;
background-position: -160px -170px;
}
&.facebook {
width: 41px;
height: 40px;
background-position: 0 -135px;
background-position: 0 -159px;
}
&.zalo {
width: 41px;
height: 40px;
background-position: -50px -135px;
background-position: -50px -159px;
}
&.home {
width: 20px;
height: 20px;
background-position: -207px -129px;
background-position: -207px -152px;
}
&.angle-right {
width: 11px;
height: 17px;
background-position: -212px -152px;
background-position: -212px -176px;
}
&.view {
width: 22px;
height: 16px;
background-position: -205px -8px;
background-position: -205px -9px;
}
&.time-big {
width: 22px;
height: 22px;
background-position: -2px -70px;
background-position: -2px -93px;
}
&.share {
width: 21px;
@@ -188,38 +203,38 @@ html {
&.map-4 {
width: 18px;
height: 25px;
background-position: -152px -69px;
background-position: -152px -92px;
}
&.link-review {
width: 18px;
height: 18px;
background-position: -27px -104px;
background-position: -27px -128px;
}
&.angle-bottom {
width: 15px;
height: 12px;
background-position: -190px -133px;
background-position: -188px -156px;
}
&.angle-top {
width: 15px;
height: 12px;
background-position: -190px -133px;
background-position: -190px -156px;
transform: rotate(180deg);
}
&.upload_image {
width: 24px;
height: 24px;
background-position: -88px -70px;
background-position: -86px -91px;
}
&.remove {
width: 24px;
height: 26px;
background-position: -126px -124px;
background-position: -126px -147px;
}
&.showroom {
width: 24px;
height: 24px;
background-position: -119px -69px;
background-position: -119px -92px;
}
&.phone {
width: 18px;
@@ -229,103 +244,103 @@ html {
&.earth {
width: 22px;
height: 24px;
background-position: 0 -102px;
background-position: 0 -125px;
}
&.copy {
width: 20px;
height: 20px;
background-position: -208px -71px;
background-position: -208px -94px;
}
&.history {
width: 24px;
height: 24px;
background-position: -45px -102px;
background-position: -45px -126px;
}
&.download {
width: 22px;
height: 22px;
background-position: -74px -102px;
background-position: -74px -126px;
}
&.return {
width: 18px;
height: 18px;
background-position: -155px -105px;
background-position: -155px -129px;
}
&.close {
width: 16px;
height: 16px;
background-position: -160px -126px;
background-position: -160px -149px;
}
&.print {
width: 18px;
height: 19px;
background-position: -187px -4px;
background-position: -187px -2px;
}
&.filter {
width: 20px;
height: 20px;
background-position: 0px -187px;
background-position: 0px -209px;
}
&.comment {
width: 20px;
height: 20px;
background-position: -84px -25px;
background-size: 190px 175px;
background-size: 190px 200px;
}
&.faq {
width: 20px;
height: 20px;
background-position: -129px -105px;
background-position: -129px -127px;
}
&.tag {
width: 20px;
height: 20px;
background-position: -102px -105px;
background-position: -102px -127px;
}
&.images {
width: 22px;
height: 22px;
background-position: -164px -186px;
background-position: -164px -209px;
}
&.like {
width: 22px;
height: 22px;
background-position: -209px -213px;
background-position: -209px -234px;
}
&.sort_list {
width: 34px;
height: 22px;
background-position: -50px -185px;
background-position: -50px -209px;
}
&.sort_gird {
width: 22px;
height: 22px;
background-position: -96px -186px;
height: 23px;
background-position: -96px -209px;
}
&.spec {
width: 22px;
height: 22px;
background-position: -130px -186px;
background-position: -130px -209px;
}
&.list_faq {
width: 21px;
height: 24px;
background-position: -1px -211px;
background-position: -1px -236px;
}
&.list_raovat {
width: 21px;
height: 25px;
background-position: -52px -211px;
background-position: -52px -236px;
}
&.list_inbox {
width: 22px;
height: 25px;
background-position: -105px -211px;
background-position: -105px -236px;
}
&.info_save {
width: 22px;
height: 25px;
background-position: -164px -211px;
background-position: -164px -236px;
}
}
@@ -489,6 +504,30 @@ html {
margin-top: 0;
border-top: 0;
}
.header-bottom-right {
a:hover {
.buildpc {
width: 36px;
height: 24px;
background-position: -4px -65px;
}
.shop {
background-position: -46px -65px;
}
.map-2 {
background-position: -77px -65px;
}
.question {
background-position: -104px -64px;
}
.prduct-save {
background-position: -140px -64px;
}
.article {
background-position: -172px -63px;
}
}
}
}
.effect-image {
@@ -634,7 +673,6 @@ html {
font-weight: 700;
font-size: 18px;
color: #d80a00;
margin-bottom: 5px;
}
.old-price {
color: #b0b0b0;

BIN
assets/images/icon_2025.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 62 KiB

1074
src/pages/Home/index.tsx
View File

File diff suppressed because it is too large Load Diff

163
template/homepage/homepage.html
View File

@@ -21,7 +21,7 @@
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="/src/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/css/style.css" rel="stylesheet" />
</head>
<body>
@@ -32,7 +32,7 @@
<div class="container">
<div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]">
<img src="/src/assets/images/logo.png" class="object-contain w-[173px] h-[45px] block"
<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]">
@@ -445,9 +445,9 @@
<!-- end copy -->
</div>
</div>
<div class="flex gap-[40px]">
<div class="flex gap-[40px] header-bottom-right">
<a href="/buildpc" class="flex items-center group">
<i class="icon_2025 buildpc"></i>
<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>
@@ -494,25 +494,25 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
<img src="/src/assets/images/banner-slider.png"
<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="/src/assets/images/banner-slider.png"
<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="/src/assets/images/banner-slider.png"
<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="/src/assets/images/banner-slider.png"
<img src="/assets/images/banner-slider.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
@@ -522,20 +522,20 @@
</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="/src/assets/images/banner-right-slider-1.png"
<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="/src/assets/images/banner-right-slider-2.png"
<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="/src/assets/images/banner-right-slider-3.png"
<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="/src/assets/images/banner-right-slider-4.png"
<img src="/assets/images/banner-right-slider-4.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
@@ -581,7 +581,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -602,7 +602,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -623,7 +623,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -644,7 +644,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -665,7 +665,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -686,7 +686,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -707,7 +707,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -753,7 +753,7 @@
<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="/src/assets/images/icon-cate-1.png" class="object-contain aspect-[1.29] w-[90px]"
<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)]">
@@ -765,7 +765,7 @@
<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="/src/assets/images/icon-cate-2.png" class="object-contain aspect-[0.96] w-[89px]"
<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)]">
@@ -777,7 +777,7 @@
<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="/src/assets/images/icon-cate-3.png" class="object-contain aspect-[1.06] w-[104px]"
<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)]">
@@ -789,7 +789,7 @@
<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="/src/assets/images/icon-cate-4.png" class="object-contain aspect-[1.24] w-[107px]"
<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)]">
@@ -801,7 +801,7 @@
<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="/src/assets/images/icon-cate-5.png"
<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>
@@ -813,7 +813,7 @@
<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="/src/assets/images/icon-cate-6.png" class="object-contain aspect-[0.88] w-[81px]"
<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)]">
@@ -825,7 +825,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="/src/assets/images/icon-cate-7.png" class="object-contain aspect-[0.93] w-[92px]"
<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)]">
@@ -837,7 +837,7 @@
<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="/src/assets/images/icon-cate-8.png" class="object-contain w-20 aspect-[1.18]"
<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]">
@@ -849,7 +849,7 @@
<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="/src/assets/images/icon-cate-9.png" class="object-contain aspect-[1.29] w-[90px]"
<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)]">
@@ -861,7 +861,7 @@
<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="/src/assets/images/icon-cate-10.png" class="object-contain aspect-[0.83] w-[85px]"
<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)]">
@@ -873,8 +873,8 @@
<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="/src/assets/images/icon-cate-11.png"
class="object-contain aspect-[0.93] w-[100px]" alt="PC đồ hoạ, gaming" />
<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
@@ -885,8 +885,8 @@
<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="/src/assets/images/icon-cate-12.png"
class="object-contain aspect-[0.93] w-[100px]" alt="PC Văn phòng" />
<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
@@ -897,7 +897,7 @@
<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="/src/assets/images/icon-cate-13.png" class="object-contain aspect-[0.95] w-[95px]"
<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)]">
@@ -909,7 +909,7 @@
<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="/src/assets/images/icon-cate-14.png" class="object-contain aspect-[0.67] w-[67px]"
<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)]">
@@ -921,8 +921,8 @@
<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="/src/assets/images/icon-cate-15.png"
class="object-contain aspect-[1.15] w-[100px]" alt="Thiết bị văn phòng" />
<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
@@ -933,7 +933,7 @@
<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="/src/assets/images/icon-cate-16.png" class="object-contain aspect-[1.75] w-[98px]"
<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)]">
@@ -963,7 +963,7 @@
<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="/src/assets/images/logo-hacom.png"
<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>
@@ -971,7 +971,7 @@
<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="/src/assets/images/logo-anphat.png"
<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>
@@ -979,7 +979,7 @@
<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="/src/assets/images/logo-gearvn.png"
<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>
@@ -987,7 +987,7 @@
<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="/src/assets/images/logo-hacom.png"
<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>
@@ -995,7 +995,7 @@
<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="/src/assets/images/logo-anphat.png"
<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>
@@ -1003,7 +1003,7 @@
<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="/src/assets/images/logo-gearvn.png"
<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>
@@ -1011,7 +1011,7 @@
<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="/src/assets/images/logo-hacom.png"
<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>
@@ -1019,7 +1019,7 @@
<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="/src/assets/images/logo-anphat.png"
<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>
@@ -1027,7 +1027,7 @@
<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="/src/assets/images/logo-gearvn.png"
<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>
@@ -1050,14 +1050,13 @@
<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="/src/assets/images/box-image.png" alt="Laptop Dell" />
<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">
@@ -1077,7 +1076,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<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">
@@ -1097,7 +1096,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<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">
@@ -1117,7 +1116,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="/src/assets/images/box-image.png" alt="Laptop Dell" />
<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">
@@ -1162,7 +1161,7 @@
<div class="list mt-5">
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1182,7 +1181,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1202,7 +1201,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1222,7 +1221,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1261,7 +1260,7 @@
<div class="list mt-5">
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1281,7 +1280,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1301,7 +1300,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1321,7 +1320,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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>
@@ -1359,7 +1358,7 @@
<div class="list mt-5">
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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
@@ -1381,7 +1380,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="/src/assets/images/avartar.png"
<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>
@@ -1390,7 +1389,7 @@
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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
@@ -1412,7 +1411,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="/src/assets/images/avartar.png"
<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>
@@ -1421,7 +1420,7 @@
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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
@@ -1443,7 +1442,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="/src/assets/images/avartar.png"
<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>
@@ -1452,7 +1451,7 @@
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="/src/assets/images/image-article.png" alt="">
<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
@@ -1474,7 +1473,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="/src/assets/images/avartar.png"
<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>
@@ -1498,19 +1497,19 @@
<div class="container">
<div class="flex gap-[8px]">
<a href="" class="item effect-image">
<img src="/src/assets/images/banner-sale-1.png" width="100%" height="100%"
<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="/src/assets/images/banner-sale-2.png" width="100%" height="100%"
<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="/src/assets/images/banner-sale-3.png" width="100%" height="100%"
<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="/src/assets/images/banner-sale-4.png" width="100%" height="100%"
<img src="/assets/images/banner-sale-4.png" width="100%" height="100%"
class="object-contain w-full h-full rounded-xl" alt="">
</a>
</div>
@@ -1533,25 +1532,25 @@
<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="/src/assets/images/promotions-big.png" width="100%" height="100%"
<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="/src/assets/images/promotions-1.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
<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="/src/assets/images/promotions-2.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
<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="/src/assets/images/promotions-3.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
<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="/src/assets/images/promotions-4.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
<img src="/assets/images/promotions-4.png" class="object-contain w-full h-full rounded-xl"
width="100%" height="100%" alt="">
</a>
</div>
</div>
@@ -1562,7 +1561,7 @@
<footer class="mt-20 border-t-[11px] border-[#1c039b] w-full">
<div class="container">
<a href="/" class="block my-[30px]">
<img src="/src/assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain"
<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">