{
  "title": "Dự án 6: Trạm Không Gian Alpha",
  "subtitle": "Học và rèn luyện kỹ năng Bài 13 môn Web",
  "description": [
    {
      "text": "Chào mừng các nhà du hành vũ trụ nhí! Hôm nay chúng ta sẽ khởi động 'Trạm Không Gian Alpha'.",
      "bold": false
    },
    {
      "text": " Em hãy dùng kiến thức về biến (let), ô nhập chữ (input) và tính năng gộp chuỗi (+) để gửi thông điệp kết nối nhé!",
      "bold": false
    }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "Bài học chính: Bài 13",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Biến số: let, const",
    "Ô nhập liệu: input text, label",
    "Độ giãn cách: margin, padding"
  ],
  "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 máy tính, tạo thư mục dự án của em: hocsinh01/{tên của em}/bai13-6.\n- Tạo các 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 hành tinh, phi thuyền)."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Khai báo thẻ đường dẫn cơ sở: <base href=\"./assets/\"> trong thẻ <head> và kết nối file CSS ngoài lùi cấp: <link rel=\"stylesheet\" href=\"../style.css\">.\n- Tạo một thẻ div lớp 'container' bao bọc phần thân trạm.\n- Thêm thẻ tiêu đề chính <h1> với nội dung 'TRẠM KHÔNG GIAN ALPHA'.\n- Tạo thẻ <input type=\"text\" id=\"phihanhgia\" placeholder=\"Nhập tên của bạn...\">.\n- Tạo thẻ <label for=\"phihanhgia\"> với nội dung 'Tên Phi Hành Gia:' để chú thích.\n- Tạo nút bấm <button class=\"nut-bam\"> có nhãn 'KẾT NỐI' và gán sự kiện onclick để chạy JavaScript."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Bên trong thuộc tính onclick của nút bấm, viết lệnh JavaScript:\n  + onclick=\"let ten = phihanhgia.value; alert('Trạm Alpha xin chào phi hành gia ' + ten + ' 🚀!');\""
    },
    {
      "title": "Bước 4: Định dạng CSS không gian",
      "body": "- Mở file style.css để thiết lập màu nền vũ trụ cho body là '#2d3436' (màu xám tối) và chữ màu '#dfe6e9'.\n- Định dạng lớp '.container': căn giữa, lề trong (padding) '20px' và đường viền '3px solid #74b9ff'.\n- Đừng quên thêm cursor: pointer cho nút bấm để báo hiệu click chuột nhé."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Hãy thêm vào trang web ít nhất 5 hành tinh khác trong Hệ Mặt Trời bằng các thẻ <img> và thiết lập kích cỡ hợp lý.\n- Thiết kế lại nút bấm với màu sắc và viền nổi bật để giống một nút điều khiển thực sự trên trạm vũ trụ."
    }
  ],
  "code_samples_title": "Gợi ý Code mẫu",
  "code_samples_desc": "Học sinh hãy tự hoàn thiện code dựa trên các gợi ý dưới đây (không copy paste):",
  "code_samples": [
    {
      "title": "HTML Gợi ý",
      "type": "html",
      "code": "<!-- Giao diện Trạm Không Gian Alpha -->\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>TRẠM KHÔNG GIAN ALPHA</h1>\n  <label for=\"phihanhgia\">/* Tên Phi Hành Gia: */</label><br>\n  <input type=\"text\" id=\"phihanhgia\" placeholder=\"/* Nhập tên của bạn... */\">\n  <button class=\"nut-bam\" onclick=\"/* JS code lấy biến và thông báo */\">KẾT NỐI</button>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS cho Trạm Vũ Trụ */\nbody {\n  background-color: /* màu nền: #2d3436 */;\n  color: /* màu chữ: #dfe6e9 */;\n}\n.container {\n  padding: /* lề trong: 20px */;\n  border: /* viền: 3px solid #74b9ff */;\n  /* đổ bóng để giao diện nổi bật */\n}\n.nut-bam {\n  /* nền nút: #0984e3 */\n  /* con trỏ chuột: bàn tay chỉ */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Trong JavaScript, khoảng trắng cũng là một ký tự đấy nhé. Khi nối chuỗi, hãy nhớ để khoảng trắng trước và sau tên biến để chữ không bị dính vào nhau (ví dụ: 'Xin chào ' + ten)!"
  }
}