10/02

public/styles/library.css

@@ -1,4 +1,4 @@
-body{color:#333333;font-size:14px;line-height: 18px;font-family:'SF Pro Display',sans-serif;position:relative;word-break:break-word;counter-reset:section;font-weight:400;word-break: break-word;overflow-x:hidden}
+body{color:#333333;font-size:14px;line-height: 18px;font-family:'SF Pro Display',sans-serif;position:relative;word-break:break-word;counter-reset:section;font-weight:400;word-break: break-word;}
 .fancybox__container .for-video.is-selected {border: 2px solid red;}
 
 /* css loading */

src/app/(main)/[slug]/renderBySlug.tsx

@@ -1,30 +0,0 @@
-import { notFound } from "next/navigation";
-
-import ProductCategory from "@/components/product/category";
-import ProductDetail from "@/components/product/detail";
-import ArticleCategory from "@/components/article/category";
-import ArticleDetail from "@/components/article/detail";
-import ArticleHome from "@/components/article/home";
-
-export function renderBySlug(result: any, slug: string) {
-    
-    switch (result.type) {
-        case "product_category":
-            return <ProductCategory slug={result.data} />;
-
-        case "product_detail":
-            return <ProductDetail slug={result.data} />;
-
-        case "article_home":
-            return <ArticleHome />;
-
-        case "article_category":
-            return <ArticleCategory slug={result.data} />;
-
-        case "article_detail":
-            return <ArticleDetail slug={result.data} />;
-
-        default:
-            notFound();
-    }
-}

src/app/(main)/cart/page.tsx

@@ -1,5 +1,10 @@
 
 import CartHome from "@/components/cart/home";
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+    title: "Giỏ hàng của bạn",
+    description: "",
+};
 
 export default function Home() {
     return (

src/app/(main)/layout.tsx

@@ -1,13 +1,9 @@
 import type { ReactNode } from 'react';
-import Header from "@/components/other/header";
-import Footer from "@/components/other/footer";
 
 export default function MainLayout({ children }: { children: ReactNode }) {
     return (
         <>
-            <Header />
             {children}
-            <Footer />
         </>
     );
 }

src/app/(main)/page.tsx

@@ -1,6 +1,10 @@
 
 import Home from "@/components/home";
-
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+    title: "Homepage- Local Pc",
+    description: "hoanghapc",
+};
 export default function HomePage() {
     return (
         <Home />

src/app/(main)/send-cart/page.tsx

@@ -1,5 +1,10 @@
 
 import SendResult from "@/components/cart/send";
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+    title: "Gửi đơn hàng",
+    description: "",
+};
 
 export default function SendCartPage() {
     return (

src/app/(static)/he-thong-cua-hang/page.tsx

@@ -0,0 +1,11 @@
+import HeThongCuaHang from "@/components/static/store";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Hệ Thống Cửa Hàng - Hoàng Hà PC",
+    description: "Hệ Thống Cửa Hàng máy tính với 4 Showroom lớn Hoàng Hà PC Chuyên cung cấp máy tính cao cấp, máy tính đồ họa và linh kiện máy tính uy tín.",
+};
+    
+export default function Home() {
+    return <HeThongCuaHang />;
+}

src/app/(static)/layout.tsx

@@ -1,15 +1,15 @@
 import type { ReactNode } from 'react';
-import Header from "@/components/other/otherHeader";
+import LayoutTypeSetter from "@/components/layout/LayoutTypeSetter";
-import Footer from "@/components/other/otherFooter";
+
 import '@/styles/static_page.css';
 import '@/styles/tuyen_dung.css';
 
 export default function TuyenDungLayout({ children }: { children: ReactNode }) {
     return (
         <>
-            <Header />
+            <LayoutTypeSetter layout="static">
-            {children}
+                {children}
-            <Footer />
+            </LayoutTypeSetter>
         </>
     );
 }

src/app/(static)/tuyen-dung/page.tsx

@@ -1,4 +1,4 @@
-import RecruitPage from "@/components/recruit";
+import RecruitPage from "../../../components/recruit";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {

src/app/[slug]/SlugLayoutSetter.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect } from "react";
+import { useLayout } from "../../components/layout/LayoutContext";
+
+export default function SlugLayoutSetter({
+    layout,
+    children,
+}: {
+    layout: "main" | "static";
+    children: React.ReactNode;
+}) {
+    const { setLayout } = useLayout();
+
+    useEffect(() => {
+        setLayout(layout);
+    }, [layout, setLayout]);
+
+    return <>{children}</>;
+}

src/app/[slug]/metadataBySlug.tsx

@@ -54,15 +54,26 @@ export function metadataBySlug(result: any): Metadata {
         case "article_detail":
             return {
                 title: result.data.title,
-                description: result.data.excerpt,
+                description: result.data.meta_description,
+                openGraph: {
+                    type: 'article',
+                }
+            };
+
+        case "job_detail":
+            return {
+                title: result.data.title,
+                description: result.data.meta_description,
                 openGraph: {
                     type: 'article',
                 }
             };
 
         default:
+            
             return {
-                title: "Local PC",
+                title: result.meta_title || "Local PC",
+                description: result.data.meta_description || "",
                 openGraph: {
                     type: 'website',
                     images: [

src/app/[slug]/page.tsx

@@ -1,15 +1,13 @@
-// app/[slug]/page.tsx
 import { cache } from "react";
 import { renderBySlug } from "./renderBySlug";
 import { metadataBySlug } from "./metadataBySlug";
 import { findBySlug } from "@/lib/slug/slugMap";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import LayoutTypeSetter from "@/components/layout/LayoutTypeSetter"
+import { SLUG_CONFIG } from "./slugConfig";
 
 const getCachedSlugData = cache(async (slug: string) => {
-    if (!slug) return null;
-    // fetch data
-
     return findBySlug(slug);
 });
 
@@ -18,28 +16,23 @@ export async function generateMetadata({
 }: {
     params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
-    const { slug }  = await params;
+    const { slug } = await params;
-    const result    = await getCachedSlugData(slug);
+    const result = await getCachedSlugData(slug);
-    
+    if (!result) return { title: "Local PC" };
-    if (!result) {
-        return { 
-            title: "Local PC" 
-        };
-    }
-    
     return metadataBySlug(result);
 }
 
-export default async function SlugPage({
+export default async function SlugPage({ params }: { params: { slug: string } }) {
-    params,
-}: {
-    params: Promise<{ slug: string }>;
-}) {
     const { slug }  = await params;
     const result    = await getCachedSlugData(slug);
+    if (!result) notFound();
 
-    if (!result) {
+    const config = SLUG_CONFIG[result.type];
-        notFound();
+    if (!config) notFound();
-    }
+
-    return renderBySlug(result, slug);
+    return (
+        <LayoutTypeSetter layout={config.layout}>
+            {renderBySlug(result)}
+        </LayoutTypeSetter>
+    );
 }

src/app/[slug]/renderBySlug.tsx

@@ -0,0 +1,10 @@
+// app/[slug]/renderBySlug.tsx
+import { SLUG_CONFIG } from "./slugConfig";
+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

@@ -0,0 +1,43 @@
+// app/[slug]/slugConfig.ts
+import ProductCategory from "@/components/product/category";
+import ProductDetail from "@/components/product/detail";
+import ArticleCategory from "@/components/article/category";
+import ArticleDetail from "@/components/article/detail";
+import ArticleHome from "@/components/article/home";
+import JobDetail from "@/components/recruit/Detail";
+
+export type SlugLayout = "main" | "static";
+
+export const SLUG_CONFIG: 
+Record<string,{
+    layout: SlugLayout;
+    render: (data: any) => JSX.Element;
+}> = 
+{
+    product_category: {
+        layout: "main",
+        render: (data) => <ProductCategory slug={data} />,
+    },
+    product_detail: {
+        layout: "main",
+        render: (data) => <ProductDetail slug={data} />,
+    },
+    article_home: {
+        layout: "main",
+        render: () => <ArticleHome />,
+    },
+    article_category: {
+        layout: "main",
+        render: (data) => <ArticleCategory slug={data} />,
+    },
+    article_detail: {
+        layout: "main",
+        render: (data) => <ArticleDetail slug={data} />,
+    },
+
+    // TUYỂN DỤNG
+    job_detail: {
+        layout: "static",
+        render: (data) => <JobDetail slug={data} />,
+    },
+};

src/app/layout.tsx

@@ -1,22 +1,20 @@
-import type { Metadata } from "next";
+import { Toaster } from "sonner";
-import type { ReactNode } from 'react';
-import { Toaster } from 'sonner';
 import TooltipProvider from "@/components/providers/TooltipProvider";
-import '../styles/globals.css';
+import HeaderFooterSwitch from "@/components/other/HeaderFooterSwitch";
+import { LayoutProvider } from "@/components/layout/LayoutContext";
+import "../styles/globals.css";
 
-export const metadata: Metadata = {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
-    title: "Homepage- Local Pc",
-    description: "hoanghapc",
-};
-
-export default function RootLayout({ children }: { children: ReactNode }) {
     return (
         <html lang="vi">
             <body>
-                <TooltipProvider>
+                <LayoutProvider>
-                    {children}
+                    <HeaderFooterSwitch>
-                </TooltipProvider>
+                        <TooltipProvider>{children}</TooltipProvider>
-                <Toaster position="top-right" closeButton richColors />
+                    </HeaderFooterSwitch>
+
+                    <Toaster position="top-right" closeButton richColors />
+                </LayoutProvider>
             </body>
         </html>
     );

src/components/layout/LayoutContext.tsx

@@ -0,0 +1,28 @@
+// components/layout/LayoutContext.tsx
+"use client";
+
+import { createContext, useContext, useState } from "react";
+
+export type LayoutType = "main" | "static";
+
+const LayoutContext = createContext<{
+    layout: LayoutType;
+    setLayout: (v: LayoutType) => void;
+}>({
+    layout: "main",
+    setLayout: () => { },
+});
+
+export function LayoutProvider({ children }: { children: React.ReactNode }) {
+    const [layout, setLayout] = useState<LayoutType>("main");
+
+    return (
+        <LayoutContext.Provider value={{ layout, setLayout }}>
+            {children}
+        </LayoutContext.Provider>
+    );
+}
+
+export function useLayout() {
+    return useContext(LayoutContext);
+}

src/components/layout/LayoutTypeSetter.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { useLayout, LayoutType } from "./LayoutContext";
+
+export default function LayoutTypeSetter({
+    layout,
+    children,
+}: {
+    layout: LayoutType;
+    children: React.ReactNode;
+}) {
+    const { setLayout } = useLayout();
+
+    useEffect(() => {
+        setLayout(layout);
+    }, [layout, setLayout]);
+
+    return <>{children}</>;
+}

src/components/other/HeaderFooterSwitch.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useLayout } from "@/components/layout/LayoutContext";
+import Header from "./header";
+import Footer from "./footer";
+import OtherHeader from "./otherHeader";
+import OtherFooter from "./otherFooter";
+
+export default function HeaderFooterSwitch({ children }: any) {
+    const { layout } = useLayout();
+
+    const isStatic = layout === "static";
+
+    return (
+        <>
+            {isStatic ? <OtherHeader /> : <Header />}
+            {children}
+            {isStatic ? <OtherFooter /> : <Footer />}
+        </>
+    );
+}

src/components/recruit/Detail.tsx

@@ -0,0 +1,101 @@
+
+'use client';
+import { getRemainingDays } from "@/lib/times"
+import parse from "html-react-parser"
+import { JobData } from "@/data/articles/Job";
+import RecruitForm from "./Form";
+
+import '@/styles/static_page.css';
+import '@/styles/tuyen_dung.css';
+
+export default function JobDetail({ slug }: any) {
+    
+    const remain =  getRemainingDays(slug.extend.end_date);    
+    const data   =  JobData.list.filter((item: any) =>
+                        item.categories?.some((cat: any) => 
+                            cat.id == slug.article_category &&
+                            item.id != slug.id
+                    )) || [];
+
+    return (
+        <>
+            <div className="recruit-detail-page container d-flex flex-wrap">
+                <div className="col-left">
+                    <div>
+                        <h1 className="page-title"> {slug.title} </h1>
+
+                        { slug.extend.end_date &&
+                            <span className="recruit-date js-date-note" 
+                                data-date={slug.extend.end_date}> 
+                                (còn {remain} ngày)
+                            </span>
+                        }                        
+                        
+                        { slug.extend.location &&
+                            <p className="recruit-location">{slug.extend.location}</p>
+                        }                        
+                    </div>
+
+                    <div className="recruit-content-group">
+                        <div className="recruit-extend-list">
+                            <div className="item">
+                                <i className="static-icons icon-member" />
+                                <p>Số lượng</p>
+                                <b> {slug.extend.vacancy_num || 0} nhân viên </b>
+                            </div>
+
+                            <div className="item">
+                                <i className="static-icons icon-time-work" />
+                                <p>Hình thức làm việc</p>
+                                <b>8h00 - 18h00</b>
+                            </div>
+
+                            <div className="item">
+                                <i className="static-icons icon-payment" />
+                                <p>Mức lương</p>                                
+                                <b>
+                                    { slug.extend.salary 
+                                        ? slug.extend.salary 
+                                        : 'Thỏa thuận'
+                                    }
+                                </b>
+                            </div>
+
+                            <div className="item">
+                                <i className="static-icons icon-clock" />
+                                <p>Hạn nộp hồ sơ</p>
+                                <b>
+                                    { remain > 0 
+                                        ? slug.extend.end_date 
+                                        : 'Hết hạn'
+                                    }
+                                </b>
+                            </div>
+                        </div>
+
+                        <div className="recruit-detail-content">
+                            {parse(slug.content)}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-right">
+                    <div className="sticky top-[90px]">
+                        <RecruitForm />
+
+                        { data &&
+                            <div className="recruit-same-cate-group">
+                                <p className="title">Công việc liên quan</p>
+                                {
+                                    data.map( (item:any) => 
+                                        <a href={item.url} key={item.id} > {item.title} </a>
+                                    )
+                                }                                
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/recruit/Form.tsx

@@ -0,0 +1,31 @@
+export default function RecruitForm() {
+    return (
+        <>
+            <div className="recruit-form-group">
+                <div className="recruit-form-holder">
+                    <label>
+                        <input type="text" className="input-text text-capitalize" id="js-info-name" placeholder="Nhập họ và tên" />
+                        <span className="readonly">*</span>
+                    </label>
+
+                    <label>
+                        <input type="text" className="input-text" id="js-info-email" placeholder="Nhập địa chỉ email" />
+                        <span className="readonly">*</span>
+                    </label>
+
+                    <label>
+                        <input type="text" className="input-text" id="js-info-tel" placeholder="Nhập số điện thoại" />
+                        <span className="readonly">*</span>
+                    </label>
+                    
+                    <label style={{ border: 0 }}>
+                        <input type="file" className="hidden"/>
+                        <span className="btn-upload d-block cursor-pointer"> Click để tải lên CV của bạn </span>
+                    </label>
+                    
+                </div>
+                <button type="button" className="btn-submit block w-full"> Ứng tuyển ngay </button>
+            </div>
+        </>
+    )
+}

src/components/recruit/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { categories } from "@/data/categories";
 import { JobData } from "@/data/articles/Job";
 import RecruitItem from "@/components/shared/RecruitItem"

src/components/static/store/Feature.tsx

@@ -0,0 +1,63 @@
+export default function Feature() {
+    return (
+        <>
+            <div className="showroom-features py-4x">
+                <div className="container">
+                    <h3 className="text-28 font-weight-600 text-center pb-3x">
+                        CÁC TIỆN ÍCH TẠI SHOWROOM
+                    </h3>
+                    <ul className="grid grid--4-cols grid--gap-1 font-weight-bold color-secondary">
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-motobike mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Giữ xe miễn phí
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-wifi mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Wifi miễn phí
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-drink mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Đồ uống miễn phí
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-laptop mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Xem và trải nghiệm sản phẩm miễn phí
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-headphone mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Được tư vấn chuyên sâu về sản phẩm dịch vụ
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-card mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Có chính sách bán hàng trả góp
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-oto mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Giao hàng tận nhà
+                            </p>
+                        </li>
+                        <li className="d-flex flex-column align-items-center">
+                            <i className="static-icons static-icon-shield mt-3" />
+                            <p className="text-20 text-center mb-3 mt-2 px-4">
+                                Sản phẩm chính hãng 100%
+                            </p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/static/store/index.tsx

@@ -0,0 +1,536 @@
+'use client';
+import { useState, useEffect } from "react";
+import { StoreList } from "@/data/store"
+import Feature from "./Feature"
+
+export default function HeThongCuaHang() {
+    console.log('StoreList: ', StoreList)
+
+    const [ id, setId ] = useState(1);
+
+    useEffect( ()=>{
+        console.log(id)
+    }, [id]);
+
+    const storeHandle = (e: number | string) => {
+        const id = Number(e)
+        setId(id);
+
+        
+
+    }
+
+    return (
+        <>
+            <div className="showroom text-16 color-black">
+                <div className="showroom-header section-hero">
+                    <div className="container">
+                        <div className="text-box d-flex align-items-start justify-content-center flex-column font-weight-bold text-white">
+                            <h2 className="text-28 mb-2">HỆ THỐNG SHOWROOM HOÀNG HÀ PC</h2>
+                            <p className="mb-3">
+                                Địa điểm trải nghiệm và mua sắm thiết bị công nghệ.
+                            </p>
+                            <button type="button" className="btn btn-white"><span>Khám phá ngay</span></button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="showroom-region container py-4x">
+                    <h2 className="text-28 text-center pb-3x font-weight-600">CHỌN KHU VỰC CỦA BẠN</h2>
+
+                    <div className="showroom-region-box font-weight-bold">
+                        <ul className="grid grid--3-cols">
+                            <li className={ id === 1 ? "active" : '' }
+                                onClick={()=>storeHandle(1)}
+                            >
+                                <i className="static-icons static-icon-region-hn" />
+                                <span className="text-28 text-center title">
+                                    Khu vực <span className="color-primary">Miền Bắc</span>
+                                </span>
+                            </li>
+
+                            <li className={ id === 2 ? "active" : '' }
+                                onClick={()=>storeHandle(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">
+                                    Khu vực <span className="color-primary">Miền Trung</span>
+                                </span>
+                            </li>
+
+                            <li className={ id === 3 ? "active" : '' }
+                                onClick={()=>storeHandle(3)}
+                            >
+                                <i className="static-icons static-icon-region-hcm" />
+                                <span className="text-28 text-center title">
+                                    Khu vực <span className="color-primary">Miền Nam</span>
+                                </span>
+                            </li>
+
+                            <li className={ id === 4 ? "active" : '' }
+                                onClick={()=>storeHandle(4)}
+                            >
+                                <i className="static-icons static-icon-region-ttbh" />
+                                <span className="text-28 text-center title">
+                                    Trung Tâm <span className="color-primary">Bảo hành</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </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">
+                        <i className="static-icons static-icon-location" />
+                        KHU VỰC MIỀN BẮC
+                    </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>
+
+                                    <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/articles/Job.tsx

@@ -4,6 +4,7 @@ export const JobData = {
         {
             "id": 1185,
             "type": "job",
+            "content" : "<h3>1. Mô tả công việc</h3><p><strong>Lắp đặt, cài đặt máy tính và thiết bị ngoại vi:</strong><ul><li>Lắp ráp các bộ phận phần cứng của máy tính như CPU, RAM, ổ cứng, bo mạch chủ, card đồ họa, v.v.<li>Kết nối và cài đặt các thiết bị ngoại vi như máy in, máy scan, màn hình, bàn phím, chuột.<li>Cài đặt hệ điều hành (Windows, Linux, macOS) và các phần mềm cần thiết cho người dùng.</ul><p><strong>Kiểm tra và khắc phục sự cố phần cứng:</strong><ul><li>Kiểm tra các thành phần phần cứng máy tính để đảm bảo chúng hoạt động đúng cách.<li>Chẩn đoán và thay thế linh kiện bị hỏng hoặc lỗi.</ul><p><strong>Cài đặt và cấu hình phần mềm:</strong><ul><li>Cài đặt và cấu hình các phần mềm cơ bản và ứng dụng theo yêu cầu của khách hàng.<li>Đảm bảo các phần mềm được cài đặt chính xác và tối ưu cho máy tính.<li>Hỗ trợ khắc phục sự cố phần mềm như lỗi phần mềm, xung đột phần mềm, v.v.</ul><p><strong>Hỗ trợ kỹ thuật và tư vấn cho khách hàng:</strong><ul><li>Giải đáp thắc mắc và hướng dẫn sử dụng máy tính cho khách hàng.<li>Hỗ trợ khách hàng trong việc sửa chữa, bảo trì và nâng cấp máy tính.<li>Cung cấp tư vấn về các giải pháp phần cứng/phần mềm phù hợp với nhu cầu của khách hàng.</ul><h3><strong>2. Yêu cầu công việc</strong></h3><ul><li>Hiểu biết sâu rộng về phần cứng máy tính và các hệ điều hành phổ biến.<li>Có khả năng lắp ráp và cài đặt máy tính một cách chính xác.<li>Kỹ năng giải quyết sự cố phần cứng/phần mềm.<li>Khả năng giao tiếp tốt, hỗ trợ khách hàng một cách hiệu quả.<li>Độ tuổi từ 22 - 30 <li>Kinh nghiệm 2 năm trở lên</ul><h3>3. Quyền lợi:</h3><p>- Thu nhập từ 12.000.000Đ đến 15.000.000Đ<br>- Làm việc ở môi trường năng động, chuyên nghiệp<br>- Được xét thưởng hiệu quả kinh doanh hàng tháng và xét tăng lương theo hiệu quả công việc ( 1 năm xét tăng lương 1 lần)<br>- Được đóng BHXH, BHYT, BHTN theo quy định của Pháp luật.<br>- Được hưởng các chế độ phúc lợi khác của công ty (hiếu, hỉ, sinh nhật, ốm đau, …), đi du lịch nghỉ mát hàng năm<br>- Đươc thưởng các ngày lễ 30.4-1.5, 2.9, 20.10, tết dương<br>- Thưởng cuối năm lương tháng 13, tháng 14 (nếu công ty đạt hiệu quả kinh doanh tốt)<br>- Được thăng tiến theo năng lực và khả năng cống hiến<p><strong>Liên hệ: Ms Hằng</strong> - 0989163666<p><strong>Điền CV vào Form tuyển dụng hoặc CV gửi về Mail:</strong> hanhchinhnhansu@hoanghapc.vn",
             "changeCount": 0,
             "sellerId": 0,
             "article_category": "36",
@@ -17,7 +18,7 @@ export const JobData = {
             "extend": {
                 "salary": "12 Tri\u1ec7u \u0110\u1ebfn 15 Tri\u1ec7u ",
                 "vacancy_num": "5",
-                "end_date": "30-11-2025",
+                "end_date": "30-11-2026",
                 "location": "K8bis B\u1eedu Long, Ph\u01b0\u1eddng Ho\u00e0 H\u01b0ng, Th\u00e0nh ph\u1ed1 H\u1ed3 Ch\u00ed Minh"
             },
             "summary": "",
@@ -71,6 +72,7 @@ export const JobData = {
         {
             "id": 1497,
             "type": "job",
+            "content" : "<h3>1. Mô tả công việc</h3><p><strong>Triển khai, cài đặt và cấu hình hệ thống mạng:</strong><ul><li>Lắp đặt, cấu hình thiết bị mạng như router, switch, firewall.<li>Cài đặt các thiết bị viễn thông và thiết bị mạng LAN/WAN.<li>Đảm bảo hệ thống mạng hoạt động ổn định, thông suốt và an toàn.</ul><p><strong>Quản lý và giám sát hệ thống mạng:</strong><ul><li>Theo dõi và giám sát trạng thái của mạng.<li>Khắc phục sự cố mạng khi phát sinh.<li>Đảm bảo tính liên tục và khả dụng của hệ thống.</ul><p><strong>Hỗ trợ kỹ thuật cho khách hàng và nội bộ:</strong><ul><li>Giải đáp thắc mắc, hỗ trợ khắc phục sự cố liên quan đến mạng cho khách hàng và các bộ phận liên quan.<li>Đào tạo và hỗ trợ người dùng trong việc sử dụng mạng và thiết bị mạng.</ul><h3>2. Yêu cầu công việc:</h3><ul><li>Có kiến thức và kinh nghiệm về các hệ thống mạng (LAN, WAN, VPN).<li>Hiểu biết về các thiết bị mạng như router, switch, firewall, và các công nghệ mạng như IP, DNS, DHCP, v.v.<li>Có khả năng làm việc độc lập và theo nhóm, chịu được áp lực công việc cao.<li>Ưu tiên có các chứng chỉ liên quan tới hệ thống mạng</ul><h3>3. Quyền lợi:</h3><ul><li>Thu nhập từ 12.000.000Đ đến 15.000.000Đ<li>Làm việc ở môi trường năng động, chuyên nghiệp<li>Được xét thưởng hiệu quả kinh doanh hàng tháng và xét tăng lương theo hiệu quả công việc ( 1 năm xét tăng lương 1 lần)<li>Được đóng BHXH, BHYT, BHTN theo quy định của Pháp luật.<li>Được hưởng các chế độ phúc lợi khác của công ty (hiếu, hỉ, sinh nhật, ốm đau, …), đi du lịch nghỉ mát hàng năm<li>Đươc thưởng các ngày lễ 30.4-1.5, 2.9, 20.10, tết dương<li>Thưởng cuối năm lương tháng 13, tháng 14 (nếu công ty đạt hiệu quả kinh doanh tốt)<li>Được thăng tiến theo năng lực và khả năng cống hiến</ul><p><strong>Liên hệ: Ms Hằng</strong> - 0989163666<p><strong>Điền gửi CV vào Form tuyển dụng hoặc CV gửi về Mail:</strong> hanhchinhnhansu@hoanghapc.vn",
             "changeCount": 0,
             "sellerId": 0,
             "article_category": "36",
@@ -138,6 +140,7 @@ export const JobData = {
         {
             "id": 1178,
             "type": "job",
+            "content" : "<p>Vị trí Quay dựng Cameraman/ Editor giúp nâng tầm hình ảnh cho công ty, tạo nên những video viral cũng như là bộ mặt của công ty trong truyền thông.Vì vậy, Hoàng Hà PC mong muốn được đồng hành cùng các bạn trong thời gian dài để hướng tới mục tiêu phát triển hơn nữa.<p><strong>Mô tả công việc</strong><p>Triển khai các concept phù hợp với quay dựng:<p>– Đảm nhiệm Edit các Video Marketing về sản phẩm công nghệ tại Studio theo yêu cầu của khách hàng và của team Marketing<br>– Chỉnh sửa, hoàn thiện video: màu sắc, âm thanh, effects<br>– Làm việc trực tiếp cùng team Marketing để hoàn thiện video (đánh giá sản phẩm, thủ thuật công nghệ,....)<p><strong>Bám sát nội dung triển khai dựng video</strong><p>– Video Review, giới thiệu sản phẩm PC Workstation, Linh kiện PC<br>– Video được đầu tư về chất lượng hình ảnh và âm thanh cao. Sử dụng các thiết bị hiện đại, đa dạng tại Studio<p><strong>Yêu cầu</strong><p>– Sử dụng thành thạo các công cụ Davinci Resolve hoặc bộ công cụ Adobe (Effect, Premiere,..)<br>– Hiểu về các thiết bị quay phim: máy quay (Sony A7III,..), thiết bị ánh sáng trong quay phim,..<br>– Khả năng truyền tải nội dung qua thiết kế<br>– Làm việc nhóm<br>– Sáng tạo và khả năng xây dựng Concept<br>– Có style riêng<p><strong>Quyền lợi</strong><p>– Được tiếp cận cũng như đề xuất trang bị những thiết bị công nghệ hiện đại trong tương lai (Sony A7III, Canon EOS,.....)<p>– Làm việc trong môi trường vô cùng thoải mái, năng động và được khuyến khích tự do sáng tạo và thử nghiệm cái mới<br>– Xét tăng lương 1 lần/năm<br>– Hưởng các chế độ phúc lợi theo quy định của công ty<br>– Thưởng các ngày lễ, Tết trong năm<br>– Lương tháng 13<br>– Chế độ BHXH, nghỉ phép,…và tất cả các chế độ khác theo quy định của nhà nước<br>*Khi gửi CV xin hãy gửi kèm Portfolio hay sản phẩm của bạn cho chúng tôi<p>📩 CV ỨNG TUYỂN GỬI VỀ: hanhchinhnhansu@hoanghapc.vn",
             "changeCount": 0,
             "sellerId": 0,
             "article_category": "34",
@@ -151,7 +154,7 @@ export const JobData = {
             "extend": {
                 "salary": "10 - 15 Tri\u1ec7u",
                 "vacancy_num": "1",
-                "end_date": "31-07-2025",
+                "end_date": "31-07-2027",
                 "location": "41 Kh\u00fac Th\u1eeba D\u1ee5, C\u1ea7u Gi\u1ea5y"
             },
             "summary": "",

src/data/store/index.tsx

@@ -0,0 +1,135 @@
+export const StoreList = [
+    {
+        "id"    : 1,
+        "key"   : "north",
+        "title" : "Khu vực Miền Bắc",
+        "info"  : [
+            {
+                "id"        : 1,
+                "district"  : "Phường Cầu Giấy, Hà Nội",
+                "address"   : "Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Thành phố Hà Nội",
+                "tel"       : "0969.123.666",
+                "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/hoang-ha-pc-cau-giay.png",
+                    "/images/hoang-ha-pc-cau-giay-6.jpg",
+                    "/images/hoang-ha-pc-cau-giay-7.jpg",
+                    "/images/hoang-ha-pc-cau-giay-8.jpg",
+                    "/images/hoang-ha-pc-cau-giay-9.jpg",
+                    "/images/static-showroom-pc-1.png"
+                ]
+            },
+            {
+                "id"        : 2,
+                "district"  : "Phường Đống Đa, Hà Nội",
+                "address"   : "Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Thành phố Hà Nội",
+                "tel"       : "0969.123.666",
+                "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/hoang-ha-pc-dong-da-5.jpg",
+                    "/images/hoang-ha-pc-dong-da-1.jpg",
+                    "/images/hoang-ha-pc-dong-da-2.jpg",
+                    "/images/hoang-ha-pc-dong-da-3.jpg",
+                    "/images/hoang-ha-pc-dong-da-4.jpg"
+                ]
+            }
+        ]
+    },
+
+    {
+        "id"    : 2,
+        "key"   : "central",
+        "title" : "Khu vực Miền Trung",
+        "info"  : [
+            {
+                "id"        : 1,
+                "district"  : "Phường Thành Vinh, Nghệ An",
+                "address"   : "Số 72 Lê Lợi, Phường Thành Vinh, Nghệ An",
+                "tel"       : "0988.163.666",
+                "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/hoang_ha_pc_vinh.jpg",
+                    "/images/hoang_ha_pc_vinh_1.jpg",
+                    "/images/hoang_ha_pc_vinh_2.jpg",
+                    "/images/hoang_ha_pc_vinh_3.jpg",
+                    "/images/hoang_ha_pc_vinh_4.jpg",
+                    "/images/hoang_ha_pc_vinh_10.jpg"
+                ]
+            }
+        ]
+    },
+
+    {
+        "id"    : 3,
+        "key"   : "south",
+        "title" : "Khu vực Miền Nam",
+        "info"  : [
+            {
+                "id"        : 1,
+                "district"  : "Phường Hòa Hưng, Hồ Chí Minh",
+                "address"   : "K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh",
+                "tel"       : "0968.123.666",
+                "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/hoang-ha-pc-hcm.jpg" ,
+                    "/images/hoang-ha-pc-hcm-1.jpg",
+                    "/images/hoang-ha-pc-hcm-2.jpg",
+                    "/images/hoang-ha-pc-hcm-3.jpg",
+                    "/images/hoang-ha-pc-hcm-4.jpg",
+                    "/images/hoang-ha-pc-hcm-5.jpg"
+                ]
+            }
+        ]
+    },
+
+    {
+        "id"    : 4,
+        "key"   : "warranty",
+        "title" : "Trung tâm bảo hành",
+        "info"  : [
+            {
+                "id"        : 1,
+                "district"  : "Phường Cầu Giấy, Hà Nội",
+                "address"   : "Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội",
+                "tel"       : "0969.123.666",
+                "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/phong-bao-hanh-min.jpg" ,
+                    "/images/phong-bao-hanh-2-min.jpg",
+                    "/images/phong-bao-hanh-3-min.jpg",
+                    "/images/phong-bao-hanh-4-min.jpg",
+                    "/images/phong-bao-hanh-5-min.jpg",
+                    "/images/phong-bao-hanh-6-min.jpg"
+                ]
+            },
+
+            {
+                "id"        : 1,
+                "district"  : "Phường Hòa Hưng, Hồ Chí Minh",
+                "address"   : "K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh",
+                "tel"       : "0968.123.666",
+                "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/hoang-ha-pc-hcm.jpg" ,
+                    "/images/hoang-ha-pc-hcm-1.jpg",
+                    "/images/hoang-ha-pc-hcm-2.jpg",
+                    "/images/hoang-ha-pc-hcm-3.jpg",
+                    "/images/hoang-ha-pc-hcm-4.jpg",
+                    "/images/hoang-ha-pc-hcm-5.jpg"
+                ]
+            }
+        ]
+    },
+]

src/lib/slug/resolveJobPage.ts

@@ -0,0 +1,14 @@
+import { JobData } from "../../data/articles/Job";
+
+export function resolveJobPage(slug: string) {
+    const job = JobData.list.find(
+        (item) => item.url.replace(/^\//, "") === slug
+    );
+
+    if (!job) return null;
+
+    return {
+        type: "job_detail",
+        data: job,
+    };
+}

src/lib/slug/slugMap.ts

@@ -1,9 +1,11 @@
 import { resolveArticlePage } from "./resolveArticlePage";
 import { resolveProductPage } from "./resolveProductPage";
+import { resolveJobPage } from "./resolveJobPage";
 
 export type SlugResult =
     | ReturnType<typeof resolveArticlePage>
-    | ReturnType<typeof resolveProductPage>;
+    | ReturnType<typeof resolveProductPage>
+    | ReturnType<typeof resolveJobPage>;
 
 export function findBySlug(slug?: string): SlugResult | null {
     
@@ -18,6 +20,10 @@ export function findBySlug(slug?: string): SlugResult | null {
     const article = resolveArticlePage(slug);
     if (article) return article;
 
+    // Job
+    const job = resolveJobPage(slug);
+    if (job) return job;
+
     // 404
     return null;
 }

src/lib/times.tsx

@@ -53,3 +53,17 @@ export function getTimeLeft(endTime: number) {
         seconds : String(distance % 60).padStart(2, '0'),
     };
 }
+
+// Đếm ngược theo thời gian hiện tại
+export function getRemainingDays(dateStr: string): number {
+    const [day, month, year] = dateStr.split("-").map(Number);
+
+    // Hết hạn lúc 23:59:59 cho đúng logic tuyển dụng
+    const endDate = new Date(year, month - 1, day, 23, 59, 59);
+    const now = new Date();
+
+    const diffTime = endDate.getTime() - now.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    return diffDays > 0 ? diffDays : 0;
+}

src/styles/tuyen_dung.css

@@ -222,7 +222,7 @@ ul,ol,dl,label{margin-bottom:0}
 .showroom-region-box ul{list-style:none}
 .showroom-region-box li{width:100%;border:2px solid var(--gray-6);border-radius:10px}
 .showroom-region-box li:hover, .showroom-region-box li.active{background-color:var(--blue-4);border-color:var(--blue-2);cursor:pointer}
-.showroom-region-box li a{margin-bottom:24px;font-size: 22px;}
+.showroom-region-box li a, .showroom-region-box li .title{margin-bottom:24px;font-size: 22px;width: 100%;display: block}
 .showroom-item{border-bottom:1px solid var(--blue-3)}
 .showroom-content h3{background-image:linear-gradient(to right bottom,rgba(197,241,255,0.5),rgba(197,241,255,0.5)),url(/images/static-showroom-bg.jpg?v=1);background-size:cover;gap:8px;padding:32px 0;margin-bottom:0}
 .showroom .showroom-content {display: none}
@@ -579,6 +579,6 @@ ul,ol,dl,label{margin-bottom:0}
 
 @media (min-width: 1624px) {
     .showroom-region .static-icons {margin: 64px auto 34px auto;}
-    .showroom-region-box li a {font-size: 28px;margin-bottom: 54px}
+    .showroom-region-box li a, .showroom-region-box li .title {font-size: 28px;margin-bottom: 54px}
   	.buy-online .guild-solution-content .box-gradient-item h3, .payment-guild .guild-solution .box-gradient-item h4 {min-height: unset;}
 }