397 lines
25 KiB
HTML
397 lines
25 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="vi">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>BESTPC - Trang chủ</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||
|
|
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<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="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||
|
|
<span itemprop="name">
|
||
|
|
Màn hình máy tính
|
||
|
|
</span> <i class="icon_2025 angle-right text-[#637381] ml-[12px]"></i>
|
||
|
|
</a>
|
||
|
|
<meta itemprop="position" content="2">
|
||
|
|
</li>
|
||
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||
|
|
class="flex items-center pr-[12px]">
|
||
|
|
<a href="/aivision.html" itemprop="item" class="nopad-l flex items-center">
|
||
|
|
<span itemprop="name">
|
||
|
|
AIVISION
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<meta itemprop="position" content="3">
|
||
|
|
</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-3 box-filter">
|
||
|
|
<h2 class="text-xl font-bold text-black pb-[15px] border-b-[1px] border-[#D3D3D3]">Danh mục
|
||
|
|
sản phẩm</h2>
|
||
|
|
<ul class="mt-2 text-base leading-8 text-black list-cate">
|
||
|
|
<li>
|
||
|
|
<a href="" class="active">
|
||
|
|
Máy tính để bàn, máy tính xác tay và linh phụ kiện
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li><a href="">Máy tính xách tay (130)</a></li>
|
||
|
|
<li><a href="">Máy chủ (120)</a></li>
|
||
|
|
<li><a href="">Card màn hình (93)</a></li>
|
||
|
|
<li><a href="">Ổ cứng SSD (32)</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<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="mt-2 mb-4 flex items-center justify-between">
|
||
|
|
<h1 class="text-xl max-md:max-w-full">
|
||
|
|
Máy tính để bàn, máy tính xách tay và linh phụ kiện
|
||
|
|
</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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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="" class="product-image">
|
||
|
|
<img src="./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
|
||
|
|
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>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|