diff --git a/assets/script/pc_style.css b/assets/script/pc_style.css
index 83c60cc..fa252dc 100644
--- a/assets/script/pc_style.css
+++ b/assets/script/pc_style.css
@@ -1090,4 +1090,43 @@ input[type=radio]:focus:before {
 }
 .table-config-group a {
   color: #0041e8;
+}
+
+.table-config-pro th {
+  padding: 7px 5px;
+  background: #f6f6f6;
+  border: 1px solid #ececec;
+  white-space: nowrap;
+  text-align: left;
+}
+.table-config-pro td {
+  padding: 7px 6px;
+  border: 1px solid #ececec;
+}
+.table-config-pro .name {
+  color: #0041e8;
+}
+
+.table-addon th,
+.table-spec th,
+.spec-info th,
+.table-list-competitor th {
+  padding: 7px 5px;
+  background: #f6f6f6;
+  border: 1px solid #ececec;
+  white-space: nowrap;
+  text-align: left;
+}
+.table-addon td,
+.table-spec td,
+.spec-info td,
+.table-list-competitor td {
+  padding: 7px 6px;
+  border: 1px solid #ececec;
+}
+.table-addon .name,
+.table-spec .name,
+.spec-info .name,
+.table-list-competitor .name {
+  color: #0041e8;
 }/*# sourceMappingURL=pc_style.css.map */
\ No newline at end of file
diff --git a/assets/script/pc_style.css.map b/assets/script/pc_style.css.map
index f8f3dca..fb9377c 100644
--- a/assets/script/pc_style.css.map
+++ b/assets/script/pc_style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["pc_style.css","pc_style.scss"],"names":[],"mappings":"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","file":"pc_style.css"}
\ No newline at end of file
+{"version":3,"sources":["pc_style.css","pc_style.scss"],"names":[],"mappings":"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","file":"pc_style.css"}
\ No newline at end of file
diff --git a/assets/script/pc_style.scss b/assets/script/pc_style.scss
index 776d13f..d24e7ea 100644
--- a/assets/script/pc_style.scss
+++ b/assets/script/pc_style.scss
@@ -1139,3 +1139,40 @@ input[type="radio"] {
         color: #0041e8;
     }
 }
+
+.table-config-pro {
+    th {
+        padding: 7px 5px;
+        background: #f6f6f6;
+        border: 1px solid #ececec;
+        white-space: nowrap;
+        text-align: left;
+    }
+    td {
+        padding: 7px 6px;
+        border: 1px solid #ececec;
+    }
+    .name {
+        color: #0041e8;
+    }
+}
+
+.table-addon,
+.table-spec,
+.spec-info,
+.table-list-competitor {
+    th {
+        padding: 7px 5px;
+        background: #f6f6f6;
+        border: 1px solid #ececec;
+        white-space: nowrap;
+        text-align: left;
+    }
+    td {
+        padding: 7px 6px;
+        border: 1px solid #ececec;
+    }
+    .name {
+        color: #0041e8;
+    }
+}
diff --git a/data/menu_item/product.php b/data/menu_item/product.php
index bd00ecf..3d42dae 100644
--- a/data/menu_item/product.php
+++ b/data/menu_item/product.php
@@ -147,5 +147,14 @@ return array(
             'name' => 'Nhóm thông số kỹ thuật',
             'url' => '/admin/product/spec-group',
         ),
+
+        array(
+            'enable' => true ,
+            'module' => 'product',
+            'view' => 'list-competitor',
+            'id' => 'product/list-competitor',
+            'name' => 'So sánh giá đối thủ',
+            'url' => '/admin/product/list-competitor',
+        ),
     ),
 );
