{
  "title": "Dự án 9: Bảng Tên Sở Thú Nhí",
  "title_sub": "",
  "subtitle": "Học và rèn luyện kỹ năng Bài 13 môn Web",
  "description": [
    {
      "text": "Các nhà thám hiểm động vật ơi! Sở thú đang cần chúng ta giúp tạo ra một bảng cấp phát vé tham quan tự động.",
      "bold": false
    },
    {
      "text": " Em hãy dùng biến let, ô nhập liệu input và nút bấm button để giúp khách hàng nhận vé đi xem con vật họ yêu thích 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": "- Tạo thư mục: hocsinh01/{tên của em}/bai13-9.\n- Tạo index.html, style.css và 1 thư mục assets chứa ảnh các con vật đáng yêu."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Thêm thẻ <base href=\"./assets/\"> và <link rel=\"stylesheet\" href=\"../style.css\">.\n- Tạo một div class 'khu-vuc-ve' làm khung bên ngoài.\n- Viết tiêu đề h1: 'MÁY PHÁT VÉ SỞ THÚ'.\n- Tạo một nhãn <label for=\"convat\">'Em muốn xem con vật nào?'</label>.\n- Thêm ô <input type=\"text\" id=\"convat\" placeholder=\"Tên con vật...\">.\n- Gắn thêm một <button class=\"nut-lay-ve\"> 'LẤY VÉ NGAY' kèm sự kiện onclick."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Trong sự kiện onclick, em dùng biến để lưu tên con vật người dùng nhập vào:\n  + onclick=\"let ten = convat.value; alert('Tít tít! Vé xem chuồng ' + ten + ' đã được in ra! 🐒');\""
    },
    {
      "title": "Bước 4: Định dạng CSS sinh động",
      "body": "- Sang file style.css, tô màu nền cho body là '#ffeaa7' (màu vàng nhạt mặt trời).\n- Thêm viền xanh lá cây (3px solid #00b894) cho nút bấm '.nut-lay-ve' và đặt padding '15px 30px' cho nút to ra dễ bấm.\n- Chỉnh khoảng cách lề (margin) của ô input để không bị sát vào nút bấm."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Hãy thêm vào trang web thông tin và hình ảnh của ít nhất 5 loài động vật khác nhau (tổng cộng 7 loài) để khách có thể tham khảo trước khi chọn.\n- Áp dụng các hiệu ứng bo góc và viền màu sắc khác nhau cho từng bức ảnh con vật để sở thú thêm phần sinh động!"
    }
  ],
  "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 Sở Thú -->\n<base href=\"/* Thư mục tài nguyên: ./assets/ */\">\n<link rel=\"stylesheet\" href=\"/* Nối file: ../style.css */\">\n<div class=\"khu-vuc-ve\">\n  <h1>MÁY PHÁT VÉ SỞ THÚ</h1>\n  <label for=\"convat\">/* Nhãn mô tả */</label>\n  <input type=\"text\" id=\"convat\" placeholder=\"/* Tên con vật... */\">\n  <button class=\"nut-lay-ve\" onclick=\"/* Khai báo biến let và gọi lệnh alert(...) */\">LẤY VÉ NGAY</button>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS Cho Sở Thú */\nbody {\n  background-color: /* màu nền: #ffeaa7 */;\n}\n.nut-lay-ve {\n  border: /* viền: 3px solid #00b894 */;\n  padding: /* lề trong: 15px 30px */;\n  margin-left: /* cách lề trái: 10px */;\n  cursor: /* bàn tay: pointer */;\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Thuộc tính margin-left giúp đẩy phần tử cách ra một khoảng so với phần tử bên trái nó. Em thử thay đổi số px để xem nút bấm di chuyển thế nào nhé!"
  }
}