/* =========================================================
   dongquan.net — Scratch-ĐQ
   Bộ style riêng cho giáo trình Scratch: khối lệnh mô phỏng
   đúng màu của Scratch 3.0 để trẻ nhìn vào là nhận ra ngay.
   Dùng chung cho mọi bài trong thư mục /scratch/
   ========================================================= */

:root{
  --sb-motion:    #4C97FF;
  --sb-looks:     #9966FF;
  --sb-sound:     #CF63CF;
  --sb-events:    #FFBF00;
  --sb-control:   #FFAB19;
  --sb-sensing:   #5CB1D6;
  --sb-operators: #59C059;
  --sb-variables: #FF8C1A;
  --sb-myblocks:  #FF6680;
}

/* ---------------- Khung bài học ---------------- */
.lesson{ max-width: 820px; margin: 0 auto; padding: 36px 24px 80px; }
.lesson h2{ margin-top: 44px; padding-top: 8px; border-top: 2px dashed var(--paper-line); }
.lesson h3{ margin-top: 28px; }
.lesson .back-link{ font-family: var(--font-mono); font-size: .85rem; color: var(--accent-dark); }
.lesson .lead{ font-size: 1.06rem; color: var(--ink-soft); }

/* Thẻ thông tin đầu bài */
.meta-strip{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
}
.meta-strip span{
  font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  background: #fff; border-radius: 999px; padding: 6px 14px;
  box-shadow: var(--shadow-card); color: var(--ink-soft);
}

/* Hộp mục tiêu / ghi chú / mẹo / cảnh báo */
.box{
  background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  border-left: 5px solid var(--ink);
  padding: 14px 18px; margin: 16px 0 24px;
}
.box p:last-child, .box ul:last-child, .box ol:last-child{ margin-bottom: 0; }
.box h4{ margin: 0 0 8px; font-size: 1.05rem; }
.box.goal{ border-left-color: var(--accent); }
.box.tip{ border-left-color: var(--stamp-green); }
.box.warn{ border-left-color: var(--stamp-red); }
.box.why{ border-left-color: var(--sb-motion); }
.box.fun{ border-left-color: var(--sb-looks); }
.box ul, .box ol{ margin: 0 0 0; padding-left: 20px; color: var(--ink-soft); }
.box li{ margin-bottom: 6px; }

/* Bảng */
.lesson table{
  width: 100%; border-collapse: collapse; margin: 14px 0 26px;
  background: #fff; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.lesson th, .lesson td{
  padding: 10px 14px; border-bottom: 1px solid var(--paper-line);
  text-align: left; vertical-align: top; font-size: .95rem;
}
.lesson th{ background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .78rem; }
.lesson td{ color: var(--ink-soft); }
.table-wrap{ overflow-x: auto; }

/* ---------------- Các bước làm ---------------- */
.step{
  background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 18px 58px; margin: 14px 0; position: relative;
}
.step::before{
  content: attr(data-step);
  position: absolute; left: 16px; top: 18px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-mono); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.step h4{ margin: 0 0 8px; font-size: 1.08rem; }
.step p{ margin: 0 0 10px; }
.step p:last-child{ margin-bottom: 0; }
.step .sb-stack{ margin: 10px 0 4px; }

/* ---------------- KHỐI LỆNH SCRATCH ---------------- */
.sb-palette-motion    { --c: var(--sb-motion); }
.sb-palette-looks     { --c: var(--sb-looks); }
.sb-palette-sound     { --c: var(--sb-sound); }
.sb-palette-events    { --c: var(--sb-events); }
.sb-palette-control   { --c: var(--sb-control); }
.sb-palette-sensing   { --c: var(--sb-sensing); }
.sb-palette-operators { --c: var(--sb-operators); }
.sb-palette-variables { --c: var(--sb-variables); }
.sb-palette-myblocks  { --c: var(--sb-myblocks); }

/* Chồng khối theo chiều dọc */
.sb-stack{
  display: inline-block; text-align: left;
  font-family: var(--font-body);
  margin: 4px 0 8px; max-width: 100%;
}

