d

2025-05-27 14:24:58 +07:00
parent 0c0bf4e127
commit 170122ad32
115 changed files with 1 additions and 1 deletions
--- a/old/README.md
+++ b/old/README.md
@@ -0,0 +1,15 @@
+# `create-preact`
+
+<h2 align="center">
+  <img height="256" width="256" src="./src/assets/preact.svg">
+</h2>
+
+<h3 align="center">Get started using Preact and Vite!</h3>
+
+## Getting Started
+
+-   `npm run dev` - Starts a dev server at http://localhost:5173/
+
+-   `npm run build` - Builds for production, emitting to `dist/`
+
+-   `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
--- a/old/assets/css/font.css
+++ b/old/assets/css/font.css
@@ -0,0 +1,41 @@
+@font-face {
+  font-family: "Shopee";
+  font-display: swap;
+  src: url(../font//FVHShopeeText-Bold.otf);
+}
+
+@font-face {
+  font-family: "Shopee Bold";
+  font-display: swap;
+  src: url(../font/ShopeeDisplay-Bold.ttf);
+}
+
+@font-face {
+  font-family: "Shopee Regular";
+  font-display: swap;
+  src: url(../font/ShopeeDisplay-Regular.ttf);
+}
+
+@font-face {
+  font-family: "Shopee Medium";
+  font-display: swap;
+  src: url(../font/ShopeeDisplay-Medium.ttf);
+}
+
+@font-face {
+  font-family: "Shopee Light";
+  font-display: swap;
+  src: url(../font/ShopeeDisplay-Light.ttf);
+}
+
+@font-face {
+  font-family: "Shopee ExtraBold";
+  font-display: swap;
+  src: url(../font/ShopeeDisplay-ExtraBold.ttf);
+}
+
+@font-face {
+  font-family: "Shopee Black";
+  font-display: swap;
+  src: url(../font/ShopeeDisplay-Black.ttf);
+}
--- a/old/assets/css/style.css
+++ b/old/assets/css/style.css
--- a/old/assets/css/style.css.map
+++ b/old/assets/css/style.css.map
--- a/old/assets/css/style.scss
+++ b/old/assets/css/style.scss
--- a/old/assets/font/FVHShopeeText-Bold.otf
+++ b/old/assets/font/FVHShopeeText-Bold.otf
--- a/old/assets/font/ShopeeDisplay-Black.ttf
+++ b/old/assets/font/ShopeeDisplay-Black.ttf
--- a/old/assets/font/ShopeeDisplay-Bold.ttf
+++ b/old/assets/font/ShopeeDisplay-Bold.ttf
--- a/old/assets/font/ShopeeDisplay-ExtraBold.ttf
+++ b/old/assets/font/ShopeeDisplay-ExtraBold.ttf
--- a/old/assets/font/ShopeeDisplay-Light.ttf
+++ b/old/assets/font/ShopeeDisplay-Light.ttf
--- a/old/assets/font/ShopeeDisplay-Medium.ttf
+++ b/old/assets/font/ShopeeDisplay-Medium.ttf
--- a/old/assets/font/ShopeeDisplay-Regular.ttf
+++ b/old/assets/font/ShopeeDisplay-Regular.ttf
--- a/old/assets/images/avartar-review-1.png
+++ b/old/assets/images/avartar-review-1.png
--- a/old/assets/images/avartar-review-2.png
+++ b/old/assets/images/avartar-review-2.png
--- a/old/assets/images/avartar-review-3.png
+++ b/old/assets/images/avartar-review-3.png
--- a/old/assets/images/avartar.png
+++ b/old/assets/images/avartar.png
--- a/old/assets/images/avartar_acc.png
+++ b/old/assets/images/avartar_acc.png
--- a/old/assets/images/banner-list-product-save.png
+++ b/old/assets/images/banner-list-product-save.png
--- a/old/assets/images/banner-right-slider-1.png
+++ b/old/assets/images/banner-right-slider-1.png
--- a/old/assets/images/banner-right-slider-2.png
+++ b/old/assets/images/banner-right-slider-2.png
--- a/old/assets/images/banner-right-slider-3.png
+++ b/old/assets/images/banner-right-slider-3.png
--- a/old/assets/images/banner-right-slider-4.png
+++ b/old/assets/images/banner-right-slider-4.png
--- a/old/assets/images/banner-sale-1.png
+++ b/old/assets/images/banner-sale-1.png
--- a/old/assets/images/banner-sale-2.png
+++ b/old/assets/images/banner-sale-2.png
--- a/old/assets/images/banner-sale-3.png
+++ b/old/assets/images/banner-sale-3.png
--- a/old/assets/images/banner-sale-4.png
+++ b/old/assets/images/banner-sale-4.png
--- a/old/assets/images/banner-slider.png
+++ b/old/assets/images/banner-slider.png
--- a/old/assets/images/banner_canhbao.png
+++ b/old/assets/images/banner_canhbao.png
--- a/old/assets/images/big-image-rao-vat.png
+++ b/old/assets/images/big-image-rao-vat.png
--- a/old/assets/images/big-product-detail-1.jpg
+++ b/old/assets/images/big-product-detail-1.jpg
--- a/old/assets/images/big-product-detail-2.jpg
+++ b/old/assets/images/big-product-detail-2.jpg
--- a/old/assets/images/big-product-detail-3.jpg
+++ b/old/assets/images/big-product-detail-3.jpg
--- a/old/assets/images/big-product-detail-4.jpg
+++ b/old/assets/images/big-product-detail-4.jpg
--- a/old/assets/images/big-product-detail.jpg
+++ b/old/assets/images/big-product-detail.jpg
--- a/old/assets/images/big-product-detail.png
+++ b/old/assets/images/big-product-detail.png
--- a/old/assets/images/box-image.png
+++ b/old/assets/images/box-image.png
--- a/old/assets/images/category-avatar.png
+++ b/old/assets/images/category-avatar.png
--- a/old/assets/images/icon-cate-1.png
+++ b/old/assets/images/icon-cate-1.png
--- a/old/assets/images/icon-cate-10.png
+++ b/old/assets/images/icon-cate-10.png
--- a/old/assets/images/icon-cate-11.png
+++ b/old/assets/images/icon-cate-11.png
--- a/old/assets/images/icon-cate-12.png
+++ b/old/assets/images/icon-cate-12.png
--- a/old/assets/images/icon-cate-13.png
+++ b/old/assets/images/icon-cate-13.png
--- a/old/assets/images/icon-cate-14.png
+++ b/old/assets/images/icon-cate-14.png
--- a/old/assets/images/icon-cate-15.png
+++ b/old/assets/images/icon-cate-15.png
--- a/old/assets/images/icon-cate-16.png
+++ b/old/assets/images/icon-cate-16.png
--- a/old/assets/images/icon-cate-2.png
+++ b/old/assets/images/icon-cate-2.png
--- a/old/assets/images/icon-cate-3.png
+++ b/old/assets/images/icon-cate-3.png
--- a/old/assets/images/icon-cate-4.png
+++ b/old/assets/images/icon-cate-4.png
--- a/old/assets/images/icon-cate-5.png
+++ b/old/assets/images/icon-cate-5.png
--- a/old/assets/images/icon-cate-6.png
+++ b/old/assets/images/icon-cate-6.png
--- a/old/assets/images/icon-cate-7.png
+++ b/old/assets/images/icon-cate-7.png
--- a/old/assets/images/icon-cate-8.png
+++ b/old/assets/images/icon-cate-8.png
--- a/old/assets/images/icon-cate-9.png
+++ b/old/assets/images/icon-cate-9.png
--- a/old/assets/images/icon-file-save.png
+++ b/old/assets/images/icon-file-save.png
--- a/old/assets/images/icon-play.png
+++ b/old/assets/images/icon-play.png
--- a/old/assets/images/icon-star-active.png
+++ b/old/assets/images/icon-star-active.png
--- a/old/assets/images/icon-star-gray.png
+++ b/old/assets/images/icon-star-gray.png
--- a/old/assets/images/icon_2025.png
+++ b/old/assets/images/icon_2025.png
--- a/old/assets/images/icon_star.png
+++ b/old/assets/images/icon_star.png
--- a/old/assets/images/icon_upload_image.png
+++ b/old/assets/images/icon_upload_image.png
--- a/old/assets/images/icon_upload_video.png
+++ b/old/assets/images/icon_upload_video.png
--- a/old/assets/images/image-article.png
+++ b/old/assets/images/image-article.png
--- a/old/assets/images/lienkien-ram.png
+++ b/old/assets/images/lienkien-ram.png
--- a/old/assets/images/logo-anphat.png
+++ b/old/assets/images/logo-anphat.png
--- a/old/assets/images/logo-footer.png
+++ b/old/assets/images/logo-footer.png
--- a/old/assets/images/logo-gearvn.png
+++ b/old/assets/images/logo-gearvn.png
--- a/old/assets/images/logo-hacom.png
+++ b/old/assets/images/logo-hacom.png
--- a/old/assets/images/logo.png
+++ b/old/assets/images/logo.png
--- a/old/assets/images/promotions-1.png
+++ b/old/assets/images/promotions-1.png
--- a/old/assets/images/promotions-2.png
+++ b/old/assets/images/promotions-2.png
--- a/old/assets/images/promotions-3.png
+++ b/old/assets/images/promotions-3.png
--- a/old/assets/images/promotions-4.png
+++ b/old/assets/images/promotions-4.png
--- a/old/assets/images/promotions-big.png
+++ b/old/assets/images/promotions-big.png
--- a/old/assets/images/small-product-detail.png
+++ b/old/assets/images/small-product-detail.png
--- a/old/assets/images/star_min.png
+++ b/old/assets/images/star_min.png
--- a/old/assets/images/thumb-image-rao-vat.png
+++ b/old/assets/images/thumb-image-rao-vat.png
--- a/old/index.html
+++ b/old/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<link rel="icon" type="image/svg+xml" href="" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<script src="https://cdn.tailwindcss.com"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+	<link rel="stylesheet" href="/assets/css/style.css" rel="stylesheet" />
+</head>
+
+<body>
+	<div id="root"></div>
+	<script type="module" src="./src/index.tsx"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
+
+</body>
+
+</html>
--- a/old/package-lock.json
+++ b/old/package-lock.json
--- a/old/package.json
+++ b/old/package.json
@@ -0,0 +1,28 @@
+{
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@fancyapps/ui": "^5.0.36",
+		"preact": "^10.26.6",
+		"preact-iso": "^2.9.1",
+		"react-fancybox": "^1.0.2",
+		"react-slick": "^0.30.3",
+		"swiper": "^11.2.6",
+		"tailwindcss": "^4.1.5"
+	},
+	"devDependencies": {
+		"@preact/preset-vite": "^2.9.3",
+		"eslint": "^8.57.1",
+		"eslint-config-preact": "^1.5.0",
+		"typescript": "^5.8.3",
+		"vite": "^6.0.4"
+	},
+	"eslintConfig": {
+		"extends": "preact"
+	}
+}
--- a/old/src/components/buildpc/CreateBuildpc.tsx
+++ b/old/src/components/buildpc/CreateBuildpc.tsx
@@ -0,0 +1,289 @@
+import { useState } from "react";
+import { PopupBuildpc } from "../../components/buildpc/PopupBuildpc";
+
+export function CreateBuildpc() {
+  const [showPopup, setShowPopup] = useState(false);
+
+  return (
+    <>
+      <div className="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
+        <b className="left w-[200px] name-component">Sản phẩm</b>
+        <div className="right w-[calc(100%-200px)] grid grid-cols-8">
+          <b className="item col-span-3">Thông tin</b>
+          <b className="item">Giá gốc</b>
+          <b className="item">Khuyến mãi</b>
+          <b className="item">Thành tiền</b>
+          <b className="item col-span-2">Nhà cung cấp </b>
+        </div>
+      </div>
+      {/* <!-- header list buildpc --> */}
+      <div className="list-buildpc">
+        <div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU</b>
+          <div className="right w-[calc(100%-200px)]">
+            <div className="item-info-product grid items-center grid-cols-8">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href="/buildpc/detail"
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href="/buildpc/detail"
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="total-amount">4.000.000đ</b>
+              <div className="supplier col-span-2 flex items-center justify-between">
+                <a href="">
+                  <img
+                    src="/assets/images/logo-hacom.png"
+                    width="100%"
+                    height="100%"
+                    className="w-full block h-[30px] object-contain"
+                    alt=""
+                  />
+                </a>
+                <div className="btn flex items-center">
+                  <a
+                    href=""
+                    className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                  >
+                    Mua ngay
+                  </a>
+                  <a
+                    href=""
+                    className="group hover:bg-red-500 p-1.5 rounded-[50%]"
+                  >
+                    <i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU Cooler</b>
+          <div className="right w-[calc(100%-200px)]">
+            <div className="item-info-product grid items-center grid-cols-8">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href="/buildpc/detail"
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href="/buildpc/detail"
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="total-amount">4.000.000đ</b>
+              <div className="supplier col-span-2 flex items-center justify-between">
+                <a href="">
+                  <img
+                    src="/assets/images/logo-hacom.png"
+                    width="100%"
+                    height="100%"
+                    className="w-full block h-[30px] object-contain"
+                    alt=""
+                  />
+                </a>
+                <div className="btn flex items-center">
+                  <a
+                    href=""
+                    className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                  >
+                    Mua ngay
+                  </a>
+                  <a
+                    href=""
+                    className="group hover:bg-red-500 p-1.5 rounded-[50%]"
+                  >
+                    <i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="item-info-product grid items-center grid-cols-8 mt-2.5 pt-2.5 border-t-[1px] border-neutral-200">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href="/buildpc/detail"
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href="/buildpc/detail"
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="total-amount">4.000.000đ</b>
+              <div className="supplier col-span-2 flex items-center justify-between">
+                <a href="">
+                  <img
+                    src="/assets/images/logo-hacom.png"
+                    width="100%"
+                    height="100%"
+                    className="w-full block h-[30px] object-contain"
+                    alt=""
+                  />
+                </a>
+                <div className="btn flex items-center">
+                  <a
+                    href=""
+                    className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                  >
+                    Mua ngay
+                  </a>
+                  <a
+                    href=""
+                    className="group hover:bg-red-500 p-1.5 rounded-[50%]"
+                  >
+                    <i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <a
+              href="javascript:void(0)"
+              onClick={(e) => {
+                e.preventDefault();
+                setShowPopup(true);
+              }}
+              className="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
+            >
+              + Chọn thêm CPU
+            </a>
+          </div>
+        </div>
+        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU Cooler</b>
+          <div className="right w-[calc(100%-200px)]">
+            <a
+              href="javascript:void(0)"
+              onClick={(e) => {
+                e.preventDefault();
+                setShowPopup(true);
+              }}
+              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
+            >
+              + Chọn thêm CPU
+            </a>
+          </div>
+        </div>
+        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU Cooler</b>
+          <div className="right w-[calc(100%-200px)]">
+            <a
+              href="javascript:void(0)"
+              onClick={(e) => {
+                e.preventDefault();
+                setShowPopup(true);
+              }}
+              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
+            >
+              + Chọn thêm CPU
+            </a>
+          </div>
+        </div>
+        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU Cooler</b>
+          <div className="right w-[calc(100%-200px)]">
+            <a
+              href="javascript:void(0)"
+              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
+            >
+              + Chọn thêm CPU
+            </a>
+          </div>
+        </div>
+        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU Cooler</b>
+          <div className="right w-[calc(100%-200px)]">
+            <a
+              href="javascript:void(0)"
+              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
+            >
+              + Chọn thêm CPU
+            </a>
+          </div>
+        </div>
+        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
+          <b className="name-component block w-[200px]">CPU Cooler</b>
+          <div className="right w-[calc(100%-200px)]">
+            <a
+              href="javascript:void(0)"
+              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
+            >
+              + Chọn thêm CPU
+            </a>
+          </div>
+        </div>
+      </div>
+      {/* <!-- list buildpc --> */}
+
+      <div className="box-total-price pt-5">
+        <b className="block text-xl text-right text-red-600">
+          Tổng tiền 2 sản phẩm: 8.000.000đ
+        </b>
+        <div className="flex items-center justify-end gap-[10px] mt-3">
+          <a
+            href="javascript:void(0)"
+            className="flex items-center px-7 py-2.5 border border-[#b3b3b3] rounded hover:bg-[#e0e0e0]"
+          >
+            <i className="icon_2025 print"></i>
+            <span className="ml-2">In đơn hàng</span>
+          </a>
+          <a
+            href="javasript:void(0)"
+            className="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700"
+          >
+            Mua hàng tại Hacom
+          </a>
+        </div>
+      </div>
+      {/* <!-- tổng tiền  --> */}
+
+      <PopupBuildpc show={showPopup} onClose={() => setShowPopup(false)} />
+    </>
+  );
+}
--- a/old/src/components/buildpc/ListCompare.tsx
+++ b/old/src/components/buildpc/ListCompare.tsx
@@ -0,0 +1,229 @@
+export function ListCompare() {
+  return (
+    <div className="list-component mt-5">
+      <div className="item-compare mb-12">
+        <div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
+          <b className="left w-[200px] name-component">
+            <a href="" className="block m-[auto_auto_auto_0]">
+              <img
+                src="/assets/images/logo-hacom.png"
+                width="100%"
+                height="100%"
+                className="w-[150px] block h-[50px] object-contain"
+                alt=""
+              />
+            </a>
+          </b>
+          <div className="right w-[calc(100%-200px)] grid grid-cols-8">
+            <b className="item col-span-3">Sản phẩm</b>
+            <b className="item">Giá gốc</b>
+            <b className="item">Khuyến mãi</b>
+            <b className="item">Giao hàng</b>
+            <b className="item col-span-2">Thành tiền</b>
+          </div>
+        </div>
+
+        <div className="list-product">
+          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
+            <b className="name-component block w-[200px]">CPU Cooler</b>
+            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href=""
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href=""
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="ship underline">Liên hệ</b>
+              <div className="col-span-2 flex items-center justify-between">
+                <b className="total-amount">4.000.000đ</b>
+                <a
+                  href=""
+                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                >
+                  Mua ngay
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
+            <b className="name-component block w-[200px]">CPU Cooler</b>
+            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href=""
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href=""
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="ship underline text-[#33c600]">Liên hệ</b>
+              <div className="col-span-2 flex items-center justify-between">
+                <b className="total-amount">4.000.000đ</b>
+                <a
+                  href=""
+                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                >
+                  Mua ngay
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* <!-- end list --> */}
+
+        <div className="text-right flex items-center font-bold justify-end mt-5">
+          <div className="mr-[10px]">
+            Tổng tiền (<span>2</span> sản phẩm) :
+          </div>
+          <div className="font-bold">6.000.000 Vnđ</div>
+        </div>
+      </div>
+
+      <div className="item-compare mb-12">
+        <div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
+          <b className="left w-[200px] name-component">
+            <a href="" className="block m-[auto_auto_auto_0]">
+              <img
+                src="/assets/images/logo-hacom.png"
+                width="100%"
+                height="100%"
+                className="w-[150px] block h-[50px] object-contain"
+                alt=""
+              />
+            </a>
+          </b>
+          <div className="right w-[calc(100%-200px)] grid grid-cols-8">
+            <b className="item col-span-3">Sản phẩm</b>
+            <b className="item">Giá gốc</b>
+            <b className="item">Khuyến mãi</b>
+            <b className="item">Giao hàng</b>
+            <b className="item col-span-2">Thành tiền</b>
+          </div>
+        </div>
+
+        <div className="list-product">
+          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
+            <b className="name-component block w-[200px]">CPU Cooler</b>
+            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href=""
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href=""
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="ship underline">Liên hệ</b>
+              <div className="col-span-2 flex items-center justify-between">
+                <b className="total-amount">4.000.000đ</b>
+                <a
+                  href=""
+                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                >
+                  Mua ngay
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
+            <b className="name-component block w-[200px]">CPU Cooler</b>
+            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
+              <div className="info col-span-3">
+                <div className="flex items-center">
+                  <a
+                    href=""
+                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
+                  >
+                    <img
+                      src="/assets/images/lienkien-ram.png"
+                      width="100%"
+                      height="100%"
+                      className="block w-full h-full object-contain"
+                      alt=""
+                    />
+                  </a>
+                  <a
+                    href=""
+                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
+                  >
+                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                  </a>
+                </div>
+              </div>
+              <div className="old-price font-400">4.700.000 Vnđ</div>
+              <div className="price-saleoff font-400">20%</div>
+              <b className="ship underline text-[#33c600]">Liên hệ</b>
+              <div className="col-span-2 flex items-center justify-between">
+                <b className="total-amount">4.000.000đ</b>
+                <a
+                  href=""
+                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
+                >
+                  Mua ngay
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* <!-- end list --> */}
+
+        <div className="text-right flex items-center font-bold justify-end mt-5">
+          <div className="mr-[10px]">
+            Tổng tiền (<span>2</span> sản phẩm) :
+          </div>
+          <div className="font-bold">6.000.000 Vnđ</div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/old/src/components/buildpc/PopupBuildpc.tsx
+++ b/old/src/components/buildpc/PopupBuildpc.tsx
@@ -0,0 +1,832 @@
+export function PopupBuildpc({ show, onClose }) {
+  return (
+    <>
+      <div
+        id="backgroundPopup"
+        className={`${show ? "active" : ""}`}
+        onClick={onClose}
+      ></div>
+      <div
+        className={`fixed w-[1400px] bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999] ${
+          show ? "" : "hidden"
+        }`}
+        id="js-modal-popup"
+      >
+        <div className="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
+          <b className="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>
+
+          <div className="w-[calc(100%-275px)] relative input-search">
+            <form
+              action="/search"
+              enctype="text/plain"
+              method="get"
+              className="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden"
+            >
+              <input
+                type="text"
+                name="q"
+                placeholder="Bạn cần tìm linh kiện gì..."
+                className="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
+              />
+              <button
+                type="submit"
+                className="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"
+              >
+                <i className="icon_2025 search "></i>
+              </button>
+            </form>
+          </div>
+
+          <a
+            href="javascript:void(0)"
+            onClick={onClose}
+            className="w-[54px] flex items-center justify-end"
+          >
+            <i className="icon_2025 close brightness-0 invert-[1]"></i>
+          </a>
+        </div>
+        <div className="content-popup p-[10px] bg-white">
+          <div className="flex gap-[15px]">
+            <div className="left w-[205px]">
+              <b className="">230 sản phẩm</b>
+              <div className="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
+                <b className="text-xl">Bộ lọc</b>
+                <i className="icon_2025 filter"></i>
+              </div>
+              <div className="list-filter h-[calc(100vh-208px)] overflow-auto">
+                <div className="item-filter mb-2.5">
+                  <h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
+                    Lọc theo
+                  </h3>
+                  <div className="mt-2.5 text-base leading-8 text-black">
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle1"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle1"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        Máy tính dành cho Máy tính dành cho
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle2"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle2"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        Máy tính dành cho
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle3"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle3"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        Máy tính dành cho
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle4"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle4"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        Máy tính dành cho
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle5"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle5"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        Máy tính dành cho
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        Máy tính dành cho
+                      </label>
+                    </a>
+                  </div>
+                </div>
+                <div className="item-filter mb-2.5">
+                  <h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
+                    Lọc theo
+                  </h3>
+                  <div className="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle1"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle1"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        All
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle2"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle2"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        32gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle3"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle3"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        64bg
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle4"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle4"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        16bg
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle5"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle5"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        12gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        4gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        2gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        24gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle2"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle2"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        32gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle3"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle3"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        64bg
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle4"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle4"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        16bg
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle5"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle5"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        12gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        4gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        2gb
+                      </label>
+                    </a>
+                    <a href="" className="item flex items-center ">
+                      <input
+                        type="checkbox"
+                        id="vehicle6"
+                        className="checkbox"
+                      />
+                      <label
+                        for="vehicle6"
+                        className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
+                      >
+                        24gb
+                      </label>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="right w-[calc(100%-220px)]">
+              <div className="flex gap-[15px]">
+                <a href="" className="text-[var(--color-hover)]">
+                  Chọn tất cả
+                </a>
+                <a href="">Bỏ chọn tất cả</a>
+                <a href="">So sánh sản phẩm đã chọn</a>
+              </div>
+              <div className="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
+                <b className="col-span-3 text-center">Tên</b>
+                <b>Dung lượng</b>
+                <b>Thế hệ</b>
+                <b>Bộ nhớ</b>
+                <b>Độ ồn</b>
+                <b>Màu sắc</b>
+                <b>Đánh giá</b>
+                <b className="col-span-2">Thành tiền</b>
+              </div>
+              <div className="list mt-3 h-[calc(100vh-208px)] overflow-auto">
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+                <div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
+                  <div className="col-span-3">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="checkbox w-[24px] mx-[20px]"
+                      />
+                      <a
+                        href=""
+                        className="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]"
+                      >
+                        <img
+                          src="/assets/images/lienkien-ram.png"
+                          width="100%"
+                          height="100%"
+                          className="block w-full h-full object-contain"
+                          alt=""
+                        />
+                      </a>
+                      <a
+                        href=""
+                        className="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]"
+                      >
+                        AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
+                      </a>
+                    </div>
+                  </div>
+                  <div className="text-center">8bg</div>
+                  <div className="">5</div>
+                  <div>GDDR5</div>
+                  <div className="text-center">5db</div>
+                  <div>Đen</div>
+                  <div className="flex items-center">
+                    <i className="icon_star star4"></i>
+                    <span className="ml-[5px]">(125)</span>
+                  </div>
+                  <div className="col-span-2 flex items-center justify-between">
+                    <div className="price">3.400.000đ</div>
+                    <a
+                      href=""
+                      className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
+                    >
+                      Add
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/old/src/components/footer/Footer.tsx
+++ b/old/src/components/footer/Footer.tsx
@@ -0,0 +1,68 @@
+export function Footer() {
+  return (
+    <footer className="border-t-[11px] border-[#1c039b] w-full">
+      <div className="container">
+        <a href="/" className="block my-[30px]">
+          <img
+            src="/assets/images/logo-footer.png"
+            className="block w-[180px] h-[45px] object-contain"
+            width="100%"
+            height="100%"
+            alt="logo"
+          />
+        </a>
+        <div className="main-footer grid grid-cols-4">
+          <div className="item">
+            <h3 className="title font-bold">Về chúng tôi</h3>
+            <a href="" className="block">
+              Độc quyền
+            </a>
+            <a href="" className="block">
+              Mua online
+            </a>
+            <a href="" className="block">
+              Bộ sưu tập
+            </a>
+            <a href="/tin-tuc" className="block">
+              Blog
+            </a>
+            <div className="list-social flex items-center mt-[45px]">
+              <a href="" target="_blank" className="mr-[10px]">
+                <i className="icon_2025 facebook"></i>
+              </a>
+              <a href="" target="_blank">
+                <i className="icon_2025 zalo"></i>
+              </a>
+            </div>
+          </div>
+          <div className="item">
+            <h3 className="title font-bold">Tuyển dụng</h3>
+            <a href="">Liên hệ</a>
+            <a href="">Điều khoản</a>
+            <a href="">Chính sách bảo mật</a>
+            <a href="">Trở thành đối tác</a>
+          </div>
+          <div className="item">
+            <h3 className="title font-bold">Liên kết</h3>
+            <a href="hurasoft.com">Hurasoft.com</a>
+          </div>
+          <div className="item">
+            <h3 className="title font-bold">Giới thiệu</h3>
+            <b className="text-[16px]">
+              BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở
+              Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ nghành
+              hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC
+              chuyên nghiệp. Và còn rất nhiều mã giảm giá độc quyền dành riêng
+              cho bạn.
+            </b>
+          </div>
+        </div>
+      </div>
+      <div className="footer-bottom bg-[#ebebeb] py-[15px]">
+        <b className="text-center block">
+          © Copyright 2025 by Hurasoft. All Rights Reserved.
+        </b>
+      </div>
+    </footer>
+  );
+}
--- a/old/src/components/header/Header.tsx
+++ b/old/src/components/header/Header.tsx
@@ -0,0 +1,859 @@
+export function Header() {
+  return (
+    <header class="w-full">
+      <div class="header-main px-[10px] py-6 bg-[var(--color-global)]">
+        <div class="container">
+          <div class="flex items-center justify-between">
+            <a href="/" class="logo block mr-[100px]">
+              <img
+                src="/assets/images/logo.png"
+                class="object-contain w-[173px] h-[45px] block"
+                alt="Location icon"
+              />
+            </a>
+            <div class="flex items-center mr-[100px]">
+              <i class="icon_2025 map"></i>
+              <div class="ml-[20px] ">
+                <span class="text-xs text-white block mb-[5px]">
+                  Bạn đang ở
+                </span>
+                <div class="box-select">
+                  <select name="" id="" class="select select_location">
+                    <option value="">Hà Nội</option>
+                    <option value="">TP HCM</option>
+                    <option value="">Đà Nẵng</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="w-[670px] relative mr-[135px] input-search">
+              <form
+                action="/search"
+                enctype="text/plain"
+                method="get"
+                class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden"
+              >
+                <input
+                  type="text"
+                  name="q"
+                  placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
+                  class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base"
+                />
+                <button
+                  type="submit"
+                  class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"
+                >
+                  <i class="icon_2025 search "></i>
+                </button>
+              </form>
+              <div class="autocomplete-suggestions hidden">
+                <p>TỪ KHOÁ HOT</p>
+                <ul class="ul">
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                  <li>
+                    <a href=""> laptop </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="box-user">
+              <div class="flex items-center">
+                <i class="icon_2025 user"></i>
+                <b class="text-white p-[0_5px] whitespace-nowrap">Tài khoản</b>
+                <i class="icon_arrow"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Navigation Section  */}
+      <nav class="header-bottom px-[10px] py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
+        <div class="container">
+          <div class="flex items-center justify-between w-full">
+            <div class="header-menu relative group">
+              <div class="title-menu flex items-center justify-center w-[219px] h-[45px]  rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
+                <i class="icon_2025 bar"></i>
+                <b class="ml-[8px] uppercase">Danh mục sản phẩm</b>
+              </div>
+              <div class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/laptop.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/008-mouse.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/010-computer.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/013-fan.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/gamepad-1.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/server-4.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Laptop </a>
+                      </li>
+                      <li>
+                        <a href="/danh-muc-cap2.html"> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/laptop.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/008-mouse.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/010-computer.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/013-fan.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/gamepad-1.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="/danh-muc-cap1.html" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/server-4.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="item">
+                  <a href="" class="flex items-center">
+                    <span class="cate-img">
+                      {" "}
+                      <img src="/dev/images/server-4.png" alt="" />{" "}
+                    </span>
+                    <span class="cate-name"> Laptop &amp; phụ kiện</span>
+                  </a>
+
+                  <div class="sub-menu">
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện </a>
+                      </li>
+                    </ul>
+
+                    <ul class="ul sub-cate">
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Laptop 2 </a>
+                      </li>
+                      <li>
+                        <a href=""> Phụ kiện 2 </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                {/* end copy */}
+              </div>
+            </div>
+            <div class="flex gap-[40px] header-bottom-right">
+              <a href="/buildpc" class="flex items-center group">
+                <i class="icon_2025 buildpc"></i>
+                <span class="ml-[7px] group-hover:text-[var(--color-global)]">
+                  Build PC
+                </span>
+              </a>
+              <a href="/tim-nguoi-ban" class="flex items-center group">
+                <i class="icon_2025 shop"></i>
+                <span class="ml-[7px] hover:text-[var(--color-global)]">
+                  Tìm người bán
+                </span>
+              </a>
+              <a href="/" class="flex items-center group">
+                <i class="icon_2025 map-2 "></i>
+                <span class="ml-[7px] group-hover:text-[var(--color-global)]">
+                  Địa chỉ sửa chữa
+                </span>
+              </a>
+              <a href="/" class="flex items-center group">
+                <i class="icon_2025 question"></i>
+                <span class="ml-[7px] group-hover:text-[var(--color-global)]">
+                  Hỏi đáp
+                </span>
+              </a>
+              <a href="/" class="flex items-center group">
+                <i class="icon_2025 prduct-save"></i>
+                <span class="ml-[7px] group-hover:text-[var(--color-global)]">
+                  Sản phẩm đã lưu
+                </span>
+              </a>
+              <a href="/" class="flex items-center group">
+                <i class="icon_2025 article"></i>
+                <span class="ml-[7px] group-hover:text-[var(--color-global)]">
+                  Tin rạo vặt
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}
--- a/old/src/components/product/FormReview.tsx
+++ b/old/src/components/product/FormReview.tsx
@@ -0,0 +1,132 @@
+export function FormReview({ show, onClose }) {
+  return (
+    <>
+      <div
+        id="backgroundPopup"
+        className={`${show ? "active" : ""}`}
+        onClick={onClose}
+      ></div>
+      <div
+        className={`box-form-review fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px] ${
+          show ? "" : "hidden"
+        }`}
+        id="js-box-review"
+      >
+        <div className="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
+          <b className="text-center text-xl block">Đánh giá sản phẩm</b>
+          <a
+            href="javascript:void(0)"
+            onClick={onClose}
+            id="js-close-review"
+            className="absolute right-0 top-0 text-[#808080] text-[22px] "
+          >
+            <i class="icon_2025 close"></i>
+          </a>
+        </div>
+        <div className="info-form-review w-[500px] mx-[auto]">
+          <a
+            href=""
+            className="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
+          >
+            <img
+              src="/assets/images/small-product-detail.png"
+              width="100%"
+              height="100%"
+              className="block w-[100px] h-[100px] m-[0_auto]"
+              alt=""
+            />
+          </a>
+          <a href="" className="text-center block mb-[10px]">
+            Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD)
+            - Hàng Chính Hãng
+          </a>
+
+          <div className="flex justify-center">
+            <div className="rating-selection">
+              <input
+                type="radio"
+                className="rating-input"
+                id="star5"
+                name="rating"
+                value="5"
+              />
+              <label for="star5" className="rating-star"></label>
+
+              <input
+                type="radio"
+                className="rating-input"
+                id="star4"
+                name="rating"
+                value="4"
+              />
+              <label for="star4" className="rating-star"></label>
+
+              <input
+                type="radio"
+                className="rating-input"
+                id="star3"
+                name="rating"
+                value="3"
+              />
+              <label for="star3" className="rating-star"></label>
+
+              <input
+                type="radio"
+                className="rating-input"
+                id="star2"
+                name="rating"
+                value="2"
+              />
+              <label for="star2" className="rating-star"></label>
+
+              <input
+                type="radio"
+                className="rating-input"
+                id="star1"
+                name="rating"
+                value="1"
+              />
+              <label for="star1" className="rating-star"></label>
+            </div>
+          </div>
+          <div className="clearfix"></div>
+        </div>
+        <div className="form-input mt-[20px]">
+          <input
+            type="text"
+            name="title"
+            placeholder="Mời bạn nhập tiêu đề..."
+          />
+          <div className="note-error"></div>
+        </div>
+        <div className="form-input mt-[10px]">
+          <textarea
+            name="content"
+            placeholder="Mời bạn chia sẻ cảm nhận..."
+            id=""
+          ></textarea>
+          <div className="note-error"></div>
+        </div>
+        <input id="js-file-upload-id" type="hidden" value="" />
+        <div id="js-container-selector" className="mt-[10px] flex items-center">
+          <a
+            href="javascript:void(0)"
+            className="flex items-center"
+            id="js-select-file"
+          >
+            <i className="icon_2025 upload_image"></i>
+            <span className="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
+            <span className="px-[5px]">(tối đa 3 ảnh)</span>
+          </a>
+        </div>
+
+        <button
+          type="submit"
+          className="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]"
+        >
+          Gửi đánh giá
+        </button>
+      </div>
+    </>
+  );
+}
--- a/old/src/components/product/MemberReview.tsx
+++ b/old/src/components/product/MemberReview.tsx
@@ -0,0 +1,311 @@
+import { useState } from "react";
+import { FormReview } from "../../components/product/FormReview";
+
+export function MemberReview() {
+  const [showForm, setShowForm] = useState(false);
+
+  return (
+    <>
+      <div className="p-[15px] bg-white mt-5 rounded-[8px]">
+        <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
+          <h3 className="text-xl font-bold">Thành viên BestPC đánh giá</h3>
+          <div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
+            <select
+              name=""
+              id=""
+              className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
+            >
+              <option value="">Top review</option>
+              <option value="">Review mới nhất</option>
+            </select>
+            <i className="icon_2025 angle-right  ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
+          </div>
+        </div>
+        <div className="flex gap-[25px]">
+          <div className="left w-[20%]">
+            <b className="text-center block pt-[20px] pb-[5px] text-2xl">
+              54 đánh giá
+            </b>
+            <div className="flex items-center justify-center">
+              <i className="icon-star star4"></i>
+              <span className="ml-[5px] mt-[3px]">4.8</span>
+            </div>
+            <div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
+              <div className="flex items-center justify-between mb-[10px]">
+                <i className="icon-star star5"></i>
+                <span>50 đánh giá</span>
+              </div>
+              <div className="flex items-center justify-between mb-[10px]">
+                <i className="icon-star star4"></i>
+                <span>50 đánh giá</span>
+              </div>
+              <div className="flex items-center justify-between mb-[10px]">
+                <i className="icon-star star3"></i>
+                <span>50 đánh giá</span>
+              </div>
+              <div className="flex items-center justify-between mb-[10px]">
+                <i className="icon-star star2"></i>
+                <span>50 đánh giá</span>
+              </div>
+              <div className="flex items-center justify-between mb-[10px]">
+                <i className="icon-star star1"></i>
+                <span>50 đánh giá</span>
+              </div>
+            </div>
+
+            <div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
+              <p className="text-center mt-[10px]">
+                Đánh giá của bạn về sản phẩm
+              </p>
+              <a
+                href="javascript:void(0)"
+                id="js-show-form"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowForm(true);
+                }}
+                className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
+              >
+                Gửi đánh giá của bạn về sản phẩm
+              </a>
+            </div>
+          </div>
+          <div className="right w-[80%]">
+            <div className="list-review mt-[15px]">
+              <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+                <div className="w-[80px] mr-[20px]">
+                  <img
+                    src="/assets/images/avartar-review-1.png"
+                    width="75px"
+                    height="75px"
+                    alt="avartar"
+                  />
+                  <div className="time mt-[10px]">
+                    <b className="mb-[2px] text-center block">Dino</b>
+                    <p className="text-center">10:00pm 20/02/2025</p>
+                  </div>
+                </div>
+                <div className="w-[calc(100%-100px)]">
+                  <div className="flex items-center mb-[5px]">
+                    <i className="icon-star star4"></i>
+                    <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
+                  </div>
+                  <p className="content mb-[5px]">
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the industry's
+                    standard dummy text ever since the 1500s, when an unknown
+                    printer took a galley of type and scrambled it to make a
+                    type specimen book. I
+                  </p>
+                  <div className="flex items-center mb-[10px]">
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      data-fancybox="gallery"
+                      className="w-[80px] block mr-[10px]"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      className="w-[80px] block mr-[10px]"
+                      data-fancybox="gallery"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      className="w-[80px] block mr-[10px]"
+                      data-fancybox="gallery"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                  </div>
+                  <div className="btn">
+                    <a
+                      href="javascript:void(0)"
+                      className="text-[#1877F2] mr-[10px]"
+                    >
+                      Bình luận{" "}
+                      <span className="ml-[3px] text-black">(23)</span>
+                    </a>
+                    <a href="javascript:void(0)" className="text-[#1877F2]">
+                      Thích <span className="ml-[3px] text-black">(23)</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+                <div className="w-[80px] mr-[20px]">
+                  <img
+                    src="/assets/images/avartar-review-2.png"
+                    width="75px"
+                    height="75px"
+                    alt="avartar"
+                  />
+                  <div className="time mt-[10px]">
+                    <b className="mb-[2px] text-center block">Dino</b>
+                    <p className="text-center">10:00pm 20/02/2025</p>
+                  </div>
+                </div>
+                <div className="w-[calc(100%-100px)]">
+                  <div className="flex items-center mb-[5px]">
+                    <i className="icon-star star4"></i>
+                    <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
+                  </div>
+                  <p className="content mb-[5px]">
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the industry's
+                    standard dummy text ever since the 1500s, when an unknown
+                    printer took a galley of type and scrambled it to make a
+                    type specimen book. I
+                  </p>
+                  <div className="flex items-center mb-[10px]">
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      data-fancybox="gallery"
+                      className="w-[80px] block mr-[10px]"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      className="w-[80px] block mr-[10px]"
+                      data-fancybox="gallery"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      className="w-[80px] block mr-[10px]"
+                      data-fancybox="gallery"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                  </div>
+                  <div className="btn">
+                    <a
+                      href="javascript:void(0)"
+                      className="text-[#1877F2] mr-[10px]"
+                    >
+                      Bình luận{" "}
+                      <span className="ml-[3px] text-black">(23)</span>
+                    </a>
+                    <a href="javascript:void(0)" className="text-[#1877F2]">
+                      Thích <span className="ml-[3px] text-black">(23)</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+                <div className="w-[80px] mr-[20px]">
+                  <img
+                    src="/assets/images/avartar-review-3.png"
+                    width="75px"
+                    height="75px"
+                    alt="avartar"
+                  />
+                  <div className="time mt-[10px]">
+                    <b className="mb-[2px] text-center block">Dino</b>
+                    <p className="text-center">10:00pm 20/02/2025</p>
+                  </div>
+                </div>
+                <div className="w-[calc(100%-100px)]">
+                  <div className="flex items-center mb-[5px]">
+                    <i className="icon-star star4"></i>
+                    <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
+                  </div>
+                  <p className="content mb-[5px]">
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the industry's
+                    standard dummy text ever since the 1500s, when an unknown
+                    printer took a galley of type and scrambled it to make a
+                    type specimen book. I
+                  </p>
+                  <div className="flex items-center mb-[10px]">
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      data-fancybox="gallery"
+                      className="w-[80px] block mr-[10px]"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      className="w-[80px] block mr-[10px]"
+                      data-fancybox="gallery"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                    <a
+                      href="/src/assets/images/small-product-detail.png"
+                      className="w-[80px] block mr-[10px]"
+                      data-fancybox="gallery"
+                    >
+                      <img
+                        src="/assets/images/small-product-detail.png"
+                        className="w-[100%] block"
+                        alt=""
+                      />
+                    </a>
+                  </div>
+                  <div className="btn">
+                    <a
+                      href="javascript:void(0)"
+                      className="text-[#1877F2] mr-[10px]"
+                    >
+                      Bình luận{" "}
+                      <span className="ml-[3px] text-black">(23)</span>
+                    </a>
+                    <a href="javascript:void(0)" className="text-[#1877F2]">
+                      Thích <span className="ml-[3px] text-black">(23)</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/*  end list review */}
+            <a
+              href="javascript:void(0)"
+              className="pt-[15px] text-[#FF7A00] btn-more-review"
+            >
+              Xem thêm <span>23</span> bình luận khác
+            </a>
+          </div>
+        </div>
+      </div>
+      <FormReview show={showForm} onClose={() => setShowForm(false)} />
+    </>
+  );
+}
--- a/old/src/components/product/ProductDescription.tsx
+++ b/old/src/components/product/ProductDescription.tsx
@@ -0,0 +1,447 @@
+import { useState, useEffect, useRef } from "react";
+import { Fancybox } from "@fancyapps/ui";
+import "@fancyapps/ui/dist/fancybox/fancybox.css";
+
+export function ProductDescription() {
+  const [isContentExpanded, setContentExpanded] = useState(false);
+  const contentRef = useRef(null);
+  const moreAllRef = useRef(null);
+
+  useEffect(() => {
+    const content = contentRef.current;
+    if (content && content.scrollHeight >= 580) {
+      moreAllRef.current.style.display = "flex";
+      content.style.height = "580px";
+    }
+
+    Fancybox.bind('[data-fancybox="gallery"]');
+  }, []);
+
+  const toggleContent = () => {
+    setContentExpanded((prevState) => !prevState);
+    const content = contentRef.current;
+    content.classList.toggle("active");
+
+    if (isContentExpanded) {
+      window.scrollTo({
+        top: content.getBoundingClientRect().top + window.scrollY - 200,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return (
+    <div className="product-information mt-5">
+      <div className="flex gap-[15px]">
+        <div className="left w-[60%]">
+          <div className="box-desc bg-white p-[12px] rounded-[8px]">
+            <h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
+              Thông tin sản phẩm
+            </h3>
+            <div id="content-desciption">
+              <div className="content nd" ref={contentRef}>
+                <p style="text-align: justify;">
+                  <strong>Laptop HP Victus 16 R0376TX AY8Z2PA</strong> sở hữu
+                  chip xử lý Intel Core i7 13700HX cùng VGA RTX 3050 6GB để có
+                  được trải nghiệm chơi game, làm việc hiệu quả. Mẫu{" "}
+                  <a
+                    href="https://cellphones.com.vn/laptop/hp/victus.html"
+                    title="HP Victus"
+                    target="_blank"
+                  >
+                    <strong>HP Victus</strong>
+                  </a>{" "}
+                  này còn được trang bị màn hình 16 inch FHD 165Hz giúp tái tạo
+                  hình ảnh sắc nét, mượt mà. Kèm theo đó là thiết kế bền bỉ,
+                  hiện đại để có thể sử dụng ở nhiều không gian.
+                </p>
+
+                <h2
+                  style="scroll-margin : 154px;"
+                  id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong"
+                >
+                  <strong>
+                    Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ,
+                    hiển thị ấn tượng
+                  </strong>
+                </h2>
+                <p style="text-align: justify;">
+                  HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card đồ họa
+                  rời mạnh mẽ sẽ mang tới trải nghiệm chơi game, làm việc mượt
+                  mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm nổi bật mà mẫu
+                  laptop gaming của
+                  <strong> HP Victus </strong> này sở hữu trong bài viết sau.
+                </p>
+                <h3
+                  style="scroll-margin : 154px;"
+                  id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx"
+                >
+                  <strong>
+                    {" "}
+                    Nâng cao hiệu suất xử lý với chip&nbsp;Core i7 13700HX
+                  </strong>
+                </h3>
+                <p style="text-align: justify;">
+                  Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị con chip xử
+                  lý Core i7 13700HX của Intel. Con chip Core i7 16 lõi, 24
+                  luồng này sở hữu khả năng ép xung cực đại lên tới 5GHz để luôn
+                  có thể xử lý dữ liệu trong thời gian ngắn. Với bộ nhớ đệm
+                  30MB, hiệu suất xử lý các tác vụ phức tạp của laptop sẽ được
+                  giảm đi đáng kể.
+                </p>
+                <p style="text-align: justify;">
+                  <img
+                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
+                    alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA"
+                    loading="lazy"
+                  />
+                </p>
+                <p style="text-align: justify;">
+                  Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị cho phiên
+                  bản{" "}
+                  <a
+                    href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
+                    title="laptop Victus 16"
+                    target="_blank"
+                  >
+                    <strong>laptop Victus 16</strong>
+                  </a>
+                  này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ vậy
+                  mà người dùng có thể tự tin trải nghiệm các tựa game với mức
+                  cấu hình cao. Không dừng ở đó, các nhu cầu chỉnh sửa hình ảnh,
+                  dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện
+                  mượt mà.
+                </p>
+                <h3
+                  style="scroll-margin : 154px;"
+                  id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon"
+                >
+                  <strong>
+                    {" "}
+                    Tích hợp ổ cứng tốc độ cao cùng dung lượng RAM lớn{" "}
+                  </strong>
+                </h3>
+                <p style="text-align: justify;">
+                  HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2 thanh RAM
+                  chuẩn DDR5 có tốc độ bus lên tới 4800MT/s. Với tổng dung lượng
+                  RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng tốt nhu cầu đa
+                  nhiệm. Không chỉ các tác vụ cơ bản mà nhu cầu đa nhiệm nâng
+                  cao trong công việc cũng sẽ được thực hiện mượt mà mà không
+                  cần phải nâng cấp cấu hình. Ngoài ra, laptop HP Victus 16
+                  R0376TX AY8Z2PA còn sở hữu một ổ cứng SSD tốc độ cao có dung
+                  lượng 512GB.&nbsp;
+                </p>
+                <p style="text-align: justify;">
+                  <img
+                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
+                    alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA"
+                    loading="lazy"
+                  />
+                </p>
+                <h3
+                  style="scroll-margin : 154px;"
+                  id="thiet-ke-hien-dai-ben-bi"
+                >
+                  <strong> Thiết kế hiện đại, bền bỉ </strong>
+                </h3>
+                <p style="text-align: justify;">
+                  Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế hướng tới
+                  phong cách hiện đại, tối giản. Tuy vậy nhưng sản phẩm vẫn mang
+                  đậm dấu ấn gaming với tông màu đen thu hút và mạnh mẽ. Kèm
+                  theo đó là một tổng thể chắc chắn, bền bỉ cùng phần bản lề
+                  kích thước lớn.
+                </p>
+                <p style="text-align: justify;">
+                  Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể tiện lợi
+                  mang theo phiên bản laptop HP Victus này mà không gặp bất
+                  tiện. So với các mẫu laptop gaming khác, đây được coi là một
+                  điểm cộng giúp sản phẩm đáp ứng nhu cầu chơi game ở nhiều
+                  không gian của người dùng.
+                </p>
+                <p style="text-align: justify;">
+                  <img
+                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
+                    alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA"
+                    loading="lazy"
+                  />
+                </p>
+                <p style="text-align: justify;">
+                  Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP đã trang bị
+                  cho laptop Victus 16 R0376TX AY8Z2PA bộ bàn phím Full-size.
+                  Với phần bàn phím số riêng biệt, người dùng sẽ cải thiện được
+                  tốc độ nhập liệu trong khi làm việc. Bàn phím của laptop còn
+                  được tích hợp hệ thống đèn nền RGB 1 để hỗ trợ việc gõ phím
+                  trong điều kiện thiếu sáng.
+                </p>
+                <h3
+                  style="scroll-margin : 154px;"
+                  id="hien-thi-sac-net-va-muot-ma"
+                >
+                  <strong> Hiển thị sắc nét và mượt mà </strong>
+                </h3>
+                <p style="text-align: justify;">
+                  Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không giản hiển thị
+                  cực lớn khi được trang bị màn hình có kích thước 16.1 inch.
+                  Kèm theo đó là độ phân giải FHD (1920 x 1080p) giúp nội dung
+                  hiển thị luôn có được độ rõ nét. Nhờ việc sử dụng tấm nền IPS,
+                  người dùng còn có thể điều chỉnh góc nghiêng linh hoạt mà
+                  không gây ảnh hưởng tới chất lượng hình ảnh.
+                </p>
+                <p style="text-align: justify;">
+                  <img
+                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
+                    alt="Hiển thị sắc nét và mượt mà"
+                    loading="lazy"
+                  />
+                </p>
+                <p style="text-align: justify;">
+                  Điểm nổi bật có trên màn hình HP Victus 16 R0376TX AY8Z2PA
+                  chính là tần số quét và độ phủ màu. Với độ phủ màu 100% sRGB,
+                  mẫu laptop gaming HP này sẽ hỗ trợ người dùng làm các công
+                  việc liên quan tới sáng tạo hiệu quả. Tần số quét ở mức 165Hz
+                  sẽ giúp màn hình tái hiện các chuyển động một cách uyển
+                  chuyển, mượt mà.
+                </p>
+                <p style="text-align: justify;">
+                  Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn được phủ
+                  lớp chống chói và có độ sáng 300 nits để thoải mái sử dụng ở
+                  những nơi có ánh sáng mạnh. Với chuẩn Low Blue Light, màn hình
+                  còn giảm thiểu lượng ánh sáng xanh phát ra để hạn chế tình
+                  trạng mỏi mắt khi sử dụng laptop trong thời gian dài.
+                </p>
+                <h3
+                  style="scroll-margin : 154px;"
+                  id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh"
+                >
+                  <strong>
+                    {" "}
+                    Thời lượng pin dài, kết nối phong phú và ổn định{" "}
+                  </strong>
+                </h3>
+                <p style="text-align: justify;">
+                  Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị viên pin
+                  Li-ion Polymer 4-cell có dung lượng ở mức 70Wh. Với dung lượng
+                  này, viên pin có thể duy trì trạng thái hoạt động cho laptop
+                  lên tới nhiều giờ với các tác vụ hỗn hợp. Laptop còn được
+                  trang bị bộ nguồn 200W Smart AC power adapter để hỗ trợ sạc
+                  pin nhanh 50% trong khoảng 30 phút.
+                </p>
+                <p style="text-align: justify;">
+                  <img
+                    src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
+                    alt="Thời lượng pin dài, kết nối phong phú và ổn định"
+                    loading="lazy"
+                  />
+                </p>
+                <p style="text-align: justify;">
+                  Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu, HP còn
+                  trang bị cho mẫu laptop Victus của hàng đầy đủ các cổng kết
+                  nối thông dụng. Hai cạnh bên laptop được tích hợp các cổng USB
+                  Type-A, USB Type-C, RJ-45, HDMI 2.1, jack audio 3.5mm và bộ
+                  chuyển đổi điện xoay chiều thông minh.
+                </p>
+                <p style="text-align: justify;">
+                  Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị card
+                  wireless Bluetooth 5.3 và Intel Wi-Fi 6E AX211 (2x2). Điều này
+                  sẽ đảm bảo được khả năng kết nối với các thiết bị ngoại vi,
+                  kết nối mạng ổn định, nhanh chóng cho laptop.
+                </p>
+                <h2
+                  style="scroll-margin : 154px;"
+                  id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones"
+                >
+                  <strong>
+                    {" "}
+                    Mua laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại
+                    CellphoneS{" "}
+                  </strong>
+                </h2>
+
+                <ul>
+                  <li>
+                    Hãy tới ngay các cửa hàng CellphoneS trên cả nước để trải
+                    nghiệm và đặt mua{" "}
+                    <strong>Laptop HP Victus 16 R0376TX AY8Z2PA </strong> . Mẫu
+                    laptop gaming HP này còn có mức giá cực kỳ hấp dẫn khi đi
+                    kèm nhiều chương trình ưu đãi, hỗ trợ thu cũ - đổi mới,...
+                  </li>
+                  <li>
+                    Với chính sách hỗ trợ trả góp lãi suất thấp, khách hàng sẽ
+                    còn dễ dàng sở hữu và trải nghiệm chiếc laptop này. Ngoài
+                    ra, CellphoneS còn hỗ trợ giao hàng toàn quốc để khách hàng
+                    tiện lợi đặt mua dù ở nơi đâu.
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <a
+              href="javascript:void(0)"
+              ref={moreAllRef}
+              className="more-all js-viewmore-content item-btn flex items-center"
+              onClick={toggleContent}
+            >
+              {isContentExpanded ? (
+                <>
+                  <span>Thu gọn</span>{" "}
+                  <i className="icon_2025 angle-top mt-[10px]"></i>
+                </>
+              ) : (
+                <>
+                  <span>Xem thêm </span>
+                  <i className="icon_2025 angle-bottom"></i>
+                </>
+              )}
+            </a>
+          </div>
+          {/* <!-- end box desc --> */}
+        </div>
+        <div className="right w-[40%]">
+          <div className="box-spec bg-white p-[12px] rounded-[8px]">
+            <h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
+              Thông tin chi tiết
+            </h3>
+
+            <div className="content table">
+              <table width="638">
+                <tbody>
+                  <tr>
+                    <td>Mã sản phẩm</td>
+                    <td>VA3416WC</td>
+                  </tr>
+                  <tr>
+                    <td>Màu sắc</td>
+                    <td>Đen</td>
+                  </tr>
+                  <tr>
+                    <td>Độ sáng</td>
+                    <td>Max 300cd/m²</td>
+                  </tr>
+                  <tr>
+                    <td>Độ tương phản</td>
+                    <td>3000:1</td>
+                  </tr>
+                  <tr>
+                    <td>Màu sắc hiển thị</td>
+                    <td>16.7M</td>
+                  </tr>
+                  <tr>
+                    <td>Màu sắc hỗ trợ</td>
+                    <td>6500K</td>
+                  </tr>
+                  <tr>
+                    <td>Loại màn hình</td>
+                    <td>Cong R1500</td>
+                  </tr>
+                  <tr>
+                    <td>Kích cỡ màn hình</td>
+                    <td>34"</td>
+                  </tr>
+                  <tr>
+                    <td>Tấm nền</td>
+                    <td>VA</td>
+                  </tr>
+                  <tr>
+                    <td>Góc nhìn</td>
+                    <td>89°/89° (H/V)</td>
+                  </tr>
+                  <tr>
+                    <td>Tính năng đặc biệt</td>
+                    <td>
+                      <br />
+                      1. Flicker-Free Backlight adjustment
+                      <br />
+                      2. Dynamic Contrast Ratio: DCR
+                      <br />
+                      3. Adaptive Sync
+                      <br />
+                      4.FPS/RTS
+                      <br />
+                      5.PIP/PBP
+                      <br />
+                      6. PQ
+                      <br />
+                      7. GAME PLUS
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div id="content-specification" className="hidden table">
+              <table width="638">
+                <tbody>
+                  <tr>
+                    <td>Mã sản phẩm</td>
+                    <td>VA3416WC</td>
+                  </tr>
+                  <tr>
+                    <td>Màu sắc</td>
+                    <td>Đen</td>
+                  </tr>
+                  <tr>
+                    <td>Độ sáng</td>
+                    <td>Max 300cd/m²</td>
+                  </tr>
+                  <tr>
+                    <td>Độ tương phản</td>
+                    <td>3000:1</td>
+                  </tr>
+                  <tr>
+                    <td>Màu sắc hiển thị</td>
+                    <td>16.7M</td>
+                  </tr>
+                  <tr>
+                    <td>Màu sắc hỗ trợ</td>
+                    <td>6500K</td>
+                  </tr>
+                  <tr>
+                    <td>Loại màn hình</td>
+                    <td>Cong R1500</td>
+                  </tr>
+                  <tr>
+                    <td>Kích cỡ màn hình</td>
+                    <td>34"</td>
+                  </tr>
+                  <tr>
+                    <td>Tấm nền</td>
+                    <td>VA</td>
+                  </tr>
+                  <tr>
+                    <td>Góc nhìn</td>
+                    <td>89°/89° (H/V)</td>
+                  </tr>
+                  <tr>
+                    <td>Tính năng đặc biệt</td>
+                    <td>
+                      <br />
+                      1. Flicker-Free Backlight adjustment
+                      <br />
+                      2. Dynamic Contrast Ratio: DCR
+                      <br />
+                      3. Adaptive Sync
+                      <br />
+                      4.FPS/RTS
+                      <br />
+                      5.PIP/PBP
+                      <br />
+                      6. PQ
+                      <br />
+                      7. GAME PLUS
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <a
+              href="#content-specification"
+              data-fancybox
+              className="more-all  flex items-center justify-center"
+            >
+              Xem thêm thông số <i className="icon_2025 angle-bottom"></i>
+            </a>
+          </div>
+          {/* <!-- box spec --> */}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/old/src/components/product/ProductReview.tsx
+++ b/old/src/components/product/ProductReview.tsx
@@ -0,0 +1,192 @@
+export function ProductReview() {
+  return (
+    <div className="p-[15px] bg-white mt-5 rounded-[8px]">
+      <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
+        <h3 className="text-xl font-bold">Đánh giá trên internet</h3>
+        <div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
+          <select
+            name=""
+            id=""
+            className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
+          >
+            <option value="">Top review</option>
+            <option value="">Review mới nhất</option>
+          </select>
+          <i className="icon_2025 angle-right  ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
+        </div>
+      </div>
+
+      <div className="flex gap-[25px]">
+        <div className="left w-[20%]">
+          <b className="text-center block pt-[20px] pb-[5px] text-2xl">
+            54 đánh giá
+          </b>
+          <div className="flex items-center justify-center">
+            <i className="icon-star star4"></i>
+            <span className="ml-[5px] mt-[3px]">4.8</span>
+          </div>
+          <div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
+            <div className="flex items-center justify-between mb-[10px]">
+              <span>
+                Hanoicomputer{" "}
+                <a href="" className="ml-[5px] text-[#1877F2]">
+                  (240)
+                </a>
+              </span>
+              <i className="icon-star star5"></i>
+            </div>
+            <div className="flex items-center justify-between mb-[10px]">
+              <span>
+                Anphatpc{" "}
+                <a href="" className="ml-[5px] text-[#1877F2]">
+                  (240)
+                </a>
+              </span>
+              <i className="icon-star star4"></i>
+            </div>
+            <div className="flex items-center justify-between mb-[10px]">
+              <span>
+                Mygear{" "}
+                <a href="" className="ml-[5px] text-[#1877F2]">
+                  (240)
+                </a>
+              </span>
+              <i className="icon-star star3"></i>
+            </div>
+            <div className="flex items-center justify-between mb-[10px]">
+              <span>
+                Hoangphatpc{" "}
+                <a href="" className="ml-[5px] text-[#1877F2]">
+                  (240)
+                </a>
+              </span>
+              <i className="icon-star star2"></i>
+            </div>
+            <div className="flex items-center justify-between mb-[10px]">
+              <span>
+                Phucanhpc{" "}
+                <a href="" className="ml-[5px] text-[#1877F2]">
+                  (240)
+                </a>
+              </span>
+              <i className="icon-star star1"></i>
+            </div>
+          </div>
+
+          <div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
+            <p className="text-center mt-[10px]">
+              Đánh giá của bạn về sản phẩm
+            </p>
+            <a
+              href="javascript:void(0)"
+              className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
+            >
+              Gửi đánh giá của bạn về sản phẩm
+            </a>
+          </div>
+        </div>
+        <div className="right w-[80%]">
+          <div className="list-review mt-[15px]">
+            <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+              <div className="w-[80px] mr-[20px]">
+                <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
+                  Hacom.vn
+                </a>
+                <div className="time mt-[5px]">
+                  <b className="mb-[2px] text-center block">Dino</b>
+                  <p className="text-center">10:00pm 20/02/2025</p>
+                </div>
+              </div>
+              <div className="w-[calc(100%-100px)]">
+                <div className="flex items-center mb-[5px]">
+                  <i className="icon-star star4"></i>
+                  <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
+                </div>
+                <p className="content mb-[5px] text-base">
+                  Lorem Ipsum is simply dummy text of the printing and
+                  typesetting industry. Lorem Ipsum has been the industry's
+                  standard dummy text ever since the 1500s, when an unknown
+                  printer took a galley of type and scrambled it to make a type
+                  specimen book. I
+                </p>
+                <a href="javascript:void(0)" className="flex items-start">
+                  <span className="text-[16px] mr-[7px] underline">
+                    Xem link nguồn
+                  </span>
+                  <i className="icon_2025 link-review"></i>
+                </a>
+              </div>
+            </div>
+            <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+              <div className="w-[80px] mr-[20px]">
+                <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
+                  Hacom.vn
+                </a>
+                <div className="time mt-[5px]">
+                  <b className="mb-[2px] text-center block">Dino</b>
+                  <p className="text-center">10:00pm 20/02/2025</p>
+                </div>
+              </div>
+              <div className="w-[calc(100%-100px)]">
+                <div className="flex items-center mb-[5px]">
+                  <i className="icon-star star4"></i>
+                  <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
+                </div>
+                <p className="content mb-[5px] text-base">
+                  Lorem Ipsum is simply dummy text of the printing and
+                  typesetting industry. Lorem Ipsum has been the industry's
+                  standard dummy text ever since the 1500s, when an unknown
+                  printer took a galley of type and scrambled it to make a type
+                  specimen book. I
+                </p>
+                <a href="javascript:void(0)" className="flex items-start">
+                  <span className="text-[16px] mr-[7px] underline">
+                    Xem link nguồn
+                  </span>
+                  <i className="icon_2025 link-review"></i>
+                </a>
+              </div>
+            </div>
+            <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+              <div className="w-[80px] mr-[20px]">
+                <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
+                  Hacom.vn
+                </a>
+                <div className="time mt-[5px]">
+                  <b className="mb-[2px] text-center block">Dino</b>
+                  <p className="text-center">10:00pm 20/02/2025</p>
+                </div>
+              </div>
+              <div className="w-[calc(100%-100px)]">
+                <div className="flex items-center mb-[5px]">
+                  <i className="icon-star star4"></i>
+                  <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
+                </div>
+                <p className="content mb-[5px] text-base">
+                  Lorem Ipsum is simply dummy text of the printing and
+                  typesetting industry. Lorem Ipsum has been the industry's
+                  standard dummy text ever since the 1500s, when an unknown
+                  printer took a galley of type and scrambled it to make a type
+                  specimen book. I
+                </p>
+                <a href="javascript:void(0)" className="flex items-start">
+                  <span className="text-[16px] mr-[7px] underline">
+                    Xem link nguồn
+                  </span>
+                  <i className="icon_2025 link-review"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          {/* end list review */}
+          <a
+            href="javascript:void(0)"
+            className="pt-[15px] text-[#FF7A00] btn-more-review"
+          >
+            Xem thêm <span>23</span> bình luận khác
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/old/src/components/product/SupplierListBox.tsx
+++ b/old/src/components/product/SupplierListBox.tsx
@@ -0,0 +1,258 @@
+export function SupplierListBox() {
+  return (
+    <div className="p-[15px] bg-white mt-5 rounded-[8px]">
+      <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
+        <h3 className="text-xl font-bold">
+          Nhà cung cấp trên BestPC - Tại Hà Nội
+        </h3>
+        <div className="flex items-center">
+          <div className="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
+            <i className="icon_2025 map-2"></i>
+            <input
+              type="text"
+              placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
+              className="outline-none ml-[5px] h-full w-full"
+            />
+          </div>
+          <div className="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
+            <select
+              name=""
+              id=""
+              className=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
+            >
+              <option value="">Sắp xếp</option>
+              <option value="">Mới</option>
+            </select>
+            <i className="icon_2025 angle-right  ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
+        <div>
+          <b>Nhà cung cấp</b>
+        </div>
+        <div>
+          <b>Chính sách vận chuyển</b>
+        </div>
+        <div>
+          <b>Giá</b>
+        </div>
+        <div>
+          <b>Sản phẩm</b>
+        </div>
+      </div>
+
+      <div className="list ">
+        <div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
+          <div className="flex items-start supplier">
+            <div className="logo mr-[10px]">
+              <div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
+                <img
+                  src="/assets/images/logo-hacom.png"
+                  className="block w-full h-full object-contain m-[0_auto]"
+                  width="100%"
+                  height="100%"
+                  alt="hacom"
+                />
+              </div>
+              <div className="flex items-center justify-center mt-2">
+                <i className="icon_2025 map-4"></i>
+                <span className="ml-[5px]">3km</span>
+              </div>
+            </div>
+            <div>
+              <div className="flex items-center">
+                <i className="icon-star star4"></i>
+                <span className="ml-[5px] mt-[3px]">4.7</span>
+              </div>
+              <a href="" className="text-[#1877F2] font-bold">
+                Hanoicomputer
+              </a>
+              <a href="" className="text-[#E85933] underline block">
+                Xem 7 cửa hàng
+              </a>
+            </div>
+          </div>
+
+          <div className="ship">
+            <p>Miễn phí giao hàng</p>
+            <p>
+              Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
+              ngày thứ 7, CN
+            </p>
+          </div>
+
+          <div className="price">
+            <div className="flex items-center text-base">
+              <span>Giá:</span>
+              <b className="ml-[5px] text-[#D80A00]">
+                9.000.000đ - 20.000.000đ
+              </b>
+            </div>
+            <b className="mt-2">Đã có VAT</b>
+          </div>
+
+          <div className="">
+            <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
+              8GB - 9.000.000đ new White
+            </p>
+            <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
+              8GB - 9.000.000đ new White
+            </p>
+          </div>
+          <div>
+            <a
+              href=""
+              className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
+            >
+              Liên hệ ngay
+            </a>
+          </div>
+        </div>
+
+        <div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
+          <div className="flex items-start supplier">
+            <div className="logo mr-[10px]">
+              <div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
+                <img
+                  src="/assets/images/logo-hacom.png"
+                  className="block w-full h-full object-contain m-[0_auto]"
+                  width="100%"
+                  height="100%"
+                  alt="hacom"
+                />
+              </div>
+              <div className="flex items-center justify-center mt-2">
+                <i className="icon_2025 map-4"></i>
+                <span className="ml-[5px]">3km</span>
+              </div>
+            </div>
+            <div>
+              <div className="flex items-center">
+                <i className="icon-star star4"></i>
+                <span className="ml-[5px] mt-[3px]">4.7</span>
+              </div>
+              <a href="" className="text-[#1877F2] font-bold">
+                Hanoicomputer
+              </a>
+              <a href="" className="text-[#E85933] underline block">
+                Xem 7 cửa hàng
+              </a>
+            </div>
+          </div>
+
+          <div className="ship">
+            <p>Miễn phí giao hàng</p>
+            <p>
+              Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
+              ngày thứ 7, CN
+            </p>
+          </div>
+
+          <div className="price">
+            <div className="flex items-center text-base">
+              <span>Giá:</span>
+              <b className="ml-[5px] text-[#D80A00]">
+                9.000.000đ - 20.000.000đ
+              </b>
+            </div>
+            <b className="mt-2">Đã có VAT</b>
+          </div>
+
+          <div className="">
+            <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
+              8GB - 9.000.000đ new White
+            </p>
+            <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
+              8GB - 9.000.000đ new White
+            </p>
+          </div>
+          <div>
+            <a
+              href=""
+              className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
+            >
+              Liên hệ ngay
+            </a>
+          </div>
+        </div>
+
+        <div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
+          <div className="flex items-start supplier">
+            <div className="logo mr-[10px]">
+              <div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
+                <img
+                  src="/assets/images/logo-hacom.png"
+                  className="block w-full h-full object-contain m-[0_auto]"
+                  width="100%"
+                  height="100%"
+                  alt="hacom"
+                />
+              </div>
+              <div className="flex items-center justify-center mt-2">
+                <i className="icon_2025 map-4"></i>
+                <span className="ml-[5px]">3km</span>
+              </div>
+            </div>
+            <div>
+              <div className="flex items-center">
+                <i className="icon-star star4"></i>
+                <span className="ml-[5px] mt-[3px]">4.7</span>
+              </div>
+              <a href="" className="text-[#1877F2] font-bold">
+                Hanoicomputer
+              </a>
+              <a href="" className="text-[#E85933] underline block">
+                Xem 7 cửa hàng
+              </a>
+            </div>
+          </div>
+
+          <div className="ship">
+            <p>Miễn phí giao hàng</p>
+            <p>
+              Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
+              ngày thứ 7, CN
+            </p>
+          </div>
+
+          <div className="price">
+            <div className="flex items-center text-base">
+              <span>Giá:</span>
+              <b className="ml-[5px] text-[#D80A00]">
+                9.000.000đ - 20.000.000đ
+              </b>
+            </div>
+            <b className="mt-2">Đã có VAT</b>
+          </div>
+
+          <div className="">
+            <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
+              8GB - 9.000.000đ new White
+            </p>
+            <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
+              8GB - 9.000.000đ new White
+            </p>
+          </div>
+          <div>
+            <a
+              href=""
+              className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
+            >
+              Liên hệ ngay
+            </a>
+          </div>
+        </div>
+      </div>
+      {/*  end list */}
+
+      <a
+        href=""
+        className="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
+      >
+        Xem thêm
+      </a>
+    </div>
+  );
+}
--- a/old/src/index.tsx
+++ b/old/src/index.tsx
@@ -0,0 +1,31 @@
+import { render } from "preact";
+import { LocationProvider, Router, Route } from "preact-iso";
+import { Header } from "./components/header/Header";
+import { Footer } from "./components/footer/Footer";
+import { Home } from "./pages/Home/index.jsx";
+import { ProductDetail } from "./pages/product/ProductDetail";
+import { Buildpc } from "./pages/buildpc/Buildpc";
+import { CompareBuildpc } from "./pages/buildpc/CompareBuildpc";
+import { DetailBuildpc } from "./pages/buildpc/DetailBuildpc";
+import { NotFound } from "./pages/_404.jsx";
+
+export function App() {
+  return (
+    <LocationProvider>
+      <main>
+        <Header />
+        <Router>
+          <Route path="/" component={Home} />
+          <Route path="/product-detail" component={ProductDetail} />
+          <Route path="/buildpc" component={Buildpc} />
+          <Route path="/buildpc/compare" component={CompareBuildpc} />
+          <Route path="/buildpc/detail" component={DetailBuildpc} />
+          <Route default component={NotFound} />
+        </Router>
+        <Footer />
+      </main>
+    </LocationProvider>
+  );
+}
+
+render(<App />, document.getElementById("root"));
--- a/old/src/pages/Home/index.tsx
+++ b/old/src/pages/Home/index.tsx
--- a/old/src/pages/_404.tsx
+++ b/old/src/pages/_404.tsx
@@ -0,0 +1,8 @@
+export function NotFound() {
+	return (
+		<section>
+			<h1>404: Not Found</h1>
+			<p>It's gone :(</p>
+		</section>
+	);
+}
--- a/old/src/pages/buildpc/Buildpc.tsx
+++ b/old/src/pages/buildpc/Buildpc.tsx
@@ -0,0 +1,112 @@
+import { CreateBuildpc } from "../../components/buildpc/CreateBuildpc";
+
+export function Buildpc() {
+  return (
+    <div className="page-buildpc bg-[#F4F4F4] pb-[100px]">
+      <div className="container">
+        <div className="breadcrumb p-[12px_0]">
+          <ol
+            itemscope
+            itemtype="http://schema.org/BreadcrumbList"
+            className="ul flex flex-wrap items-center"
+          >
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a
+                href="/template/homepage/homepage.html"
+                itemprop="item"
+                className="nopad-l flex items-center text-[#637381]"
+              >
+                <span itemprop="name">
+                  <span style="font-size: 0; display: none;">Trang chủ</span>
+                  <i className="icon_2025 home mr-[5px] mb-[5px]" />
+                </span>
+              </a>{" "}
+              <i className="icon_2025 angle-right ml-[12px]" />
+              <meta itemprop="position" content="1" />
+            </li>
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a href="/" itemprop="item" className="nopad-l flex items-center">
+                <span itemprop="name">Tạo máy tính riêng của bạn</span>
+              </a>
+              <meta itemprop="position" content="2" />
+            </li>
+          </ol>
+        </div>
+        {/* <!-- Action Bar --> */}
+        <div className="grid grid-cols-10  gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
+          <div className="col-span-4 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
+            <a className="w-[24px] ml-[10px]" href="javascript:void()">
+              <i className="icon_2025 copy"></i>
+            </a>
+            <input
+              type="text"
+              className="w-full h-full p-[10px] outline-none"
+              value="https://bestpc.vn/restricted.php"
+            />
+          </div>
+          <div className="col-span-3 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
+            <p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
+            <input
+              type="text"
+              className="w-full h-full p-[10px] outline-none"
+              value=""
+            />
+          </div>
+          <div className="grid grid-cols-3 gap-[10px] col-span-3">
+            <a
+              href="javascript:void(0)"
+              className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
+            >
+              <i className="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
+              <span className="ml-[5px]">Lịch sử</span>
+            </a>
+            <a
+              href="javascript:void(0)"
+              className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
+            >
+              <i className="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
+              <span className="ml-[5px]">Tải xuống</span>
+            </a>
+            <a
+              href="javascript:void(0)"
+              className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
+            >
+              <i className="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
+              <span className="ml-[5px]">Làm mới</span>
+            </a>
+          </div>
+        </div>
+
+        <div className="bg-white p-[15px]">
+          <div className="flex items-center gap-2">
+            <a
+              href="/buildpc"
+              className="px-6 py-2.5 text-center font-bold text-white bg-violet-900 rounded"
+            >
+              Bắt đầu tạo
+            </a>
+            <a
+              href="/buildpc/compare"
+              className="px-6 py-2.5 text-center font-bold  text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900"
+            >
+              So sánh giá tại các cửa hàng
+            </a>
+          </div>
+          {/* <!-- list button --> */}
+
+          <CreateBuildpc />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/old/src/pages/buildpc/CompareBuildpc.tsx
+++ b/old/src/pages/buildpc/CompareBuildpc.tsx
@@ -0,0 +1,112 @@
+import { ListCompare } from "../../components/buildpc/ListCompare";
+
+export function CompareBuildpc() {
+  return (
+    <div className="page-buildpc bg-[#F4F4F4] pb-[100px]">
+      <div className="container">
+        <div className="breadcrumb p-[12px_0]">
+          <ol
+            itemscope
+            itemtype="http://schema.org/BreadcrumbList"
+            className="ul flex flex-wrap items-center"
+          >
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a
+                href="/template/homepage/homepage.html"
+                itemprop="item"
+                className="nopad-l flex items-center text-[#637381]"
+              >
+                <span itemprop="name">
+                  <span style="font-size: 0; display: none;">Trang chủ</span>
+                  <i className="icon_2025 home mr-[5px] mb-[5px]" />
+                </span>
+              </a>{" "}
+              <i className="icon_2025 angle-right ml-[12px]" />
+              <meta itemprop="position" content="1" />
+            </li>
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a href="/" itemprop="item" className="nopad-l flex items-center">
+                <span itemprop="name">So sánh giá tại các cửa hàng</span>
+              </a>
+              <meta itemprop="position" content="2" />
+            </li>
+          </ol>
+        </div>
+        {/* <!-- Action Bar --> */}
+        <div className="grid grid-cols-10 gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
+          <div className="col-span-4 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
+            <a className="w-[24px] ml-[10px]" href="javascript:void()">
+              <i className="icon_2025 copy"></i>
+            </a>
+            <input
+              type="text"
+              className="w-full h-full p-[10px] outline-none"
+              value="https://bestpc.vn/restricted.php"
+            />
+          </div>
+          <div className="col-span-3 h-[48px] rounded border border-solid border-neutral-200 flex items-center">
+            <p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
+            <input
+              type="text"
+              className="w-full h-full p-[10px] outline-none"
+              value=""
+            />
+          </div>
+          <div className="grid grid-cols-3 gap-[10px] col-span-3">
+            <a
+              href="javascript:void(0)"
+              className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
+            >
+              <i className="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
+              <span className="ml-[5px]">Lịch sử</span>
+            </a>
+            <a
+              href="javascript:void(0)"
+              className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
+            >
+              <i className="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
+              <span className="ml-[5px]">Tải xuống</span>
+            </a>
+            <a
+              href="javascript:void(0)"
+              className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
+            >
+              <i className="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
+              <span className="ml-[5px]">Làm mới</span>
+            </a>
+          </div>
+        </div>
+
+        <div className="bg-white p-[15px]">
+          <div className="flex items-center gap-2">
+            <a
+              href="/buildpc"
+              className="px-6 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900"
+            >
+              Bắt đầu tạo
+            </a>
+            <a
+              href="/buildpc/compare"
+              className="px-6 py-2.5 text-center font-bold bg-violet-900 text-white rounded"
+            >
+              So sánh giá tại các cửa hàng
+            </a>
+          </div>
+          {/* <!-- list button --> */}
+
+          <ListCompare />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/old/src/pages/buildpc/DetailBuildpc.tsx
+++ b/old/src/pages/buildpc/DetailBuildpc.tsx
@@ -0,0 +1,424 @@
+import { useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode, Navigation, Thumbs } from "swiper/modules";
+
+export function DetailBuildpc() {
+  const [thumbsSwiper, setThumbsSwiper] = useState(null);
+
+  return (
+    <div className="page-buildpc pb-[100px]">
+      <div className="container">
+        <div className="breadcrumb p-[12px_0]">
+          <ol
+            itemscope
+            itemtype="http://schema.org/BreadcrumbList"
+            className="ul flex flex-wrap items-center"
+          >
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a
+                href="/template/homepage/homepage.html"
+                itemprop="item"
+                className="nopad-l flex items-center text-[#637381]"
+              >
+                <span itemprop="name">
+                  <span style="font-size: 0; display: none;">Trang chủ</span>
+                  <i className="icon_2025 home mr-[5px] mb-[5px]" />
+                </span>
+              </a>{" "}
+              <i className="icon_2025 angle-right ml-[12px]" />
+              <meta itemprop="position" content="1" />
+            </li>
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a href="/" itemprop="item" className="nopad-l flex items-center">
+                <span itemprop="name">Tạo máy tính riêng của bạn</span>
+              </a>{" "}
+              <i className="icon_2025 angle-right  ml-[12px]"></i>
+              <meta itemprop="position" content="2" />
+            </li>
+            <li
+              itemprop="itemListElement"
+              itemscope
+              itemtype="http://schema.org/ListItem"
+              className="flex items-center pr-[12px]"
+            >
+              <a href="/" itemprop="item" className="nopad-l flex items-center">
+                <span itemprop="name">Tham khảo giá sản phẩm</span>
+              </a>
+              <meta itemprop="position" content="3" />
+            </li>
+          </ol>
+        </div>
+
+        <h1 className="text-2xl mb-5 block font-bold">
+          Tham khảo giá sản phẩm
+        </h1>
+
+        <div className="grid grid-cols-3 gap-[20px] mb-[30px]">
+          <div className="col-span-1 p-[15px] rounded-[8px] border border-[#d7d7d7]">
+            <Swiper
+              spaceBetween={10}
+              navigation={true}
+              thumbs={{ swiper: thumbsSwiper }}
+              modules={[FreeMode, Navigation, Thumbs]}
+              className="swiper"
+              id="js-slider-build-big"
+            >
+              <SwiperSlide>
+                <img
+                  src="/assets/images/big-product-detail.png"
+                  className="block w-full h-[400px] object-contain"
+                  alt=""
+                />
+              </SwiperSlide>
+              <SwiperSlide>
+                <img
+                  src="/assets/images/big-product-detail.png"
+                  className="block w-full h-[400px] object-contain"
+                  alt=""
+                />
+              </SwiperSlide>
+              <SwiperSlide>
+                <img
+                  src="/assets/images/big-product-detail.png"
+                  className="block w-full h-[400px] object-contain"
+                  alt=""
+                />
+              </SwiperSlide>
+              <SwiperSlide>
+                <img
+                  src="/assets/images/big-product-detail.png"
+                  className="block w-full h-[400px] object-contain"
+                  alt=""
+                />
+              </SwiperSlide>
+            </Swiper>
+            <div className="relative mt-[12px] w-[80%] mx-[auto]">
+              <Swiper
+                onSwiper={setThumbsSwiper}
+                spaceBetween={10}
+                slidesPerView={3}
+                navigation={{
+                  prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
+                  nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
+                }}
+                freeMode={true}
+                watchSlidesProgress={true}
+                modules={[FreeMode, Navigation, Thumbs]}
+                className="swiper"
+                id="js-slider-build-small"
+              >
+                <SwiperSlide>
+                  <img
+                    src="/assets/images/small-product-detail.png"
+                    className="w-full block h-[80px] object-contain "
+                    alt=""
+                  />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img
+                    src="/assets/images/small-product-detail.png"
+                    className="w-full block h-[80px] object-contain "
+                    alt=""
+                  />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img
+                    src="/assets/images/small-product-detail.png"
+                    className="w-full block h-[80px] object-contain "
+                    alt=""
+                  />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img
+                    src="/assets/images/small-product-detail.png"
+                    className="w-full block h-[80px] object-contain "
+                    alt=""
+                  />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img
+                    src="/assets/images/small-product-detail.png"
+                    className="w-full block h-[80px] object-contain "
+                    alt=""
+                  />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img
+                    src="/assets/images/small-product-detail.png"
+                    className="w-full block h-[80px] object-contain "
+                    alt=""
+                  />
+                </SwiperSlide>
+              </Swiper>
+              <div className="btn-small" id="btn-slider-small">
+                <div className="swiper-button-next right-[-15px] w-[25px]  h-[25px]"></div>
+                <div className="swiper-button-prev left-[-15px] w-[25px]  h-[25px] text-sm"></div>
+              </div>
+            </div>
+
+            <div className="box-review mt-3">
+              <div className="flex items-center justify-center">
+                <b>Người đánh giá</b>
+                <div className="flex items-center ml-[10px]">
+                  (40 ratings, 4.9 <i className="icon-star star-small ml-1"></i>
+                  )
+                </div>
+              </div>
+              <div className="">
+                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
+                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
+                    5 sao
+                  </p>
+                  <div className="relative w-[79%]">
+                    <div className="block w-full h-[11px] bg-gray-500"></div>
+                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                  </div>
+                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
+                    97%
+                  </p>
+                </div>
+                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
+                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
+                    4 sao
+                  </p>
+                  <div className="relative w-[79%]">
+                    <div className="block w-full h-[11px] bg-gray-500"></div>
+                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                  </div>
+                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
+                    97%
+                  </p>
+                </div>
+                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
+                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
+                    3 sao
+                  </p>
+                  <div className="relative w-[79%]">
+                    <div className="block w-full h-[11px] bg-gray-500"></div>
+                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                  </div>
+                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
+                    97%
+                  </p>
+                </div>
+                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
+                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
+                    2 sao
+                  </p>
+                  <div className="relative w-[79%]">
+                    <div className="block w-full h-[11px] bg-gray-500"></div>
+                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                  </div>
+                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
+                    97%
+                  </p>
+                </div>
+                <div className="flex items-center justify-between gap-[10px] w-full mb-1">
+                  <p className="w-[11%] text-[var(--color-hover)] font-bold">
+                    1 sao
+                  </p>
+                  <div className="relative w-[79%]">
+                    <div className="block w-full h-[11px] bg-gray-500"></div>
+                    <div className="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                  </div>
+                  <p className="text-[var(--color-hover)] w-[9%] font-bold">
+                    97%
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2">
+            <div className="grid grid-cols-7 gap-[5px] items-center pb-2.5 border-b-[1px] border-[#ababab]">
+              <b>Nhà cung cấp</b>
+              <b>Giá gốc</b>
+              <b>Khuyến mãi</b>
+              <b>Tình trạng</b>
+              <b>Giao hàng</b>
+              <b className="col-span-2">Thành tiền</b>
+            </div>
+            <div className="list">
+              <div className="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
+                <a href="" className="block">
+                  <img
+                    src="/assets/images/logo-hacom.png"
+                    width="100%"
+                    height="100%"
+                    className="w-full block h-[28px] object-contain"
+                    alt=""
+                  />
+                </a>
+                <div className="price font-bold">3.700.000Vnđ</div>
+                <div className="saleoff text-center font-bold">20%</div>
+                <div className="status text-blue-500 font-bold">Còn hàng</div>
+                <div className="ship underline">Liên hệ</div>
+                <div className="flex items-center justify-between col-span-2">
+                  <div className="total-price font-bold">3.000.000Vnđ</div>
+                  <a
+                    href=""
+                    className="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800"
+                  >
+                    Mua ngay
+                  </a>
+                </div>
+              </div>
+              <div className="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
+                <a href="" className="block">
+                  <img
+                    src="/assets/images/logo-hacom.png"
+                    width="100%"
+                    height="100%"
+                    className="w-full block h-[28px] object-contain"
+                    alt=""
+                  />
+                </a>
+                <div className="price font-bold">3.700.000Vnđ</div>
+                <div className="saleoff text-center font-bold">20%</div>
+                <div className="status text-red-500 font-bold">Còn hàng</div>
+                <div className="ship underline text-green-500">free</div>
+                <div className="flex items-center justify-between col-span-2">
+                  <div className="total-price font-bold">3.000.000Vnđ</div>
+                  <a
+                    href=""
+                    className="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800"
+                  >
+                    Mua ngay
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-[20px]">
+          <div className="col-span-1">
+            <h3 className="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">
+              Thông số kỹ thuật
+            </h3>
+            <div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Manufacturer</b>
+                <p>AMD</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Part #</b>
+                <ul>
+                  <li>100-1000001084WOF</li>
+                  <li>AMD Ryzen 7 9800X3D</li>
+                  <li>100-100001084WOF</li>
+                </ul>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Series</b>
+                <p>AMD Ryzen 7</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Microarchitecture</b>
+                <p>Zen 5</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Core Family</b>
+                <p>Granite Ridge</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Socket</b>
+                <p>AM5</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Core</b>
+                <p>8</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Thread Count</b>
+                <p>16</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Performance Core Clock</b>
+                <p>4.7 GHz</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>Performance Core Boost Clock</b>
+                <p>5.2 GHz</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>L2 Cache</b>
+                <p>8 MB</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>L3 Cache</b>
+                <p>96 MB</p>
+              </div>
+              <div className="item py-2 border-b-[1px] border-neutral-200">
+                <b>TDP</b>
+                <p>120 W</p>
+              </div>
+              <div className="item py-2">
+                <b>Integrated Graphics</b>
+                <p>Radeon</p>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2">
+            <div className="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
+              <h3 className="title text-2xl font-bold">Đánh giá</h3>
+              <a
+                href=""
+                className="inline-block py-1 px-5 bg-blue-600 text-white font-bold rounded-[4px] hover:bg-blue-800"
+              >
+                Xem tất cả bình luận
+              </a>
+            </div>
+            <div className="list mt-3">
+              <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+                <div className="w-[80px] mr-[20px]">
+                  <img
+                    src="/assets/images/avartar-review-1.png"
+                    width="75px"
+                    height="75px"
+                    alt="avartar"
+                  />
+                  <div className="mt-[10px]">
+                    <i className="icon-star star5"></i>
+                  </div>
+                </div>
+                <div className="w-[calc(100%-100px)]">
+                  <b className="mb-[10px]">Dino</b>
+                  <p className="mb-[10px] block text-[#747474]">
+                    10:00pm 20/02/2025
+                  </p>
+                  <p className="content mb-[5px]">
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the industry's
+                    standard dummy text ever since the 1500s, when an unknown
+                    printer took a galley of type and scrambled it to make a
+                    type specimen book. I
+                  </p>
+                  <div className="btn flex items-center">
+                    <div className="flex items-center mr-[10px]">
+                      <b className="mr-[5px]">120</b>
+                      <i className="icon_2025 view"></i>
+                    </div>
+                    <div className="flex items-center">
+                      <b className="mr-[5px]">120</b>
+                      <i className="icon_2025 comment"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/old/src/pages/product/ProductDetail.tsx
+++ b/old/src/pages/product/ProductDetail.tsx
@@ -0,0 +1,890 @@
+import { useState, useEffect, useRef } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { SupplierListBox } from "../../components/product/SupplierListBox";
+import { ProductDescription } from "../../components/product/ProductDescription";
+import { MemberReview } from "../../components/product/MemberReview";
+import { ProductReview } from "../../components/product/ProductReview";
+
+import { FreeMode, Navigation, Thumbs } from "swiper/modules";
+
+export function ProductDetail() {
+  // const [activeImage, setActiveImage] = useState(
+  //   "/src/assets/images/big-product-detail.png"
+  // );
+
+  const [thumbsSwiper, setThumbsSwiper] = useState(null);
+
+  return (
+    <>
+      <div className="box-product-detail bg-[#F4F4F4] pb-[100px]">
+        <div className="container">
+          <div className="breadcrumb p-[12px_0]">
+            <ol
+              itemscope
+              itemtype="http://schema.org/BreadcrumbList"
+              className="ul flex flex-wrap items-center"
+            >
+              <li
+                itemprop="itemListElement"
+                itemscope
+                itemtype="http://schema.org/ListItem"
+                className="flex items-center pr-[12px]"
+              >
+                <a
+                  href="/template/homepage/homepage.html"
+                  itemprop="item"
+                  className="nopad-l flex items-center text-[#637381]"
+                >
+                  <span itemprop="name">
+                    <span style="font-size: 0; display: none;">Trang chủ</span>
+                    <i className="icon_2025 home mr-[5px] mb-[5px]" />
+                  </span>
+                </a>{" "}
+                <i className="icon_2025 angle-right ml-[12px]" />
+                <meta itemprop="position" content="1" />
+              </li>
+              <li
+                itemprop="itemListElement"
+                itemscope
+                itemtype="http://schema.org/ListItem"
+                className="flex items-center pr-[12px]"
+              >
+                <a
+                  href="/man-hinh.html"
+                  itemprop="item"
+                  className="nopad-l flex items-center"
+                >
+                  <span itemprop="name">Màn hình máy tính</span>
+                  <i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
+                </a>
+                <meta itemprop="position" content="2" />
+              </li>
+              <li
+                itemprop="itemListElement"
+                itemscope
+                itemtype="http://schema.org/ListItem"
+                className="flex items-center pr-[12px]"
+              >
+                <a
+                  href="/aivision.html"
+                  itemprop="item"
+                  className="nopad-l flex items-center"
+                >
+                  <span itemprop="name">AIVISION</span>
+                </a>
+                <meta itemprop="position" content="3" />
+              </li>
+            </ol>
+          </div>
+
+          <div className="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
+            <div className="left">
+              <div className="relative">
+                <Swiper
+                  spaceBetween={10}
+                  navigation={true}
+                  thumbs={{ swiper: thumbsSwiper }}
+                  modules={[FreeMode, Navigation, Thumbs]}
+                  className="swiper border border-[#B1B1B1 rounded-[12px]"
+                  id="js-slider-big"
+                >
+                  <SwiperSlide>
+                    <img src="/assets/images/big-product-detail.png" alt="" />
+                  </SwiperSlide>
+
+                  <SwiperSlide>
+                    <img src="/assets/images/big-product-detail.jpg" alt="" />
+                  </SwiperSlide>
+
+                  <SwiperSlide>
+                    <img src="/assets/images/big-product-detail-2.jpg" alt="" />
+                  </SwiperSlide>
+
+                  <SwiperSlide>
+                    <img src="/assets/images/big-product-detail-3.jpg" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/big-product-detail-4.jpg" alt="" />
+                  </SwiperSlide>
+                </Swiper>
+              </div>
+              <div className="relative mt-[12px]">
+                <Swiper
+                  onSwiper={setThumbsSwiper}
+                  spaceBetween={15}
+                  slidesPerView={5}
+                  navigation={{
+                    prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
+                    nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
+                  }}
+                  freeMode={true}
+                  watchSlidesProgress={true}
+                  modules={[FreeMode, Navigation, Thumbs]}
+                  className="swiper"
+                  id="js-slider-small"
+                >
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <img src="/assets/images/small-product-detail.png" alt="" />
+                  </SwiperSlide>
+                </Swiper>
+                <div className="btn-small" id="btn-slider-small">
+                  <div className="swiper-button-next right-[-15px] w-[30px] h-[30px]"></div>
+                  <div className="swiper-button-prev left-[-15px] w-[30px] h-[30px]"></div>
+                </div>
+              </div>
+            </div>
+
+            <div className="right">
+              <h1 className="text-[24px] text-black mb-[5px]">
+                Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
+                FHD) - Hàng Chính Hãng
+              </h1>
+              <div className="flex items-center text-base">
+                <div className="info-review flex items-center mr-[15px]">
+                  <i className="icon-star star-small" />
+                  <span className="ml-[5px] mt-[2px]">5/5</span>
+                </div>
+                <div className="info-view flex items-center mr-[15px]">
+                  <i className="icon_2025 view" />
+                  <span className="text-[#1877F2] ml-[5px]">120</span>
+                </div>
+                <div className="info-date flex items-center mr-[15px]">
+                  <i className="icon_2025 time-big" />
+                  <span className="text-[#1877F2] ml-[5px]">12/03/2025</span>
+                </div>
+                <a href="" className="info-share flex items-center">
+                  <i className="icon_2025 share" />
+                  <span className="ml-[5px] mt-[2px]">Chia sẻ</span>
+                </a>
+              </div>
+              <div className="flex items-center mt-[5px] text-base">
+                <div className="source-review flex items-centermr-[10px]">
+                  <span>Reviews trên:</span>
+                  <a href="" className="ml-[5px] text-[#1877F2]">
+                    Internet
+                  </a>
+                  <p className="ml-[5px]">1233 đánh giá</p>
+                </div>
+                <div className="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
+                  <a href="" className="mr-[5px] text-[#462F91]">
+                    BestPC
+                  </a>
+                  <p>12003 đánh giá</p>
+                </div>
+              </div>
+              <div className="box-price flex items-center my-[10px]">
+                <span className="mr-[10px]">Giá:</span>
+                <b className="text-[#D80A00] text-[28px]">
+                  9.000.000đ - 12.000.000đ
+                </b>
+              </div>
+
+              <div className="total-shop flex items-center">
+                <div className="box-shop">
+                  <i className="icon_2025 shop" />
+                </div>
+                <p className="ml-[7px]">Có 12 cửa hàng bán</p>
+              </div>
+
+              <div className="box-summary mt-[15px]">
+                <ul>
+                  <li>
+                    CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân,
+                    12 luồng )
+                  </li>
+                  <li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
+                  <li>RAM: 1 x 8GB DDR4 2666MHz</li>
+                  <li>
+                    Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti
+                    4GB GDDR5
+                  </li>
+                  <li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
+                  <li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
+                  <li>Pin: 4 cell 64 Wh Pin liền</li>
+                  <li>khối lượng: 2.5 kg</li>
+                  <li>Cổng giao tiếp: 1x USB 2.0,</li>
+                </ul>
+              </div>
+
+              <a
+                href=""
+                className="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white"
+              >
+                <img
+                  src="/assets/images/icon-file-save.png"
+                  className="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
+                  alt="save"
+                />
+                <b className="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
+              </a>
+            </div>
+          </div>
+          {/* end thông tin sản phẩm */}
+
+          <SupplierListBox />
+          {/* end nhà cung cấp */}
+
+          <MemberReview />
+          {/* đánh giá thành viên bestpc */}
+
+          <ProductReview />
+          {/*  đánh giá trên internet  */}
+
+          <ProductDescription />
+          {/* thông tin sản phẩm */}
+
+          <div className="mt-5 bg-white rounded-[8px] p-[15px]">
+            <div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+              <h3 className="text-xl font-bold">Sản phẩm tương tự</h3>
+              <a
+                href="javascript:void(0)"
+                className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
+              >
+                <span>Xem tất cả</span>
+                <i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
+              </a>
+            </div>
+            <div className="relative mt-[15px]">
+              <Swiper
+                slidesPerView={5}
+                spaceBetween={15}
+                navigation={{
+                  prevEl: "#js-product-similar-btn .swiper-button-prev", // Link to the 'prev' button
+                  nextEl: "#js-product-similar-btn .swiper-button-next", // Link to the 'next' button
+                }}
+                freeMode={true}
+                watchSlidesProgress={true}
+                modules={[FreeMode, Navigation, Thumbs]}
+                className="product-list swiper relative"
+              >
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+              </Swiper>
+              <div className="btn-slider" id="js-product-similar-btn">
+                <div className="swiper-button-next right-[-15px]"></div>
+                <div className="swiper-button-prev left-[-15px]"></div>
+              </div>
+            </div>
+          </div>
+          {/* sản phẩm tương tự */}
+
+          <div className="mt-5 bg-white rounded-[8px] p-[15px]">
+            <div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+              <h3 className="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
+              <a
+                href="javascript:void(0)"
+                className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
+              >
+                <span>Xem tất cả</span>
+                <i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
+              </a>
+            </div>
+            <div className="relative mt-[15px]">
+              <Swiper
+                slidesPerView={5}
+                spaceBetween={15}
+                navigation={{
+                  prevEl: "#js-product-like-btn .swiper-button-prev", // Link to the 'prev' button
+                  nextEl: "#js-product-like-btn .swiper-button-next", // Link to the 'next' button
+                }}
+                freeMode={true}
+                watchSlidesProgress={true}
+                modules={[FreeMode, Navigation, Thumbs]}
+                className="product-list swiper relative"
+              >
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+                <SwiperSlide>
+                  <div className="product-item">
+                    <a href="" className="product-image">
+                      <img
+                        src="/assets/images/box-image.png"
+                        alt="Laptop Dell"
+                      />
+                    </a>
+                    <div className="info-product">
+                      <a href="" className="name-product line-clamp-2">
+                        Laptop văn phòng Dell RAM 8G Core i7
+                      </a>
+                      <div className="summary line-clamp-1">
+                        Intel Core i5 / 8GB / 256GB / SSD
+                      </div>
+                      <div className="locahost-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 map-3"></i>
+                        <span className="text-[#595959] ml-[5px] mt-[3px]">
+                          Quận Thanh Xuân
+                        </span>
+                      </div>
+                      <div className="time-pro flex items-center mb-[5px]">
+                        <i className="icon_2025 time-gray"></i>
+                        <div className="flex items-center mt-[1px]">
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            11/04/2025
+                          </span>
+                          <span className="ml-[5px]">|</span>
+                          <span className="text-[#595959] ml-[5px] mt-[3px]">
+                            Còn 01 ngày
+                          </span>
+                        </div>
+                      </div>
+                      <div className="price">15.000.000đ</div>
+                      <div className="user-pro flex items-center">
+                        <img
+                          src="/assets/images/avartar.png"
+                          className="w-[24px] h-[24px] block rounded-[50%]"
+                          width="24px"
+                          height="24px"
+                          alt="avartar"
+                        />
+                        <b className="ml-[7px]">Thanh Mai</b>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+              </Swiper>
+              <div className="btn-slider" id="js-product-like-btn">
+                <div className="swiper-button-next right-[-15px]"></div>
+                <div className="swiper-button-prev left-[-15px]"></div>
+              </div>
+            </div>
+          </div>
+          {/* sản phẩm yêu thích */}
+        </div>
+      </div>
+    </>
+  );
+}
--- a/old/src/style.css
+++ b/old/src/style.css
@@ -0,0 +1,70 @@
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color: #222;
+	background-color: #ffffff;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+	margin: 0;
+}
+
+#app {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+
+header {
+	display: flex;
+	justify-content: flex-end;
+	background-color: #673ab8;
+}
+
+header nav {
+	display: flex;
+}
+
+header a {
+	color: #fff;
+	padding: 0.75rem;
+	text-decoration: none;
+}
+
+header a.active {
+	background-color: #0005;
+}
+
+header a:hover {
+	background-color: #0008;
+}
+
+main {
+	flex: auto;
+	display: flex;
+	align-items: center;
+	max-width: 1280px;
+	margin: 0 auto;
+	text-align: center;
+}
+
+@media (max-width: 639px) {
+	main {
+		margin: 2rem;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		color: #ccc;
+		background-color: #1a1a1a;
+	}
+}
--- a/old/tailwind.config.js
+++ b/old/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  content: [
+    "./src/**/*.{html,js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/old/template/account/account.html
+++ b/old/template/account/account.html
--- a/old/template/buildpc/buildpc-detail.html
+++ b/old/template/buildpc/buildpc-detail.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BESTPC - Trang chủ</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
+    <link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
+
+</head>
+
+<body>
+
+    <div class="page-buildpc pb-[100px]">
+        <div class="container">
+            <div class="breadcrumb p-[12px_0]">
+                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="flex items-center pr-[12px]">
+                        <a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
+                            <span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
+                                    class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
+                        </a> <i class="icon_2025 angle-right  ml-[12px]"></i>
+                        <meta itemprop="position" content="1">
+                    </li>
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="flex items-center pr-[12px]">
+                        <a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
+                            <p class="font-[600]" itemprop="name">
+                                Tạo máy tính riêng của bạn
+                            </p>
+                        </a> <i class="icon_2025 angle-right  ml-[12px]"></i>
+                        <meta itemprop="position" content="2">
+                    </li>
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="flex items-center pr-[12px]">
+                        <a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
+                            <p class="font-[600]" itemprop="name">
+                                Tham khảo giá sản phẩm
+                            </p>
+                        </a>
+                        <meta itemprop="position" content="2">
+                    </li>
+                </ol>
+            </div>
+
+            <h1 class="text-2xl mb-5 block font-bold">Tham khảo giá sản phẩm</h1>
+
+            <div class="flex gap-[20px] mb-[30px]">
+                <div class="w-[450px] p-[15px] rounded-[8px] border border-[#d7d7d7]">
+                    <div class="swiper" id="js-slider-build-big">
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <img src="../../assets/images/big-product-detail.png"
+                                    class="block w-full h-[400px] object-contain" alt="">
+                            </div>
+                            <div class="swiper-slide">
+                                <img src="../../assets/images/big-product-detail-3.jpg"
+                                    class="block w-full h-[400px] object-contain" alt="">
+                            </div>
+                            <div class="swiper-slide">
+                                <img src="../../assets/images/big-product-detail-4.jpg"
+                                    class="block w-full h-[400px] object-contain" alt="">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="relative mt-[12px] w-[80%] mx-[auto]">
+                        <div thumbsSlider="" class="swiper " id="js-slider-build-small">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
+                                    <img src="../../assets/images/small-product-detail.png"
+                                        class="w-full block h-[80px] object-contain " alt="">
+                                </div>
+                                <div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
+                                    <img src="../../assets/images/small-product-detail.png"
+                                        class="w-full block h-[80px] object-contain" alt="">
+                                </div>
+                                <div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
+                                    <img src="../../assets/images/small-product-detail.png"
+                                        class="w-full block h-[80px] object-contain" alt="">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="btn-small" id="btn-slider-small">
+                            <div class="swiper-button-next right-[-15px] w-[25px]  h-[25px]">
+                            </div>
+                            <div class="swiper-button-prev left-[-15px] w-[25px]  h-[25px] text-sm"></div>
+                        </div>
+                    </div>
+
+                    <div class="box-review mt-3">
+                        <div class="flex items-center justify-center">
+                            <b>Người đánh giá</b>
+                            <div class="flex items-center ml-[10px]">(40 ratings, 4.9 <i
+                                    class="icon-star star-small ml-1"></i>)</div>
+                        </div>
+                        <div class="">
+                            <div class="flex items-center justify-between gap-[10px] w-full mb-1">
+                                <p class="w-[11%] text-[var(--color-hover)] font-bold">5 sao</p>
+                                <div class="relative w-[79%]">
+                                    <div class="block w-full h-[11px] bg-gray-500"></div>
+                                    <div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                                </div>
+                                <p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
+                            </div>
+                            <div class="flex items-center justify-between gap-[10px] w-full mb-1">
+                                <p class="w-[11%] text-[var(--color-hover)] font-bold">4 sao</p>
+                                <div class="relative w-[79%]">
+                                    <div class="block w-full h-[11px] bg-gray-500"></div>
+                                    <div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                                </div>
+                                <p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
+                            </div>
+                            <div class="flex items-center justify-between gap-[10px] w-full mb-1">
+                                <p class="w-[11%] text-[var(--color-hover)] font-bold">3 sao</p>
+                                <div class="relative w-[79%]">
+                                    <div class="block w-full h-[11px] bg-gray-500"></div>
+                                    <div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                                </div>
+                                <p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
+                            </div>
+                            <div class="flex items-center justify-between gap-[10px] w-full mb-1">
+                                <p class="w-[11%] text-[var(--color-hover)] font-bold">2 sao</p>
+                                <div class="relative w-[79%]">
+                                    <div class="block w-full h-[11px] bg-gray-500"></div>
+                                    <div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                                </div>
+                                <p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
+                            </div>
+                            <div class="flex items-center justify-between gap-[10px] w-full mb-1">
+                                <p class="w-[11%] text-[var(--color-hover)] font-bold">1 sao</p>
+                                <div class="relative w-[79%]">
+                                    <div class="block w-full h-[11px] bg-gray-500"></div>
+                                    <div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
+                                </div>
+                                <p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-[calc(100%-565px)]">
+                    <div class="grid grid-cols-7 gap-[5px] items-center pb-2.5 border-b-[1px] border-[#ababab]">
+                        <b>Nhà cung cấp</b>
+                        <b>Giá gốc</b>
+                        <b>Khuyến mãi</b>
+                        <b>Tình trạng</b>
+                        <b>Giao hàng</b>
+                        <b class="col-span-2">Thành tiền</b>
+                    </div>
+                    <div class="list">
+                        <div
+                            class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
+                            <a href="" class="block">
+                                <img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
+                                    class="w-full block h-[28px] object-contain" alt="">
+                            </a>
+                            <div class="price font-bold">3.700.000Vnđ</div>
+                            <div class="saleoff text-center font-bold">20%</div>
+                            <div class="status text-blue-500 font-bold">Còn hàng</div>
+                            <div class="ship underline">Liên hệ</div>
+                            <div class="flex items-center justify-between col-span-2">
+                                <div class="total-price font-bold">3.000.000Vnđ</div>
+                                <a href=""
+                                    class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">Mua
+                                    ngay</a>
+                            </div>
+
+                        </div>
+                        <div
+                            class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
+                            <a href="" class="block">
+                                <img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
+                                    class="w-full block h-[28px] object-contain" alt="">
+                            </a>
+                            <div class="price font-bold">3.700.000Vnđ</div>
+                            <div class="saleoff text-center font-bold">20%</div>
+                            <div class="status text-red-500 font-bold">Còn hàng</div>
+                            <div class="ship underline text-green-500">free</div>
+                            <div class="flex items-center justify-between col-span-2">
+                                <div class="total-price font-bold">3.000.000Vnđ</div>
+                                <a href=""
+                                    class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">Mua
+                                    ngay</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex gap-[20px]">
+                <div class="w-[450px]">
+                    <h3 class="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">Thông số kỹ thuật</h3>
+                    <div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Manufacturer</b>
+                            <p>AMD</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Part #</b>
+                            <ul>
+                                <li>100-1000001084WOF</li>
+                                <li>AMD Ryzen 7 9800X3D</li>
+                                <li>100-100001084WOF</li>
+                            </ul>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Series</b>
+                            <p>AMD Ryzen 7</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Microarchitecture</b>
+                            <p>Zen 5</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Core Family</b>
+                            <p>Granite Ridge</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Socket</b>
+                            <p>AM5</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Core</b>
+                            <p>8</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Thread Count</b>
+                            <p>16</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Performance Core Clock</b>
+                            <p>4.7 GHz</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>Performance Core Boost Clock</b>
+                            <p>5.2 GHz</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>L2 Cache</b>
+                            <p>8 MB</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>L3 Cache</b>
+                            <p>96 MB</p>
+                        </div>
+                        <div class="item py-2 border-b-[1px] border-neutral-200">
+                            <b>TDP</b>
+                            <p>120 W</p>
+                        </div>
+                        <div class="item py-2">
+                            <b>Integrated Graphics</b>
+                            <p>Radeon</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-[calc(100%-470px)]">
+                    <div class="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
+                        <h3 class="title text-2xl font-bold">Đánh giá
+                        </h3>
+                        <a href=""
+                            class="inline-block py-1 px-5 bg-blue-600 text-white font-bold rounded-[4px] hover:bg-blue-800">Xem
+                            tất
+                            cả bình luận</a>
+                    </div>
+                    <div class="list mt-3">
+                        <div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
+                            <div class="w-[80px] mr-[20px]">
+                                <img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
+                                    alt="avartar">
+                                <div class="mt-[10px]">
+                                    <i class="icon-star star5"></i>
+                                </div>
+                            </div>
+                            <div class="w-[calc(100%-100px)]">
+                                <b class="mb-[10px]">Dino</b>
+                                <p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
+                                <p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
+                                    typesetting
+                                    industry. Lorem Ipsum has been the industry's standard
+                                    dummy text ever since the 1500s, when an unknown printer took a galley of type
+                                    and scrambled it to make a type specimen
+                                    book. I</p>
+                                <div class="btn flex items-center">
+                                    <div class="flex items-center mr-[10px]">
+                                        <b class="mr-[5px]">120</b>
+                                        <i class="icon_2025 view"></i>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <b class="mr-[5px]">120</b>
+                                        <i class="icon_2025 comment"></i>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+    <script>
+        var swiper_small = new Swiper("#js-slider-build-small", {
+            loop: true,
+            spaceBetween: 10,
+            slidesPerView: 3,
+            freeMode: true,
+            watchSlidesProgress: true,
+            navigation: {
+                nextEl: "#btn-slider-build-small .swiper-button-next",
+                prevEl: " #btn-slider-build-small .swiper-button-prev",
+            },
+        });
+        var swiper_big = new Swiper("#js-slider-build-big", {
+            loop: true,
+            spaceBetween: 10,
+            navigation: {
+                nextEl: "#btn-slider-build-big .swiper-button-next",
+                prevEl: " #btn-slider-build-big .swiper-button-prev",
+            },
+            thumbs: {
+                swiper: swiper_small,
+            },
+        });
+    </script>
+</body>
+
+</html>
--- a/Show More
+++ b/Show More