tieptk/bestpc_mobile_html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2025-09-25 10:42:06 +07:00
commit 689936198f
90 changed files with 9368 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
template/faq/detail.html Normal file
View File

@@ -0,0 +1,316 @@
<!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-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="bg-white p-[10px] mt-[10px] rounded-[4px]">
<h1 class="mb-[10px] text-[16px] 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">
<img 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-[15px] border-b-[1px] border-[#E3E3E3]">
<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 class="content leading-[25px] my-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-[15ox] py-[15px] border-t-[1px] border-neutral-200">
<form
class="form flex flex-col gap-[10px] h-[120px] pb-[10px] border-[1px] border-[#d9d9d9] rounded-[8px]">
<textarea type="text" class="w-full h-full rounded-[8px] p-[10px] outline-none"></textarea>
<div class="flex items-center gap-[10px] justify-end pr-[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>
</form>
<div class="list mt-[20px] ">
<div
class="item-review flex flex-wrap mb-[15px] pb-[15px] gap-[10px] border-b-[1px] border-[#E3E3E3]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar">
</div>
<div class="w-[calc(100%-40px)]">
<div class="p-[10px] bg-[#f8f8f8] rounded-[8px]">
<div class="flex items-center gap-[10px] mb-[10px]">
<b class="">Dino</b>
<p class="block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<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 class="list-reply mt-[15px] border-l-[1px] border-[#d4d4d4] pl-[30px]">
<div class="item-review flex gap-[10px] pb-[20px]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px"
height="75px" alt="avartar">
</div>
<div class="w-[calc(100%-40px)] 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 gap-[10px] pb-[20px]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px"
height="75px" alt="avartar">
</div>
<div class="w-[calc(100%-40px)] 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
class="item-review flex flex-wrap mb-[15px] pb-[15px] gap-[10px] border-b-[1px] border-[#E3E3E3]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar">
</div>
<div class="w-[calc(100%-40px)]">
<div class="p-[10px] bg-[#f8f8f8] rounded-[8px]">
<div class="flex items-center gap-[10px] mb-[10px]">
<b class="">Dino</b>
<p class="block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<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>
<a href="javascript:void(0)" class=" flex items-center justify-center text-[#ff7a00]">
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
</a>
</div>
</div>
<div class="bg-white mt-[10px] rounded-[4px]">
<h3 class="text-[16px] block p-[10px] font-bold border-b-[1px] border-[#95989a]">Top các câu hỏi
được
quan tâm
</h3>
<div class="list mt-2 p-[10px]">
<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>
</body>
</html>