tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: tieptk:3eada29d4c179512b93be47552649855aa934583
Branches Tags
tieptk:master
...
compare: tieptk:master
Branches Tags
tieptk:master

4 Commits
3eada29d4c ... master

Author SHA1 Message Date
Tieptk
c377e01f33 upload 2025-05-31 20:29:02 +07:00
Tieptk
0836e4473f up 2025-05-29 13:15:23 +07:00
Tieptk
50e424b802 up 2025-05-29 11:59:43 +07:00
Tieptk
7923fb8b3b up 2025-05-29 11:02:19 +07:00
22 changed files with 658 additions and 1229 deletions
Expand all files Collapse all files

23
config/routing.php
View File

@@ -8,6 +8,20 @@ return [
'query' => [],
'url' => '/buildpc',
],
"/buildpc/compare" => [
'module' => 'buildpc',
'view' => 'compare',
'view_id'=> 0,
'query' => [],
'url' => '/buildpc/compare',
],
"/buildpc/detail" => [
'module' => 'buildpc',
'view' => 'detail',
'view_id'=> 0,
'query' => [],
'url' => '/buildpc/detail',
],
// product
"/danh-muc-cap1.html" => [
'module' => 'category',
@@ -38,6 +52,15 @@ return [
'query' => [],
'url' => '/san-pham-da-luu',
],
// tim kiem
"/tim" => [
'module' => 'product',
'view' => 'search',
'view_id'=> 0,
'query' => [],
'url' => '/tim',
],
// tim nguoi ban
"/tim-nguoi-ban" => [
'module' => 'shop',

81
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"preact": "^10.26.6",
"preact-iso": "^2.9.1",
"react-fancybox": "^1.0.2",
"react-router-dom": "^7.6.1",
"react-slick": "^0.30.3",
"swiper": "^11.2.6",
"tailwindcss": "^4.1.5"
@@ -1765,6 +1766,15 @@
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
"dev": true
},
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3982,6 +3992,44 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"node_modules/react-router": {
"version": "7.6.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
"integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.6.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
"integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
"license": "MIT",
"dependencies": {
"react-router": "7.6.1"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/react-slick": {
"version": "0.30.3",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz",
@@ -4226,6 +4274,12 @@
"semver": "bin/semver.js"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/set-function-length": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -6145,6 +6199,11 @@
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
"dev": true
},
"cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
},
"cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -7719,6 +7778,23 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"react-router": {
"version": "7.6.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
"integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
"requires": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
}
},
"react-router-dom": {
"version": "7.6.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
"integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
"requires": {
"react-router": "7.6.1"
}
},
"react-slick": {
"version": "0.30.3",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz",
@@ -7883,6 +7959,11 @@
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true
},
"set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
},
"set-function-length": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

1
package.json
View File

@@ -11,6 +11,7 @@
"preact": "^10.26.6",
"preact-iso": "^2.9.1",
"react-fancybox": "^1.0.2",
"react-router-dom": "^7.6.1",
"react-slick": "^0.30.3",
"swiper": "^11.2.6",
"tailwindcss": "^4.1.5"

8
public_html/assets/builder/index.js
View File

File diff suppressed because one or more lines are too long

5
public_html/assets/script/style.css
View File

