{
  "title": "Dự án 7: Cửa Hàng Bánh Kem",
  "subtitle": "Học và rèn luyện kỹ năng Bài 13 môn Web",
  "description": [
    {
      "text": "Tiếp tục hành trình học lập trình, hôm nay chúng ta sẽ mở một 'Cửa Hàng Bánh Kem' thật dễ thương.",
      "bold": false
    },
    {
      "text": " Em hãy dùng các biến số, thẻ input để khách hàng có thể đặt bánh và hệ thống sẽ tự động in hóa đơn chào mừng 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 dự án: hocsinh01/{tên của em}/bai13-7.\n- Thêm file index.html, style.css và thư mục con assets (nhớ tải trước một vài ảnh bánh kem đẹp mắt vào đây nhé)."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Trong thẻ <head>, khai báo <base href=\"./assets/\"> và <link rel=\"stylesheet\" href=\"../style.css\">.\n- Tạo một div với class 'shop-khung' để chứa toàn bộ cửa hàng.\n- Dùng thẻ h1 ghi dòng chữ 'TIỆM BÁNH KEM VUI VẺ'.\n- Tạo một thẻ <input type=\"text\" id=\"loaibanh\" placeholder=\"Ví dụ: bánh dâu tây...\">.\n- Tạo một nhãn <label for=\"loaibanh\">'Hôm nay bạn muốn ăn bánh gì?'</label>.\n- Thêm nút bấm <button class=\"btn-dat\"> 'ĐẶT BÁNH NGAY' với sự kiện onclick tương tác."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Gắn lệnh vào onclick của nút bấm. Lấy giá trị trong ô nhập và nối chuỗi:\n  + onclick=\"let banh = loaibanh.value; alert('Bạn đã đặt thành công 1 chiếc ' + banh + ' siêu ngon! 🍰');\""
    },
    {
      "title": "Bước 4: Định dạng CSS cho đẹp mắt",
      "body": "- Trong style.css, chỉnh màu nền trang (body) là màu hồng nhạt '#fd79a8' để tạo cảm giác ngọt ngào.\n- Lớp '.shop-khung' có nền trắng '#ffffff', độ bo góc (border-radius) '15px' và khoảng cách margin '30px auto' để ra giữa màn hình.\n- Nút bấm thêm độ giãn cách (padding) '12px 25px' và cursor: pointer."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Hãy thêm một khu vực thực đơn, hiển thị hình ảnh và tên của ít nhất 5 loại bánh kem khác nhau (dùng thẻ <img> và các thẻ <h2> hoặc <p>).\n- Thiết kế lại font chữ và màu sắc chữ để tiệm bánh của em thu hút nhiều khách hàng hơn nhé!"
    }
  ],
  "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 Tiệm Bánh Kem -->\n<base href=\"/* thư mục cơ sở: ./assets/ */\">\n<link rel=\"stylesheet\" href=\"/* lùi 1 cấp: ../style.css */\">\n<div class=\"shop-khung\">\n  <h1>TIỆM BÁNH KEM VUI VẺ</h1>\n  <label for=\"loaibanh\">/* Nhãn: Hôm nay bạn muốn ăn bánh gì? */</label><br>\n  <input type=\"text\" id=\"loaibanh\" placeholder=\"/* Gợi ý: bánh dâu tây... */\">\n  <button class=\"btn-dat\" onclick=\"/* Khai báo let và dùng alert nối chuỗi */\">ĐẶT BÁNH NGAY</button>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS cho Tiệm Bánh Kem */\nbody {\n  background-color: /* màu nền hồng nhạt: #fd79a8 */;\n}\n.shop-khung {\n  background-color: /* màu trắng: #ffffff */;\n  border-radius: /* bo góc: 15px */;\n  margin: /* cách lề ngoài: 30px auto */;\n  padding: /* lề trong: 20px */;\n}\n.btn-dat {\n  padding: /* khoảng cách trong: 12px 25px */;\n  /* biến thành bàn tay khi trỏ vào */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Thẻ <label> khi có thuộc tính for='id-của-input' sẽ giúp người dùng chỉ cần click vào chữ là con trỏ chuột tự động nhảy vào ô nhập liệu đó! Rất tiện lợi đúng không nào?"
  }
}