547 lines
34 KiB
HTML
547 lines
34 KiB
HTML
|
<!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>
|
||
|
|
<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="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||
|
|
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
</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 -->
|
||
|
|
|
||
|
|
<div class="content-tab hidden" id="create-component">
|
||
|
|
<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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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="">
|
||
|
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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="">
|
||
|
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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="">
|
||
|
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
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)]">
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
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)]">
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
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)]">
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
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)]">
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
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)]">
|
||
|
|
<a href="javascript:void(0)"
|
||
|
|
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>
|
||
|
|
|
||
|
|
<div class="content-tab" id="compare-component">
|
||
|
|
|
||
|
|
<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]">
|
||
|
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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]">
|
||
|
|
<img src="./src/assets/images/lienkien-ram.png" width="100%"
|
||
|
|
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>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|