/* ============ CẢNH NỀN CHO 20 MÀN CHƠI GỐC (12/10/2026) ============
   Chị Tươi thấy các màn còn lặp giao diện (thẻ trắng trên nền vũ trụ). Mỗi màn gốc giờ có một "cảnh" riêng bao quanh nội dung.
   Học từ / Nói cùng ba mẹ / Tập tô chữ có ở mọi trang nên có 6 cảnh, đổi theo bảng màu body.th-0 … th-5.
   Luật: chỉ thêm selector .stage.st-<mã>; trang trí nằm sau nội dung (z-index:-1) và không bắt chạm (pointer-events:none);
   không ảnh ngoài, không phông ngoài (hình vẽ bằng gradient + SVG tự vẽ + emoji); không transform lên khung chứa canvas tô chữ.
   Biến của cảnh: --sc-ink chữ chính · --sc-ink2 chữ phụ · --sc-hi chữ nhấn · --sc-ok chữ đúng · --sc-sign nền biển tên câu hỏi · --sc-ts bóng chữ.
   Cảnh tối dùng mặc định (chữ trắng); cảnh sáng đặt lại biến sang chữ xanh đậm. */

/* ---------- khung chung ---------- */
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly){
  --sc-ink:#fff;--sc-ink2:#E6E8FF;--sc-hi:#FFE27A;--sc-ok:#7CF0A8;--sc-sign:rgba(16,18,60,.64);--sc-ts:0 2px 4px rgba(0,0,0,.45);
  position:relative;isolation:isolate;overflow:hidden;
  margin:6px -4px 0;padding:12px 10px 56px;border-radius:26px;min-height:calc(100vh - 215px);
  border:4px solid rgba(255,255,255,.6);
  box-shadow:0 6px 0 rgba(0,0,0,.22),0 12px 26px rgba(0,0,0,.28);
  background-color:#3B3F96}
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly)::before,
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;line-height:1;font-size:30px;white-space:pre;
  background-repeat:no-repeat;background-size:contain}
/* biển tên câu hỏi: co theo chữ, đặt giữa, có nền riêng nên đọc được trên mọi cảnh */
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) > .ask{
  width:fit-content;max-width:100%;margin:0 auto 12px;padding:6px 14px;border-radius:16px;
  background:var(--sc-sign);color:var(--sc-ink);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) > .ask small{color:var(--sc-ink2)}
