update

src/components/layout/Header/HeaderBottom.tsx

@@ -56,7 +56,7 @@ const HeaderBottom: React.FC = () => {
               ))}
             </div>
           </div>
-          <ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-12">
+          <ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-5">
             <HeaderBottomRight />
           </ul>
         </div>

src/components/layout/Header/HeaderBottomRight.tsx

@@ -42,15 +42,15 @@ const HeaderBottomRight: React.FC = () => {
 
         return (
           <li key={item.id} className="item-category-header" data-id={item.id}>
-            <Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-6">
+            <Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-2">
               <i className={`sprite-more ${info.icon}`}></i>
               <span className="title-header-bottom">{info.title}</span>
-              <FaCaretDown size="16" className='text-white' />
+              <FaCaretDown size="16" className="text-white" />
             </Link>
 
             <div className="list-category-child flex justify-between">
               <div className="box-left">
-                <ul className="flex flex-wrap gap-8">
+                <ul className="grid grid-cols-4 gap-5">
                   {item.isParent === '1' && (
                     <>
                       {item.id === '408'
@@ -62,7 +62,7 @@ const HeaderBottomRight: React.FC = () => {
                                   {child1.title}
                                 </Link>
                                 {child1.isParent === '1' && (
-                                  <div className="list-child-lv3 flex-column mt-10 flex">
+                                  <div className="list-child-lv3 mt-10 flex flex-col">
                                     {child1.children?.map((child2) => (
                                       <Link key={child2.id} href={child2.url} className="child-lv3">
                                         {child2.title}
@@ -78,7 +78,7 @@ const HeaderBottomRight: React.FC = () => {
                                 {_item_child.title}
                               </Link>
                               {_item_child.isParent === '1' && (
-                                <div className="list-child-lv3 flex-column mt-10 flex">
+                                <div className="list-child-lv3 mt-10 flex flex-col">
                                   {_item_child.children?.map((_item_childtwo) => (
                                     <Link
                                       key={_item_childtwo.id}
@@ -98,7 +98,7 @@ const HeaderBottomRight: React.FC = () => {
               </div>
 
               <div className={`box-right flex-1 product-category-${item.id}`}>
-                <p className="title font-weight-700">Bán chạy nhất</p>
+                <p className="title font-bold">Bán chạy nhất</p>
                 <div className="list-product-bestsale" id={`product-category-${item.id}`}></div>
               </div>
             </div>

src/components/layout/Header/HeaderMid.tsx

@@ -14,7 +14,7 @@ const HeaderMid: React.FC = () => {
   return (
     <div className="header-middle">
       <div className="container flex items-center justify-between">
-        <div className="header-middle-left d-flex align-items-center">
+        <div className="header-middle-left flex items-center">
           <Link href="/">
             <Image
               src="https://nguyencongpc.vn/media/lib/18-02-2025/logowhite-dfvefb.png"
@@ -62,43 +62,34 @@ const HeaderMid: React.FC = () => {
             </div>
           </div>
 
-          <div className="box-tabs-header d-flex align-items-center">
-            <Link
-              href="/buildpc"
-              className="item-tab-header d-flex flex-column align-items-center gap-4"
-            >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+          <div className="box-tabs-header flex items-center">
+            <Link href="/buildpc" className="item-tab-header flex-column flex items-center gap-4">
+              <p className="icon-item-tab flex items-center justify-center">
                 <i className="sprite sprite-buildpc-header"></i>
               </p>
-              <span className="font-weight-500">Xây dựng cấu hình</span>
+              <span className="font-500">Xây dựng cấu hình</span>
             </Link>
 
             <Link
               href="javascript:void(0)"
-              className="item-tab-header d-flex flex-column align-items-center gap-4"
+              className="item-tab-header flex-column flex items-center gap-4"
             >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+              <p className="icon-item-tab flex items-center justify-center">
                 <i className="sprite sprite-lienhe-header"></i>
               </p>
-              <span className="font-weight-500">Khách hàng liên hệ</span>
+              <span className="font-500">Khách hàng liên hệ</span>
             </Link>
 
-            <Link
-              href="/tin-tuc"
-              className="item-tab-header d-flex flex-column align-items-center gap-4"
-            >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+            <Link href="/tin-tuc" className="item-tab-header flex-column flex items-center gap-4">
+              <p className="icon-item-tab flex items-center justify-center">
                 <i className="sprite sprite-article-header"></i>
               </p>
               <span className="font-weight-500">Tin tức công nghệ</span>
             </Link>
 
             <div id="js-header-cart" className="position-relative">
-              <Link
-                href="/cart"
-                className="item-tab-header d-flex flex-column align-items-center gap-4"
-              >
-                <p className="icon-item-tab icon-cart-header d-flex align-items-center justify-content-center">
+              <Link href="/cart" className="item-tab-header flex-column flex items-center gap-4">
+                <p className="icon-item-tab icon-cart-header flex items-center justify-center">
                   <i className="sprite sprite-cart-header"></i>
                   <u className="cart-count header-features-cart-amount">1</u>
                 </p>
@@ -107,14 +98,14 @@ const HeaderMid: React.FC = () => {
               <div className="cau-noi"></div>
               <div className="cart-ttip" id="js-cart-tooltip">
                 <div className="cart-ttip-item-container"></div>
-                <div className="cart-ttip-price d-flex align-items-center justify-content-end gap-6">
+                <div className="cart-ttip-price justify-content-end flex items-center gap-6">
                   <p>Tổng tiền hàng</p>
                   <p id="js-header-cart-quantity" className="font-weight-500"></p>
                   <p id="js-header-cart-total-price" className="font-weight-700"></p>
                 </div>
                 <Link
                   href="/cart"
-                  className="cart-ttip-price-button d-flex align-items-center justify-content-center"
+                  className="cart-ttip-price-button flex items-center justify-center"
                 >
                   <p className="font-weight-700">THANH TOÁN NGAY </p>
                 </Link>
@@ -123,9 +114,9 @@ const HeaderMid: React.FC = () => {
 
             <Link
               href="/taikhoan"
-              className="user-header item-tab-header d-flex flex-column align-items-center gap-4"
+              className="user-header item-tab-header flex-column flex items-center gap-4"
             >
-              <p className="icon-item-tab d-flex align-items-center justify-content-center">
+              <p className="icon-item-tab flex items-center justify-center">
                 <i className="sprite sprite-account-header"></i>
               </p>
               <span className="font-weight-500">Tài khoản</span>

src/components/layout/homepage/BoxProductDeal.tsx

@@ -1,6 +1,24 @@
 'use client';
 import React from 'react';
 
-const BoxProductDeal: React.FC = () => {};
+const BoxProductDeal: React.FC = () => {
+  return (
+    <div className="box-product-deal boder-radius-10">
+      <div className="box-title-deal d-flex align-items-center justify-content-between">
+        <div className="title-deal d-flex align-items-center justify-content-center gap-10">
+          <i className="sprite sprite-icon-deal-home"></i>
+          <h2 className="title font-weight-800">Giá tốt mỗi ngày</h2>
+          <span className="text-time-deal-home color-white fz-16 font-weight-700">
+            Kết thúc sau
+          </span>
+          <div className="global-time-deal d-flex align-items-center gap-6"></div>
+        </div>
+        <a href="/deal" className="button-deal color-white mb-10">
+          Xem thêm khuyến mãi <i className="fa-solid fa-caret-right"></i>
+        </a>
+      </div>
+    </div>
+  );
+};
 
 export default BoxProductDeal;

src/components/layout/homepage/SliderHome.tsx

@@ -12,49 +12,52 @@ const SliderHome: React.FC = () => {
 
   return (
     <>
-      <Swiper
-        className="box-banner-homepage relative"
-        modules={[Autoplay, Navigation, Pagination]}
-        spaceBetween={12}
-        slidesPerView={1}
-        loop={true}
-      >
-        {dataSlider?.banner_slider_homepage_main?.map((banner, index) => (
-          <SwiperSlide key={index}>
-            <Link href={banner.desUrl} className="item-banner boder-radius-10">
-              <Image
-                src={banner.fileUrl}
-                width={1909}
-                height={57}
-                alt={banner.title}
-                priority={true}
-                className="boder-radius-10"
-              />
-            </Link>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-      <Swiper
-        className="box-banner-under-slider"
-        modules={[Autoplay, Navigation, Pagination]}
-        spaceBetween={12}
-        slidesPerView={2}
-        loop={true}
-      >
-        {dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
-          <SwiperSlide key={index} className="item">
-            <Link href={banner.desUrl} className="item-banner boder-radius-10">
-              <Image
-                src={banner.fileUrl}
-                width={banner.width}
-                height={banner.height}
-                alt={banner.title}
-                className="lazy boder-radius-10"
-              />
-            </Link>
-          </SwiperSlide>
-        ))}
-      </Swiper>
+      <div className="box-banner-homepage relative">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={1}
+          loop={true}
+        >
+          {dataSlider?.banner_slider_homepage_main?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Link href={banner.desUrl} className="item-banner boder-radius-10">
+                <Image
+                  src={banner.fileUrl}
+                  width={1909}
+                  height={57}
+                  alt={banner.title}
+                  priority={true}
+                  className="boder-radius-10"
+                />
+              </Link>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+      <div className="box-banner-under-slider">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={2}
+          loop={true}
+          navigation={true}
+        >
+          {dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
+            <SwiperSlide key={index} className="item">
+              <Link href={banner.desUrl} className="item-banner boder-radius-10">
+                <Image
+                  src={banner.fileUrl}
+                  width={banner.width}
+                  height={banner.height}
+                  alt={banner.title}
+                  className="lazy boder-radius-10"
+                />
+              </Link>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
     </>
   );
 };