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

upload

Browse Source
This commit is contained in:
Tieptk
2025-05-12 10:12:41 +07:00
parent 96b9fc06d2
commit 3739ee2baa
21 changed files with 1034 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
faq/page_faq.html Normal file
View File

@@ -0,0 +1,209 @@
<!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 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="./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>

337
faq/page_faq_detail.html Normal file
View File

@@ -0,0 +1,337 @@
<!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>

114
faq/page_faq_form.html Normal file
View File

@@ -0,0 +1,114 @@
<!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>
<h1 class="text-2xl block mb-3">Nhập câu hỏi của bạn</h1>
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
<div class="flex gap-[15px]">
<div class="w-[65%]">
<div class="form-input faq mb-[20px]">
<label for="" class="mb-1.5 block font-bold">Tiêu đề</label>
<input type="text" name="title"
class="bg-[#f8f8f8] rounded-[4px_4px_2px_2px] border-0 border-b-[1px] border-[#dddddd]"
placeholder="Mời bạn nhập tiêu đề..." />
<div class="note-error"></div>
</div>
<div class="form-input faq mb-[20px]">
<label for="" class="mb-1.5 block font-bold">Nội dung</label>
<textarea id="product-desc"> </textarea>
</div>
<div class="form-input faq mb-[20px]">
<label for="" class="mb-1.5 block font-bold">Tag</label>
<input type="text" name="title"
class="bg-[#f8f8f8] rounded-[4px_4px_2px_2px] border-0 border-b-[1px] border-[#dddddd]"
placeholder="Mời bạn nhập tiêu đề..." />
<div class="note-error"></div>
</div>
<button type="submit"
class="rounded-[4px] hover:bg-purple-900 px-5 py-2 bg-[var(--color-global)] text-white">Gửi
câu hỏi</button>
</div>
<div class="w-[35%]">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea#product-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>
</body>
</html>