/* chữ nằm thẳng trên cảnh (không có thẻ trắng phía sau) */
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) :is(.stage > .word,.stage > .sent,.stage > .catchinfo,.beatnow .beatword,.callbox .callnow,.stage > .chips > span,.win > p){
  color:var(--sc-ink);text-shadow:var(--sc-ts)}
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) :is(.stage > .vi,.stage > .hint){color:var(--sc-ink2);text-shadow:var(--sc-ts)}
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) :is(.stage > .ex,.ask .big-l,.callnow .b){color:var(--sc-hi);text-shadow:var(--sc-ts)}
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) > .sent .blank{color:var(--sc-ok);border-bottom-color:var(--sc-hi)}
.stage:is(.st-learn,.st-listen,.st-mystery,.st-missing,.st-sentence,.st-binocular,.st-memory,.st-beat,.st-talk,.st-write,.st-reveal,.st-whatmissing,.st-match,.st-puzzle,.st-spell,.st-catch,.st-bingo,.st-wheel,.st-race,.st-fly) .win > h2{text-shadow:0 2px 0 #fff,0 0 8px rgba(255,255,255,.8)}

/* ==================== 17 MÀN CÓ CẢNH CỐ ĐỊNH ==================== */

/* 👂 Nghe và chọn hình: khu rừng sáng, thỏ ló tai sau bụi cỏ */
.stage.st-listen{--sc-ink:#1F3B2A;--sc-ink2:#3C5A45;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.85);--sc-ts:none;
  border-color:#B7EBA6;
  background:
    linear-gradient(transparent calc(100% - 16px),#6CC24A 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect x='24' y='50' width='8' height='30' fill='%237A5230'/%3E%3Ccircle cx='28' cy='40' r='22' fill='%234CAF50'/%3E%3Ccircle cx='16' cy='50' r='13' fill='%2343A047'/%3E%3Crect x='84' y='56' width='7' height='24' fill='%237A5230'/%3E%3Ccircle cx='88' cy='48' r='18' fill='%2366BB6A'/%3E%3Ccircle cx='101' cy='57' r='11' fill='%2357B05D'/%3E%3C/svg%3E") 0 calc(100% - 10px)/120px 80px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect x='54' y='44' width='9' height='36' fill='%23946B45'/%3E%3Ccircle cx='58' cy='34' r='26' fill='%2397D88A'/%3E%3C/svg%3E") 50px calc(100% - 22px)/150px 100px repeat-x,
    linear-gradient(115deg,transparent 20%,rgba(255,255,255,.4) 20% 26%,transparent 26% 40%,rgba(255,255,255,.3) 40% 44%,transparent 44%),
    linear-gradient(180deg,#E6FAE0 0,#D2F2C6 55%,#B6E6A3 100%)}
.stage.st-listen::before{right:14px;bottom:2px;width:80px;height:64px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='64'%3E%3Cg stroke='%23C9C3DE' stroke-width='2' fill='%23fff'%3E%3Cellipse cx='28' cy='24' rx='9' ry='23' transform='rotate(-12 28 24)'/%3E%3Cellipse cx='52' cy='24' rx='9' ry='23' transform='rotate(12 52 24)'/%3E%3C/g%3E%3Cg fill='%23FFB3CC'%3E%3Cellipse cx='28' cy='27' rx='4' ry='15' transform='rotate(-12 28 27)'/%3E%3Cellipse cx='52' cy='27' rx='4' ry='15' transform='rotate(12 52 27)'/%3E%3C/g%3E%3Cellipse cx='40' cy='64' rx='26' ry='19' fill='%23fff' stroke='%23C9C3DE' stroke-width='2'/%3E%3Ccircle cx='31' cy='57' r='3' fill='%232B2D5C'/%3E%3Ccircle cx='49' cy='57' r='3' fill='%232B2D5C'/%3E%3Cellipse cx='40' cy='62' rx='3' ry='2' fill='%23FF8FB1'/%3E%3C/svg%3E")}
.stage.st-listen::after{content:"🍄";left:10px;bottom:6px;font-size:26px}

/* 🔍 Hình bí ẩn: bàn gỗ thám tử, đèn bàn chiếu sáng, kính lúp */
.stage.st-mystery{--sc-sign:rgba(40,20,8,.72);
  border-color:#C89A6A;
  background:
    radial-gradient(ellipse 70% 45% at 50% 42%,rgba(255,236,180,.32),transparent 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 23px),
    repeating-linear-gradient(180deg,transparent 0 58px,rgba(0,0,0,.18) 58px 61px),
    linear-gradient(160deg,#8C5733,#6A3C1F)}
.stage.st-mystery::before{content:"🔍";right:8px;bottom:6px;font-size:40px;transform:rotate(-12deg)}
.stage.st-mystery::after{content:"🕵️ 📜";left:10px;bottom:8px;font-size:28px}

/* 🔤 Điền chữ còn thiếu: hộp bút vải chấm bi, khoá kéo hai mép */
.stage.st-missing{--sc-ink:#3A2A00;--sc-ink2:#6B5310;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.86);--sc-ts:none;
  border-color:#5C6B8A;padding-top:26px;
  background:
    repeating-linear-gradient(90deg,#D7DDE8 0 3px,transparent 3px 6px) 0 7px/100% 6px no-repeat,
    linear-gradient(#5C6B8A,#5C6B8A) 0 4px/100% 12px no-repeat,
    repeating-linear-gradient(90deg,#D7DDE8 0 3px,transparent 3px 6px) 0 calc(100% - 7px)/100% 6px no-repeat,
    linear-gradient(#5C6B8A,#5C6B8A) 0 calc(100% - 4px)/100% 12px no-repeat,
    radial-gradient(circle,rgba(255,255,255,.6) 0 4px,transparent 5px) 0 0/22px 22px,
    radial-gradient(circle,rgba(255,140,66,.35) 0 3px,transparent 4px) 11px 11px/22px 22px,
    #FFD66B}
.stage.st-missing::before{content:"✏️";right:8px;top:18px;font-size:30px;transform:rotate(30deg)}
.stage.st-missing::after{content:"🖍️ 📏";left:8px;bottom:22px;font-size:26px}

/* 🧩 Ghép câu: bảng đen lớp học, khung gỗ, máng phấn */
.stage.st-sentence{--sc-sign:rgba(0,0,0,.28);--sc-ts:0 0 6px rgba(255,255,255,.25);
  border:8px solid #A0693A;box-shadow:inset 0 0 0 2px #6E4524,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    linear-gradient(transparent calc(100% - 10px),#8A5A33 0 calc(100% - 7px),#B98252 0),
    radial-gradient(ellipse 40% 18% at 22% 30%,rgba(255,255,255,.1),transparent 70%),
    radial-gradient(ellipse 35% 14% at 78% 70%,rgba(255,255,255,.08),transparent 70%),
    linear-gradient(170deg,#356B50,#2A5640)}
.stage.st-sentence::before{content:"A b c";left:12px;bottom:18px;font:700 26px/1 "Andika",sans-serif;color:rgba(255,255,255,.3);transform:rotate(-8deg)}
.stage.st-sentence::after{content:"🍎";right:10px;bottom:6px;font-size:24px}

/* 🔭 Ống nhòm: rừng xa-van (safari), cây keo, mặt trời */
.stage.st-binocular{--sc-ink:#4A2C05;--sc-ink2:#6E4A12;--sc-hi:#B4235A;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.82);--sc-ts:none;
  border-color:#F2C46A;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90'%3E%3Cpath d='M66 90 L70 50 L52 34 M70 50 L88 32' stroke='%235B3A1E' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='70' cy='28' rx='60' ry='14' fill='%236B8E23'/%3E%3Cellipse cx='52' cy='21' rx='32' ry='10' fill='%237FA32E'/%3E%3C/svg%3E") -40px calc(100% - 26px)/140px 90px no-repeat,
    repeating-linear-gradient(100deg,transparent 0 9px,rgba(140,100,20,.25) 9px 11px) 0 100%/100% 34px no-repeat,
    linear-gradient(transparent calc(100% - 40px),#D9A94C 0),
    radial-gradient(circle at 86% 16%,#FFF3B0 0 26px,rgba(255,220,120,.6) 27px 40px,transparent 41px),
    linear-gradient(180deg,#FFE7A0 0,#FFD58A 60%,#F7C56E 100%)}
.stage.st-binocular::before{content:"🦒";right:6px;bottom:20px;font-size:52px}
.stage.st-binocular::after{content:"🐘";left:60px;bottom:6px;font-size:30px}

/* 🃏 Lật thẻ: bàn gỗ, mặt dạ xanh như bàn chơi bài */
.stage.st-memory{--sc-sign:rgba(8,40,22,.6);
  border:8px solid #8B5A2B;box-shadow:inset 0 0 0 3px #B9824A,inset 0 0 26px rgba(0,0,0,.45),0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%,rgba(255,255,255,.12),transparent 70%),
    repeating-radial-gradient(circle at 30% 30%,rgba(0,0,0,.04) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#2E9E5B,#1C6B3C)}
.stage.st-memory::before{content:"♠️ ♥️";right:8px;top:8px;font-size:22px;opacity:.9}
.stage.st-memory::after{content:"♣️ ♦️";left:8px;bottom:8px;font-size:22px;opacity:.9}

/* 🥁 Đọc theo nhịp: sân khấu ca nhạc, đèn rọi, đèn chân sân khấu */
.stage.st-beat{--sc-sign:rgba(20,8,40,.62);
  border-color:#C4B5FD;
  background:
    radial-gradient(circle,#FFE27A 0 4px,rgba(255,226,122,.35) 5px 8px,transparent 9px) 0 calc(100% - 4px)/26px 18px repeat-x,
    linear-gradient(transparent calc(100% - 28px),#4C1D95 0),
    conic-gradient(from 165deg at 8% -4%,transparent 0 6deg,rgba(255,226,122,.28) 6deg 26deg,transparent 26deg),
    conic-gradient(from 150deg at 92% -4%,transparent 0 10deg,rgba(255,111,174,.26) 10deg 30deg,transparent 30deg),
    linear-gradient(180deg,#160A36,#2A1260 70%,#3A1A7A)}
.stage.st-beat::before{content:"🎤";right:8px;bottom:30px;font-size:30px}
.stage.st-beat::after{content:"🎵   🎶";left:8px;bottom:32px;font-size:22px;opacity:.85}

/* 🚪 Ô cửa bí mật: ngôi nhà nhiều cửa, mái ngói, tường ván, cỏ */
.stage.st-reveal{--sc-ink:#4A2410;--sc-ink2:#7A4520;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.88);--sc-ts:none;
  border-color:#F6A07A;padding-top:28px;
  background:
    linear-gradient(transparent calc(100% - 14px),#6CC24A 0),
    radial-gradient(circle at 50% 0,#C2410C 0 9px,transparent 10px) 0 18px/18px 10px repeat-x,
    linear-gradient(#E4572E,#C2410C) 0 0/100% 19px no-repeat,
    repeating-linear-gradient(180deg,#FFE7C2 0 22px,#F4D3A3 22px 24px)}
.stage.st-reveal::before{content:"🐈";right:8px;bottom:6px;font-size:30px}
.stage.st-reveal::after{content:"🌷 🪴";left:8px;bottom:6px;font-size:24px}

/* ❓ Cái gì biến mất: sân khấu ảo thuật, rèm nhung đỏ, đèn rọi giữa */
.stage.st-whatmissing{--sc-sign:rgba(50,6,20,.66);
  border-color:#F2C14E;padding-left:24px;padding-right:24px;padding-top:26px;
  background:
    radial-gradient(circle at 50% 0,#9B1C2E 0 13px,transparent 14px) 0 10px/28px 14px repeat-x,
    linear-gradient(#9B1C2E,#7A1424) 0 0/100% 12px no-repeat,
    repeating-linear-gradient(90deg,#7A1424 0 6px,#B32638 6px 12px) 0 0/16px 100% no-repeat,
    repeating-linear-gradient(90deg,#B32638 0 6px,#7A1424 6px 12px) 100% 0/16px 100% no-repeat,
    linear-gradient(transparent calc(100% - 22px),#5A2E14 0),
    radial-gradient(ellipse 60% 50% at 50% 58%,rgba(255,240,180,.3),transparent 70%),
    linear-gradient(180deg,#2A0A2E,#3D0F3A)}
.stage.st-whatmissing::before{content:"🎩";left:22px;bottom:4px;font-size:30px}
.stage.st-whatmissing::after{content:"🪄✨";right:22px;bottom:6px;font-size:24px}

/* 🔗 Nối hình với chữ: bảng mạch điện, đường dây và mối hàn */
.stage.st-match{--sc-sign:rgba(4,40,32,.66);
  border-color:#6EE7B7;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg stroke='%2334D399' stroke-opacity='.35' stroke-width='2' fill='none'%3E%3Cpath d='M0 15 H20 L30 25 H60'/%3E%3Cpath d='M15 60 V42 L25 32'/%3E%3Cpath d='M45 0 V12'/%3E%3C/g%3E%3Cg fill='%23FDE68A' fill-opacity='.5'%3E%3Ccircle cx='30' cy='25' r='3'/%3E%3Ccircle cx='25' cy='32' r='3'/%3E%3Ccircle cx='45' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/60px 60px,
    linear-gradient(160deg,#0F5A4A,#0B3F35)}
.stage.st-match::before{content:"🔌";right:8px;top:8px;font-size:28px}
.stage.st-match::after{content:"💡 ⚡";left:8px;bottom:6px;font-size:26px}

/* 🧩 Xếp hình: thảm xốp ghép nhiều màu trải sàn */
.stage.st-puzzle{--sc-ink:#2B2D5C;--sc-ink2:#4A4F86;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.88);--sc-ts:none;
  border-color:#fff;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.75) 0 7px,transparent 8px) 0 0/80px 80px,
    radial-gradient(circle at 0 50%,rgba(255,255,255,.75) 0 7px,transparent 8px) 0 0/80px 80px,
    conic-gradient(#FFD1E3 25%,#CDEBFF 0 50%,#FFF0B3 0 75%,#D4F5DD 0) 0 0/160px 160px}
.stage.st-puzzle::before{content:"🧸";right:8px;bottom:6px;font-size:34px}
.stage.st-puzzle::after{content:"🪀";left:10px;bottom:8px;font-size:26px}

/* 🔠 Sắp chữ: cửa tủ lạnh, chữ cái nam châm nhiều màu */
.stage.st-spell{--sc-ink:#1E3A5F;--sc-ink2:#3E5C80;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border-color:#B9D6EA;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='16'%3E%3Crect x='1' y='2' width='108' height='12' rx='6' fill='%23C9D6E3' stroke='%2393A9C0' stroke-width='2'/%3E%3Crect x='10' y='5' width='80' height='3' rx='1.5' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E") 50% calc(100% - 14px)/110px 16px no-repeat,
    linear-gradient(#B9D6EA,#B9D6EA) 0 calc(100% - 40px)/100% 3px no-repeat,
    linear-gradient(115deg,transparent 18%,rgba(255,255,255,.65) 18% 24%,transparent 24% 30%,rgba(255,255,255,.45) 30% 32%,transparent 32%),
    linear-gradient(180deg,#EEF8FF,#D6ECFA)}
.stage.st-spell::before{content:"🍎";right:8px;bottom:8px;font-size:24px}
.stage.st-spell::after{content:"🌈  ⭐";left:8px;bottom:8px;font-size:24px}
.stage.st-spell .tiles.pool .tile.ltr{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18);border-width:0 0 5px;box-shadow:0 3px 6px rgba(0,0,0,.18)}
.stage.st-spell .tiles.pool .tile.ltr:nth-child(5n+1){background:#FF5A7A;border-color:#C93A57}
.stage.st-spell .tiles.pool .tile.ltr:nth-child(5n+2){background:#2F8CF0;border-color:#1D62B0}
.stage.st-spell .tiles.pool .tile.ltr:nth-child(5n+3){background:#22B864;border-color:#178548}
.stage.st-spell .tiles.pool .tile.ltr:nth-child(5n+4){background:#FF9A1F;border-color:#C76E0A}
.stage.st-spell .tiles.pool .tile.ltr:nth-child(5n+5){background:#9B5CF6;border-color:#6D35C9}

/* 🌠 Bắt chữ cái rơi: trời đêm mưa sao băng */
.stage.st-catch{--sc-sign:rgba(10,14,48,.66);
  border-color:#93C5FD;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='150'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 10 L70 50' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M110 70 L150 102' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/170px 150px,
    radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),radial-gradient(1.2px 1.2px at 80px 70px,#fff,transparent),
    radial-gradient(1.4px 1.4px at 50px 100px,#FFE27A,transparent),radial-gradient(1px 1px at 95px 15px,#fff,transparent),
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(99,102,241,.35),transparent 70%),
    linear-gradient(180deg,#070B26,#16124A 60%,#241A63)}
.stage.st-catch{background-size:170px 150px,110px 110px,110px 110px,110px 110px,110px 110px,auto,auto}
.stage.st-catch::before{content:"🌠";right:8px;top:8px;font-size:30px}
.stage.st-catch::after{content:"🌙";left:8px;bottom:6px;font-size:26px}

/* 🎯 Bingo: phòng chơi bingo, dãy bóng đèn và tia sáng */
.stage.st-bingo{--sc-sign:rgba(30,6,60,.62);
  border-color:#FFE27A;padding-left:8px;padding-right:8px;padding-top:24px;
  background:
    radial-gradient(circle,#FFE27A 0 4px,rgba(255,226,122,.3) 5px 7px,transparent 8px) 4px 4px/22px 14px repeat-x,
    radial-gradient(circle,#FF8FC6 0 4px,rgba(255,143,198,.3) 5px 7px,transparent 8px) 4px calc(100% - 4px)/22px 14px repeat-x,
    repeating-conic-gradient(from 0deg at 50% 115%,rgba(255,255,255,.07) 0 6deg,transparent 6deg 12deg),
    linear-gradient(180deg,#3B1170,#5B21B6 60%,#6D28D9)}
.stage.st-bingo::before{content:"🎉";right:8px;top:22px;font-size:26px}
.stage.st-bingo::after{content:"🎟️";left:8px;top:22px;font-size:26px}

/* 🎡 Vòng quay may mắn: hội chợ, cờ đuôi nheo, lều sọc */
.stage.st-wheel{--sc-ink:#1E3A5F;--sc-ink2:#3E5C80;--sc-hi:#B4235A;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.88);--sc-ts:none;
  border-color:#FFD66B;padding-top:30px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='28'%3E%3Cpath d='M0 3 Q45 12 90 3' stroke='%23fff' stroke-width='2' fill='none'/%3E%3Cpath d='M6 5 L20 7 L13 25Z' fill='%23FF5A7A'/%3E%3Cpath d='M38 8 L52 8 L45 26Z' fill='%23FFC233'/%3E%3Cpath d='M70 7 L84 5 L77 24Z' fill='%232F8CF0'/%3E%3C/svg%3E") 0 2px/90px 28px repeat-x,
    repeating-linear-gradient(90deg,#FF5A7A 0 22px,#fff 22px 44px) 0 100%/100% 46px no-repeat,
    radial-gradient(ellipse 40% 12% at 20% 22%,#fff 0 60%,transparent 62%),
    radial-gradient(ellipse 30% 10% at 82% 34%,#fff 0 60%,transparent 62%),
    linear-gradient(180deg,#8FD6FF,#CDEFFF 70%)}
.stage.st-wheel::before{content:"🎈";right:8px;top:40px;font-size:30px}
.stage.st-wheel::after{content:"🎠";left:8px;bottom:6px;font-size:30px}

/* 🚀 Đua tên lửa: đường đua vũ trụ, vạch làn, cờ ca-rô đích */
.stage.st-race{--sc-sign:rgba(8,12,44,.66);
  border-color:#FDE68A;padding-right:20px;
  background:
    conic-gradient(#fff 25%,#1F2937 0 50%,#fff 0 75%,#1F2937 0) 100% 0/12px 12px repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='50'%3E%3Crect y='47' width='14' height='3' rx='1.5' fill='%23FFE27A' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/28px 50px,
    radial-gradient(1.4px 1.4px at 30px 40px,#fff,transparent) 0 0/90px 90px,
    linear-gradient(180deg,#0B1236,#18205A)}
.stage.st-race::before{content:"🏁";right:18px;top:8px;font-size:28px}
.stage.st-race::after{content:"🪐";left:8px;bottom:8px;font-size:30px}

/* 🐝 Ong bay chọn hình: vườn hoa, mây trắng, luống hoa dưới chân */
.stage.st-fly{--sc-ink:#1F3B2A;--sc-ink2:#3C5A45;--sc-hi:#B4235A;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.88);--sc-ts:none;
  border-color:#FFC2DD;
  background:
    linear-gradient(transparent calc(100% - 12px),#5DB646 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Cg stroke='%233FA34D' stroke-width='3'%3E%3Cpath d='M20 60 V30'/%3E%3Cpath d='M60 60 V22'/%3E%3Cpath d='M85 60 V38'/%3E%3C/g%3E%3Cpath d='M12 24 Q20 36 28 24 L26 14 L20 20 L14 14Z' fill='%23FF6FAE'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='60' cy='12' r='6'/%3E%3Ccircle cx='70' cy='20' r='6'/%3E%3Ccircle cx='50' cy='20' r='6'/%3E%3Ccircle cx='60' cy='28' r='6'/%3E%3C/g%3E%3Ccircle cx='60' cy='20' r='5' fill='%23FFC233'/%3E%3Cpath d='M78 32 Q85 42 92 32 L90 24 L85 30 L80 24Z' fill='%23A78BFA'/%3E%3C/svg%3E") 0 calc(100% - 8px)/100px 60px repeat-x,
    radial-gradient(ellipse 30% 9% at 18% 10%,#fff 0 60%,transparent 62%),
    radial-gradient(ellipse 24% 8% at 84% 18%,#fff 0 60%,transparent 62%),
    linear-gradient(180deg,#BFE9FF 0,#E4F7FF 45%,#DDF6D5 75%,#BFE8A8 100%)}
.stage.st-fly::before{content:"🦋";right:10px;top:46px;font-size:28px}
.stage.st-fly::after{content:"🌻";left:6px;top:46px;font-size:30px}

/* ==================== 3 MÀN CÓ Ở MỌI TRANG: 6 CẢNH THEO BẢNG MÀU ==================== */

/* ---- 📖 HỌC TỪ ---- */
/* th-0 thư viện: kệ sách trên và dưới, tường kem */
body:not([class*="th-"]) .stage.st-learn{--sc-ink:#3A2410;--sc-ink2:#6B4A2A;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border-color:#C89A6A;padding-top:40px;
  background:
    linear-gradient(#8B5A2B,#8B5A2B) 0 30px/100% 6px no-repeat,
    repeating-linear-gradient(90deg,#E76F51 0 14px,#2A9D8F 14px 26px,#E9C46A 26px 40px,#8E7DBE 40px 52px,#F4A261 52px 66px,#3A6EA5 66px 76px) 0 4px/100% 26px no-repeat,
    linear-gradient(#8B5A2B,#8B5A2B) 0 100%/100% 6px no-repeat,
    repeating-linear-gradient(90deg,#3A6EA5 0 12px,#E9C46A 12px 26px,#E76F51 26px 38px,#2A9D8F 38px 52px,#8E7DBE 52px 64px) 0 calc(100% - 6px)/100% 28px no-repeat,
    radial-gradient(ellipse 70% 50% at 50% 50%,#FFFBF0,transparent 75%),
    #F8EBD3}
body:not([class*="th-"]) .stage.st-learn::before{content:"🦉";right:8px;top:44px;font-size:28px}
body:not([class*="th-"]) .stage.st-learn::after{content:"📚";left:8px;bottom:40px;font-size:26px}

/* th-1 bãi biển: trời, biển có sóng, cát, mặt trời */
body.th-1 .stage.st-learn{--sc-ink:#0F3B57;--sc-ink2:#2C5A75;--sc-hi:#B4235A;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.86);--sc-ts:none;
  border-color:#FFE7A8;
  background:
    radial-gradient(circle at 88% 30px,#FFF3B0 0 18px,rgba(255,220,120,.55) 19px 28px,transparent 29px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10' stroke='%23fff' stroke-width='3' fill='none' stroke-opacity='.85'/%3E%3C/svg%3E") 0 112px/60px 14px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10' stroke='%23fff' stroke-width='2' fill='none' stroke-opacity='.55'/%3E%3C/svg%3E") 30px 86px/60px 14px repeat-x,
    radial-gradient(circle,rgba(190,140,60,.22) 0 1.5px,transparent 2px) 0 0/14px 14px,
    linear-gradient(180deg,#BDEBFF 0 70px,#38B6D8 70px 122px,#FFE9B3 122px,#FFDD99 100%)}
body.th-1 .stage.st-learn::before{content:"⛱️";right:6px;bottom:8px;font-size:36px}
body.th-1 .stage.st-learn::after{content:"🐚 🦀";left:8px;bottom:8px;font-size:24px}

/* th-2 rạp chiếu phim: dải phim trên đầu, luồng sáng máy chiếu, ghế đỏ */
body.th-2 .stage.st-learn{--sc-sign:rgba(40,6,16,.7);
  border-color:#FDBA74;padding-top:30px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.75) 0 8px,transparent 8px 18px) 5px 5px/18px 8px repeat-x,
    linear-gradient(#111,#111) 0 0/100% 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30'%3E%3Crect x='3' y='3' width='38' height='30' rx='12' fill='%23701228'/%3E%3Crect x='8' y='8' width='28' height='22' rx='9' fill='%23A31D40'/%3E%3C/svg%3E") 0 100%/44px 30px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30'%3E%3Crect x='3' y='3' width='38' height='30' rx='12' fill='%23560D1E'/%3E%3Crect x='8' y='8' width='28' height='22' rx='9' fill='%237E1631'/%3E%3C/svg%3E") 22px calc(100% - 20px)/44px 30px repeat-x,
    conic-gradient(from 160deg at 50% -6%,transparent 0 0deg,rgba(255,240,200,.18) 0deg 40deg,transparent 40deg),
    radial-gradient(ellipse 70% 40% at 50% 30%,rgba(255,200,140,.18),transparent 70%),
    linear-gradient(180deg,#2A0A16,#3C0F20 60%,#1F0610)}
body.th-2 .stage.st-learn::before{content:"🎬";right:8px;top:26px;font-size:28px}
body.th-2 .stage.st-learn::after{content:"🍿";left:8px;top:26px;font-size:28px}

/* th-3 phòng thí nghiệm: tường gạch men, bàn thí nghiệm, bong bóng */
body.th-3 .stage.st-learn{--sc-ink:#16305E;--sc-ink2:#35507E;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border-color:#93C5FD;
  background:
    linear-gradient(transparent calc(100% - 22px),#4B5B75 0 calc(100% - 16px),#7A8AA3 0),
    radial-gradient(circle at 18% 64%,rgba(56,189,248,.25) 0 10px,transparent 11px),
    radial-gradient(circle at 84% 40%,rgba(167,139,250,.25) 0 14px,transparent 15px),
    radial-gradient(circle at 76% 76%,rgba(52,211,153,.22) 0 8px,transparent 9px),
    linear-gradient(90deg,#C7DDF3 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(#C7DDF3 1px,transparent 1px) 0 0/26px 26px,
    #F3F9FF}
body.th-3 .stage.st-learn::before{content:"🔬";right:8px;bottom:22px;font-size:32px}
body.th-3 .stage.st-learn::after{content:"🧪⚗️";left:8px;bottom:22px;font-size:28px}

/* th-4 rừng nhiệt đới: lá lớn ở hai góc, nắng xuyên tán lá */
body.th-4 .stage.st-learn{--sc-sign:rgba(6,40,24,.62);
  border-color:#86EFAC;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 120 C10 60 50 20 120 0 C90 50 60 90 0 120Z' fill='%2334A065'/%3E%3Cpath d='M0 120 C40 80 80 40 120 0' stroke='%231B5E3B' stroke-width='3' fill='none'/%3E%3C/svg%3E") 0 100%/110px 110px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M120 0 C110 60 70 100 0 120 C30 70 60 30 120 0Z' fill='%232E8B57'/%3E%3Cpath d='M120 0 C80 40 40 80 0 120' stroke='%231B5E3B' stroke-width='3' fill='none'/%3E%3C/svg%3E") 100% 0/120px 120px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M120 120 C100 80 60 50 0 40 C40 90 80 110 120 120Z' fill='%23259154'/%3E%3C/svg%3E") 100% 100%/100px 100px no-repeat,
    linear-gradient(120deg,transparent 30%,rgba(253,224,71,.14) 30% 36%,transparent 36% 52%,rgba(253,224,71,.1) 52% 56%,transparent 56%),
    linear-gradient(180deg,#0E3B2A,#155C3C 60%,#1E6E45)}
body.th-4 .stage.st-learn::before{content:"🦜";left:8px;top:10px;font-size:30px}
body.th-4 .stage.st-learn::after{content:"🐒";right:8px;bottom:56px;font-size:30px}

/* th-5 lâu đài: tường đá hồng, răng cưa thành, cờ */
body.th-5 .stage.st-learn{--sc-ink:#5A1240;--sc-ink2:#80305F;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border-color:#F9A8D4;padding-top:30px;
  background:
    linear-gradient(90deg,#E9A8CC 50%,transparent 0) 0 0/36px 14px repeat-x,
    linear-gradient(#E9A8CC,#E9A8CC) 0 14px/100% 8px no-repeat,
    linear-gradient(rgba(190,90,150,.22) 2px,transparent 2px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(190,90,150,.18) 2px,transparent 2px) 0 0/44px 22px,
    radial-gradient(ellipse 70% 50% at 50% 50%,rgba(255,255,255,.7),transparent 75%),
    linear-gradient(180deg,#FFE4F2,#FBCFE8)}
body.th-5 .stage.st-learn::before{content:"🏰";right:6px;bottom:6px;font-size:38px}
body.th-5 .stage.st-learn::after{content:"👑";left:8px;bottom:8px;font-size:28px}

/* ---- 👨‍👩‍👧 NÓI CÙNG BA MẸ ---- */
/* th-0 phòng khách: giấy dán tường sọc, sàn gỗ, ghế sofa */
body:not([class*="th-"]) .stage.st-talk{--sc-ink:#3A2410;--sc-ink2:#6B4A2A;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border-color:#F2C49B;
  background:
    linear-gradient(#fff,#fff) 0 calc(100% - 30px)/100% 6px no-repeat,
    repeating-linear-gradient(90deg,#D9A066 0 46px,#C68B50 46px 48px) 0 100%/100% 30px no-repeat,
    repeating-linear-gradient(90deg,#FFF1E0 0 18px,#FFE4C7 18px 36px)}
body:not([class*="th-"]) .stage.st-talk::before{content:"🛋️";right:6px;bottom:24px;font-size:38px}
body:not([class*="th-"]) .stage.st-talk::after{content:"🖼️";left:8px;top:10px;font-size:28px}

/* th-1 gọi điện video: viền điện thoại, tai thỏ camera, nút gọi */
body.th-1 .stage.st-talk{--sc-sign:rgba(4,40,48,.6);
  border:10px solid #10141F;border-radius:34px;padding-top:28px;
  box-shadow:0 0 0 2px #3A4256,0 8px 0 rgba(0,0,0,.25),0 14px 28px rgba(0,0,0,.3);
  background:
    radial-gradient(circle,#EF4444 0 13px,transparent 14px) 50% calc(100% - 6px)/30px 30px no-repeat,
    radial-gradient(circle,rgba(255,255,255,.3) 0 11px,transparent 12px) calc(50% - 46px) calc(100% - 8px)/26px 26px no-repeat,
    radial-gradient(circle,rgba(255,255,255,.3) 0 11px,transparent 12px) calc(50% + 46px) calc(100% - 8px)/26px 26px no-repeat,
    radial-gradient(ellipse 60% 40% at 30% 20%,rgba(94,234,212,.28),transparent 70%),
    linear-gradient(180deg,#0F4C5C,#127083 55%,#0E5466)}
body.th-1 .stage.st-talk::before{left:50%;top:6px;width:76px;height:14px;margin-left:-38px;border-radius:99px;background:#10141F}
body.th-1 .stage.st-talk::after{content:"📹";right:8px;bottom:10px;font-size:22px}

/* th-2 sân khấu rối: mái che sọc cam, khung gỗ, phông tím */
body.th-2 .stage.st-talk{--sc-sign:rgba(40,10,40,.62);
  border:8px solid #B45309;padding-top:42px;
  box-shadow:inset 0 0 0 3px #F59E0B,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34'%3E%3Crect width='20' height='22' fill='%23F97316'/%3E%3Crect x='20' width='20' height='22' fill='%23FFD43B'/%3E%3Ccircle cx='10' cy='22' r='10' fill='%23F97316'/%3E%3Ccircle cx='30' cy='22' r='10' fill='%23FFD43B'/%3E%3C/svg%3E") 0 0/40px 34px repeat-x,
    linear-gradient(transparent calc(100% - 22px),#92400E 0),
    radial-gradient(ellipse 60% 40% at 50% 45%,rgba(255,200,120,.22),transparent 70%),
    linear-gradient(180deg,#3B1452,#5B1E6E)}
body.th-2 .stage.st-talk::before{content:"🐸";left:8px;bottom:12px;font-size:30px}
body.th-2 .stage.st-talk::after{content:"🐻";right:8px;bottom:12px;font-size:30px}

/* th-3 tàu vũ trụ: vách kim loại có đinh tán, cửa sổ tròn, đèn bảng điều khiển */
body.th-3 .stage.st-talk{--sc-sign:rgba(6,14,44,.66);
  border:6px solid #94A3B8;
  box-shadow:inset 0 0 0 2px #CBD5E1,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    radial-gradient(circle,#34D399 0 4px,transparent 5px) 6px calc(100% - 6px)/24px 16px repeat-x,
    radial-gradient(circle,#F87171 0 4px,transparent 5px) 18px calc(100% - 6px)/24px 16px repeat-x,
    linear-gradient(transparent calc(100% - 26px),#1E293B 0),
    radial-gradient(circle at calc(100% - 42px) calc(100% - 72px),#0B1030 0 24px,#CBD5E1 25px 31px,#64748B 32px 33px,transparent 34px),
    radial-gradient(circle,rgba(255,255,255,.3) 0 2px,transparent 3px) 4px 4px/52px 52px,
    linear-gradient(90deg,rgba(255,255,255,.08) 2px,transparent 2px) 0 0/52px 52px,
    linear-gradient(rgba(255,255,255,.08) 2px,transparent 2px) 0 0/52px 52px,
    linear-gradient(180deg,#1E3A70,#2B4C8C)}
body.th-3 .stage.st-talk::before{content:"🪐";right:30px;bottom:60px;font-size:24px}
body.th-3 .stage.st-talk::after{content:"👩‍🚀";left:8px;bottom:28px;font-size:30px}

/* th-4 dã ngoại: khăn trải ca-rô đỏ trắng trên bãi cỏ */
body.th-4 .stage.st-talk{--sc-ink:#4A1010;--sc-ink2:#7A2E2E;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border:10px solid #4CAF50;
  box-shadow:inset 0 0 0 3px #7BD16B,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    repeating-linear-gradient(0deg,rgba(239,68,68,.2) 0 16px,transparent 16px 32px),
    repeating-linear-gradient(90deg,rgba(239,68,68,.2) 0 16px,transparent 16px 32px),
    #FFF8F5}
body.th-4 .stage.st-talk::before{content:"🧺";right:6px;bottom:6px;font-size:34px}
body.th-4 .stage.st-talk::after{content:"🍉 🐞";left:8px;bottom:8px;font-size:24px}

/* th-5 quán kem: mái che sọc hồng, tường bạc hà chấm bi, quầy */
body.th-5 .stage.st-talk{--sc-ink:#5A1240;--sc-ink2:#80305F;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.92);--sc-ts:none;
  border-color:#FF8FB8;padding-top:42px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34'%3E%3Crect width='20' height='22' fill='%23FF8FB8'/%3E%3Crect x='20' width='20' height='22' fill='%23fff'/%3E%3Ccircle cx='10' cy='22' r='10' fill='%23FF8FB8'/%3E%3Ccircle cx='30' cy='22' r='10' fill='%23fff'/%3E%3C/svg%3E") 0 0/40px 34px repeat-x,
    linear-gradient(transparent calc(100% - 24px),#F9A8D4 0 calc(100% - 20px),#FBCFE8 0),
    radial-gradient(circle,rgba(255,255,255,.8) 0 5px,transparent 6px) 0 0/30px 30px,
    #C9F2E3}
body.th-5 .stage.st-talk::before{content:"🍦";right:8px;bottom:18px;font-size:32px}
body.th-5 .stage.st-talk::after{content:"🧁";left:8px;bottom:18px;font-size:28px}

/* ---- ✏️ TẬP TÔ CHỮ (chỉ trang trí khung ngoài; nét mẫu, dòng kẻ trong canvas giữ nguyên chuẩn Oxford) ---- */
/* th-0 vở ô ly: ô vuông tím nhạt, lề đỏ */
body:not([class*="th-"]) .stage.st-write{--sc-ink:#2B2D5C;--sc-ink2:#4A4F86;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.92);--sc-ts:none;
  border-color:#C4B5FD;padding-left:30px;
  background:
    linear-gradient(90deg,transparent 20px,#F87171 20px 22px,transparent 22px),
    linear-gradient(90deg,rgba(124,58,237,.28) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(124,58,237,.28) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(124,58,237,.1) 1px,transparent 1px) 0 0/24px 6px,
    #FFFFFF}
body:not([class*="th-"]) .stage.st-write::before{content:"✏️";right:6px;bottom:6px;font-size:28px}
body:not([class*="th-"]) .stage.st-write .writewrap{border-color:#C4B5FD}

/* th-1 bảng trắng: khung nhôm, nam châm, máng bút dạ */
body.th-1 .stage.st-write{--sc-ink:#0F3B57;--sc-ink2:#2C5A75;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(230,245,250,.95);--sc-ts:none;
  border:8px solid #AEB6C2;
  box-shadow:inset 0 0 0 2px #E2E8F0,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    linear-gradient(90deg,#EF4444,#EF4444) 18% calc(100% - 13px)/34px 7px no-repeat,
    linear-gradient(90deg,#2563EB,#2563EB) 34% calc(100% - 13px)/34px 7px no-repeat,
    linear-gradient(90deg,#16A34A,#16A34A) 50% calc(100% - 13px)/34px 7px no-repeat,
    linear-gradient(transparent calc(100% - 12px),#C7CDD6 0),
    radial-gradient(circle,#14B8A6 0 7px,transparent 8px) 10px 8px/18px 18px no-repeat,
    radial-gradient(circle,#F59E0B 0 7px,transparent 8px) calc(100% - 10px) 8px/18px 18px no-repeat,
    linear-gradient(115deg,transparent 30%,rgba(190,220,255,.35) 30% 40%,transparent 40%),
    #FCFEFF}
body.th-1 .stage.st-write::before{content:"🧽";right:12px;bottom:4px;font-size:22px}
body.th-1 .stage.st-write .writewrap{border-color:#99F6E4}

/* th-2 giá vẽ: vải bạt kem, vết màu, gờ gỗ */
body.th-2 .stage.st-write{--sc-ink:#4A2410;--sc-ink2:#7A4520;--sc-hi:#B4235A;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.9);--sc-ts:none;
  border:8px solid #C08A4E;
  box-shadow:inset 0 0 0 2px #E2B07A,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    linear-gradient(transparent calc(100% - 16px),#A16207 0 calc(100% - 12px),#C08A4E 0),
    radial-gradient(circle at 12% 18%,rgba(249,115,22,.45) 0 14px,transparent 15px),
    radial-gradient(circle at 18% 24%,rgba(249,115,22,.35) 0 5px,transparent 6px),
    radial-gradient(circle at 90% 70%,rgba(59,130,246,.35) 0 16px,transparent 17px),
    radial-gradient(circle at 84% 64%,rgba(234,179,8,.45) 0 7px,transparent 8px),
    radial-gradient(circle at 8% 82%,rgba(225,29,116,.3) 0 12px,transparent 13px),
    repeating-linear-gradient(45deg,rgba(160,120,60,.06) 0 2px,transparent 2px 6px),
    #FFF8EC}
body.th-2 .stage.st-write::before{content:"🎨";right:8px;top:8px;font-size:30px}
body.th-2 .stage.st-write::after{content:"🖌️";left:8px;bottom:14px;font-size:26px}
body.th-2 .stage.st-write .writewrap{border-color:#FDBA74}

/* th-3 bàn học bên cửa sổ: khung cửa sổ trời xanh mây trắng, mặt bàn gỗ */
body.th-3 .stage.st-write{--sc-ink:#16305E;--sc-ink2:#35507E;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.92);--sc-ts:none;
  border-color:#fff;
  background:
    repeating-linear-gradient(90deg,transparent 0 60px,rgba(0,0,0,.08) 60px 62px) 0 100%/100% 40px no-repeat,
    linear-gradient(180deg,#D8A36A,#B9844D) 0 100%/100% 40px no-repeat,
    linear-gradient(90deg,transparent calc(50% - 4px),#fff 0 calc(50% + 4px),transparent 0) 0 0/100% 45% no-repeat,
    linear-gradient(transparent calc(50% - 4px),#fff 0 calc(50% + 4px),transparent 0) 0 0/100% 45% no-repeat,
    radial-gradient(ellipse 22% 7% at 24% 16%,#fff 0 60%,transparent 62%),
    radial-gradient(ellipse 18% 6% at 78% 30%,#fff 0 60%,transparent 62%),
    linear-gradient(180deg,#8CCBFF,#D3EDFF 45%,#EAF5FF 45%,#F3F8FF)}
body.th-3 .stage.st-write::before{content:"🪴";right:8px;bottom:30px;font-size:32px}
body.th-3 .stage.st-write::after{content:"📚";left:8px;bottom:32px;font-size:26px}
body.th-3 .stage.st-write .writewrap{border-color:#93C5FD}

/* th-4 bảng gỗ: ván gỗ ngang, đinh bốn góc */
body.th-4 .stage.st-write{--sc-sign:rgba(50,26,6,.66);
  border:6px solid #6B4423;
  box-shadow:inset 0 0 0 2px #A87A4A,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    radial-gradient(circle,#E5E7EB 0 4px,#6B7280 5px,transparent 6px) 8px 8px/14px 14px no-repeat,
    radial-gradient(circle,#E5E7EB 0 4px,#6B7280 5px,transparent 6px) calc(100% - 8px) 8px/14px 14px no-repeat,
    radial-gradient(circle,#E5E7EB 0 4px,#6B7280 5px,transparent 6px) 8px calc(100% - 8px)/14px 14px no-repeat,
    radial-gradient(circle,#E5E7EB 0 4px,#6B7280 5px,transparent 6px) calc(100% - 8px) calc(100% - 8px)/14px 14px no-repeat,
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 17px),
    repeating-linear-gradient(180deg,#A0703F 0 40px,#7E5228 40px 43px)}
body.th-4 .stage.st-write::before{content:"🍃";right:22px;top:10px;font-size:24px}
body.th-4 .stage.st-write::after{content:"🐿️";left:22px;bottom:8px;font-size:28px}
body.th-4 .stage.st-write .writewrap{border-color:#86EFAC}

/* th-5 sổ tay: gáy lò xo, giấy kẻ dòng, nhãn dán */
body.th-5 .stage.st-write{--sc-ink:#5A1240;--sc-ink2:#80305F;--sc-hi:#7C3AED;--sc-ok:#138A48;--sc-sign:rgba(255,255,255,.94);--sc-ts:none;
  border:6px solid #F472B6;padding-top:34px;
  box-shadow:inset 0 0 0 2px #FBCFE8,0 6px 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.3);
  background:
    radial-gradient(circle at 50% 10px,#fff 0 3px,#9CA3AF 4px 6px,transparent 7px) 4px 0/22px 22px repeat-x,
    linear-gradient(#FCE7F3,#FCE7F3) 0 0/100% 22px no-repeat,
    repeating-linear-gradient(transparent 0 25px,#BFDBFE 25px 27px),
    #FFFDF7}
body.th-5 .stage.st-write::before{content:"💖";right:10px;bottom:8px;font-size:24px}
body.th-5 .stage.st-write::after{content:"⭐ 🦄";left:10px;bottom:8px;font-size:22px}
body.th-5 .stage.st-write .writewrap{border-color:#F9A8D4}

@media (prefers-reduced-motion:reduce){.stage[class*="st-"]::before,.stage[class*="st-"]::after{animation:none!important}}