From da37dc67e79845e193ca440544f87eabec9d4526 Mon Sep 17 00:00:00 2001
From: Dao Duc <ducdt@hurasoft.com>
Date: Tue, 30 Dec 2025 18:05:53 +0700
Subject: [PATCH] update 30/12

---
 src/app/[slug]/page.tsx                       |   22 +-
 src/app/cart/page.tsx                         |    8 +
 src/app/send-cart/page.tsx                    |    8 +
 src/app/tin-tuc/page.tsx                      |    8 +
 src/components/cart/Home/index.tsx            |    2 +-
 src/components/cart/Send/index.tsx            |   10 +-
 .../product/Category/Banner/index.tsx         |   19 +
 src/components/product/Category/FAQ/index.tsx |   35 +
 .../product/Category/Filter/index.tsx         |  195 +++
 .../product/Category/Paging/index.tsx         |   17 +
 .../product/Category/Product/index.tsx        |  136 ++
 .../product/Category/Sort/index.tsx           |   43 +
 .../product/Category/Static/index.tsx         |   28 +
 src/components/product/Category/index.tsx     | 1253 +----------------
 .../product/ProductDetail/index.tsx           |    7 +-
 src/lib/helpers.ts                            |    0
 src/lib/resolveArticlePage.ts                 |   33 +
 src/lib/resolveProductPage.ts                 |   32 +
 src/lib/resolveSlug.ts                        |    0
 src/lib/slugMap.ts                            |   84 +-
 20 files changed, 621 insertions(+), 1319 deletions(-)
 create mode 100644 src/app/cart/page.tsx
 create mode 100644 src/app/send-cart/page.tsx
 create mode 100644 src/app/tin-tuc/page.tsx
 create mode 100644 src/components/product/Category/Banner/index.tsx
 create mode 100644 src/components/product/Category/FAQ/index.tsx
 create mode 100644 src/components/product/Category/Filter/index.tsx
 create mode 100644 src/components/product/Category/Paging/index.tsx
 create mode 100644 src/components/product/Category/Product/index.tsx
 create mode 100644 src/components/product/Category/Sort/index.tsx
 create mode 100644 src/components/product/Category/Static/index.tsx
 delete mode 100644 src/lib/helpers.ts
 create mode 100644 src/lib/resolveArticlePage.ts
 create mode 100644 src/lib/resolveProductPage.ts
 delete mode 100644 src/lib/resolveSlug.ts

diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
index bdb62b9..bf63a3c 100644
--- a/src/app/[slug]/page.tsx
+++ b/src/app/[slug]/page.tsx
@@ -1,43 +1,41 @@
+// src/app/[slug]/page.tsx
 import { notFound } from "next/navigation";
 import { findBySlug } from "@/lib/slugMap";
 
 import ProductCategory from "@/components/product/Category";
 import ProductDetail from "@/components/product/ProductDetail";
-import ArticleHome from "@/components/article/Home";
 import ArticleCategory from "@/components/article/Category";
 import ArticleDetail from "@/components/article/ArticleDetail";
