293 lines
19 KiB
HTML
293 lines
19 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="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
|
<link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-mb">
|
|
<div class="page-faq bg-[#F4F4F4] pb-[100px]">
|
|
<div class="container">
|
|
<div class="breadcrumb p-[12px_0]">
|
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
|
class="flex items-center pr-[12px]">
|
|
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
|
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
|
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
|
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
|
<meta itemprop="position" content="1">
|
|
</li>
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
|
class="flex items-center pr-[12px]">
|
|
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
|
<p class="font-[600]" itemprop="name">
|
|
Hỏi đáp
|
|
</p>
|
|
</a>
|
|
<meta itemprop="position" content="2">
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="bg-white p-[10px] mt-[10px] rounded-[4px]">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-[16px] font-bold">Hỏi đáp</h1>
|
|
<button type="submit"
|
|
class="h-[35px] w-[100px] bg-[#0D0D9C] rounded-[4px] text-white font-bold hover:bg-blue-800 ">Đặt
|
|
câu
|
|
hỏi</button>
|
|
</div>
|
|
|
|
<form action="/search" enctype="text/plain" method="get" class="flex items-center mt-[15px]">
|
|
<div class="w-full h-[45px] relative rounded-[8px] input-search border border-[#dddddd]">
|
|
|
|
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
|
|
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
|
onclick="$('.autocomplete-suggestions').show();">
|
|
<div class="absolute left-0 top-0 w-[40px] h-[45px] flex items-center justify-center"><i
|
|
class="icon_2025 search-2 "></i></div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="list-tab mt-[15px] flex items-center gap-[10px]">
|
|
<a href="" class="bg-[var(--color-hover)] rounded-[4px] h-[40px] flex items-center px-[15px]">
|
|
<i class="block w-[20px] h-[20px] border-2 border-white text-white rounded-[50%] leading-[17px] text-center not-italic
|
|
">?</i>
|
|
<span class="text-[13px] font-bold ml-[5px] text-white ">Tất cả câu hỏi</span>
|
|
</a>
|
|
<a href=""
|
|
class="h-[40px] flex items-center rounded-[4px] px-[15px] border-[1px] border-[#E3E3E3]">
|
|
<i class="icon_2025 tag group-hover:brightness-0 group-hover:invert-[1] "></i>
|
|
<span class="text-[13px] font-bold ml-[5px] group-hover:text-white">Tag</span>
|
|
</a>
|
|
<a href="" class="h-[40px] flex items-center px-[15px] border-[1px] border-[#E3E3E3]">
|
|
<i class="icon_2025 faq group-hover:brightness-0 group-hover:invert-[1]"></i>
|
|
<span class="text-[13px] font-bold ml-[5px] group-hover:text-white">Quy định</span>
|
|
</a>
|
|
</div>
|
|
|
|
<select class="filter w-full p-[10px] border-[1px] border-[#7C7C7C] rounded-[4px] mt-[15px]">
|
|
<option value="">Câu hỏi thường gặp</option>
|
|
<option value="">Mới</option>
|
|
<option value="">Nhiều vote
|
|
nhất</option>
|
|
<option value="">Chưa trả
|
|
lời</option>
|
|
</select>
|
|
|
|
<div class="list my-[15px]">
|
|
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
|
|
|
<div class="flex items-center gap-[10px] mb-[5px]">
|
|
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
|
alt="avartar" class="block w-[30px] h-[30px] object-contain ">
|
|
<b class="mb-[10px]">Dino</b>
|
|
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
|
</div>
|
|
<i class="icon-star star5"></i>
|
|
<p class="content my-[5px] text-[#303030] font-bold">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 py-2">
|
|
<p class="mr-1">Tags:</p>
|
|
<div class="list flex flex-wrap gap-[10px]">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn flex items-center mt-[5px]">
|
|
<div class="flex items-center mr-[10px]">
|
|
<b class="mr-[5px]">120</b>
|
|
<i class="icon_2025 view"></i>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<b class="mr-[5px]">120</b>
|
|
<i class="icon_2025 comment"></i>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
|
|
|
<div class="flex items-center gap-[10px] mb-[5px]">
|
|
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
|
alt="avartar" class="block w-[30px] h-[30px] object-contain ">
|
|
<b class="mb-[10px]">Dino</b>
|
|
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
|
</div>
|
|
<i class="icon-star star5"></i>
|
|
<p class="content my-[5px] text-[#303030] font-bold">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 py-2">
|
|
<p class="mr-1">Tags:</p>
|
|
<div class="list flex flex-wrap gap-[10px]">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn flex items-center mt-[5px]">
|
|
<div class="flex items-center mr-[10px]">
|
|
<b class="mr-[5px]">120</b>
|
|
<i class="icon_2025 view"></i>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<b class="mr-[5px]">120</b>
|
|
<i class="icon_2025 comment"></i>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
|
|
|
<div class="flex items-center gap-[10px] mb-[5px]">
|
|
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
|
alt="avartar" class="block w-[30px] h-[30px] object-contain ">
|
|
<b class="mb-[10px]">Dino</b>
|
|
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
|
</div>
|
|
<i class="icon-star star5"></i>
|
|
<p class="content my-[5px] text-[#303030] font-bold">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 py-2">
|
|
<p class="mr-1">Tags:</p>
|
|
<div class="list flex flex-wrap gap-[10px]">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn flex items-center mt-[5px]">
|
|
<div class="flex items-center mr-[10px]">
|
|
<b class="mr-[5px]">120</b>
|
|
<i class="icon_2025 view"></i>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<b class="mr-[5px]">120</b>
|
|
<i class="icon_2025 comment"></i>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<a href="javascript:void(0)"
|
|
class="more-all js-viewmore-content item-btn flex items-center justify-center p-[5px] text-[#ff7a00]"
|
|
data-content="#content-desciption">
|
|
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
|
|
</a>
|
|
|
|
<div class="box-tag">
|
|
<b class="block my-[10px]">Hot tags</b>
|
|
<div class="list">
|
|
<div class="flex items-center mb-2">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<span>(130 câu hỏi)</span>
|
|
</div>
|
|
<div class="flex items-center mb-2">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<span>(130 câu hỏi)</span>
|
|
</div>
|
|
<div class="flex items-center mb-2">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<span>(130 câu hỏi)</span>
|
|
</div>
|
|
<div class="flex items-center mb-2">
|
|
<a href=""
|
|
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|
<span>(130 câu hỏi)</span>
|
|
</div>
|
|
</div>
|
|
<a href="javascript:void" class="text-blue-600 underline">Xem thêm tags >></a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |