337 lines
22 KiB
HTML
337 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>BESTPC - Trang chủ</title>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<link rel="stylesheet" href="./src/assets/css/font.css">
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
|||
|
|
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="page-faq-form 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="flex gap-[15px]">
|
|||
|
|
<div class="w-[70%]">
|
|||
|
|
<div class="p-2.5 bg-white">
|
|||
|
|
<div class="pb-2.5 border-b-[1px] border-neutral-200">
|
|||
|
|
<h1 class="mb-1.5 text-2xl font-bold">Máy tính của mình đang bị lỗi, mình không khởi động
|
|||
|
|
lại
|
|||
|
|
được, mọi
|
|||
|
|
người ai
|
|||
|
|
biết giúp
|
|||
|
|
mình với?</h1>
|
|||
|
|
<div class="flex items-center flex-wrap">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<img src="./src/assets/images/avartar.png"
|
|||
|
|
class="w-[32px] h-[32px] block object-contain" width="100%" height="100%"
|
|||
|
|
alt="">
|
|||
|
|
<b class="ml-[5px]">Dino</b>
|
|||
|
|
<span class="ml-[5px] text-gray-500">10:00pm 20/02/2025</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center py-2 ml-[10px]">
|
|||
|
|
<p class="mr-1">Tags:</p>
|
|||
|
|
<div class="list flex flex-wrap gap-[10px]">
|
|||
|
|
<a href=""
|
|||
|
|
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|||
|
|
<a href=""
|
|||
|
|
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|||
|
|
<a href=""
|
|||
|
|
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="content leading-[25px] mt-3">
|
|||
|
|
<p>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. It has survived not only five centuries, but also the leap into electronic
|
|||
|
|
typesetting, remaining essentially
|
|||
|
|
unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
|||
|
|
containing Lorem Ipsum passages, and more
|
|||
|
|
recently with desktop publishing software like Aldus PageMaker including versions of
|
|||
|
|
Lorem Ipsum.</p>
|
|||
|
|
|
|||
|
|
<a href="" class="block mx-auto my-2 ">
|
|||
|
|
<img src="https://placehold.co/950x600"
|
|||
|
|
class="w-full h-full object-contain block m-auto" alt="">
|
|||
|
|
</a>
|
|||
|
|
<p>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. It has survived not only five centuries, but also the leap into electronic
|
|||
|
|
typesetting, remaining essentially
|
|||
|
|
unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
|||
|
|
containing Lorem Ipsum passages, and more
|
|||
|
|
recently with desktop publishing software like Aldus PageMaker including versions of
|
|||
|
|
Lorem Ipsum.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-comment mt-2.5 py-2.5 border-t-[1px] border-neutral-200">
|
|||
|
|
<form class="form flex gap-[20px]">
|
|||
|
|
<div class="avartar w-[60px] block h-[60px] rounded-[50%]">
|
|||
|
|
<img src="./src/assets/images/avartar.png" width="100%" height="100%"
|
|||
|
|
class="block object-contain w-full h-full" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-[calc(100%-80px)]">
|
|||
|
|
<div
|
|||
|
|
class="relative w-full h-[120px] border-[1px] border-[#d9d9d9] rounded-[8px] overflow-hidden">
|
|||
|
|
<input type="text" class="w-full h-full rounded-[8px]" />
|
|||
|
|
|
|||
|
|
<div class="absolute right-[10px] bottom-[10px] w-[140px]">
|
|||
|
|
<div class="flex items-center gap-[10px]">
|
|||
|
|
<a href="" class="">
|
|||
|
|
<i class="icon_2025 earth"></i>
|
|||
|
|
</a>
|
|||
|
|
<a href="" class="">
|
|||
|
|
<i class="icon_2025 images"></i>
|
|||
|
|
</a>
|
|||
|
|
<button type="submit"
|
|||
|
|
class="px-5 py-0.5 text-white rounded-[4px] text-center bg-gray-400 uppercase">Gửi</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<div class="list mt-5">
|
|||
|
|
<div class="item-review flex mb-[15px] pb-[15px]">
|
|||
|
|
<div class="w-[60px] mr-[20px]">
|
|||
|
|
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
|||
|
|
alt="avartar">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-[calc(100%-80px)]">
|
|||
|
|
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
|||
|
|
<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="btn flex items-center">
|
|||
|
|
<div class="flex items-center mr-[10px]">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 like"></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="item-review flex mb-[15px] pb-[15px]">
|
|||
|
|
<div class="w-[60px] mr-[20px]">
|
|||
|
|
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
|||
|
|
alt="avartar">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-[calc(100%-80px)]">
|
|||
|
|
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
|||
|
|
<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="btn flex items-center">
|
|||
|
|
<div class="flex items-center mr-[10px]">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 like"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 comment"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="list-reply mt-8">
|
|||
|
|
<div
|
|||
|
|
class="item-review flex pb-[30px] border-l-[1px] border-[#d4d4d4] pl-[10px]">
|
|||
|
|
<div class="w-[60px] mr-[20px]">
|
|||
|
|
<img src="./src/assets/images/avartar-review-1.png" width="75px"
|
|||
|
|
height="75px" alt="avartar">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-[calc(100%-80px)] relative">
|
|||
|
|
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
|||
|
|
<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="btn flex items-center">
|
|||
|
|
<div class="flex items-center mr-[10px]">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 like"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 comment"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
|
|||
|
|
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|||
|
|
">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="item-review flex pb-[15px] border-l-[1px] border-[#d4d4d4] pl-[10px]">
|
|||
|
|
<div class="w-[60px] mr-[20px]">
|
|||
|
|
<img src="./src/assets/images/avartar-review-1.png" width="75px"
|
|||
|
|
height="75px" alt="avartar">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-[calc(100%-80px)] relative">
|
|||
|
|
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
|||
|
|
<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="btn flex items-center">
|
|||
|
|
<div class="flex items-center mr-[10px]">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 like"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<b class="mr-[5px]">120</b>
|
|||
|
|
<i class="icon_2025 comment"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
|
|||
|
|
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|||
|
|
">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<a href="" class="font-bold text-[#FF7A00] hover:underline">Xem thêm 192 câu trả lời
|
|||
|
|
khác</a>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<!-- form commet -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class=" w-[30%]">
|
|||
|
|
<div class="p-2.5 bg-white">
|
|||
|
|
<h3 class="text-xl block pb-2 border-b-[1px] border-[#95989a]">Top các câu hỏi được
|
|||
|
|
quan tâm
|
|||
|
|
</h3>
|
|||
|
|
<div class="list mt-2">
|
|||
|
|
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
|||
|
|
<i
|
|||
|
|
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
|||
|
|
<span
|
|||
|
|
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
|||
|
|
PC cho
|
|||
|
|
người mới bắt đầu như thế
|
|||
|
|
nào, hướng dẫn mình với?</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
|||
|
|
<i
|
|||
|
|
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
|||
|
|
<span
|
|||
|
|
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
|||
|
|
PC cho
|
|||
|
|
người mới bắt đầu như thế
|
|||
|
|
nào, hướng dẫn mình với?</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
|||
|
|
<i
|
|||
|
|
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
|||
|
|
<span
|
|||
|
|
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
|||
|
|
PC cho
|
|||
|
|
người mới bắt đầu như thế
|
|||
|
|
nào, hướng dẫn mình với?</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
|||
|
|
<i
|
|||
|
|
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
|||
|
|
<span
|
|||
|
|
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
|||
|
|
PC cho
|
|||
|
|
người mới bắt đầu như thế
|
|||
|
|
nào, hướng dẫn mình với?</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|