{
  "title": "Dự án 10: Nông Trại Vui Vẻ",
  "subtitle": "Học và rèn luyện kỹ năng Bài 13 môn Web",
  "description": [
    {
      "text": "Trở thành một bác nông dân công nghệ, em sẽ xây dựng 'Hệ Thống Gọi Tên Thú Cưng' cho trang trại của mình.",
      "bold": false
    },
    {
      "text": " Ứng dụng này cần sử dụng biến (variable), ô nhập (input text) để lấy tên thú cưng và ra lệnh cho chúng ăn.",
      "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-10.\n- Tạo index.html, style.css và thư mục assets. Em hãy tải trước một số hình ảnh con vật trong nông trại (gà, bò, lợn...) vào thư mục assets này nhé."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Khai báo <base href=\"./assets/\"> và <link rel=\"stylesheet\" href=\"../style.css\"> ở thẻ <head>.\n- Thêm 1 thẻ div có class 'nong-trai' chứa các thành phần bên trong.\n- Tạo tiêu đề <h1> 'HỆ THỐNG GỌI THÚ CƯNG'.\n- Dùng thẻ <label for=\"tenthu\">'Gọi tên bạn thú cưng nào:'</label> để hướng dẫn người dùng.\n- Tạo <input type=\"text\" id=\"tenthu\" placeholder=\"Nhập tên (ví dụ: bò sữa)...\">.\n- Thêm <button class=\"nut-goi\"> 'GỌI ĂN CỎ' kèm tính năng bấm chuột onclick."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Trong sự kiện onclick, tạo biến để lấy tên thú cưng và in ra bảng thông báo:\n  + onclick=\"let ten = tenthu.value; alert('Bạn ' + ten + ' đang chạy tới ăn cỏ rồi! 🐄');\""
    },
    {
      "title": "Bước 4: Định dạng CSS mộc mạc",
      "body": "- Ở style.css, chỉnh body có nền màu '#55efc4' (màu xanh lá cây đồng cỏ).\n- '.nong-trai' có viền (border) '5px dashed #00b894', bo góc (border-radius) '20px' và padding '30px'.\n- Nút bấm thêm viền màu nâu '#d63031' và margin-top '15px' để không dính vào ô nhập."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Em hãy mở rộng nông trại bằng cách trang trí thêm hình ảnh của ít nhất 5 loài vật nuôi khác nhau với màu sắc riêng biệt (tổng cộng ít nhất 7 loài).\n- Tạo cho mỗi loài vật nuôi một khu vực chuồng (dùng thẻ <div>) và định dạng khung CSS với màu sắc khác nhau để dễ nhận biết."
    }
  ],
  "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 Nông Trại Vui Vẻ -->\n<base href=\"/* Cơ sở: ./assets/ */\">\n<link rel=\"stylesheet\" href=\"/* Nối file CSS: ../style.css */\">\n<div class=\"nong-trai\">\n  <h1>HỆ THỐNG GỌI THÚ CƯNG</h1>\n  <label for=\"tenthu\">/* Nhãn: Gọi tên bạn thú cưng nào: */</label>\n  <input type=\"text\" id=\"tenthu\" placeholder=\"/* ... */\">\n  <button class=\"nut-goi\" onclick=\"/* let ten = ...; alert(...) */\">GỌI ĂN CỎ</button>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS Nông Trại */\nbody {\n  background-color: /* màu nền đồng cỏ: #55efc4 */;\n}\n.nong-trai {\n  border: /* viền đứt màu xanh: 5px dashed #00b894 */;\n  border-radius: /* bo góc: 20px */;\n  padding: /* lề trong: 30px */;\n}\n.nut-goi {\n  border: /* viền nút màu nâu: 2px solid #d63031 */;\n  margin-top: /* lề trên: 15px */;\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Khi sử dụng border-radius kết hợp với viền nét đứt (dashed), khung viền của em sẽ trông mềm mại và giống một chiếc hàng rào gỗ trong nông trại hơn rất nhiều!"
  }
}