25-05-2026

2026-02-25 17:25:45 +07:00
parent 2516e78720
commit a8df344207
14 changed files with 6669 additions and 6715 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -6356,6 +6356,21 @@
      "peerDependencies": {
        "zod": "^3.25.0 || ^4.0.0"
      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.0.tgz",
+      "integrity": "sha512-Tr0j94MphimCCks+1rtYPzQFK+faJuhHWCegU9S9gDlgyOk8Y3kPmO64UcjyzZAlligeBtYZ/2bEyrKq0d2wqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
    }
  }
 }
--- a/src/components/buildpc/categories/index.tsx
+++ b/src/components/buildpc/categories/index.tsx
@@ -2,56 +2,120 @@
 import { useEffect, useState } from "react";
 import { categoryDetail } from "@/data/buildpc/categoryDetail";
 import ModalContent from "../modal";
+import SelectedItemRow from "../modal/SelectedItemRow";

 export default function BuildPCCategories({ categories }: any) {
-    // console.log("categoryDetail: ", categoryDetail)

-    const [selectedCategory, setSelectedCategory] = useState(null);
+    const [selectedCategory, setSelectedCategory] = useState<any>(null);
    const [categoryInfo, setCategoryInfo] = useState<any>(null);
+    const [buildData, setBuildData] = useState<any[]>([]);

+    const storageKey = "buildpc";
+
+    // Load khi mount
+    useEffect(() => {
+        const oldData = localStorage.getItem(storageKey);
+        setBuildData(oldData ? JSON.parse(oldData) : []);
+    }, []);
+
+    // Nghe event update
+    useEffect(() => {
+        const handleUpdate = () => {
+            const oldData = localStorage.getItem(storageKey);
+            setBuildData(oldData ? JSON.parse(oldData) : []);
+        };
+
+        window.addEventListener("buildpcUpdated", handleUpdate);
+        return () => window.removeEventListener("buildpcUpdated", handleUpdate);
+    }, []);
+
+    // Set category info khi mở modal
    useEffect(() => {
        if (selectedCategory) {
-            const filterCategory = categoryDetail.find((item: any) => item.id === selectedCategory);
+            const filterCategory = categoryDetail.find(
+                (item: any) => item.id === selectedCategory
+            );
            setCategoryInfo(filterCategory);
        }
-    }, [selectedCategory])
+    }, [selectedCategory]);
+
+    // Xoá sản phẩm
+    const handleRemove = (rowId: number) => {
+        const newData = buildData.filter((b: any) => b.rowId !== rowId);
+        localStorage.setItem(storageKey, JSON.stringify(newData));
+        setBuildData(newData);
+    };
+
+    // Đổi số lượng
+    const handleQuantityChange = (rowId: number, quantity: number) => {
+        const newData = buildData.map((b: any) => {
+            if (b.rowId === rowId) {
+                return {
+                    ...b,
+                    info: [
+                        {
+                            ...b.info[0],
+                            quantity
+                        }
+                    ]
+                };
+            }
+            return b;
+        });
+
+        localStorage.setItem(storageKey, JSON.stringify(newData));
+        setBuildData(newData);
+    };

    return (
        <>
-            <div className="buildpc-holder-container" id="js-buildpc-layout">
-                {categories.map((item: any, index: number) => (
+            <div className="buildpc-holder-container">
+                {categories.map((item: any, index: number) => {
+
+                    const selectedBuild = buildData.find((b: any) => b.rowId === item.id);
+
+                    const product = selectedBuild?.info?.[0];
+
+                    return (
                        <div className="item-drive" key={item.id}>
                            <p className="item-title leading-5">
                                <span>{index + 1}. {item.name}</span>
-                            
-                            <span
-                                className="block text-16 font-500"
-                                style={{ color: '#E16B10' }}
-                                id={`js-item-offer-${item.id}`} />
                            </p>

                            <div className="item-drive-info">
-                            <a  href="#js-modal-popup"
+
+                                {product ? (
+                                    <SelectedItemRow
+                                        product={product}
+                                        rowId={item.id}
+                                        onRemove={handleRemove}
+                                        onQuantityChange={handleQuantityChange}
+                                        onEdit={(rowId) => setSelectedCategory(rowId)}
+                                    />
+                                ) : (
+                                    <a
+                                        href="#js-modal-popup"
                                        data-fancybox=""
-                                className="js-open-selection open-selection"
-                                id={`js-category-info-${item.id}`}
-                                data-info={`{"id":${item.id},"name":"${item.name}"}`}
+                                        className="open-selection"
                                        onClick={() => setSelectedCategory(item.id)}
                                    >
                                        <i className="bx bx-plus" /> Chọn {item.name}
                                    </a>
+                                )}

-                            <div className="js-item-row"
-                                id={`js-selected-item-${item.id}`}
-                                data-id={item.id} />
                            </div>
                        </div>
-                ))}
+                    );
+                })}
            </div>

-            <div className="buildpc-modal-popup-container text-black" id="js-modal-popup" style={{ display: 'none', padding: 0 }}>
+            <div
+                className="buildpc-modal-popup-container text-black"
+                id="js-modal-popup"
+                style={{ display: 'none', padding: 0 }}
+            >
                <ModalContent item={categoryInfo} />
            </div>
        </>
-    )
+    );
 }
