tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
b26fc7d61aab216b5632b47853d901ccde3f40cb
bestpc/product-detail.html

1615 lines
109 KiB
HTML
Raw Normal View History

up
2025-04-29 11:36:07 +07:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<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>
Reference in New Issue Copy Permalink