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

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

@@ -822,40 +822,40 @@ export function Home() {
{/* end copy */} {/* end copy */}
</div> </div>
</div> </div>
<div class="flex gap-[40px]"> <div class="flex gap-[40px] header-bottom-right">
<a href="/buildpc" class="flex items-center group"> <a href="/buildpc" class="flex items-center group">
<i class="icon_2025 buildpc"></i> <i class="icon_2025 buildpc"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold"> <span class="ml-[7px] group-hover:text-[var(--color-global)]">
Build PC Build PC
</span> </span>
</a> </a>
<a href="/tim-nguoi-ban" class="flex items-center group"> <a href="/tim-nguoi-ban" class="flex items-center group">
<i class="icon_2025 shop"></i> <i class="icon_2025 shop"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold"> <span class="ml-[7px] hover:text-[var(--color-global)]">
Tìm người bán Tìm người bán
</span> </span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 map-2 "></i> <i class="icon_2025 map-2 "></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold"> <span class="ml-[7px] group-hover:text-[var(--color-global)]">
Địa chỉ sửa chữa Địa chỉ sửa chữa
</span> </span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 question"></i> <i class="icon_2025 question"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold"> <span class="ml-[7px] group-hover:text-[var(--color-global)]">
Hỏi đáp Hỏi đáp
</span> </span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 prduct-save"></i> <i class="icon_2025 prduct-save"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold"> <span class="ml-[7px] group-hover:text-[var(--color-global)]">
Sản phẩm đã lưu Sản phẩm đã lưu
</span> </span>
</a> </a>
<a href="/" class="flex items-center group"> <a href="/" class="flex items-center group">
<i class="icon_2025 article"></i> <i class="icon_2025 article"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold"> <span class="ml-[7px] group-hover:text-[var(--color-global)]">
Tin rạo vặt Tin rạo vặt
</span> </span>
</a> </a>
@@ -869,13 +869,15 @@ export function Home() {
<div class="banner mt-[10px]"> <div class="banner mt-[10px]">
<div class="container"> <div class="container">
<div class="flex gap-[10px]"> <div class="flex gap-[10px]">
<div class="banner-slider w-1/2 swiper" id="js-banner-slider"> <Swiper
<div class="swiper-wrapper"> spaceBetween={10}
<div class="swiper-slide"> navigation={true}
<a modules={[FreeMode, Navigation, Thumbs]}
href="" className="banner-slider w-1/2 swiper"
class="block w-full h-full rounded-[12px] overflow-hidden" id="js-banner-slider"
> >
<SwiperSlide>
<a href="" class="effect-image relative block">
<img <img
src="/assets/images/banner-slider.png" src="/assets/images/banner-slider.png"
class="block w-full h-full object-contain" class="block w-full h-full object-contain"
@@ -884,12 +886,9 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a href="" class="effect-image relative block">
href=""
class="block w-full h-full rounded-[12px] overflow-hidden"
>
<img <img
src="/assets/images/banner-slider.png" src="/assets/images/banner-slider.png"
class="block w-full h-full object-contain" class="block w-full h-full object-contain"
@@ -898,12 +897,9 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a href="" class="effect-image relative block">
href=""
class="block w-full h-full rounded-[12px] overflow-hidden"
>
<img <img
src="/assets/images/banner-slider.png" src="/assets/images/banner-slider.png"
class="block w-full h-full object-contain" class="block w-full h-full object-contain"
@@ -912,25 +908,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> </Swiper>
<a
href=""
class="block w-full h-full rounded-[12px] overflow-hidden"
>
<img
src="/assets/images/banner-slider.png"
class="block w-full h-full object-contain"
width="100%"
height="100%"
alt=""
/>
</a>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="banner-right w-1/2 grid grid-cols-2 gap-[10px]"> <div class="banner-right w-1/2 grid grid-cols-2 gap-[10px]">
<a <a
href="" href=""
@@ -1031,15 +1010,22 @@ export function Home() {
</div> </div>
<div class="relative mt-[15px]"> <div class="relative mt-[15px]">
<div class="product-list swiper relative" id="js-product-best"> <Swiper
<div class="swiper-wrapper"> slidesPerView={5}
<div class="swiper-slide"> spaceBetween={15}
navigation={{
prevEl: "#js-product-rated-btn .swiper-button-prev", // Link to the 'prev' button
nextEl: "#js-product-rated-btn .swiper-button-next", // Link to the 'next' button
}}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="product-list swiper relative"
>
<SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1059,14 +1045,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1086,14 +1069,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1113,14 +1093,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1140,14 +1117,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1167,14 +1141,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1194,14 +1165,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="box-saleoff">-20%</div> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1221,10 +1189,33 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide>
<SwiperSlide>
<div class="product-item">
<a href="" class="product-image">
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7
</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop">
<i class="icon_2025 shop"></i>
</div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div> </div>
</div> </div>
</div> </div>
<div class="btn-slider" id="js-product-best-btn"> </SwiperSlide>
</Swiper>
<div class="btn-slider" id="js-product-rated-btn">
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
</div> </div>
@@ -1462,9 +1453,15 @@ export function Home() {
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]"></div> <div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]"></div>
</div> </div>
<div class="list p-[5px] swiper mt-8" id="list-businesses"> <Swiper
<div class="swiper-wrapper"> slidesPerView={7}
<div class="swiper-slide"> spaceBetween={20}
navigation={true}
modules={[FreeMode, Navigation, Thumbs]}
className="list p-[5px] swiper mt-8"
id="list-businesses"
>
<SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1477,8 +1474,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1491,8 +1488,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1505,8 +1502,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1519,8 +1516,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1533,8 +1530,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1547,8 +1544,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1561,8 +1558,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1575,8 +1572,8 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<a <a
href="" href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group" class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
@@ -1589,9 +1586,50 @@ export function Home() {
alt="" alt=""
/> />
</a> </a>
</div> </SwiperSlide>
</div> <SwiperSlide>
</div> <a
href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
>
<img
src="/assets/images/logo-hacom.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%"
height="100%"
alt=""
/>
</a>
</SwiperSlide>
<SwiperSlide>
<a
href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
>
<img
src="/assets/images/logo-anphat.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%"
height="100%"
alt=""
/>
</a>
</SwiperSlide>
<SwiperSlide>
<a
href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"
>
<img
src="/assets/images/logo-gearvn.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%"
height="100%"
alt=""
/>
</a>
</SwiperSlide>
</Swiper>
</div> </div>
</div> </div>
@@ -1605,15 +1643,23 @@ export function Home() {
</div> </div>
<div class="relative mt-5"> <div class="relative mt-5">
<div class="product-list swiper relative" id="js-product-best"> <Swiper
<div class="swiper-wrapper"> slidesPerView={5}
<div class="swiper-slide"> spaceBetween={15}
navigation={{
prevEl: "#js-product-best-btn .swiper-button-prev", // Link to the 'prev' button
nextEl: "#js-product-best-btn .swiper-button-next", // Link to the 'next' button
}}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="product-list swiper relative"
id="js-product-best"
>
<SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="icon-save"> <div class="icon-save">
<i class="icon_2025 heart"></i> <i class="icon_2025 heart"></i>
</div> </div>
@@ -1634,14 +1680,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="icon-save"> <div class="icon-save">
<i class="icon_2025 heart"></i> <i class="icon_2025 heart"></i>
</div> </div>
@@ -1662,14 +1705,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="icon-save"> <div class="icon-save">
<i class="icon_2025 heart"></i> <i class="icon_2025 heart"></i>
</div> </div>
@@ -1690,14 +1730,11 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</div> </SwiperSlide>
<div class="swiper-slide"> <SwiperSlide>
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <a href="" class="product-image">
<img <img src="/assets/images/box-image.png" alt="Laptop Dell" />
src="/assets/images/box-image.png"
alt="Laptop Dell"
/>
<div class="icon-save"> <div class="icon-save">
<i class="icon_2025 heart"></i> <i class="icon_2025 heart"></i>
</div> </div>
@@ -1718,12 +1755,86 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide>
<SwiperSlide>
<div class="product-item">
<a href="" class="product-image">
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save">
<i class="icon_2025 heart"></i>
</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7
</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop">
<i class="icon_2025 shop"></i>
</div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide>
<SwiperSlide>
<div class="product-item">
<a href="" class="product-image">
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save">
<i class="icon_2025 heart"></i>
</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7
</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop">
<i class="icon_2025 shop"></i>
</div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div class="product-item">
<a href="" class="product-image">
<img src="/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save">
<i class="icon_2025 heart"></i>
</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7
</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
<del class="old-price ml-[5px]">16.500.000đ</del>
</div>
<div class="total-shop flex items-center justify-center">
<div class="box-shop">
<i class="icon_2025 shop"></i>
</div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
<div class="btn-slider" id="js-product-best-btn"> <div class="btn-slider" id="js-product-best-btn">
<div class="swiper-button-next"></div> <div class="swiper-button-next right-[-18px]"></div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev left-[-18px]"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -1753,7 +1864,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1780,7 +1891,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1807,7 +1918,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1834,7 +1945,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1848,7 +1959,6 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
<a href="" class="more-link "> <a href="" class="more-link ">
<span class="">Xem tất cả</span> <i class="icon_2025 mouse"></i> <span class="">Xem tất cả</span> <i class="icon_2025 mouse"></i>
</a> </a>
@@ -1875,7 +1985,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1902,7 +2012,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1929,7 +2039,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1956,7 +2066,7 @@ export function Home() {
</div> </div>
<div class="flex items-center mb-[5px]"> <div class="flex items-center mb-[5px]">
<div class="box-date flex items-center mr-[10px]"> <div class="box-date flex items-center mr-[10px]">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[7px]">12/03/2025</p> <p class="ml-[7px]">12/03/2025</p>
</div> </div>
<div class="link-source flex items-center"> <div class="link-source flex items-center">
@@ -1995,13 +2105,13 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</div> <div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]"> <div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <p class="ml-[5px]">Quận thanh xuân</p>
</div> </div>
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[5px]">30 phút trước</p> <p class="ml-[5px]">30 phút trước</p>
</div> </div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]"> <div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
@@ -2032,13 +2142,13 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</div> <div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]"> <div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <p class="ml-[5px]">Quận thanh xuân</p>
</div> </div>
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[5px]">30 phút trước</p> <p class="ml-[5px]">30 phút trước</p>
</div> </div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]"> <div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
@@ -2069,13 +2179,13 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</div> <div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]"> <div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <p class="ml-[5px]">Quận thanh xuân</p>
</div> </div>
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[5px]">30 phút trước</p> <p class="ml-[5px]">30 phút trước</p>
</div> </div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]"> <div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
@@ -2106,13 +2216,13 @@ export function Home() {
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="price">19.999.000đ</div> <div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]"> <div class="flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 map-3"></i> <i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p> <p class="ml-[5px]">Quận thanh xuân</p>
</div> </div>
<div class="mr-[5px] flex items-center"> <div class="flex items-center">
<i class="icon_2025 time"></i> <i class="icon_2025 time-gray"></i>
<p class="ml-[5px]">30 phút trước</p> <p class="ml-[5px]">30 phút trước</p>
</div> </div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]"> <div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">

