Đăng nhập Đăng ký

Chắc chắn rồi, đây là mã HTML sử dụng Tailwind CSS cho trang FAQ của bạn, với phong cách năng động và màu sắc chủ đạo bạn yêu cầu: **Giải thích các điểm chính và cải tiến:** 1. **Màu sắc chủ đạo:** * Nền chính của trang: `bg-gradient-to-br from-red-700 via-red-600 to-red-500` tạo hiệu ứng chuyển màu đỏ năng động. * Tiêu đề câu hỏi: `text-transparent bg-clip-text bg-gradient-to-r from-red-700 to-red-500` tạo chữ có màu gradient. * Tên người dùng và nút "Xem thêm": Sử dụng các sắc thái của màu đỏ (`text-red-600`, `border-red-500`). * Bong bóng chat: `bg-gradient-to-r from-red-50 to-orange-50` tạo hiệu ứng chuyển màu nhẹ nhàng, ấm áp. 2. **Bố cục thẻ câu hỏi (Question Card):** * `bg-white rounded-xl shadow-2xl p-4 sm:p-6`: Nền trắng, bo góc lớn, đổ bóng mạnh tạo cảm giác nổi bật. * `transform transition-all duration-300 hover:scale-105`: Hiệu ứng phóng to nhẹ khi hover, tăng tính tương tác. 3. **Tiêu đề câu hỏi:** * `text-xl sm:text-2xl font-bold ... mb-1 pb-2 border-b-2 border-red-200`: Cỡ chữ lớn, đậm, có đường kẻ chân màu đỏ nhạt để phân tách. 4. **Khu vực trả lời:** * **Avatar:** `w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover flex-shrink-0 border-2 border-red-200 shadow-md`: Hình tròn, 1:1, có viền đỏ nhạt và đổ bóng nhẹ. `flex-shrink-0` để avatar không bị co lại. * **Bong bóng chat:** * `flex-grow`: Để bong bóng chiếm phần không gian còn lại. * `p-3 rounded-lg shadow-md relative`: Padding, bo góc, đổ bóng. `relative` để định vị "đuôi" bong bóng. * **Đuôi bong bóng (Chat bubble tail):** Đây là một `div` nhỏ được xoay 45 độ và định vị để tạo hình tam giác giống đuôi của tin nhắn. Màu nền (`bg-red-50`) khớp với màu bắt đầu của gradient bong bóng. * **Tên người dùng:** `font-semibold text-red-600`. * **Nội dung trả lời:** `text-xs sm:text-sm text-gray-700 mt-1 leading-relaxed`. `leading-relaxed` để dễ đọc hơn. * Xử lý `` tag: `answer.content.replace(/`([^`]+)`/g, '$1')` tìm các đoạn trong dấu \` \` và bọc chúng bằng thẻ `` với style riêng. * **Thời gian đăng:** `text-xs text-gray-500 mt-2 text-right`. 5. **Nút "Xem thêm trả lời":** * `mt-4 text-sm font-semibold text-red-600 hover:text-red-800 ... py-2 px-4 rounded-md border border-red-500 hover:bg-red-50`: Thiết kế nút nổi bật, dễ nhấn. * JavaScript điều khiển việc ẩn/hiện các câu trả lời và thay đổi nội dung nút. 6. **JavaScript:** * Dữ liệu `faqData` được nhúng trực tiếp. * `formatVietnamTime`: Hàm định dạng lại thời gian cho dễ đọc theo kiểu Việt Nam. * Lặp qua `faqData` để tạo các thẻ câu hỏi và câu trả lời. * Mặc định chỉ hiển thị `INITIAL_ANSWERS_TO_SHOW` (2) câu trả lời đầu tiên. * Xử lý sự kiện click cho nút "Xem thêm" để hiện/ẩn các câu trả lời còn lại và cập nhật văn bản của nút. Lưu văn bản gốc của nút "Xem thêm" để khôi phục khi ẩn bớt. 7. **Tính di động (Mobile-friendliness):** * Sử dụng các lớp responsive của Tailwind (ví dụ `sm:text-4xl`, `sm:p-6`) để điều chỉnh kích thước và khoảng cách trên các màn hình lớn hơn. * Thiết kế tổng thể với padding và kích thước font phù hợp cho màn hình nhỏ. 8. **Thanh cuộn tùy chỉnh (Custom Scrollbar):** * Thêm một chút CSS trong thẻ `