/* Một khối lệnh thường (stack block) */
.sb{
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 9px 14px; margin-bottom: 3px;
  border-radius: 5px;
  background: var(--c);
  color: #fff; font-weight: 600; font-size: .92rem; line-height: 1.35;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
/* Mấu lồi dưới đáy khối — dấu hiệu "khối này ghép tiếp được" */
.sb::after{
  content: ""; position: absolute; left: 14px; bottom: -3px;
  width: 22px; height: 4px; border-radius: 0 0 4px 4px;
  background: var(--c);
}
.sb:last-child::after{ content: none; }

/* Khối mũ — bắt đầu một kịch bản */
.sb-hat{ border-radius: 20px 20px 5px 5px; padding-top: 15px; }

/* Khối kết thúc (dừng tất cả) — không có mấu nối */
.sb-cap::after{ content: none; }

/* Ô nhập số / chữ (màu trắng) */
.sb-inp{
  background: #fff; color: var(--ink);
  border-radius: 999px; padding: 2px 11px;
  font-size: .85rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
/* Ô chọn từ danh sách (dropdown) */
.sb-drop{
  background: rgba(0,0,0,.17); color: #fff;
  border-radius: 999px; padding: 2px 11px;
  font-size: .85rem; font-weight: 600;
}
.sb-drop::after{ content: " ▾"; opacity: .75; }
/* Ô báo cáo giá trị (biến, toán tử) — hình bầu dục */
.sb-ov{
  background: var(--c); color: #fff;
  border-radius: 999px; padding: 2px 11px;
  font-size: .85rem; font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
/* Ô điều kiện đúng/sai — hình lục giác */
.sb-hex{
  background: var(--c); color: #fff;
  padding: 3px 16px; font-size: .85rem; font-weight: 600;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
/* Màu mẫu trong khối "chạm màu" */
.sb-swatch{
  display: inline-block; width: 18px; height: 18px;
  border-radius: 4px; border: 2px solid #fff; vertical-align: middle;
}

/* Khối chữ C — bọc các khối khác bên trong (lặp, nếu…thì) */
.sb-c{ display: block; margin-bottom: 3px; }
.sb-c > .sb-c-head{ border-radius: 5px 5px 0 0; margin-bottom: 0; }
.sb-c > .sb-c-head::after{ content: none; }
.sb-c > .sb-c-body{
  border-left: 16px solid var(--c);
  padding: 5px 0 5px 10px;
  min-height: 18px;
}
.sb-c > .sb-c-foot{
  position: relative; height: 17px; background: var(--c);
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.sb-c > .sb-c-foot::after{
  content: ""; position: absolute; left: 14px; bottom: -3px;
  width: 22px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c);
}
.sb-c.sb-c-last > .sb-c-foot::after,
.sb-c:last-child > .sb-c-foot::after{ content: none; }
/* Phần "nếu không" của khối nếu–thì–nếu không */
.sb-c > .sb-c-else{
  position: relative; background: var(--c);
  padding: 7px 14px; color: #fff; font-weight: 600; font-size: .92rem;
}

/* ---------------- Sơ đồ đối chứng cuối bài ---------------- */
.diagram{
  background: linear-gradient(180deg, #FFFDF6 0%, #FFF8E8 100%);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 22px 26px; margin: 18px 0 28px;
}
.diagram > h3:first-child{ margin-top: 0; }
.diagram-grid{
  display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 10px;
}
@media (min-width: 760px){
  .diagram-grid.two{ grid-template-columns: 1fr 1fr; align-items: start; }
}
.script-card{
  background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: 14px 16px 18px;
  overflow-x: auto;
}
.script-card .who{
  font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-dark); margin: 0 0 10px;
  display: flex; align-items: center; gap: 7px;
}
.script-card .who .dot{
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
}

/* Chú giải màu khối */
.legend{ display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.legend span{
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: #fff; border-radius: 999px; padding: 4px 11px;
}

/* Bảng tự kiểm tra */
.checklist{ list-style: none; margin: 10px 0 0; padding: 0; }
.checklist li{
  background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 10px 14px 10px 40px; margin-bottom: 8px;
  position: relative; color: var(--ink-soft); font-size: .95rem;
}
.checklist li::before{
  content: "☐"; position: absolute; left: 14px; top: 8px;
  font-size: 1.1rem; color: var(--accent-dark);
}

/* Mô phỏng sân khấu (stage) 4:3 để trẻ so vị trí nhân vật */
.stage-mock{
  position: relative; width: 100%; max-width: 440px;
  aspect-ratio: 4 / 3; margin: 12px 0 8px;
  background: #fff; border: 3px solid var(--ink);
  border-radius: var(--radius-sm); overflow: hidden;
}
.stage-mock .axis-x, .stage-mock .axis-y{ position: absolute; background: var(--paper-line); }
.stage-mock .axis-x{ left: 0; right: 0; top: 50%; height: 1px; }
.stage-mock .axis-y{ top: 0; bottom: 0; left: 50%; width: 1px; }
.stage-mock .pin{
  position: absolute; transform: translate(-50%, -50%);
  font-size: 1.9rem; line-height: 1; text-align: center;
}
.stage-mock .pin small{
  display: block; font-family: var(--font-mono); font-size: .58rem;
  font-weight: 700; color: var(--ink-soft); margin-top: 2px;
}
.stage-caption{ font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); margin: 0 0 18px; }

/* Thử thách thêm */
.challenge{
  background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: 16px 20px; margin: 14px 0 24px;
  border-left: 5px solid var(--sb-myblocks);
}
.challenge ol{ margin: 0; padding-left: 20px; color: var(--ink-soft); }
.challenge li{ margin-bottom: 8px; }
.challenge details{ margin-top: 12px; font-size: .9rem; }
.challenge summary{ cursor: pointer; color: var(--accent-dark); font-weight: 700; font-family: var(--font-mono); font-size: .85rem; }

/* Điều hướng bài trước / bài sau */
.lesson-nav{
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 40px; font-family: var(--font-mono); font-size: .85rem; font-weight: 600;
}
.lesson-nav a{
  background: #fff; border-radius: 999px; padding: 10px 18px;
  box-shadow: var(--shadow-card); color: var(--accent-dark);
}
.lesson-nav span{ opacity: .35; padding: 10px 18px; }

/* Lá cờ xanh của Scratch */
.sb-flag{ color: #4CBF56; text-shadow: 0 0 1px rgba(0,0,0,.45); font-size: 1.05em; }

/* Trên màn hình rộng, sơ đồ đối chứng được nới rộng ra ngoài cột chữ
   để hai cột kịch bản không bị bóp khiến khối lệnh xuống dòng lung tung. */
@media (min-width: 980px){
  .diagram{
    width: min(1080px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* An toàn trên màn hình hẹp: khối lệnh lồng nhiều lớp có thể rộng hơn
   màn điện thoại — cho phép cuộn ngang tại chỗ thay vì đẩy lệch cả trang. */
.step, .lesson > .sb-stack{ overflow-x: auto; }
body{ overflow-x: hidden; }