bong88
Nền tảng giải trí hàng đầu.
Okay, đây là mã HTML sử dụng Tailwind CSS để tạo trang FAQ theo yêu cầu của bạn, với phong cách hiện đại tối giản, màu chủ đạo `#6D28D9` (gần với `purple-700` của Tailwind) và `#A78BFA` (gần với `purple-400`).
Câu hỏi thường gặp
`):**
* `min-h-screen`: Đảm bảo trang chiếm ít nhất toàn bộ chiều cao màn hình.
* `bg-gradient-to-br from-purple-700 to-purple-400`: Tạo hiệu ứng gradient màu tím theo yêu cầu.
* `p-4 sm:p-6 md:p-8`: Padding responsive.
* `flex flex-col items-center`: Căn giữa nội dung theo chiều dọc và ngang.
2. **Tiêu đề chính (``):**
* `text-3xl font-bold text-white text-center mb-8`: Kiểu chữ lớn, đậm, màu trắng, căn giữa và có khoảng cách dưới.
3. **Container cho các câu hỏi (`
`):**
* `text-3xl font-bold text-white text-center mb-8`: Kiểu chữ lớn, đậm, màu trắng, căn giữa và có khoảng cách dưới.
3. **Container cho các câu hỏi (``):**
* `w-full max-w-2xl`: Chiều rộng tối đa để nội dung không quá dàn trải trên màn hình lớn.
* `space-y-6`: Tạo khoảng cách giữa các thẻ câu hỏi.
4. **Thẻ câu hỏi (`` - được tạo bằng JS):**
* `bg-white`: Nền trắng cho thẻ.
* `rounded-xl`: Bo góc lớn.
* `shadow-lg`: Đổ bóng rõ nét.
* `overflow-hidden`: Đảm bảo các phần tử con bo góc không bị tràn ra ngoài.
5. **Tiêu đề câu hỏi (`` - trong JS):**
* `p-4 sm:p-6`: Padding.
* `bg-purple-50`: Nền tím rất nhạt cho phần tiêu đề câu hỏi, tạo sự phân tách.
* `border-b border-purple-200`: Đường viền dưới mỏng.
* `text-xl sm:text-2xl font-semibold text-purple-700`: Kiểu chữ to, đậm vừa, màu tím đậm.
6. **Khu vực chứa các câu trả lời (`` - trong JS):**
* `p-4 sm:p-6`: Padding.
* `space-y-3`: Khoảng cách giữa các câu trả lời.
7. **Mỗi mục câu trả lời (`` - trong JS):**
* `flex items-start space-x-3`: Layout flex, avatar và nội dung căn lề trên, có khoảng cách ngang giữa chúng.
* `py-3`: Padding dọc để tách biệt các câu trả lời.
* `hidden`: Lớp này được thêm/bớt bởi JavaScript để ẩn/hiện câu trả lời.
8. **Avatar người dùng (`![]()
` - trong JS):**
* `w-10 h-10 sm:w-12 sm:h-12`: Kích thước responsive.
* `rounded-full`: Bo tròn hoàn toàn để thành hình tròn.
* `object-cover`: Đảm bảo ảnh avatar vừa vặn mà không bị méo.
* `border-2 border-purple-200`: Viền tím nhạt cho avatar.
* `flex-shrink-0`: Ngăn avatar bị co lại khi không đủ không gian.
9. **Khối nội dung trả lời (bên phải avatar):**
* `flex-1`: Cho phép khối này chiếm phần không gian còn lại.
* **Tên người dùng (`` - trong JS):**
* `font-semibold text-sm text-purple-700`: Chữ nhỏ, đậm vừa, màu tím.
* **Bong bóng chat (`
` - trong JS):**
* `mt-1`: Khoảng cách nhỏ phía trên.
* `bg-purple-100`: Nền tím rất nhạt cho bong bóng.
* `p-3`: Padding bên trong bong bóng.
* `rounded-lg rounded-tl-none`: Bo góc cho bong bóng, `rounded-tl-none` loại bỏ bo góc trên cùng bên trái, tạo hiệu ứng "đuôi" cho bong bóng trỏ về phía avatar.
* `shadow-sm`: Đổ bóng nhẹ.
* **Nội dung trả lời (`` - trong JS):**
* `text-gray-700 text-sm leading-relaxed`: Chữ xám đậm, kích thước nhỏ, giãn dòng cho dễ đọc.
* **Thời gian đăng (`
` - trong JS):**
* `text-xs text-gray-500 mt-1.5`: Chữ rất nhỏ, màu xám nhạt, có khoảng cách trên.
10. **Nút "Xem thêm câu trả lời" (`
` - được tạo bằng JS):**
* `bg-white`: Nền trắng cho thẻ.
* `rounded-xl`: Bo góc lớn.
* `shadow-lg`: Đổ bóng rõ nét.
* `overflow-hidden`: Đảm bảo các phần tử con bo góc không bị tràn ra ngoài.
5. **Tiêu đề câu hỏi (`` - trong JS):**
* `p-4 sm:p-6`: Padding.
* `bg-purple-50`: Nền tím rất nhạt cho phần tiêu đề câu hỏi, tạo sự phân tách.
* `border-b border-purple-200`: Đường viền dưới mỏng.
* `text-xl sm:text-2xl font-semibold text-purple-700`: Kiểu chữ to, đậm vừa, màu tím đậm.
6. **Khu vực chứa các câu trả lời (`
` - trong JS):**
* `p-4 sm:p-6`: Padding.
* `bg-purple-50`: Nền tím rất nhạt cho phần tiêu đề câu hỏi, tạo sự phân tách.
* `border-b border-purple-200`: Đường viền dưới mỏng.
* `text-xl sm:text-2xl font-semibold text-purple-700`: Kiểu chữ to, đậm vừa, màu tím đậm.
6. **Khu vực chứa các câu trả lời (`` - trong JS):**
* `p-4 sm:p-6`: Padding.
* `space-y-3`: Khoảng cách giữa các câu trả lời.
7. **Mỗi mục câu trả lời (`` - trong JS):**
* `flex items-start space-x-3`: Layout flex, avatar và nội dung căn lề trên, có khoảng cách ngang giữa chúng.
* `py-3`: Padding dọc để tách biệt các câu trả lời.
* `hidden`: Lớp này được thêm/bớt bởi JavaScript để ẩn/hiện câu trả lời.
8. **Avatar người dùng (`![]()
` - trong JS):**
* `w-10 h-10 sm:w-12 sm:h-12`: Kích thước responsive.
* `rounded-full`: Bo tròn hoàn toàn để thành hình tròn.
* `object-cover`: Đảm bảo ảnh avatar vừa vặn mà không bị méo.
* `border-2 border-purple-200`: Viền tím nhạt cho avatar.
* `flex-shrink-0`: Ngăn avatar bị co lại khi không đủ không gian.
9. **Khối nội dung trả lời (bên phải avatar):**
* `flex-1`: Cho phép khối này chiếm phần không gian còn lại.
* **Tên người dùng (`` - trong JS):**
* `font-semibold text-sm text-purple-700`: Chữ nhỏ, đậm vừa, màu tím.
* **Bong bóng chat (`
` - trong JS):**
* `mt-1`: Khoảng cách nhỏ phía trên.
* `bg-purple-100`: Nền tím rất nhạt cho bong bóng.
* `p-3`: Padding bên trong bong bóng.
* `rounded-lg rounded-tl-none`: Bo góc cho bong bóng, `rounded-tl-none` loại bỏ bo góc trên cùng bên trái, tạo hiệu ứng "đuôi" cho bong bóng trỏ về phía avatar.
* `shadow-sm`: Đổ bóng nhẹ.
* **Nội dung trả lời (`` - trong JS):**
* `text-gray-700 text-sm leading-relaxed`: Chữ xám đậm, kích thước nhỏ, giãn dòng cho dễ đọc.
* **Thời gian đăng (`
` - trong JS):**
* `text-xs text-gray-500 mt-1.5`: Chữ rất nhỏ, màu xám nhạt, có khoảng cách trên.
10. **Nút "Xem thêm câu trả lời" (`
` - trong JS):**
* `flex items-start space-x-3`: Layout flex, avatar và nội dung căn lề trên, có khoảng cách ngang giữa chúng.
* `py-3`: Padding dọc để tách biệt các câu trả lời.
* `hidden`: Lớp này được thêm/bớt bởi JavaScript để ẩn/hiện câu trả lời.
8. **Avatar người dùng (`![]()
` - trong JS):**
* `w-10 h-10 sm:w-12 sm:h-12`: Kích thước responsive.
* `rounded-full`: Bo tròn hoàn toàn để thành hình tròn.
* `object-cover`: Đảm bảo ảnh avatar vừa vặn mà không bị méo.
* `border-2 border-purple-200`: Viền tím nhạt cho avatar.
* `flex-shrink-0`: Ngăn avatar bị co lại khi không đủ không gian.
9. **Khối nội dung trả lời (bên phải avatar):**
* `flex-1`: Cho phép khối này chiếm phần không gian còn lại.
* **Tên người dùng (`
` - trong JS):** * `font-semibold text-sm text-purple-700`: Chữ nhỏ, đậm vừa, màu tím. * **Bong bóng chat (`
` - trong JS):**
* `mt-1`: Khoảng cách nhỏ phía trên.
* `bg-purple-100`: Nền tím rất nhạt cho bong bóng.
* `p-3`: Padding bên trong bong bóng.
* `rounded-lg rounded-tl-none`: Bo góc cho bong bóng, `rounded-tl-none` loại bỏ bo góc trên cùng bên trái, tạo hiệu ứng "đuôi" cho bong bóng trỏ về phía avatar.
* `shadow-sm`: Đổ bóng nhẹ.
* **Nội dung trả lời (`
` - trong JS):** * `text-gray-700 text-sm leading-relaxed`: Chữ xám đậm, kích thước nhỏ, giãn dòng cho dễ đọc. * **Thời gian đăng (`
` - trong JS):** * `text-xs text-gray-500 mt-1.5`: Chữ rất nhỏ, màu xám nhạt, có khoảng cách trên. 10. **Nút "Xem thêm câu trả lời" (`