163
template/homepage/homepage.html
View File

@@ -21,7 +21,7 @@
}; };
</script> </script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <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> </head>
<body> <body>
@@ -32,7 +32,7 @@
<div class="container"> <div class="container">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]"> <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" /> alt="Location icon" />
</a> </a>
<div class="flex items-center mr-[100px]"> <div class="flex items-center mr-[100px]">
@@ -445,9 +445,9 @@
<!-- end copy --> <!-- end copy -->
</div> </div>
</div> </div>
<div class="flex gap-[40px]"> <div class="flex gap-[40px] header-bottom-right">
<a href="/buildpc" class="flex items-center group"> <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 <span
class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Build class="ml-[7px] group-hover:text-[var(--color-global)] group-hover:font-bold">Build
PC</span> PC</span>
@@ -494,25 +494,25 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
</div> </div>
@@ -522,20 +522,20 @@
</div> </div>
<div class="banner-right w-1/2 grid grid-cols-2 gap-[10px]"> <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"> <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" class="block w-full h-full object-contain transition-all duration-500 ease-in-out"
width="100%" height="100%" alt=""> width="100%" height="100%" alt="">
</a> </a>
<a href="" class="item block effect-image rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
<a href="" class="item block effect-image rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
<a href="" class="item block effect-image rounded-[12px] overflow-hidden"> <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=""> class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a> </a>
</div> </div>
@@ -581,7 +581,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -602,7 +602,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -623,7 +623,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -644,7 +644,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -665,7 +665,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -686,7 +686,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -707,7 +707,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="box-saleoff">-20%</div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -753,7 +753,7 @@
<a href="" class="item"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Laptop văn phòng" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Tản nhiệt, đèn" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image"> 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" /> alt="Linh kiện máy tính" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Bàn phím, chuột" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" class="object-contain aspect-[1.02] rounded-[50%] w-[122px] effect-image"
alt="Màn hình, tay treo" /> alt="Màn hình, tay treo" />
</div> </div>
@@ -813,7 +813,7 @@
<a href="" class="item"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Lưu trữ, phần mềm" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]"> 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" /> alt="Phụ kiện laptop" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Phụ kiện PC" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[--color-global]"> <p class="mt-3 text-xl font-medium text-center text-black hover:text-[--color-global]">
@@ -849,7 +849,7 @@
<a href="" class="item"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Laptop Gaming" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Phụ kiện đi kèm" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" <img src="/assets/images/icon-cate-11.png" class="object-contain aspect-[0.93] w-[100px]"
class="object-contain aspect-[0.93] w-[100px]" alt="PC đồ hoạ, gaming" /> alt="PC đồ hoạ, gaming" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
PC đồ hoạ, gaming PC đồ hoạ, gaming
@@ -885,8 +885,8 @@
<a href="" class="item"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" <img src="/assets/images/icon-cate-12.png" class="object-contain aspect-[0.93] w-[100px]"
class="object-contain aspect-[0.93] w-[100px]" alt="PC Văn phòng" /> alt="PC Văn phòng" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
PC Văn phòng PC Văn phòng
@@ -897,7 +897,7 @@
<a href="" class="item"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Thiết bị mạng" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Loa, tai nghe, mic" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" <img src="/assets/images/icon-cate-15.png" class="object-contain aspect-[1.15] w-[100px]"
class="object-contain aspect-[1.15] w-[100px]" alt="Thiết bị văn phòng" /> alt="Thiết bị văn phòng" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
Thiết bị văn phòng Thiết bị văn phòng
@@ -933,7 +933,7 @@
<a href="" class="item"> <a href="" class="item">
<div <div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image"> 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" /> alt="Game pad" />
</div> </div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]"> <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"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -971,7 +971,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -979,7 +979,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -987,7 +987,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -995,7 +995,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -1003,7 +1003,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -1011,7 +1011,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -1019,7 +1019,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -1027,7 +1027,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<a href="" <a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group"> 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]" 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=""> width="100%" height="100%" alt="">
</a> </a>
@@ -1050,14 +1050,13 @@
<div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]"> <div class="mt-[25px] h-[2px] bg-orange-500 border-2 border-orange-500 border-solid w-[38px]">
</div> </div>
</div> </div>
<div class="relative mt-5"> <div class="relative mt-5">
<div class="product-list swiper relative" id="js-product-best"> <div class="product-list swiper relative" id="js-product-best">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="icon-save"><i class="icon_2025 heart"></i></div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1077,7 +1076,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="icon-save"><i class="icon_2025 heart"></i></div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1097,7 +1096,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="icon-save"><i class="icon_2025 heart"></i></div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1117,7 +1116,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="product-item"> <div class="product-item">
<a href="" class="product-image"> <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> <div class="icon-save"><i class="icon_2025 heart"></i></div>
</a> </a>
<div class="info-product"> <div class="info-product">
@@ -1162,7 +1161,7 @@
<div class="list mt-5"> <div class="list mt-5">
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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>
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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>
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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>
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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="list mt-5">
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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>
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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>
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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>
<div class="item-article"> <div class="item-article">
<a href="" class="image-article effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a> <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="list mt-5">
<div class="item-classifieds"> <div class="item-classifieds">
<a href="" class="image-classifieds effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES <a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1381,7 +1380,7 @@
</div> </div>
</div> </div>
<a href="" class="staff flex items-center"> <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%" class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar"> height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b> <b class="ml-[5px]">Thanh mai</b>
@@ -1390,7 +1389,7 @@
</div> </div>
<div class="item-classifieds"> <div class="item-classifieds">
<a href="" class="image-classifieds effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES <a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1412,7 +1411,7 @@
</div> </div>
</div> </div>
<a href="" class="staff flex items-center"> <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%" class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar"> height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b> <b class="ml-[5px]">Thanh mai</b>
@@ -1421,7 +1420,7 @@
</div> </div>
<div class="item-classifieds"> <div class="item-classifieds">
<a href="" class="image-classifieds effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES <a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1443,7 +1442,7 @@
</div> </div>
</div> </div>
<a href="" class="staff flex items-center"> <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%" class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar"> height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b> <b class="ml-[5px]">Thanh mai</b>
@@ -1452,7 +1451,7 @@
</div> </div>
<div class="item-classifieds"> <div class="item-classifieds">
<a href="" class="image-classifieds effect-image"> <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> </a>
<div class="info"> <div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES <a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1474,7 +1473,7 @@
</div> </div>
</div> </div>
<a href="" class="staff flex items-center"> <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%" class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar"> height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b> <b class="ml-[5px]">Thanh mai</b>
@@ -1498,19 +1497,19 @@
<div class="container"> <div class="container">
<div class="flex gap-[8px]"> <div class="flex gap-[8px]">
<a href="" class="item effect-image"> <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=""> class="object-contain w-full h-full rounded-xl" alt="">
</a> </a>
<a href="" class="item effect-image"> <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=""> class="object-contain w-full h-full rounded-xl" alt="">
</a> </a>
<a href="" class="item effect-image"> <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=""> class="object-contain w-full h-full rounded-xl" alt="">
</a> </a>
<a href="" class="item effect-image"> <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=""> class="object-contain w-full h-full rounded-xl" alt="">
</a> </a>
</div> </div>
@@ -1533,25 +1532,25 @@
<div class="list flex gap-[8px] mt-6"> <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" <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"> 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=""> class="object-cover w-full h-full rounded-xl" alt="">
</a> </a>
<div class="grid grid-cols-2 w-[53%] gap-[8px]"> <div class="grid grid-cols-2 w-[53%] gap-[8px]">
<a href="" class="item effect-image"> <a href="" class="item effect-image">
<img src="/src/assets/images/promotions-1.png" <img src="/assets/images/promotions-1.png" class="object-contain w-full h-full rounded-xl"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt=""> width="100%" height="100%" alt="">
</a> </a>
<a href="" class="item effect-image"> <a href="" class="item effect-image">
<img src="/src/assets/images/promotions-2.png" <img src="/assets/images/promotions-2.png" class="object-contain w-full h-full rounded-xl"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt=""> width="100%" height="100%" alt="">
</a> </a>
<a href="" class="item effect-image"> <a href="" class="item effect-image">
<img src="/src/assets/images/promotions-3.png" <img src="/assets/images/promotions-3.png" class="object-contain w-full h-full rounded-xl"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt=""> width="100%" height="100%" alt="">
</a> </a>
<a href="" class="item effect-image"> <a href="" class="item effect-image">
<img src="/src/assets/images/promotions-4.png" <img src="/assets/images/promotions-4.png" class="object-contain w-full h-full rounded-xl"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt=""> width="100%" height="100%" alt="">
</a> </a>
</div> </div>
</div> </div>
@@ -1562,7 +1561,7 @@
<footer class="mt-20 border-t-[11px] border-[#1c039b] w-full"> <footer class="mt-20 border-t-[11px] border-[#1c039b] w-full">
<div class="container"> <div class="container">
<a href="/" class="block my-[30px]"> <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"> width="100%" height="100%" alt="logo">
</a> </a>
<div class="main-footer grid grid-cols-4"> <div class="main-footer grid grid-cols-4">