Đăng nhập Đăng ký

Tuyệt vời! Dưới đâ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 công nghệ và màu sắc chủ đạo `#064E3B` - `#14B8A6`, ngôn ngữ tiếng Việt. **Giải thích các yếu tố thiết kế và Tailwind classes:** 1. **Màu sắc chủ đạo và Phong cách Công nghệ:** * `bg-gradient-to-br from-[#064E3B] to-[#0A6052]`: Tạo nền gradient chuyển màu mượt mà từ màu xanh đậm (`#064E3B`) sang một sắc độ hơi sáng hơn của nó, tạo cảm giác chiều sâu. * `faq-item bg-[#08332A]/70 backdrop-blur-sm`: Mỗi thẻ câu hỏi có nền tối hơn một chút, có độ trong suốt (`/70`) và hiệu ứng `backdrop-blur-sm` (làm mờ nền phía sau) tạo cảm giác "glassmorphism" hiện đại, công nghệ. * `shadow-2xl shadow-[#14B8A6]/20`: Đổ bóng lớn và có màu xanh teal nhạt (`#14B8A6`) với độ trong suốt thấp, tạo hiệu ứng "glow" nhẹ nhàng. * `text-[#14B8A6]`: Màu tiêu đề câu hỏi nổi bật với màu xanh teal sáng. * `border-2 border-[#14B8A6]/50`: Viền avatar với màu teal và độ trong suốt, tăng tính thẩm mỹ. * `bg-[#0F4A3C]/80`: Nền của bong bóng chat trả lời, cũng là một sắc độ tối của màu xanh chủ đạo, có độ trong suốt. * `text-teal-200`, `text-teal-400`, `text-gray-200`: Các màu chữ phụ trợ tương phản tốt trên nền tối và hài hòa với màu chủ đạo. 2. **Bố cục và Responsive:** * `min-h-screen`: Đảm bảo trang chiếm toàn bộ chiều cao màn hình. * `p-4 md:p-8`: Padding cho toàn trang, lớn hơn trên màn hình desktop (`md:`). * `max-w-3xl mx-auto`: Giới hạn chiều rộng nội dung và căn giữa. * `space-y-8`: Khoảng cách dọc giữa các thẻ câu hỏi. * `flex items-start space-x-3`: Bố trí avatar và nội dung trả lời bằng flexbox, avatar căn lề trên, có khoảng cách ngang. * `w-10 h-10 md:w-12 md:h-12`: Kích thước avatar, lớn hơn trên desktop. * `shrink-0`: Ngăn avatar bị co lại khi nội dung dài. 3. **Thẻ Câu Hỏi:** * `rounded-xl`: Bo góc lớn cho thẻ. * `overflow-hidden`: Đảm bảo các hiệu ứng đổ bóng và bo góc hoạt động đúng. * `p-5 md:p-6`: Padding bên trong thẻ. * `text-xl md:text-2xl font-bold mb-4`: Kiểu chữ cho tiêu đề câu hỏi. 4. **Khu vực Trả Lời:** * `space-y-5`: Khoảng cách dọc giữa các câu trả lời. * `rounded-full object-cover`: Avatar hình tròn và đảm bảo ảnh không bị méo. * `flex-1`: Khối nội dung trả lời (tên, thời gian, nội dung) chiếm phần không gian còn lại. * `bg-[#0F4A3C]/80 p-3 rounded-lg shadow`: Tạo kiểu bong bóng chat cho mỗi câu trả lời. * `flex justify-between items-center mb-1`: Bố trí tên người dùng và thời gian trên cùng một hàng. * `font-semibold text-sm text-teal-200`: Kiểu chữ cho tên người dùng. * `text-xs text-teal-400`: Kiểu chữ cho thời gian. * `text-sm text-gray-200 leading-relaxed`: Kiểu chữ cho nội dung trả lời, `leading-relaxed` để dễ đọc hơn. 5. **Nút "Xem thêm câu trả lời":** * `mt-4 text-sm text-[#14B8A6] hover:text-teal-300 font-medium focus:outline-none`: Kiểu dáng cho nút, sử dụng màu teal sáng và có hiệu ứng hover. * JavaScript được sử dụng để ẩn/hiện các câu trả lời và nút này. Mặc định chỉ hiển thị 2 câu trả lời đầu tiên. 6. **JavaScript:** * Đoạn script nhỏ ở cuối sẽ duyệt qua từng `faq-item`. * Nó xác định số lượng câu trả lời hiển thị ban đầu (`answersToShowInitially = 2`). * Ẩn các câu trả lời vượt quá giới hạn này bằng class `hidden`. * Nếu tổng số câu trả lời ít hơn hoặc bằng giới hạn, nút "Xem thêm" sẽ bị ẩn. * Khi nhấn nút "Xem thêm", tất cả các câu trả lời ẩn sẽ được hiển thị và nút đó sẽ bị ẩn đi. **Cách sử dụng:** Bạn chỉ cần sao chép toàn bộ mã này vào một tệp `.html` và mở bằng trình duyệt. Đảm bảo rằng bạn đã thiết lập Tailwind CSS trong dự án của mình để các class này có tác dụng. Nếu bạn đang sử dụng CDN của Tailwind, nó sẽ hoạt động ngay. Hy vọng trang FAQ này đáp ứng được yêu cầu của bạn!