2025-05-07 16:03:56 +07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<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>
|
2025-05-12 10:52:19 +07:00
|
|
|
<link rel="stylesheet" href="/src/assets/css/font.css">
|
2025-05-07 16:03:56 +07:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
2025-05-12 10:52:19 +07:00
|
|
|
<link rel="stylesheet" href="/src/assets/css/style.css" rel="stylesheet" />
|
2025-05-07 16:03:56 +07:00
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="page-buildpc bg-[#F4F4F4] pb-[100px]">
|
|
|
|
|
<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">
|
|
|
|
|
<b itemprop="name">
|
|
|
|
|
Tạo máy tính riêng của bạn
|
|
|
|
|
</b>
|
|
|
|
|
</a>
|
|
|
|
|
<meta itemprop="position" content="2">
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Action Bar -->
|
|
|
|
|
<div class="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
|
|
|
|
|
<div class="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
|
|
|
|
<a class="w-[24px] ml-[10px]" href="javascript:void()">
|
|
|
|
|
<i class="icon_2025 copy"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<input type="text" class="w-full h-full p-[10px] outline-none"
|
|
|
|
|
value="https://bestpc.vn/restricted.php" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
|
|
|
|
|
<p class="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
|
|
|
|
|
<input type="text" class="w-full h-full p-[10px] outline-none" value="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
|
|
|
|
|
<i class="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
|
|
|
|
|
<span class="ml-[5px]">Lịch sử</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
|
|
|
|
|
<i class="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
|
|
|
|
|
<span class="ml-[5px]">Tải xuống</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
|
|
|
|
|
<i class="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
|
|
|
|
|
<span class="ml-[5px]">Làm mới</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-white p-[15px]">
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="px-6 py-2.5 text-center font-bold text-white bg-violet-900 rounded">
|
|
|
|
|
Bắt đầu tạo
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="px-6 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900">
|
|
|
|
|
So sánh giá tại các cửa hàng
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- list button -->
|
|
|
|
|
|
2025-05-12 10:12:41 +07:00
|
|
|
<div class="content-tab" id="create-component">
|
2025-05-07 16:03:56 +07:00
|
|
|
<div class="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
|
|
|
|
|
<b class="left w-[200px] name-component">
|
|
|
|
|
Sản phẩm
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)] grid grid-cols-8">
|
|
|
|
|
<b class="item col-span-3">
|
|
|
|
|
Thông tin
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Giá gốc
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Khuyến mãi
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Thành tiền
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item col-span-2">Nhà cung cấp </b>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- header list buildpc -->
|
|
|
|
|
<div class="list-buildpc">
|
|
|
|
|
<div class="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
|
|
|
|
<div class="item-info-product grid items-center grid-cols-8">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="supplier col-span-2 flex items-center justify-between">
|
|
|
|
|
<a href="">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/logo-hacom.png" width="100%" height="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-full block h-[30px] object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<div class="btn flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
<a href="" class="group hover:bg-red-500 p-1.5 rounded-[50%]"><i
|
|
|
|
|
class="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
|
|
|
|
<div class="item-info-product grid items-center grid-cols-8">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="supplier col-span-2 flex items-center justify-between">
|
|
|
|
|
<a href="">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/logo-hacom.png" width="100%" height="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-full block h-[30px] object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<div class="btn flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
<a href="" class="group hover:bg-red-500 p-1.5 rounded-[50%]"><i
|
|
|
|
|
class="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="item-info-product grid items-center grid-cols-8 mt-2.5 pt-2.5 border-t-[1px] border-neutral-200">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="supplier col-span-2 flex items-center justify-between">
|
|
|
|
|
<a href="">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/logo-hacom.png" width="100%" height="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-full block h-[30px] object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<div class="btn flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
<a href="" class="group hover:bg-red-500 p-1.5 rounded-[50%]"><i
|
|
|
|
|
class="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
|
|
|
|
Chọn thêm CPU</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
2025-05-12 10:12:41 +07:00
|
|
|
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
|
|
|
|
Chọn thêm CPU</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
2025-05-12 10:12:41 +07:00
|
|
|
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
|
|
|
|
Chọn thêm CPU</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
2025-05-12 10:12:41 +07:00
|
|
|
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
|
|
|
|
Chọn thêm CPU</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
2025-05-12 10:12:41 +07:00
|
|
|
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
|
|
|
|
Chọn thêm CPU</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)]">
|
2025-05-12 10:12:41 +07:00
|
|
|
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">+
|
|
|
|
|
Chọn thêm CPU</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- list buildpc -->
|
|
|
|
|
|
|
|
|
|
<div class="box-total-price pt-5">
|
|
|
|
|
<b class="block text-xl text-right text-red-600">Tổng tiền 2 sản phẩm: 8.000.000đ</b>
|
|
|
|
|
<div class="flex items-center justify-end gap-[10px] mt-3">
|
|
|
|
|
<a href="javascript:void(0)"
|
|
|
|
|
class="flex items-center px-7 py-2.5 border border-[#b3b3b3] rounded hover:bg-[#e0e0e0]">
|
|
|
|
|
<i class="icon_2025 print"></i>
|
|
|
|
|
<span class="ml-2">In đơn hàng</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javasript:void(0)"
|
|
|
|
|
class="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700">
|
|
|
|
|
Mua hàng tại Hacom
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- tổng tiền -->
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-05-12 10:12:41 +07:00
|
|
|
<div class="content-tab hidden" id="compare-component">
|
2025-05-07 16:03:56 +07:00
|
|
|
|
|
|
|
|
<div class="list-component mt-5">
|
|
|
|
|
|
|
|
|
|
<div class="item-compare mb-12">
|
|
|
|
|
<div class="flex items-center border-b-[1px] border-neutral-200 pb-3">
|
|
|
|
|
<b class="left w-[200px] name-component">
|
|
|
|
|
<a href="" class="block m-[auto_auto_auto_0]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/logo-hacom.png" width="100%" height="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[150px] block h-[50px] object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)] grid grid-cols-8">
|
|
|
|
|
<b class="item col-span-3">
|
|
|
|
|
Sản phẩm
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Giá gốc
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Khuyến mãi
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Giao hàng
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item col-span-2">Thành tiền</b>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="list-product">
|
|
|
|
|
<div
|
|
|
|
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="ship underline">
|
|
|
|
|
Liên hệ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="ship underline text-[#33c600]">
|
|
|
|
|
Liên hệ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- end list -->
|
|
|
|
|
|
|
|
|
|
<div class="text-right flex items-center font-bold justify-end mt-5">
|
|
|
|
|
<div class="mr-[10px]">Tổng tiền (<span>2</span> sản phẩm) :</div>
|
|
|
|
|
<div class="font-bold">6.000.000 Vnđ</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="item-compare mb-12">
|
|
|
|
|
<div class="flex items-center border-b-[1px] border-neutral-200 pb-3">
|
|
|
|
|
<b class="left w-[200px] name-component">
|
|
|
|
|
<a href="" class="block m-[auto_auto_auto_0]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/logo-hacom.png" width="100%" height="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
class="w-[150px] block h-[50px] object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
</b>
|
|
|
|
|
<div class="right w-[calc(100%-200px)] grid grid-cols-8">
|
|
|
|
|
<b class="item col-span-3">
|
|
|
|
|
Sản phẩm
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Giá gốc
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Khuyến mãi
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item">
|
|
|
|
|
Giao hàng
|
|
|
|
|
</b>
|
|
|
|
|
<b class="item col-span-2">Thành tiền</b>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="list-product">
|
|
|
|
|
<div
|
|
|
|
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="ship underline">
|
|
|
|
|
Liên hệ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
|
|
|
|
|
<b class="name-component block w-[200px]">
|
|
|
|
|
CPU Cooler
|
|
|
|
|
</b>
|
|
|
|
|
<div class="w-[calc(100%-200px)] grid items-center grid-cols-8">
|
|
|
|
|
<div class="info col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%"
|
2025-05-07 16:03:56 +07:00
|
|
|
height="100%" class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="old-price font-400">
|
|
|
|
|
4.700.000 Vnđ
|
|
|
|
|
</div>
|
|
|
|
|
<div class="price-saleoff font-400">
|
|
|
|
|
20%
|
|
|
|
|
</div>
|
|
|
|
|
<b class="ship underline text-[#33c600]">
|
|
|
|
|
Liên hệ
|
|
|
|
|
</b>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<b class="total-amount">
|
|
|
|
|
4.000.000đ
|
|
|
|
|
</b>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800">Mua
|
|
|
|
|
ngay</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- end list -->
|
|
|
|
|
|
|
|
|
|
<div class="text-right flex items-center font-bold justify-end mt-5">
|
|
|
|
|
<div class="mr-[10px]">Tổng tiền (<span>2</span> sản phẩm) :</div>
|
|
|
|
|
<div class="font-bold">6.000.000 Vnđ</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-05-11 21:25:48 +07:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="backgroundPopup" class="" onclick="closeBuildpc()"></div>
|
|
|
|
|
<div class="fixed w-[1400px] hidden bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999]"
|
|
|
|
|
id="js-modal-popup">
|
|
|
|
|
<div class="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
|
|
|
|
|
<b class="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>
|
|
|
|
|
|
|
|
|
|
<div class="w-[calc(100%-275px)] relative input-search">
|
|
|
|
|
<form action="/search" enctype="text/plain" method="get"
|
|
|
|
|
class="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden">
|
|
|
|
|
<input type="text" name="q" placeholder="Bạn cần tìm linh kiện gì..."
|
|
|
|
|
class="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
|
|
|
|
|
onclick="$('.autocomplete-suggestions').show();">
|
|
|
|
|
<button type="submit" class="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"><i
|
|
|
|
|
class="icon_2025 search "></i></button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-05-12 10:12:41 +07:00
|
|
|
<a href="javascript:void(0)" onclick="closeBuildpc()" class="w-[54px] flex items-center justify-end">
|
2025-05-11 21:25:48 +07:00
|
|
|
<i class="icon_2025 close brightness-0 invert-[1]"></i>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-popup p-[10px] bg-white">
|
|
|
|
|
<div class="flex gap-[15px]">
|
|
|
|
|
<div class="left w-[205px]">
|
|
|
|
|
<b class="">230 sản phẩm</b>
|
|
|
|
|
<div
|
|
|
|
|
class="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
|
|
|
|
<b class="text-xl">Bộ lọc</b>
|
|
|
|
|
<i class="icon_2025 filter"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-filter h-[calc(100vh-208px)] overflow-auto">
|
|
|
|
|
<div class="item-filter mb-2.5">
|
|
|
|
|
<h3
|
|
|
|
|
class="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
|
|
|
|
Lọc theo
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="mt-2.5 text-base leading-8 text-black">
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
|
|
|
|
<label for="vehicle1" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
|
|
|
|
cho Máy tính dành
|
|
|
|
|
cho</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle2" class="checkbox">
|
|
|
|
|
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
|
|
|
|
cho</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle3" class="checkbox">
|
|
|
|
|
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
|
|
|
|
cho</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle4" class="checkbox">
|
|
|
|
|
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
|
|
|
|
cho</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle5" class="checkbox">
|
|
|
|
|
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
|
|
|
|
cho</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
|
|
|
|
cho</label>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-filter mb-2.5">
|
|
|
|
|
<h3
|
|
|
|
|
class="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
|
|
|
|
Lọc theo
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle1" class="checkbox">
|
|
|
|
|
<label for="vehicle1" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">All</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle2" class="checkbox">
|
|
|
|
|
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">32gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle3" class="checkbox">
|
|
|
|
|
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">64bg</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle4" class="checkbox">
|
|
|
|
|
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">16bg</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle5" class="checkbox">
|
|
|
|
|
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">12gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">4gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">2gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">24gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle2" class="checkbox">
|
|
|
|
|
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">32gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle3" class="checkbox">
|
|
|
|
|
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">64bg</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle4" class="checkbox">
|
|
|
|
|
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">16bg</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle5" class="checkbox">
|
|
|
|
|
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">12gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">4gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">2gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="" class="item flex items-center ">
|
|
|
|
|
<input type="checkbox" id="vehicle6" class="checkbox">
|
|
|
|
|
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">24gb</label>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right w-[calc(100%-220px)]">
|
|
|
|
|
<div class="flex gap-[15px]">
|
|
|
|
|
<a href="" class="text-[var(--color-hover)]">Chọn tất cả</a>
|
|
|
|
|
<a href="">Bỏ chọn tất cả</a>
|
|
|
|
|
<a href="">So sánh sản phẩm đã chọn</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
|
|
|
|
<b class="col-span-3 text-center">Tên</b>
|
|
|
|
|
<b>Dung lượng</b>
|
|
|
|
|
<b>Thế hệ</b>
|
|
|
|
|
<b>Bộ nhớ</b>
|
|
|
|
|
<b>Độ ồn</b>
|
|
|
|
|
<b>Màu sắc</b>
|
|
|
|
|
<b>Đánh giá</b>
|
|
|
|
|
<b class="col-span-2">Thành tiền</b>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list mt-3 h-[calc(100vh-208px)] overflow-auto">
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
|
|
|
|
<div class="col-span-3">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
|
|
|
|
<a href=""
|
|
|
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
2025-05-12 10:52:19 +07:00
|
|
|
<img src="/src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
2025-05-11 21:25:48 +07:00
|
|
|
class="block w-full h-full object-contain" alt="">
|
|
|
|
|
</a>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
|
|
|
|
Ryzen 7 9800x3D 4.7
|
|
|
|
|
GHz 8-Core Processor</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
8bg
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">5</div>
|
|
|
|
|
<div>GDDR5</div>
|
|
|
|
|
<div class="text-center">5db</div>
|
|
|
|
|
<div>Đen</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<i class="icon_star star4"></i>
|
|
|
|
|
<span class="ml-[5px]">(125)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-span-2 flex items-center justify-between">
|
|
|
|
|
<div class="price">3.400.000đ</div>
|
|
|
|
|
<a href=""
|
|
|
|
|
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-05-07 16:03:56 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-05-12 10:12:41 +07:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
function showPopupBuildpc() {
|
|
|
|
|
$('#js-modal-popup').removeClass("hidden");
|
|
|
|
|
$('#backgroundPopup').addClass('active')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function closeBuildpc() {
|
|
|
|
|
$('#js-modal-popup').addClass("hidden");
|
|
|
|
|
$('#backgroundPopup').removeClass('active')
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2025-05-11 21:25:48 +07:00
|
|
|
|
|
|
|
|
|
2025-05-07 16:03:56 +07:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