diff --git a/data/product/addon.php b/data/product/addon.php
new file mode 100644
index 0000000..b3d9bbc
--- /dev/null
+++ b/data/product/addon.php
@@ -0,0 +1 @@
+<?php
diff --git a/data/product/addon_add.php b/data/product/addon_add.php
new file mode 100644
index 0000000..a814366
--- /dev/null
+++ b/data/product/addon_add.php
@@ -0,0 +1 @@
+<?php
\ No newline at end of file
diff --git a/data/product/config_group_attribute.php b/data/product/config_group_attribute.php
new file mode 100644
index 0000000..b3d9bbc
--- /dev/null
+++ b/data/product/config_group_attribute.php
@@ -0,0 +1 @@
+<?php
diff --git a/data/product/config_group_product.php b/data/product/config_group_product.php
new file mode 100644
index 0000000..a814366
--- /dev/null
+++ b/data/product/config_group_product.php
@@ -0,0 +1 @@
+<?php
\ No newline at end of file
diff --git a/data/product/list_competitor.php b/data/product/list_competitor.php
new file mode 100644
index 0000000..a814366
--- /dev/null
+++ b/data/product/list_competitor.php
@@ -0,0 +1 @@
+<?php
\ No newline at end of file
diff --git a/data/product/spec_group.php b/data/product/spec_group.php
new file mode 100644
index 0000000..a814366
--- /dev/null
+++ b/data/product/spec_group.php
@@ -0,0 +1 @@
+<?php
\ No newline at end of file
diff --git a/data/product/spec_group_add.php b/data/product/spec_group_add.php
new file mode 100644
index 0000000..a814366
--- /dev/null
+++ b/data/product/spec_group_add.php
@@ -0,0 +1 @@
+<?php
\ No newline at end of file
diff --git a/data/product/spec_group_info.php b/data/product/spec_group_info.php
new file mode 100644
index 0000000..a814366
--- /dev/null
+++ b/data/product/spec_group_info.php
@@ -0,0 +1 @@
+<?php
\ No newline at end of file
diff --git a/template/product/addon.html b/template/product/addon.html
new file mode 100644
index 0000000..6baa279
--- /dev/null
+++ b/template/product/addon.html
@@ -0,0 +1,65 @@
+<div class="w-[100%]">
+    <div class="m-[15px] p-[15px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-x-auto">
+        <h1 class="text-[24px] font-[700] mb-3">Danh sách sản phẩm/dịch vụ bán kèm sản phẩm</h1>
+
+        <div class="flex items-center justify-end">
+            <a href="/admin/product/addon_add"
+                class="block border-[1px] border-[#0041E8] rounded-[4px] p-[5px_10px_5px_10px]">
+                <span
+                    class="inline-block	 w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#0041E8] text-center leading-[11px] text-[#0041E8] mb-[2px]">+</span>
+                <span class="text-[#0041E8] font-[500]">Thêm danh sách mới</span>
+            </a>
+            <a href="/admin/product/attribute_update"
+                class="block border-[1px] border-[#0041E8] rounded-[4px] p-[5px_10px_5px_10px] ml-[10px]">
+                <i class="fa-regular fa-file-excel text-[#0041E8]"></i>
+                <span class="text-[#0041E8] font-[500]">Cập nhật Excel</span>
+            </a>
+        </div>
+
+        <table class="mt-[15px] table-addon">
+            <thead>
+                <tr>
+                    <th>STT</th>
+                    <th>Thông tin</th>
+                    <th>Giá</th>
+                    <th>Sản phẩm</th>
+                    <th>Cập nhật</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>
+                        <div class="flex items-center">
+                            <span>[8]</span>
+                            <a href="" class="name ml-[5px]">Bộ phím chuột không dây Kenoo KM600 trị giá 249.000 VND
+                                (KBKN002)</a>
+                        </div>
+                        <p>Ghi chú: KM màn hình 27 1</p>
+                        <p>Tạo lúc: 04-06-2022, 8:28 am, cập nhật: 04-06-2022, 8:28 am</p>
+                    </td>
+                    <td>3.849.000 vnd</td>
+                    <td class="w-[90px]"><a href=""
+                            class="block w-[86px] h-[30px] leading-[30px] text-center text-white bg-[#0041E8] rounded-[4px]">Xem
+                            SP</a></td>
+                    <td class="w-[150px]">
+                        <div class='list-btn flex items-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='fa fa-plus text-[#0041E8]'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class="fa-regular fa-eye-slash text-[#9E9E9E]"></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/template/product/addon_add.html b/template/product/addon_add.html
new file mode 100644
index 0000000..5da0ec6
--- /dev/null
+++ b/template/product/addon_add.html
@@ -0,0 +1,24 @@
+<div class="w-[100%] mb-[50px]">
+
+    <div class="text-sm breadcrumbs ml-[10px]">
+        <ul>
+            <li><a href="/admin/product/addon">SP/ Dịch vụ bán kèm sản phẩm</a></li>
+            <li class="text-[#0041E8]">Form sửa SP/ Dịch vụ bán kèm</li>
+        </ul>
+    </div>
+
+    <div class="w-[1140px] my-0 mx-auto">
+        <div class="bg-white p-[10px] rounded-[10px] shadow-[0_1px_1px_0px_#0000001A] mb-[15px]">
+            <div class="flex items-center justify-between">
+                <h1 class="text-[20px] font-[700]">Cập nhật SP/ Dịch vụ bán kèm</h1>
+                <a href="/admin/product/attribute-add"
+                    class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px]">
+                    <span
+                        class="w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#6B7280] text-center leading-[11px] mr-[5px] text-[#6B7280]">+</span>
+                    <span class="text-[#6B7280]">Thêm dịch vụ mới</span>
+                </a>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/template/product/config_group_attribute.html b/template/product/config_group_attribute.html
new file mode 100644
index 0000000..365b1fa
--- /dev/null
+++ b/template/product/config_group_attribute.html
@@ -0,0 +1,141 @@
+<div class="w-[100%] mb-[50px]">
+
+    <div class="text-sm breadcrumbs ml-[10px]">
+        <ul>
+            <li><a href="/admin/product/config_group">Nhóm cấu hình sản phẩm</a></li>
+            <li class="text-[#0041E8]">Form thêm/sửa cấu hình</li>
+        </ul>
+    </div>
+
+    <div class="w-[1140px] my-0 mx-auto">
+        <div class="bg-white p-[10px] rounded-[10px] shadow-[0_1px_1px_0px_#0000001A] my-[15px]">
+            <div class="flex items-center justify-between">
+                <h1 class="text-[20px] font-[700]">Cập nhật cấu hình sản phẩm</h1>
+                <div class="flex items-center ">
+                    <a href="/admin/brand/add"
+                        class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px]">
+                        <span
+                            class="w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#6B7280] text-center leading-[12px] mr-[5px] text-[#6B7280]">+</span>
+                        <span class="text-[#6B7280]">Thêm sp mới</span>
+                    </a>
+                    <a href="/admin/brand/add"
+                        class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px] ml-[10px]">
+                        <i class="fa-solid fa-copy text-[#6B7280] mr-[3px]"></i>
+                        <span class="text-[#6B7280]">Tạo sp tương tự</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab">
+                    <a href="/admin/product/config_group_form"
+                        class="item block w-[100%] h-[36px] text-[#6B7280] bg-[#fff] rounded-[10px_10px_0_0] text-[13px] leading-[35px] px-[10px]">Nội
+                        dung</a>
+                    <a href="/admin/product/config_group_attribute"
+                        class=" item block w-[100%] h-[36px] text-[#fff] bg-[#0041E8] text-[13px] leading-[35px] px-[10px] font-500">Thuộc
+                        tính</a>
+                    <a href="/admin/product/config_group_product"
+                        class=" item block w-[100%] h-[36px] text-[#6B7280] bg-[#fff] text-[13px] leading-[35px] px-[10px] font-500 rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A] border-t-[1px]  border-[#f8f8f8]">Sản
+                        phẩm</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+
+                <div
+                    class="bg-white p-[10px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+                    <b class="block font-[20px] mb-[10px]">Thuộc tính</b>
+                    <div class="flex items-center mb-[10px]">
+                        <div class="form-control mr-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Cập nhật</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Cập nhật"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control ml-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Thứ tự</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Thứ tự"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white p-[10px] shadow-[0px_1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+                    <b class="block font-[20px] mb-[10px]">Thuộc tính</b>
+
+                    <div class="flex items-center mb-[10px]">
+                        <div class="form-control mr-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Giá trị</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Giá trị"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control mx-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Mô tả</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Mô tả"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control ml-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Thứ tự</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="0" placeholder="Thứ tự"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                    </div>
+                    <div class="flex items-center mb-[10px]">
+                        <div class="form-control mr-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Giá trị</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Giá trị"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control mx-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Mô tả</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Mô tả"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control ml-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Thứ tự</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="0" placeholder="Thứ tự"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                    </div>
+                    <div class="flex items-center mb-[10px]">
+                        <div class="form-control mr-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Giá trị</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Giá trị"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control mx-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Mô tả</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                                placeholder="Mô tả"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                        <div class="form-control ml-[7px]">
+                            <label class="font-[600] mb-[5px] text-[14px]">Thứ tự</label>
+                            <input type="text" size="60" name="info[title]" id="title" value="0" placeholder="Thứ tự"
+                                class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                        </div>
+                    </div>
+
+                    <a href="javascript:void(0)" class="flex items-center text-center justify-center mt-[20px]">
+                        <span
+                            class="font-[500] w-[15px] h-[15px] border-[1px] rounded-[50%] border-[#0041E8] text-center leading-[12px] mr-[5px] text-[#0041E8]">+</span>
+                        <span class="text-[#0041E8] font-[500]">Thêm giá trị</span>
+                    </a>
+                </div>
+
+                <div class="bg-white p-[10px] rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A]">
+                    <input class="w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer"
+                        id="submit-collection-btn" name="commit" type="submit" value="Cập nhật" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/template/product/config_group_form.html b/template/product/config_group_form.html
index 1907f52..6d7f18d 100644
--- a/template/product/config_group_form.html
+++ b/template/product/config_group_form.html
@@ -27,6 +27,46 @@
             </div>
         </div>
 