-
+import ArticleHome from "@/components/article/Home";
 
 export default async function SlugPage({
-  params,
+    params,
 }: {
-  params: Promise<{ slug: string }>;
+    params: { slug: string };
 }) {
     const { slug } = await params;
-    
     if (!slug) return notFound();
 
     const result = findBySlug(slug);
-
     if (!result) return notFound();
 
     switch (result.type) {
         case "product_category":
-        return <ProductCategory slug={slug} />;
+            return <ProductCategory data={result.data} />;
 
         case "product_detail":
-        return <ProductDetail slug={slug} />;
+            return <ProductDetail data={result.data} />;
 
         case "article_home":
-        return <ArticleHome slug={slug} />;
+            return <ArticleHome slug={slug} />;
 
         case "article_category":
-        return <ArticleCategory slug={slug} />;
+            return <ArticleCategory data={result.data} />;
 
         case "article_detail":
-        return <ArticleDetail slug={slug} />;        
+            return <ArticleDetail slug={result.data.slug} />;
 
         default:
-        return notFound();
+            return notFound();
     }
 }
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
new file mode 100644
index 0000000..c934af4
--- /dev/null
+++ b/src/app/cart/page.tsx
@@ -0,0 +1,8 @@
+
+import CartHome from "@/components/cart/Home";
+
+export default function Home() {
+    return (
+        <CartHome />
+    )
+}
diff --git a/src/app/send-cart/page.tsx b/src/app/send-cart/page.tsx
new file mode 100644
index 0000000..d41b313
--- /dev/null
+++ b/src/app/send-cart/page.tsx
@@ -0,0 +1,8 @@
+
+import SendResult from "@/components/cart/Send";
+
+export default function SendCartPage() {
+    return (
+        <SendResult />
+    )
+}
diff --git a/src/app/tin-tuc/page.tsx b/src/app/tin-tuc/page.tsx
new file mode 100644
index 0000000..9b5a150
--- /dev/null
+++ b/src/app/tin-tuc/page.tsx
@@ -0,0 +1,8 @@
+
+import ArticleHome from "@/components/article/Home";
+
+export default function Home() {
+    return (
+        <ArticleHome slug="" />
+    )
+}
diff --git a/src/components/cart/Home/index.tsx b/src/components/cart/Home/index.tsx
index 7a3b2cf..b111a0c 100644
--- a/src/components/cart/Home/index.tsx
+++ b/src/components/cart/Home/index.tsx
@@ -1,4 +1,4 @@
-export default function SendCart() {
+export default function Home() {
     return(
         <div className="cart-page container">
   <div className="text-center px-3">
diff --git a/src/components/cart/Send/index.tsx b/src/components/cart/Send/index.tsx
index baa02a0..058c59f 100644
--- a/src/components/cart/Send/index.tsx
+++ b/src/components/cart/Send/index.tsx
@@ -3,11 +3,11 @@ export default function SendCart() {
         <div className="max-w-[656px] m-auto my-10">
             <div>
                 <img
-                src="images/send-cart-image.png"
-                alt="send-cart"
-                width={1}
-                height={1}
-                className="block m-auto w-auto h-auto"
+                    src="images/send-cart-image.png"
+                    alt="send-cart"
+                    width={1}
+                    height={1}
+                    className="block m-auto w-auto h-auto"
                 />
                 <h1 className="mt-10 mb-5 font-600 text-center text-[40px] text-[#004BA4] leading-12">
                 {" "}
diff --git a/src/components/product/Category/Banner/index.tsx b/src/components/product/Category/Banner/index.tsx
new file mode 100644
index 0000000..32e82a0
--- /dev/null
+++ b/src/components/product/Category/Banner/index.tsx
@@ -0,0 +1,19 @@
+export default function Banner() {
+    return (
+        <div className="swiper custom-dots overflow-hidden relative mb-6" id="js-category-banner">
+            <div className="swiper-wrapper">
+                <div className="swiper-slide">
+                <a href="">
+                    <img
+                    src="images/category/slide-category.png"
+                    alt=""
+                    width=""
+                    height=""
+                    className="block w-full lazy rounded-[24px]"
+                    />
+                </a>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/FAQ/index.tsx b/src/components/product/Category/FAQ/index.tsx
new file mode 100644
index 0000000..5d4cfbf
--- /dev/null
+++ b/src/components/product/Category/FAQ/index.tsx
@@ -0,0 +1,35 @@
+export default function FAQ() {
+    return (
+        <div className="global-faq-container py-8 lg:py-12 text-18 leading-6">
+            <div className="text-center mb-8">
+                <p className="text-[#004BA4] text-20 lg:text-[40px] leading-5 lg:leading-[48px] mb-2 font-600">
+                    Các câu hỏi thường gặp
+                </p>
+                <p className="max-w-[620px] m-auto text-16 leading-[21px] lg:text-[18px] lg:leading-6">
+                    Nếu quý khách còn có bất kì câu hỏi nào cần hỗ trợ, vui lòng liên hệ với
+                    chúng tôi qua các số hotline để được tư vấn và giải đáp nhanh chóng
+                    nhất.
+                </p>
+            </div>
+
+            <div className="faq-item js-faq-item relative">
+                <button
+                    type="button"
+                    className="bx bx-plus w-10 h-10 rounded-full bg-[#EAF1FF] border border-[#FBFBFB] text-24 absolute right-5 top-4"
+                    aria-label="xem thêm"
+                />
+
+                <p className="m-0 text-20 font-600">
+                    Có thể kiểm tra tính tương thích của linh kiện trước khi đặt không?
+                </p>
+
+                <div className="faq-answer mt-4">
+                    <p> Có. Chúng tôi cung cấp công cụ "Build PC" để bạn dễ dàng chọn và kiểm
+                    tra tính tương thích giữa CPU, mainboard, RAM, GPU, và các linh kiện
+                    khác trước khi mua hàng.
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/Filter/index.tsx b/src/components/product/Category/Filter/index.tsx
new file mode 100644
index 0000000..6bbd771
--- /dev/null
+++ b/src/components/product/Category/Filter/index.tsx
@@ -0,0 +1,195 @@
+export default function ProductFilter() {
+    return (
+        <>
+            <p className="uppercase font-500 text-center border text-[#0678DB] leading-10 border-[#114CDD] rounded-[8px] mb-6">
+                Lọc sản phẩm
+            </p>
+            
+            <div className="product-filter-group">
+                <div className="filter-category-group text-18 leading-6 mb-6">
+                    <p className="font-600 mb-3"> Danh mục </p>
+                    <p className="leading-9 bg-[#F0F5FF] font-500 relative pl-6 mb-1">
+                    <i className="bg-[#0678DB] w-1 absolute top-0 left-0 bottom-0" />
+                    <span> Tất cả </span>
+                    </p>
+                    <div className="flex flex-col gap-1">
+                    <a
+                        href="/pc-photo-editing"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> Photo Editing </h2>
+                    </a>
+                    <a
+                        href="/pc-edit-render-video"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC Video Editing </h2>
+                    </a>
+                    <a
+                        href="/hhpc-3d"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC 3D Design, Animation </h2>
+                    </a>
+                    <a
+                        href="/hhpc-3d-render"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC Rendering </h2>
+                    </a>
+                    <a
+                        href="/pc-visualization"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC Visualization </h2>
+                    </a>
+                    <a
+                        href="/pc-architecture-cad"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC Architecture &amp; CAD </h2>
+                    </a>
+                    <a
+                        href="/machine-learning-ai-tensorflow"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC Machine Learning / AI </h2>
+                    </a>
+                    <a
+                        href="/server-may-ao-gia-lap"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> Server, Máy Ảo, Giả Lập </h2>
+                    </a>
+                    <a
+                        href="/pc-dep"
+                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
+                    >
+                        {" "}
+                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
+                        <h2 className="inherit"> PC Đẹp </h2>
+                    </a>
+                    </div>
+                </div>
+
+                <div className="filter-item-group leading-[22px] text-16 mb-6">
+                    <p className="font-600 text-18 mb-3"> Khoảng giá </p>
+                    <div className="filter-list">
+                    <a href="https://hoanghapc.vn/pc-workstation?max=10000000">
+                        <span> Dưới 10 triệu </span>
+                        <span> (3) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=20000000&min=15000000">
+                        <span> 15 triệu - 20 triệu </span>
+                        <span> (3) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=25000000&min=20000000">
+                        <span> 20 triệu - 25 triệu </span>
+                        <span> (1) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=30000000&min=25000000">
+                        <span> 25 triệu - 30 triệu </span>
+                        <span> (2) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=35000000&min=30000000">
+                        <span> 30 triệu - 35 triệu </span>
+                        <span> (2) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=40000000&min=35000000">
+                        <span> 35 triệu - 40 triệu </span>
+                        <span> (3) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=45000000&min=40000000">
+                        <span> 40 triệu - 45 triệu </span>
+                        <span> (13) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?max=50000000&min=45000000">
+                        <span> 45 triệu - 50 triệu </span>
+                        <span> (13) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?min=50000000">
+                        <span> Trên 50 triệu </span>
+                        <span> (85) </span>
+                    </a>
+                    </div>
+                </div>
+
+                <div className="filter-item-group leading-[22px] text-16 mb-6">
+                    <p className="font-600 text-18 mb-3"> Thương hiệu </p>
+                    <div className="filter-list">
+                    <a href="https://hoanghapc.vn/pc-workstation?brand=6">
+                        <span> GIGABYTE </span>
+                        <span> (2) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?brand=19">
+                        <span> HP </span>
+                        <span> (1) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?brand=7">
+                        <span> MSI </span>
+                        <span> (1) </span>
+                    </a>
+                    </div>
+                </div>
+
+                <div className="filter-item-group leading-[22px] text-16 mb-6">
+                    <p className="font-600 text-18 mb-3"> CPU </p>
+                    <div className="filter-list">
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=397">
+                        <span> Intel Core i7 </span>
+                        <span> (13) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=398">
+                        <span> Intel Core i9 </span>
+                        <span> (20) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=399">
+                        <span> Intel Xeon </span>
+                        <span> (16) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=402">
+                        <span> AMD Ryzen 7 </span>
+                        <span> (5) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=403">
+                        <span> AMD Ryzen 9 </span>
+                        <span> (21) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=404">
+                        <span> AMD Ryzen Threadripper </span>
+                        <span> (8) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=637">
+                        <span> Core Ultra 9 </span>
+                        <span> (18) </span>
+                    </a>
+                    <a href="https://hoanghapc.vn/pc-workstation?filter=636">
+                        <span> Core Ultra 7 </span>
+                        <span> (10) </span>
+                    </a>
+                    </div>
+                </div>
+
+                <a href="/pc-workstation" className="js-partName block text-center uppercase bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)] text-white rounded-[30px] leading-5 text-16 font-500 p-[10px] mt-8">
+                    Bỏ bộ lọc (1)
+                </a>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/Paging/index.tsx b/src/components/product/Category/Paging/index.tsx
new file mode 100644
index 0000000..9cd67d6
--- /dev/null
+++ b/src/components/product/Category/Paging/index.tsx
@@ -0,0 +1,17 @@
+export default function Paging() {
+    return (
+        <div className="text-center mt-12">
+            <button
+                type="button"
+                className="mb-3 bg-btn text-white rounded-[30px] h-10 font-500 text-16 table max-w-[240px] w-full m-auto mb-3"
+                aria-label="Xem thêm"
+            >
+                TẢI THÊM
+            </button>
+            <p className="text-14 leading-[18px] m-0">
+                {" "}
+                Hiển thị 1 - 24 trên tổng số 124 sản phẩm{" "}
+            </p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/Product/index.tsx b/src/components/product/Category/Product/index.tsx
new file mode 100644
index 0000000..7def72f
--- /dev/null
+++ b/src/components/product/Category/Product/index.tsx
@@ -0,0 +1,136 @@
+export default function ProductList() {
+    return (
+        <div className="product-holder grid grid-cols-4 gap-x-5 gap-y-8 mb-6">
+            <div className="p-item">
+                <a href="" className="p-img">
+                <img src="images/product-1.jpg" alt="" width={250} height={250} />
+                </a>
+                <div className="p-text">
+                <div className="p-price-group">
+                    <del>52.000.000 đ</del>
+                    <span className="p-discount">-10%</span>
+                    <p className="p-price"> 22.000.000 đ </p>
+                </div>
+                <a href="" className="p-name">
+                    <h3>
+                    {" "}
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                    Suscipit quos obcaecati totam, atque vel{" "}
+                    </h3>
+                </a>
+                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
+                    <div>
+                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
+                        <i className="bx bx-check-circle text-18 w-[18px]" />
+                        <span> Sẵn hàng </span>
+                    </p>
+                    {/* <p class="m-0 red flex items-center gap-1">
+                                    <i class="bx bxs-phone text-18 w-[18px]"></i>
+                                    <span> Liên hệ </span>
+                                </p> */}
+                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
+                        <i className="bx bx-gift text-18 w-[18px]" />
+                        <span> Quà tặng </span>
+                    </p>
+                    </div>
+                    <button
+                    type="button"
+                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
+                    aria-label="Mua"
+                    />
+                </div>
+                </div>
+                <div className="p-tooltip hidden">
+                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
+                    <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
+                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
+                    3060 12GB
+                    </p>
+                    <div className="p-4 tooltip-content">
+                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
+                        <p className="m-0 flex items-center flex-wrap gap-1">
+                        <b className="font-600"> Giá bán: </b>
+                        <b className="font-600 text-[#FF4E2A] text-18">
+                            {" "}
+                            48.990.000 đ{" "}
+                        </b>
+                        <del className="text-[#A0A5AC] font-300">
+                            {" "}
+                            52.000.000 đ{" "}
+                        </del>
+                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
+                            {" "}
+                            -6%{" "}
+                        </span>
+                        </p>
+                        <p className="m-0">
+                        <b className="font-600"> Bảo hành: </b>
+                        <span> Theo từng linh kiện </span>
+                        </p>
+                    </div>
+                    <div className="last:mb-0 mb-6 px-1">
+                        <p className="text-16 font-600 flex items-center leading-6 mb-2">
+                        <i className="icons icon-screen" />
+                        <span> Thông số sản phẩm </span>
+                        </p>
+                        <div className="tooltip-spec">
+                        <div className="item">
+                            {" "}
+                            CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
+                            THREAD{" "}
+                        </div>
+                        <div className="item">
+                            {" "}
+                            RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz{" "}
+                        </div>
+                        <div className="item">
+                            {" "}
+                            VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6{" "}
+                        </div>
+                        </div>
+                    </div>
+                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
+                        <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
+                        <i className="icons icon-gift" />
+                        <span> Khuyến mại hấp dẫn </span>
+                        </p>
+                        <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
+                        <div className="item">
+                            {" "}
+                            <p>
+                            <span style={{ color: "#ff0000", fontSize: "12pt" }}>
+                                <strong>
+                                ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà
+                                Nội và Hồ Chí Minh)
+                                </strong>
+                            </span>
+                            </p>{" "}
+                        </div>
+                        <div className="item">
+                            <p>
+                            <span style={{ color: "#ff0000", fontSize: "12pt" }}>
+                                <strong>
+                                ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h{" "}
+                                </strong>
+                            </span>
+                            </p>
+                        </div>{" "}
+                        <div className="item">
+                            <p>
+                            <span style={{ color: "#ff0000", fontSize: "12pt" }}>
+                                <strong>
+                                ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc{" "}
+                                </strong>
+                            </span>
+                            </p>
+                        </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+                </div>
+            </div>
+            <div className="p-item"><a href="" className="p-img"><img src="images/product-2.jpg" alt="" width={250} height={250} /></a><div className="p-text"><div className="p-price-group"><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 red flex items-center gap-1"><i className="bx bxs-phone text-18 w-[18px]" /><span>Liên hệ</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua" /></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0"> [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB </p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b><del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div><div className="last:mb-0 mb-6 px-1"><p className="text-16 font-600 flex items-center leading-6 mb-2"><i className="icons icon-screen" /><span>Thông số sản phẩm</span></p><div className="tooltip-spec"><div className="item"> CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD </div><div className="item"> RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz </div><div className="item"> VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6 </div></div></div></div></div></div></div><div className="p-item"><a href="" className="p-img"><img src="images/product-3.jpg" alt="" width={250} height={250} /></a><div className="p-text"><div className="p-price-group"><del>52.000.000 đ</del><span className="p-discount">-10%</span><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 red flex items-center gap-1"><i className="bx bxs-phone text-18 w-[18px]" /><span>Liên hệ</span></p><p className="m-0 text-[#E16B10] flex items-center gap-1"><i className="bx bx-gift text-18 w-[18px]" /><span>Quà tặng</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua" /></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0"> [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB </p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b><del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div><div className="last:mb-0 mb-6 px-1"><p className="text-16 font-600 flex items-center leading-6 mb-2"><i className="icons icon-screen" /><span>Thông số sản phẩm</span></p><div className="tooltip-spec"><div className="item"> CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD </div><div className="item"> RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz </div><div className="item"> VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6 </div></div></div><div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2"><p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white"><i className="icons icon-gift" /><span>Khuyến mại hấp dẫn</span></p><div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4"><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà Nội và Hồ Chí Minh) </strong></span></p></div><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h </strong></span></p></div><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc </strong></span></p></div></div></div></div></div></div></div><div className="p-item"><a href="" className="p-img"><img src="images/product-4.jpg" alt="" width={250} height={250} /></a><div className="p-text"><div className="p-price-group"><del>52.000.000 đ</del><span className="p-discount">-10%</span><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 text-[#00AD4F] flex items-center gap-1"><i className="bx bx-check-circle text-18 w-[18px]" /><span>Sẵn hàng</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua" /></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0"> [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB </p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b><del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div></div></div></div></div><div className="p-item"><a href="" className="p-img"><img src="images/product-5.jpg" alt="" width={250} height={250} /></a><div className="p-text"><div className="p-price-group"><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 text-[#00AD4F] flex items-center gap-1"><i className="bx bx-check-circle text-18 w-[18px]" /><span>Sẵn hàng</span></p><p /></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua" /></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0"> [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB </p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div></div></div></div></div><div className="p-item"><a href="" className="p-img"><img src="images/product-7.jpg" alt="" width={250} height={250} /></a><div className="p-text"><div className="p-price-group"><del>52.000.000 đ</del><span className="p-discount">-10%</span><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 red flex items-center gap-1"><i className="bx bxs-phone text-18 w-[18px]" /><span>Liên hệ</span></p><p className="m-0 text-[#E16B10] flex items-center gap-1"><i className="bx bx-gift text-18 w-[18px]" /><span>Quà tặng</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua" /></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0"> [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB </p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b><del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div><div className="last:mb-0 mb-6 px-1"><p className="text-16 font-600 flex items-center leading-6 mb-2"><i className="icons icon-screen" /><span>Thông số sản phẩm</span></p><div className="tooltip-spec"><div className="item"> CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD </div><div className="item"> RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz </div><div className="item"> VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6 </div></div></div><div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2"><p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white"><i className="icons icon-gift" /><span>Khuyến mại hấp dẫn</span></p><div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4"><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà Nội và Hồ Chí Minh) </strong></span></p></div><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h </strong></span></p></div><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc </strong></span></p></div></div></div></div></div></div></div><div className="p-item"><a href="" className="p-img"><img src="images/product-6.jpg" alt="" width={250} height={250} /></a><div className="p-text"><div className="p-price-group"><del>52.000.000 đ</del><span className="p-discount">-10%</span><p className="p-price">22.000.000 đ</p></div><a href="" className="p-name"><h3> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit quos obcaecati totam, atque vel </h3></a><div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]"><div><p className="m-0 text-[#00AD4F] flex items-center gap-1"><i className="bx bx-check-circle text-18 w-[18px]" /><span>Sẵn hàng</span></p><p className="m-0 text-[#E16B10] flex items-center gap-1"><i className="bx bx-gift text-18 w-[18px]" /><span>Quà tặng</span></p></div><button type="button" className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20" aria-label="Mua" /></div></div><div className="p-tooltip hidden"><div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]"><p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0"> [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB </p><div className="p-4 tooltip-content"><div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4"><p className="m-0 flex items-center flex-wrap gap-1"><b className="font-600">Giá bán:</b><b className="font-600 text-[#FF4E2A] text-18"> 48.990.000 đ </b><del className="text-[#A0A5AC] font-300"> 52.000.000 đ </del><span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]"> -6% </span></p><p className="m-0"><b className="font-600">Bảo hành:</b><span>Theo từng linh kiện</span></p></div><div className="last:mb-0 mb-6 px-1"><p className="text-16 font-600 flex items-center leading-6 mb-2"><i className="icons icon-screen" /><span>Thông số sản phẩm</span></p><div className="tooltip-spec"><div className="item"> CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD </div><div className="item"> RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz </div><div className="item"> VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6 </div></div></div><div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2"><p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white"><i className="icons icon-gift" /><span>Khuyến mại hấp dẫn</span></p><div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4"><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà Nội và Hồ Chí Minh) </strong></span></p></div><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h </strong></span></p></div><div className="item"><p><span style={{ color: "red", fontSize: "12pt" }}><strong> ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc </strong></span></p></div></div></div></div></div></div></div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/Sort/index.tsx b/src/components/product/Category/Sort/index.tsx
new file mode 100644
index 0000000..9141ede
--- /dev/null
+++ b/src/components/product/Category/Sort/index.tsx
@@ -0,0 +1,43 @@
+export default function SortByCollection() {
+    return (
+        <div className="sort-group flex flex-wrap items-center justify-between gap-4 text-16 leading-[22px] border-b border-[#DEE4EC] pb-3 mb-5">
+            <p className="m-0"> Tổng 124 sản phẩm </p>
+
+            <div className="flex items-center gap-3">
+                <p className="m-0"> Lọc theo: </p>
+                <div className="group relative border border-[#D6DAE1] whitespace-nowrap leading-[38px] rounded-[30px] px-4 min-w-[170px]">
+                <p className="m-0 flex items-center justify-between cursor-pointer">
+                    <span> Lựa chọn </span>{" "}
+                    <i className="bx bx-chevron-down text-[#A0A5AC] text-18 transition-all group-hover:rotate-[-180deg]" />
+                </p>
+                <div className="absolute shadow border bg-white opacity-0 z-[-1] right-0 top-[100%] whitespace-nowrap transition group-hover:opacity-100 group-hover:z-[5] leading-[22px] p-1 border border-[#D6DAE1] rounded-[12px] w-full">
+                    <a
+                    href=""
+                    className="bg-[#F2F2F2] block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
+                    >
+                    Mức độ phổ biến
+                    </a>
+                    <a
+                    href=""
+                    className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
+                    >
+                    Giá tăng dần
+                    </a>
+                    <a
+                    href=""
+                    className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
+                    >
+                    Giá giảm dần
+                    </a>
+                    <a
+                    href=""
+                    className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
+                    >
+                    % Giảm giá nhiều
+                    </a>
+                </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/Static/index.tsx b/src/components/product/Category/Static/index.tsx
new file mode 100644
index 0000000..cee3524
--- /dev/null
+++ b/src/components/product/Category/Static/index.tsx
@@ -0,0 +1,28 @@
+export default function Static() {
+    return (
+        <div className="js-static-container static-container rounded-[24px] bg-white pt-10 pb-8">
+            <div className="js-static-content static-content px-6 text-16 leading-[22px] text-justify">
+                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus neque facere tenetur, harum maiores aperiam ratione veniam molestias error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel optio a!</p>
+            </div>
+
+            <div className="static-btn">
+                <button
+                    type="button"
+                    aria-label="Xem thêm"
+                    className="js-showmore-button"
+                >
+                    Xem thêm
+                    <i className="bx bx-chevron-down" />
+                </button>
+                <button
+                    type="button"
+                    aria-label="Thu gọn"
+                    className="js-showless-button"
+                >
+                    Thu gọn
+                    <i className="bx bx-chevron-up" />
+                </button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/product/Category/index.tsx b/src/components/product/Category/index.tsx
index 7d30654..0d02394 100644
--- a/src/components/product/Category/index.tsx
+++ b/src/components/product/Category/index.tsx
@@ -1,1243 +1,40 @@
+import ProductFilter from "./Filter";
+import Static from "./Static";
+import FAQ from "./FAQ";
+import Banner from "./Banner";
+import SortByCollection from "./Sort";
+import ProductList from "./Product";
+import Paging from "./Paging";
+
 export default function ProductCategory({ slug }: { slug: string }) {
+
     return(
         <div className="product-page container">
             <h1 className="text-[#004BA4] text-[32px] leading-10 mb-4 font-600">
-                {" "}
-                PC THIẾT KẾ ĐỒ HỌA 3D{" "}
+                PC THIẾT KẾ ĐỒ HỌA 3D
             </h1>
+
             <div className="product-page-content flex flex-wrap items-start gap-4 mb-5">
                 <div className="col-left-group w-[264px] rounded-[16px] bg-white p-4 pb-6">
-                <p className="uppercase font-500 text-center border text-[#0678DB] leading-10 border-[#114CDD] rounded-[8px] mb-6">
-                    {" "}
-                    Lọc sản phẩm{" "}
-                </p>
-                {/* Danh muc */}
-                <div className="filter-category-group text-18 leading-6 mb-6">
-                    <p className="font-600 mb-3"> Danh mục </p>
-                    <p className="leading-9 bg-[#F0F5FF] font-600 relative pl-6 mb-1">
-                    <i className="bg-[#0678DB] w-1 absolute top-0 left-0 bottom-0" />
-                    <span> Tất cả </span>
-                    </p>
-                    <div className="flex flex-col gap-1">
-                    <a
-                        href=""
-                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
-                    >
-                        {" "}
-                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
-                        <h2 className="inherit"> HHPC 3D Lumion </h2>{" "}
-                    </a>
-                    <a
-                        href=""
-                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
-                    >
-                        {" "}
-                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
-                        <h2 className="inherit"> HHPC 3D </h2>{" "}
-                    </a>
-                    <a
-                        href=""
-                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
-                    >
-                        {" "}
-                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
-                        <h2 className="inherit"> HHPC Chaos Vantage </h2>{" "}
-                    </a>
-                    <a
-                        href=""
-                        className="inline-flex items-start gap-1 py-[6px] hover:text-[#0678DB]"
-                    >
-                        {" "}
-                        <i className="bxr bx-chevrons-right leading-[inherit]" />{" "}
-                        <h2 className="inherit"> HHPC 3D Render </h2>{" "}
-                    </a>
-                    </div>
-                </div>
-                {/* Khoảng giá */}
-                <div className="filter-item-group leading-[22px] text-16 mb-6">
-                    <p className="font-600 text-18 mb-3"> Khoảng giá </p>
-                    <div className="filter-list">
-                    <a href="" className="current">
-                        {" "}
-                        <span> Dưới 15 triệu </span> <span> (5) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 15 triệu - 20 triệu </span> <span> (18) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 20 triệu - 25 triệu </span> <span> (20) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 25 triệu - 30 triệu </span> <span> (33) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 30 triệu - 35 triệu </span> <span> (20) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 35 triệu - 40 triệu </span> <span> (15) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> Trên 40 triệu </span> <span> (14) </span>{" "}
-                    </a>
-                    </div>
-                </div>
-                {/* Thương hiệu */}
-                <div className="filter-item-group leading-[22px] text-16 mb-6">
-                    <p className="font-600 text-18 mb-3"> Thương hiệu </p>
-                    <div className="filter-list">
-                    <a href="" className="current">
-                        {" "}
-                        <span> Dưới 15 triệu </span> <span> (5) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 15 triệu - 20 triệu </span> <span> (18) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 20 triệu - 25 triệu </span> <span> (20) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 25 triệu - 30 triệu </span> <span> (33) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 30 triệu - 35 triệu </span> <span> (20) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 35 triệu - 40 triệu </span> <span> (15) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> Trên 40 triệu </span> <span> (14) </span>{" "}
-                    </a>
-                    </div>
-                </div>
-                {/* Attribute */}
-                <div className="filter-item-group leading-[22px] text-16 mb-6">
-                    <p className="font-600 text-18 mb-3"> Attribute Name </p>
-                    <div className="filter-list">
-                    <a href="" className="current">
-                        {" "}
-                        <span> Dưới 15 triệu </span> <span> (5) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 15 triệu - 20 triệu </span> <span> (18) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 20 triệu - 25 triệu </span> <span> (20) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 25 triệu - 30 triệu </span> <span> (33) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 30 triệu - 35 triệu </span> <span> (20) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> 35 triệu - 40 triệu </span> <span> (15) </span>{" "}
-                    </a>
-                    <a href="">
-                        {" "}
-                        <span> Trên 40 triệu </span> <span> (14) </span>{" "}
-                    </a>
-                    </div>
-                </div>
-                <a
-                    href=""
-                    className="block text-center uppercase bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)] text-white rounded-[30px] leading-5 text-16 font-500 p-[10px] mt-8"
-                >
-                    Bỏ bộ lọc (7)
-                </a>
+                    <ProductFilter />
                 </div>
+
                 <div className="col-right-group w-[968px]">
-                <div className="box-item rounded-[24px] bg-white px-6 pt-4 pb-8 mb-4">
-                    <div
-                    className="swiper custom-dots overflow-hidden relative mb-6"
-                    id="js-category-banner"
-                    >
-                    <div className="swiper-wrapper">
-                        <div className="swiper-slide">
-                        <a href="">
-                            <img
-                            src="images/category/slide-category.png"
-                            alt=""
-                            width=""
-                            height=""
-                            className="block w-full lazy rounded-[24px]"
-                            />
-                        </a>
-                        </div>
-                    </div>
-                    </div>
-                    <div className="sort-group flex flex-wrap items-center justify-between gap-4 text-16 leading-[22px] border-b border-[#DEE4EC] pb-3 mb-5">
-                    <p className="m-0"> Tổng 124 sản phẩm </p>
-                    <div className="flex items-center gap-3">
-                        <p className="m-0"> Lọc theo: </p>
-                        <div className="group relative border border-[#D6DAE1] whitespace-nowrap leading-[38px] rounded-[30px] px-4 min-w-[170px]">
-                        <p className="m-0 flex items-center justify-between cursor-pointer">
-                            <span> Lựa chọn </span>{" "}
-                            <i className="bx bx-chevron-down text-[#A0A5AC] text-18 transition-all group-hover:rotate-[-180deg]" />
-                        </p>
-                        <div className="absolute shadow border bg-white opacity-0 z-[-1] right-0 top-[100%] whitespace-nowrap transition group-hover:opacity-100 group-hover:z-[5] leading-[22px] p-1 border border-[#D6DAE1] rounded-[12px] w-full">
-                            <a
-                            href=""
-                            className="bg-[#F2F2F2] block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
-                            >
-                            Mức độ phổ biến
-                            </a>
-                            <a
-                            href=""
-                            className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
-                            >
-                            Giá tăng dần
-                            </a>
-                            <a
-                            href=""
-                            className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
-                            >
-                            Giá giảm dần
-                            </a>
-                            <a
-                            href=""
-                            className="block p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
-                            >
-                            % Giảm giá nhiều
-                            </a>
-                        </div>
-                        </div>
-                    </div>
-                    </div>
-                    {/* Products */}
-                    <div className="product-holder grid grid-cols-4 gap-x-5 gap-y-8 mb-6">
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-1.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <del>52.000.000 đ</del>
-                            <span className="p-discount">-10%</span>
-                            <p className="p-price"> 22.000.000 đ </p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            {" "}
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel{" "}
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 text-[#00AD4F] flex items-center gap-1">
-                                <i className="bx bx-check-circle text-18 w-[18px]" />
-                                <span> Sẵn hàng </span>
-                            </p>
-                            {/* <p class="m-0 red flex items-center gap-1">
-                                            <i class="bx bxs-phone text-18 w-[18px]"></i>
-                                            <span> Liên hệ </span>
-                                        </p> */}
-                            <p className="m-0 text-[#E16B10] flex items-center gap-1">
-                                <i className="bx bx-gift text-18 w-[18px]" />
-                                <span> Quà tặng </span>
-                            </p>
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600"> Giá bán: </b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    {" "}
-                                    48.990.000 đ{" "}
-                                </b>
-                                <del className="text-[#A0A5AC] font-300">
-                                    {" "}
-                                    52.000.000 đ{" "}
-                                </del>
-                                <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-                                    {" "}
-                                    -6%{" "}
-                                </span>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600"> Bảo hành: </b>
-                                <span> Theo từng linh kiện </span>
-                                </p>
-                            </div>
-                            <div className="last:mb-0 mb-6 px-1">
-                                <p className="text-16 font-600 flex items-center leading-6 mb-2">
-                                <i className="icons icon-screen" />
-                                <span> Thông số sản phẩm </span>
-                                </p>
-                                <div className="tooltip-spec">
-                                <div className="item">
-                                    {" "}
-                                    CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
-                                    THREAD{" "}
-                                </div>
-                                <div className="item">
-                                    {" "}
-                                    RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz{" "}
-                                </div>
-                                <div className="item">
-                                    {" "}
-                                    VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6{" "}
-                                </div>
-                                </div>
-                            </div>
-                            <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
-                                <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
-                                <i className="icons icon-gift" />
-                                <span> Khuyến mại hấp dẫn </span>
-                                </p>
-                                <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
-                                <div className="item">
-                                    {" "}
-                                    <p>
-                                    <span style={{ color: "#ff0000", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà
-                                        Nội và Hồ Chí Minh)
-                                        </strong>
-                                    </span>
-                                    </p>{" "}
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "#ff0000", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h{" "}
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>{" "}
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "#ff0000", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc{" "}
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                </div>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-2.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <p className="p-price">22.000.000 đ</p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 red flex items-center gap-1">
-                                <i className="bx bxs-phone text-18 w-[18px]" />
-                                <span>Liên hệ</span>
-                            </p>
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600">Giá bán:</b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    48.990.000 đ
-                                </b>
-                                <del className="text-[#A0A5AC] font-300">
-                                    52.000.000 đ
-                                </del>
-                                <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-                                    -6%
-                                </span>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600">Bảo hành:</b>
-                                <span>Theo từng linh kiện</span>
-                                </p>
-                            </div>
-                            <div className="last:mb-0 mb-6 px-1">
-                                <p className="text-16 font-600 flex items-center leading-6 mb-2">
-                                <i className="icons icon-screen" />
-                                <span>Thông số sản phẩm</span>
-                                </p>
-                                <div className="tooltip-spec">
-                                <div className="item">
-                                    CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
-                                    THREAD
-                                </div>
-                                <div className="item">
-                                    RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
-                                </div>
-                                <div className="item">
-                                    VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
-                                </div>
-                                </div>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-3.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <del>52.000.000 đ</del>
-                            <span className="p-discount">-10%</span>
-                            <p className="p-price">22.000.000 đ</p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 red flex items-center gap-1">
-                                <i className="bx bxs-phone text-18 w-[18px]" />
-                                <span>Liên hệ</span>
-                            </p>
-                            <p className="m-0 text-[#E16B10] flex items-center gap-1">
-                                <i className="bx bx-gift text-18 w-[18px]" />
-                                <span>Quà tặng</span>
-                            </p>
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600">Giá bán:</b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    48.990.000 đ
-                                </b>
-                                <del className="text-[#A0A5AC] font-300">
-                                    52.000.000 đ
-                                </del>
-                                <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-                                    -6%
-                                </span>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600">Bảo hành:</b>
-                                <span>Theo từng linh kiện</span>
-                                </p>
-                            </div>
-                            <div className="last:mb-0 mb-6 px-1">
-                                <p className="text-16 font-600 flex items-center leading-6 mb-2">
-                                <i className="icons icon-screen" />
-                                <span>Thông số sản phẩm</span>
-                                </p>
-                                <div className="tooltip-spec">
-                                <div className="item">
-                                    CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
-                                    THREAD
-                                </div>
-                                <div className="item">
-                                    RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
-                                </div>
-                                <div className="item">
-                                    VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
-                                </div>
-                                </div>
-                            </div>
-                            <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
-                                <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
-                                <i className="icons icon-gift" />
-                                <span>Khuyến mại hấp dẫn</span>
-                                </p>
-                                <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà
-                                        Nội và Hồ Chí Minh)
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                </div>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-4.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <del>52.000.000 đ</del>
-                            <span className="p-discount">-10%</span>
-                            <p className="p-price">22.000.000 đ</p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 text-[#00AD4F] flex items-center gap-1">
-                                <i className="bx bx-check-circle text-18 w-[18px]" />
-                                <span>Sẵn hàng</span>
-                            </p>
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600">Giá bán:</b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    48.990.000 đ
-                                </b>
-                                <del className="text-[#A0A5AC] font-300">
-                                    52.000.000 đ
-                                </del>
-                                <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-                                    -6%
-                                </span>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600">Bảo hành:</b>
-                                <span>Theo từng linh kiện</span>
-                                </p>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-5.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <p className="p-price">22.000.000 đ</p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 text-[#00AD4F] flex items-center gap-1">
-                                <i className="bx bx-check-circle text-18 w-[18px]" />
-                                <span>Sẵn hàng</span>
-                            </p>
-                            <p />
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600">Giá bán:</b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    48.990.000 đ
-                                </b>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600">Bảo hành:</b>
-                                <span>Theo từng linh kiện</span>
-                                </p>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-7.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <del>52.000.000 đ</del>
-                            <span className="p-discount">-10%</span>
-                            <p className="p-price">22.000.000 đ</p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 red flex items-center gap-1">
-                                <i className="bx bxs-phone text-18 w-[18px]" />
-                                <span>Liên hệ</span>
-                            </p>
-                            <p className="m-0 text-[#E16B10] flex items-center gap-1">
-                                <i className="bx bx-gift text-18 w-[18px]" />
-                                <span>Quà tặng</span>
-                            </p>
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600">Giá bán:</b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    48.990.000 đ
-                                </b>
-                                <del className="text-[#A0A5AC] font-300">
-                                    52.000.000 đ
-                                </del>
-                                <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-                                    -6%
-                                </span>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600">Bảo hành:</b>
-                                <span>Theo từng linh kiện</span>
-                                </p>
-                            </div>
-                            <div className="last:mb-0 mb-6 px-1">
-                                <p className="text-16 font-600 flex items-center leading-6 mb-2">
-                                <i className="icons icon-screen" />
-                                <span>Thông số sản phẩm</span>
-                                </p>
-                                <div className="tooltip-spec">
-                                <div className="item">
-                                    CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
-                                    THREAD
-                                </div>
-                                <div className="item">
-                                    RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
-                                </div>
-                                <div className="item">
-                                    VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
-                                </div>
-                                </div>
-                            </div>
-                            <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
-                                <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
-                                <i className="icons icon-gift" />
-                                <span>Khuyến mại hấp dẫn</span>
-                                </p>
-                                <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà
-                                        Nội và Hồ Chí Minh)
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                </div>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div className="p-item">
-                        <a href="" className="p-img">
-                        <img src="images/product-6.jpg" alt="" width={250} height={250} />
-                        </a>
-                        <div className="p-text">
-                        <div className="p-price-group">
-                            <del>52.000.000 đ</del>
-                            <span className="p-discount">-10%</span>
-                            <p className="p-price">22.000.000 đ</p>
-                        </div>
-                        <a href="" className="p-name">
-                            <h3>
-                            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Suscipit quos obcaecati totam, atque vel
-                            </h3>
-                        </a>
-                        <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
-                            <div>
-                            <p className="m-0 text-[#00AD4F] flex items-center gap-1">
-                                <i className="bx bx-check-circle text-18 w-[18px]" />
-                                <span>Sẵn hàng</span>
-                            </p>
-                            <p className="m-0 text-[#E16B10] flex items-center gap-1">
-                                <i className="bx bx-gift text-18 w-[18px]" />
-                                <span>Quà tặng</span>
-                            </p>
-                            </div>
-                            <button
-                            type="button"
-                            className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                            aria-label="Mua"
-                            />
-                        </div>
-                        </div>
-                        <div className="p-tooltip hidden">
-                        <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
-                            <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
-                            [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
-                            3060 12GB
-                            </p>
-                            <div className="p-4 tooltip-content">
-                            <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
-                                <p className="m-0 flex items-center flex-wrap gap-1">
-                                <b className="font-600">Giá bán:</b>
-                                <b className="font-600 text-[#FF4E2A] text-18">
-                                    48.990.000 đ
-                                </b>
-                                <del className="text-[#A0A5AC] font-300">
-                                    52.000.000 đ
-                                </del>
-                                <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-                                    -6%
-                                </span>
-                                </p>
-                                <p className="m-0">
-                                <b className="font-600">Bảo hành:</b>
-                                <span>Theo từng linh kiện</span>
-                                </p>
-                            </div>
-                            <div className="last:mb-0 mb-6 px-1">
-                                <p className="text-16 font-600 flex items-center leading-6 mb-2">
-                                <i className="icons icon-screen" />
-                                <span>Thông số sản phẩm</span>
-                                </p>
-                                <div className="tooltip-spec">
-                                <div className="item">
-                                    CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
-                                    THREAD
-                                </div>
-                                <div className="item">
-                                    RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
-                                </div>
-                                <div className="item">
-                                    VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
-                                </div>
-                                </div>
-                            </div>
-                            <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
-                                <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
-                                <i className="icons icon-gift" />
-                                <span>Khuyến mại hấp dẫn</span>
-                                </p>
-                                <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà
-                                        Nội và Hồ Chí Minh)
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                <div className="item">
-                                    <p>
-                                    <span style={{ color: "red", fontSize: "12pt" }}>
-                                        <strong>
-                                        ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
-                                        </strong>
-                                    </span>
-                                    </p>
-                                </div>
-                                </div>
-                            </div>
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                    </div>
-                    {/* Xem them */}
-                    <div className="text-center mt-12">
-                    <button
-                        type="button"
-                        className="mb-3 bg-btn text-white rounded-[30px] h-10 font-500 text-16 table max-w-[240px] w-full m-auto mb-3"
-                        aria-label="Xem thêm"
-                    >
-                        TẢI THÊM
-                    </button>
-                    <p className="text-14 leading-[18px] m-0">
-                        {" "}
-                        Hiển thị 1 - 24 trên tổng số 124 sản phẩm{" "}
-                    </p>
+                    <div className="box-item rounded-[24px] bg-white px-6 pt-4 pb-8 mb-4">
+                        <Banner />
+
+                        <SortByCollection />
+                        
+                        <ProductList />
+
+                        <Paging />
                     </div>
+
+                    <Static />
                 </div>
-                <div className="js-static-container static-container rounded-[24px] bg-white pt-10 pb-8">
-                    <div className="js-static-content static-content px-6 text-16 leading-[22px] text-justify">
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    <p>
-                        {" "}
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
-                        neque facere tenetur, harum maiores aperiam ratione veniam molestias
-                        error sunt nostrum deleniti, beatae est? Est ipsam dignissimos vel
-                        optio a!{" "}
-                    </p>
-                    </div>
-                    <div className="static-btn">
-                    <button
-                        type="button"
-                        aria-label="Xem thêm"
-                        className="js-showmore-button"
-                    >
-                        Xem thêm
-                        <i className="bx bx-chevron-down" />
-                    </button>
-                    <button
-                        type="button"
-                        aria-label="Thu gọn"
-                        className="js-showless-button"
-                    >
-                        Thu gọn
-                        <i className="bx bx-chevron-up" />
-                    </button>
-                    </div>
-                </div>
-                </div>
-            </div>
-            {/* Các câu hỏi thường gặp */}
-            <div className="global-faq-container py-8 lg:py-12 text-18 leading-6">
-                <div className="text-center mb-8">
-                <p className="text-[#004BA4] text-20 lg:text-[40px] leading-5 lg:leading-[48px] mb-2 font-600">
-                    {" "}
-                    Các câu hỏi thường gặp{" "}
-                </p>
-                <p className="max-w-[620px] m-auto text-16 leading-[21px] lg:text-[18px] lg:leading-6">
-                    Nếu quý khách còn có bất kì câu hỏi nào cần hỗ trợ, vui lòng liên hệ với
-                    chúng tôi qua các số hotline để được tư vấn và giải đáp nhanh chóng
-                    nhất.
-                </p>
-                </div>
-                <div className="faq-item js-faq-item relative">
-                <button
-                    type="button"
-                    className="bx bx-plus w-10 h-10 rounded-full bg-[#EAF1FF] border border-[#FBFBFB] text-24 absolute right-5 top-4"
-                    aria-label="xem thêm"
-                />
-                <p className="m-0 text-20 font-600">
-                    {" "}
-                    Có thể kiểm tra tính tương thích của linh kiện trước khi đặt không?{" "}
-                </p>
-                <div className="faq-answer mt-4">
-                    <p>
-                    {" "}
-                    Có. Chúng tôi cung cấp công cụ "Build PC" để bạn dễ dàng chọn và kiểm
-                    tra tính tương thích giữa CPU, mainboard, RAM, GPU, và các linh kiện
-                    khác trước khi mua hàng.{" "}
-                    </p>
-                </div>
-                </div>
-                <div className="faq-item js-faq-item relative">
-                <button
-                    type="button"
-                    className="bx bx-plus w-10 h-10 rounded-full bg-[#EAF1FF] border border-[#FBFBFB] text-24 absolute right-5 top-4"
-                    aria-label="xem thêm"
-                />
-                <p className="m-0 text-20 font-600">
-                    Có thể kiểm tra tính tương thích của linh kiện trước khi đặt không?
-                </p>
-                <div className="faq-answer mt-4">
-                    <p>
-                    Có. Chúng tôi cung cấp công cụ "Build PC" để bạn dễ dàng chọn và kiểm
-                    tra tính tương thích giữa CPU, mainboard, RAM, GPU, và các linh kiện
-                    khác trước khi mua hàng.
-                    </p>
-                </div>
-                </div>
-            </div>
             </div>
 
+            <FAQ />
+        </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/product/ProductDetail/index.tsx b/src/components/product/ProductDetail/index.tsx
index 05e565d..33cd377 100644
--- a/src/components/product/ProductDetail/index.tsx
+++ b/src/components/product/ProductDetail/index.tsx
@@ -1,4 +1,9 @@
-export default function ProductDetail() {
+type Props = {
+    slug: string;
+};
+
+export default async function ProductDetail({ slug }: Props) {
+
     return (
         <>
             <div className="product-detail-page container">
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/resolveArticlePage.ts b/src/lib/resolveArticlePage.ts
new file mode 100644
index 0000000..5e54994
--- /dev/null
+++ b/src/lib/resolveArticlePage.ts
@@ -0,0 +1,33 @@
+// src/lib/articlePage.ts
+import { categories } from "../data/categories";
+
+export type ArticleResult =
+    | { type: "article_home"; data: any }
+    | { type: "article_category"; data: any }
+    | { type: "article_detail"; data: { slug: string } };
+
+export function resolveArticlePage(slug: string): ArticleResult | null {
+    const url = "/" + slug;
+
+    // HOME
+    if (url === "/tin-tuc") {
+        return { type: "article_home", data: null };
+    }
+
+    // CATEGORY
+    const cats = categories.article.all_category.article;
+    for (const parent of cats) {
+        if (parent.url === url) {
+            return { type: "article_category", data: parent };
+        }
+
+        for (const child of parent.children ?? []) {
+            if (child.url === url) {
+                return { type: "article_category", data: child };
+            }
+        }
+    }
+
+    // DETAIL
+    return { type: "article_detail", data: { slug } };
+}
diff --git a/src/lib/resolveProductPage.ts b/src/lib/resolveProductPage.ts
new file mode 100644
index 0000000..4dbb797
--- /dev/null
+++ b/src/lib/resolveProductPage.ts
@@ -0,0 +1,32 @@
+// hoanghapc/src/lib/productPage.ts
+import { categories } from "../data/categories";
+import { productList } from "../data/product-list";
+
+export type ProductResult =
+    | { type: "product_category"; data: any }
+    | { type: "product_detail"; data: any };
+
+export function resolveProductPage(slug: string): ProductResult | null {
+    const url = "/" + slug;
+
+    // CATEGORY
+    for (const parent of categories.product.all_category) {
+        if (parent.url === url) {
+            return { type: "product_category", data: parent };
+        }
+
+        for (const child of parent.children ?? []) {
+            if (child.url === url) {
+                return { type: "product_category", data: child };
+            }
+        }
+    }
+
+    // DETAIL
+    const product = productList.find(p => p.productUrl === url);
+    if (product) {
+        return { type: "product_detail", data: product };
+    }
+
+    return null;
+}
diff --git a/src/lib/resolveSlug.ts b/src/lib/resolveSlug.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/slugMap.ts b/src/lib/slugMap.ts
index edf78af..a3fd9c3 100644
--- a/src/lib/slugMap.ts
+++ b/src/lib/slugMap.ts
@@ -1,77 +1,17 @@
-// src/lib/slugMap.ts
-import { categories } from "@/data/categories";
-
-export type PageType =
-  | "article_home"
-  | "article_category"
-  | "article_detail"
-  | "product_category"
-  | "product_detail";
+import { resolveArticlePage } from "./resolveArticlePage";
+import { resolveProductPage } from "./resolveProductPage";
 
 export type SlugResult =
-  | { type: "article_home" }
-  | { type: "article_category"; slug: string }
-  | { type: "article_detail"; slug: string }
-  | { type: "product_category"; slug: string }
-  | { type: "product_detail"; slug: string };
+    | ReturnType<typeof resolveArticlePage>
+    | ReturnType<typeof resolveProductPage>;
 
-export function findBySlug(rawSlug: string): SlugResult {
-    const slug = normalizeSlug(rawSlug);
-    const url = "/" + slug;
+export function findBySlug(slug?: string): SlugResult | null {
+    if (!slug) return null;
 
-    /* 1. ARTICLE HOME */
-    if (url === "/tin-tuc") {
-        return { type: "article_home" };
-    }
+    // PRODUCT
+    const product = resolveProductPage(slug);
+    if (product) return product;
 
-    /* 2. ARTICLE CATEGORY */
-    const articleCats = categories.article.all_category.article;
-    for (const parent of articleCats) {
-        if (parent.url === url) {
-            return { type: "article_category", slug };
-        }
-
-        for (const child of parent.children ?? []) {
-            if (child.url === url) {
-                return { type: "article_category", slug };
-            }
-        }
-    }
-
-    /* 3. PRODUCT CATEGORY */
-    const productCats = categories.product.all_category;
-    for (const cat of productCats) {
-        if (cat.url === url) {
-            return { type: "product_category", slug };
-        }
-
-        for (const child of cat.children ?? []) {
-            if (child.url === url) {
-                return { type: "product_category", slug };
-            }
-        }
-    }
-
-    /* 4. PRODUCT DETAIL   */
-    if (isProductDetailSlug(slug)) {
-        return { type: "product_detail", slug };
-    }
-
-    /* 5. ARTICLE DETAIL (fallback) */
-    return { type: "article_detail", slug };
-}
-
-/* ===============================
- * HELPERS
- * =============================== */
-function normalizeSlug(slug: string) {
-    return slug.replace(/^\/+/, "").trim();
-}
-
-function isProductDetailSlug(slug: string) {
-    return (
-        slug.startsWith("hhpc-") ||
-        slug.startsWith("pc-") ||
-        slug.startsWith("man-hinh-")
-    );
-}
+    // ARTICLE
+    return resolveArticlePage(slug);
+}
\ No newline at end of file