--- a/src/components/buildpc/index.tsx
+++ b/src/components/buildpc/index.tsx
@@ -11,9 +11,15 @@ import Promotion from "./Promotion";
 import Buttons from "./Buttons";

 export default function BuildPc() {
+    const [fancyboxRef] = useFancybox({});
+
    const [activeTab, setActiveTab] = useState(1);    

-    const [fancyboxRef] = useFancybox({});
+    const handleTabChange = (tabIndex: number) => {
+        
+        setActiveTab(tabIndex);
+        
+    }

    return (
        <>
@@ -61,7 +67,7 @@ export default function BuildPc() {
                                        key={item}
                                        type="button"
                                        className={item === activeTab ? "active" : ""}
-                                        onClick={() => setActiveTab(item)}
+                                        onClick={() => handleTabChange(item)}
                                    >
                                        Cấu hình {item}
                                    </button>
--- a/src/components/buildpc/modal/Paging.tsx
+++ b/src/components/buildpc/modal/Paging.tsx
@@ -3,7 +3,7 @@ export default function Paging({ item }: any) {
        <div className="popup-paging">
            {
                item.map((item: any) => (
-                    <a key={item.name} href={item.url}
+                    <a key={item.name} href="#"
                        className={`${item.is_active ? 'active' : ''} capitalize`}
                    >
                        {item.name}
--- a/src/components/buildpc/modal/Products.tsx
+++ b/src/components/buildpc/modal/Products.tsx
@@ -1,7 +1,48 @@
+'use client';
 import Link from "next/link";
+import { Fancybox } from "@fancyapps/ui/dist/fancybox/";

 export default function ProductItem({ item, rowId }: any) {

+    const handleBuy = () => {
+        if (typeof window === "undefined") return;
+
+        const storageKey = "buildpc";
+        const oldData    = localStorage.getItem(storageKey);
+        const parsed     = oldData ? JSON.parse(oldData) : [];
+
+        const productData = {
+            id       : item.productId,
+            name     : item.productName,
+            url      : item.productUrl,
+            price    : item.price,
+            image    : item.productImage.large,
+            quantity : 1,
+            sku      : item.productSKU,
+            warranty : item.warranty || ''
+        };
+
+        const buildIndex = parsed.findIndex((b: any) => b.rowId === rowId);
+
+        if (buildIndex !== -1) {            
+            parsed[buildIndex].info = [productData];
+        } else {
+            parsed.push({
+                rowId: rowId,
+                info: [productData]
+            });
+        }
+
+        localStorage.setItem(storageKey, JSON.stringify(parsed));
+
+        // báo cho component cha
+        window.dispatchEvent(new Event("buildpcUpdated"));
+
+        // đóng popup
+        Fancybox.close();
+    };
+
+
    return (
        <div className="p-item">
            <Link href={item.productUrl} className="item-img">
@@ -48,9 +89,9 @@ export default function ProductItem({ item, rowId }: any) {
            </div>

            <button
+                onClick={handleBuy}
                className="btn-buy p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
-                data-row-id={rowId}
            />
        </div>
-    )
+    );
 }
--- a/src/components/buildpc/modal/SelectedItemRow.tsx
+++ b/src/components/buildpc/modal/SelectedItemRow.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+interface Props {
+    product: any;
+    rowId: number;
+    onRemove: (rowId: number) => void;
+    onQuantityChange: (rowId: number, quantity: number) => void;
+    onEdit: (rowId: number) => void;
+}
+
+export default function SelectedItemRow({
+    product,
+    rowId,
+    onRemove,
+    onQuantityChange,
+    onEdit
+}: Props) {
+
+    return (
+        <div className="js-item-row">
+            <div className="contain-item-drive">
+
+                <a href={product.url} target="_blank" className="item-img">
+                    <img src={product.image} alt={product.name} />
+                </a>
+
+                <div className="item-text">
+
+                    <div className="item-left">
+                        <a href={product.url} target="_blank" className="item-name">
+                            {product.name}
+                        </a>
+
+                        <p>
+                            <span className="font-500">- Kho hàng:</span> 
+                            {product.quantity > 0 ? "Còn hàng" : "Hết hàng"}
+                        </p>
+
+                        <p>
+                            <span className="font-500">- Bảo hành:</span> 
+                            {product.warranty || "—"}
+                        </p>
+                    </div>
+
+                    <div className="item-right">
+
+                        <div className="item-quantity-group">
+                            <b>{product.price.toLocaleString()}</b>
+
+                            <div className="flex items-center" style={{ display: "flex", gap: "10px" }}>
+                                <span>x</span>
+
+                                <input
+                                    type="number"
+                                    value={product.quantity}
+                                    className="item-quantity"
+                                    min={1}
+                                    max={50}
+                                    onChange={(e) =>
+                                        onQuantityChange(rowId, Number(e.target.value))
+                                    }
+                                />
+
+                                <span>=</span>
+                            </div>
+
+                            <b className="item-price">
+                                {(product.price * product.quantity).toLocaleString()}
+                            </b>
+                        </div>
+
+                        <div className="item-button-group">
+                            <a href="#js-modal-popup" data-fancybox
+                                type="button"
+                                title="Thay đổi"
+                                className="btn-action_seclect show-popup_select bx bx-edit"
+                                onClick={() => onEdit(rowId)}
+                            />
+
+                            <button
+                                type="button"
+                                title="Xóa"
+                                className="btn-action_seclect delete_select bx bx-trash remove-item"
+                                onClick={() => onRemove(rowId)}
+                            />
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/src/components/buildpc/modal/index.tsx
+++ b/src/components/buildpc/modal/index.tsx
@@ -6,8 +6,6 @@ import Paing from "./Paging";
 export default function ModalContent({ item }: any) {
    if (!item) return null;

-    console.log(item)
-
    const {
        id,
        attribute_filter_list,
@@ -23,8 +21,14 @@ export default function ModalContent({ item }: any) {
            <div className="popup-select">
                <div className="popup-header">
                    <p>Chọn linh kiện</p>
+
                    <div className="popup-search-holder">
-                        <input type="text" defaultValue='' id="js-buildpc-search-keyword" className="input-search" placeholder="Nhập từ khóa cần tìm" />
+                        <input
+                            type="text"
+                            defaultValue=""
+                            className="input-search"
+                            placeholder="Nhập từ khóa cần tìm"
+                        />

                        <button className="btn-search bg-linear rounded-full" id="js-buildpc-search-btn">
                            <i className="block !w-full !h-full icons icon-search" />
@@ -40,7 +44,8 @@ export default function ModalContent({ item }: any) {
                </div>

                <div className="popup-main">
-                    {product_list && product_list.length > 0 ? (
+                    {product_list && product_list.length > 0 ?
+                        (
                            <>
                                <div className="popup-filter-group">
                                    <p className="group-titlle"> Lọc sản phẩm </p>
--- a/src/components/designer-tool/DesignerItem.tsx
+++ b/src/components/designer-tool/DesignerItem.tsx
--- a/src/components/designer-tool/Detail.tsx
+++ b/src/components/designer-tool/Detail.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Link from "next/link";
 import FAQ from "./Faq";
-import DesignerItem from "@/components/shared/DesignerItem";
+import DesignerItem from "./DesignerItem";
 import { usePagination } from "@/hooks/usePagination";
 import ButtonShowMore from "@/components/shared/ProductShowMore";

--- a/src/components/recruit/RecruitItem.tsx
+++ b/src/components/recruit/RecruitItem.tsx
--- a/src/components/recruit/index.tsx
+++ b/src/components/recruit/index.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { categories } from "@/data/categories";
 import { JobData } from "@/data/articles/Job";
-import RecruitItem from "@/components/shared/RecruitItem"
+import RecruitItem from "./RecruitItem"

 export default function RecruitPage() {

--- a/src/data/buildpc/categoryDetail/index.tsx
+++ b/src/data/buildpc/categoryDetail/index.tsx
@@ -6524,215 +6524,5 @@ export const categoryDetail = [
        "product_list": [],
        "paging_collection": [],
        "paging_count": 0
-    },
-    {
-        "id": 16,
-        "name": "\u1ed4 C\u1ee9ng SSD",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 15,
-        "name": "\u1ed4 C\u1ee9ng HDD",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 6,
-        "name": "VGA",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 7,
-        "name": "Ngu\u1ed3n",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 8,
-        "name": "V\u1ecf Case",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 22,
-        "name": "Qu\u1ea1t T\u1ea3n Nhi\u1ec7t",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 17,
-        "name": "T\u1ea3n Nhi\u1ec7t CPU",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 28,
-        "name": "T\u1ea3n Nhi\u1ec7t N\u01b0\u1edbc AIO",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 9,
-        "name": "M\u00e0n H\u00ecnh",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 18,
-        "name": "B\u00e0n ph\u00edm",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 19,
-        "name": "Chu\u1ed9t",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 26,
-        "name": "Tai Nghe",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 74,
-        "name": "B\u00e0n M\u00e1y M\u00e1y T\u00ednh",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 90,
-        "name": "Gh\u1ebf Gaming",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
-    },
-    {
-        "id": 23,
-        "name": "Thi\u1ebft B\u1ecb M\u1ea1ng",
-        "attribute_filter_list": [],
-        "brand_filter_list": [],
-        "price_filter_list": [],
-        "sort_by_collection": [],
-        "sort_option": "order",
-        "search_query": "",
-        "search_url": "",
-        "product_list": [],
-        "paging_collection": [],
-        "paging_count": 0
    }    
 ]
--- a/src/data/buildpc/index.tsx
+++ b/src/data/buildpc/index.tsx
@@ -16,66 +16,6 @@ export const buildPcData = {
        {
            "id": 4,
            "name": "RAM"
-        },
-        {
-            "id": 16,
-            "name": "\u1ed4 C\u1ee9ng SSD"
-        },
-        {
-            "id": 15,
-            "name": "\u1ed4 C\u1ee9ng HDD"
-        },
-        {
-            "id": 6,
-            "name": "VGA"
-        },
-        {
-            "id": 7,
-            "name": "Ngu\u1ed3n"
-        },
-        {
-            "id": 8,
-            "name": "V\u1ecf Case"
-        },
-        {
-            "id": 22,
-            "name": "Qu\u1ea1t T\u1ea3n Nhi\u1ec7t"
-        },
-        {
-            "id": 17,
-            "name": "T\u1ea3n Nhi\u1ec7t CPU"
-        },
-        {
-            "id": 28,
-            "name": "T\u1ea3n Nhi\u1ec7t N\u01b0\u1edbc AIO"
-        },
-        {
-            "id": 9,
-            "name": "M\u00e0n H\u00ecnh"
-        },
-        {
-            "id": 18,
-            "name": "B\u00e0n ph\u00edm"
-        },
-        {
-            "id": 19,
-            "name": "Chu\u1ed9t"
-        },
-        {
-            "id": 26,
-            "name": "Tai Nghe"
-        },
-        {
-            "id": 74,
-            "name": "B\u00e0n M\u00e1y M\u00e1y T\u00ednh"
-        },
-        {
-            "id": 90,
-            "name": "Gh\u1ebf Gaming"
-        },
-        {
-            "id": 23,
-            "name": "Thi\u1ebft B\u1ecb M\u1ea1ng"
        }        
    ]
 }
--- a/src/styles/buildpc.css
+++ b/src/styles/buildpc.css
@@ -17,7 +17,7 @@
 .buildpc-page .buildpc-btn-action .item{font-size: 16px;font-weight: 500;height: 52px;border-radius: 40px;border: 1px solid #259AFF;color: #fff;text-transform: uppercase;display: flex;align-items: center;justify-content: center;gap: 8px;padding: 0 24px;background: linear-gradient(165.29deg, #259AFF 8.53%, #114CDD 93.19%);}
 .buildpc-page .buildpc-btn-action .btn-cart {background: linear-gradient(148.21deg, #FFD83E -14.02%, #FF4E2A 70.14%) !important;border-color: transparent !important;padding: 0 35px}
 .buildpc-page .buildpc-btn-action .item:hover, .buildpc-holder-container .item-drive .open-selection:hover{background:#0678DB;color: #fff}
-.buildpc-holder-container{border:1px solid #e1e1e1;min-height: 300px;margin-bottom: 20px;overflow: hidden;border-radius: 24px;background: #fff}
+.buildpc-holder-container{border:1px solid #e1e1e1;margin-bottom: 20px;overflow: hidden;border-radius: 24px;background: #fff}
 .buildpc-holder-container p{margin: 0}
 .buildpc-holder-container .item-drive{border-bottom:1px solid #e1e1e1;display:flex;flex-wrap:wrap;line-height:22px;overflow: hidden;align-items: center}
 .buildpc-holder-container .item-drive:last-child{border-bottom: 0}
@@ -25,7 +25,7 @@
 .buildpc-holder-container .item-drive .item-drive-info{width:calc(100% - 220px);padding:16px;border-left: 1px solid #e1e1e1}
 .buildpc-holder-container .item-drive .open-selection{cursor: pointer;background: #fff;height: 38px;border: 1px solid #259AFF;border-radius: 40px;color: #0678DB;font-size: 14px;font-weight: 500;display: inline-flex;align-items: center;gap: 4px;padding: 0 16px;text-transform: uppercase;}
 .buildpc-holder-container .item-drive .open-selection .bx{font-size: 18px}
-.buildpc-page .contain-item-drive{background: #fff;margin: -47px -16px -12px;position: relative;z-index: 1;display: flex;flex-wrap: wrap;align-items: flex-start;padding: 16px;}
+.buildpc-page .contain-item-drive{background: #fff;margin: 0 -16px -12px;position: relative;z-index: 1;display: flex;flex-wrap: wrap;align-items: flex-start;padding: 16px;}
 .buildpc-page .contain-item-drive .item-img{width:80px;margin:0 10px 0 0}
 .buildpc-page .contain-item-drive .item-text{width:calc(100% - 90px);display:flex;flex-wrap:wrap;align-items:flex-start}
 .buildpc-page .contain-item-drive .item-name {display: table;color: #004BA4;font-weight: 600;line-height: 18px;font-size: 14px;margin-bottom: 4px}
@@ -64,8 +64,8 @@
 .buildpc-popup .popup-filter-holder::-webkit-scrollbar,.buildpc-popup .popup-product-list::-webkit-scrollbar{width:8px;height:10px}
 .buildpc-popup .filter-item{margin-bottom:16px}
 .buildpc-popup .filter-item .filter-name{display: block;font-weight: 600;margin: 0 0 8px;font-size: 14px;line-height: 18px;}
-.buildpc-popup .filter-list-holder{display:flex;flex-wrap:wrap;justify-content:space-between;font-size: 13px;line-height: 18px}
-.buildpc-popup .filter-list-holder label{display:flex;align-items:center;gap: 4px;width:48%;margin:0 0 8px;cursor:pointer}
+.buildpc-popup .filter-list-holder{font-size: 13px;line-height: 18px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 5px 10px;}
+.buildpc-popup .filter-list-holder label{display:flex;align-items:center;gap: 4px;margin:0 0 8px;cursor:pointer}
 .buildpc-popup .filter-list-holder label:hover{color:#0676DA}
 .buildpc-popup .sort-paging-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background: #f8f8f8;padding: 8px 12px 8px 16px;margin-right: -10px}
 .buildpc-popup .sort-paging-group select{cursor:pointer;outline:none;height: 26px;margin-left: 5px;background: #F2F2F2;border-radius: 30px;padding: 0 10px;}