812 lines
46 KiB
HTML
812 lines
46 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
|
||
|
|
<title>BESTPC - Trang chủ</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<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/font-awesome/6.7.2/css/all.min.css" />
|
||
|
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container-mb">
|
||
|
|
<div class="page-buildpc bg-[#F4F4F4] pb-[30px]">
|
||
|
|
<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="/buildpc" itemprop="item" class="nopad-l flex items-center">
|
||
|
|
<span itemprop="name">
|
||
|
|
Build PC
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<meta itemprop="position" content="3">
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="/buildpc" class="px-3 py-2.5 text-center font-bold text-white bg-violet-900 rounded">
|
||
|
|
Bắt đầu tạo
|
||
|
|
</a>
|
||
|
|
<a href="/template/buildpc/compare_buildpc.html"
|
||
|
|
class="px-3 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>
|
||
|
|
|
||
|
|
<div class="bg-white rounded p-[10px] my-[15px]">
|
||
|
|
<div class="h-[32px] mb-[10px] 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 text-[#1877F2]"
|
||
|
|
value="https://bestpc.vn/restricted.php" />
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<div
|
||
|
|
class="w-[calc(100%-126px)] h-[32px] 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>
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
class="block w-[32px] h-[32px] 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>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
class="block w-[32px] h-[32px] 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>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
class="block w-[32px] h-[32px] 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>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bg-white rounded p-[10px]">
|
||
|
|
<div class="list-buildpc">
|
||
|
|
<div class="item-component">
|
||
|
|
<b class="name-component block mb-[10px] text-[15px] font-bold">CPU</b>
|
||
|
|
<div class="right">
|
||
|
|
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
|
||
|
|
<div class="info flex justify-between gap-[10px] mb-[10px]">
|
||
|
|
<div class="flex w-[calc(100%-90px)]">
|
||
|
|
<a href="/buildpc/detail"
|
||
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<a href="/buildpc/detail"
|
||
|
|
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="w-[80px] flex gap-[10px] justify-end">
|
||
|
|
<a href="javascript:void(0)" class="" onclick="showPopup()">
|
||
|
|
<i class="icon_edit"></i>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:void(0)" class="">
|
||
|
|
<i class="icon_remove"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex mb-[10px] gap-[5px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
<div class="flex mb-[10px] gap-[5px]">
|
||
|
|
<p>Thành tiền</p>
|
||
|
|
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
|
||
|
|
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
|
||
|
|
</div>
|
||
|
|
<div class="flex mb-[10px] gap-[5px]">
|
||
|
|
<p>Khuyến mãi</p>
|
||
|
|
<b class="price-saleoff font-400">20%</b>
|
||
|
|
</div>
|
||
|
|
<div class="supplier flex items-center gap-[5px] ">
|
||
|
|
<p>Nhà cung cấp</p>
|
||
|
|
<a href="">
|
||
|
|
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
class="w-full block h-[30px] object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
|
||
|
|
<div class="info flex justify-between gap-[10px] mb-[10px]">
|
||
|
|
<div class="flex w-[calc(100%-90px)]">
|
||
|
|
<a href="/buildpc/detail"
|
||
|
|
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<a href="/buildpc/detail"
|
||
|
|
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="w-[80px] flex gap-[10px] justify-end">
|
||
|
|
<a href="javascript:void(0)" class="" onclick="showPopup()">
|
||
|
|
<i class="icon_edit"></i>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:void(0)" class="">
|
||
|
|
<i class="icon_remove"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex mb-[10px] gap-[5px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
<div class="flex mb-[10px] gap-[5px]">
|
||
|
|
<p>Thành tiền</p>
|
||
|
|
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
|
||
|
|
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
|
||
|
|
</div>
|
||
|
|
<div class="flex mb-[10px] gap-[5px]">
|
||
|
|
<p>Khuyến mãi</p>
|
||
|
|
<b class="price-saleoff font-400">20%</b>
|
||
|
|
</div>
|
||
|
|
<div class="supplier flex items-center gap-[5px] ">
|
||
|
|
<p>Nhà cung cấp</p>
|
||
|
|
<a href="">
|
||
|
|
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
class="w-full block h-[30px] object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
|
||
|
|
<b class="name-component block">CPU Cooler</b>
|
||
|
|
<div class="right">
|
||
|
|
<a href="javascript:void(0)" onclick="showPopup()"
|
||
|
|
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 sản phẩm
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
|
||
|
|
<b class="name-component block">HDD</b>
|
||
|
|
<div class="right">
|
||
|
|
<a href="javascript:void(0)" onclick="showPopup()"
|
||
|
|
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 sản phẩm
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
|
||
|
|
<b class="name-component block">HDD</b>
|
||
|
|
<div class="right">
|
||
|
|
<a href="javascript:void(0)" onclick="showPopup()"
|
||
|
|
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 sản phẩm
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
|
||
|
|
<b class="name-component block">HDD</b>
|
||
|
|
<div class="right">
|
||
|
|
<a href="javascript:void(0)" onclick="showPopup()"
|
||
|
|
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 sản phẩm
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
|
||
|
|
<b class="name-component block">HDD</b>
|
||
|
|
<div class="right">
|
||
|
|
<a href="javascript:void(0)" onclick="showPopup()"
|
||
|
|
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 sản phẩm
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
|
||
|
|
<b class="name-component block">HDD</b>
|
||
|
|
<div class="right">
|
||
|
|
<a href="javascript:void(0)" onclick="showPopup()"
|
||
|
|
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 sản phẩm
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="box-total-price pt-5">
|
||
|
|
<b class="block text-[15px] 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="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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="backgroundPopup" onclick="hidePopup()"></div>
|
||
|
|
<div class="fixed hidden w-[95%] bg-white left-[50%] top-[40%] translate-x-[-50%] translate-y-[-40%] z-[999]"
|
||
|
|
id="js-modal-popup">
|
||
|
|
|
||
|
|
<div class="header-popup p-[10px] bg-[var(--color-global)]">
|
||
|
|
<div class="flex items-center justify-between mb-[10px]">
|
||
|
|
<b class="text-[16px] uppercase text-white">Chọn linh kiện</b>
|
||
|
|
<a href="javascript:void(0)" onclick="hidePopup()" class="w-[54px] flex items-center justify-end">
|
||
|
|
<i class="icon_2025 close brightness-0 invert-[1]"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="relative input-search">
|
||
|
|
<form action="/search" enctype="text/plain" method="get"
|
||
|
|
class="relative w-full h-[35px] 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" />
|
||
|
|
<button type="submit" class="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]">
|
||
|
|
<i class="icon_2025 search "></i>
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-popup p-[10px] bg-white">
|
||
|
|
<b class="">230 sản phẩm</b>
|
||
|
|
<div class="flex gap-[15px] pb-[10px] mb-[10px] border-b-[1px] border-[#e3e3e3] mt-[10px]">
|
||
|
|
<a href="" class="text-[var(--color-hover)] border-b-[1px] pb-[10px] border-[#1877F2]">
|
||
|
|
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="box-filter">
|
||
|
|
<div class="mt-3 title-filter flex items-center gap-[10px]">
|
||
|
|
<b class="text-[13px]">Bộ lọc</b>
|
||
|
|
<i class="icon_2025 filter"></i>
|
||
|
|
</div>
|
||
|
|
<div class="flex overflow-auto gap-2 mb-[10px] pb-[10px] border-b-[1px] border-[#e3e3e3]">
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Lọc theo</option>
|
||
|
|
<option>Giá</option>
|
||
|
|
<option>Sản phẩm mới</option>
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Thương hiệu</option>
|
||
|
|
<option>Apple</option>
|
||
|
|
<option>Samsung</option>
|
||
|
|
<option>Dell</option>
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Địa chỉ</option>
|
||
|
|
<option>Hà Nội</option>
|
||
|
|
<option>TP.HCM</option>
|
||
|
|
<option>Đà Nẵng</option>
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Nhà cung cấp</option>
|
||
|
|
<option>Nhà A</option>
|
||
|
|
<option>Nhà B</option>
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Nhà cung cấp</option>
|
||
|
|
<option>Nhà A</option>
|
||
|
|
<option>Nhà B</option>
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Nhà cung cấp</option>
|
||
|
|
<option>Nhà A</option>
|
||
|
|
<option>Nhà B</option>
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
|
||
|
|
<option>Nhà cung cấp</option>
|
||
|
|
<option>Nhà A</option>
|
||
|
|
<option>Nhà B</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="list overflow-auto max-h-[400px]">
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||
|
|
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||
|
|
class="block w-full h-full object-contain" alt="" />
|
||
|
|
</a>
|
||
|
|
<div class="w-[calc(100%-80px)]">
|
||
|
|
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
|
||
|
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
|
||
|
|
Processor
|
||
|
|
</a>
|
||
|
|
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href=""
|
||
|
|
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
|
||
|
|
+ Add
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>dung lượng</p>
|
||
|
|
<b class="">8bg</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Độ ồn</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Thế hệ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Màu sắc</p>
|
||
|
|
<b>Đen</b>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Bộ nhớ</p>
|
||
|
|
<b>5</b>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Đánh giá</p>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="icon-star star4 mt-[4px]"></i>
|
||
|
|
<b class="ml-[5px]">(125)</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-[10px]">
|
||
|
|
<p>Số lượng</p>
|
||
|
|
<input type="number" min="1" value="1"
|
||
|
|
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href="" class="flex items-center py-[5px] mt-[5px] font-bold text-[#FF7A00]">Cuộc để xem thêm <i
|
||
|
|
class="icon_2025 angle-bottom"></i></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
|
|
<script>
|
||
|
|
function showPopup() {
|
||
|
|
$('#backgroundPopup').toggleClass('active')
|
||
|
|
$('#js-modal-popup').toggleClass('hidden')
|
||
|
|
}
|
||
|
|
function hidePopup() {
|
||
|
|
$('#backgroundPopup').toggleClass('active')
|
||
|
|
$('#js-modal-popup').toggleClass('hidden')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|