11/02/2026

src/app/(main)/designer-tool/[slug]/page.tsx

@@ -0,0 +1,23 @@
+import { findBySlug } from "@/lib/slug/slugMap";
+import { notFound } from "next/navigation";
+import LayoutTypeSetter from "@/components/layout/LayoutTypeSetter"
+import { SLUG_CONFIG } from "@/app/[slug]/slugConfig";
+import { renderBySlug } from "@/app/[slug]/renderBySlug";
+
+
+export default async function SlugPage({ params }: { params: { slug: string } }) {
+    console.log("designer-tool layout check");
+    const { slug }  = await params;
+    const result    = await findBySlug(slug);
+    if (!result) notFound();    
+
+    const config = SLUG_CONFIG[result.type];
+    if (!config) notFound();
+    
+    return (
+        <LayoutTypeSetter layout="main">
+            {renderBySlug(result)}
+        </LayoutTypeSetter>
+    );
+
+}

src/app/(main)/designer-tool/page.tsx

@@ -0,0 +1,14 @@
+
+import DesignerTool from "@/components/designer-tool";
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+    title: "PC Đồ Họa Tool | Chọn cấu hình theo phần mềm ",
+    description: "Công cụ chọn PC đồ họa theo phần mềm: Photoshop, Illustrator, Lumion, AutoCAD… Đề xuất cấu hình chuẩn cho thiết kế 2D, 3D, CAD và render.",
+};    
+
+export default function Home() {    
+
+    return (
+        <DesignerTool />
+    )
+}

src/app/(static)/gioi-thieu/page.tsx

@@ -0,0 +1,11 @@
+import Info from "@/components/about/Info"
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Giới Thiệu Về Hoàng Hà PC",
+    description: "Hoàng Hà PC được thành lập vào năm 2008. Đến nay, Hoàng Hà PC đã trở thành công ty hàng đầu trong lĩnh vực kinh doanh máy tính tại Việt Nam.",
+};
+
+export default function Home() {
+    return <Info />;
+}

src/app/(static)/layout.tsx

@@ -1,12 +1,16 @@
 import type { ReactNode } from 'react';
 import LayoutTypeSetter from "@/components/layout/LayoutTypeSetter";
+import StaticStyleLoader from "@/components/layout/StaticStyleLoader";
 