@@ -279,6 +279,11 @@ html {
height: 20px;
background-position: 0px -209px;
}
.icon_2025.filter-2 {
width: 22px;
height: 22px;
background-position: -24px -209px;
}
.icon_2025.comment {
width: 20px;
height: 20px;

2
public_html/assets/script/style.css.map
View File

File diff suppressed because one or more lines are too long

5
public_html/assets/script/style.scss
View File

@@ -281,6 +281,11 @@ html {
height: 20px;
background-position: 0px -209px;
}
&.filter-2 {
width: 22px;
height: 22px;
background-position: -24px -209px;
}
&.comment {
width: 20px;
height: 20px;

13
src/components/buildpc/CreateBuildpc.tsx
View File

@@ -1,9 +1,20 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { PopupBuildpc } from "../../components/buildpc/PopupBuildpc";
export function CreateBuildpc() {
const [showPopup, setShowPopup] = useState(false);
useEffect(() => {
if (showPopup) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
return () => {
document.body.style.overflow = "auto";
};
}, [showPopup]);
return (
<>
<div className="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">

68
src/components/footer/Footer.tsx
View File

@@ -1,68 +0,0 @@
export function Footer() {
return (
<footer className="border-t-[11px] border-[#1c039b] w-full">
<div className="container">
<a href="/" className="block my-[30px]">
<img
src="/assets/images/logo-footer.png"
className="block w-[180px] h-[45px] object-contain"
width="100%"
height="100%"
alt="logo"
/>
</a>
<div className="main-footer grid grid-cols-4">
<div className="item">
<h3 className="title font-bold">Về chúng tôi</h3>
<a href="" className="block">
Độc quyền
</a>
<a href="" className="block">
Mua online
</a>
<a href="" className="block">
Bộ sưu tập
</a>
<a href="/tin-tuc" className="block">
Blog
</a>
<div className="list-social flex items-center mt-[45px]">
<a href="" target="_blank" className="mr-[10px]">
<i className="icon_2025 facebook"></i>
</a>
<a href="" target="_blank">
<i className="icon_2025 zalo"></i>
</a>
</div>
</div>
<div className="item">
<h3 className="title font-bold">Tuyển dụng</h3>
<a href="">Liên hệ</a>
<a href="">Điều khoản</a>
<a href="">Chính sách bảo mật</a>
<a href="">Trở thành đối tác</a>
</div>
<div className="item">
<h3 className="title font-bold">Liên kết</h3>
<a href="hurasoft.com">Hurasoft.com</a>
</div>
<div className="item">
<h3 className="title font-bold">Giới thiệu</h3>
<b className="text-[16px]">
BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở
Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ nghành
hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC
chuyên nghiệp. Và còn rất nhiều mã giảm giá độc quyền dành riêng
cho bạn.
</b>
</div>
</div>
</div>
<div className="footer-bottom bg-[#ebebeb] py-[15px]">
<b className="text-center block">
© Copyright 2025 by Hurasoft. All Rights Reserved.
</b>
</div>
</footer>
);
}

859
src/components/header/Header.tsx
View File

@@ -1,859 +0,0 @@
export function Header() {
return (
<header class="w-full">
<div class="header-main px-[10px] py-6 bg-[var(--color-global)]">
<div class="container">
<div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]">
<img
src="/assets/images/logo.png"
class="object-contain w-[173px] h-[45px] block"
alt="Location icon"
/>
</a>
<div class="flex items-center mr-[100px]">
<i class="icon_2025 map"></i>
<div class="ml-[20px] ">
<span class="text-xs text-white block mb-[5px]">
Bạn đang ở
</span>
<div class="box-select">
<select name="" id="" class="select select_location">
<option value="">Hà Nội</option>
<option value="">TP HCM</option>
<option value="">Đà Nẵng</option>
</select>
</div>
</div>
</div>
<div class="w-[670px] relative mr-[135px] input-search">
<form
action="/search"
enctype="text/plain"
method="get"
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden"
>
<input
type="text"
name="q"
placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base"
/>
<button
type="submit"
class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"
>
<i class="icon_2025 search "></i>
</button>
</form>
<div class="autocomplete-suggestions hidden">
<p>TỪ KHOÁ HOT</p>
<ul class="ul">
<li>
<a href=""> laptop </a>
</li>
<li>
<a href=""> laptop </a>
</li>
<li>
<a href=""> laptop </a>
</li>
<li>
<a href=""> laptop </a>
</li>
<li>
<a href=""> laptop </a>
</li>
<li>
<a href=""> laptop </a>
</li>
<li>
<a href=""> laptop </a>
</li>
</ul>
</div>
</div>
<div class="box-user">
<div class="flex items-center">
<i class="icon_2025 user"></i>
<b class="text-white p-[0_5px] whitespace-nowrap">Tài khoản</b>
<i class="icon_arrow"></i>
</div>
</div>
</div>
</div>
</div>
{/* Navigation Section */}
<nav class="header-bottom px-[10px] py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
<div class="container">
<div class="flex items-center justify-between w-full">
<div class="header-menu relative group">
<div class="title-menu flex items-center justify-center w-[219px] h-[45px] rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
<i class="icon_2025 bar"></i>
<b class="ml-[8px] uppercase">Danh mục sản phẩm</b>
</div>
<div class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/laptop.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/008-mouse.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/010-computer.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/013-fan.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/server-4.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Laptop </a>
</li>
<li>
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/laptop.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/008-mouse.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/010-computer.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/013-fan.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="/danh-muc-cap1.html" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/server-4.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
<div class="item">
<a href="" class="flex items-center">
<span class="cate-img">
{" "}
<img src="/dev/images/server-4.png" alt="" />{" "}
</span>
<span class="cate-name"> Laptop &amp; phụ kiện</span>
</a>
<div class="sub-menu">
<ul class="ul sub-cate">
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
<li>
<a href=""> Laptop </a>
</li>
<li>
<a href=""> Phụ kiện </a>
</li>
</ul>
<ul class="ul sub-cate">
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
<li>
<a href=""> Laptop 2 </a>
</li>
<li>
<a href=""> Phụ kiện 2 </a>
</li>
</ul>
</div>
</div>
{/* end copy */}
</div>
</div>
<div class="flex gap-[40px] header-bottom-right">
<a href="/buildpc" class="flex items-center group">
<i class="icon_2025 buildpc"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
Build PC
</span>
</a>
<a href="/tim-nguoi-ban" class="flex items-center group">
<i class="icon_2025 shop"></i>
<span class="ml-[7px] hover:text-[var(--color-global)]">
Tìm người bán
</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 map-2 "></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
Địa chỉ sửa chữa
</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 question"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
Hỏi đáp
</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 prduct-save"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
Sản phẩm đã lưu
</span>
</a>
<a href="/" class="flex items-center group">
<i class="icon_2025 article"></i>
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
Tin rạo vặt
</span>
</a>
</div>
</div>
</div>
</nav>
</header>
);
}

20
src/index.tsx
View File

@@ -1,5 +1,5 @@
import { render } from "preact";
import { LocationProvider, Router, Route } from "preact-iso";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { ProductDetail } from "./pages/productDetail/ProductDetail";
import { Buildpc } from "./pages/buildpc/Buildpc";
import { CompareBuildpc } from "./pages/buildpc/CompareBuildpc";
@@ -7,16 +7,14 @@ import { DetailBuildpc } from "./pages/buildpc/DetailBuildpc";
export function App() {
return (
<LocationProvider>
<main>
<Router>
<Route path="/product-detail" component={ProductDetail} />
<Route path="/buildpc" component={Buildpc} />
<Route path="/buildpc/compare" component={CompareBuildpc} />
<Route path="/buildpc/detail" component={DetailBuildpc} />
</Router>
</main>
</LocationProvider>
<Router>
<Routes>
<Route path="/product-detail" element={<ProductDetail />} />
<Route path="/buildpc" element={<Buildpc />} />
<Route path="/buildpc/compare" element={<CompareBuildpc />} />
<Route path="/buildpc/detail" element={<DetailBuildpc />} />
</Routes>
</Router>
);
}

1
src/pages/buildpc/compare.php Normal file
View File

@@ -0,0 +1 @@
<?php

1
src/pages/buildpc/detail.php Normal file
View File

@@ -0,0 +1 @@
<?php

1
src/pages/product/search.php Normal file
View File

@@ -0,0 +1 @@
<?php

2
template/buildpc/compare.html Normal file
View File

@@ -0,0 +1,2 @@
<div id="root"></div>
<script type="module" src="/assets/builder/index.js"></script>

2
template/buildpc/detail.html Normal file
View File

@@ -0,0 +1,2 @@
<div id="root"></div>
<script type="module" src="/assets/builder/index.js"></script>

2
template/classifieds/detail.html
View File

@@ -132,7 +132,7 @@
</div>
<div class="item flex items-center gap-[10px] mb-2">
<span class="block w-[24px]"><i class="icon_2025 time-big ml-[2px]" style="background-size: 200px 206px;
background-position: -2px -62px;width: 22px;height: 22px;"></i></span>
background-position: -2px -72px;width: 22px;height: 22px;"></i></span>
<p class="text-lg text-[#303030]">Ngày đăng 12/04/2025 còn <span>2</span> ngày</p>
</div>
</div>

210
template/home/components/main_stat.html
View File

@@ -1,210 +0,0 @@
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="mr-[10px] w-[calc(100%-36px)] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">
Đơn
hàng
mới</p>
<a href=""
class="bg-[#F0F8FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-cart"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
<i class="icons icon-increase"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">Khách
hàng
liên hệ qua website</p>
<a href=""
class="bg-[#F0F9F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-contact"></i>
</a>
</div>
<p class="text-[22px] text-custom-28 leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
<i class="icons icon-increase"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
trả
góp</p>
<a href=""
class="bg-[#F7F5FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-pay"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
<i class="icons icon-reduce"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
hoàn
trả</p>
<a href=""
class="bg-[#F9F2F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-installment"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
<i class="icons icon-reduce"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
<div class="flex justify-between min-h-[100px]">
<div>
<h5 class="leading-[30px] text-[24px] font-[600]">32.4k</h5>
<p class="text-custom-16 text-[14px] text-[#7E7E7E]">Doanh thu trong tuần này</p>
</div>
<div
class="flex items-center px-2.5 py-0.5 text-base font-semibold text-green-500 dark:text-green-500 text-center">
12%
<i class="fa-solid fa-arrow-up ml-[5px]"></i>
</div>
</div>
<div id="js-revenue-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="flex justify-between items-center pt-5">
<select>
<option value=""> Last 7 days </option>
<option value=""> Yesterday </option>
<option value=""> Today </option>
<option value=""> Last 7 days </option>
<option value=""> Last 30 days </option>
<option value=""> Last 90 days </option>
</select>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
Users Report
<i class="fa-solid fa-angle-right ml-[5px]"></i>
</a>
</div>
</div>
</div>
<div
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
<div class="pb-[14px] mb-[10px] border-b border-gray-200 dark:border-gray-700">
<h5 class="leading-[30px] text-[24px] font-[600]">3.4k</h5>
<div class="flex items-center justify-between">
<p class="text-[14px] text-[#7E7E7E] text-custom-16">Truy cập web trong tuần này</p>
<span
class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13V1m0 0L1 5m4-4 4 4" />
</svg>
42.5%
</span>
</div>
</div>
<div class="grid grid-cols-2">
<dl class="flex items-center">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Lượt truy cập:
</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">1.458</dd>
</dl>
<dl class="flex items-center justify-end">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Người xem:</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">2.130</dd>
</dl>
</div>
<div id="js-access-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="flex justify-between items-center pt-5">
<select>
<option value=""> Last 7 days </option>
<option value=""> Yesterday </option>
<option value=""> Today </option>
<option value=""> Last 7 days </option>
<option value=""> Last 30 days </option>
<option value=""> Last 90 days </option>
</select>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
Leads Report
<svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" />
</svg>
</a>
</div>
</div>
</div>

156
template/home/home.html
View File

@@ -92,12 +92,13 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -113,12 +114,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -134,12 +136,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -155,12 +158,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -176,12 +180,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -197,12 +202,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -218,12 +224,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
@@ -262,7 +269,7 @@
</div>
<div class="list-category grid grid-cols-8 gap-[60px] mt-10">
<!-- Category 1 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-1.png" class="object-contain aspect-[1.29] w-[90px]"
@@ -274,7 +281,7 @@
</a>
<!-- Category 2 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-2.png" class="object-contain aspect-[0.96] w-[89px]"
@@ -286,7 +293,7 @@
</a>
<!-- Category 3 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-3.png" class="object-contain aspect-[1.06] w-[104px]"
@@ -298,7 +305,7 @@
</a>
<!-- Category 4 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-4.png" class="object-contain aspect-[1.24] w-[107px]"
@@ -310,7 +317,7 @@
</a>
<!-- Category 5 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-5.png"
@@ -322,7 +329,7 @@
</a>
<!-- Category 6 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-6.png" class="object-contain aspect-[0.88] w-[81px]"
@@ -334,7 +341,7 @@
</a>
<!-- Category 7 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]">
<img src="../../assets/images/icon-cate-7.png" class="object-contain aspect-[0.93] w-[92px]"
@@ -346,7 +353,7 @@
</a>
<!-- Category 8 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-8.png" class="object-contain w-20 aspect-[1.18]"
@@ -358,7 +365,7 @@
</a>
<!-- Category 9 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-9.png" class="object-contain aspect-[1.29] w-[90px]"
@@ -370,7 +377,7 @@
</a>
<!-- Category 10 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-10.png" class="object-contain aspect-[0.83] w-[85px]"
@@ -382,7 +389,7 @@
</a>
<!-- Category 11 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-11.png" class="object-contain aspect-[0.93] w-[100px]"
@@ -394,7 +401,7 @@
</a>
<!-- Category 12 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-12.png" class="object-contain aspect-[0.93] w-[100px]"
@@ -406,7 +413,7 @@
</a>
<!-- Category 13 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-13.png" class="object-contain aspect-[0.95] w-[95px]"
@@ -418,7 +425,7 @@
</a>
<!-- Category 14 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-14.png" class="object-contain aspect-[0.67] w-[67px]"
@@ -430,7 +437,7 @@
</a>
<!-- Category 15 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-15.png" class="object-contain aspect-[1.15] w-[100px]"
@@ -442,7 +449,7 @@
</a>
<!-- Category 16 -->
<a href="" class="item">
<a href="/danh-muc-cap2.html" class="item">
<div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="../../assets/images/icon-cate-16.png" class="object-contain aspect-[1.75] w-[98px]"
@@ -567,12 +574,13 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
@@ -587,12 +595,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
@@ -607,12 +616,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
@@ -627,12 +637,13 @@
</div>
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="flex items-center justify-center mt-[5px]">
<div class="price">15.000.000đ</div>
@@ -866,23 +877,24 @@
</div>
<div class="list mt-5">
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<a href="/san-pham-nguoi-ban" class="image-classifieds effect-image">
<img src="../../assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
<a href="/san-pham-nguoi-ban" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn
từ CES
2025</a>
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]">
<div class="mr-[5px] flex items-center">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
<p class="ml-[5px] map">Quận thanh xuân</p>
</div>
<div class="mr-[5px] flex items-center">
<i class="icon_2025 time"></i>
<p class="ml-[5px]">30 phút trước</p>
<div class="flex items-center">
<i class="icon_2025 time-gray"></i>
<p class="ml-[5px] time">30 phút trước</p>
</div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
<p>Còn 5 ngày</p>
@@ -897,23 +909,24 @@
</div>
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<a href="/san-pham-nguoi-ban" class="image-classifieds effect-image">
<img src="../../assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
<a href="/san-pham-nguoi-ban" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn
từ CES
2025</a>
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]">
<div class="mr-[5px] flex items-center">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
<p class="ml-[5px] map">Quận thanh xuân</p>
</div>
<div class="mr-[5px] flex items-center">
<i class="icon_2025 time"></i>
<p class="ml-[5px]">30 phút trước</p>
<div class="flex items-center">
<i class="icon_2025 time-gray"></i>
<p class="ml-[5px] time">30 phút trước</p>
</div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
<p>Còn 5 ngày</p>
@@ -928,23 +941,24 @@
</div>
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<a href="/san-pham-nguoi-ban" class="image-classifieds effect-image">
<img src="../../assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
<a href="/san-pham-nguoi-ban" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn
từ CES
2025</a>
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]">
<div class="mr-[5px] flex items-center">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
<p class="ml-[5px] map">Quận thanh xuân</p>
</div>
<div class="mr-[5px] flex items-center">
<i class="icon_2025 time"></i>
<p class="ml-[5px]">30 phút trước</p>
<div class="flex items-center">
<i class="icon_2025 time-gray"></i>
<p class="ml-[5px] time">30 phút trước</p>
</div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
<p>Còn 5 ngày</p>
@@ -959,23 +973,24 @@
</div>
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<a href="/san-pham-nguoi-ban" class="image-classifieds effect-image">
<img src="../../assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
<a href="/san-pham-nguoi-ban" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn
từ CES
2025</a>
<div class="summary line-clamp-2 text-[#595959]">Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price">19.999.000đ</div>
<div class="flex items-center mb-[5px] text-[#595959]">
<div class="mr-[5px] flex items-center">
<div class="map-time flex gap-[5px] items-center mb-[5px] text-[15px] text-[#595959]">
<div class="flex items-center">
<i class="icon_2025 map-3"></i>
<p class="ml-[5px]">Quận thanh xuân</p>
<p class="ml-[5px] map">Quận thanh xuân</p>
</div>
<div class="mr-[5px] flex items-center">
<i class="icon_2025 time"></i>
<p class="ml-[5px]">30 phút trước</p>
<div class="flex items-center">
<i class="icon_2025 time-gray"></i>
<p class="ml-[5px] time">30 phút trước</p>
</div>
<div class="pl-[5px] flex items-center border-l-[1px] border-[#595959]">
<p>Còn 5 ngày</p>
@@ -989,7 +1004,6 @@
</a>
</div>
</div>
</div>
<a href="" class="more-link ">
<span class="">Xem tất cả</span> <i class="icon_2025 mouse"></i>

