update

src/app/buildpc/BoxListAccessory/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { category_config } from '@/data/buildpc/category';
+import { FaPlus } from 'react-icons/fa';
+
+export const BoxListAccessory = () => {
+  return (
+    <div className="list-drive" id="js-buildpc-layout" style={{ border: 'solid 1px #e1e1e1' }}>
+      {category_config.map((category, index) => (
+        <div key={category.id} className="item-drive flex">
+          <div className="name-item-drive">
+            <h3
+              className="d-name d-name-{{id}}"
+              style={{ fontSize: '15px', borderBottom: 'none', marginBottom: 10 }}
+            >
+              {index + 1}. {category.name}
+            </h3>
+          </div>
+          <div className="drive-checked flex-1" style={{ marginLeft: 0 }}>
+            <span
+              className="show-popup_select span-last open-selection"
+              id="js-category-info-{{id}}"
+              data-info="{{info}}"
+            >
+              + {''}
+              <span> Chọn {category.name}</span>
+            </span>
+            <div id="js-selected-item-{{id}}" data-id="{{id}}" className="js-item-row"></div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

src/app/buildpc/BtnAction/index.tsx

@@ -0,0 +1,49 @@
+import { FaImage, FaFileExcel, FaPrint, FaShoppingCart } from 'react-icons/fa';
+
+const BtnAction = () => {
+  return (
+    <>
+      <div className="clear"></div>
+      <p style={{ float: 'right', fontSize: '18px', color: '#d00', marginTop: '10px' }}>
+        Chi phí dự tính: <span className="js-config-summary"></span>
+      </p>
+      <div className="clear"></div>
+      <ul className="list-btn-action" id="js-buildpc-action">
+        <li>
+          <span data-action="create-image">
+            <div className="flex items-center justify-center gap-3">
+              <p> tải ảnh cấu hình</p>
+              <FaImage />
+            </div>
+          </span>
+        </li>
+
+        <li>
+          <span data-action="download-excel">
+            <div className="flex items-center justify-center gap-3">
+              <p>tải file excel cấu hình </p>
+              <FaFileExcel />
+            </div>
+          </span>
+        </li>
+        <li>
+          <span data-action="view">
+            <div className="flex items-center justify-center gap-3">
+              <p>Xem & In </p>
+              <FaPrint />
+            </div>
+          </span>
+        </li>
+        <li>
+          <span data-action="add-cart">
+            <div className="flex items-center justify-center gap-3">
+              <p>Thêm vào giỏ hàng </p>
+              <FaShoppingCart />
+            </div>
+          </span>
+        </li>
+      </ul>
+    </>
+  );
+};
+export default BtnAction;

src/app/buildpc/page.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import '@styles/buildpc.css';
 import { Metadata } from 'next';
+import '@styles/buildpc.css';
+import { FaUndo } from 'react-icons/fa';
+
 import { Breadcrumb } from '@/components/Common/Breadcrumb';
 
 import Slider from '@/app/buildpc/Slider';
+import { BoxListAccessory } from './BoxListAccessory';
+import BtnAction from './BtnAction';
 
 export const metadata: Metadata = {
   title: 'Build PC - Xây dựng cấu hình máy tính PC giá rẻ chuẩn nhất',
@@ -77,6 +81,34 @@ export default function BuildPcPage() {
               </li>
             </ul>
             <div className="clear"></div>
+
+            <ul
+              className="list-btn-action"
+              style={{ margin: '0 0 0 0', float: 'left', border: 'none' }}
+            >
+              <li style={{ width: 'auto' }}>
+                <div
+                  className="flex cursor-pointer items-center gap-2 text-sm"
+                  style={{ padding: '10px 20px', background: 'var(--color-primary)' }}
+                >
+                  <p>Làm mới</p>
+                  <FaUndo />
+                </div>
+              </li>
+            </ul>
+            <div>
+              <p style={{ float: 'right', fontSize: '18px', color: '#d00', marginTop: '10px' }}>
+                Chi phí dự tính: <span className="js-config-summary"></span>{' '}
+              </p>
+              <div className="js-buildpc-promotion-content" style={{ marginBottom: '0px' }}></div>
+            </div>
+            <div className="clear"></div>
+
+            {/* Hiển thị dữ liệu tai đây */}
+            <BoxListAccessory />
+
+            {/* btn */}
+            <BtnAction />
           </div>
         </div>
       </div>

src/components/other/Header/HeaderMid/index.tsx

@@ -27,6 +27,22 @@ const HeaderMid: React.FC = () => {
     return cart.reduce((sum: number, item) => sum + Number(item.in_cart.total_price), 0);
   });
 
+  const [isFixed, setIsFixed] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const distanceFromTop = window.scrollY;
+      if (distanceFromTop > 680) {
+        setIsFixed(true);
+      } else {
+        setIsFixed(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const PopupAddress = () => {
     const modal = document.getElementById('boxShowroom') as HTMLDialogElement;
     modal?.showModal();
@@ -38,7 +54,7 @@ const HeaderMid: React.FC = () => {
   };
 
   return (
-    <div className="header-middle">
+    <div className={`header-middle ${isFixed ? 'header-fixed' : ''}`}>
       <div className="container flex items-center justify-between">
         <div className="header-middle-left flex items-center">
           <Link href="/">

src/data/buildpc/category/index.ts

@@ -0,0 +1,114 @@
+export const category_config = [
+  {
+    id: 277,
+    name: 'CPU - B\u1ed9 Vi X\u1eed L\u00fd',
+  },
+  {
+    id: 278,
+    name: 'Main - Bo M\u1ea1ch Ch\u1ee7',
+  },
+  {
+    id: 283,
+    name: 'RAM - B\u1ed9 Nh\u1edb Trong',
+  },
+  {
+    id: 3274,
+    name: '\u1ed4 C\u1ee9ng SSD 1',
+  },
+  {
+    id: 3644,
+    name: '\u1ed4 C\u1ee9ng SSD 2',
+  },
+  {
+    id: 3273,
+    name: '\u1ed4 C\u1ee9ng HDD',
+  },
+  {
+    id: 279,
+    name: 'VGA - Card M\u00e0n H\u00ecnh',
+  },
+  {
+    id: 282,
+    name: 'PSU - Ngu\u1ed3n M\u00e1y T\u00ednh',
+  },
+  {
+    id: 280,
+    name: 'Case - V\u1ecf M\u00e1y T\u00ednh',
+  },
+  {
+    id: 3270,
+    name: 'T\u1ea3n Nhi\u1ec7t Kh\u00ed',
+  },
+  {
+    id: 3269,
+    name: 'T\u1ea3n Nhi\u1ec7t N\u01b0\u1edbc AIO',
+  },
+  {
+    id: 3630,
+    name: 'T\u1ea3n Nhi\u1ec7t N\u01b0\u1edbc Custom',
+  },
+  {
+    id: 3271,
+    name: 'Fan T\u1ea3n Nhi\u1ec7t',
+  },
+  {
+    id: 281,
+    name: 'Monitor - M\u00e0n H\u00ecnh',
+  },
+  {
+    id: 3705,
+    name: 'Monitor - M\u00e0n H\u00ecnh 2',
+  },
+  {
+    id: 1235,
+    name: 'B\u00e0n Ph\u00edm',
+  },
+  {
+    id: 1147,
+    name: 'Mouse - Chu\u1ed9t',
+  },
+  {
+    id: 1118,
+    name: 'Pad - B\u00e0n Di Chu\u1ed9t',
+  },
+  {
+    id: 3309,
+    name: 'Tai Nghe',
+  },
+  {
+    id: 3308,
+    name: 'Loa',
+  },
+  {
+    id: 3307,
+    name: 'Gh\u1ebf Gaming',
+  },
+  {
+    id: 3411,
+    name: 'B\u00e0n Gaming',
+  },
+  {
+    id: 3287,
+    name: 'Webcam',
+  },
+  {
+    id: 3341,
+    name: 'Microphones',
+  },
+  {
+    id: 3413,
+    name: 'Thi\u1ebft B\u1ecb Studio, Stream',
+  },
+  {
+    id: 1751,
+    name: 'Thi\u1ebft B\u1ecb M\u1ea1ng',
+  },
+  {
+    id: 3598,
+    name: 'Gi\u00e1 treo m\u00e0n h\u00ecnh',
+  },
+  {
+    id: 3437,
+    name: 'Ph\u1ea7n m\u1ec1m',
+  },
+];

src/styles/buildpc.css

@@ -1,8 +1,6 @@
 @charset "UTF-8";
 .build-pc *,
 .custom-pc * {
-  margin: 0;
-  padding: 0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;