208 lines
13 KiB
HTML
208 lines
13 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="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="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||
<div class="flex items-center justify-between border-b-[1px] border-neutral-200 pb-2.5 ">
|
||
<h1 class="text-2xl font-bold">Hỏi đáp</h1>
|
||
<div class="right flex items-center">
|
||
<form action="/search" enctype="text/plain" method="get" class="flex items-center">
|
||
<div
|
||
class="w-[520px] h-[45px] relative rounded-[8px] mr-[10px] 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>
|
||
<button type="submit"
|
||
class="h-[43px] w-[100px] bg-blue-900 rounded-[4px] text-white font-bold hover:bg-blue-800 ">Đặt
|
||
câu
|
||
hỏi</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 flex gap-[15px]">
|
||
<div class="w-[15%]">
|
||
<div class="list-tab">
|
||
<a href=""
|
||
class="w-full bg-[var(--color-hover)] rounded-[4px] h-[40px] flex items-center px-[10px] mb-[5px]">
|
||
<i class="block w-[20px] h-[20px] border-2 border-white text-white rounded-[50%] leading-[20px] text-center not-italic
|
||
">?</i>
|
||
<span class="font-bold ml-[5px] text-white ">Tất cả câu hỏi</span>
|
||
</a>
|
||
<a href=""
|
||
class="w-full h-[40px] flex items-center rounded-[4px] px-[10px] group hover:bg-[var(--color-hover)] mb-[5px]">
|
||
<i class="icon_2025 tag group-hover:brightness-0 group-hover:invert-[1] "></i>
|
||
<span class="font-bold ml-[5px] group-hover:text-white">Tag</span>
|
||
</a>
|
||
<a href=""
|
||
class="w-full h-[40px] flex items-center px-[10px] mb-[10px] group hover:bg-[var(--color-hover)]">
|
||
<i class="icon_2025 faq group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||
<span class="font-bold ml-[5px] group-hover:text-white">Quy định</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="w-[70%]">
|
||
<div
|
||
class="flex items-center text-lg gap-[15px] border-b-[1px] border-neutral-200 h-[40px] leading-[30px]">
|
||
<a href="" class="block underline font-bold text-[#FF7A00] ">Câu hỏi thường gặp</a>
|
||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00] ">Mới</a>
|
||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00]">Nhiều vote
|
||
nhất</a>
|
||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00]">Chưa trả
|
||
lời</a>
|
||
</div>
|
||
<div class="list mt-3">
|
||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||
<div class="w-[80px] mr-[20px]">
|
||
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
|
||
alt="avartar">
|
||
<div class="mt-[10px]">
|
||
<i class="icon-star star5"></i>
|
||
</div>
|
||
</div>
|
||
<div class="w-[calc(100%-100px)]">
|
||
<b class="mb-[10px]">Dino</b>
|
||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||
<p class="content mb-[5px]">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">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="padding flex items-center justify-center mt-[20px]">
|
||
<a href="" class="">
|
||
<i class="icon_2025 angle-right scale-x-[-1]"></i>
|
||
</a>
|
||
<a href="" class="active">
|
||
<span>1</span>
|
||
</a>
|
||
<a href="" class="">
|
||
<span>2</span>
|
||
</a>
|
||
<a href="" class="">
|
||
<span>3</span>
|
||
</a>
|
||
<a href="" class="">
|
||
<i class="icon_2025 angle-right"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="w-[15%]">
|
||
<b class="block mb-1 mt-[40px]">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> |