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>

293
template/faq/home.html Normal file
View File

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