{
  "title": "Dự án: Trạm Chỉ Huy Tàu Vũ Trụ NASA",
  "subtitle": "Thiết lập điều hướng buồng lái, hệ thống liên kết cảnh báo tình trạng và CSS Links mô phỏng tín hiệu",
  "description": [
    {
      "text": "Chào các phi hành gia nhí! Trong nhiệm vụ vũ trụ lần này, chúng ta sẽ lập trình trang giao diện ",
      "bold": false
    },
    {
      "text": "Bảng Điều Khiển Tàu Vũ Trụ Apollo",
      "bold": true
    },
    {
      "text": " để quản lý các khu vực cabin. Các em sẽ sử dụng thẻ nav để tạo bảng điều khiển nhảy nhanh đến các động cơ, sử dụng table chia cột thông số kỹ thuật, và tùy biến định dạng các nút nhấn liên kết phát tín hiệu nhấp nháy theo từng trạng thái bấm.",
      "bold": false
    }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "HTML mới: nav, a (href, target, id), base",
    "HTML cũ: div, h2, p, img, table, tr, td, th, tbody, span, b, i",
    "CSS mới: a:link, a:visited, a:hover, a:active",
    "CSS cũ: color, background-color, font-family, font-size, font-weight, padding, border, border-radius, display, text-decoration",
    "Khái niệm: Đường dẫn Cơ sở (Base Link) & Điều khiển Cabin"
  ],
  "steps_title": "Các bước thực hiện chi tiết",
  "steps": [
    {
      "title": "Bước 1: Khởi tạo buồng lái vũ trụ",
      "body": "- Tạo thư mục hocsinh01/{tên của em}/bai11-8 trên ổ đĩa Z.\n- Trong thư mục này, tạo 2 file: index.html, style.css.\n- Bắt buộc tạo một thư mục con tên là assets để chứa các hình ảnh buồng lái tàu và hệ thống động cơ.\n- Nối file CSS style.css tương đối đi lên một cấp thư mục: <link rel=\"stylesheet\" href=\"../style.css\"> do base URL sẽ chỉ vào assets.\n- Thêm thẻ <base href=\"./assets/\"> trong head để nạp tài nguyên hình ảnh tự động từ thư mục assets."
    },
    {
      "title": "Bước 2: Lập trình Bảng Điều Khiển Buồng Lái (nav)",
      "body": "- Thêm thẻ <nav class=\"cockpit-control\"> ở phần đầu trang body.\n- Thêm các liên kết a dẫn đến các khu vực máy tàu bằng liên kết trong. Đừng quên thêm ../index.html trước dấu thăng ID để tránh lỗi thẻ base tìm sai đường dẫn. Ví dụ: Động cơ chính (link tới ../index.html#dongco), Khoang sinh hoạt (link tới ../index.html#phonglife).\n- Thêm liên kết tuyệt đối dẫn đến trang theo dõi trực tuyến của NASA, mở ở tab mới bằng target=\"_blank\"."
    },
    {
      "title": "Bước 3: Bố cục thông số máy bằng Bảng",
      "body": "- Tạo các khối div có id tương ứng (id=\"dongco\", id=\"phonglife\").\n- Trong mỗi div, sử dụng table để chia làm 2 cột:\n  + Cột trái (td): Bảng thông số hệ thống, mức độ nhiên liệu, áp suất oxy. Dùng b, i, span để bôi đậm cảnh báo.\n  + Cột phải (td): Chèn ảnh động cơ hoặc khoang tàu bằng img có style=\"width: 180px;\" để đồng bộ giao diện buồng lái."
    },
    {
      "title": "Bước 4: Định dạng CSS Links phát tín hiệu",
      "body": "- Trong file style.css (định dạng External), định dạng cho thẻ a:\n  + a:link, a:visited: Đổi thành màu xanh dương phát sáng #00d2ff và bỏ gạch chân.\n  + a:hover: Chuyển màu vàng chói #ffeb3b, tăng cỡ chữ lên 18px và in đậm font-weight: bold để giả lập trạng thái sẵn sàng kích hoạt động cơ.\n  + a:active: Chuyển sang màu đỏ cảnh báo nguy hiểm #ff3838 khi nhấn giữ chuột."
    },
    {
      "title": "Bước 5: Sáng Tạo và Hoàn Thiện",
      "body": "- Đặt phông nền body màu đen huyền bí #0b0c10 hoặc xám tối để mang lại cảm giác buồng lái tàu trong không gian.\n- Thiết lập font-family là nhóm không chân thanh mảnh (ví dụ: 'Courier New' hoặc monospace) trông giống màn hình máy tính NASA.\n- Yêu cầu Sáng tạo bắt buộc: Lập trình thêm khu vực thứ 3 là Khoang Khoa Học (id=\"khoang-khoahoc\") kèm bảng dữ liệu nghiên cứu địa hình sao hỏa, ảnh thiết bị thăm dò trong thư mục assets và link tham khảo về Sao Hỏa."
    }
  ],
  "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 (Thanh điều khiển cockpit và thông tin động cơ)",
      "type": "html",
      "code": "<!-- Bảng điều khiển bay -->\n<nav class=\"cockpit-control\">\n  <a href=\"../index.html#dongco\">Hệ Thống Động Cơ</a>\n  <a href=\"../index.html#phonglife\">Khoang Sinh Hoạt</a>\n  <a href=\"https://www.nasa.gov\" target=\"_blank\">Trực Tuyến NASA</a>\n</nav>\n\n<!-- Khối Động cơ chính -->\n<div id=\"dongco\">\n  <h2>[Hệ Thống Động Cơ Đẩy]</h2>\n  <table>\n    <tr>\n      <td>\n        <p>Tình trạng: <b>Hoạt động tốt</b>. Công suất nhiên liệu hydro lỏng đạt <span>98%</span>. Hệ thống đẩy ổn định.</p>\n      </td>\n      <td>\n        <img src=\"engine.jpg\" style=\"width: 180px;\">\n      </td>\n    </tr>\n  </table>\n</div>"
    },
    {
      "title": "CSS (Giao diện vũ trụ tối giản và hiệu ứng phát sáng)",
      "type": "css",
      "code": "/* Giao diện vũ trụ tối giản */\nbody {\n  background-color: #0b0c10;\n  color: #c5c6c7;\n  font-family: 'Courier New', Courier, monospace;\n}\n\n/* Thiết lập các nút bấm phát sáng */\na:link, a:visited {\n  color: #00d2ff;\n  text-decoration: none;\n}\n\na:hover {\n  color: #ffeb3b;\n  font-size: 18px;\n  font-weight: bold;\n}\n\na:active {\n  color: #ff3838;\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Khi sử dụng nền màu tối, các liên kết phát sáng có độ tương phản cao như xanh cyan, xanh lục nhạt hoặc vàng chói sẽ giúp phi hành gia dễ quan sát hơn và tạo phong cách khoa học viễn tưởng siêu ngầu!"
  }
}