1615 lines
109 KiB
HTML
1615 lines
109 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="./src/assets/css/style.css" rel="stylesheet" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="box-product-detail bg-[#F4F4F4]">
|
|
<div class="container">
|
|
<div class="breadcrumb p-[12px_0]">
|
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
|
class="flex items-center pr-[12px]">
|
|
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
|
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
|
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
|
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
|
<meta itemprop="position" content="1">
|
|
</li>
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
|
class="flex items-center pr-[12px]">
|
|
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
|
<span itemprop="name">
|
|
Màn hình máy tính
|
|
</span> <i class="icon_2025 angle-right text-[#637381] ml-[12px]"></i>
|
|
</a>
|
|
<meta itemprop="position" content="2">
|
|
</li>
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
|
class="flex items-center pr-[12px]">
|
|
<a href="/aivision.html" itemprop="item" class="nopad-l flex items-center">
|
|
<span itemprop="name">
|
|
AIVISION
|
|
</span>
|
|
</a>
|
|
<meta itemprop="position" content="3">
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
|
|
<div class="left">
|
|
<div class="relative">
|
|
<div class="swiper border border-[#B1B1B1 rounded-[12px]" id="js-slider-big">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item">
|
|
<img src="./src/assets/images/big-product-detail.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="item">
|
|
<img src="./src/assets/images/big-product-detail.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="item">
|
|
<img src="./src/assets/images/big-product-detail-2.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="item">
|
|
<img src="./src/assets/images/big-product-detail-3.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="item">
|
|
<img src="./src/assets/images/big-product-detail-4.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="btn-slider-big">
|
|
<div class="swiper-button-next right-0"></div>
|
|
<div class="swiper-button-prev left-0"></div>
|
|
</div>
|
|
</div>
|
|
<div class="relative mt-[12px]">
|
|
<div thumbsSlider="" class="swiper mySwiper" id="js-slider-small">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<a href="javascript:void(0)" class="item video">
|
|
<img src="./src/assets/images/small-product-detail.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="javascript:void(0)" class="item">
|
|
<img src="./src/assets/images/small-product-detail.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="javascript:void(0)" class="item">
|
|
<img src="./src/assets/images/small-product-detail.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="javascript:void(0)" class="item">
|
|
<img src="./src/assets/images/small-product-detail.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="javascript:void(0)" class="item">
|
|
<img src="./src/assets/images/small-product-detail.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<a href="javascript:void(0)" class="item">
|
|
<img src="./src/assets/images/small-product-detail.png" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-small" id="btn-slider-small">
|
|
<div class="swiper-button-next right-[-15px] w-[30px] h-[30px]"></div>
|
|
<div class="swiper-button-prev left-[-15px] w-[30px] h-[30px]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<h1 class="text-[24px] text-black mb-[5px]">Laptop Gaming Asus TUF FX505GE-BQ037T Core
|
|
i7-8750H/Win10(15.6"
|
|
FHD) - Hàng Chính Hãng</h1>
|
|
<div class="flex items-center text-base">
|
|
<div class="info-review flex items-center mr-[15px]">
|
|
<i class="icon-star star-small"></i>
|
|
<span class="ml-[5px] mt-[2px]">5/5</span>
|
|
</div>
|
|
<div class="info-view flex items-center mr-[15px]">
|
|
<i class="icon_2025 view"></i>
|
|
<span class="text-[#1877F2] ml-[5px]">120</span>
|
|
</div>
|
|
<div class="info-date flex items-center mr-[15px]">
|
|
<i class="icon_2025 time-big"></i>
|
|
<span class="text-[#1877F2] ml-[5px]">12/03/2025</span>
|
|
</div>
|
|
<a href="" class="info-share flex items-center">
|
|
<i class="icon_2025 share"></i>
|
|
<span class="ml-[5px] mt-[2px]">Chia sẻ</span>
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center mt-[5px] text-base">
|
|
<div class="source-review flex items-centermr-[10px]">
|
|
<span>Reviews trên:</span>
|
|
<a href="" class="ml-[5px] text-[#1877F2]">Internet</a>
|
|
<p class="ml-[5px]">1233 đánh giá</p>
|
|
</div>
|
|
<div class="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
|
|
<a href="" class="mr-[5px] text-[#462F91]">BestPC</a>
|
|
<p>12003 đánh giá</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-price flex items-center my-[10px]">
|
|
<span class="mr-[10px]">Giá:</span>
|
|
<b class="text-[#D80A00] text-[28px]">9.000.000đ - 12.000.000đ</b>
|
|
</div>
|
|
|
|
<div class="total-shop flex items-center">
|
|
<div class="box-shop"><i class="icon_2025 shop"></i></div>
|
|
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
|
|
</div>
|
|
|
|
<div class="box-summary mt-[15px]">
|
|
<ul>
|
|
<li>CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân, 12 luồng )</li>
|
|
<li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
|
|
<li>RAM: 1 x 8GB DDR4 2666MHz</li>
|
|
<li>Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti 4GB GDDR5</li>
|
|
<li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
|
|
<li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
|
|
<li>Pin: 4 cell 64 Wh Pin liền</li>
|
|
<li>khối lượng: 2.5 kg</li>
|
|
<li>Cổng giao tiếp: 1x USB 2.0,</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<a href=""
|
|
class="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white">
|
|
<img src="./src/assets/images/icon-file-save.png"
|
|
class="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
|
|
alt="save">
|
|
<b class="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
|
|
</a>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="p-[15px] bg-white mt-5 rounded-[8px]">
|
|
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
|
<h3 class="text-xl ">Nhà cung cấp trên BestPC - Tại Hà Nội</h3>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
|
|
<i class="icon_2025 map-2"></i>
|
|
<input type="text" placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
|
|
class="outline-none ml-[5px] h-full w-full" />
|
|
</div>
|
|
<div
|
|
class="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
|
|
<select name="" id=""
|
|
class=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]">
|
|
<option value="">Sắp xếp</option>
|
|
<option value="">Mới</option>
|
|
</select>
|
|
<i
|
|
class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
|
|
<div>
|
|
<b>Nhà cung cấp</b>
|
|
</div>
|
|
<div>
|
|
<b>Chính sách vận chuyển</b>
|
|
</div>
|
|
<div>
|
|
<b>Giá</b>
|
|
</div>
|
|
<div>
|
|
<b>Sản phẩm</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list ">
|
|
|
|
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
|
<div class="flex items-start supplier">
|
|
<div class="logo mr-[10px]">
|
|
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
|
<img src="./src/assets/images/logo-hacom.png"
|
|
class="block w-full h-full object-contain m-[0_auto]" width="100%" height="100%"
|
|
alt="hacom" />
|
|
</div>
|
|
<div class="flex items-center justify-center mt-2">
|
|
<i class="icon_2025 map-4"></i>
|
|
<span class="ml-[5px]">3km</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center">
|
|
<i class="icon-star star4"></i>
|
|
<span class="ml-[5px] mt-[3px]">4.7</span>
|
|
</div>
|
|
<a href="" class="text-[#1877F2] font-bold">Hanoicomputer</a>
|
|
<a href="" class="text-[#E85933] underline block">Xem 7 cửa hàng</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="supplier-ship">
|
|
<p>Miễn phí giao hàng</p>
|
|
<p>Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả ngày thứ 7, CN</p>
|
|
</div>
|
|
|
|
<div class="supplier-price">
|
|
<div class="flex items-center text-base">
|
|
<span>Giá:</span>
|
|
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b>
|
|
</div>
|
|
<b class="mt-2">Đã có VAT</b>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<main class=" flex overflow-hidden flex-col bg-zinc-100">
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex flex-col self-center mt-5 w-full max-w-[1400px] max-md:max-w-full">
|
|
|
|
<!-- Product Showcase -->
|
|
<section class="py-3.5 pr-12 pl-3 mt-7 bg-white rounded-lg max-md:pr-5 max-md:max-w-full">
|
|
<div class="flex gap-5 max-md:flex-col">
|
|
<!-- Product Images -->
|
|
<article class="w-6/12 max-md:ml-0 max-md:w-full">
|
|
<div class="w-full max-md:mt-5 max-md:max-w-full">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d6290d4850ad175ea6da61822f1e5bc746530ecc?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain w-full rounded-xl aspect-square max-md:max-w-full"
|
|
alt="Laptop Gaming Asus TUF main image" />
|
|
<div class="flex flex-wrap gap-3 mt-3">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/855319d6826233f10961d6b74caaaab5a8dd27c3?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 max-w-full rounded-none aspect-square w-[127px]"
|
|
alt="Laptop thumbnail 1" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/aeb29023785903a32b8550011ad309291a6d9cb3?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 max-w-full rounded-xl aspect-square w-[127px]"
|
|
alt="Laptop thumbnail 2" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/863e91c5e17a51bebe06f9a24f90b4b95e47628a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 max-w-full rounded-xl aspect-square w-[127px]"
|
|
alt="Laptop thumbnail 3" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/aeb29023785903a32b8550011ad309291a6d9cb3?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 max-w-full rounded-xl aspect-square w-[127px]"
|
|
alt="Laptop thumbnail 4" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/863e91c5e17a51bebe06f9a24f90b4b95e47628a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 max-w-full rounded-xl aspect-square w-[127px]"
|
|
alt="Laptop thumbnail 5" />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Details -->
|
|
<article class="ml-5 w-6/12 max-md:ml-0 max-md:w-full">
|
|
<div class="flex flex-col max-md:mt-5 max-md:max-w-full">
|
|
<div class="flex flex-col items-start pl-2 w-full max-md:max-w-full">
|
|
<h2 class="self-stretch text-2xl font-bold leading-7 text-black max-md:max-w-full">
|
|
Laptop Gaming Asus TUF FX505GE-BQ037T Core
|
|
i7-8750H/Win10(15.6"
|
|
FHD) - Hàng Chính
|
|
Hãng
|
|
</h2>
|
|
<div class="flex gap-4 mt-3 text-base leading-none text-black">
|
|
<div class="flex gap-1.5 my-auto whitespace-nowrap">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/099d6f5244dede301d0115dd4febaaa5d99a4a23?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-4 aspect-square" alt="Rating icon" />
|
|
<span>5/5</span>
|
|
</div>
|
|
<div class="flex gap-1 text-blue-600">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/73b6ba79405c731486638df7f4a45dcec38d0cb7?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Views icon" />
|
|
<span class="my-auto">120 view</span>
|
|
</div>
|
|
<div class="flex gap-1 whitespace-nowrap">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/45238e40cfed9804cb76b4c3f01b6fd895e20f67?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Date icon" />
|
|
<span class="my-auto">12/03/2025</span>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/26c7f0e20c8e6456bd04718255a51f223e6c0955?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Share icon" />
|
|
<span class="my-auto">Chia sẻ</span>
|
|
</div>
|
|
</div>
|
|
<p class="mt-2 text-base leading-5 text-black max-md:max-w-full">
|
|
Reviews trên:
|
|
<span class="font-bold text-[#1877F2]">Internet</span>
|
|
1233 đánh giá I
|
|
<span class="font-bold text-[#462F91]">BestPC</span>
|
|
12003 đánh giá
|
|
</p>
|
|
<div class="flex gap-2.5 mt-5 leading-none">
|
|
<span class="self-start mt-3 text-base text-black">Giá:</span>
|
|
<strong class="flex-auto text-3xl font-bold text-red-700">9.000.000đ
|
|
-
|
|
12.000.000đ</strong>
|
|
</div>
|
|
<div class="flex gap-1 mt-6 text-base font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1580707088f10288e9595508e817c25db8ef6af0?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Store icon" />
|
|
<span class="basis-auto">Có 12 cửa hàng bán</span>
|
|
</div>
|
|
</div>
|
|
<div class="self-start mt-4 text-base text-black max-md:max-w-full">
|
|
CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân, 12
|
|
luồng )<br />
|
|
Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng<br />
|
|
RAM: 1 x 8GB DDR4 2666MHz<br />
|
|
Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti 4GB
|
|
GDDR5<br />
|
|
Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM<br />
|
|
Hệ điều hành: Windows 10 Home SL 64-bit<br />
|
|
Pin: 4 cell 64 Wh Pin liền<br />
|
|
khối lượng: 2.5 kg<br />
|
|
Cổng giao tiếp: 1x USB 2.0,
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Supplier Listings -->
|
|
<section class="flex flex-col py-3.5 mt-5 bg-white rounded-lg max-md:max-w-full">
|
|
<div class="flex flex-col px-3 w-full max-md:max-w-full">
|
|
<div class="flex flex-wrap gap-5 justify-between w-full max-md:max-w-full">
|
|
<h2 class="self-start mt-4 text-2xl font-bold text-black">
|
|
Nhà cung cấp trên BestPC - Tại Hà Nội
|
|
</h2>
|
|
<div class="flex flex-wrap gap-3 text-base font-medium">
|
|
<div
|
|
class="flex flex-auto gap-1.5 px-1.5 py-2.5 bg-white rounded border border-solid border-zinc-400 text-zinc-400">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/5dafbf561ff673aa482642b1833ceb7fd3ab9337?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Location search icon" />
|
|
<span class="flex-auto my-auto">Nhập địa chỉ của bạn để tìm NCC
|
|
gần
|
|
nhất</span>
|
|
</div>
|
|
<div
|
|
class="flex gap-1 px-4 py-3 bg-white rounded border border-solid border-zinc-400 text-zinc-800">
|
|
<span class="grow">Sắp xếp</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/6d767b149b2202f6577669ef6c04ee0c31f1e976?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 my-auto aspect-[1.75] stroke-[1px] stroke-zinc-800 w-[7px]"
|
|
alt="Sort dropdown" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="shrink-0 mt-5 h-px border border-solid border-zinc-400 max-md:max-w-full" />
|
|
|
|
<!-- Table Header -->
|
|
<div class="flex gap-10 mt-6 max-w-full text-xl font-bold text-black w-[1033px]">
|
|
<h3 class="grow shrink w-[117px]">Nhà cung cấp</h3>
|
|
<h3 class="grow shrink w-[202px]">Chính sách vận chuyển</h3>
|
|
<h3>Giá</h3>
|
|
<h3>Sản phẩm</h3>
|
|
</div>
|
|
<hr class="shrink-0 mt-5 h-px border border-solid border-zinc-300 max-md:max-w-full" />
|
|
|
|
<!-- Supplier 1 -->
|
|
<article class="flex flex-wrap gap-10 mt-5 text-base">
|
|
<div class="flex gap-4">
|
|
<div class="flex flex-col font-medium whitespace-nowrap text-zinc-800">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/ec90099c3d8cc2bbdd4a94f24aaf5265dfa7c5a0?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded aspect-square w-[68px]" alt="Supplier logo" />
|
|
<div class="flex gap-1 self-center mt-1.5">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/19c1396a7b5ac6a329393b2383d29d62014c79d2?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-[0.72] w-[13px]"
|
|
alt="Distance icon" />
|
|
<span>3km</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col self-start font-bold">
|
|
<span class="self-end text-zinc-800 max-md:mr-1">4.7</span>
|
|
<span class="text-blue-600 max-md:mr-1">Hanoicomputer</span>
|
|
<a href="#" class="mt-1 font-medium text-red-500 underline">Xem
|
|
7
|
|
cửa hàng</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-auto gap-10 items-start self-start font-medium text-black max-md:max-w-full">
|
|
<p class="basis-auto">
|
|
Miễn phí giao hàng<br />
|
|
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
|
cả
|
|
ngày thứ 7, CN
|
|
</p>
|
|
<p>
|
|
Giá: <span class="font-bold text-[#D80A00]">9.000.000đ -
|
|
20.000.000đ</span><br />
|
|
<strong>Đã có VAT</strong>
|
|
</p>
|
|
<div class="self-stretch">
|
|
<p>
|
|
8GB - 9.000.000đ new<br />
|
|
White
|
|
</p>
|
|
<hr class="shrink-0 mt-4 h-px border border-solid border-zinc-300" />
|
|
<p class="mt-2 max-md:mr-2.5">
|
|
16GB - 12.000.000đ new<br />
|
|
Red
|
|
</p>
|
|
</div>
|
|
<button class="px-5 py-3.5 font-bold text-white bg-orange-500 rounded max-md:px-5">
|
|
Liên hệ ngay
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<hr class="shrink-0 mt-7 h-px border border-solid border-zinc-300 max-md:max-w-full" />
|
|
|
|
<!-- Supplier 2 -->
|
|
<article class="flex flex-wrap gap-10 mt-6 w-full text-base max-md:max-w-full">
|
|
<div class="flex gap-4 font-bold">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/b689d5d7f9b9694b827bcc79e71403c8499a5710?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 rounded aspect-square w-[68px]" alt="Supplier logo" />
|
|
<div class="flex flex-col self-start">
|
|
<span class="self-end text-zinc-800 max-md:mr-1">4.7</span>
|
|
<span class="text-blue-600 max-md:mr-1">Hanoicomputer</span>
|
|
<a href="#" class="font-medium text-red-500 underline">Xem 7 cửa
|
|
hàng</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap flex-auto gap-10 self-start font-medium text-black max-md:max-w-full">
|
|
<p class="basis-auto">
|
|
Miễn phí giao hàng<br />
|
|
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
|
cả
|
|
ngày thứ 7, CN
|
|
</p>
|
|
<p>
|
|
Giá: <span class="font-bold text-[#D80A00]">9.000.000đ -
|
|
20.000.000đ</span><br />
|
|
<strong>Đã có VAT</strong>
|
|
</p>
|
|
<p>
|
|
8GB 9.000.000đ new<br />
|
|
White
|
|
</p>
|
|
<button class="px-5 py-3.5 my-auto font-bold text-white bg-orange-500 rounded max-md:px-5">
|
|
Liên hệ ngay
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<div
|
|
class="flex gap-1 self-start mt-1.5 text-base font-medium whitespace-nowrap text-zinc-800 max-md:ml-2.5">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/2cfb75d37096930e16633b75596cc986bdd67ecb?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-[0.72] w-[13px]" alt="Distance icon" />
|
|
<span>5km</span>
|
|
</div>
|
|
<hr class="shrink-0 mt-4 h-px border border-solid border-zinc-300 max-md:max-w-full" />
|
|
|
|
<!-- Supplier 3 -->
|
|
<article class="flex flex-wrap gap-10 mt-6 w-full text-base max-md:max-w-full">
|
|
<div class="flex gap-4">
|
|
<div class="flex flex-col font-medium whitespace-nowrap text-zinc-800">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/0a7d810e1700038c7db364b55e330961457a9037?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded aspect-square w-[68px]" alt="Supplier logo" />
|
|
<div class="flex gap-1 self-center mt-1 w-[47px]">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/6a55476465061faec611fa03e0c54c82591e7bd6?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-[0.72] w-[13px]"
|
|
alt="Distance icon" />
|
|
<span>7km</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col self-start font-bold">
|
|
<span class="self-end text-zinc-800 max-md:mr-1">4.7</span>
|
|
<span class="text-blue-600 max-md:mr-1">Hanoicomputer</span>
|
|
<a href="#" class="font-medium text-red-500 underline">Xem 7 cửa
|
|
hàng</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap flex-auto gap-10 self-start font-medium text-black max-md:max-w-full">
|
|
<p class="basis-auto">
|
|
Miễn phí giao hàng<br />
|
|
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
|
cả
|
|
ngày thứ 7, CN
|
|
</p>
|
|
<p>
|
|
Giá: <span class="font-bold text-[#D80A00]">9.000.000đ -
|
|
20.000.000đ</span><br />
|
|
<strong>Đã có VAT</strong>
|
|
</p>
|
|
<p>
|
|
8GB 9.000.000đ new<br />
|
|
White
|
|
</p>
|
|
<button class="px-5 py-3.5 my-auto font-bold text-white bg-orange-500 rounded max-md:px-5">
|
|
Liên hệ ngay
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<hr class="shrink-0 mt-5 h-px border border-solid border-zinc-300 max-md:max-w-full" />
|
|
|
|
<!-- Supplier 4 -->
|
|
<article class="flex flex-wrap gap-10 mt-6 text-base">
|
|
<div class="flex gap-4">
|
|
<div class="font-medium whitespace-nowrap text-zinc-800">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d87b710667b53a3108004ac1833fc705f454c270?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded aspect-square w-[68px]" alt="Supplier logo" />
|
|
<div class="flex gap-1 mt-1.5 max-md:mr-1.5 max-md:ml-2.5">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/91e458c23f60e83940afb50b720686601b45b4b7?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-[0.72] w-[13px]"
|
|
alt="Distance icon" />
|
|
<span>13km</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col self-start font-bold">
|
|
<span class="self-end text-zinc-800 max-md:mr-1">4.7</span>
|
|
<span class="text-blue-600 max-md:mr-1">Hanoicomputer</span>
|
|
<a href="#" class="mt-1 font-medium text-red-500 underline">Xem
|
|
7
|
|
cửa hàng</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-auto gap-10 items-start self-start font-medium text-black max-md:max-w-full">
|
|
<p class="basis-auto">
|
|
Miễn phí giao hàng<br />
|
|
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
|
|
cả
|
|
ngày thứ 7, CN
|
|
</p>
|
|
<p>
|
|
Giá: <span class="font-bold text-[#D80A00]">9.000.000đ -
|
|
20.000.000đ</span><br />
|
|
<strong>Đã có VAT</strong>
|
|
</p>
|
|
<div class="self-stretch">
|
|
<p>
|
|
8GB - 9.000.000đ new<br />
|
|
White
|
|
</p>
|
|
<hr class="shrink-0 mt-4 h-px border border-solid border-zinc-300" />
|
|
<p class="mt-2 max-md:mr-2.5">
|
|
16GB - 12.000.000đ new<br />
|
|
Red
|
|
</p>
|
|
</div>
|
|
<button class="px-5 py-3.5 font-bold text-white bg-orange-500 rounded max-md:px-5">
|
|
Liên hệ ngay
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<hr class="shrink-0 mt-7 h-px border border-solid border-zinc-300 max-md:max-w-full" />
|
|
</div>
|
|
<button class="self-center mt-3.5 text-xl font-bold text-orange-500">
|
|
Xem thêm>>
|
|
</button>
|
|
</section>
|
|
|
|
<!-- User Reviews -->
|
|
<section class="flex flex-col pt-4 pb-7 mt-5 w-full bg-white rounded-lg max-md:max-w-full">
|
|
<div class="flex flex-col px-3 w-full max-md:max-w-full">
|
|
<div class="flex flex-wrap gap-5 justify-between w-full max-md:max-w-full">
|
|
<h2 class="self-start mt-4 text-2xl font-bold text-black">
|
|
Thành viên BestPC đánh giá
|
|
</h2>
|
|
<div
|
|
class="flex gap-2 px-4 py-3 text-base font-medium bg-white rounded border border-solid border-zinc-400 text-zinc-800">
|
|
<span class="grow">Top review</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/6d767b149b2202f6577669ef6c04ee0c31f1e976?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 my-auto aspect-[1.75] stroke-[1px] stroke-zinc-800 w-[7px]"
|
|
alt="Dropdown arrow" />
|
|
</div>
|
|
</div>
|
|
<hr class="shrink-0 mt-5 h-px border border-solid border-zinc-400 max-md:max-w-full" />
|
|
<h3 class="self-start mt-6 ml-24 text-2xl font-bold text-black max-md:ml-2.5">
|
|
54 đánh giá
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="mx-3 max-md:mr-2.5 max-md:max-w-full">
|
|
<div class="flex gap-5 max-md:flex-col">
|
|
<!-- Review Stats -->
|
|
<aside class="w-[24%] max-md:ml-0 max-md:w-full">
|
|
<div class="flex flex-col text-base font-medium text-black max-md:mt-7">
|
|
<div class="self-center ml-14 text-lg">4.8</div>
|
|
<hr class="shrink-0 mt-2.5 h-px border border-solid border-neutral-200" />
|
|
<div class="flex flex-col items-start self-end mt-3 text-right">
|
|
<p class="self-stretch">50 đánh giá</p>
|
|
<p class="mt-4 ml-2.5">7 đánh giá</p>
|
|
<p class="mt-3.5 max-md:ml-2.5">0 đánh giá</p>
|
|
<p class="mt-3.5 max-md:ml-2.5">0 đánh giá</p>
|
|
<p class="mt-4 max-md:ml-2.5">0 đánh giá</p>
|
|
</div>
|
|
<hr class="shrink-0 mt-8 h-px border border-solid border-neutral-200" />
|
|
<p class="self-center mt-3 text-center">
|
|
Đánh giá của bạn về sản phẩm
|
|
</p>
|
|
<button
|
|
class="px-5 py-3 mx-5 mt-3 font-bold text-white bg-orange-500 rounded max-md:mx-2.5">
|
|
Gửi đánh giá của bạn về sản phẩm
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Review List -->
|
|
<div class="ml-5 w-[76%] max-md:ml-0 max-md:w-full">
|
|
<div class="w-full max-md:mt-7 max-md:max-w-full">
|
|
<!-- Review 1 -->
|
|
<article class="flex flex-wrap gap-7 mr-7 max-md:mr-2.5">
|
|
<div class="flex flex-col self-start text-base text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/42903f08f0bcc5167608ef2ab38b3635cb94147a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded-full aspect-square w-[76px] max-md:mr-0.5"
|
|
alt="User avatar" />
|
|
<strong class="self-center mt-2 font-bold">Dino</strong>
|
|
<time class="text-center">
|
|
10:00pm<br />
|
|
20/02/2025
|
|
</time>
|
|
</div>
|
|
<div
|
|
class="flex flex-col grow shrink-0 items-start basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="ml-24 text-base font-bold text-black max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="self-stretch mt-2 text-base text-black max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry.
|
|
Lorem Ipsum has been the industry's standard dummy
|
|
text
|
|
ever since the
|
|
1500s, when an unknown printer took a galley of type
|
|
and
|
|
scrambled it to
|
|
make a type specimen book. I
|
|
</p>
|
|
<div class="flex gap-1.5 mt-4">
|
|
<div>
|
|
<div class="flex gap-2 max-md:mr-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d8e0107940b3c216b2d96c18348afa391dffe339?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-20 aspect-square"
|
|
alt="Review image" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/5d5ed8055b3337f2bfded38b4d6beb394e6b8dfc?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-20 aspect-square"
|
|
alt="Review image" />
|
|
</div>
|
|
<div class="mt-3 text-base font-medium text-black">
|
|
<a href="#" class="text-[#1877F2]">Bình
|
|
luận</a>
|
|
(23)
|
|
<a href="#" class="text-[#1877F2]">Thích</a>
|
|
(32)
|
|
</div>
|
|
</div>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/5d5ed8055b3337f2bfded38b4d6beb394e6b8dfc?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start w-20 aspect-square"
|
|
alt="Review image" />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr
|
|
class="shrink-0 mt-7 h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
|
|
<!-- Review 2 -->
|
|
<article class="flex flex-wrap gap-7 mt-6 mr-7 text-base text-black max-md:mr-2.5">
|
|
<div class="flex flex-col">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/fc14fd6b39db90cacbb08dd4649a1d6d9f204034?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded-full aspect-square w-[76px] max-md:mr-0.5"
|
|
alt="User avatar" />
|
|
<strong class="self-center mt-2 font-bold">Mia</strong>
|
|
<time class="text-center">
|
|
10:00pm<br />
|
|
20/02/2025
|
|
</time>
|
|
</div>
|
|
<div
|
|
class="flex flex-col grow shrink-0 items-start self-start basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="ml-24 font-bold max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="self-stretch mt-2 max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry.
|
|
Lorem Ipsum has been the industry's standard dummy
|
|
text
|
|
ever since the
|
|
1500s, when an unknown printer took a galley of type
|
|
and
|
|
scrambled it to
|
|
make a type specimen book. I
|
|
</p>
|
|
<div class="mt-4 font-medium max-md:ml-0.5">
|
|
<a href="#" class="text-[#1877F2]">Bình luận</a>
|
|
(23)
|
|
<a href="#" class="text-[#1877F2]">Thích</a> (32)
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr
|
|
class="shrink-0 mt-6 h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col self-end mt-6 max-w-full w-[1020px] max-md:mr-2.5">
|
|
<!-- Review 3 -->
|
|
<article class="flex flex-wrap gap-7 mr-7 max-md:mr-2.5">
|
|
<div class="flex flex-col self-start text-base text-center text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/da5857255268ee78fe04dfd866d03b1fc8f3a590?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded-full aspect-square w-[76px] max-md:ml-0.5"
|
|
alt="User avatar" />
|
|
<strong class="self-center mt-2 font-bold">Sunny</strong>
|
|
<time>
|
|
10:00pm<br />
|
|
20/02/2025
|
|
</time>
|
|
</div>
|
|
<div class="flex flex-col grow shrink-0 items-start basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="ml-24 text-base font-bold text-black max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="self-stretch mt-2 text-base text-black max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
<div class="flex gap-2 mt-4">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d60643759cad3086ef429f3b82157b19f4d8867f?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-20 aspect-square" alt="Review image" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d9e225e95e917d9cac9b68ba674a1ddb88ea12ca?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-20 aspect-square" alt="Review image" />
|
|
</div>
|
|
<div class="mt-3 text-base font-medium text-black max-md:ml-0.5">
|
|
<a href="#" class="text-[#1877F2]">Bình luận</a> (23)
|
|
<a href="#" class="text-[#1877F2]">Thích</a> (32)
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr class="shrink-0 mt-7 w-full h-px border border-solid border-neutral-200" />
|
|
|
|
<!-- Review 4 -->
|
|
<article class="flex flex-wrap gap-7 mt-6 mr-7 max-md:mr-2.5">
|
|
<div class="flex flex-col self-start text-base text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/9cf082dc7483fdd09ec65ad3dfa8ca5ff8c1cdd1?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain rounded-full aspect-square w-[76px] max-md:mr-0.5"
|
|
alt="User avatar" />
|
|
<strong class="self-center mt-2 font-bold">Dino</strong>
|
|
<time class="text-center">
|
|
10:00pm<br />
|
|
20/02/2025
|
|
</time>
|
|
</div>
|
|
<div class="flex flex-col grow shrink-0 items-start basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="ml-24 text-base font-bold text-black max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="self-stretch mt-2 text-base text-black max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
<div class="flex gap-1.5 mt-4">
|
|
<div>
|
|
<div class="flex gap-2 max-md:mr-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/d9e225e95e917d9cac9b68ba674a1ddb88ea12ca?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-20 aspect-square" alt="Review image" />
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8f6c707a64e6ea99fb82f0f95f39dc191b33df5f?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-20 aspect-square" alt="Review image" />
|
|
</div>
|
|
<div class="mt-3 text-base font-medium text-black">
|
|
<a href="#" class="text-[#1877F2]">Bình luận</a> (23)
|
|
<a href="#" class="text-[#1877F2]">Thích</a> (32)
|
|
</div>
|
|
</div>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/f02c727cab8495c33ca18f58ca4197bf6c81459a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start w-20 aspect-square" alt="Review image" />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr class="shrink-0 mt-7 w-full h-px border border-solid border-neutral-200" />
|
|
<button class="self-start mt-6 text-xl font-bold text-orange-500">
|
|
Xem thêm 23 bình luận khác >>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Internet Reviews -->
|
|
<section class="flex flex-col pt-4 pb-7 mt-5 bg-white rounded-lg max-md:max-w-full">
|
|
<div class="px-3 w-full max-md:max-w-full">
|
|
<div class="flex flex-wrap gap-5 justify-between w-full max-md:max-w-full">
|
|
<h2 class="self-start mt-4 text-2xl font-bold text-black">
|
|
Đánh giá trên internet
|
|
</h2>
|
|
<div
|
|
class="flex gap-2 px-4 py-3 text-base font-medium bg-white rounded border border-solid border-zinc-400 text-zinc-800">
|
|
<span class="grow">Top review</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/6d767b149b2202f6577669ef6c04ee0c31f1e976?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 my-auto aspect-[1.75] stroke-[1px] stroke-zinc-800 w-[7px]"
|
|
alt="Dropdown arrow" />
|
|
</div>
|
|
</div>
|
|
<hr class="shrink-0 mt-5 h-px border border-solid border-zinc-400 max-md:max-w-full" />
|
|
|
|
<!-- Internet Review 1 -->
|
|
<article
|
|
class="flex flex-wrap gap-5 justify-between items-start mt-5 mr-10 w-full max-w-[1336px] max-md:mr-2.5 max-md:max-w-full">
|
|
<div class="flex flex-col items-center text-black">
|
|
<h3 class="text-2xl font-bold">54 đánh giá</h3>
|
|
<div class="ml-14 text-lg font-medium">4.8</div>
|
|
<hr class="shrink-0 self-stretch mt-2.5 h-px border border-solid border-neutral-200" />
|
|
</div>
|
|
<div class="flex flex-col items-center text-base font-bold">
|
|
<a href="#" class="text-blue-600">Hacom,vn</a>
|
|
<strong class="self-stretch text-center text-black">Mr Quoc
|
|
Anh</strong>
|
|
<time class="font-medium text-center text-neutral-400">05:12 PM hôm
|
|
nay</time>
|
|
</div>
|
|
<div class="flex flex-col items-start self-stretch text-base text-black max-md:max-w-full">
|
|
<h3 class="ml-24 font-bold max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="self-stretch mt-2 max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
<a href="#" class="flex gap-2.5 mt-6 font-medium underline">
|
|
<span class="grow">Xem link nguồn</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5e3ba1a93909a7209af1fb31db2f7cca3c0121a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="External link icon" />
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start self-end mt-6 max-w-full text-base w-[1019px] max-md:mr-1">
|
|
<hr class="shrink-0 self-stretch h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
|
|
<!-- Internet Review 2 -->
|
|
<article class="flex flex-wrap gap-7 mt-6">
|
|
<div class="flex flex-col items-center font-bold">
|
|
<a href="#" class="text-blue-600">Hacom,vn</a>
|
|
<strong class="self-stretch text-center text-black">Mr Quoc
|
|
Anh</strong>
|
|
<time class="font-medium text-center text-neutral-400">05:12 PM hôm
|
|
nay</time>
|
|
</div>
|
|
<div class="flex flex-col grow shrink-0 self-start text-black basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="self-start ml-24 font-bold max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="mt-2 max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<a href="#" class="flex gap-2.5 mt-6 ml-32 font-medium text-black underline max-md:ml-2.5">
|
|
<span class="grow">Xem link nguồn</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5e3ba1a93909a7209af1fb31db2f7cca3c0121a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="External link icon" />
|
|
</a>
|
|
<hr
|
|
class="shrink-0 self-stretch mt-6 h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
|
|
<!-- Internet Review 3 -->
|
|
<article class="flex flex-wrap gap-7 mt-6">
|
|
<div class="flex flex-col items-center font-bold">
|
|
<a href="#" class="text-blue-600">Hacom,vn</a>
|
|
<strong class="self-stretch text-center text-black">Mr Quoc
|
|
Anh</strong>
|
|
<time class="font-medium text-center text-neutral-400">05:12 PM hôm
|
|
nay</time>
|
|
</div>
|
|
<div class="flex flex-col grow shrink-0 self-start text-black basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="self-start ml-24 font-bold max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="mt-2 max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<a href="#" class="flex gap-2.5 mt-6 ml-32 font-medium text-black underline max-md:ml-2.5">
|
|
<span class="grow">Xem link nguồn</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5e3ba1a93909a7209af1fb31db2f7cca3c0121a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="External link icon" />
|
|
</a>
|
|
<hr
|
|
class="shrink-0 self-stretch mt-6 h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
|
|
<!-- Internet Review 4 -->
|
|
<article class="flex flex-wrap gap-7 mt-6">
|
|
<div class="flex flex-col items-center font-bold">
|
|
<a href="#" class="text-blue-600">Hacom,vn</a>
|
|
<strong class="self-stretch text-center text-black">Mr Quoc
|
|
Anh</strong>
|
|
<time class="font-medium text-center text-neutral-400">05:12 PM hôm
|
|
nay</time>
|
|
</div>
|
|
<div class="flex flex-col grow shrink-0 self-start text-black basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="self-start ml-24 font-bold max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="mt-2 max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<a href="#" class="flex gap-2.5 mt-6 ml-32 font-medium text-black underline max-md:ml-2.5">
|
|
<span class="grow">Xem link nguồn</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5e3ba1a93909a7209af1fb31db2f7cca3c0121a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="External link icon" />
|
|
</a>
|
|
<hr
|
|
class="shrink-0 self-stretch mt-6 h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
|
|
<!-- Internet Review 5 -->
|
|
<article class="flex flex-wrap gap-7 mt-6">
|
|
<div class="flex flex-col items-center font-bold">
|
|
<a href="#" class="text-blue-600">Hacom,vn</a>
|
|
<strong class="self-stretch text-center text-black">Mr Quoc
|
|
Anh</strong>
|
|
<time class="font-medium text-center text-neutral-400">05:12 PM hôm
|
|
nay</time>
|
|
</div>
|
|
<div class="flex flex-col grow shrink-0 self-start text-black basis-0 w-fit max-md:max-w-full">
|
|
<h3 class="self-start ml-24 font-bold max-md:ml-2.5">
|
|
Laptop Gaming Asus ROG 16GB
|
|
</h3>
|
|
<p class="mt-2 max-md:max-w-full">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting
|
|
industry. Lorem Ipsum
|
|
has been the industry's standard dummy text ever since the
|
|
1500s,
|
|
when an unknown
|
|
printer took a galley of type and scrambled it to make a type
|
|
specimen book. I
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<a href="#" class="flex gap-2.5 mt-6 ml-32 font-medium text-black underline max-md:ml-2.5">
|
|
<span class="grow">Xem link nguồn</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5e3ba1a93909a7209af1fb31db2f7cca3c0121a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="External link icon" />
|
|
</a>
|
|
<hr
|
|
class="shrink-0 self-stretch mt-6 h-px border border-solid border-neutral-200 max-md:max-w-full" />
|
|
<button class="mt-6 text-xl font-bold text-orange-500">
|
|
Xem thêm 23 bình luận khác >>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Product Information and Specifications -->
|
|
<div class="mt-5 max-md:max-w-full">
|
|
<div class="flex gap-5 max-md:flex-col">
|
|
<!-- Product Information -->
|
|
<section class="w-[59%] max-md:ml-0 max-md:w-full">
|
|
<article
|
|
class="flex flex-col py-5 pl-3 mx-auto w-full text-base font-bold text-black bg-white rounded-lg max-md:mt-3 max-md:max-w-full">
|
|
<h2 class="self-start text-2xl leading-none">Thông tin sản phẩm</h2>
|
|
<hr class="shrink-0 mt-3 max-w-full h-px border border-solid border-zinc-400 w-[796px]" />
|
|
<div class="mt-4 leading-6 max-md:mr-1 max-md:max-w-full">
|
|
<h3 class="font-family-shopee-display text-2xl font-bold">
|
|
Laptop HP Victus 16-e0175AX 4R0U8PA - Laptop gaming cải tiến
|
|
vượt trội
|
|
</h3>
|
|
<br />
|
|
<br />
|
|
<p class="font-family-shopee-display">
|
|
Không giống những mẫu laptop chuyên chơi game trên thị
|
|
trường,
|
|
sản phẩm
|
|
<strong class="font-family-shopee-display">
|
|
laptop HP Victus 16-e0175AX 4R0U8PA
|
|
</strong>
|
|
phối hợp hài hòa giữa ngoại hình lịch lãm cùng hiệu năng
|
|
vượt
|
|
trội nhằm mang đến
|
|
trải nghiệm chiến game tuyệt vời và tiện lợi dành cho bạn.
|
|
</p>
|
|
<br />
|
|
<br />
|
|
<h4 class="font-family-shopee-display text-xl font-bold">
|
|
Thiết kế lịch lãm tinh tế, màn hình Full HD 144 Hz
|
|
</h4>
|
|
<br />
|
|
<br />
|
|
<p class="font-family-shopee-display">
|
|
HP Victus 16-e0175AX 4R0U8PA được thiết kế không chỉ cho nhu
|
|
cầu
|
|
gaming, mà còn phục
|
|
vụ công việc và học tập một cách linh hoạt. Chiếc máy được
|
|
chế
|
|
tạo với độ mỏng cùng
|
|
trọng lượng gọn nhẹ, đảm bảo cho nhu cầu di chuyển máy thuận
|
|
tiện. Toàn thân HP
|
|
Victus 16-e0175AX 4R0U8PA được hoàn thiện với chất liệu cứng
|
|
cáp
|
|
cùng logo Victus
|
|
đầy lịch lãm và tinh tế.
|
|
</p>
|
|
<br />
|
|
<br />
|
|
<p class="font-family-shopee-display">
|
|
Bàn phím trên máy được tối ưu với hành trình phím thấp cùng
|
|
dãy
|
|
NumPad cho nhu cầu
|
|
gaming lẫn làm việc hiệu quả hơn. Âm thanh trên máy cũng
|
|
được
|
|
tinh chỉnh bởi công
|
|
nghệ B&O tạo nên chất âm đa dạng và bắt tai.
|
|
</p>
|
|
</div>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/13b330d47366940d247bf12abf83a51f34527bda?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain mt-5 max-w-full aspect-[3.95] w-[764px]" alt="Laptop HP Victus" />
|
|
<button class="flex gap-1.5 self-center mt-5 text-orange-500 w-[95px]">
|
|
<span class="grow">Xem thêm</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/c9028766c34216a0948c3f9c79cb019f09182c1c?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 my-auto aspect-[1.86] w-[13px]" alt="Down arrow" />
|
|
</button>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- Product Specifications -->
|
|
<section class="ml-5 w-[41%] max-md:ml-0 max-md:w-full">
|
|
<article
|
|
class="flex flex-col px-3.5 pt-6 pb-16 mx-auto w-full bg-white rounded-lg max-md:mt-3 max-md:max-w-full">
|
|
<h2 class="self-start text-2xl font-bold leading-none text-black">
|
|
Thông tin chi tiết
|
|
</h2>
|
|
<hr
|
|
class="shrink-0 mt-3 max-w-full h-px border border-solid border-zinc-400 w-[536px] max-md:mr-2.5" />
|
|
<div class="mt-3.5 ml-4 max-md:max-w-full">
|
|
<div class="flex gap-5 max-md:flex-col">
|
|
<dl class="w-[24%] max-md:ml-0 max-md:w-full">
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10">
|
|
Thương hiệu
|
|
</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
HP
|
|
</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Bảo hành
|
|
</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
12
|
|
</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Thông tin
|
|
chung</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Series
|
|
laptop</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
VICTUS</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Part-number</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
4R0U8PA</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Màu sắc
|
|
</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
Đen
|
|
</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Nhu cầu
|
|
</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
Gaming, Đồ họa - Kỹ
|
|
thuật</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Thế hệ
|
|
CPU</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
Ryzen 5</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
CPU</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
AMD
|
|
Ryzen 5 5600H ( 3.3
|
|
GHz - 4.2 GHz / 16MB / 6 nhân, 12 luồng )</dd>
|
|
<dt class="text-base font-bold leading-6 text-black max-md:mt-10 mt-6">
|
|
Chip đồ
|
|
họa</dt>
|
|
<dd class="text-base leading-6 text-black max-md:mt-10">
|
|
NVIDIA GeForce RTX
|
|
3050Ti 4GB GDDR6 / AMD Radeon Graphics</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="flex gap-1.5 self-center mt-2.5 max-w-full text-base font-bold text-orange-500 w-[163px]">
|
|
<span class="grow">Xem thêm thông số</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/a5f2716ec5904d58753fb52eb1afc202be4ed165?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 my-auto aspect-[1.86] w-[13px]" alt="Down arrow" />
|
|
</button>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Related Products -->
|
|
<section class="py-5 pl-3 mt-5 w-full bg-white rounded-xl max-md:max-w-full">
|
|
<div
|
|
class="flex flex-wrap gap-5 justify-between mr-5 w-full font-bold max-w-[1368px] max-md:mr-2.5 max-md:max-w-full">
|
|
<h2 class="text-xl text-black">Sản phẩm tương tự</h2>
|
|
<a href="#" class="flex gap-1.5 self-start text-base text-violet-900">
|
|
<span class="grow my-auto">Xem tất cả</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/046e2b459724569f24de457ce83328e7e13d7e69?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Right arrow" />
|
|
</a>
|
|
</div>
|
|
<hr class="shrink-0 mt-3.5 w-full h-px border border-solid border-neutral-200" />
|
|
|
|
<div class="flex flex-wrap gap-3 mt-6 text-base text-zinc-600 max-md:mr-2.5">
|
|
<!-- Product Card 1 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/527c6fc5f845081fb171244978e5da5b795135d0?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 2 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/51e7cb004e444284ff81f46488f735a658c1ec44?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 3 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/51e7cb004e444284ff81f46488f735a658c1ec44?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 4 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8f086ad3ef94a52aff9a21ae5a532530727cb0e1?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 5 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8f086ad3ef94a52aff9a21ae5a532530727cb0e1?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recommended Products -->
|
|
<section class="py-5 pl-3 mt-5 w-full bg-white rounded-xl max-md:max-w-full">
|
|
<div
|
|
class="flex flex-wrap gap-5 justify-between mr-5 w-full font-bold max-w-[1368px] max-md:mr-2.5 max-md:max-w-full">
|
|
<h2 class="text-xl text-black">Sản phẩm bạn có thể thích</h2>
|
|
<a href="#" class="flex gap-1.5 self-start text-base text-violet-900">
|
|
<span class="grow my-auto">Xem tất cả</span>
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/046e2b459724569f24de457ce83328e7e13d7e69?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 aspect-square" alt="Right arrow" />
|
|
</a>
|
|
</div>
|
|
<hr class="shrink-0 mt-3.5 w-full h-px border border-solid border-neutral-200" />
|
|
|
|
<div class="flex flex-wrap gap-3 mt-6 text-base text-zinc-600 max-md:mr-2.5">
|
|
<!-- Product Card 1 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/527c6fc5f845081fb171244978e5da5b795135d0?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 2 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/51e7cb004e444284ff81f46488f735a658c1ec44?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 3 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/51e7cb004e444284ff81f46488f735a658c1ec44?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 4 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8f086ad3ef94a52aff9a21ae5a532530727cb0e1?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 5 -->
|
|
<article class="flex-1">
|
|
<div
|
|
class="flex flex-col items-start px-3 py-3.5 w-full bg-white rounded-lg border border-solid border-neutral-300">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8e9a1cc5ee8a5fb18aa5b4d4b23f8d3a89ac357a?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain self-stretch w-full rounded-lg aspect-square max-md:mr-1"
|
|
alt="Dell Laptop" />
|
|
<h3 class="mt-1.5 mr-5 text-lg font-bold text-black max-md:mr-2.5">
|
|
Laptop văn phòng Dell RAM 8G Core i7
|
|
</h3>
|
|
<p class="self-stretch mt-4">Intel Core i5 / 8GB / 256GB / SSD</p>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/8f086ad3ef94a52aff9a21ae5a532530727cb0e1?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-5 aspect-square" alt="Location icon" />
|
|
<span class="basis-auto">Quận Thanh Xuân</span>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-1">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1f936786f27e72483bfec7759736f366e5d15605?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 self-start aspect-square w-[18px]"
|
|
alt="Calendar icon" />
|
|
<time>11/04/2025</time>
|
|
<div class="shrink-0 w-px border border-solid border-zinc-600 h-[19px]">
|
|
</div>
|
|
<span>Còn 01 ngày</span>
|
|
</div>
|
|
<strong class="mt-1.5 text-lg font-bold text-red-700">15.000.000đ</strong>
|
|
<div class="flex gap-2 mt-4 font-medium text-black">
|
|
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/423d485ea63b4a4e4be37a6d0bb81a14a699bfa4?placeholderIfAbsent=true&apiKey=66b07cac3dc247b7875c09eebed9bb34"
|
|
class="object-contain shrink-0 w-6 rounded-full aspect-square"
|
|
alt="Seller avatar" />
|
|
<span>Thanh Mai</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
|
<script>
|
|
var swiper_small = new Swiper("#js-slider-small", {
|
|
loop: true,
|
|
spaceBetween: 12,
|
|
slidesPerView: 5,
|
|
freeMode: true,
|
|
watchSlidesProgress: true,
|
|
navigation: {
|
|
nextEl: "#btn-slider-small .swiper-button-next",
|
|
prevEl: " #btn-slider-small .swiper-button-prev",
|
|
},
|
|
});
|
|
var swiper_big = new Swiper("#js-slider-big", {
|
|
loop: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: "#btn-slider-big .swiper-button-next",
|
|
prevEl: " #btn-slider-big .swiper-button-prev",
|
|
},
|
|
thumbs: {
|
|
swiper: swiper_small,
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |