{
  "title": "Dự án 4: Thẻ Lựa Chọn Nhân Vật Game",
  "subtitle": "Học và rèn luyện kỹ năng Bài 21 môn Web",
  "description": [
    {
      "text": "Chào mừng các em học sinh lớp 4! Trong dự án 4 này, chúng ta sẽ lập trình ứng dụng 'Thẻ Lựa Chọn Nhân Vật Game'.",
      "bold": false
    },
    {
      "text": " Em sẽ thực hành và sử dụng các kiến thức đã học ở Bài 21 kết hợp với các kiến thức từ các bài trước để xây dựng giao diện tương tác sinh động.",
      "bold": false
    }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "Bài học chính: Bài 21",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Bố cục: Flexbox",
    "Căn chỉnh: justify-content, gap",
    "Thẻ ngữ nghĩa: header, main, footer"
  ],
  "steps_title": "Các bước thực hiện chi tiết",
  "steps": [
    {
      "title": "Bước 1: Khởi tạo thư mục dự án",
      "body": "- Trên ổ đĩa Z, tạo thư mục dự án của em: hocsinh01/{tên của em}/bai21-4.\n- Tạo file: index.html, style.css, và tạo một thư mục con tên là assets để chứa các tệp tài nguyên hình ảnh, âm thanh."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Trong thẻ <head>, khai báo thẻ đường dẫn cơ sở: <base href=\"./assets/\"> và kết nối file CSS ngoài bằng đường dẫn tương đối lùi cấp: <link rel=\"stylesheet\" href=\"../style.css\">.\n- Tạo một thẻ div lớp 'container' bao bọc toàn bộ nội dung.\n- Thêm thẻ tiêu đề chính <h1> với nội dung 'THẺ LỰA CHỌN NHÂN VẬT GAME 🌟'."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Tự lập trình tương tác JavaScript trong thẻ <script> (học sinh tự xây dựng, không có code mẫu):\n  + Tự thiết kế các nút chọn nhân vật (ví dụ: Chiến Binh, Pháp Sư, Xạ Thủ) bên trong các thẻ bố cục Flexbox.\n  + Viết các hàm JavaScript hoặc lắng nghe sự kiện onclick trên từng nút bấm nhân vật.\n  + Khi người dùng bấm chọn một nhân vật: Lập trình để đổi màu viền của thẻ nhân vật đó, đồng thời hiển thị thông tin chỉ số (sức mạnh, tốc độ) ra một khung thông báo chi tiết bên dưới."
    },
    {
      "title": "Bước 4: Định dạng CSS cho đẹp mắt",
      "body": "- Mở file style.css để thiết lập màu nền cho body là '#2f3542'.\n- Định dạng lớp '.container': chiều rộng tối đa '600px', viền '3px solid #ffa502' và đổ bóng đẹp mắt.\n- Thiết lập cursor: pointer cho tất cả phần tử tương tác click chuột được."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Hãy bổ sung ít nhất 5 thẻ phòng hoặc thẻ dịch vụ khác vào trang chủ, sử dụng Flexbox để căn chỉnh tự động xuống dòng và dãn cách đều đặn khi màn hình thay đổi.\n- Định dạng màu sắc và hình nền mang đậm phong cách cá nhân độc đáo của riêng em để hoàn thành bài tập."
    }
  ],
  "code_samples_title": "Gợi ý Code mẫu",
  "code_samples_desc": "Đây là bài tập rèn luyện tư duy độc lập về nhà, học sinh hãy tự suy nghĩ và tự viết toàn bộ code HTML/CSS/JavaScript (không có code mẫu có sẵn).",
  "code_samples": [
    {
      "title": "HTML Gợi ý",
      "type": "html",
      "code": "<!-- Giao diện dự án Thẻ Lựa Chọn Nhân Vật Game -->\n<base href=\"/* base href assets */\">\n<link rel=\"stylesheet\" href=\"/* đường dẫn lùi cấp ra style.css */\">\n<div class=\"container\">\n  <h1>THẺ LỰA CHỌN NHÂN VẬT GAME 🌟</h1>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS Cơ bản cho dự án */\nbody {\n  background-color: /* màu nền: #2f3542 */;\n}\n.container {\n  max-width: /* độ rộng container: 600px */;\n  border: /* viền: 3px solid #ffa502 */;\n  /* bo góc, đổ bóng container */\n}\n.nut-bam, .btn, .btn-nhac, .btn-mo, .btn-dong, .btn-tinh, .btn-them, .btn-play, .btn-pause, .btn-check, .btn-kick, .btn-go {\n  /* màu nền nút bấm */\n  /* con trỏ chuột: bàn tay chỉ */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Kích hoạt Flexbox bằng display: flex trên thẻ cha giúp dàn hàng ngang các thẻ con cực kỳ dễ dàng mà không cần tính toán tọa độ phức tạp."
  }
}