422
template/product/search.html Normal file
View File

@@ -0,0 +1,422 @@
<div class="page-category bg-[#F4F4F4]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/tim?q" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Tìm kiếm
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="box-backgorund px-3 pt-2.5 pb-12 mt-3.5 bg-white">
<div class="flex">
<!-- Left Sidebar - Filters -->
<div class="w-[19%]">
<div class="mt-2 box-filter">
<div class="flex items-center px-3">
<i class="icon_2025 filter-2"></i>
<b class="text-lg font-bold ml-2">Bộ lọc tìm kiếm</b>
</div>
<div class="item-filter mt-2.5">
<h3
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
Lọc theo
</h3>
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
</div>
</div>
<div class="item-filter mt-2.5">
<h3
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
Lọc theo
</h3>
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2">Máy tính dành cho</label>
</a>
</div>
</div>
<div class="item-filter mt-2.5">
<h3
class="text-base font-bold leading-loose text-black pt-[10px] border-t-[1px] border-[#D3D3D3]">
Lượt đánh giá
</h3>
<div class="mt-1 text-base leading-8 text-black max-md:ml-2.5">
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
class="icon-star star-small ml-1"></i></label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
class="icon-star star-small ml-1"></i></label>
</a>
<a href="" class="item flex items-center ">
<input type="checkbox" id="vehicle1" class="checkbox">
<label for="vehicle1" class="ml-2 flex items-center"><b>1</b> <i
class="icon-star star-small ml-1"></i></label>
</a>
</div>
</div>
</div>
</div>
<div class="ml-5 w-[81%]">
<div class="flex items-center flex-wrap gap-[10px]">
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[var(--color-global)] rounded-[3px] whitespace-nowrap font-bold text-[var(--color-global)]">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
<a href=""
class="inline-block px-3 py-1 border-[1px] border-[#b0b0b0] rounded-[3px] whitespace-nowrap">Tất
cả
(128)</a>
</div>
<div class="mt-2 mb-4 flex items-center justify-between">
<h1 class="text-xl font-bold max-md:max-w-full">
Tìm thấy 128 kết quả với từ khóa "<span>Laptop</span>"
</h1>
<select name="" id=""
class="w-[120px] border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
<option value="">Sắp xếp</option>
<option value="">Sản phẩm mới</option>
</select>
</div>
<div class="product-list grid grid-cols-4 gap-[15px]">
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="/product-detail" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="/product-detail" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G
Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

2
template/shared/header.html
View File

@@ -21,7 +21,7 @@
</div>
</div>
<div class="w-[670px] relative mr-[135px] input-search">
<form action="/search" enctype="text/plain" method="get"
<form action="/tim" enctype="text/plain" method="get"
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden">
<input type="text" name="q" placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base" />

3
template/theme.html
View File

@@ -25,9 +25,6 @@
</head>
<body>
{{global|show_var}}
<main>
{% include shared/header %}