-import '@/styles/static_page.css';
-import '@/styles/tuyen_dung.css';
+// import '@/styles/static_page.css';
+// import '@/styles/tuyen_dung.css';
+
+export default function StaticLayout({ children }: { children: ReactNode }) {
 
-export default function TuyenDungLayout({ children }: { children: ReactNode }) {
     return (
         <>
+            <StaticStyleLoader />
+            
             <LayoutTypeSetter layout="static">
                 {children}
             </LayoutTypeSetter>

src/app/(static)/lien-he/page.tsx

@@ -0,0 +1,11 @@
+import Contact from "@/components/about/Contact"
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Thông tin liên hệ",
+    description: "Thông tin liên hệ bao gồm điện thoại, địa chỉ cửa hàng",
+};
+
+export default function Home() {
+    return <Contact />;
+}

src/app/[slug]/page.tsx

@@ -7,9 +7,6 @@ import type { Metadata } from "next";
 import LayoutTypeSetter from "@/components/layout/LayoutTypeSetter"
 import { SLUG_CONFIG } from "./slugConfig";
 
-const getCachedSlugData = cache(async (slug: string) => {
-    return findBySlug(slug);
-});
 
 export async function generateMetadata({
     params,
@@ -17,14 +14,14 @@ export async function generateMetadata({
     params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
     const { slug } = await params;
-    const result = await getCachedSlugData(slug);
+    const result = await findBySlug(slug);
     if (!result) return { title: "Local PC" };
     return metadataBySlug(result);
 }
 
 export default async function SlugPage({ params }: { params: { slug: string } }) {
     const { slug }  = await params;
-    const result    = await getCachedSlugData(slug);
+    const result    = await findBySlug(slug);
     if (!result) notFound();
 
     const config = SLUG_CONFIG[result.type];

src/app/[slug]/renderBySlug.tsx

@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
 
 export function renderBySlug(result: any) {
     const config = SLUG_CONFIG[result.type];    
+
     if (!config) notFound();
 
     return config.render(result.data);

src/app/[slug]/slugConfig.tsx

@@ -5,6 +5,7 @@ import ArticleCategory from "@/components/article/category";
 import ArticleDetail from "@/components/article/detail";
 import ArticleHome from "@/components/article/home";
 import JobDetail from "@/components/recruit/Detail";
+import DesignerDetail from "@/components/designer-tool/Detail";
 
 export type SlugLayout = "main" | "static";
 
@@ -34,10 +35,13 @@ Record<string,{
         layout: "main",
         render: (data) => <ArticleDetail slug={data} />,
     },
-
-    // TUYỂN DỤNG
+    designer_detail: {
+        layout: "main",
+        render: (data) => <DesignerDetail slug={data} />,
+    },    
     job_detail: {
         layout: "static",
         render: (data) => <JobDetail slug={data} />,
     },
+    
 };

src/app/layout.tsx

@@ -2,7 +2,7 @@ import { Toaster } from "sonner";
 import TooltipProvider from "@/components/providers/TooltipProvider";
 import HeaderFooterSwitch from "@/components/other/HeaderFooterSwitch";
 import { LayoutProvider } from "@/components/layout/LayoutContext";
-import "../styles/globals.css";
+import "@/styles/globals.css";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (

src/components/about/Contact.tsx

@@ -0,0 +1,144 @@
+export default function Contact() {
+    return (
+        <>
+            <h1 style={{ position: 'absolute', top: '-999px' }}>Liên hệ</h1>
+            
+            <div className="contact-info-page main-content">
+                <div className="contact-info text-20">
+                    <div className="container">
+                        <div className="contact-info-header py-6">
+                            <div className="contact-info-header-text">
+                                <h2 className="text-20 mb-3">
+                                    Công ty tin rằng khách hàng chính là nhân tố quan trọng cho phát triển của <b className="font-weight-600 color-blue-1">Hoàng Hà PC</b>. Vì vậy, mọi hoạt động kinh doanh của công ty luôn hướng tới mục tiêu tôn trọng và bảo đảm quyền lợi cho khách hàng, chinh phục khách hàng bằng chất lượng sản phẩm và dịch vụ tốt nhất.
+                                </h2>
+                                <p>
+                                    Để được phục vụ cũng như giải đáp mọi thắc mắc, Quý khách vui lòng liên hệ với chúng tôi theo các thông tin sau:
+                                </p>
+                            </div>
+                            <div className="contact-info-header-image">
+                                <img src="/images/static-contact-info-pic-1.png" alt="contact-info" />
+                            </div>
+                        </div>
+
+                        <div className="contact-info-content d-flex flex-wrap">
+                            <div className="contact-info-box d-flex flex-column align-items-center">
+                                <i className="static-icons static-icon-location-3" />
+                                <h3 className="text-20 font-weight-bold">Showroom bán hàng</h3>
+                                <h4 className="text-24 font-weight-bold mb-4 mt-2">PHƯỜNG CẦU GIẤY, HÀ NỘI</h4>
+                                <p className="text-16 pb-3x text-center">41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội</p>
+
+                                <div className="w-full pb-4x">
+                                    <a href="https://goo.gl/maps/56ARHjWKoVhpWBCF6" className="btn btn-blue-2 w-full" target="_blank">Nhận chỉ đường</a>
+                                </div>
+
+                                <ul className="contact-list d-flex flex-column">
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-phone" />
+                                        <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-mail" />
+                                        <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-clock" />
+                                        <p className="text-14 m-0">Thời gian làm việc: 8h00 - 18h30</p>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            {/* QUẬN ĐỐNG ĐA, HÀ NỘI */}
+                            <div className="contact-info-box d-flex flex-column align-items-center">
+                                <i className="static-icons static-icon-location-3" />
+                                <h3 className="text-20 font-weight-bold">Showroom bán hàng</h3>
+                                <h4 className="text-24 font-weight-bold mb-4 mt-2">PHƯỜNG ĐỐNG ĐA, HÀ NỘI</h4>
+                                <p className="text-16 pb-3x text-center">94E-94F Đường Láng , Phường Đống Đa, Hà Nội</p>
+
+                                <div className="w-full pb-4x">
+                                    <a href="https://g.page/hoanghapc?share" className="btn btn-blue-2 w-full" target="_blank">Nhận chỉ đường</a>
+                                </div>
+
+                                <ul className="contact-list d-flex flex-column">
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-phone" />
+                                        <a className="text-14" href="tel: 0396.122.999">Điện thoại: 0396.122.999</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-mail" />
+                                        <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-clock" />
+                                        <p className="text-14 m-0">Thời gian làm việc: 8h00 - 18h30</p>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            {/* VINH, NGHỆ AN */}
+                            <div className="contact-info-box d-flex flex-column align-items-center">
+                                <i className="static-icons static-icon-location-3" />
+                                <h3 className="text-20 font-weight-bold">Showroom bán hàng</h3>
+                                <h4 className="text-24 font-weight-bold mb-4 mt-2">VINH, NGHỆ AN</h4>
+                                <p className="text-16 pb-3x text-center">72 Lê Lợi, Thành Vinh, Nghệ An</p>
+
+                                <div className="w-full pb-4x">
+                                    <a href="https://goo.gl/maps/1HQrD6mdf4VMYccs6" className="btn btn-blue-2 w-full" target="_blank">Nhận chỉ đường</a>
+                                </div>
+
+                                <ul className="contact-list d-flex flex-column">
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-phone" />
+                                        <a className="text-14" href="tel:0988.163.666">Điện thoại: 0988.163.666</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-mail" />
+                                        <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-clock" />
+                                        <p className="text-14 m-0">Thời gian làm việc: 8h00 - 18h30</p>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            {/* HỒ CHÍ MINH */}
+                            <div className="contact-info-box d-flex flex-column align-items-center">
+                                <i className="static-icons static-icon-location-3" />
+                                <h3 className="text-20 font-weight-bold">Showroom bán hàng</h3>
+                                <h4 className="text-24 font-weight-bold mb-4 mt-2">HỒ CHÍ MINH</h4>
+                                <p className="text-16 pb-3x text-center">K8bis Bửu Long, Phường Hòa Hưng, Hồ Chí Minh</p>
+
+                                <div className="w-full pb-4x">
+                                    <a href="https://g.page/hoanghapchcm?share" className="btn btn-blue-2 w-full" target="_blank">Nhận chỉ đường</a>
+                                </div>
+
+                                <ul className="contact-list d-flex flex-column">
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-phone" />
+                                        <a className="text-14" href="tel:0968.123.666">Điện thoại: 0968.123.666</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-mail" />
+                                        <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
+                                    </li>
+
+                                    <li className="d-flex align-items-center">
+                                        <i className="static-icons static-icon-clock" />
+                                        <p className="text-14 m-0">Thời gian làm việc: 8h00 - 18h30</p>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/about/Info.tsx

@@ -0,0 +1,285 @@
+export default function Info() {
+    return (
+        <>
+            <h1 style={{ position: 'absolute', top: '-99999px' }}>Giới Thiệu Hoàng Hà PC</h1>
+            <div className="about-us-page">
+                <div className="about-us text-16">
+                    <div className="about-us-header">
+                        <div className="about-us-header-bg section-hero" />
+                        <div className="container">
+                            <div className="text-box d-flex align-items-center flex-column font-weight-bold">
+                                <i className="static-icons static-icon-logo" />
+                                <h3 className="text-28 text-white mt-3">
+                                    GIỚI THIỆU VỀ HOÀNG HÀ PC
+                                </h3>
+                            </div>
+                        </div>
+                        <div className="deco-header deco-header-1" />
+                        <div className="deco-header deco-header-2" />
+                    </div>
+                    <div className="about-us-content">
+                        <div className="wrap">
+                            <div className="container">
+                                <h4 className="text-center text-16">
+                                    <span className="font-weight-bold color-primary">Hoàng Hà PC</span>
+                                    được thành lập vào năm 2008 với tên gọi là Trung Tâm Tin Học
+                                    Hoàng Hà nhằm đáp ứng nhu cầu của thị trường lúc bấy giờ như
+                                    lắp đặt hệ thống máy tính văn phòng, máy tính gaming, lắp đặt
+                                    thi công quán net và các sản phẩm máy tính cao cấp dành cho
+                                    thiết kế đồ họa.
+                                </h4>
+                            </div>
+                        </div>
+                        <div className="summary py-6">
+                            <div className="container">
+                                <div className="grid grid--content-1">
+                                    <div className="summary-text">
+                                        <h3 className="text-28 color-primary font-weight-600 pb-3">
+                                            SƠ LƯỢC
+                                        </h3>
+                                        <p className="my-3">
+                                            Suốt nhiều năm hoạt động từ khi mới thành lập cho tới nay,
+                                            <span className="color-primary font-weight-bold">Hoàng Hà PC</span>
+                                            đã luôn phát triển và tạo dựng được niềm tin với khách
+                                            hàng từ chất lượng dịch vụ đến mức giá hợp lý. Trong
+                                            khoảng thời gian hoạt động, Trung Tâm Tin Học Hoàng Hà
+                                            quyết định đổi tên thành
+                                            <span className="color-primary font-weight-bold">Công ty TNHH Dịch Vụ Và Công Nghệ Hoàng
+                                                Hà</span>
+                                            vào năm 2016 với mục tiêu trở thành đơn vị cung cấp máy
+                                            tính chuyên dụng cao cấp tiên phong tại Việt Nam, đi đầu
+                                            về xu hướng công nghệ mới và tư vấn giải pháp tối ưu phần
+                                            cứng máy tính cho các nhu cầu của người sử dụng.
+                                        </p>
+                                        <p className="mb-3">
+                                            Đến nay,
+                                            <span className="color-primary font-weight-bold">Hoàng Hà PC</span>
+                                            tự hào là đơn vị cung cấp các sản phẩm chính hãng nổi
+                                            tiếng như:
+                                            <span className="color-primary font-weight-bold">Supermicro, Intel, AMD, Nvidia, Zotac,
+                                                Gigabyte, Asus,
+                                                Asrock, MSI, Seasonic, Gskill, Corsair…</span>
+                                            đáp ứng yêu cầu của khách hàng trong lĩnh vực Server,
+                                            Workstation và giữ nguyên tiêu chí từ khi Hoàng Hà PC mới
+                                            thành lập chính là “vì khách hàng”.
+                                        </p>
+                                        <p className="mb-3">
+                                            Nhờ nỗ lực phát triển không ngừng, Hoàng Hà PC đã đón nhận
+                                            những thành viên mới, tạo nên một tập thể đoàn kết vững
+                                            mạnh với đội ngũ nhân viên 100 thành viên, có nhiều năm
+                                            kinh nghiệm làm việc thực tế, am hiểu sâu về hệ thống phần
+                                            cứng và phần mềm và đặc biệt luôn tận tâm với khách hàng..
+                                        </p>
+                                        <p>
+                                            <span className="color-primary font-weight-bold">Hoàng Hà PC</span>
+                                            đã vươn lên trở thành công ty hàng đầu trong lĩnh vực lắp
+                                            đặt máy tính cao cấp, luôn đưa ra các chính sách về hỗ trợ
+                                            khách hàng từ bảo hành, hỗ trợ tư vấn giải pháp và tối ưu
+                                            giá trị ngân sách một cách hiệu quả nhất một cách nhanh
+                                            chóng và chu đáo nhất.
+                                        </p>
+                                    </div>
+                                    <div className="summary-image">
+                                        <img src="/images/static-about-us-pic-1.png" alt="About image" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="core-values py-6">
+                            <div className="container">
+                                <div className="core-values-header heading-primary text-center pb-3">
+                                    <h3 className="text-28 color-primary mb-3 font-weight-bold">
+                                        GIÁ TRỊ CỐT LÕI HOÀNG HÀ PC
+                                    </h3>
+                                    <p>
+                                        Văn hóa của Hoàng Hà PC được hình thành từ tiêu chí “<span className="font-weight-bold color-primary">vì khách hàng</span>”, đây là yếu tố quan trọng mang
+                                        lại không chỉ sự phát
+                                        triển của
+                                        <span className="font-weight-bold color-primary">Hoàng Hà PC</span>
+                                        mà còn cả giá trị tinh thần vô cùng to lớn cho nhân viên của
+                                        <span className="font-weight-bold color-primary">Hoàng Hà PC</span>. Vì vậy giá trị cốt lõi của
+                                        Hoàng Hà PC chính là:
+                                        <span className="font-weight-bold color-primary"><span className="gradient-color gradient-color-1">Nỗ
+                                            lực</span>
+                                            -
+                                            <span className="gradient-color gradient-color-2">Cải tiến</span>
+                                            -
+                                            <span className="gradient-color gradient-color-3">Sáng tạo</span>
+                                            -
+                                            <span className="gradient-color gradient-color-4">Trách nhiệm</span>:</span>
+                                    </p>
+                                </div>
+                                <div className="core-values-content">
+                                    <ul className="grid grid--4-cols grid--gap-2">
+                                        <li className="p-3">
+                                            <i className="static-icons static-icon-try-hard mx-auto" />
+                                            <p className="text-20 font-weight-bold text-center my-2 gradient-color gradient-color-1">
+                                                Nỗ lực
+                                            </p>
+                                            <span>Hoàng Hà PC luôn cống hiến hết sức mình cho mục tiêu đề
+                                                ra. Đưa ra giải pháp tốt nhất cho khách hàng.</span>
+                                        </li>
+                                        <li className="p-3">
+                                            <i className="static-icons static-icon-upgrade mx-auto" />
+                                            <p className="text-20 font-weight-600 text-center my-2 gradient-color gradient-color-2">
+                                                Cải tiến
+                                            </p>
+                                            <span>Hoàng Hà PC không ngừng cải tiến để mang đến chính sách
+                                                phù hợp với KH nhất, vươn lên dẫn đầu trong lĩnh vực lắp
+                                                đặt máy tính</span>
+                                        </li>
+                                        <li className="p-3">
+                                            <i className="static-icons static-icon-creation mx-auto" />
+                                            <p className="text-20 font-weight-600 text-center my-2 gradient-color gradient-color-3">
+                                                Sáng tạo
+                                            </p>
+                                            <span>Hoàng Hà PC luôn đề cao sự sáng tạo kết hợp giữa giá
+                                                trị hiện có và ý tưởng mới tạo nên sự khác biệt so với
+                                                các công ty khác.</span>
+                                        </li>
+                                        <li className="p-3">
+                                            <i className="static-icons static-icon-shield-2 mx-auto" />
+                                            <p className="text-20 font-weight-600 text-center my-2 gradient-color gradient-color-4">
+                                                Trách nhiệm
+                                            </p>
+                                            <span>Hoàng Hà PC luôn duy trì tinh thần trách nhiệm cao để
+                                                đạt được các kết quả nhất quán với định hướng:”Vì Khách
+                                                Hàng”.</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="organization py-6">
+                            <div className="container">
+                                <h3 className="text-28 color-primary font-weight-600 pb-3x">
+                                    SƠ ĐỒ TỔ CHỨC HOÀNG HÀ PC
+                                </h3>
+                                <div className="organization-content">
+                                    <div className="grid grid--2-cols grid--gap-2">
+                                        <img src="/images/static-about-us-pic-2.png" alt="organization" />
+                                        <img src="/images/static-about-us-pic-5.png" alt="organization" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="business py-6">
+                            <div className="container">
+                                <div className="grid grid--2-cols grid--gap-2">
+                                    <div className="business-text">
+                                        <h3 className="text-28 color-primary font-weight-600 mb-1">
+                                            CÁC LĨNH VỰC KINH DOANH
+                                        </h3>
+                                        <p className="pb-3x">
+                                            Đặc biệt trong lĩnh vực Tin học, Hoàng Hà PC chú trọng các
+                                            hoạt động như:
+                                        </p>
+                                        <ul>
+                                            <li className="d-flex align-items-center pr-4 mb-3">
+                                                <div className="wraper-icon">
+                                                    <i className="static-icons static-icon-polygon-6" />
+                                                    <span className="text-20 font-weight-bold gradient-color gradient-color-4">1</span>
+                                                </div>
+                                                <p className="font-weight-600 ml-2">
+                                                    Cung cấp giải pháp: Máy chủ, máy tính đồ họa, máy tính
+                                                    workstation, máy tính văn phòng và các linh kiện máy
+                                                    tính.
+                                                </p>
+                                            </li>
+                                            <li className="d-flex align-items-center pr-4 mb-3">
+                                                <div className="wraper-icon">
+                                                    <i className="static-icons static-icon-polygon-6" />
+                                                    <span className="text-20 font-weight-bold gradient-color gradient-color-4">2</span>
+                                                </div>
+                                                <p className="font-weight-600 ml-2">
+                                                    Thiết kế giải pháp tổng thể (thiết kế hệ thống, xây
+                                                    dựng mạng LAN, WAN,..)
+                                                </p>
+                                            </li>
+                                            <li className="d-flex align-items-center pr-4 mb-3">
+                                                <div className="wraper-icon">
+                                                    <i className="static-icons static-icon-polygon-6" />
+                                                    <span className="text-20 font-weight-bold gradient-color gradient-color-4">3</span>
+                                                </div>
+                                                <p className="font-weight-600 ml-2">
+                                                    Tư vấn và đào tạo cho khách hàng.
+                                                </p>
+                                            </li>
+                                            <li className="d-flex align-items-center pr-4 mb-3">
+                                                <div className="wraper-icon">
+                                                    <i className="static-icons static-icon-polygon-6" />
+                                                    <span className="text-20 font-weight-bold gradient-color gradient-color-4">4</span>
+                                                </div>
+                                                <p className="font-weight-600 ml-2">
+                                                    Các dịch vụ bảo hành, bảo trì.
+                                                </p>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div className="business-image">
+                                        <img src="/images/static-about-us-pic-3.png" alt="business-image" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="achievement py-6">
+                            <div className="container">
+                                <h3 className="heading-primary text-28 color-primary font-weight-600 pb-3 text-center">
+                                    Những Thành Tựu Hoàng Hà PC Đã Đạt Được
+                                </h3>
+                                <ul className="ul grid grid--4-cols grid--gap-2 text-center">
+                                    <li className="p-3">
+                                        <i className="static-icons static-icon-top-10 mx-auto" />
+                                        <p className="text-20 font-weight-600 mt-2">
+                                            Top 10 nhà cung cấp máy tính tốt nhất việt nam
+                                        </p>
+                                    </li>
+                                    <li className="p-3">
+                                        <i className="static-icons static-icon-rocket mx-auto" />
+                                        <p className="text-20 font-weight-600 mt-2">
+                                            Tốc độ tăng trưởng đạt 200%
+                                        </p>
+                                    </li>
+                                    <li className="p-3">
+                                        <i className="static-icons static-icon-tetris mx-auto" />
+                                        <p className="text-20 font-weight-600 mt-2">
+                                            Đối tác chiến lược của Intel, AMD, Asus, Gigabyte, MSI
+                                        </p>
+                                    </li>
+                                    <li className="p-3">
+                                        <i className="static-icons static-icon-10-years mx-auto" />
+                                        <p className="text-20 font-weight-600 mt-2">
+                                            10 Năm kinh nghiệm trong lĩnh vực máy tính đồ họa, PC
+                                            workstation
+                                        </p>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="customer py-6 text-white font-weight-bold" style={{ backgroundColor: '#1988ec' }}>
+                            <div className="container">
+                                <h3 className="heading-primary text-28 pb-3 text-center">
+                                    Khách Hàng Của Hoàng Hà PC
+                                </h3>
+                                <div className="grid grid--2-cols grid--gap-2">
+                                    <div className="customer-image">
+                                        <img src="/images/static-about-us-pic-4.png" alt="customer-image" />
+                                    </div>
+                                    <ul className="ul customer-list text-20">
+                                        <li><span> Doanh nghiệp nhà nước </span></li>
+                                        <li><span>  Tập đoàn lớn </span></li>
+                                        <li><span>  Doanh nghiệp tư nhân vừa và nhỏ </span></li>
+                                        <li><span>  Tổ chức phi chính phủ </span></li>
+                                        <li><span>  Doanh nghiệp vốn đầu tư nước ngoài </span></li>
+                                        <li><span>  Trường học, bệnh viện </span></li>
+                                        <li><span>  Team Youtube, MMO </span></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/designer-tool/DesignerItem.tsx

@@ -0,0 +1,37 @@
+export default function DesignerItem({ item }: any) {
+    console.log('DesignerItem: ', item)
+    return (
+        <>
+            <div className="p-item">
+                <a href="{{ _item.productUrl }}" className="p-img">
+                    <img src="{{ _item.productImage.large }}" alt="{{ _item.productName }}" width={250} height={250} />
+                </a>
+                <div className="p-text">
+                    <a href="{{ _item.productUrl }}" className="p-name">
+                        <h3> {'{'}{'{'} _item.productName {'}'}{'}'} </h3>
+                    </a>
+                    <div className="p-price-group">
+                        <p className="p-price">
+                            {'{'}% if _item.price &gt; 0 %{'}'} {'{'}{'{'} _item.price | format_price {'}'}{'}'} đ
+                            {'{'}% else %{'}'} Liên hệ
+                            {'{'}% endif %{'}'}
+                        </p>
+                        {'{'}% if _item.price_off &gt; 0 %{'}'}
+                        <del>{'{'}{'{'} _item.marketPrice | format_price {'}'}{'}'} đ</del>
+                        <span className="p-discount">-{'{'}{'{'} _item.price_off {'}'}{'}'}%</span>
+                        {'{'}% endif %{'}'}
+                    </div>
+                    {'{'}% if _item.productSummary %{'}'}
+                    <div className="p-summary">
+                        {'{'}% assign _summary = _item.productSummary | get_line %{'}'}
+                        {'{'}% for _item in _summary | limit: 5 %{'}'}
+                        <div className="item-circle"> {'{'}{'{'} _item {'}'}{'}'} </div>
+                        {'{'}% endfor %{'}'}
+                    </div>
+                    {'{'}% endif %{'}'}
+                </div>
+            </div>
+
+        </>
+    )
+}

src/components/designer-tool/Detail.tsx

@@ -0,0 +1,115 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import Link from "next/link";
+import FAQ from "./Faq";
+
+export default function Detail({ slug }: any) {
+    // console.log('DesignerDetail: ', slug)
+    const title = usePathname().includes('device=laptop') ? 'Laptop' : 'PC';
+
+    const ignoreKeys = ["Loại máy", "Loại máy tính"];
+
+    const filteredAttribute = slug.attribute_list.filter(
+        (item: any) => !ignoreKeys.includes(item.name)
+    );
+
+
+    return (
+        <>
+            <div className="global-breadcrumb">
+                <div className="container">
+                    <ol itemScope itemType="http://schema.org/BreadcrumbList" className="ul clearfix">
+                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
+                            <Link href="/" itemProp="item" className="nopad-l">
+                                <span itemProp="name">Trang chủ</span>
+                            </Link>
+                            <meta itemProp="position" content="1" />
+                        </li>
+
+                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
+                            <Link href="/designer-tool" itemProp="item" className="nopad-l">
+                                <span itemProp="name"> PC Đồ Họa Tool </span>
+                            </Link>
+                            <meta itemProp="position" content="2" />
+                        </li>
+
+                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
+                            <Link href="" itemProp="item" className="nopad-l">
+                                <span itemProp="name"> {slug.item_info.name} </span>
+                            </Link>
+                            <meta itemProp="position" content="3" />
+                        </li>
+                    </ol>
+                </div>
+            </div>
+
+            <div className="container">
+                <h1 className="text-center text-[#004BA4] font-600 text-24 leading-[30px] lg:text-[32px] lg:leading-10 mb-4">
+                    {title} dành cho {slug.item_info.name}
+                </h1>
+
+                {filteredAttribute &&
+                    <div className="text-center tool-btn-list mb-4 lg:mb-6">
+                        <div className="inline-flex items-center justify-center p-1 border border-[#DFE4EC] bg-[#F5F8FF] overflow-auto whitespace-nowrap no-scroll gap-1 leading-9 font-500 text-[#5D6776] text-14 rounded-[8px]">
+                            {
+                                filteredAttribute.map((item: any) =>
+                                    <button
+                                        key={item.id}
+                                        className="js-attribute-btn px-9"
+                                        data-id="{{ _item.id }}"
+                                        data-current="current"
+                                    >
+                                        {item.name}
+                                    </button>
+                                )}
+                        </div>
+                    </div>
+                }
+
+                <div className="mb-8 lg:mb-12">
+                    <div className="tool-product-holder grid grid-cols-2 lg:grid-cols-4 gap-x-3 gap-y-4 lg:gap-x-4 lg:gap-y-6" id="js-product-holder">
+
+                    </div>
+
+                    <div className="text-center mt-12" id="js-paging-holder">
+                        <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" id="js-paging-count">  </p>
+                    </div>
+                </div>
+
+            </div>
+
+            {slug.item_info.description &&
+                <div className="designer-summary-container bg-white py-8 lg:py-12 px-3">
+                    <div className="js-static-container static-container leading-[135%] m-auto max-w-[924px]">
+                        <div className="js-static-content static-content text-16 leading-[22px] text-justify"> {slug.item_info.description} </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"></i>
+                            </button>
+
+                            <button type="button" aria-label="Thu gọn" className="js-showless-button">
+                                Thu gọn <i className="bx bx-chevron-up"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            }
+
+            <div className="designer-faq-container bg-[#e8ecf6] lg:-mb-16">
+                <div className="global-faq-container 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>
+
+                    <FAQ />
+
+                </div>
+            </div>
+        </>
+    )
+}

src/components/designer-tool/Faq.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { useState } from "react";
+
+export default function FAQ() {
+
+    const [openIds, setOpenIds] = useState<number[]>([]);
+
+    const toggle = (id: number) => {
+        setOpenIds(prev =>
+            prev.includes(id)
+                ? prev.filter(i => i !== id)
+                : [...prev, id]
+        );
+    };
+    
+    const isOpen = openIds.includes(1);
+
+    return (
+        <>
+            <div className={`faq-item js-faq-item relative ${isOpen ? 'active' : ''}`}>
+                <button type="button" 
+                        onClick={() => toggle(1) }
+                        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-15 lg:text-[20px] leading-[19px] lg:leading-6 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>
+
+        </>
+    )
+}

src/components/designer-tool/index.tsx

@@ -0,0 +1,133 @@
+'use client';
+import Link from "next/link";
+import { useEffect, useState, useMemo } from "react";
+import { DesignerToolData } from "@/data/designer-tool"
+import FAQ from "./Faq";
+import { convertToSlug } from "@/lib/utils"
+
+export default function DesignerTool() {
+    
+    const [keyword, setKeyword] = useState("");
+
+    const filteredSoftware = useMemo(() => {
+        const searchSlug = convertToSlug(keyword).toUpperCase();
+
+        return DesignerToolData.item_list.filter((item: any) => {
+            const textSlug = convertToSlug(item.name).toUpperCase();
+            return textSlug.includes(searchSlug);
+        });
+
+    }, [keyword]);
+
+    const [ device, setDevice ] = useState("desktop");
+
+    useEffect(() => {
+        document.body.style.background = '#FFFFFF';
+        console.log('device: ', device)
+    }, [device]);
+
+    return (
+        <>
+            <div className="global-breadcrumb">
+                <div className="container">
+                    <ol itemScope itemType="http://schema.org/BreadcrumbList" className="ul clearfix">
+                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
+                            <Link href="/" itemProp="item" className="nopad-l">
+                                <span itemProp="name">Trang chủ</span>
+                            </Link>
+                            <meta itemProp="position" content="1" />
+                        </li>
+                        <li itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
+                            <Link href="/designer-tool" itemProp="item" className="nopad-l">
+                                <span itemProp="name"> PC Đồ Họa Tool </span>
+                            </Link>
+                            <meta itemProp="position" content="2" />
+                        </li>
+                    </ol>
+                </div>
+            </div>
+
+            <div className="!lg:mt-8 leading-[18px] lg:leading-[22px] lg:text-[16px]">
+                <div className="container">
+                    <div className="tool-search-container relative overflow-hidden rounded-[16px] bg-[linear-gradient(180deg,#EAF1FF_0%,#DAE7FF_100%)] p-[24px_16px] lg:p-10 text-center mb-4 lg:mb-8">
+                        <h1 className="font-600 text-[#004BA4] lg:text-[32px] lg:leading-10 text-24 leading-[30px] mb-2 lg:mb-3"> PC đồ họa chuyên nghiệp </h1>
+
+                        <p className="mb-6 lg:mb-8 mx-auto max-w-[714px]"> Công cụ Tìm kiếm PC Đồ Họa giúp bạn dễ dàng chọn lựa cấu hình phù hợp với nhu cầu thiết kế và sáng tạo. Hoàng Hà PC đã tuyển chọn những bộ PC hiệu năng cao, tối ưu hóa cho các phần mềm đồ họa như Photoshop, Illustrator, AutoCAD, 3ds Max, Blender, v.v.  Xem đề xuất hàng đầu từ Hoàng Hà PC hay so sánh các dòng PC chuyên dụng để tìm ra lựa chọn tốt nhất - Tất cả đều có trong công cụ của chúng tôi. </p>
+
+                        <div className="relative m-auto flex flex-wrap gap-3 items-center justify-center">
+                            <div className="w-full lg:w-[520px] flex flex-wrap items-center justify-between p-[6px] pl-5 bg-white rounded-[30px]">
+                                <input
+                                    type="text"
+                                    value={keyword}
+                                    onChange={(e) => setKeyword(e.target.value)}
+                                    placeholder="Nhập phần mềm cần tìm"
+                                    className="w-[calc(100%_-_36px)] pr-3 placeholder:!text-[#5F5F5F] placeholder:!text-[14px] h-9" />
+
+                                <button type="button" aria-label="button" className="bg-linear rounded-full w-9 h-9">
+                                    <i className="block !w-full !h-full icons icon-search" />
+                                </button>
+                            </div>
+
+                            <div className="tool-btn-list border grid w-auto border-[#DFE4EC] bg-[#F5F8FF] p-1 rounded-[8px] text-center grid-cols-2 font-500 text-[#5D6776] gap-1">
+                                <button 
+                                    type="button" 
+                                    onClick={ () => setDevice("desktop")}
+                                    className={`js-device-btn px-3 w-[120px] h-[39px] flex items-center justify-center gap-[6px] rounded-[8px] overflow-hidden
+                                        ${device === 'desktop' ? 'current' : ''}
+                                    `}>
+                                    <i className="lazy icon w-5 h-5 bg-center bg-[length:contain] bg-no-repeat" style={{ backgroundImage: "url(/images/icon-desktop.png)" }} />
+                                    <span> Desktop </span>
+                                </button>
+
+                                <button 
+                                    type="button" 
+                                    onClick={ () => setDevice("laptop")}
+                                    className={`js-device-btn px-3 w-[120px] h-[39px] flex items-center justify-center gap-[6px] rounded-[8px] overflow-hidden
+                                        ${device === 'laptop' ? 'current' : ''}
+                                    `}>
+                                    <i className="lazy icon w-5 h-5 bg-center bg-[length:contain] bg-no-repeat" style={{ backgroundImage: "url(/images/icon-laptop.png)" }} />
+                                    <span> Laptop </span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-center"> Chọn phần mềm và xem cấu hình gợi ý </p>
+
+                    <div className="software-list grid grid-cols-4 lg:grid-cols-7 gap-x-[16px] gap-y-[24px] lg:gap-x-[32px] lg:gap-y-[48px] text-center mb-8">
+                        {filteredSoftware.map((item: any) =>
+                            <button
+                                key={item.id}
+                                data-id={item.url_index}
+                                className="js-software-item item text-12 leading-4 lg:text-[14px] lg:leading-[18px] font-500 hover:text-[#0676DA] flex flex-col"
+                            >
+                                <span className="img block mb-2 lg:mb-3 relative pb-[100%]">
+                                    <img src={item.image}
+                                        alt={item.name}
+                                        width={1}
+                                        height={1}
+                                        className="block absolute w-full h-full object-cover rounded-[24px]" />
+                                </span>
+                                <span className="text"> {item.name} </span>
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+
+                <div className="designer-faq-container bg-[#e8ecf6] lg:-mb-16">
+                    <div className="global-faq-container 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>
+
+                        <FAQ />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/home/Slider/index.tsx

@@ -34,7 +34,6 @@ export default function Slider() {
                                 </SwiperSlide>
                             )
                         }
-                        
                     </Swiper>
 
                     <div className="custom-nav hidden">

src/components/layout/StaticStyleLoader.tsx

@@ -0,0 +1,14 @@
+// components/layout/StaticStyleLoader.tsx
+'use client';
+
+import { useEffect } from 'react';
+
+export default function StaticStyleLoader() {
+    useEffect(() => {
+        // Import CSS chỉ khi component được mount
+        import('@/styles/static_page.css');
+        import('@/styles/tuyen_dung.css');
+    }, []);
+
+    return null;
+}

src/components/other/Footer/Newsletter.tsx

@@ -2,7 +2,7 @@ export default function Newsletter() {
     return (
         <div className="footer-newsletter-container py-12 mt-16">
             <div className="container flex flex-wrap items-center justify-between gap-12 relative z-[1]">
-                <i className="lazy icon-newsletter" style={{ backgroundImage: 'url(images/footer-newsletter.png)' }}></i>
+                <i className="lazy icon-newsletter" style={{ backgroundImage: 'url(/images/footer-newsletter.png)' }}></i>
 
                 <p className="m-0 text-white font-600 text-20">Hãy để lại Email để nhận thông báo Khuyến mại hấp dẫn hoặc tư vấn miễn phí từ Hoàng Hà PC!</p>
 

src/components/other/Footer/Showroom.tsx

@@ -9,7 +9,7 @@ export default function Showroom(){
                         <div className="item-triangle"> </div>
 
                         <div className="image">
-                            <img src="images/hoang-ha-pc-cau-giay.png" alt="HoangHaPc Cầu Giấy" width="1" height="1" className="block lazy"/>
+                            <img src="/images/hoang-ha-pc-cau-giay.png" alt="HoangHaPc Cầu Giấy" width="1" height="1" className="block lazy"/>
                         </div>
 
                         <div className="text">
@@ -46,7 +46,7 @@ export default function Showroom(){
                         <div className="item-triangle"> </div>
 
                         <div className="image">
-                            <img src="images/hoang-ha-pc-dong-da-5.jpg" alt="HoangHaPc Đống Đa" width="1" height="1" className="block lazy"/>
+                            <img src="/images/hoang-ha-pc-dong-da-5.jpg" alt="HoangHaPc Đống Đa" width="1" height="1" className="block lazy"/>
                         </div>
 
                         <div className="text">
@@ -83,7 +83,7 @@ export default function Showroom(){
                         <div className="item-triangle"> </div>
 
                         <div className="image">
-                            <img src="images/hoang_ha_pc_vinh.jpg" alt="HoangHaPc Vinh" width="1" height="1" className="block lazy"/>
+                            <img src="/images/hoang_ha_pc_vinh.jpg" alt="HoangHaPc Vinh" width="1" height="1" className="block lazy"/>
                         </div>
 
                         <div className="text">
@@ -120,7 +120,7 @@ export default function Showroom(){
                         <div className="item-triangle"> </div>
 
                         <div className="image">
-                            <img src="images/hoang-ha-pc-hcm.jpg" alt="HoangHaPc HỒ CHÍ MINH" width="1" height="1" className="block lazy"/>
+                            <img src="/images/hoang-ha-pc-hcm.jpg" alt="HoangHaPc HỒ CHÍ MINH" width="1" height="1" className="block lazy"/>
                         </div>
 
                         <div className="text">

src/components/static/store/StoreItem.tsx

@@ -0,0 +1,101 @@
+'use client';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+
+export default function StoreItem({ item, storeId }: any) {
+
+    return (
+        <>
+            <div className="showroom-item">
+                <div className="container grid grid--content-1">
+                    <div className="showroom-contact p-4">
+                        <p className="font-weight-bold color-primary mb-1">
+                            {
+                                storeId === 4 ? 'Trung Tâm Bảo Hành' : 'Showroom bán hàng'
+                            }
+                        </p>
+
+                        <h4 className="text-28 font-weight-bold mb-3 uppercase">
+                            {item.district}
+                        </h4>
+
+                        <ul className="contact-list d-flex flex-column mb-3">
+                            <li className="d-flex align-items-center">
+                                <i className="static-icons static-icon-phone" />
+                                <a className="text-14" href={`tel:${item.tel}`}>
+                                    Điện thoại: {item.tel}
+                                </a>
+                            </li>
+
+                            <li className="d-flex align-items-center">
+                                <i className="static-icons static-icon-mail" />
+                                <a className="text-14" href={`mailto:${item.email}`}>
+                                    Email: {item.email}
+                                </a>
+                            </li>
+
+                            <li className="d-flex align-items-center">
+                                <i className="static-icons static-icon-clock" />
+                                <p className="text-14 m-0">
+                                    Thời gian làm việc: {item.time}
+                                </p>
+                            </li>
+                        </ul>
+
+                        <div className="js-footer-map-item my-4 relative">
+                            <iframe
+                                src={item.map}
+                                width={490}
+                                height={324}
+                                className="m-0"
+                                allowFullScreen
+                                loading="lazy"
+                                referrerPolicy="no-referrer-when-downgrade">
+                            </iframe>
+                        </div>
+                    </div>
+
+                    <div className="showroom-image p-4">
+                        <div className="showroom-image-content">
+                            <Swiper
+                                spaceBetween={10}
+                                slidesPerView={1}
+                                loop={true}
+                                autoplay={{
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                }}
+                                modules={[Navigation, Pagination, Autoplay]}
+                                navigation={{
+                                    prevEl: ".swiper-button-prev",
+                                    nextEl: ".swiper-button-next",
+                                }}
+                                pagination={{ clickable: true }}
+                            >
+                                {item.images.map((image: string, index: number) =>
+                                    <SwiperSlide key={index}>
+                                        <img
+                                            src={image}
+                                            alt="Showroom Hoàng Hà PC"
+                                        />
+                                    </SwiperSlide>
+                                )}
+                            </Swiper>
+
+                            <div className="showroom-image-bottom d-flex align-items-center">
+                                <div className="showroom-image-bottom-logo">
+                                    <i className="static-icons static-icon-logo-small" />
+                                </div>
+
+                                <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
+                                    <i className="static-icons static-icon-location-small" />
+                                    <span> {item.address} </span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/static/store/index.tsx

@@ -1,24 +1,16 @@
 'use client';
-import { useState, useEffect } from "react";
-import { StoreList } from "@/data/store"
-import Feature from "./Feature"
+import { useState, useMemo } from "react";
+import { StoreList } from "@/data/store";
+import Feature from "./Feature";
+import StoreItem from "./StoreItem";
 
 export default function HeThongCuaHang() {
-    console.log('StoreList: ', StoreList)
     
-    const [ id, setId ] = useState(1);
+    const [ storeId, setStoreId ] = useState(1);
 
-    useEffect( ()=>{
-        console.log(id)
-    }, [id]);
-
-    const storeHandle = (e: number | string) => {
-        const id = Number(e)
-        setId(id);
-
-        
-
-    }
+    const storeData = useMemo(() => {
+        return StoreList.find((item: any) => Number(item.id) === Number(storeId));
+    }, [storeId]);
 
     return (
         <>
@@ -40,8 +32,8 @@ export default function HeThongCuaHang() {
 
                     <div className="showroom-region-box font-weight-bold">
                         <ul className="grid grid--3-cols">
-                            <li className={ id === 1 ? "active" : '' }
-                                onClick={()=>storeHandle(1)}
+                            <li className={ storeId === 1 ? "active" : '' }
+                                onClick={ () => setStoreId(1)}
                             >
                                 <i className="static-icons static-icon-region-hn" />
                                 <span className="text-28 text-center title">
@@ -49,8 +41,8 @@ export default function HeThongCuaHang() {
                                 </span>
                             </li>
 
-                            <li className={ id === 2 ? "active" : '' }
-                                onClick={()=>storeHandle(2)}
+                            <li className={ storeId === 2 ? "active" : '' }
+                                onClick={ () => setStoreId(2)}
                             >
                                 <i className="static-icons static-icon-region-central" style={{ backgroundImage: 'url(/images/showroom-central.png)', backgroundRepeat: 'no-repeat', backgroundSize: 'contain', backgroundPosition: 'center' }} />
                                 <span className="text-28 text-center title">
@@ -58,8 +50,8 @@ export default function HeThongCuaHang() {
                                 </span>
                             </li>
 
-                            <li className={ id === 3 ? "active" : '' }
-                                onClick={()=>storeHandle(3)}
+                            <li className={ storeId === 3 ? "active" : '' }
+                                onClick={ () => setStoreId(3)}
                             >
                                 <i className="static-icons static-icon-region-hcm" />
                                 <span className="text-28 text-center title">
@@ -67,8 +59,8 @@ export default function HeThongCuaHang() {
                                 </span>
                             </li>
 
-                            <li className={ id === 4 ? "active" : '' }
-                                onClick={()=>storeHandle(4)}
+                            <li className={ storeId === 4 ? "active" : '' }
+                                onClick={ () => setStoreId(4)}
                             >
                                 <i className="static-icons static-icon-region-ttbh" />
                                 <span className="text-28 text-center title">
@@ -79,456 +71,27 @@ export default function HeThongCuaHang() {
                     </div>
                 </div>
                 
-                {/* KHU VỰC MIỀN BẮC */}
-                <div className="showroom-content active" id="js-showroom-north">
-                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
+                {   storeData && 
+                    <div className="showroom-content active">
+                        <h3 className="text-28 uppercase d-flex flex-column align-items-center color-primary font-weight-600">
                             <i className="static-icons static-icon-location" />
-                        KHU VỰC MIỀN BẮC
+                            {storeData.title}
                         </h3>
 
-                    {/* SHOWROOM LIST */}
                         <div className="showroom-list">
-                        <div className="showroom-item">
-                            <div className="container grid grid--content-1">
-                                {/* SHOWROOM CONTACT */}
-                                <div className="showroom-contact p-4">
-                                    <p className="font-weight-bold color-primary mb-1">Showroom bán hàng</p>
-                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG CẦU GIẤY, HÀ NỘI</h4>
-                                    <ul className="contact-list d-flex flex-column mb-3">
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-phone" />
-                                            <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-mail" />
-                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-clock" />
-                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
-                                        </li>
-                                    </ul>
+                            { 
+                                storeData.info.map( (item:any, index:number) =>
+                                    <StoreItem 
+                                        key={`${storeId}_${index}`} 
+                                        item={item} 
+                                        storeId={storeId} 
+                                    />
+                                )
+                            }
+                        </div>
+                    </div>
+                }
                 
-                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14895.88175394404!2d105.7839668!3d21.0338688!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abd416877447%3A0xdfce989c77925c71!2zSG_DoG5nIEjDoCBQQw!5e0!3m2!1svi!2s!4v1665992223153!5m2!1svi!2s">
-                                        <img src="/images/footer-showroom-cg.png" alt="showroom cầu giấy" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
-                                    </div>
-                                </div>
-
-                                {/* SHOWROOM IMAGES */}
-                                <div className="showroom-image p-4">
-                                    <div className="showroom-image-content">
-                                        {/* SWIPER SLIDER */}
-                                        <div className="swiper showroom-swiper">
-                                            <div className="swiper-wrapper">
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-cau-giay.png" alt="Showroom Hoàng Hà PC cầu giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-cau-giay-6.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-cau-giay-7.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-cau-giay-8.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-cau-giay-9.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/static-showroom-pc-1.png" alt="Showroom Hoàng Hà PC cầu giấy" />
-                                                </div>
-                                            </div>
-                                            <div className="swiper-pagination" />
-                                            <div className="swiper-button-next" />
-                                            <div className="swiper-button-prev" />
-                                        </div>
-
-                                        <div className="showroom-image-bottom d-flex align-items-center">
-                                            <div className="showroom-image-bottom-logo">
-                                                <i className="static-icons static-icon-logo-small" />
-                                            </div>
-                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
-                                                <i className="static-icons static-icon-location-small" />
-                                                <span>Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Thành phố Hà Nội</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="showroom-item">
-                            <div className="container grid grid--content-1">
-                                {/* SHOWROOM CONTACT */}
-                                <div className="showroom-contact p-4">
-                                    <p className="font-weight-bold color-primary mb-1">Showroom bán hàng</p>
-                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG ĐỐNG ĐA, HÀ NỘI</h4>
-                                    <ul className="contact-list d-flex flex-column mb-3">
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-phone" />
-                                            <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-mail" />
-                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-clock" />
-                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
-                                        </li>
-                                    </ul>
-                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.7069099501123!2d105.8183181!3d21.0043826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135adb26e178fc3%3A0x18f812bf0be1c328!2zSG_DoG5nIEjDoCBQQyAtIE3DoXkgVMOtbmggQ2h1ecOqbiBE4bulbmcgQ2hvIMSQ4buTIEjhu41h!5e0!3m2!1svi!2s!4v1665992568314!5m2!1svi!2s">
-                                        <img src="/images/footer-showroom-dd.png" alt="showroom ĐỐNG ĐA" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
-                                    </div>
-                                </div>
-                                
-                                {/* SHOWROOM IMAGES */}
-                                <div className="showroom-image p-4">
-                                    <div className="showroom-image-content">
-                                        {/* SWIPER SLIDER */}
-                                        <div className="swiper showroom-swiper">
-                                            <div className="swiper-wrapper">
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-dong-da-5.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-dong-da-1.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-dong-da-2.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-dong-da-3.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-dong-da-4.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
-                                                </div>
-                                            </div>
-                                            <div className="swiper-pagination" />
-                                            <div className="swiper-button-next" />
-                                            <div className="swiper-button-prev" />
-                                        </div>
-                                        <div className="showroom-image-bottom d-flex align-items-center">
-                                            <div className="showroom-image-bottom-logo">
-                                                <i className="static-icons static-icon-logo-small" />
-                                            </div>
-                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
-                                                <i className="static-icons static-icon-location-small" />
-                                                <span>
-                                                    Số 94E-94F Đường Láng, Phường Đống Đa, Thành phố Hà Nội
-                                                </span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* KHU VỰC MIỀN Trung */}
-                <div className="showroom-content" id="js-showroom-central">
-                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
-                        <i className="static-icons static-icon-location" />
-                        KHU VỰC MIỀN TRUNG
-                    </h3>
-                    {/* SHOWROOM LIST */}
-                    <div className="showroom-list">
-                        <div className="showroom-item">
-                            <div className="container grid grid--content-1">
-                                {/* SHOWROOM CONTACT */}
-                                <div className="showroom-contact p-4">
-                                    <p className="font-weight-bold color-primary mb-1"> Showroom bán hàng </p>
-                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG THÀNH VINH, NGHỆ AN</h4>
-                                    <ul className="contact-list d-flex flex-column mb-3">
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-phone" />
-                                            <a className="text-14" href="tel:0988.163.666">Điện thoại: 0988.163.666</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-mail" />
-                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-clock" />
-                                            <a className="text-14" href="#">Thời gian làm việc: 8h30 - 18h30</a>
-                                        </li>
-                                    </ul>
-                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3779.5322054356734!2d105.67231487475244!3d18.68497646413254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3139cfef9f96ca75%3A0xff0d17989684e4c0!2zSG_DoG5nIEjDoCBQQyBWaW5oIE5naOG7hyBBbg!5e0!3m2!1svi!2s!4v1683532168493!5m2!1svi!2s">
-                                        <img src="/images/footer-showroom-hcm.png" alt="showroom Vinh, Nghệ An" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
-                                    </div>
-                                </div>
-                                {/* SHOWROOM IMAGES */}
-                                <div className="showroom-image p-4">
-                                    <div className="showroom-image-content">
-                                        {/* SWIPER SLIDER */}
-                                        <div className="swiper showroom-swiper">
-                                            <div className="swiper-wrapper">
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang_ha_pc_vinh.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang_ha_pc_vinh_1.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang_ha_pc_vinh_2.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang_ha_pc_vinh_3.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang_ha_pc_vinh_4.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang_ha_pc_vinh_10.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
-                                                </div>
-                                            </div>
-                                            <div className="swiper-pagination" />
-                                            <div className="swiper-button-next" />
-                                            <div className="swiper-button-prev" />
-                                        </div>
-                                        <div className="showroom-image-bottom d-flex align-items-center">
-                                            <div className="showroom-image-bottom-logo">
-                                                <i className="static-icons static-icon-logo-small" />
-                                            </div>
-                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
-                                                <i className="static-icons static-icon-location-small" />
-                                                <span>Số 72 Lê Lợi, Phường Thành Vinh, Nghệ An</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {/* KHU VỰC MIỀN NAM */}
-                <div className="showroom-content" id="js-showroom-south">
-                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
-                        <i className="static-icons static-icon-location" />
-                        KHU VỰC MIỀN NAM
-                    </h3>
-                    {/* SHOWROOM LIST */}
-                    <div className="showroom-list">
-                        <div className="showroom-item">
-                            <div className="container grid grid--content-1">
-                                {/* SHOWROOM CONTACT */}
-                                <div className="showroom-contact p-4">
-                                    <p className="font-weight-bold color-primary mb-1">
-                                        Showroom bán hàng
-                                    </p>
-                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG HÒA HƯNG, HỒ CHÍ MINH</h4>
-                                    <ul className="contact-list d-flex flex-column mb-3">
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-phone" />
-                                            <a className="text-14" href="tel:0968.123.666">Điện thoại: 0968.123.666</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-mail" />
-                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-clock" />
-                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
-                                        </li>
-                                    </ul>
-                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5694598705045!2d106.65907779999999!3d10.7676269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f2967d5137f%3A0xe796f763bd2f650b!2zSG_DoG5nIEjDoCBQQyBI4buTIENow60gTWluaA!5e0!3m2!1svi!2s!4v1665992598210!5m2!1svi!2s">
-                                        <img src="/images/footer-showroom-hcm.png" alt="showroom Hồ Chí Minh" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
-                                    </div>
-                                </div>
-                                {/* SHOWROOM IMAGES */}
-                                <div className="showroom-image p-4">
-                                    <div className="showroom-image-content">
-                                        {/* SWIPER SLIDER */}
-                                        <div className="swiper showroom-swiper">
-                                            <div className="swiper-wrapper">
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-1.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-2.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-3.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-4.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-5.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                            </div>
-                                            <div className="swiper-pagination" />
-                                            <div className="swiper-button-next" />
-                                            <div className="swiper-button-prev" />
-                                        </div>
-                                        <div className="showroom-image-bottom d-flex align-items-center">
-                                            <div className="showroom-image-bottom-logo">
-                                                <i className="static-icons static-icon-logo-small" />
-                                            </div>
-                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
-                                                <i className="static-icons static-icon-location-small" />
-                                                <span>K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {/* Trung Tâm Bảo hành */}
-                <div className="showroom-content" id="js-showroom-warranty">
-                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
-                        <i className="static-icons static-icon-location" />
-                        TRUNG TÂM BẢO HÀNH
-                    </h3>
-                    {/* SHOWROOM LIST */}
-                    <div className="showroom-list">
-                        <div className="showroom-item">
-                            <div className="container grid grid--content-1">
-                                {/* SHOWROOM CONTACT */}
-                                <div className="showroom-contact p-4">
-                                    <p className="font-weight-bold color-primary mb-1"> Trung Tâm Bảo Hành </p>
-                                    <h4 className="text-28 font-weight-bold mb-3"> PHƯỜNG CẦU GIẤY, HÀ NỘI </h4>
-                                    <ul className="contact-list d-flex flex-column mb-3">
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-phone" />
-                                            <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-mail" />
-                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-clock" />
-                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
-                                        </li>
-                                    </ul>
-                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14895.88175394404!2d105.7839668!3d21.0338688!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abd416877447%3A0xdfce989c77925c71!2zSG_DoG5nIEjDoCBQQw!5e0!3m2!1svi!2s!4v1665992223153!5m2!1svi!2s">
-                                        <img src="/images/footer-showroom-cg.png" alt="showroom cầu giấy" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
-                                    </div>
-                                </div>
-                                {/* SHOWROOM IMAGES */}
-                                <div className="showroom-image p-4">
-                                    <div className="showroom-image-content">
-                                        {/* SWIPER SLIDER */}
-                                        <div className="swiper showroom-swiper">
-                                            <div className="swiper-wrapper">
-                                                <div className="swiper-slide">
-                                                    <img src="/images/phong-bao-hanh-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/phong-bao-hanh-2-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/phong-bao-hanh-3-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/phong-bao-hanh-4-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/phong-bao-hanh-5-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/phong-bao-hanh-6-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
-                                                </div>
-                                            </div>
-                                            <div className="swiper-pagination" />
-                                            <div className="swiper-button-next" />
-                                            <div className="swiper-button-prev" />
-                                        </div>
-                                        <div className="showroom-image-bottom d-flex align-items-center">
-                                            <div className="showroom-image-bottom-logo">
-                                                <i className="static-icons static-icon-logo-small" />
-                                            </div>
-                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
-                                                <i className="static-icons static-icon-location-small" />
-                                                <span>
-                                                    Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội
-                                                </span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="showroom-item">
-                            <div className="container grid grid--content-1">
-                                {/* SHOWROOM CONTACT */}
-                                <div className="showroom-contact p-4">
-                                    <p className="font-weight-bold color-primary mb-1">
-                                        Trung Tâm Bảo Hành
-                                    </p>
-                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG HÒA HƯNG, HỒ CHÍ MINH</h4>
-                                    <ul className="contact-list d-flex flex-column mb-3">
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-phone" />
-                                            <a className="text-14" href="tel:0968.123.666">Điện thoại: 0968.123.666</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-mail" />
-                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
-                                        </li>
-                                        <li className="d-flex align-items-center">
-                                            <i className="static-icons static-icon-clock" />
-                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
-                                        </li>
-                                    </ul>
-                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5694598705045!2d106.65907779999999!3d10.7676269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f2967d5137f%3A0xe796f763bd2f650b!2zSG_DoG5nIEjDoCBQQyBI4buTIENow60gTWluaA!5e0!3m2!1svi!2s!4v1665992598210!5m2!1svi!2s">
-                                        <img src="/images/footer-showroom-hcm.png" alt="showroom Hồ Chí Minh" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
-                                    </div>
-                                </div>
-                                {/* SHOWROOM IMAGES */}
-                                <div className="showroom-image p-4">
-                                    <div className="showroom-image-content">
-                                        {/* SWIPER SLIDER */}
-                                        <div className="swiper showroom-swiper">
-                                            <div className="swiper-wrapper">
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-1.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-2.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-3.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-4.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                                <div className="swiper-slide">
-                                                    <img src="/images/hoang-ha-pc-hcm-5.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
-                                                </div>
-                                            </div>
-                                            <div className="swiper-pagination" />
-                                            <div className="swiper-button-next" />
-                                            <div className="swiper-button-prev" />
-                                        </div>
-                                        <div className="showroom-image-bottom d-flex align-items-center">
-                                            <div className="showroom-image-bottom-logo">
-                                                <i className="static-icons static-icon-logo-small" />
-                                            </div>
-                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
-                                                <i className="static-icons static-icon-location-small" />
-                                                <span>K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                {/* SHOWROOM FEATURES */}
                 <Feature />
             </div>
         </>

src/data/designer-tool/index.tsx

@@ -0,0 +1,651 @@
+export const DesignerToolData = {
+    "title": "Công cụ thiết kế",
+    "item_list": [
+
+        {
+            "id": 1,
+            "image": "https://hoanghapc.vn/media/designer-tool/1.png",
+            "url_index": "adobe-photoshop",
+            "name": "Adobe Photoshop",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "adobe photoshop",
+            "product_count": 27,
+            "status": 1,
+            "ordering": 50,
+            "create_by": "Hurasoft",
+            "create_time": 1760330876,
+            "last_update": 1761038140,
+            "last_update_by": "Hurasoft",
+            "counter": 1
+        },
+
+        {
+            "id": 10,
+            "image": "https://hoanghapc.vn/media/designer-tool/10.png",
+            "url_index": "premiere-pro",
+            "name": "Premiere Pro",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "premiere hurapro",
+            "product_count": 30,
+            "status": 1,
+            "ordering": 10,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760340591,
+            "last_update": 1761038021,
+            "last_update_by": "Hurasoft",
+            "counter": 2
+        },
+
+        {
+            "id": 25,
+            "image": "https://hoanghapc.vn/media/designer-tool/25.png",
+            "url_index": "keyshot",
+            "name": "Keyshot",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "keyshot",
+            "product_count": 43,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706224,
+            "last_update": 1761706224,
+            "last_update_by": "Mai Văn Học",
+            "counter": 3
+        },
+
+        {
+            "id": 19,
+            "image": "https://hoanghapc.vn/media/designer-tool/19.png",
+            "url_index": "cnema-4d",
+            "name": "Cinema 4D",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "cinema hura4d",
+            "product_count": 35,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761705340,
+            "last_update": 1761705340,
+            "last_update_by": "Mai Văn Học",
+            "counter": 4
+        },
+
+        {
+            "id": 20,
+            "image": "https://hoanghapc.vn/media/designer-tool/20.png",
+            "url_index": "houdini",
+            "name": "Houdini",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "houdini",
+            "product_count": 35,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761705426,
+            "last_update": 1761705426,
+            "last_update_by": "Mai Văn Học",
+            "counter": 5
+        },
+
+        {
+            "id": 21,
+            "image": "https://hoanghapc.vn/media/designer-tool/21.png",
+            "url_index": "zbrush",
+            "name": "ZBrush",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "zbrush",
+            "product_count": 45,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761705591,
+            "last_update": 1761705591,
+            "last_update_by": "Mai Văn Học",
+            "counter": 6
+        },
+
+        {
+            "id": 22,
+            "image": "https://hoanghapc.vn/media/designer-tool/22.png",
+            "url_index": "game-development",
+            "name": "Game Development",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "game development",
+            "product_count": 38,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761705784,
+            "last_update": 1761705784,
+            "last_update_by": "Mai Văn Học",
+            "counter": 7
+        },
+
+        {
+            "id": 23,
+            "image": "https://hoanghapc.vn/media/designer-tool/23.png",
+            "url_index": "unity",
+            "name": "Unity",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "unity",
+            "product_count": 38,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761705944,
+            "last_update": 1761705944,
+            "last_update_by": "Mai Văn Học",
+            "counter": 8
+        },
+
+        {
+            "id": 24,
+            "image": "https://hoanghapc.vn/media/designer-tool/24.png",
+            "url_index": "unreal-engine",
+            "name": "Unreal Engine",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "unreal engine",
+            "product_count": 36,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706104,
+            "last_update": 1761706104,
+            "last_update_by": "Mai Văn Học",
+            "counter": 9
+        },
+
+        {
+            "id": 17,
+            "image": "https://hoanghapc.vn/media/designer-tool/17.png",
+            "url_index": "foundry-nuke",
+            "name": "Foundry Nuke",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "foundry nuke",
+            "product_count": 35,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761704979,
+            "last_update": 1761704979,
+            "last_update_by": "Mai Văn Học",
+            "counter": 10
+        },
+
+        {
+            "id": 26,
+            "image": "https://hoanghapc.vn/media/designer-tool/26.png",
+            "url_index": "octane-render",
+            "name": "OctaneRender",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "octanerender",
+            "product_count": 42,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706328,
+            "last_update": 1761706328,
+            "last_update_by": "Mai Văn Học",
+            "counter": 11
+        },
+
+        {
+            "id": 27,
+            "image": "https://hoanghapc.vn/media/designer-tool/27.png",
+            "url_index": "redshift",
+            "name": "Redshift",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "redshift",
+            "product_count": 33,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706493,
+            "last_update": 1761706493,
+            "last_update_by": "Mai Văn Học",
+            "counter": 12
+        },
+
+        {
+            "id": 28,
+            "image": "https://hoanghapc.vn/media/designer-tool/28.png",
+            "url_index": "v-ray",
+            "name": "V-Ray",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "hurav huraray",
+            "product_count": 38,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706593,
+            "last_update": 1761706593,
+            "last_update_by": "Mai Văn Học",
+            "counter": 13
+        },
+
+        {
+            "id": 29,
+            "image": "https://hoanghapc.vn/media/designer-tool/29.png",
+            "url_index": "inventor",
+            "name": "Inventor",
+            "description": ``,
+            "meta_title": "PC dành cho Inventor – Cấu hình tối ưu cho Autodesk Inventor",
+            "meta_description": `Khám phá các cấu hình PC dành cho Autodesk Inventor được Hoàng Hà PC tối ưu hiệu năng, giúp thiết kế, mô phỏng 3D mượt mà, ổn định và chính xác tuyệt đối.`,
+            "extend": `{"faq":{"1":{"title":"T\u00f4i n\u00ean ch\u1ecdn CPU n\u00e0o cho PC ch\u1ea1y Inventor t\u1ed1t nh\u1ea5t?","content":"Autodesk Inventor \u01b0u ti\u00ean xung nh\u1ecbp CPU cao h\u01a1n s\u1ed1 nh\u00e2n. V\u00ec v\u1eady, CPU nh\u01b0 Intel Core i7-14700K ho\u1eb7c AMD Ryzen 7 7800X3D l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng. N\u1ebfu b\u1ea1n l\u00e0m m\u00f4 ph\u1ecfng ho\u1eb7c render ph\u1ee9c t\u1ea1p, c\u00f3 th\u1ec3 ch\u1ecdn Ryzen 9 ho\u1eb7c Intel Core i9 \u0111\u1ec3 t\u0103ng hi\u1ec7u n\u0103ng."}}}`,
+            "search_fulltext": "inventor",
+            "product_count": 46,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706745,
+            "last_update": 1761967593,
+            "last_update_by": "Mai Văn Học",
+            "counter": 14
+        },
+
+        {
+            "id": 30,
+            "image": "https://hoanghapc.vn/media/designer-tool/30.png",
+            "url_index": "revit",
+            "name": "Revit",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "revit",
+            "product_count": 46,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706851,
+            "last_update": 1761706851,
+            "last_update_by": "Mai Văn Học",
+            "counter": 15
+        },
+
+        {
+            "id": 31,
+            "image": "https://hoanghapc.vn/media/designer-tool/31.png",
+            "url_index": "solidworks",
+            "name": "Solidworks",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": `{"faq":{"1":{"title":"","content":""}}}`,
+            "search_fulltext": "solidworks",
+            "product_count": 50,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761706976,
+            "last_update": 1761967521,
+            "last_update_by": "Mai Văn Học",
+            "counter": 16
+        },
+
+        {
+            "id": 32,
+            "image": "https://hoanghapc.vn/media/designer-tool/32.png",
+            "url_index": "camtasia",
+            "name": "Camtasia",
+            "description": `<div class="section-row section-header-row">
+<div class="section-header">
+<h2 class="section-title">Your all-in-one solution for screen-first video</h2>
+<div class="section-text">Camtasia has everything you need to create polished, professional videos from screen recordings. Record, edit, and share all in one platform.</div>
+</div>
+</div>`,
+            "meta_title": "Meta Title",
+            "meta_description": `Meta Description :  `,
+            "extend": `{"faq":{"1":{"title":"Ti\u00eau \u0111\u1ec1 1","content":"N\u1ed9i dung "},"2":{"title":"Ti\u00eau \u0111\u1ec1 2","content":"test FAQ"}}}`,
+            "search_fulltext": "camtasia",
+            "product_count": 30,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761707168,
+            "last_update": 1761902221,
+            "last_update_by": "Hurasoft Đức",
+            "counter": 17
+        },
+
+        {
+            "id": 18,
+            "image": "https://hoanghapc.vn/media/designer-tool/18.png",
+            "url_index": "blender",
+            "name": "Blender",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "blender",
+            "product_count": 38,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761705219,
+            "last_update": 1761705219,
+            "last_update_by": "Mai Văn Học",
+            "counter": 18
+        },
+
+        {
+            "id": 16,
+            "image": "https://hoanghapc.vn/media/designer-tool/16.png",
+            "url_index": "davinci-resolve",
+            "name": "DaVinci Resolve",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "davinci resolve",
+            "product_count": 32,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761704836,
+            "last_update": 1761704836,
+            "last_update_by": "Mai Văn Học",
+            "counter": 19
+        },
+
+        {
+            "id": 15,
+            "image": "https://hoanghapc.vn/media/designer-tool/15.png",
+            "url_index": "stable-diffusion",
+            "name": "Stable Diffusion",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "stable diffusion",
+            "product_count": 37,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761704712,
+            "last_update": 1761704712,
+            "last_update_by": "Mai Văn Học",
+            "counter": 20
+        },
+
+        {
+            "id": 14,
+            "image": "https://hoanghapc.vn/media/designer-tool/14.png",
+            "url_index": "audition",
+            "name": "Audition",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "audition",
+            "product_count": 36,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761704548,
+            "last_update": 1761704548,
+            "last_update_by": "Mai Văn Học",
+            "counter": 21
+        },
+
+        {
+            "id": 13,
+            "image": "https://hoanghapc.vn/media/designer-tool/13.png",
+            "url_index": "dreamweaver",
+            "name": "Dreamweaver",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "dreamweaver",
+            "product_count": 34,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761704441,
+            "last_update": 1761704441,
+            "last_update_by": "Mai Văn Học",
+            "counter": 22
+        },
+
+        {
+            "id": 12,
+            "image": "https://hoanghapc.vn/media/designer-tool/12.png",
+            "url_index": "animate",
+            "name": "Animate",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "animate",
+            "product_count": 40,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761704281,
+            "last_update": 1761704290,
+            "last_update_by": "Mai Văn Học",
+            "counter": 23
+        },
+
+        {
+            "id": 11,
+            "image": "https://hoanghapc.vn/media/designer-tool/11.png",
+            "url_index": "lightroom-classic",
+            "name": "Lightroom Classic",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "lightroom classic",
+            "product_count": 25,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1761703981,
+            "last_update": 1761703994,
+            "last_update_by": "Mai Văn Học",
+            "counter": 24
+        },
+
+        {
+            "id": 9,
+            "image": "https://hoanghapc.vn/media/designer-tool/9.png",
+            "url_index": "sketchup",
+            "name": "SketchUp",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "sketchup",
+            "product_count": 29,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760340243,
+            "last_update": 1761038061,
+            "last_update_by": "Hurasoft",
+            "counter": 25
+        },
+
+        {
+            "id": 8,
+            "image": "https://hoanghapc.vn/media/designer-tool/8.png",
+            "url_index": "maya",
+            "name": "Maya",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "maya",
+            "product_count": 25,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760340156,
+            "last_update": 1761038069,
+            "last_update_by": "Hurasoft",
+            "counter": 26
+        },
+
+        {
+            "id": 7,
+            "image": "https://hoanghapc.vn/media/designer-tool/7.png",
+            "url_index": "3ds-max",
+            "name": "3Ds Max",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "hura3ds huramax",
+            "product_count": 26,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760340092,
+            "last_update": 1761038079,
+            "last_update_by": "Hurasoft",
+            "counter": 27
+        },
+
+        {
+            "id": 6,
+            "image": "https://hoanghapc.vn/media/designer-tool/6.png",
+            "url_index": "autocad",
+            "name": "AutoCAD",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "autocad",
+            "product_count": 29,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760340035,
+            "last_update": 1761038088,
+            "last_update_by": "Hurasoft",
+            "counter": 28
+        },
+
+        {
+            "id": 5,
+            "image": "https://hoanghapc.vn/media/designer-tool/5.png",
+            "url_index": "corel-draw",
+            "name": "Corel Draw",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "corel draw",
+            "product_count": 19,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760339972,
+            "last_update": 1761038102,
+            "last_update_by": "Hurasoft",
+            "counter": 29
+        },
+
+        {
+            "id": 4,
+            "image": "https://hoanghapc.vn/media/designer-tool/4.png",
+            "url_index": "indesign",
+            "name": "Indesign",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "indesign",
+            "product_count": 27,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760339886,
+            "last_update": 1761038110,
+            "last_update_by": "Hurasoft",
+            "counter": 30
+        },
+
+        {
+            "id": 3,
+            "image": "https://hoanghapc.vn/media/designer-tool/3.png",
+            "url_index": "after-effect",
+            "name": "After Effect",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "after effect",
+            "product_count": 27,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Mai Văn Học",
+            "create_time": 1760339540,
+            "last_update": 1761038119,
+            "last_update_by": "Hurasoft",
+            "counter": 31
+        },
+
+        {
+            "id": 2,
+            "image": "https://hoanghapc.vn/media/designer-tool/2.png",
+            "url_index": "adobe-illustrator",
+            "name": "Adobe Illustrator",
+            "description": ``,
+            "meta_title": "",
+            "meta_description": ``,
+            "extend": ``,
+            "search_fulltext": "adobe illustrator",
+            "product_count": 25,
+            "status": 1,
+            "ordering": 0,
+            "create_by": "Hurasoft",
+            "create_time": 1760337435,
+            "last_update": 1761038130,
+            "last_update_by": "Hurasoft",
+            "counter": 32
+        }
+
+    ]
+}

src/data/store/index.tsx

@@ -12,7 +12,7 @@ export const StoreList = [
                 "email"     : "hoanghapcws@gmail.com",
                 "time"      : "8h00 - 18h30",
                 "map"       : "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14895.88175394404!2d105.7839668!3d21.0338688!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abd416877447%3A0xdfce989c77925c71!2zSG_DoG5nIEjDoCBQQw!5e0!3m2!1svi!2s!4v1665992223153!5m2!1svi!2s",
-                "image"     : [
+                "images"    : [
                     "/images/hoang-ha-pc-cau-giay.png",
                     "/images/hoang-ha-pc-cau-giay-6.jpg",
                     "/images/hoang-ha-pc-cau-giay-7.jpg",
@@ -29,7 +29,7 @@ export const StoreList = [
                 "email"     : "hoanghapcws@gmail.com",
                 "time"      : "8h00 - 18h30",
                 "map"       : "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.7069099501123!2d105.8183181!3d21.0043826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135adb26e178fc3%3A0x18f812bf0be1c328!2zSG_DoG5nIEjDoCBQQyAtIE3DoXkgVMOtbmggQ2h1ecOqbiBE4bulbmcgQ2hvIMSQ4buTIEjhu41h!5e0!3m2!1svi!2s!4v1665992568314!5m2!1svi!2s",
-                "image"     : [
+                "images"    : [
                     "/images/hoang-ha-pc-dong-da-5.jpg",
                     "/images/hoang-ha-pc-dong-da-1.jpg",
                     "/images/hoang-ha-pc-dong-da-2.jpg",
@@ -53,7 +53,7 @@ export const StoreList = [
                 "email"     : "hoanghapcws@gmail.com",
                 "time"      : "8h00 - 18h30",
                 "map"       : "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3779.5322054356734!2d105.67231487475244!3d18.68497646413254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3139cfef9f96ca75%3A0xff0d17989684e4c0!2zSG_DoG5nIEjDoCBQQyBWaW5oIE5naOG7hyBBbg!5e0!3m2!1svi!2s!4v1683532168493!5m2!1svi!2s",
-                "image"     : [
+                "images"    : [
                     "/images/hoang_ha_pc_vinh.jpg",
                     "/images/hoang_ha_pc_vinh_1.jpg",
                     "/images/hoang_ha_pc_vinh_2.jpg",
@@ -78,7 +78,7 @@ export const StoreList = [
                 "email"     : "hoanghapcws@gmail.com",
                 "time"      : "8h00 - 18h30",
                 "map"       : "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5694598705045!2d106.65907779999999!3d10.7676269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f2967d5137f%3A0xe796f763bd2f650b!2zSG_DoG5nIEjDoCBQQyBI4buTIENow60gTWluaA!5e0!3m2!1svi!2s!4v1665992598210!5m2!1svi!2s",
-                "image"     : [
+                "images"    : [
                     "/images/hoang-ha-pc-hcm.jpg" ,
                     "/images/hoang-ha-pc-hcm-1.jpg",
                     "/images/hoang-ha-pc-hcm-2.jpg",
@@ -103,7 +103,7 @@ export const StoreList = [
                 "email"     : "hoanghapcws@gmail.com",
                 "time"      : "8h00 - 18h30",
                 "map"       : "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14895.88175394404!2d105.7839668!3d21.0338688!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abd416877447%3A0xdfce989c77925c71!2zSG_DoG5nIEjDoCBQQw!5e0!3m2!1svi!2s!4v1665992223153!5m2!1svi!2s",
-                "image"     : [
+                "images"    : [
                     "/images/phong-bao-hanh-min.jpg" ,
                     "/images/phong-bao-hanh-2-min.jpg",
                     "/images/phong-bao-hanh-3-min.jpg",
@@ -121,7 +121,7 @@ export const StoreList = [
                 "email"     : "hoanghapcws@gmail.com",
                 "time"      : "8h00 - 18h30",
                 "map"       : "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5694598705045!2d106.65907779999999!3d10.7676269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f2967d5137f%3A0xe796f763bd2f650b!2zSG_DoG5nIEjDoCBQQyBI4buTIENow60gTWluaA!5e0!3m2!1svi!2s!4v1665992598210!5m2!1svi!2s",
-                "image"     : [
+                "images"    : [
                     "/images/hoang-ha-pc-hcm.jpg" ,
                     "/images/hoang-ha-pc-hcm-1.jpg",
                     "/images/hoang-ha-pc-hcm-2.jpg",

src/lib/slug/resolveDesignerPage.ts

@@ -0,0 +1,15 @@
+import { DesignerToolDetail } from "@/data/designer-tool/Detail";
+
+export function resolveDesignerPage(slug: string) {    
+    
+    const data = DesignerToolDetail.find(
+        (item) => item.item_info.url_index === slug
+    );
+
+    if (!data) return null;
+    
+    return {
+        type: "designer_detail",
+        data,
+    };
+}

src/lib/slug/slugMap.ts

@@ -1,17 +1,21 @@
 import { resolveArticlePage } from "./resolveArticlePage";
 import { resolveProductPage } from "./resolveProductPage";
 import { resolveJobPage } from "./resolveJobPage";
+import { resolveDesignerPage } from "./resolveDesignerPage";
 
 export type SlugResult =
     | ReturnType<typeof resolveArticlePage>
     | ReturnType<typeof resolveProductPage>
-    | ReturnType<typeof resolveJobPage>;
+    | ReturnType<typeof resolveJobPage>
+    | ReturnType<typeof resolveDesignerPage>;
 
 export function findBySlug(slug?: string): SlugResult | null {
     
     if (!slug || slug.trim() === '') {
         return null;
     }    
+    
+
     // PRODUCT
     const product = resolveProductPage(slug);
     if (product) return product;
@@ -24,6 +28,10 @@ export function findBySlug(slug?: string): SlugResult | null {
     const job = resolveJobPage(slug);
     if (job) return job;
 
+    // Designer Tool
+    const designer = resolveDesignerPage(slug);
+    if (designer) return designer;
+
     // 404
     return null;
 }

src/lib/utils.tsx

@@ -91,3 +91,26 @@ export function normalizeKey(str: string) {
         .toLowerCase()
         .replace(/\s+/g, '-');
 }
+
+export function convertToSlug(text: string) {
+    let newText = text;
+    const lastDot = text.lastIndexOf(".");
+    if (lastDot > 0 && lastDot + 2 <= text.length) {
+        newText = text.substring(lastDot + 2);
+    }
+
+    return newText
+        .toLowerCase()
+        .replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a")
+        .replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e")
+        .replace(/ì|í|ị|ỉ|ĩ/g, "i")
+        .replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o")
+        .replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u")
+        .replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y")
+        .replace(/đ/g, "d")
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/[^\w ]+/g, "")
+        .trim()
+        .replace(/ +/g, "-");
+}

src/styles/tuyen_dung.css

@@ -489,7 +489,7 @@ ul,ol,dl,label{margin-bottom:0}
 .buy-online .guild-solution-content .box-gradient-item h3 {min-height: 36px;}
 .contact-info-content .contact-info-box {padding: 30px 20px;margin: 0 12px 0 0;width: calc(100% / 4 - 9px)}
 .contact-info-content .contact-info-box:nth-child(4n) {margin-right: 0}
-.contact-info-content .contact-info-box h4 {color: #0676DA;line-height: 32px;text-align: center;font-size: 20px}
+.contact-info-content .contact-info-box h4 {color: #0676DA;line-height: 32px;text-align: center;font-size: 20px;display: flex;align-items: center;justify-content: center;min-height: 64px;}
 .contact-info-content .contact-info-box p {min-height: 72px;}
 .payment-guild .guild-solution ul {display: flex;flex-wrap: wrap;gap: unset}
 .payment-guild .guild-solution .box-gradient-item {margin: 0 12px 12px 0;width: calc(100% / 4 - 43px)}