+        <div class="flex">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab">
+                    <a href="/admin/product/config_group_form"
+                        class="item block w-[100%] h-[36px] text-white bg-[#0041E8] rounded-[10px_10px_0_0] text-[13px] leading-[35px] px-[10px]">Nội
+                        dung</a>
+                    <a href="/admin/product/config_group_attribute"
+                        class=" item block w-[100%] h-[36px] text-[#6B7280] bg-[#fff] text-[13px] leading-[35px] px-[10px] font-500">Thuộc
+                        tính</a>
+                    <a href="/admin/product/config_group_product"
+                        class=" item block w-[100%] h-[36px] text-[#6B7280] bg-[#fff] text-[13px] leading-[35px] px-[10px] font-500 rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A] border-t-[1px]  border-[#f8f8f8]">Sản
+                        phẩm</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+                <div
+                    class="bg-white p-[10px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
 
+                    <div class="form-control mb-[10px]">
+                        <label class="font-[600] mb-[5px] text-[14px]">Tên nhóm</label>
+                        <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                            placeholder="Tên nhóm"
+                            class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                    </div>
+
+                    <div class="form-control mb-[10px]">
+                        <label class="font-[600] mb-[5px] text-[14px]">Mô tả tóm tắt</label>
+                        <textarea type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                            placeholder="Tên nhóm"
+                            class="w-[100%] h-[120px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"></textarea>
+                    </div>
+
+                </div>
+
+                <div class="bg-white p-[10px] rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A]">
+                    <input class="w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer"
+                        id="submit-collection-btn" name="commit" type="submit" value="Cập nhật" />
+                </div>
+
+            </div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/template/product/config_group_product.html b/template/product/config_group_product.html
new file mode 100644
index 0000000..13f15ad
--- /dev/null
+++ b/template/product/config_group_product.html
@@ -0,0 +1,89 @@
+<div class="w-[100%] mb-[50px]">
+
+    <div class="text-sm breadcrumbs ml-[10px]">
+        <ul>
+            <li><a href="/admin/product/config_group">Nhóm cấu hình sản phẩm</a></li>
+            <li class="text-[#0041E8]">Form thêm/sửa cấu hình</li>
+        </ul>
+    </div>
+
+    <div class="w-[1140px] my-0 mx-auto">
+        <div class="bg-white p-[10px] rounded-[10px] shadow-[0_1px_1px_0px_#0000001A] my-[15px]">
+            <div class="flex items-center justify-between">
+                <h1 class="text-[20px] font-[700]">Cập nhật cấu hình sản phẩm</h1>
+                <div class="flex items-center ">
+                    <a href="/admin/brand/add"
+                        class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px]">
+                        <span
+                            class="w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#6B7280] text-center leading-[12px] mr-[5px] text-[#6B7280]">+</span>
+                        <span class="text-[#6B7280]">Thêm sp mới</span>
+                    </a>
+                    <a href="/admin/brand/add"
+                        class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px] ml-[10px]">
+                        <i class="fa-solid fa-copy text-[#6B7280] mr-[3px]"></i>
+                        <span class="text-[#6B7280]">Tạo sp tương tự</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab">
+                    <a href="/admin/product/config_group_form"
+                        class="item block w-[100%] h-[36px] text-[#6B7280] bg-[#fff] rounded-[10px_10px_0_0] text-[13px] leading-[35px] px-[10px]">Nội
+                        dung</a>
+                    <a href="/admin/product/config_group_attribute"
+                        class=" item block w-[100%] h-[36px] text-[#6B7280] bg-[#fff] text-[13px] leading-[35px] px-[10px] font-500">Thuộc
+                        tính</a>
+                    <a href="/admin/product/config_group_product"
+                        class=" item block w-[100%] h-[36px] text-[#fff] bg-[#0041E8] text-[13px] leading-[35px] px-[10px] font-500 rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A] border-t-[1px]  border-[#f8f8f8]">Sản
+                        phẩm</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+                <div class="bg-white h-[400px] p-[10px] rounded-[10px] shadow-[0px_1px_1px_0px_#0000001A]">
+
+                    <table class="table-config-pro">
+                        <thead>
+                            <tr>
+                                <th>STT</th>
+                                <th>Sản phẩm</th>
+                                <th>Thuộc tính</th>
+                                <th>Công cụ</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>1</td>
+                                <td>
+                                    <a href="" class="name">Tai nghe Bluetooth True Wireless WIWU TWS12 Màu Hồng</a>
+                                </td>
+                                <td>
+                                    <div class="flex items-center">
+                                        <p>Màu sắc</p>
+                                        <select name="" id="">
+                                            <option value="">Hồng</option>
+                                            <option value="">Tím</option>
+                                        </select>
+                                    </div>
+                                </td>
+                                <td class="w-[120px]">
+                                    <div class='list-btn flex items-center'>
+                                        <a href=""
+                                            class="w-[86px] h-[30px] leading-[30px] mr-[5px] bg-[#0041E8] text-center text-white rounded-[4px]">Cập
+                                            nhật</a>
+                                        <a href=""
+                                            class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                                class='icons icon-remove'></i></a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/template/product/list_competitor.html b/template/product/list_competitor.html
new file mode 100644
index 0000000..e62f820
--- /dev/null
+++ b/template/product/list_competitor.html
@@ -0,0 +1,128 @@
+<div class="w-[100%]">
+    <div
+        class="m-[15px] p-[15px_10px_15px_10px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-x-auto">
+        <h1 class="text-[24px] font-[700] mb-3">So sánh giá đối thủ</h1>
+
+        <div class="shadow-[0px_1px_1px_0px_#0000001A] p-[10px] rounded-[10px] border-[1px] border-[#F6F6F6]">
+            <div class="flex items-center">
+                <input type="text" size="60" name="info[title]" placeholder=""
+                    class="w-[300px] h-[30px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                <a href="javascript:void(0)"
+                    class="w-[70px] h-[29px] leading-[30px] text-center rounded-[4px] bg-[#0041E8] text-white ml-[10px]">Tìm
+                    kiếm</a>
+            </div>
+        </div>
+
+        <div class="flex items-center justify-between my-[15px]">
+            <a href="javascript:void(0)" onclick="js_list_category.showModal()"
+                class="p-[5px] border-[#79B0E2] border-[1px] rounded-[4px] text-[#79B0E2] hover:bg-[#0061ff] hover:text-white mr-[15px]">
+                Chọn danh mục để xem
+            </a>
+
+            <select name="" id=""
+                class="w-[115px] h-[35px] shadow-[0px_2px_4px_0px_#0000001F] p-[5px] rounded-[4px] border-[1px] border-[#D8D8D8]">
+                <option value="">Bộ lọc</option>
+            </select>
+        </div>
+
+        <table class="table-list-competitor">
+            <thead>
+                <tr>
+                    <th>STT</th>
+                    <th>Sản phẩm (Tổng số: 53)</th>
+                    <th>Cập nhật</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="w-[40px]">1</td>
+                    <td>
+                        <a href="" class="name">Ổ Cứng SSD KINGMAX 120GB SMV32</a>
+                        <p>- Giá: <b>499.000</b></p>
+                        <p>-Mã kho: OCKM0008</p>
+                        <p>- Cập nhật: 25-01-2024, 9:46 am (29 ngày)</p>
+                    </td>
+                    <td class="w-[115px]">
+                        <a href=""
+                            class="block w-[82px] h-[30px] bg-[#0041E8] leading-[30px] text-center text-white rounded-[4px]">Cập
+                            nhật</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-[40px]">1</td>
+                    <td>
+                        <a href="" class="name">Ổ Cứng SSD KINGMAX 120GB SMV32</a>
+                        <p>- Giá: <b>499.000</b></p>
+                        <p>-Mã kho: OCKM0008</p>
+                        <p>- Cập nhật: 25-01-2024, 9:46 am (29 ngày)</p>
+                    </td>
+                    <td class="w-[115px]">
+                        <a href=""
+                            class="block w-[82px] h-[30px] bg-[#0041E8] leading-[30px] text-center text-white rounded-[4px]">Cập
+                            nhật</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-[40px]">1</td>
+                    <td>
+                        <a href="" class="name">Ổ Cứng SSD KINGMAX 120GB SMV32</a>
+                        <p>- Giá: <b>499.000</b></p>
+                        <p>-Mã kho: OCKM0008</p>
+                        <p>- Cập nhật: 25-01-2024, 9:46 am (29 ngày)</p>
+                    </td>
+                    <td class="w-[115px]">
+                        <a href=""
+                            class="block w-[82px] h-[30px] bg-[#0041E8] leading-[30px] text-center text-white rounded-[4px]">Cập
+                            nhật</a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+
+
+    <dialog id="js_list_category" class="modal">
+        <div class="modal-box w-11/12 max-w-5xl">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+            <div class="list-category mt-[5px] max-h-[400px] max-h-[400px] overflow-x-auto">
+                {% for cate in page.list_category %}
+                <a href="{{cate.url}}" class="item block mb-[5px] text-[#0041E8]">
+                    {% if cate.children.size > 0 %}
+                    <b class="text-[#0041E8]">+ (#{{cate.id}}){{cate.title}}</b>
+                    {% else %}
+                    + (#{{cate.id}}){{cate.title}}
+                    {% endif %}
+                </a>
+                {% if cate.children.size > 0 %}
+                <div class="ml-[15px]">
+                    {% for cate2 in cate.children %}
+                    <a href="{{cate2.url}}" class="item block mb-[5px] text-[#0041E8]">
+                        {% if cate2.children.size > 0 %}
+                        <b class="text-[#0041E8]">+ (#{{cate2.id}}){{cate2.title}}</b>
+                        {% else %}
+                        + (#{{cate2.id}}){{cate2.title}} ({{cate2.totalProduct}})
+                        {% endif %}
+                    </a>
+                    {% if cate2.children.size > 0 %}
+                    <div class="ml-[15px]">
+                        {% for cate3 in cate2.children %}
+                        <a href="{{cate3.url}}" class="item block mb-[5px] text-[#0041E8]">+
+                            (#{{cate3.id}}){{cate3.title}}
+                            ({{cate3.totalProduct}})</a>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                    {% endfor %}
+                </div>
+                {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+            <button>close</button>
+        </form>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/template/product/spec_group.html b/template/product/spec_group.html
new file mode 100644
index 0000000..268649d
--- /dev/null
+++ b/template/product/spec_group.html
@@ -0,0 +1,90 @@
+<div class="w-[100%]">
+    <div
+        class="m-[15px] p-[15px_10px_15px_10px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-x-auto">
+        <h1 class="text-[24px] font-[700] mb-3">Nhóm thông số kỹ thuật</h1>
+
+        <div class="shadow-[0px_1px_1px_0px_#0000001A] p-[10px] rounded-[10px] border-[1px] border-[#F6F6F6]">
+            <div class="flex items-center">
+                <input type="text" size="60" name="info[title]" placeholder=""
+                    class="w-[300px] h-[30px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                <a href="javascript:void(0)"
+                    class="w-[70px] h-[29px] leading-[30px] text-center rounded-[4px] bg-[#0041E8] text-white ml-[10px]">Tìm
+                    kiếm</a>
+            </div>
+        </div>
+
+        <div class="flex items-center justify-between mt-[15px]">
+            <p>
+                <b>Hướng dẫn:</b>
+                <span class="ml-[5px]">Nhóm thông số kỹ thuật được ghép cho từng sản phẩm cụ thể</span>
+            </p>
+            <a href="/admin/product/spec-group"
+                class="flex items-center border-[1px] border-[#0041E8] rounded-[4px] p-[5px_10px_5px_10px]">
+                <span
+                    class="w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#0041E8] text-center leading-[11px] mr-[5px] text-[#0041E8]">+</span>
+                <span class="text-[#0041E8]">Thêm nhóm mới</span>
+            </a>
+        </div>
+
+        <table class="table-spec mt-[15px]">
+            <thead>
+                <tr>
+                    <th>STT</th>
+                    <th>Tên gọi/miêu tả</th>
+                    <th>Cập nhật</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="w-[38px]">1</td>
+                    <td>
+                        <a href="" class="name">Camera</a>
+                    </td>
+                    <td class="w-[100px]">
+                        <div class='list-btn flex items-center justify-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-[38px]">1</td>
+                    <td>
+                        <a href="" class="name">Camera</a>
+                    </td>
+                    <td class="w-[100px]">
+                        <div class='list-btn flex items-center justify-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-[38px]">1</td>
+                    <td>
+                        <a href="" class="name">Camera</a>
+                    </td>
+                    <td class="w-[100px]">
+                        <div class='list-btn flex items-center justify-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/template/product/spec_group_add.html b/template/product/spec_group_add.html
new file mode 100644
index 0000000..58cc4e4
--- /dev/null
+++ b/template/product/spec_group_add.html
@@ -0,0 +1,78 @@
+<div class="w-[100%] mb-[50px]">
+
+    <div class="text-sm breadcrumbs ml-[10px]">
+        <ul>
+            <li><a href="/admin/product/spec-group">Nhóm thông số kỹ thuật</a></li>
+            <li><a href="/admin/product/spec-group-info">Thông tin nhóm thông số kỹ thuật</a></li>
+            <li class="text-[#0041E8]">Form thông số kỹ thuật</li>
+        </ul>
+    </div>
+
+    <div class="w-[1140px] my-0 mx-auto">
+        <div class="bg-white p-[10px] rounded-[10px] shadow-[0_1px_1px_0px_#0000001A] my-[15px]">
+            <div>
+                <h1 class="text-[20px] font-[700]">Cập nhật thông số kỹ thuật</h1>
+                <span class="text-[#6B7280]">Thông tin chung</span>
+            </div>
+        </div>
+        <div class="flex">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab">
+                    <a href="javascript:void(0)"
+                        class="item block w-[100%] h-[36px] text-white bg-[#0041E8] rounded-[10px] text-[13px] leading-[35px] px-[10px]">Nội
+                        dung</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+                <div
+                    class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+
+                    <div class="form-control mb-[10px]">
+                        <label class="font-[600] mb-[5px] text-[14px]">Header</label>
+                        <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
+                            placeholder="Thông tin chung"
+                            class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                    </div>
+
+                    <div class="form-control mb-[10px]">
+                        <label class="font-[600] mb-[5px] text-[14px]">Tên thông số (*)</label>
+                        <input type="text" size="60" name="" placeholder="Hãng sản xuất"
+                            class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                    </div>
+
+                    <div class="form-control mb-[10px]">
+                        <label class="font-[600] mb-[5px] text-[14px]">Diễn dải</label>
+                        <textarea type="text" size="60" name="" placeholder="Diễn dải"
+                            class="w-[100%] h-[120px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"></textarea>
+                    </div>
+
+                    <div class="form-control mb-[10px]">
+                        <label class="font-[600] mb-[5px] text-[14px]">Thứ tự hiển thị</label>
+                        <input type="text" size="60" name="" placeholder="Thứ tự hiển thị"
+                            class="w-[50%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+                    </div>
+
+                    <div class="mb-[10px] flex items-center">
+                        <label class="font-[600] mb-[5px] text-[14px] w-[170px]">Bắt buộc nhập cho sp</label>
+                        <div class="flex items-center">
+                            <div class="check-form flex items-center mb-[10px] mr-[20px]">
+                                <input type="radio" name="info[scope]" value="0" checked="">
+                                <label for="" class="ml-[25px] text-[#6B7280]">Bắt buộc</label>
+                            </div>
+                            <div class="check-form flex items-center mb-[10px]">
+                                <input type="radio" name="info[scope]" value="1">
+                                <label for="" class="ml-[25px] text-[#6B7280]">Không bắt buộc</label>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="bg-white p-[10px] shadow-[0px_1px_1px_0px_#0000001A] rounded-[0_0_10px_10px]">
+                    <input class="w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer"
+                        id="submit-collection-btn" name="commit" type="submit" value="Cập nhật" />
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/template/product/spec_group_info.html b/template/product/spec_group_info.html
new file mode 100644
index 0000000..92c768d
--- /dev/null
+++ b/template/product/spec_group_info.html
@@ -0,0 +1,95 @@
+<div class="w-[100%]">
+
+    <div class="text-sm breadcrumbs ml-[10px]">
+        <ul>
+            <li><a href="/admin/product/spec-group">Nhóm thông số kỹ thuật</a></li>
+            <li class="text-[#0041E8]">Thông tin nhóm thông số kỹ thuật</li>
+        </ul>
+    </div>
+
+    <div class="m-[15px] p-[10px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-x-auto">
+        <h1 class="text-[24px] font-[700] mb-3">Thông tin nhóm thông số kỹ thuật</h1>
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <b>Nhóm thông số</b>
+                <p class="ml-[5px]">THIẾT BỊ TRỢ GIẢNG</p>
+            </div>
+            <a href="/admin/product/spec-group-add"
+                class="block border-[1px] border-[#0041E8] rounded-[4px] p-[5px_10px_5px_10px]">
+                <span
+                    class="inline-block	 w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#0041E8] text-center leading-[11px] text-[#0041E8] mb-[2px]">+</span>
+                <span class="text-[#0041E8] font-[500]">Thêm nhóm mới</span>
+            </a>
+        </div>
+
+        <table class="spec-info mt-[20px]">
+            <thead>
+                <tr>
+                    <th>STT</th>
+                    <th>Header</th>
+                    <th>Thông tin</th>
+                    <th>Diễn dải</th>
+                    <th>Thứ tự hiển thị</th>
+                    <th>Bắt buộc nhập cho sp</th>
+                    <th>Cập nhật</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>Thông tin chung</td>
+                    <td>Đặc tính</td>
+                    <td>-</td>
+                    <td>99</td>
+                    <td>Có</td>
+                    <td class="w-[100px]">
+                        <div class='list-btn flex items-center justify-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td>Thông tin chung</td>
+                    <td>Đặc tính</td>
+                    <td>-</td>
+                    <td>99</td>
+                    <td>Có</td>
+                    <td class="w-[100px]">
+                        <div class='list-btn flex items-center justify-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td>Thông tin chung</td>
+                    <td>Đặc tính</td>
+                    <td>-</td>
+                    <td>99</td>
+                    <td>Có</td>
+                    <td class="w-[100px]">
+                        <div class='list-btn flex items-center justify-center'>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i
+                                    class='icons icon-edit'></i></a>
+                            <a href=""
+                                class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center'><i
+                                    class='icons icon-remove'></i></a>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
\ No newline at end of file