:root {
  --bg: #F7F8FC; --ink: #20243A; --muted: #6C7290; --navy: #1E3A8A; --amber: #F9A826;
  --green: #0F9D63; --orange: #F28C28; --purple: #4B45C6; --red: #D64545; --line: #DDE1EE; --card: #FFFFFF;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Noto Sans Thai", "Leelawadee UI", sans-serif; color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; min-height: 100dvh; user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }

.top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.logo { height: 34px; }
.title { font-weight: 600; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { display: flex; gap: 14px; align-items: center; }
.lvl { display: flex; gap: 5px; padding: 6px 8px; border-radius: 999px; background: #EEF0F7; }
.lvl.current { background: #FFF1D6; outline: 2px solid var(--amber); }
.lvl i { width: 16px; height: 16px; border-radius: 50%; background: #CBD0E0; display: block; }
.lvl i.on { background: var(--amber); }
.lvl.done i { background: var(--green); }

main { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; max-width: 980px; width: 100%; margin: 0 auto; }

.question { display: flex; align-items: center; gap: 14px; }
.question h1 { margin: 0; font-size: clamp(22px, 4.2vw, 34px); font-weight: 700; line-height: 1.35; }
.speak {
  flex: none; width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--navy); color: #fff;
  display: grid; place-items: center; box-shadow: 0 3px 0 #142a66;
}
.speak:active { transform: translateY(2px); box-shadow: 0 1px 0 #142a66; }
.speak.playing { background: var(--amber); box-shadow: 0 3px 0 #c97f0c; }

.stage {
  position: relative; flex: 1; min-height: 230px; background: var(--card); border: 2px solid var(--line);
  border-radius: 22px; overflow: hidden;
}
.stage.row, .stage.groups { display: flex; align-items: center; align-content: center; justify-content: center; gap: clamp(8px, 2.5vw, 26px); padding: 16px; flex-wrap: wrap; }
.obj {
  position: relative; width: clamp(58px, 12vw, 104px); aspect-ratio: 1; display: grid; place-items: center;
  border: none; background: none; padding: 0; border-radius: 18px; transition: transform .12s;
}
.obj img { max-width: 100%; max-height: 100%; pointer-events: none; }
.stage.scatter .obj { position: absolute; transform: translate(-50%, -50%); }
.obj.tappable:active img { transform: scale(.93); }
.obj.sel { background: #FFF1D6; outline: 4px solid var(--amber); }
.obj .badge {
  position: absolute; top: -6px; right: -6px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 20px; display: grid; place-items: center;
  animation: pop .25s ease-out;
}
.obj.dim img { opacity: .28; filter: grayscale(1); }
@keyframes pop { from { transform: scale(.2); } 70% { transform: scale(1.2); } to { transform: scale(1); } }

.group {
  flex: 1 1 0; min-width: 150px; max-width: 300px; min-height: 170px; border: 3px solid var(--line); border-radius: 20px;
  background: #FBFBFE; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 12px;
}
.group .obj { width: clamp(42px, 7.5vw, 68px); }
.group.pick { cursor: pointer; }
.group.chosen { border-color: var(--amber); background: #FFF7E6; }
.group.right { border-color: var(--green); background: #E9F8F1; }
.group.wrong { border-color: var(--red); }

.feedback {
  border-radius: 18px; padding: 12px 16px; font-size: clamp(18px, 3vw, 24px); font-weight: 600; line-height: 1.45;
  background: #FFF7E6; border: 2px solid var(--amber);
}
.feedback.ok { background: #E9F8F1; border-color: var(--green); color: #0a6b43; }
.feedback .who { display: inline-block; font-size: .72em; font-weight: 700; color: var(--muted); margin-right: 10px; }

.answer { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; min-height: 84px; }
.num {
  width: clamp(62px, 14vw, 96px); height: clamp(62px, 14vw, 96px); border-radius: 22px; border: 3px solid var(--navy);
  background: #fff; color: var(--navy); font-size: clamp(30px, 6vw, 46px); font-weight: 700; box-shadow: 0 4px 0 var(--navy);
}
.num:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.num.right { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 0 #0a6b43; }
.num.wrong { border-color: var(--red); color: var(--red); box-shadow: 0 4px 0 var(--red); animation: shake .3s; }
.num:disabled { opacity: .45; }
.num.right:disabled { opacity: 1; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.actions { display: flex; justify-content: center; min-height: 64px; }
.btn {
  min-height: 60px; padding: 0 30px; border-radius: 18px; border: 3px solid var(--navy); background: #fff; color: var(--navy);
  font-size: 22px; font-weight: 700;
}
.btn.primary { background: var(--navy); color: #fff; box-shadow: 0 4px 0 #142a66; }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #142a66; }
.btn:disabled { opacity: .4; }

.overlay { position: fixed; inset: 0; background: rgba(20, 24, 50, .55); display: grid; place-items: center; padding: 16px; z-index: 10; }
.overlay[hidden] { display: none; }
.card { background: #fff; border-radius: 26px; padding: 24px; max-width: 640px; width: 100%; text-align: center; }
.card .big { font-size: 64px; color: var(--amber); line-height: 1; }
.card h2 { margin: 8px 0 4px; font-size: 28px; }
.card p { margin: 0 0 16px; font-size: 20px; color: var(--muted); }
.card video { width: 100%; border-radius: 14px; margin-bottom: 14px; background: #000; }
.card .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.foot { display: flex; gap: 18px; align-items: center; justify-content: center; padding: 8px 16px 12px; color: var(--muted); font-size: 14px; }
.link { border: none; background: none; color: var(--muted); text-decoration: underline; padding: 6px; }

@media (max-width: 560px) {
  .top { gap: 10px; padding: 8px 12px; }
  .title { display: none; }
  .progress { flex: 1; justify-content: flex-end; gap: 8px; }
  .lvl i { width: 13px; height: 13px; }
  main { padding: 10px 12px; gap: 10px; }
  .speak { width: 52px; height: 52px; }
}

/* ---------- shared bits of the three pages ---------- */
.exit { text-decoration: none; color: var(--muted); font-weight: 700; border: 2px solid var(--line); border-radius: 999px; padding: 8px 16px; white-space: nowrap; background: #fff; }
.exit:active { background: #EEF0F7; }
.scores { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { font-size: 14px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #EEF0F7; color: var(--muted); white-space: nowrap; }
.chip b { font-size: 16px; color: var(--ink); margin-left: 3px; }
.chip.lvl { background: #FFF1D6; color: #8a5a00; }
.chip.self { background: #E9F8F1; color: #0a6b43; }
.chip.hint { background: #FFF7E6; color: #8a5a00; }
.chip.shown { background: #EEF0F7; }
.tag { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--purple); background: #ECEBFB; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.question { flex-wrap: wrap; }
.num.picked { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 4px 0 #c97f0c; opacity: 1; }

/* explained solution: where it went wrong / what is right / why */
.feedback.solution { background: #fff; border-color: var(--line); display: grid; gap: 6px; font-weight: 400; }
.sol { display: flex; gap: 12px; align-items: baseline; }
.sol b { flex: none; min-width: 74px; font-size: .72em; font-weight: 700; border-radius: 8px; padding: 3px 8px; text-align: center; }
.sol.was b { background: #FBE9E9; color: var(--red); }
.sol.is b { background: #E9F8F1; color: #0a6b43; }
.sol.why b { background: #ECEBFB; color: var(--purple); }
.sol.is span { font-weight: 700; }

body.test .top { border-bottom: 3px solid var(--purple); }
.card.wide { max-width: 820px; }
.card details { text-align: left; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 16px; color: var(--ink); }
.card details summary, .adult summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.card details p, .adult p { font-size: 15px; color: var(--muted); margin: 10px 0 6px; }
.card details table, .adult table { width: 100%; border-collapse: collapse; }
.card details td, .adult td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.card details td:last-child, .adult td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 12px; }
.card details ul { margin: 0; padding-left: 20px; }

/* ---------- lesson page ---------- */
body.lesson main { gap: 16px; }
.student { color: var(--muted); font-size: 15px; }
.lesson-head .grade { color: var(--muted); font-weight: 600; }
.lesson-head h1 { margin: 2px 0 0; font-size: clamp(26px, 5vw, 38px); color: var(--navy); }
.recommend { background: #FFF7E6; border: 2px solid var(--amber); border-radius: 18px; padding: 12px 16px; font-size: clamp(17px, 3vw, 22px); font-weight: 600; }
.recommend .who { display: inline-block; font-size: .72em; font-weight: 700; color: #8a5a00; background: #FFE2A8; border-radius: 8px; padding: 2px 10px; margin-right: 10px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { background: var(--card); border: 2px solid var(--line); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 230px; }
.step .n { width: 40px; height: 40px; border-radius: 50%; background: #EEF0F7; color: var(--muted); font-weight: 700; font-size: 20px; display: grid; place-items: center; }
.step h2 { margin: 0; font-size: 22px; }
.step .status { margin: 0; color: var(--muted); font-size: 16px; flex: 1; }
.step .scores { justify-content: flex-start; }
.step .btn { min-height: 52px; font-size: 19px; padding: 0 14px; }
.step.done .n { background: var(--green); color: #fff; }
.step.rec { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
.step.rec .n { background: var(--amber); color: #fff; }
.step.next { border-style: dashed; }
.adult { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; font-size: 16px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; } .chip { font-size: 12px; padding: 4px 8px; } .chip b { font-size: 14px; } }

/* many objects (6-10 and more): smaller pieces, rows of five, and the plate used for "zero" */
.stage.small .obj { width: clamp(44px, 8.4vw, 76px); }
.stage.small .group .obj { width: clamp(30px, 5vw, 46px); }
.stage.rows5 { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; align-content: center; justify-items: center; gap: clamp(6px, 1.6vw, 16px) clamp(8px, 2.5vw, 26px); }
.plate { min-width: min(62%, 440px); min-height: 150px; padding: 18px 26px; border-radius: 50%; background: #F3F4FA; border: 4px solid #D5D9EA; box-shadow: inset 0 0 0 14px #FBFBFE;
         display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }
.plate .obj { width: clamp(38px, 7vw, 62px); }
.answer.many { gap: clamp(5px, 1.1vw, 10px); }
.answer.many .num { width: clamp(46px, 7.4vw, 70px); height: clamp(46px, 7.4vw, 70px); font-size: clamp(22px, 3.8vw, 32px); border-radius: 16px; }

/* ---------- profile picker ---------- */
.profiles { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 3vh; }
.profile { width: 170px; padding: 20px 12px 16px; border-radius: 26px; border: 3px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile:active { transform: translateY(2px); border-color: var(--amber); }
.profile img { width: 92px; height: 92px; object-fit: contain; }
.pname { font-size: 24px; font-weight: 700; color: var(--navy); }
.pgrade { font-size: 15px; color: var(--muted); }
.note { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.note.warn { color: #b45309; font-weight: 600; }

/* ---------- 5-level scale ---------- */
.lstatus { font-size: 15px; font-weight: 700; border-radius: 999px; padding: 5px 14px; white-space: nowrap; background: #EEF0F7; color: var(--muted); }
.lstatus.lv5 { background: #DDF3E0; color: #1c6b27; }
.lstatus.lv4 { background: #EDF6D2; color: #4d6410; }
.lstatus.lv3 { background: #FDF2C4; color: #7a5d00; }
.lstatus.lv2 { background: #FDE3C8; color: #8a4a05; }
.lstatus.lv1 { background: #FAD5D2; color: #92201a; }
.face { flex: none; display: grid; place-items: center; }
.face svg { display: block; }

/* ---------- child: list of lessons ---------- */
.recommend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recommend .btn { margin-left: auto; min-height: 50px; font-size: 19px; }
.lesson-list { display: grid; gap: 12px; }
.lesson-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 2px solid var(--line); border-radius: 22px; padding: 14px 18px; text-decoration: none; color: var(--ink); }
.lesson-row.rec { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
.ltext { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lnum { font-size: 14px; color: var(--muted); font-weight: 600; }
.lname { font-size: clamp(19px, 3.4vw, 24px); font-weight: 700; }

/* ---------- guardian zone ---------- */
body.guardian main { max-width: 860px; }
.pin { text-align: center; margin-top: 4vh; }
.pin h1 { font-size: 26px; color: var(--navy); margin: 0 0 14px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 6px; }
.pin-dots i { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--navy); }
.pin-dots i.on { background: var(--navy); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; justify-content: center; margin-top: 12px; }
.pin-pad .num { width: 76px; height: 76px; font-size: 30px; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-size: 18px; font-weight: 600; }
.tab img { width: 30px; height: 30px; object-fit: contain; }
.tab.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.headline { display: flex; align-items: center; gap: 18px; border-radius: 22px; padding: 16px 20px; margin-bottom: 14px; background: #EEF0F7; }
.headline.lv5 { background: #DDF3E0; } .headline.lv4 { background: #EDF6D2; } .headline.lv3 { background: #FDF2C4; }
.headline.lv2 { background: #FDE3C8; } .headline.lv1 { background: #FAD5D2; }
.hname { font-size: 17px; font-weight: 600; color: #444; }
.htext { font-size: clamp(24px, 4.6vw, 34px); font-weight: 700; line-height: 1.25; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; }
.grid2 .panel { margin-bottom: 0; }
.panel h3 { margin: 0 0 8px; font-size: 19px; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat3 div { background: var(--bg); border-radius: 14px; padding: 10px; text-align: center; }
.stat3 b { display: block; font-size: 30px; color: var(--navy); line-height: 1.1; }
.stat3 span { font-size: 13px; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; margin: 10px 0 4px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; max-width: 70px; background: #BFD3F5; border-radius: 8px 8px 0 0; }
.bar.now i { background: var(--navy); }
.bar.none i { background: #E3E6F0; }
.bar .v { font-weight: 700; font-size: 16px; }
.bar .l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.help-item { border-top: 1px solid var(--line); padding: 10px 0; }
.help-item:first-child { border-top: none; padding-top: 2px; }
.hl { display: flex; flex-direction: column; gap: 2px; }
.hl b { font-size: 18px; }
.count { font-size: 13px; color: var(--muted); }
.tip { margin-top: 6px; background: #E9F8F1; border-radius: 12px; padding: 8px 12px; font-size: 16px; line-height: 1.5; }
.tip span { display: inline-block; font-size: 12px; font-weight: 700; color: #0a6b43; background: #C9EEDD; border-radius: 6px; padding: 1px 8px; margin-right: 8px; }
.lrow { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--line); padding: 12px 0; }
.lrow:first-child { border-top: none; padding-top: 2px; }
.lmain { flex: 1; min-width: 0; }
.ltop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ltop b { font-size: 19px; }
.ldet { font-size: 15px; line-height: 1.55; color: #3b3f55; }
.ldet span { display: inline-block; min-width: 82px; color: var(--muted); font-weight: 600; }
.sigs { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.sig { font-size: 13px; font-weight: 600; background: #FDE3C8; color: #8a4a05; border-radius: 8px; padding: 3px 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- summary: how many out of how many (quantity) + the spread of the 5 levels (quality), Chai 2569-10-17 ---------- */
.sum3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sum3 > div { background: var(--bg); border-radius: 14px; padding: 10px 12px; }
.sum3 .k { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
.sum3 .n { font-size: 28px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.sum3 .n small { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.sum3 .p { display: block; height: 8px; border-radius: 99px; background: #E3E6F0; margin-top: 6px; overflow: hidden; }
.sum3 .p i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.qbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: #E3E6F0; }
.qbar i { display: block; height: 100%; }
.qbar.thin { height: 8px; }
.qlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.qlegend span { display: inline-flex; align-items: center; gap: 4px; }
.qlegend i { width: 10px; height: 10px; border-radius: 3px; background: #E3E6F0; }
.grow { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.grow b { font-size: 17px; }
.grow .gnote { color: var(--muted); font-size: 14px; text-align: right; }
.gtag { font-size: 13px; font-weight: 700; background: #FDE3C8; color: #8a4a05; border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
details.ugroup { border-top: 1px solid var(--line); }
details.ugroup:first-child { border-top: none; }
details.ugroup > summary { list-style: none; cursor: pointer; padding: 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
details.ugroup > summary::-webkit-details-marker { display: none; }
details.ugroup > summary .uname { font-size: 18px; font-weight: 700; }
details.ugroup > summary .uname::before { content: '▸ '; color: var(--muted); }
details.ugroup[open] > summary .uname::before { content: '▾ '; }
details.ugroup > summary .ucount { font-size: 14px; color: var(--muted); white-space: nowrap; }
details.ugroup > summary .qbar { grid-column: 1 / -1; }
details.ugroup > .ubody { padding-left: 4px; }
.ldet.utest { background: var(--bg); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; }
.ldet.utest span { min-width: 0; margin-right: 10px; }
/* child: the unit test closes each unit in the lesson list */
.utest-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px dashed var(--line); border-radius: 22px; padding: 12px 18px; text-decoration: none; color: var(--ink); }
.utest-card .ut-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: #EEF0F7; }
.utest-card.passed { border-style: solid; border-color: #BFE5C6; }
.utest-card.passed .ut-icon { background: #DDF3E0; }
.utest-card.locked { opacity: .7; }
.utest-card.grade { border-color: #C9D3EF; background: #F6F8FE; }
.utest-card.grade.passed { border-color: #BFE5C6; background: #fff; }
.utest-card .ltext { flex: 1; min-width: 0; }
@media (max-width: 480px) { .utest-card { gap: 10px; padding: 10px 14px; } .utest-card .lstatus { white-space: normal; max-width: 40%; text-align: center; font-size: 13px; padding: 4px 10px; } }
details.ggroup { margin-top: 14px; }
details.ggroup > summary { cursor: pointer; font-size: 18px; font-weight: 700; color: var(--navy); padding: 6px 0; }
@media (max-width: 560px) { .grow { grid-template-columns: 44px minmax(0, 1fr); } .grow .gnote { grid-column: 1 / -1; text-align: left; } }
.mrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.mrow img { width: 34px; height: 34px; object-fit: contain; }
.mrow .link { margin-left: auto; }
.link.danger { color: var(--red); }
.add-form { display: grid; gap: 10px; margin-top: 14px; max-width: 460px; }
.add-form h4 { margin: 0; font-size: 17px; }
.add-form label { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.add-form input:not([type=checkbox]), .add-form select { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; }
.add-form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; line-height: 1.5; }
.add-form .consent input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.avatars { display: flex; gap: 8px; }
.avatar { width: 58px; height: 58px; border-radius: 16px; border: 3px solid var(--line); background: #fff; padding: 6px; }
.avatar.on { border-color: var(--amber); background: #FFF7E6; }
.avatar img { width: 100%; height: 100%; object-fit: contain; }

/* phones: the score chips get their own line under the exit button */
@media (max-width: 560px) {
  .top { flex-wrap: wrap; }
  body.practice .scores { order: 3; width: 100%; justify-content: flex-start; gap: 6px; }
  .answer.many .num { width: 44px; height: 44px; font-size: 21px; border-radius: 13px; border-width: 2px; box-shadow: 0 3px 0 var(--navy); }
  .profile { width: 44%; }
}

/* way into the guardian report */
.guardian-link { color: var(--navy); font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; background: #fff; white-space: nowrap; }
.note .guardian-link { margin-left: 6px; }

/* ---------- membership pages (login, signup, forgot, reset, verify, confirm) ---------- */
body.auth main { max-width: 480px; align-items: stretch; gap: 14px; padding-top: 4vh; }
.auth-logo { height: 52px; align-self: center; margin-bottom: 6px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 12px; text-align: left; }
.auth-card h1 { margin: 0; font-size: 26px; color: var(--navy); }
.auth-card label, .add-form label { display: grid; gap: 5px; font-size: 16px; font-weight: 600; }
.auth-card input:not([type=checkbox]), .auth-card select { font: inherit; font-weight: 400; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; width: 100%; }
.auth-card input:focus, .auth-card select:focus, .add-form input:focus { outline: none; border-color: var(--navy); }
.hint { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.auth-card .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 1.5; }
.auth-card .check input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.field-label { font-size: 16px; font-weight: 600; }
.err { color: var(--red); font-size: 15px; font-weight: 600; margin: 0; min-height: 0; }
.err:empty { display: none; }
.ok { color: #0a6b43; background: #E9F8F1; border-radius: 12px; padding: 8px 12px; font-size: 15px; margin: 0; line-height: 1.5; }
.auth-links, .auth-alt { text-align: center; margin: 0; font-size: 15px; color: var(--muted); }
.auth-links a, .auth-alt a { color: var(--navy); font-weight: 700; }
a.btn { display: inline-grid; place-items: center; text-decoration: none; }
.auth-card .btn { width: 100%; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 0 #8f2424; }
.steps-mini { display: flex; gap: 8px; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted); }
.steps-mini span { padding: 6px 14px; border-radius: 999px; background: #EEF0F7; }
.steps-mini span.on { background: var(--navy); color: #fff; }

/* guardian zone: verification banner, account details */
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #FFF7E6; border: 2px solid var(--amber); border-radius: 16px; padding: 10px 14px; margin-bottom: 14px; font-size: 15px; }
.banner .btn { min-height: 42px; font-size: 15px; padding: 0 16px; }
.adult { margin-bottom: 14px; }
.kv { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 16px; }
.kv td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv td:first-child { color: var(--muted); width: 44%; }
.add-form .btn { min-height: 48px; font-size: 17px; justify-self: start; }
.pin .auth-card { max-width: 420px; margin: 14px auto 0; }

/* the hidden attribute must win over component display rules (.auth-card, .banner, ... set display) */
[hidden] { display: none !important; }

/* show / hide button inside password and PIN fields */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 58px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted);
             width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; padding: 0; }
.pw-toggle[aria-pressed=true] { color: var(--navy); }
.pw-toggle:active { background: #DDE1EE; }

/* avatar picker: 15 choices in a grid */
.avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avatar { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; padding: 3px; }
.profile img { width: 104px; height: 104px; }

/* child's own picture on the lesson list (tap to change) + profile editing */
.lesson-head.me { display: flex; align-items: center; gap: 16px; }
.me-avatar { border: none; background: none; padding: 0; display: grid; justify-items: center; gap: 2px; font: inherit; font-size: 12px; color: var(--muted); }
.me-avatar img { width: 76px; height: 76px; }
#picker .avatars { max-width: 520px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.mrow .link + .link { margin-left: 4px; }
.mrow .link:first-of-type { margin-left: auto; }

/* lessons outside the child's course */
.lesson-row.locked { opacity: .72; }
.lesson-row.locked .face { filter: grayscale(1); }
.lstatus.lock { background: #eceef4; color: #55607a; }
.locked-box { max-width: 520px; margin: 28px auto; padding: 28px 22px; text-align: center; background: #fff; border: 2px solid var(--line, #dfe3ee); border-radius: 22px; }
.locked-box .lock { font-size: 56px; line-height: 1; }
.locked-box h2 { margin: 10px 0 4px; }
.locked-box p { font-size: 20px; margin: 0 0 18px; }
.locked-box .row-btns { justify-content: center; }
.locked-box a.btn { text-decoration: none; display: inline-block; }
.cells { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cell { display: grid; padding: 8px 14px; border-radius: 12px; background: #e9f6ef; color: #1c5a3c; font-size: 13px; }
.cell b { font-size: 16px; }
.tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #e9f6ef; color: #1c5a3c; }
.tag.out { background: #eceef4; color: #55607a; }
.note.warn { color: #a4530b; }

/* admin */
body.admin main { max-width: 1100px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.set-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef0f6; font-size: 14px; }
.set-row small { display: block; color: var(--muted, #6b7386); }
.set-row input[type=number] { width: 100%; padding: 6px 8px; border: 1.5px solid #cfd5e3; border-radius: 8px; font: inherit; text-align: right; }
.set-row.changed input[type=number] { border-color: #f9a826; background: #fff8ea; }
.set-row.text { grid-template-columns: minmax(150px, 1fr) minmax(200px, 320px); }
.admin-grid.wide { grid-template-columns: minmax(0, 720px); }
.set-row input[type=text], .set-row input[type=email] { width: 100%; padding: 6px 8px; border: 1.5px solid #cfd5e3; border-radius: 8px; font: inherit; }
.set-row.changed input[type=text], .set-row.changed input[type=email] { border-color: #f9a826; background: #fff8ea; }
.ptable { border-collapse: collapse; width: 100%; font-size: 14px; }
.ptable th, .ptable td { padding: 4px 8px; border-bottom: 1px solid #eef0f6; text-align: right; }
.ptable th:first-child, .ptable td:first-child { text-align: left; font-family: Consolas, monospace; }
.ptable input { width: 86px; padding: 4px 6px; border: 1.5px solid #cfd5e3; border-radius: 6px; font: inherit; text-align: right; }
.ptable input.over { border-color: #f9a826; background: #fff8ea; }
.kid-card { border: 1.5px solid #dfe3ee; border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.kid-card h4 { margin: 0 0 6px; }
.grant-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.grant-row select { padding: 6px 8px; border: 1.5px solid #cfd5e3; border-radius: 8px; font: inherit; }
.quote { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #f3f5fb; font-size: 14px; }
.log { font-size: 13px; color: #414a60; max-height: 260px; overflow: auto; }
.log div { padding: 3px 0; border-bottom: 1px solid #eef0f6; }
.locked-box a.btn { display: inline-flex; align-items: center; justify-content: center; }

/* admin: the team */
.stable th, .stable td { text-align: left; }
.stable td:first-child { font-family: inherit; }
.stable select, #staffForm input, #staffForm select { padding: 6px 8px; border: 1.5px solid #cfd5e3; border-radius: 8px; font: inherit; }
#staffForm { margin-top: 12px; }
#staffForm input { flex: 1; min-width: 180px; }

/* ---------- รู้จักตัวเลข: pictures of a quantity (dots / hand / objects), numeral cards, matching ---------- */
.stage.single { display: flex; align-items: center; justify-content: center; }
.pic { position: relative; flex: none; }
.pic.dots { width: 190px; height: 190px; background: #fff; border: 3px solid #D7DCEA; border-radius: 26px; }
.pic.dots .dot { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: none; background: #3B7DDD; padding: 0; }
.pic.dots.row { width: auto; height: auto; display: flex; gap: 14px; padding: 22px; }
.pic.dots.row .dot { position: relative; margin: 0; }
.pic.dots .dot.sel { box-shadow: 0 0 0 5px #F9A826; }
.pic .badge { pointer-events: none; }
.pic.dots .dot .badge { top: -30px; }
.pic.fingers { width: 190px; height: 210px; }
/* a hand seen from the palm side: thumb on the left, then index, middle (tallest), ring, pinky (shortest).
   Raised fingers are tall with an outline, folded ones are short dark stubs. */
.pic.fingers .palm { position: absolute; left: 46px; bottom: 6px; width: 112px; height: 98px; border-radius: 30px 30px 38px 38px; background: linear-gradient(#FFD9B8, #EDA477); }
.pic.fingers .finger { position: absolute; width: 25px; border-radius: 13px; border: 2px solid #D98E5C; padding: 0; background: linear-gradient(#FFE1C6, #F0AE84); }
.pic.fingers .finger.down { height: 26px; background: #C98E68; border-color: #B27552; }
.pic.fingers .index  { left: 50px; bottom: 94px; } .pic.fingers .index.up  { height: 80px; }
.pic.fingers .middle { left: 77px; bottom: 94px; } .pic.fingers .middle.up { height: 90px; }
.pic.fingers .ring   { left: 104px; bottom: 94px; } .pic.fingers .ring.up   { height: 82px; }
.pic.fingers .pinky  { left: 131px; bottom: 94px; } .pic.fingers .pinky.up  { height: 66px; }
.pic.fingers .thumb  { left: 38px; bottom: 36px; transform: rotate(-38deg); transform-origin: bottom right; }
.pic.fingers .thumb.up { height: 66px; }
.pic.fingers .thumb.down { height: 24px; left: 40px; bottom: 50px; }
.pic.fingers .finger.sel { box-shadow: 0 0 0 4px #F9A826; }
.pic.fingers .finger .badge { top: -32px; }
.pic.objects { width: 240px; height: 170px; }
.pic.objects .obj { position: absolute; width: 74px; height: 74px; transform: translate(-50%, -50%); }
.pic.objects .s0 { left: 18%; top: 28%; } .pic.objects .s1 { left: 50%; top: 28%; } .pic.objects .s2 { left: 82%; top: 28%; }
.pic.objects .s3 { left: 34%; top: 74%; } .pic.objects .s4 { left: 66%; top: 74%; }
.numcard { display: grid; place-items: center; min-width: 120px; height: 140px; padding: 0 18px; border-radius: 24px; border: 4px solid var(--navy); background: #fff; color: var(--navy); font-size: 96px; font-weight: 700; line-height: 1; }
.stage.numpic { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.stage .options { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.stage .options .group, .stage.match .mpic { padding: 10px; border-radius: 22px; border: 3px solid var(--line); background: #fff; cursor: pointer; }
.stage .options .pic.dots { width: 150px; height: 150px; } .stage .options .pic.dots .dot { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.stage .options .pic.objects { width: 190px; height: 140px; } .stage .options .pic.objects .obj { width: 58px; height: 58px; }
.stage .options .pic.fingers { transform: scale(.82); margin: -16px -14px; }
.stage.match { display: flex; gap: 24px; justify-content: center; align-items: center; }
.mcol { display: flex; flex-direction: column; gap: 12px; }
.mcol.pics .pic.dots { width: 120px; height: 120px; } .mcol.pics .pic.dots .dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.mcol.pics .pic.dots.row { width: auto; height: auto; padding: 12px; gap: 8px; }
.mcol.pics .pic.objects { width: 170px; height: 112px; } .mcol.pics .pic.objects .obj { width: 48px; height: 48px; }
.mcol.pics .pic.fingers { transform: scale(.62); margin: -40px -32px; }
.mnum { width: 96px; height: 96px; border-radius: 22px; border: 4px solid var(--line); background: #fff; color: var(--navy); font-size: 60px; font-weight: 700; }
.mnum.active { box-shadow: 0 0 0 5px #F9A826; }
.ear { width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; }
.solpair { display: flex; gap: 30px; align-items: center; justify-content: center; }
@media (max-width: 560px) {
  .stage.match { gap: 12px; } .mnum { width: 76px; height: 76px; font-size: 46px; }
  .stage .options .pic.objects { width: 150px; height: 112px; } .stage .options .pic.objects .obj { width: 46px; height: 46px; }
}

.writing { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.writing a.btn { text-decoration: none; display: inline-flex; align-items: center; min-height: 52px; font-size: 18px; }

/* guardian report: timed round per numeral */
/* timed round per numeral: the chart takes the width it has (up to 44 px a bar, set inline), columns may shrink to fit
   11 bars of "0+10" on a phone, and each time sits on top of its own bar — room above the tallest bar so it never reaches
   the line of text above (Chai 2569-10-17: bars ran out of the panel, times overlapped the text) */
.minibars { position: relative; display: flex; gap: 6px; align-items: flex-end; height: 64px; margin: 20px 0 26px 92px; }
.minibars div { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.minibars i { position: relative; width: 60%; max-width: 26px; background: #F2A23A; border-radius: 4px 4px 0 0; }
.minibars i.ok { background: var(--green); }
.minibars b { position: absolute; bottom: -20px; font-size: 13px; color: var(--navy); white-space: nowrap; }
.minibars.dense b { font-size: 10.5px; bottom: -17px; }
.minibars small { position: absolute; z-index: 1; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1px; padding: 0 2px; background: #fff; border-radius: 3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.minibars .std { position: absolute; left: 0; right: 0; border-top: 2px dashed #7C83A0; }
@media (max-width: 560px) { .minibars { margin-left: -62px; gap: 4px; } }    /* phones: use the width under the face too */

/* 0 and 6-9 (รู้จักตัวเลข 6–9 และ 0): ten-frame dots · two hands · objects in rows of five on a tray (empty for zero) */
.pic.dots.frame { width: auto; height: auto; display: grid; grid-template-columns: repeat(5, 38px); grid-auto-rows: 38px; gap: 5px; padding: 12px; border-radius: 18px; }
.pic.dots.frame .cell { position: relative; border: 2px solid #C9CEDF; border-radius: 8px; }
.pic.dots.frame .cell .dot { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.stage .options .pic.dots.frame, .mcol.pics .pic.dots.frame { width: auto; height: auto; }
.stage .options .pic.dots.frame { grid-template-columns: repeat(5, 28px); grid-auto-rows: 28px; gap: 4px; padding: 9px; }
.stage .options .pic.dots.frame .cell .dot { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }
.mcol.pics .pic.dots.frame { grid-template-columns: repeat(5, 22px); grid-auto-rows: 22px; gap: 3px; padding: 7px; }
.mcol.pics .pic.dots.frame .cell .dot { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.pic.hands { display: flex; gap: 4px; align-items: flex-end; }
.pic.hands > .pic.fingers { transform: scale(.8); margin: -21px -19px; }
.stage .options .pic.hands > .pic.fingers { transform: scale(.62); margin: -40px -36px; }
.mcol.pics .pic.hands > .pic.fingers { transform: scale(.5); margin: -52px -47px; }
.pic.objects.five { width: 300px; height: 150px; background: #F3F5FB; border: 2px solid #D3D8E8; border-radius: 22px; }
.pic.objects.five .obj { width: 52px; height: 52px; }
.pic.objects.five .f0, .pic.objects.five .f5 { left: 12%; } .pic.objects.five .f1, .pic.objects.five .f6 { left: 31%; }
.pic.objects.five .f2, .pic.objects.five .f7 { left: 50%; } .pic.objects.five .f3, .pic.objects.five .f8 { left: 69%; }
.pic.objects.five .f4, .pic.objects.five .f9 { left: 88%; }
.pic.objects.five .f0, .pic.objects.five .f1, .pic.objects.five .f2, .pic.objects.five .f3, .pic.objects.five .f4 { top: 30%; }
.pic.objects.five .f5, .pic.objects.five .f6, .pic.objects.five .f7, .pic.objects.five .f8, .pic.objects.five .f9 { top: 72%; }
.stage .options .pic.objects.five { width: 220px; height: 112px; } .stage .options .pic.objects.five .obj { width: 38px; height: 38px; }
.mcol.pics .pic.objects.five { width: 190px; height: 96px; } .mcol.pics .pic.objects.five .obj { width: 32px; height: 32px; }
.review-clips { display: grid; gap: 8px; } .review-clips .btn { width: 100%; min-height: 44px; font-size: 15px; line-height: 1.25; padding: 6px 10px; }

/* เลขไทย: the looped face (heads, as in the clip and the writing corner); Thai digits look smaller, so a little larger */
.th { font-family: "Noto Sans Thai Looped", "Noto Sans Thai", sans-serif; }
.num.th { font-size: clamp(34px, 6.8vw, 52px); }
.answer.many .num.th { font-size: clamp(25px, 4.4vw, 37px); }
.numcard.th { font-size: 104px; }
.numcard.mini { min-width: 76px; height: 86px; font-size: 58px; border-width: 3px; border-radius: 18px; padding: 0 10px; }
.numcard.mini.th { font-size: 64px; }

/* เขียนตัวเลข: picture or numeral -> the slot the child writes in, digit by digit */
.compose-row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.compose-row .eq { font-size: 54px; color: var(--muted); }
.slot { min-width: 150px; height: 140px; padding: 0 18px; border: 4px dashed var(--navy); border-radius: 24px; background: #fff; display: grid; place-items: center;
        color: var(--navy); font-size: 96px; font-weight: 700; line-height: 1; }
.slot.th { font-size: 104px; }
.slot.right { border-style: solid; border-color: var(--green); color: var(--green); }
.slot.wrong { border-style: solid; border-color: var(--red); color: var(--red); animation: shake .3s; }
.slot.picked { border-style: solid; border-color: var(--amber); }
.num.erase { font-size: 26px; }
#answer #checkBtn { margin-left: 6px; }
@media (max-width: 600px) { .slot { min-width: 110px; height: 104px; font-size: 70px; } .slot.th { font-size: 76px; } .compose-row .eq { font-size: 40px; } }
.stage.compose { display: flex; align-items: center; justify-content: center; }

/* หลักสิบ หลักหน่วย: sticks, bundles of ten (tied with a red band), the place chart */
.pic.sticks { --stick: linear-gradient(90deg, #E9B872, #C98B3D); }
.pic.sticks .stick { width: 13px; height: 76px; border: none; border-radius: 7px; padding: 0; background: var(--stick); box-shadow: inset -2px 0 0 rgba(0,0,0,.12); }
.pic.sticks .stick.new { background: linear-gradient(90deg, #FDBA74, #F97316); }
.pic.sticks .stick.sel { box-shadow: 0 0 0 4px #F9A826; }
.pic.sticks .stick .badge { top: -30px; }
.pic.sticks .bundle { position: relative; display: flex; gap: 1px; padding: 0 3px; }
.pic.sticks .bundle i { width: 7px; height: 76px; border-radius: 4px; background: var(--stick); }
.pic.sticks .bundle .band { position: absolute; left: -2px; right: -2px; top: 44%; height: 9px; border-radius: 4px; background: #E5484D; }
.pic.sticks .bundle.sel { outline: 4px solid #F9A826; outline-offset: 3px; border-radius: 6px; }
.pic.sticks .bundle .badge { top: -32px; }
.pic.sticks.chart, .pic.sticks.plain { display: flex; align-items: stretch; }
.pic.sticks.chart { border: 3px solid #C9CEDF; border-radius: 18px; background: #fff; overflow: visible; }
.pic.sticks .col { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; align-content: center; min-width: 110px; min-height: 120px; padding: 30px 14px 14px; }
.pic.sticks.plain .col { padding: 12px 8px; min-height: 96px; }
.pic.sticks.chart .col.tens { background: #EEF2FF; border-right: 3px solid #C9CEDF; border-radius: 15px 0 0 15px; }
.pic.sticks.chart .col.ones { min-width: 150px; }
.pic.sticks .lab { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--muted); font-weight: 600; }
.pic.sticks .loose-row { display: grid; grid-template-columns: repeat(5, 13px); gap: 8px 9px; }
.pic.sticks.loose { position: relative; width: 320px; height: 230px; background: #FFF8EC; border: 2px solid #F0DDB8; border-radius: 18px; }
.pic.sticks.loose .stick { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); height: 70px; }
.stage .options .pic.sticks, .mcol.pics .pic.sticks { zoom: .62; }
.numcard.placed { display: flex; gap: 6px; align-items: flex-start; padding: 10px 18px 26px; height: auto; }
.numcard.placed .dg { position: relative; display: inline-block; padding: 0 10px; border-radius: 14px; border: 4px solid transparent; }
.numcard.placed .dg.hi { border-color: #F97316; background: #FFF4E8; }
.numcard.placed .dg small { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.compose-row .op { font-size: 54px; color: var(--navy); font-weight: 700; }
.stage.compose .pic.sticks, .stage.numpic > .pic.sticks { zoom: 1.3; }

/* the written numeral: ONE frame, one dashed underline per digit (Chai 2569-10-15) */
.slot { min-width: 0; height: auto; display: inline-flex; gap: 16px; align-items: flex-end; padding: 10px 22px 18px; border: 4px solid var(--navy); border-radius: 22px; background: #fff; }
.slot .cell { position: relative; width: 70px; height: 104px; display: grid; place-items: end center; border: none; border-bottom: 5px dashed #9AA6C8; border-radius: 0; background: none;
              color: var(--navy); font-size: 88px; font-weight: 700; line-height: 1; padding-bottom: 4px; }
.slot .cell:not(.blank) { border-bottom-style: solid; border-bottom-color: var(--navy); }
.slot .cell.next { animation: nextline 1.1s ease-in-out infinite; }
@keyframes nextline { 50% { border-bottom-color: #F97316; } }
.slot.places { padding-bottom: 34px; }
.slot.n4 { gap: 10px; } .slot.n4 .cell { width: 54px; font-size: 72px; }   /* 08-03-2: kg + grams in one frame */
@media (max-width: 600px) { .slot.n4 { gap: 6px; padding: 8px 10px 14px; } .slot.n4 .cell { width: 40px; height: 70px; font-size: 52px; } .slot.n4 .qrsep { font-size: 16px; } }
.slot .cell small { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.slot.th .cell { font-size: 94px; }
.slot.right { border-color: var(--green); } .slot.right .cell { color: var(--green); border-bottom-color: var(--green); }
.slot.wrong { border-color: var(--red); animation: shake .3s; } .slot.wrong .cell { color: var(--red); border-bottom-color: var(--red); }
.slot.picked { border-color: var(--amber); }
@media (max-width: 600px) { .slot { gap: 10px; padding: 8px 14px 14px; } .slot .cell { width: 52px; height: 78px; font-size: 64px; } .slot.th .cell { font-size: 68px; } }
/* regroup: the added sticks wait outside the chart; once answered the ten is tied and moved up */
.regroup { display: flex; align-items: center; gap: 14px; }
.regroup .op { font-size: 48px; font-weight: 700; color: var(--navy); }
.pic.sticks.add-pile { display: flex; gap: 9px; padding: 14px; border: 3px dashed #F5B57A; border-radius: 16px; background: #FFF8EC; }
.pic.sticks.tied { animation: tied .5s ease-out; }
@keyframes tied { from { transform: scale(.94); opacity: .4; } }
.stage.compose .regroup .pic.sticks { zoom: 1.3; }
/* bundles wrap two to a row, so a picture of many bundles (the digits swapped) stays inside its option */
.pic.sticks .col.tens { max-width: 210px; }
.pic.sticks.loose { width: 360px; height: 260px; }
.pic.sticks.loose .stick { height: 62px; }
.stage .options .group { overflow: hidden; }

/* นับทีละสิบ: many bundles wrap four to a row in the main picture; the counting row with one gap */
.stage.compose .pic.sticks .col.tens, .stage.numpic > .pic.sticks .col.tens, .regroup .pic.sticks .col.tens { max-width: 350px; }
.stage.compose .compose-row .numcard.mini { font-size: 46px; min-width: 84px; }

.pic.sticks .col.tens { display: grid; grid-template-columns: repeat(var(--per5, 1), auto); gap: 8px; justify-content: center; align-content: center; max-width: none; }
.stage .options .pic.sticks .col.tens, .mcol.pics .pic.sticks .col.tens { grid-template-columns: repeat(var(--per3, 1), auto); }
.stage.compose .pic.sticks .col.tens, .stage.numpic > .pic.sticks .col.tens, .regroup .pic.sticks .col.tens { max-width: none; }
.stage.compose .regroup .pic.sticks { zoom: 1; } .regroup { flex-wrap: wrap; justify-content: center; }

/* เปรียบเทียบจำนวน */
.stage.compare { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.stage.compare .objrow { display: flex; align-items: center; justify-content: flex-start; align-self: flex-start; margin-left: 6%; padding: 12px 16px; min-height: 84px; }
.stage.compare .objrow .obj { position: relative; width: 48px; height: 48px; flex: none; }
.stage.compare .objrow .obj.paired { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 50%; }
.stage.compare .objrow .obj.extra { outline: 4px solid var(--red); outline-offset: 3px; border-radius: 50%; }
.num.wide { width: auto; padding: 0 26px; font-size: 30px; }
.cmp-row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cmp-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cmp-side .pic.sticks { zoom: .8; }
.cmp-side .pic.dots.frame { zoom: .9; }
.numcard.cmpcard .dg { padding: 0 4px; border-radius: 12px; transition: background .2s; }
.numcard.cmpcard .dg.hi { background: #FFE2C2; color: #C2410C; }
.numcard.cmpcard .dg.hi2 { background: #DCEBFF; color: #1D4ED8; }
.cmp-row .group.pick { padding: 0; border: none; background: none; }
.cmp-row .group.pick .numcard, .cmp-row > .group.pick { cursor: pointer; }
.cmp-row .numcard.group.pick { border: 4px solid var(--navy); background: #fff; }
.cmp-row .numcard.group.pick.right, .options .numcard.group.right { border-color: var(--green); color: var(--green); }
.cmp-row .numcard.group.pick.wrong, .options .numcard.group.wrong { border-color: var(--red); color: var(--red); }
.signbox { min-width: 96px; height: 110px; display: grid; place-items: center; border: 4px dashed #9AA6C8; border-radius: 22px; background: #fff; color: #9AA6C8; font-size: 74px; font-weight: 700; line-height: 1; }
.signbox.shown { border-style: solid; border-color: var(--navy); color: var(--navy); }
.signbox.right { border-color: var(--green); color: var(--green); }
.signbox.wrong { border-color: var(--red); color: var(--red); animation: shake .3s; }
.num.sign { font-size: 52px; }
.cmp-row .or { font-size: 26px; color: var(--muted); }
.blank-card { color: #9AA6C8; border-style: dashed !important; }
.blank-card.right { color: var(--green); border-color: var(--green) !important; border-style: solid !important; }
/* compare: a row is one line at its own length (the trap is the spread-out row), never wrapped or capped like a .group */
.stage.compare .objrow.group { flex: none; max-width: none; min-width: 0; min-height: 0; flex-wrap: nowrap; justify-content: flex-start; align-content: normal; width: auto; }
.stage.compare .objrow .obj { width: 48px; }
.numcard.cmpcard { display: flex; align-items: center; justify-content: center; gap: 0; }
.cmp-row .numcard.group.pick { flex: none; min-width: 120px; max-width: none; min-height: 0; padding: 0 18px; flex-wrap: nowrap; }
.options .numcard.cmpcard.group { flex: none; min-height: 0; min-width: 90px; max-width: none; flex-wrap: nowrap; border: 3px solid var(--navy); background: #fff; }

/* เรียงลำดับจำนวน: items above, the places below (piles become stairs) */
.stage.order { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.orow { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; }
.orow .group.pick { flex: none; min-width: 0; max-width: none; min-height: 0; padding: 8px; flex-wrap: nowrap; }
.orow .group.used { opacity: .25; pointer-events: none; }
.oitem { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oitem .pic.sticks { zoom: .6; } .oitem .pic.dots { zoom: .7; }
.pile { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; }
.pile .obj { width: 40px; height: 30px; flex: none; position: relative; }
.pile .obj img { width: 40px; height: 40px; margin-top: -6px; }
.dirlabel { font-size: 20px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.oslots { display: flex; align-items: flex-end; gap: 14px; padding: 12px 16px; border: 4px solid var(--navy); border-radius: 22px; background: #fff; min-height: 110px; }
.oslot { min-width: 84px; min-height: 84px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 5px dashed #9AA6C8; padding-bottom: 6px; }
.oslot.next { animation: nextline 1.1s ease-in-out infinite; }
.oslot:not(:empty) { border-bottom-style: solid; border-bottom-color: var(--navy); }
.oslots.right { border-color: var(--green); } .oslots.right .oslot { border-bottom-color: var(--green); }
.oslots.wrong { border-color: var(--red); animation: shake .3s; }
.oslots.picked { border-color: var(--amber); }
.oslot .oitem .pic { display: none; }                 /* in the places only the numeral (piles keep their height) */
.oslot .pile .obj { width: 30px; height: 22px; } .oslot .pile .obj img { width: 30px; height: 30px; margin-top: -4px; }
/* number line */
.orow.online { width: min(92%, 720px); }
.nline { position: relative; width: 100%; height: 150px; }
.nline .axis { position: absolute; left: 0; right: 0; bottom: 40px; height: 4px; background: var(--navy); border-radius: 2px; }
.nline .axis::after { content: ''; position: absolute; right: -10px; top: -7px; border: 9px solid transparent; border-left: 12px solid var(--navy); }
.nline i { position: absolute; bottom: 34px; width: 2px; height: 16px; margin-left: -1px; background: var(--navy); }
.nline i.big { height: 22px; bottom: 31px; width: 3px; }
.nline b { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: 18px; color: var(--muted); }
.nline .onl { position: absolute; bottom: 62px; transform: translateX(-50%); padding: 0; border: none; background: none; }
.nline .onl::after { content: ''; position: absolute; left: 50%; bottom: -22px; width: 3px; height: 20px; margin-left: -1.5px; background: #F97316; }
.orow.seq { gap: 14px; }
@media (max-width: 600px) { .oslot { min-width: 64px; min-height: 64px; } .orow { gap: 10px; } }
@media (max-width: 600px) { .oslots.n5 { gap: 6px; padding: 10px 8px; } .oslots.n5 .oslot { flex: 1 1 0; min-width: 0; min-height: 56px; } .oslots.n5 .oslot .oitem { zoom: .62; } }
@media (max-width: 600px) { .orow .oitem .pic.blocks { zoom: .72; } }   /* three-digit blocks: two cards a row */

/* บวกให้ได้ 5 / 10: the equation, the blank, the two-colour hand */
.stage.bond { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.eqrow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.eqrow .numcard.mini { min-width: 84px; height: 100px; font-size: 64px; }
.eqrow.given { opacity: .75; } .eqrow.given .numcard.mini { min-width: 60px; height: 70px; font-size: 42px; } .eqrow.given .eqop { font-size: 40px; }
.eqop { font-size: 56px; font-weight: 700; color: var(--navy); }
.eqblank { min-width: 84px; height: 100px; display: grid; place-items: center; border: 4px dashed #9AA6C8; border-radius: 20px; background: #fff; color: #9AA6C8; font-size: 64px; font-weight: 700; }
.eqblank.filled { border-style: solid; border-color: var(--navy); color: var(--navy); }
.eqblank.right { border-color: var(--green); color: var(--green); }
.eqblank.wrong { border-color: var(--red); color: var(--red); animation: shake .3s; }
.pic.fingers .finger.fa { background: linear-gradient(#FFD2A8, #F97316); border-color: #C2410C; }
.pic.fingers .finger.fb { background: linear-gradient(#CFE3FF, #3B82F6); border-color: #1D4ED8; }
.paircard { min-width: 150px; min-height: 0; padding: 18px 22px; font-size: 48px; font-weight: 700; color: var(--navy); flex: none; }
@media (max-width: 600px) { .eqrow { gap: 8px; } .eqrow .numcard.mini, .eqblank { min-width: 60px; height: 76px; font-size: 46px; } .eqop { font-size: 40px; } }
.stage.bond .bond-hand { zoom: 1.45; }
.stage.bond .bond-hand.hands { zoom: 1.2; }
@media (max-width: 600px) { .stage.bond .bond-hand.hands { zoom: .85; } }      /* two hands (บวกให้ได้ 10) fit a phone */

/* บวกไม่เกิน 10: two plates put together, or the pond with fish swimming in */
.addpic { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.addgrp { position: relative; display: grid; grid-template-columns: repeat(var(--cols), auto); gap: 4px; padding: 14px 16px; min-width: 70px; min-height: 64px;
  align-content: center; justify-content: center; border-radius: 40px; background: #F3F4FA; border: 3px solid #D5D9EA; box-shadow: inset 0 0 0 8px #FBFBFE; }
.addgrp .obj { width: clamp(30px, 6.4vw, 60px); }
.addgrp.pond { background: #DDEFFC; border-color: #9CCBF0; box-shadow: none; border-radius: 30px; }
.addgrp.incoming { background: transparent; border: 3px dashed #9CCBF0; }
.addgrp > .badge { position: absolute; top: -14px; left: -10px; min-width: 40px; height: 40px; border-radius: 20px; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 24px; display: grid; place-items: center; animation: pop .25s ease-out; }
.addsign { font-size: 52px; font-weight: 700; color: var(--navy); }
.addpic.addon .addsign { color: #3B82F6; }
.come { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.come .cap { font-size: 16px; font-weight: 600; color: #2B6CB0; }
.options.sentences { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.options.sentences .paircard { font-size: 38px; }
@media (max-width: 600px) {
  .addpic { gap: 4px; } .addgrp { padding: 8px 7px; gap: 2px; min-width: 44px; border-width: 2px; border-radius: 22px; box-shadow: inset 0 0 0 4px #FBFBFE; } .addgrp .obj { width: 23px; }
  .addsign { font-size: 26px; } .options.sentences { gap: 8px; } .options.sentences .paircard { font-size: 28px; min-width: 0; padding: 12px 14px; }
}

/* การบวกข้ามสิบ: two ten-frames (orange = the first number, blue = the second), the numbers in the same colours */
.mtpic { display: flex; justify-content: center; align-items: flex-start; gap: 28px; margin-bottom: 14px; }
.mtcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tenf { --c: clamp(34px, 6vw, 58px); display: grid; grid-template-columns: repeat(5, var(--c)); gap: 4px; padding: 6px; border: 4px solid transparent; border-radius: 14px; }
.tenf.full { border-color: var(--green); }
.tcell { position: relative; width: var(--c); height: var(--c); display: grid; place-items: center; border: 2px solid #6B7390; border-radius: 6px; background: #fff; }
.tcell .obj { width: 92%; }
.tcell.need { background: #FFF4D6; border-color: var(--amber); }
.tcell > .badge { position: absolute; top: -12px; right: -10px; min-width: 28px; height: 28px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 700; font-size: 16px;
  display: grid; place-items: center; animation: pop .25s ease-out; }
.tcell .obj .badge { min-width: 28px; height: 28px; font-size: 16px; top: -12px; right: -10px; }
.obj.moved { animation: pop .4s ease-out; }
.mtlab { font-size: 34px; font-weight: 700; line-height: 1.2; }
.mtlab.org { color: #F97316; } .mtlab.blu { color: #3B82F6; } .mtlab.ten { color: #15803D; }
.mtlab.say { font-size: 20px; }
.numcard.org { color: #F97316; } .numcard.blu { color: #3B82F6; } .numcard.ten { color: #15803D; }
.compose-row.mt { gap: 12px; }
.stage.compose .compose-row.mt .numcard.mini { min-width: 72px; height: 90px; font-size: 58px; }
.compose-row.mt .op { font-size: 46px; }
.compose-row.mt .slot { padding: 6px 14px 10px; gap: 10px; }
.compose-row.mt .slot .cell { width: 46px; height: 74px; font-size: 60px; }
.split { display: flex; flex-direction: column; align-items: center; }
.split svg { width: 170px; height: 48px; }
.split path { stroke: #3B82F6; stroke-width: 4; fill: none; stroke-linecap: round; }
.split .leaves { display: flex; gap: 70px; align-items: flex-end; }
@media (max-width: 600px) {
  .mtpic { gap: 10px; } .tenf { --c: 26px; gap: 2px; padding: 3px; } .mtlab { font-size: 26px; } .mtlab.say { font-size: 15px; }
  .compose-row.mt { gap: 6px; } .stage.compose .compose-row.mt .numcard.mini { min-width: 46px; height: 62px; font-size: 38px; } .compose-row.mt .op { font-size: 30px; }
  .compose-row.mt .slot .cell { width: 34px; height: 54px; font-size: 42px; } .compose-row.mt .slot { padding: 4px 10px 8px; gap: 6px; }
  .split .leaves { gap: 44px; } .split svg { width: 130px; height: 40px; }
}
.stage.mtstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.stage.mtstage .mtpic { margin-bottom: 0; }
@media (max-width: 600px) { .tcell .obj .badge, .tcell > .badge { min-width: 19px; height: 19px; font-size: 11px; top: -9px; right: -8px; padding: 0 3px; } }
@media (max-width: 600px) { .compose-row.mt { flex-wrap: nowrap; gap: 4px; } .stage.compose .compose-row.mt .numcard.mini { min-width: 0; padding: 0 8px; height: 58px; font-size: 36px; } .compose-row.mt .op { font-size: 26px; } }

/* บวกเลขสองหลัก: the chart (upper half = the first number, teal; lower half = the second, blue) beside the column */
.stage.vastage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.pvadd { display: flex; border: 3px solid #C9CEDF; border-radius: 18px; background: #fff; }
.pcol { position: relative; display: flex; flex-direction: column; min-width: 140px; padding: 26px 10px 8px; }
.pcol.tens { border-right: 3px solid #C9CEDF; background: #F4F6FC; border-radius: 15px 0 0 15px; }
.pcol .lab { position: absolute; top: 5px; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--muted); font-weight: 600; }
.pcol.focus { box-shadow: inset 0 0 0 4px #F9A826; }
.half { flex: 1; min-height: 62px; display: flex; flex-wrap: wrap; gap: 6px; align-content: center; justify-content: center; padding: 6px 0; }
.half + .half { border-top: 2px dashed #B9C0D6; }
.half.tea { --k: #14917F; } .half.blu { --k: #2F6FD6; }
.pcol.tens .half { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 5px; }
.hb { position: relative; width: 96px; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--k) 0 8px, transparent 8px 10px); }
.hb::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: #EA7317; }
.half.carryrow { --k: #14917F; flex: 0 0 auto; min-height: 0; border-top: none !important; }
.hb.carried { outline: 3px solid #EA7317; outline-offset: 4px; animation: pop .4s ease-out; }
.st { position: relative; width: 9px; height: 42px; border-radius: 5px; background: var(--k); }
.st.sel { box-shadow: 0 0 0 3px #F9A826; }
.st .badge { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.vadd { display: grid; grid-template-columns: 40px 62px 62px; align-items: center; justify-items: center; padding: 6px 16px 12px; border: 3px solid #C9CEDF; border-radius: 18px; background: #fff; }
.vc { font-size: 54px; font-weight: 700; line-height: 1.1; min-height: 8px; }
.vc.lab { font-size: 15px; color: var(--muted); font-weight: 600; }
.vc.tea { color: #14917F; } .vc.blu { color: #2F6FD6; } .vc.op { color: #6D4AC7; font-size: 46px; } .vc.ans { color: #6D4AC7; height: 62px; }
.vc.carry { min-width: 28px; height: 28px; font-size: 20px; color: #EA7317; display: grid; place-items: center; }
.vc.carry.on { border: 2px solid #EA7317; border-radius: 6px; }
.vc.focus { background: #FFF4D6; border-radius: 8px; }
.vline { grid-column: 1 / 4; justify-self: stretch; height: 3px; background: var(--navy); margin: 4px 0; }
/* the answer of a column sits between the single line and a double line, as in the textbook (Chai 2569-10-23) */
.vline2 { grid-column: 1 / 4; justify-self: stretch; height: 9px; border-top: 3px solid var(--navy); border-bottom: 3px solid var(--navy); margin: 4px 0 2px; box-sizing: border-box; }
.stage.compose .vadd .slot { grid-column: 2 / 4; justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px 0 8px; border-width: 3px; min-width: 0; }
.stage.compose .vadd .slot .cell { width: auto; margin: 0 9px; height: 62px; font-size: 50px; }
.stage.compose .vadd .slot .cell.focus { background: #FFF4D6; }
.compose-row.va { gap: 12px; }
.stage.compose .compose-row.va .numcard.mini { min-width: 84px; height: 90px; font-size: 54px; }
.numcard.tea { color: #14917F; }
.options.vchoices { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.vcard { flex: none; min-width: 0; min-height: 0; padding: 8px; }
.vcard .vadd { border: none; }
@media (max-width: 600px) {
  .stage.vastage { gap: 10px; } .pcol { min-width: 112px; padding: 22px 6px 6px; } .hb { width: 72px; height: 10px; } .st { width: 7px; height: 32px; } .half { min-height: 44px; gap: 4px; }
  .vadd { grid-template-columns: 30px 46px 46px; padding: 4px 10px 8px; } .vc { font-size: 40px; } .vc.op { font-size: 34px; } .vc.ans { height: 48px; }
  .stage.compose .vadd .slot .cell { height: 48px; font-size: 38px; margin: 0 6px; }
  .stage.compose .compose-row.va .numcard.mini { min-width: 0; padding: 0 8px; height: 58px; font-size: 36px; } .compose-row.va { gap: 4px; flex-wrap: nowrap; }
  .vcard .vadd { grid-template-columns: 26px 40px 40px; } .vcard .vc { font-size: 34px; }
}
@media (min-width: 601px) { .pvadd { zoom: 1.3; } }
.stage.compose .vadd .slot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stage.compose .vadd .slot .cell { margin: 0 7px; min-width: 0; }
@media (max-width: 600px) { .stage.compose .vadd .slot .cell { margin: 0 4px; } }
.vcard .vc.lab { font-size: 13px; }
@media (max-width: 600px) { .compose-row.va .op { font-size: 30px; } .stage.compose .compose-row.va > .slot .cell { width: 38px; height: 56px; font-size: 42px; } .stage.compose .compose-row.va > .slot { padding: 4px 10px 8px; gap: 6px; } }
@media (max-width: 600px) { .hb { height: 12px; } .hb::after { height: 3px; margin-top: -1.5px; } }

/* การลบ: one set — taken away = grey in an orange dashed box, left = green box; มีอยู่ blue / เอาออก orange / เหลือ green */
.sbrow { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 26px; }
.sbhave { color: #2F6FD6; font-weight: 700; font-size: 20px; }
.sbitems { display: flex; gap: 8px; padding-top: 8px; border-top: 3px solid #2F6FD6; }
.sbkeep, .sbgone { position: relative; display: flex; gap: 6px; padding: 6px 8px; border: 3px solid transparent; border-radius: 14px; }
.sbrow .obj { width: clamp(40px, 8vw, 70px); }
.sbgone.on, .sbgone.box { border: 3px dashed #F59E0B; }
.sbgone.on .obj img, .sbrow .obj.grey img { filter: grayscale(1); opacity: .4; }
.sbkeep.on { border-color: #16A34A; }
.sbgone.on::after, .sbkeep.on::after { content: attr(data-lab); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font-weight: 700; font-size: 17px; }
.sbgone.on::after { color: #EA7317; } .sbkeep.on::after { color: #16A34A; }
.sbcount { position: absolute; top: -6px; right: -54px; min-width: 46px; height: 46px; border-radius: 23px; background: var(--navy); color: #fff; font-size: 26px; font-weight: 800; display: grid; place-items: center; }
.sbhand { position: relative; }
.stage.bond .sbhand { zoom: 1.4; } .stage.bond .sbhand .sbcount { zoom: .7; right: -60px; }
.pic.fingers .finger.fg { background: linear-gradient(#F1F2F5, #B4B8C2); border-color: #8A8F9C; }
.numcard.sbA { color: #2F6FD6; } .numcard.sbB { color: #EA7317; }
@media (max-width: 600px) { .sbrow .obj { width: 38px; } .sbkeep, .sbgone { gap: 3px; padding: 4px; } .sbcount { right: -10px; top: -40px; } .stage.bond .sbhand { zoom: 1.1; } }
/* the minus as a bar (the font's minus is a short hyphen) */
.eqop.mn { display: inline-block; width: 34px; height: 7px; border-radius: 4px; background: var(--navy); color: transparent; overflow: hidden; font-size: 0; }
.paircard .mn { display: inline-block; width: .6em; height: .12em; border-radius: .06em; background: currentColor; vertical-align: .32em; }
@media (max-width: 600px) { .eqop.mn { width: 24px; height: 5px; } }
.feedback .mn { display: inline-block; width: .6em; height: .12em; border-radius: .06em; background: currentColor; vertical-align: .3em; }
@media (max-width: 600px) { .sbrow .sbcount { top: -6px; right: 0; width: 38px; min-width: 38px; height: 38px; font-size: 22px; } .stage.bond .sbhand .sbcount { top: 6px; right: -44px; } }
.paircard .mn { vertical-align: middle; }
.paircard { align-items: center; } .paircard .mn { margin: 0 .28em; }
/* ลบออกจากสิบ: candies on ten-frames, the taken grey in place */
.sbframes .mtpic { margin: 6px 0 0; }
.sbframes .tcell .obj { width: 92%; }
.sbframes .obj.grey img { filter: grayscale(1); opacity: .4; }
.sbleft { color: #16A34A; font-weight: 700; font-size: 19px; }
.mhead { font-size: 16px; font-weight: 700; color: var(--muted); text-align: center; }
.mcol.nums .mhead { color: #EA7317; } .mcol.pics .mhead { color: #16A34A; }
.stage.bond .sbhand.hands { zoom: 1.05; }
@media (max-width: 600px) { .stage.bond .sbhand.hands { zoom: .78; } .stage.bond .sbhand.hands .sbcount { zoom: 1; top: -14px; right: 0; } }
/* ลบไม่เกิน 10: up to ten in the row (sized to fit), the pond, หาส่วนต่าง on one grid */
.sbrow .obj { width: min(clamp(40px, 8vw, 70px), calc((100vw - 150px) / var(--n, 5))); }
.sbrow.pond .sbitems { background: #DDEFFC; border-radius: 40px; padding: 8px 12px; }
.sbdiff { display: flex; flex-direction: column; gap: 10px; --d: clamp(24px, 5.2vw, 52px); }
.drow { display: flex; align-items: center; gap: 10px; }
.dwho { width: 46px; font-weight: 700; font-size: 20px; color: var(--navy); text-align: right; }
.dcells { display: grid; grid-template-columns: repeat(10, var(--d)); gap: 6px; }
.dcells .obj { width: var(--d); }
.dcells .obj.paired { outline: 3px solid #16A34A; border-radius: 10px; }
.sbdiff .obj.grey img { filter: grayscale(1); opacity: .4; }
@media (max-width: 600px) { .sbdiff { --d: 22px; } .dcells { gap: 4px; } .dwho { width: 34px; font-size: 16px; } .dcells .obj .badge { min-width: 20px; height: 20px; font-size: 12px; } }
.sbdiff { --d: clamp(28px, 6.4vw, 62px); } .dwho { font-size: 24px; }
@media (max-width: 600px) { .sbdiff { --d: 22px; } .dwho { font-size: 16px; } }
/* การลบข้ามสิบ: the part over ten boxed (dashed orange), then grey; the frames under the sentence */
.tenf.box { border: 4px dashed #F59E0B; }
.stframes .tcell .obj.sel { outline: 3px solid #F9A826; border-radius: 6px; }
.stframes .sbleft:empty { display: none; }
.stage.sub .split .eqblank { min-width: 70px; height: 86px; font-size: 52px; }
@media (max-width: 600px) { .stage.sub .split .eqblank { min-width: 54px; height: 66px; font-size: 40px; } }
#qText .mn { display: inline-block; width: .6em; height: .12em; border-radius: .06em; background: currentColor; vertical-align: middle; margin: 0 .1em; }
.stage.sub .split .numcard.mini { min-width: 70px; height: 86px; font-size: 52px; }
@media (max-width: 600px) {
  .eqrow.long { gap: 4px; } .eqrow.long .numcard.mini, .eqrow.long .eqblank { min-width: 40px; height: 56px; font-size: 32px; padding: 0 4px; }
  .eqrow.long .eqop { font-size: 28px; } .eqrow.long .eqop.mn { width: 16px; height: 4px; }
  .stage.sub .split .numcard.mini { min-width: 54px; height: 66px; font-size: 40px; }
}
.vc.op .mn { display: inline-block; width: .6em; height: .1em; border-radius: .05em; background: currentColor; vertical-align: middle; }
/* ลบเลขสองหลัก: the lower half "เอาออก" (grey), untying a bundle (orange), the struck digits and the small new ones */
.half.gone { position: relative; min-height: 54px; --k: #B4B8C2; }
.half.gone::before { content: attr(data-lab); position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); }
.v3chart .half.gone { padding-top: 24px; }        /* ป.2: the label "เอาออก" stays above the grey pieces */
.pateq .mn { display: inline-block; width: .55em; height: .11em; border-radius: .05em; background: currentColor; vertical-align: middle; }
.hb.untie { outline: 3px solid #EA7317; outline-offset: 4px; }
.st.new { background: #14917F; animation: pop .35s ease-out; }
.vc.struck { text-decoration: line-through; text-decoration-color: #EA7317; text-decoration-thickness: 5px; }
.vc.carry.ones { min-width: 34px; }
.vc.carry.ones.on { border: 2px solid #EA7317; border-radius: 6px; }
/* ป.2 บทหลัก 02: three places (blocks as in the ป.2 clips) — แผ่นร้อย / แท่งสิบ / หน่วย */
.vadd.v3 { --v3op: 40px; --v3w: 58px; }
.vadd.v3 .vc.blu2 { color: #1D4ED8; }
.vadd.v3 .vc.carry { min-width: 30px; }
.stage.compose .vadd.v3 .slot { display: grid; justify-items: stretch; gap: 0; padding: 4px 0 8px; border-width: 3px; min-width: 0; justify-self: stretch; }
.stage.compose .vadd.v3 .slot .cell { width: auto; min-width: 0; padding: 0; margin: 0 6px; height: 58px; font-size: 48px; }
.v3chart { width: min(100%, 420px); }
.v3chart .pcol { min-width: 0; flex: 1 1 0; }
.v3chart .pcol.hundreds { border-right: 3px solid #C9CEDF; background: #FFF7EC; border-radius: 15px 0 0 15px; }
.v3chart .pcol.tens { border-radius: 0; background: #F2F6FF; }
.v3chart .pcol.ones { background: #F2FBF5; border-radius: 0 15px 15px 0; }
.v3chart .pcol.hundreds .lab { color: #C2410C; } .v3chart .pcol.tens .lab { color: #1D4ED8; } .v3chart .pcol.ones .lab { color: #15803D; }
.v3chart .pcol.tens .half { flex-direction: row; flex-wrap: wrap; align-items: center; }
.v3chart .half { gap: 4px; }
/* subtraction charts with two or four places (ป.2 02-06: 40 − 17 · 1,000 − 245) */
.v3chart .pcol.thousands { border-right: 3px solid #C9CEDF; background: #FDF2F8; border-radius: 15px 0 0 15px; }
.v3chart .pcol.thousands .lab { color: #9D174D; }
.v3chart.n4 .pcol.hundreds { border-radius: 0; }
.v3chart.n2 .pcol.tens { border-right: 3px solid #C9CEDF; border-radius: 15px 0 0 15px; }
.v3chart.n2 { width: min(100%, 300px); }
.th { position: relative; width: 30px; height: 30px; background-color: color-mix(in srgb, var(--k) 30%, white); border: 2px solid var(--k); border-radius: 3px;
      box-shadow: 4px -4px 0 -1px color-mix(in srgb, var(--k) 55%, white); margin: 4px 4px 0 0; }
.th.new { --k: #EA7317; } .half.gone .th { --k: #B4B8C2; }
.fl, .rd, .un { position: relative; background-color: color-mix(in srgb, var(--k) 30%, white); border: 2px solid var(--k); border-radius: 2px; }
.fl { width: 26px; height: 26px; background-image: linear-gradient(var(--k) 1px, transparent 1px), linear-gradient(90deg, var(--k) 1px, transparent 1px); background-size: 2.6px 2.6px; }
.rd { width: 8px; height: 40px; background-image: linear-gradient(var(--k) 1px, transparent 1px); background-size: 100% 4px; }
.un { width: 10px; height: 10px; }
.fl.sel, .rd.sel, .un.sel { box-shadow: 0 0 0 3px #F9A826; }
.fl.carried, .rd.carried { outline: 3px solid #EA7317; outline-offset: 3px; animation: pop .4s ease-out; }
.th.untie, .fl.untie, .rd.untie { outline: 3px solid #EA7317; outline-offset: 3px; }
.fl.new, .rd.new, .un.new { --k: #EA7317; animation: pop .35s ease-out; }   /* unbundled pieces orange, as in clip 02-05 */
.half.gone .fl.new, .half.gone .rd.new, .half.gone .un.new { --k: #B4B8C2; }      /* once taken away: grey like the rest */
@media (max-width: 600px) {
  .vadd.v3 { --v3op: 28px; --v3w: 42px; padding: 4px 8px 8px; }
  .stage.compose .vadd.v3 .slot .cell { height: 46px; font-size: 36px; margin: 0 4px; }
  .v3chart .pcol { padding: 22px 4px 6px; }
  .fl { width: 20px; height: 20px; background-size: 2px 2px; } .rd { width: 7px; height: 32px; } .un { width: 9px; height: 9px; }
}

/* จำนวนพวกเดียวกัน: one row in two colours under the purple bracket; the diagram; sentences in colour */
.stage.ffstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ffabove { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ffpic { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ffwhole { color: #5B3FC4; font-weight: 700; font-size: 19px; padding: 0 18px 2px; border-bottom: 3px solid #5B3FC4; border-left: 3px solid #5B3FC4; border-right: 3px solid #5B3FC4; border-radius: 0 0 8px 8px;
  border-bottom: none; border-top: 3px solid #5B3FC4; border-radius: 8px 8px 0 0; padding-top: 2px; }
.ffrow { display: flex; gap: 6px; }
.ffrow .obj { width: min(clamp(36px, 7vw, 62px), calc((100vw - 120px) / 10)); }
.ffpic .obj.grey img { filter: grayscale(1); opacity: .4; }
.ffpic .tcell .obj { width: 92%; }
.ffbond { position: relative; width: 190px; height: 128px; }
.ffbond svg { position: absolute; left: 15px; top: 34px; width: 160px; height: 60px; }
.ffbond path { stroke: #6B7390; stroke-width: 3; fill: none; }
.fc { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 3px solid currentColor; background: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 700; }
.fc.top { left: 67px; top: 0; } .fc.left { left: 17px; top: 72px; } .fc.right { left: 117px; top: 72px; }
.fc.pur, .ffsent b.pur, .numcard.pur { color: #5B3FC4; } .fc.org, .ffsent b.org { color: #F97316; } .fc.blu, .ffsent b.blu { color: #2F6FD6; }
.ffknown { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; align-items: center; }
.fflab { font-size: 17px; color: var(--muted); font-weight: 600; }
.ffsent { font-size: 30px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.ffsent i { font-style: normal; color: var(--navy); }
.ffsent .mn { display: inline-block; width: .55em; height: .11em; border-radius: .05em; background: var(--navy); vertical-align: middle; }
.fflist { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 26px; }
.fflist .ffsent { font-size: 24px; padding: 2px 8px; border-radius: 8px; }
.fflist .ffsent.asked { background: #FFF4D6; outline: 2px solid #F9A826; }
.ffcard .ffsent { font-size: 34px; }
.stage.compose .compose-row.ff .numcard.mini { min-width: 72px; height: 90px; font-size: 54px; }
.compose-row.ff { gap: 12px; } .compose-row.ff .op { font-size: 46px; }
.compose-row.ff .op .mn { display: inline-block; width: 30px; height: 6px; border-radius: 3px; background: var(--navy); vertical-align: middle; }
.compose-row.va .op .mn { display: inline-block; width: 30px; height: 6px; border-radius: 3px; background: var(--navy); vertical-align: middle; }   /* 66 − 17 = [ ] in a row (ป.1 / ป.2) */
@media (max-width: 600px) { .compose-row.va .op .mn { width: 18px; height: 4px; } }
@media (max-width: 600px) {
  .ffrow { gap: 3px; } .ffsent { font-size: 22px; } .fflist .ffsent { font-size: 18px; } .ffcard .ffsent { font-size: 24px; }
  .stage.compose .compose-row.ff .numcard.mini { min-width: 0; padding: 0 8px; height: 58px; font-size: 36px; } .compose-row.ff { gap: 4px; flex-wrap: nowrap; }
  .compose-row.ff .op { font-size: 28px; } .compose-row.ff .op .mn { width: 18px; height: 4px; }
}
.ffwhole { border: none !important; padding: 0 !important; }
.ffpic > .ffrow, .ffpic > .mtpic { position: relative; border-top: 3px solid #5B3FC4; padding-top: 8px; }
.ffpic > .ffrow::before, .ffpic > .ffrow::after, .ffpic > .mtpic::before, .ffpic > .mtpic::after { content: ''; position: absolute; top: -3px; width: 3px; height: 12px; background: #5B3FC4; }
.ffpic > .ffrow::before, .ffpic > .mtpic::before { left: 0; } .ffpic > .ffrow::after, .ffpic > .mtpic::after { right: 0; }
@media (min-width: 601px) { .ffbond { zoom: 1.3; } }
.compose-row.ff .slot { padding: 6px 14px 10px; gap: 10px; } .compose-row.ff .slot .cell { width: 46px; height: 74px; font-size: 60px; }
@media (max-width: 600px) { .compose-row.ff .slot { padding: 4px 10px 8px; gap: 6px; } .compose-row.ff .slot .cell { width: 34px; height: 54px; font-size: 42px; } }
.ghost { width: min(clamp(36px, 7vw, 62px), calc((100vw - 120px) / 10)); aspect-ratio: 1; border: 3px dashed #9AA6C8; border-radius: 12px; }
.ffpic .obj .badge { min-width: 24px; height: 24px; font-size: 13px; top: -10px; right: -8px; }
.tcell .ghost { width: 80%; border-width: 2px; border-radius: 6px; }

/* โจทย์ปัญหา: the card (บอก blue / ถาม purple), the picture, ตอบ [ ] ผล */
.stage.wpstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.wpabove { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.wpcard { border: 2px solid #6B7390; border-radius: 14px; padding: 10px 18px; background: #fff; max-width: 680px; }
.wpline { display: flex; gap: 12px; align-items: baseline; margin: 4px 0; font-size: 24px; color: var(--navy); }
.wptag { font-size: 15px; font-weight: 700; min-width: 32px; }
.wpline.tell .wptag { color: #2F6FD6; } .wpline.ask .wptag { color: #5B3FC4; }
.wpline.tell .wptxt { border-bottom: 3px solid #2F6FD6; } .wpline.ask .wptxt { border-bottom: 3px solid #5B3FC4; }
.wpline.on .wptxt { background: #FFF4D6; }
.compose-row.wp { gap: 12px; align-items: center; }
.wplab, .wpunit { font-size: 34px; font-weight: 700; color: var(--navy); }
.wpchoice { font-size: 32px; font-weight: 700; color: var(--navy); }
.wpchoice .sym { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #EEF2FF; margin-right: 6px; font-size: 34px; }
.wpchoice .sym .mn { display: inline-block; width: 22px; height: 5px; border-radius: 3px; background: var(--navy); }
.wpans { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.wpfinal { font-size: 26px; font-weight: 700; color: #15803D; }
@media (max-width: 600px) { .wpline { font-size: 17px; gap: 8px; } .wpcard { padding: 8px 10px; } .wplab, .wpunit { font-size: 26px; } .wpchoice { font-size: 24px; } .wpfinal { font-size: 20px; } }

/* เปรียบเทียบ (04-02B): the rows' names (บ่อใหญ่ / จานแดง …) all one width so the pairs line up; the clip's whole answer */
.sbdiff.named .dwho { width: 4.6em; font-size: 20px; white-space: nowrap; }
.wpmore { font-size: 28px; font-weight: 700; color: var(--navy); }
.compose-row.wp { flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) { .sbdiff.named .dwho { font-size: 14px; } .wpmore { font-size: 19px; } }

/* ---------- lesson page = one teaching lesson: clip, practice sets (แบบฝึก / รอบจับเวลา / แบบทดสอบ), next (2569-10-16) ---------- */
.clipcard, .nextcard { min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
.clipcard .ctext, .nextcard .ctext { flex: 1; min-width: 0; }
.clipcard .status, .nextcard .status { flex: none; }
.clipcard .btn, .nextcard .btn { flex: none; }
.parts { display: grid; gap: 14px; }
.part { background: var(--card); border: 2px solid var(--line); border-radius: 22px; padding: 14px; display: grid; gap: 12px; }
.parts:not(.many) .part { border: none; background: none; padding: 0; }
.part.rec { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
.parts:not(.many) .part.rec { box-shadow: none; }
.part.focus { border-color: var(--navy); }
.part.locked { opacity: .75; }
.phead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.phead .pno { font-size: 14px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 3px 12px; }
.phead h2 { margin: 0; font-size: clamp(20px, 3.6vw, 26px); color: var(--navy); }
.ptag { margin-left: auto; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #FFF1D6; color: #8a5a00; }
.ptag.ok { background: #E9F8F1; color: #0a6b43; }
.plock { margin: 0; font-size: 18px; color: var(--muted); }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acts.two { grid-template-columns: repeat(2, 1fr); }
.act { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.act h3 { margin: 0; font-size: 20px; }
.act .status { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
.act .scores { justify-content: flex-start; }
.act a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; font-size: 18px; }
.act.done h3 { color: #0a6b43; }
.act.rec { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
.part .review-clips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.part .review-clips .rlab { font-size: 14px; font-weight: 700; color: var(--muted); }
.part .review-clips .btn { width: auto; }
@media (max-width: 700px) { .acts, .acts.two { grid-template-columns: 1fr; } .clipcard, .nextcard { flex-wrap: wrap; } .clipcard .btn, .nextcard .btn { width: 100%; } }

/* ---------- lesson list: unit -> teaching lesson -> its practice sets ---------- */
.unit-head { margin: 10px 0 0; font-size: clamp(18px, 3vw, 22px); color: var(--navy); }
.unit-head small { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
.lesson-card { background: #fff; border: 2px solid var(--line); border-radius: 22px; overflow: hidden; }
.lesson-card.rec { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
.lesson-card.intro .intro-icon { width: 60px; height: 60px; border-radius: 50%; background: #EFE9FF; color: var(--purple, #6D4AE0); font-size: 26px; }   /* บทนำ: clip only, no face */
.lesson-card > .lesson-row { border: none; border-radius: 0; }
.lesson-card .subs { display: grid; border-top: 2px solid var(--line); }
.lesson-card .sub { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 34px; text-decoration: none; color: var(--ink); }
.lesson-card .sub + .sub { border-top: 1px solid var(--line); }
.lesson-card .sub.rec { background: #FFF7E6; }
.lesson-card .sub .sno { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lesson-card .sub .sname { flex: 1; font-size: 18px; font-weight: 600; min-width: 0; }
.lesson-card .sub.locked { opacity: .7; }
.lesson-card .sub.locked .face { filter: grayscale(1); }
@media (max-width: 480px) { .lesson-card .sub { padding: 8px 12px 8px 16px; gap: 8px; } .lesson-card .sub .sname { font-size: 16px; } }
/* phones: the status label may wrap, so it never squeezes the lesson's name into one word per line (seen at 375 px, 2569-10-17) */
@media (max-width: 480px) {
  .lesson-row { gap: 10px; padding: 12px 14px; }
  .lesson-row .lstatus, .lesson-card .sub .lstatus { white-space: normal; max-width: 40%; text-align: center; font-size: 13px; padding: 4px 10px; line-height: 1.35; }
  .lesson-card .sub .sno { display: none; }
}
/* lesson list as unit cards (Chai 2569-10-30): units first, a tap opens one to its lessons; several may be open */
.cells { display: flex; flex-wrap: wrap; gap: 8px; }
.cells .cell { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 20px; font-size: 18px; font-weight: 700; color: var(--navy); min-height: 46px; position: relative; }
.cells .cell.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cells .cell.has-rec::after { content: ''; position: absolute; top: 4px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
details.unit-card { background: #EEF2FC; border: 2px solid #C9D3EF; border-radius: 24px; }
details.unit-card.rec { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
details.unit-card.locked > summary { opacity: .75; }
details.unit-card > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; border-radius: 22px; }
details.unit-card > summary::-webkit-details-marker { display: none; }
details.unit-card > summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
details.unit-card .u-no { flex: none; position: relative; width: 56px; height: 56px; border-radius: 16px; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 700; }
details.unit-card.passed .u-no { background: var(--green); }
details.unit-card .u-no i { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: #fff; font-style: normal; font-size: 15px; display: grid; place-items: center; border: 2px solid #fff; }
details.unit-card .u-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
details.unit-card .u-text small { font-size: 14px; font-weight: 600; color: var(--muted); }
details.unit-card .u-text b { font-size: clamp(19px, 3.4vw, 24px); color: var(--navy); }
details.unit-card .u-bar { display: block; height: 8px; border-radius: 99px; background: #D5DCF0; overflow: hidden; margin-top: 4px; max-width: 320px; }
details.unit-card .u-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
details.unit-card .u-chev { flex: none; font-size: 30px; color: var(--navy); transition: transform .2s; line-height: 1; }
details.unit-card[open] .u-chev { transform: rotate(90deg); }
details.unit-card .u-body { display: grid; gap: 10px; padding: 4px 14px 16px 30px; }
@media (max-width: 480px) {
  details.unit-card > summary { gap: 10px; padding: 12px 12px; }
  details.unit-card .u-no { width: 46px; height: 46px; font-size: 23px; }
  details.unit-card > summary .lstatus { white-space: normal; max-width: 34%; text-align: center; font-size: 13px; padding: 4px 10px; line-height: 1.35; }
  details.unit-card .u-body { padding: 2px 8px 12px 14px; }
  .cells .cell { font-size: 16px; padding: 6px 16px; }
}
/* guardian report: grouped by unit and teaching lesson */
.ghead { margin: 14px 0 4px; font-size: 18px; color: var(--navy); }
.thead { margin: 8px 0 2px; font-weight: 700; color: var(--ink); }
.thead small { color: var(--muted); font-weight: 600; margin-left: 6px; }
.lrow.sub { margin-left: 22px; }
@media (max-width: 480px) { .lrow.sub { margin-left: 10px; } }

/* ตัวหนังสือแสดงจำนวน (G1-L1-01-11): word cards in the looped font of the textbooks, tiles to build a word */
.wordcard { display: grid; place-items: center; min-width: 120px; min-height: 96px; padding: 10px 26px; border-radius: 24px; border: 4px solid var(--navy); background: #fff; color: var(--navy);
  font-family: "Noto Sans Thai Looped", "Noto Sans Thai", sans-serif; font-size: 54px; font-weight: 700; line-height: 1.35; text-align: center; }
.wordcard.mini { min-width: 0; min-height: 0; padding: 4px 14px; border: 0; font-size: 34px; }
.stage.words .options { flex-direction: column; align-items: stretch; width: min(420px, 100%); gap: 10px; }
.stage.words .options .group { flex: none; display: flex; justify-content: center; align-items: center; min-height: 0; min-width: 0; width: 100%; max-width: none; padding: 6px 10px; box-sizing: border-box; }
.stage.compose .compose-row .wordcard { font-size: 44px; padding: 8px 18px; }
.mnum.word { width: auto; min-width: 150px; height: auto; min-height: 76px; padding: 6px 12px; font-family: "Noto Sans Thai Looped", "Noto Sans Thai", sans-serif; font-size: 30px; line-height: 1.3; }
.stage.wbuild { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wbtop { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.wbline { min-height: 84px; min-width: min(420px, 100%); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 8px 12px;
  border: 4px dashed #9AA6C8; border-radius: 22px; background: #fff; }
.wbline.right { border-style: solid; border-color: var(--green); background: #E9F8F1; }
.wbline.wrong { border-style: solid; border-color: var(--red); animation: shake .3s; }
.wbline.picked { border-style: solid; border-color: var(--amber); }
.wbhint { color: var(--muted); font-size: 16px; }
.wtiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wtile { min-width: 72px; min-height: 64px; padding: 4px 16px; border-radius: 16px; border: 3px solid var(--purple); background: #F1F0FF; color: var(--navy); cursor: pointer;
  font-family: "Noto Sans Thai Looped", "Noto Sans Thai", sans-serif; font-size: 32px; font-weight: 700; line-height: 1.3; }
.wtile.used { opacity: .25; pointer-events: none; }
.wtile.placed { border-color: var(--navy); background: #fff; }
.stage.wordrun, .stage.eqneqrun { display: flex; flex-direction: column; align-items: center; gap: 18px; }
@media (max-width: 560px) {
  .wordcard { font-size: 40px; min-height: 76px; padding: 8px 18px; }
  .wordcard.mini { font-size: 28px; }
  .stage.compose .compose-row .wordcard { font-size: 32px; padding: 6px 12px; }
  .mnum.word { min-width: 118px; font-size: 22px; min-height: 64px; }
  .wtile { font-size: 26px; min-width: 60px; min-height: 54px; padding: 2px 12px; }
  .wbline { min-height: 70px; }
}
.stage.match.words .mpic { flex: none; min-height: 0; min-width: 0; padding: 6px 12px; }
.stage.match.words .mcol { gap: 16px; }
.stage.match.words .mnum.word { min-height: 90px; }
@media (max-width: 560px) { .stage.match.words .mnum.word { min-height: 90px; } }

/* phones: the two numbers of a comparison stay side by side with the sign between them (a [?] b), pictures shrink to fit */
@media (max-width: 600px) {
  .stage.compare .cmp-row { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .stage.compare .cmp-side { flex: 1 1 0; min-width: 0; }
  .stage.compare .cmp-side .numcard.big { font-size: 58px; height: 88px; min-width: 0; padding: 0 12px; border-radius: 18px; }
  .stage.compare .cmp-row .signbox { flex: none; min-width: 62px; height: 78px; font-size: 50px; border-radius: 16px; }
  .stage.compare .cmp-side .pic.sticks .col.tens { grid-template-columns: repeat(var(--per3, 1), auto); }
}

/* แบบรูปของจำนวน (G1-L1-05-01): a row of numbers, pictures above, the change between neighbours under the gaps */
.compose-row.pat { flex-wrap: nowrap; gap: 14px; align-items: flex-end; padding-bottom: 40px; width: 100%; }
.patcol { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; }
.patcol .numcard.mini, .stage.compose .compose-row.pat .numcard.mini { min-width: 0; width: 100%; max-width: 110px; padding: 0 4px; }
.compose-row.pat .slot { padding: 6px 10px 10px; gap: 8px; }
.compose-row.pat .slot .cell { width: 44px; height: 72px; font-size: 56px; }
.patghost { width: 70%; min-height: 60px; border: 3px dashed #C9CEDF; border-radius: 12px; }
.pathop { position: absolute; right: -7px; bottom: -36px; transform: translateX(50%); z-index: 2; font-size: 20px; font-weight: 700; line-height: 1.05; text-align: center; white-space: nowrap; }
.pathop small { display: block; font-size: 12px; font-weight: 600; }
.pathop.up { color: var(--green); } .pathop.down { color: var(--red); }
.pic.tower { display: flex; flex-direction: column-reverse; align-items: center; padding-bottom: 3px; border-bottom: 3px solid #9AA6C8; min-width: 40px; }
.pic.tower .cube { width: 36px; height: 24px; margin-top: -2px; background: #FDBA74; border: 2px solid #C2410C; border-radius: 2px; }
.stage.patpick .patrows { flex-direction: column; align-items: stretch; width: min(560px, 100%); gap: 22px; }
.stage.patpick .patrow { flex: none; min-height: 0; max-width: none; width: 100%; display: flex; flex-wrap: nowrap; gap: 10px; padding: 10px 10px 40px; }
.stage.patpick .patrow .patcol .numcard.mini { height: 64px; font-size: 40px; }
@media (max-width: 560px) {
  .compose-row.pat { gap: 8px; }
  .compose-row.pat .slot .cell { width: 34px; height: 58px; font-size: 44px; }
  .stage.compose .compose-row.pat .numcard.mini { height: 70px; font-size: 38px; }
  .stage.patpick .patrow .patcol .numcard.mini { height: 54px; font-size: 32px; }
  .pathop { font-size: 17px; right: -4px; }
  .pic.tower .cube { width: 30px; height: 20px; }
}
/* ป.2 (G2-L1-01-07): three-digit rows — blocks stacked by place (hundreds on top) so a column stays narrow; the blank's column a little wider */
.patcol .pic.blocks.plain { flex-direction: column; align-items: center; gap: 4px; }
.patcol .pic.blocks.plain .col { padding: 2px; }
.compose-row.pat.pat3 .patcol:has(.slot) { flex-grow: 1.3; }
@media (max-width: 560px) {
  .compose-row.pat.pat3 { gap: 5px; }
  .stage.compose .compose-row.pat.pat3 .numcard.mini { height: 56px; font-size: 26px; padding: 0 2px; border-radius: 12px; }
  .stage.compose .compose-row.pat.pat3 .slot { padding: 4px 5px 8px; gap: 3px; border-radius: 14px; }
  .stage.compose .compose-row.pat.pat3 .slot .cell { width: 18px; padding: 0; height: 46px; font-size: 28px; border-bottom-width: 4px; }
}
/* ป.2 01-07: observe first (up or down? which place changes?) and the number sentence under a solution */
.stage.patobs { flex-direction: column; justify-content: center; }
.compose-row.patobs { width: 100%; }
.compose-row.patobs .numcard.mini { width: 100%; max-width: 110px; min-width: 0; padding: 0 4px; }
.answer button.obs { min-width: 120px; font-size: 26px; }
.answer button.obs.up { color: var(--green); } .answer button.obs.down { color: var(--red); }
.stage.patstage, .stage.patobs { flex-wrap: wrap; align-content: center; }
.eqrow.addplace .numcard.mini { font-size: 54px; }
.stage.vastage.v3obs { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 12px; }
.stage.v3obs .pateq { flex-basis: auto; margin-top: 4px; }
.stage.compose .compose-row.va.v3row { flex-wrap: nowrap; gap: 10px; }
.stage.compose .compose-row.va.v3row .numcard.mini { min-width: 0; padding: 0 10px; }
@media (max-width: 560px) {
  .stage.compose .compose-row.va.v3row { gap: 5px; }
  .stage.compose .compose-row.va.v3row .numcard.mini { font-size: 30px; height: 58px; padding: 0 5px; border-radius: 14px; }
  .stage.compose .compose-row.va.v3row .op { font-size: 28px; }
  .stage.compose .compose-row.va.v3row .slot { padding: 4px 6px 8px; gap: 4px; }
  .stage.compose .compose-row.va.v3row .slot .cell { width: 22px; height: 46px; font-size: 32px; padding: 0; }
}
.eqtyperun .numcard.mini { font-size: 40px; padding: 0 8px; }
@media (max-width: 560px) { .eqrow.addplace .numcard.mini { font-size: 40px; } .eqtyperun { gap: 6px; } .eqtyperun .numcard.mini { font-size: 30px; height: 60px; } .eqtyperun .eqop { font-size: 30px; } }
.pateq { flex-basis: 100%; margin-top: 18px; font-size: 34px; font-weight: 700; color: var(--navy); text-align: center; letter-spacing: .5px; }
@media (max-width: 560px) {
  .compose-row.patobs.pat3 { gap: 5px; }
  .compose-row.patobs.pat3 .numcard.mini { height: 56px; font-size: 26px; padding: 0 2px; border-radius: 12px; }
  .answer button.obs { min-width: 0; padding: 0 12px; font-size: 21px; }
  .pateq { font-size: 26px; margin-top: 12px; }
}
.seqrun { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.seqrun .numcard.mini { min-width: 0; padding: 0 8px; }
@media (max-width: 560px) { .seqrun { gap: 6px; } .seqrun .numcard.mini { height: 66px; font-size: 36px; } .seqrun .slot .cell { width: 34px; height: 58px; font-size: 44px; } }
.patcol .pic.sticks .col.tens { grid-template-columns: repeat(2, auto); gap: 6px; }     /* แบบรูป: bundles two to a row, so a column stays narrow */
.patcol .pic.sticks .col { min-width: 0; padding: 8px 6px; }
.patcol .pic.sticks.plain { flex-direction: column; align-items: center; }
.patcol:has(.slot) { flex: 1.35 1 0; }
@media (max-width: 560px) { .compose-row.pat .slot { padding: 4px 6px 8px; gap: 5px; } .compose-row.pat .slot .cell { width: 28px; } }

/* แบบรูปซ้ำ (G1-L1-05-02): drawn shapes and object pictures, two to a set; the frames show in the hint and the solution */
.stage.repstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
/* even spacing: inside a set 12px = between sets 3 + 3 + 3 + 3 (padding, border) — the sets must not show before the hint */
.reprow { display: flex; flex-wrap: nowrap; gap: 0; justify-content: center; }
.repunit { display: flex; gap: 12px; padding: 6px 3px; border: 3px solid transparent; border-radius: 14px; }
.repunit.shown { border-color: var(--orange); }
.repunit.gap { border: 3px dashed var(--orange); }
.repitem { width: 56px; height: 56px; display: grid; place-items: center; }
.repitem img { width: 50px; height: 50px; object-fit: contain; }
.repitem.repblank { border: 3px dashed #9AA6C8; border-radius: 12px; background: #fff; }
.repitem.filled { animation: reppop .4s ease-out; }
.shape { display: block; width: 48px; height: 48px; }
.shape.small { width: 26px; height: 26px; }
.sh-circle { border-radius: 50%; }
.sh-square { border-radius: 5px; width: 42px; height: 42px; } .sh-square.small { width: 23px; height: 23px; }
.sh-tri { clip-path: polygon(50% 4%, 97% 94%, 3% 94%); }
.sh-star { clip-path: polygon(50% 2%, 61% 36%, 98% 36%, 68% 58%, 79% 94%, 50% 72%, 21% 94%, 32% 58%, 2% 36%, 39% 36%); }
.c-orange { background: #F28C28; } .c-purple { background: #6D5BD0; } .c-green { background: #16A34A; }
.c-red { background: #E5484D; } .c-blue { background: #3B82F6; } .c-yellow { background: #F5B800; }
.stage .repopts { gap: 16px; }
.stage .repopts .group { flex: none; min-width: 84px; min-height: 0; max-width: none; padding: 14px 18px; border-radius: 18px; display: flex; justify-content: center; }
.stage .repopts.rows { flex-direction: column; align-items: center; width: 100%; }
.stage .repopts.rows .group { width: 100%; box-sizing: border-box; overflow: hidden; justify-content: center; }
.reppair { display: flex; gap: 6px; }
.num.repbtn { width: auto; min-width: 84px; height: auto; padding: 6px 12px; }
@keyframes reppop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) {
  .repitem { width: 44px; height: 44px; } .repitem img { width: 40px; height: 40px; }
  .shape { width: 38px; height: 38px; } .shape.small { width: 21px; height: 21px; }
  .sh-square { width: 34px; height: 34px; } .sh-square.small { width: 19px; height: 19px; }
  .repunit { gap: 8px; padding: 4px 1px; }
}
/* the marks of a chosen / right / wrong picture beat the plain frame of an option (".stage .options .group" is more specific) */
.stage .options .group.chosen { border-color: var(--amber); background: #FFF7E6; }
.stage .options .group.right { border-color: var(--green); background: #E9F8F1; }
.stage .options .group.wrong { border-color: var(--red); }
.stage.repstage > .reprow > .repitem { margin: 0 6px; }     /* the timed round: a plain row, evenly spaced */

/* ยาวกว่า สั้นกว่า (G1-L1-06-01): things drawn from their lengths, a start line, the part that sticks out */
.stage.lenstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.ltrack { position: relative; padding: 10px 0; }
.lnrow { position: relative; height: 58px; cursor: pointer; border-radius: 10px; }
.lnrow:hover { background: #F3F5FB; }
.ltrack .lobj.group { position: absolute; top: 50%; transform: translateY(-50%); min-width: 0; min-height: 0; max-width: none; flex: none; padding: 0; border: none;
  border-radius: 4px; background: var(--c); cursor: pointer; transition: left .7s ease, width .7s ease, height .7s ease; }
.lc-red { --c: #E5484D; } .lc-blue { --c: #3B82F6; } .lc-green { --c: #22C55E; } .lc-orange { --c: #F97316; } .lc-purple { --c: #8B5CF6; } .lc-yellow { --c: #EAB308; }
.ltrack .lobj.lk-pencil { height: 20px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(90deg, #F9A8D4 0 12px, #CBD5E1 12px 16px, var(--c) 16px calc(100% - 18px), #F5D0A9 calc(100% - 18px)); }
.ltrack .lobj.lk-straw { height: 12px; border-radius: 6px; background: linear-gradient(180deg, var(--c) 0 35%, rgba(255,255,255,.7) 35% 55%, var(--c) 55%); }
.ltrack .lobj.lk-ribbon { height: 22px; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.ltrack .lobj.lk-eraser { height: 46px; border-radius: 8px; background: linear-gradient(90deg, #93C5FD 0 45%, var(--c) 45%); }
.ltrack .lobj.up { top: auto; bottom: 6px; transform: none; width: 12px; }
.ltrack .lobj.lk-straw.up { background: linear-gradient(90deg, var(--c) 0 35%, rgba(255,255,255,.7) 35% 55%, var(--c) 55%); }
.ltrack .lobj.right { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--green); }
.ltrack .lobj.wrong { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--red); }
.ltrack .lobj.chosen { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--amber); }
.ltrack .lobj.lk-pencil.right, .ltrack .lobj.lk-pencil.wrong, .ltrack .lobj.lk-pencil.chosen, .ltrack .lobj.lk-ribbon.right, .ltrack .lobj.lk-ribbon.wrong, .ltrack .lobj.lk-ribbon.chosen {
  clip-path: none; outline: 4px solid var(--green); outline-offset: 4px; }
.ltrack .lobj.wrong { outline-color: var(--red); } .ltrack .lobj.chosen { outline-color: var(--amber); }
.lstart, .lmark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 3px dashed #9AA6C8; pointer-events: none; }
.lmark { border-left-color: #C3CADB; }
.lextra { position: absolute; top: 50%; transform: translateY(-50%); height: 34px; background: rgba(34, 197, 94, .3); border: 2px solid #22C55E; border-radius: 6px; pointer-events: none; }
.lbadge { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; display: grid; place-items: center; }
.btn.lalign.pulse { animation: lpulse 1s ease-in-out 3; }
@keyframes lpulse { 50% { box-shadow: 0 0 0 8px rgba(249, 168, 38, .5); } }
.lask { font-size: 34px; font-weight: 700; color: var(--navy); }

/* วัดเป็นเซนติเมตร (G1-L1-06-02): a ruler 0–12, 1-cm cubes, numbered spaces */
.stage.cmstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.cmpic { padding: 4px 0 0; }
.cmrow { position: relative; height: 40px; }
.cmrow.cubes { height: auto; min-height: 40px; }
.cmpic .lobj.group { position: absolute; top: 50%; transform: translateY(-50%); min-width: 0; min-height: 0; max-width: none; flex: none; padding: 0; border: none;
  border-radius: 4px; background: var(--c); }
.cmpic .lobj.lk-pencil { height: 20px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  background: linear-gradient(90deg, #F9A8D4 0 10px, #CBD5E1 10px 13px, var(--c) 13px calc(100% - 16px), #F5D0A9 calc(100% - 16px)); }
.cmpic .lobj.lk-straw { height: 12px; border-radius: 6px; background: linear-gradient(180deg, var(--c) 0 35%, rgba(255,255,255,.7) 35% 55%, var(--c) 55%); }
.cmpic .lobj.lk-ribbon { height: 22px; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.cmpic .lobj.lk-eraser { height: 30px; border-radius: 6px; background: linear-gradient(90deg, #93C5FD 0 45%, var(--c) 45%); }
.cmcube { position: absolute; top: 2px; box-sizing: border-box; background: #BAE6FD; border: 2px solid #0369A1; border-radius: 3px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #0369A1; }
.cmcube.on { background: #7DD3FC; }
.cmruler { position: relative; height: 46px; background: #FEF3C7; border: 2px solid #B45309; border-radius: 6px; }
.cmtick { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: #78350F; }
.cmtick.zero { width: 4px; margin-left: -2px; background: var(--orange); height: 46px; }
.cmnum { position: absolute; top: 16px; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: #78350F; }
.cmspace { position: absolute; top: 0; height: 14px; background: rgba(34, 197, 94, .45); font-size: 11px; font-weight: 700; color: #14532D; text-align: center; line-height: 14px; }
.cmspace.extra { background: rgba(249, 115, 22, .45); color: #7C2D12; }
.cmlen { position: absolute; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.compose-row.cm { gap: 10px; }
.stage .cmopts { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
.stage .cmopts .group.cmopt { flex: none; min-width: 0; min-height: 0; max-width: none; padding: 6px 8px; display: block; overflow: hidden; }
@media (max-width: 560px) { .cmnum { font-size: 11px; } .cmlen { font-size: 13px; } }
.cmsaid { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 4px 4px; }

/* เมตร และเลือกหน่วย (G1-L1-06-03): metre sticks laid along a thing, units, tools, two lengths on one scale */
.stage.mstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.mthing svg { width: 84px; height: 84px; display: block; }
.mthing.big svg { width: 130px; height: 130px; }
.mthing .mring { fill: none; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 5 4; }
.mcard { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mname { font-size: 18px; font-weight: 700; color: var(--navy); }
.mcard.bend .mring { stroke: #EAB308; stroke-width: 6; stroke-dasharray: none; animation: mbend 1s ease-in-out 3; }
@keyframes mbend { 50% { stroke-width: 9; } }
.mcount svg { display: block; max-width: 100%; height: auto; }
.mcount .mlab { font-size: 20px; font-weight: 700; fill: #78350F; text-anchor: middle; }
.mcount .mnum { font-size: 18px; font-weight: 700; fill: #92400E; text-anchor: middle; opacity: 0; }
.mcount.numbered .mnum, .mcount .mnum.on { opacity: 1; }
.msent { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; color: var(--navy); flex-wrap: wrap; justify-content: center; }
.mblank { min-width: 72px; padding: 2px 10px; border: 3px dashed #94A3B8; border-radius: 10px; text-align: center; color: #94A3B8; }
.mblank.filled { border: 3px solid var(--green); color: var(--green); }
.stage .mopts { gap: 14px; flex-wrap: wrap; justify-content: center; }
.stage .mopts .group.mopt { flex: none; min-width: 110px; min-height: 0; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.munit { font-size: 34px; font-weight: 700; color: var(--navy); padding: 4px 10px; }
.stage .mopts.lens { flex-direction: column; align-items: stretch; width: min(100%, 520px); align-self: center; margin: 0 auto; }
.stage .mopts.lens .group.mopt { align-items: stretch; }
.mlen { font-size: 34px; font-weight: 700; color: var(--navy); display: flex; gap: 8px; align-items: baseline; justify-content: center; }
.mlen .mu { padding: 0 6px; border: 3px solid transparent; border-radius: 8px; }
.mlen .mu.hi { border-color: var(--red); color: var(--red); }
.mbar { height: 14px; background: repeating-linear-gradient(90deg, #FACC15 0 24px, #F59E0B 24px 48px); border: 2px solid #92400E; border-radius: 3px; }
.mref { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ltref { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 8px; font-size: 20px; color: var(--navy); }
.mrefc { display: flex; align-items: center; gap: 6px; background: #FFFBEB; border: 2px solid #FCD34D; border-radius: 12px; padding: 2px 10px 2px 4px; font-size: 16px; color: var(--navy); }
.mrefc .mthing svg { width: 54px; height: 54px; }
.num.munitbtn { font-size: 30px; min-width: 120px; }
@media (max-width: 560px) { .mthing svg { width: 68px; height: 68px; } .msent { font-size: 22px; } .mlen, .munit { font-size: 28px; } .stage .mopts .group.mopt { min-width: 88px; } }

/* หนักกว่า เบากว่า (G1-L1-07-01): a two-pan balance drawn from the server's tilt; each half of it is a target */
.stage.balstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.balwrap { position: relative; max-width: 100%; }
.balwrap svg { display: block; max-width: 100%; height: auto; }
.balwrap .blevel, .balwrap .bdown { opacity: 0; transition: opacity .3s; }
.balwrap.shown .blevel, .balwrap.shown .bdown { opacity: 1; }
.balwrap .group.balzone { position: absolute; top: 0; bottom: 18%; width: 46%; min-width: 0; min-height: 0; max-width: none; padding: 0; margin: 0;
  background: transparent; border: 3px solid transparent; border-radius: 18px; box-shadow: none; cursor: pointer; }
.balwrap .balzone.l { left: 0; } .balwrap .balzone.r { right: 0; }
.balwrap .balzone:hover { border-color: #CBD5E1; }
.balwrap .balzone.right { border-color: var(--green); background: rgba(34, 197, 94, .12); }
.balwrap .balzone.wrong { border-color: var(--red); background: rgba(239, 68, 68, .1); }
.balwrap .balzone.chosen { border-color: var(--amber); }
.wsent { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; color: var(--navy); flex-wrap: wrap; justify-content: center; }
.stage .wwords { gap: 12px; flex-wrap: wrap; justify-content: center; }
.stage .wwords .group.wword { flex: none; min-width: 0; min-height: 0; padding: 10px 18px; font-size: 26px; font-weight: 700; color: var(--navy); }
.balpair { display: flex; gap: 16px; justify-content: center; width: 100%; }
.balpair .balwrap { flex: 0 1 auto; }
.wtag { position: absolute; bottom: 2%; font-size: 17px; font-weight: 700; color: #15803D; background: #F0FDF4; border-radius: 8px; padding: 0 6px; }
.wtag.l { left: 4%; } .wtag.r { right: 4%; }
.stage .wtrio { gap: 14px; flex-wrap: wrap; justify-content: center; }
.stage .wtrio .group.wopt { position: relative; flex: none; min-width: 104px; min-height: 0; padding: 6px 10px; }
.wcard { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lbadge.wbadge { top: 4px; right: 4px; transform: none; width: 26px; height: 26px; }
@media (max-width: 560px) { .wsent { font-size: 22px; } .stage .wwords .group.wword { font-size: 21px; padding: 8px 12px; } .balpair { gap: 6px; }
  .wcard svg { width: 60px; height: 60px; } .stage .wtrio .group.wopt { min-width: 88px; } .wtag { font-size: 13px; } }

/* ชั่งเป็นกิโลกรัม (G1-L1-07-02): 1-kg blocks on a level balance, a dial scale 0–10 กก. */
.kgbal .knum { opacity: 0; transition: opacity .3s; }
.kgbal.shown .knum { opacity: 1; }
.kgdial { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.kgdial svg { display: block; max-width: 100%; height: auto; }
.kgdial .kpass, .kgdial .kring { opacity: 0; transition: opacity .3s; }
.kgdial.shown .kpass, .kgdial.solved .kring { opacity: 1; }
.kgtag { font-size: 22px; font-weight: 700; color: #15803D; margin-top: 2px; }
.kgpair { display: flex; gap: 18px; justify-content: center; align-items: flex-end; flex-wrap: nowrap; }
.kgstacks { display: flex; justify-content: center; }
.stage .kgopts { gap: 14px; flex-wrap: wrap; justify-content: center; }
.stage .kgopts .group.kgopt { flex: none; min-width: 0; min-height: 0; max-width: none; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; }
.kgsaid { font-size: 22px; font-weight: 700; color: var(--navy); padding: 4px 6px; }
@media (max-width: 560px) { .kgsaid { font-size: 18px; } .kgpair { gap: 8px; } .kgtag { font-size: 18px; } }

/* ขีด และเลือกหน่วย (G1-L1-07-03): blocks under the two weights on a hint (ขีด small, กก. big) */
.khblocks { margin-top: 6px; } .khblocks svg { display: block; max-width: 100%; height: 40px; }

/* หนึ่งมิติ สองมิติ สามมิติ (G1-L1-08-01): drawings lie flat on paper, things we can hold have a shadow; cards 1D / 2D / 3D */
.dpic svg { display: block; max-width: 100%; height: auto; }
.stage .dopts { gap: 12px; flex-wrap: wrap; justify-content: center; }
.stage .dopts .group.dcard { flex: none; min-width: 96px; min-height: 0; max-width: none; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dcard b { font-size: 26px; color: var(--navy); line-height: 1.1; } .dcard span { font-size: 17px; font-weight: 700; color: var(--navy); }
.dcard .daxes { font-style: normal; font-size: 14px; color: #EA580C; font-weight: 700; visibility: hidden; }
.dhint .dcard .daxes { visibility: visible; }
.dtrace { opacity: 0; transition: opacity .3s; } .dhint .dtrace { opacity: 1; }
.dpartpic .dpart { animation: dpulse 1.2s ease-in-out infinite; }
@keyframes dpulse { 50% { opacity: .45; } }
.stage .dopts .group.dpick { flex: none; min-width: 0; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; }
.dtag { font-size: 18px; font-weight: 700; color: #7C3AED; }
@media (max-width: 560px) { .stage .dopts .group.dcard { min-width: 84px; padding: 6px; } .dcard b { font-size: 22px; } }

/* ทรงสามมิติรอบตัว (G1-L1-08-02): the four solids on the name cards; a hint turns flat faces blue and shows the hidden ones */
.spic .shid { opacity: 0; }
.shhint .spic .shid { opacity: 1; stroke: #2563EB; }
.shhint .sgeom .sflat, .shhint .sgeom .shid { fill: #93C5FD; fill-opacity: .9; }
.stage .dopts .group.dcard.shname { min-width: 120px; }
.shname span { font-size: 15px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.2; }
.stage .dopts .group.shsel.chosen { border-color: var(--amber); background: #FFFBEB; }
.answer.shbtns { flex-wrap: wrap; }
.num.shbtn { display: flex; flex-direction: column; align-items: center; width: auto; min-width: 82px; height: auto; padding: 4px 6px; }
.num.shbtn span { font-size: 13px; line-height: 1.2; }
@media (max-width: 560px) { .stage .dopts .group.dcard.shname { min-width: 0; width: 44%; } .shname span { font-size: 14px; } }
.stage .dopts .group.mopt { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; max-width: none; padding: 6px 8px; }

/* ---- รูปสามเหลี่ยม สี่เหลี่ยม วงกลม วงรี (G1-L1-08-03-1) · รอยของทรง (G1-L1-08-03-2) ---- */
.fpic svg, .ppic svg, .prpic svg, .tpic svg { display: block; overflow: visible; }
.fmk { animation: fmkIn .35s both; }
@keyframes fmkIn { from { opacity: 0; } to { opacity: 1; } }
.stage .dopts .group.fopt { padding: 6px; }
.fshint .tout { stroke: #F97316; stroke-width: 8; }
.prhint .ppic [fill="#93C5FD"] { stroke: #F97316; stroke-width: 5; }
.prhint .prwant .fpic { animation: prPulse 1s ease-in-out 2; }
@keyframes prPulse { 50% { transform: scale(1.12); } }
.ppart { transition: opacity .3s; }
.ppart.pdim { opacity: .18; }
.prpic { max-width: 100%; }
.prpic svg { max-width: 100%; height: auto; }
@media (max-width: 560px) { .stage .dopts .group.fopt .fpic svg { width: 92px; height: auto; } }

/* ---- หลักร้อย (G2-L1-01-01): แผ่นร้อย = 10 rows of 10, the hundreds place on the left ---- */
.pic.sticks .col.hundreds { display: grid; grid-template-columns: repeat(var(--per3), auto); gap: 8px; }
.pic.sticks.chart .col.hundreds { background: #FFF4E5; border-right: 3px solid #C9CEDF; border-radius: 15px 0 0 15px; }
.pic.sticks.chart.h3 .col.tens { border-radius: 0; }
.pic.sticks .flat { position: relative; width: 62px; height: 62px; border: 2px solid #1E9488; border-radius: 3px; background-color: #BFEDE6;
  background-image: linear-gradient(#1E9488 1px, transparent 1px), linear-gradient(90deg, #1E9488 1px, transparent 1px); background-size: 6px 6px; background-position: -1px -1px; }
.pic.sticks .flat.sel { outline: 4px solid #F9A826; outline-offset: 3px; }
.pic.sticks .flat .badge { top: -32px; }
.pic.sticks.plain .col.hundreds { grid-template-columns: repeat(var(--per5), auto); }
/* option cards and match columns (Chai 2569-10-23: two bundles were cut off at the card's edge): a plain picture shows only the
   places it has — an empty ones / tens column took 110px and pushed the bundles out of the card — and แผ่นร้อย wrap three to a row */
.stage .options .pic.sticks.plain .col.ones:not(:has(.stick)), .mcol.pics .pic.sticks.plain .col.ones:not(:has(.stick)),
.stage .options .pic.sticks.plain .col.tens:not(:has(.bundle)), .mcol.pics .pic.sticks.plain .col.tens:not(:has(.bundle)) { display: none; }
.stage .options .pic.sticks.plain .col.hundreds, .mcol.pics .pic.sticks.plain .col.hundreds { grid-template-columns: repeat(var(--per3), auto); }
@media (max-width: 600px) {          /* a phone: a card with the place chart, or with more than three bundles, takes the whole row */
  .stage .options .group:has(.pic.sticks.chart), .stage .options .group:has(.col.tens .bundle:nth-of-type(4)) { flex-basis: 100%; max-width: none; }
  .mcol.pics .pic.sticks { zoom: .44; }
}
@media (max-width: 560px) { .pic.sticks .flat { width: 48px; height: 48px; background-size: 4.6px 4.6px; } .pic.sticks.plain .col.hundreds { grid-template-columns: repeat(var(--per3), auto); } }
.stage.compose .compose-row.seq3 { gap: 8px; flex-wrap: wrap; justify-content: center; }      /* count by hundreds: five items, two lines on a phone */
.stage.compose .compose-row.seq3 .numcard.mini { min-width: 0; height: 70px; font-size: 38px; padding: 0 8px; border-radius: 16px; }
.stage.compose .compose-row.seq3 .slot { gap: 8px; padding: 8px 12px 30px; }
.stage.compose .compose-row.seq3 .slot .cell { width: 40px; height: 62px; font-size: 44px; }
.stage.compose .compose-row.seq3 .slot .cell small { font-size: 11px; bottom: -25px; }
.mnum.long { width: auto; min-width: 96px; padding: 0 10px; font-size: 44px; }
@media (max-width: 560px) { .mnum.long { min-width: 76px; font-size: 32px; padding: 0 6px; } }
.stage.match .mcol.nums { flex: none; }
.stage.match .mcol.pics { min-width: 0; }
.stage.match .mpic .pic.sticks.plain .col { min-width: 0; min-height: 0; padding: 6px; }

/* ---- ป.2 base-ten blocks (G2-L1-01-02): แผ่นร้อย · แท่งสิบ · หน่วย; places coloured as in the clip (ร้อย orange · สิบ blue · หน่วย green) ---- */
.pic.blocks { --bf: #BFEDE6; --be: #1E9488; }
.pic.blocks.chart, .pic.blocks.plain { display: flex; align-items: stretch; }
.pic.blocks.chart { border: 3px solid #C9CEDF; border-radius: 18px; background: #fff; overflow: hidden; }
.pic.blocks .col { position: relative; display: flex; align-items: center; justify-content: center; min-width: 84px; min-height: 104px; padding: 28px 10px 12px; }
.pic.blocks.plain .col { padding: 8px; min-height: 0; min-width: 0; }
.pic.blocks.chart .col.hundreds { background: #FFF4E5; border-right: 3px solid #C9CEDF; }
.pic.blocks.chart .col.tens { background: #EAF2FF; border-right: 3px solid #C9CEDF; }
.pic.blocks.chart .col.ones { background: #EAF8EF; }
.pic.blocks .lab { position: absolute; top: 5px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; }
.pic.blocks .hundreds .lab { color: #C2410C; } .pic.blocks .tens .lab { color: #1D4ED8; } .pic.blocks .ones .lab { color: #15803D; }
.pic.blocks .bgrid { display: grid; gap: 5px; align-items: end; }
.pic.blocks .hundreds .bgrid { grid-template-columns: repeat(3, auto); }
.pic.blocks .tens .bgrid { grid-template-columns: repeat(5, auto); }
.pic.blocks .ones .bgrid { grid-template-columns: repeat(3, auto); }
.pic.blocks .flat, .pic.blocks .rod, .pic.blocks .unit { position: relative; border: 2px solid var(--be); border-radius: 2px; background-color: var(--bf); }
.pic.blocks .flat { width: 46px; height: 46px; background-image: linear-gradient(var(--be) 1px, transparent 1px), linear-gradient(90deg, var(--be) 1px, transparent 1px); background-size: 4.6px 4.6px; background-position: -1px -1px; }
.pic.blocks .rod { width: 10px; height: 52px; background-image: linear-gradient(var(--be) 1px, transparent 1px); background-size: 100% 5.2px; background-position: 0 -1px; }
.pic.blocks .unit { width: 14px; height: 14px; }
.pic.blocks .sel { outline: 3px solid #F9A826; outline-offset: 2px; }
.pic.blocks .badge { top: -26px; }
.stage.compose .compose-row.exp3 { gap: 6px; flex-wrap: wrap; justify-content: center; }
.stage.compose .compose-row.exp3 .numcard.mini { min-width: 0; height: 66px; font-size: 36px; padding: 0 8px; border-radius: 16px; }
.stage.compose .compose-row.exp3 .op { font-size: 34px; }
.stage.compose .compose-row.exp3 .slot { gap: 8px; padding: 8px 12px 30px; }
.stage.compose .compose-row.exp3 .slot .cell { width: 38px; height: 60px; font-size: 42px; }
.stage.compose .compose-row.exp3 .slot .cell small { font-size: 11px; bottom: -25px; }
.stage.compose .compose-row.exp3 .rowbreak { flex-basis: 100%; height: 0; }
.stage.compose .compose-row.exp3 > .numcard.mini:first-child { font-size: 48px; height: 80px; }
/* blocks inside answer cards: smaller and allowed to wrap, so three pictures fit a phone */
.options .pic.blocks.plain, .mpic .pic.blocks.plain { flex-wrap: wrap; justify-content: center; align-items: center; }
.options .pic.blocks .flat, .mpic .pic.blocks .flat { width: 32px; height: 32px; background-size: 3.2px 3.2px; }
.options .pic.blocks .rod, .mpic .pic.blocks .rod { width: 8px; height: 36px; background-size: 100% 3.6px; }
.options .pic.blocks .unit, .mpic .pic.blocks .unit { width: 10px; height: 10px; }
.options .pic.blocks .bgrid, .mpic .pic.blocks .bgrid { gap: 3px; }
.options .pic.blocks.plain, .mpic .pic.blocks.plain { max-width: 100%; }
.stage.compose .compose-row.exp3 .slot .cell { width: 32px; }
.stage.compose .compose-row.exp3 .slot:not(.places) { padding-bottom: 10px; }

/* ---- นับทีละเท่าๆ กัน (G2-L1-01-03): plates of a group each · hands ---- */
.pic.groups { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100%; }
.pic.groups .grp { position: relative; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; min-width: 64px; min-height: 52px;
  padding: 8px 10px; border-radius: 50%; background: #FEF3C7; border: 3px solid #F5D78E; }
.pic.groups.hands .grp { border-radius: 16px; background: #F1F5F9; border-color: #CBD5E1; padding: 4px; }
.pic.groups .grp > .obj { width: 30px; height: 30px; padding: 0; border: none; background: none; }
.pic.groups.hands .pic.fingers { zoom: .5; }
.options .pic.groups.hands .pic.fingers { zoom: .38; }
.pic.groups.hands .grp { min-width: 0; min-height: 0; overflow: visible; }
.pic.groups .grp.sel { outline: 4px solid #F9A826; outline-offset: 2px; }
.pic.groups .grp .badge { top: -26px; }
.stage .seqrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stage .seqrow .numcard.mini { min-width: 0; height: 70px; font-size: 38px; padding: 0 10px; }
.options .pic.groups .grp { min-width: 48px; min-height: 40px; padding: 4px 6px; }
.options .pic.groups .grp > .obj { width: 22px; height: 22px; }

/* ---- เปรียบเทียบจำนวนสามหลัก (G2-L1-01-04): ร้อย orange · สิบ blue · หน่วย green when lit ---- */
.numcard.cmpcard .dg.hi3 { background: #DCFCE7; color: #15803D; }
.cmp-side .pic.blocks.plain { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.cmp-side .pic.blocks .flat { width: 30px; height: 30px; background-size: 3px 3px; }
.cmp-side .pic.blocks .rod { width: 8px; height: 34px; background-size: 100% 3.4px; }
.cmp-side .pic.blocks .unit { width: 10px; height: 10px; }
.cmp-side .pic.blocks .bgrid { gap: 3px; }
.oitem .pic.blocks.plain { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.oitem .pic.blocks .flat { width: 22px; height: 22px; background-size: 2.2px 2.2px; }
.oitem .pic.blocks .rod { width: 6px; height: 26px; background-size: 100% 2.6px; }
.oitem .pic.blocks .unit { width: 8px; height: 8px; }
.oitem .pic.blocks .bgrid { gap: 2px; }
.numcard.cmpcard.three { min-width: 0; padding: 0 8px; }
.numcard.cmpcard.three .dg { padding: 0 1px; }
.numcard.cmpcard.three.big { font-size: 56px; height: 92px; }
.numcard.cmpcard.three.mini { font-size: 38px; height: 64px; }
@media (max-width: 560px) { .numcard.cmpcard.three.big { font-size: 38px; height: 70px; padding: 0 6px; } .numcard.cmpcard.three.mini { font-size: 32px; height: 56px; } }
.stage .options .numcard.mini.th { font-size: 46px; min-width: 0; padding: 0 10px; }
@media (max-width: 560px) { .stage .options .numcard.mini.th { font-size: 38px; } }

/* ส่วนหนึ่ง / อีกส่วนหนึ่ง / ทั้งหมด — the bar of clip 02-07 (left orange, right blue, the whole purple; the missing one dashed) */
.pwbar { width: min(100%, 560px); display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 4px auto; }
.pwlab { align-self: center; display: flex; align-items: baseline; gap: 8px; color: #6D28D9; font-weight: 700; }
.pwlab .v { font-size: 34px; } .pwlab .t { font-size: 15px; }
.pwlab.unk .v { border: 3px dashed #6D28D9; border-radius: 10px; padding: 0 14px; background: #fff; }
.pwbrace { height: 14px; border: 3px solid #6D28D9; border-bottom: none; border-radius: 10px 10px 0 0; }
.pwrow { display: flex; height: 64px; }
.pwseg { display: grid; place-items: center; min-width: 0; font-size: 30px; font-weight: 700; border: 3px solid; }
.pwseg.a { background: #FED7AA; border-color: #EA7317; color: #C2410C; border-radius: 8px 0 0 8px; }
.pwseg.b { background: #BFDBFE; border-color: #2F6FD6; color: #1D4ED8; border-left: none; border-radius: 0 8px 8px 0; }
.pwseg.unk { background: #fff; border-style: dashed; }
.pwseg.b.unk { border-left: 3px dashed #2F6FD6; }
.pwseg.b.cut { background: #E5E7EB; border-color: #9CA3AF; color: #4B5563; }
.pwseg.focus, .pwlab.focus .v { box-shadow: 0 0 0 4px #F9A826; }
.pwseg.found { background: #ECFDF5; color: #047857; animation: pop .35s ease-out; }
.pwlab.found .v { color: #047857; animation: pop .35s ease-out; }
.pwtags { display: flex; } .pwtags .t { text-align: center; font-size: 14px; font-weight: 600; } .pwtags .t.a { color: #C2410C; } .pwtags .t.b { color: #1D4ED8; }
.stage.pwstage .eqrow { margin-bottom: 6px; }
.pwopt { min-width: 0; } .pwsent { font-size: 26px; font-weight: 700; }
.pwsent .mn { display: inline-block; width: .55em; height: .11em; border-radius: .05em; background: currentColor; vertical-align: middle; margin: 0 .15em; }
@media (max-width: 600px) { .pwrow { height: 52px; } .pwseg { font-size: 24px; } .pwlab .v { font-size: 28px; } .pwsent { font-size: 22px; } }
@media (max-width: 600px) {          /* 02-07: three-digit sentences on a phone */
  .stage.pwstage .eqrow { gap: 4px; flex-wrap: nowrap; }
  .stage.pwstage .eqrow .numcard.mini { font-size: 32px; min-width: 0; height: 54px; padding: 0 8px; }
  .stage.pwstage .eqrow .eqop { font-size: 26px; } .stage.pwstage .eqrow .eqop.mn { width: 16px; height: 4px; }
  .stage.pwstage .eqrow .eqblank { width: 50px; min-width: 0; height: 54px; font-size: 28px; }
}

/* ป.2 02-08: two bars for comparing (the long one divided: its whole on a brace, the matched part, the green overhang) */
.cmpbars { width: min(100%, 600px); display: flex; flex-direction: column; gap: 6px; margin: 8px auto 4px; }
.cmprow { display: flex; align-items: flex-end; gap: 8px; }
.cmpwho { width: 66px; flex: none; text-align: right; font-weight: 700; font-size: 18px; padding-bottom: 18px; line-height: 1.1; }
.cmprow.c1 .cmpwho { color: #C2410C; } .cmprow.c2 .cmpwho { color: #1D4ED8; }
.cmpbar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmpbar .pwlab .v { color: #C2410C; } .cmpbar .pwbrace { border-color: #C2410C; }
.pwseg.g { background: #BBF7D0; border-color: #16A34A; color: #15803D; border-left: none; border-radius: 0 8px 8px 0; }
.pwseg.gap { background: transparent; border: 3px dashed #16A34A; border-left: none; border-radius: 0 8px 8px 0; }
.cmprow .pwseg.b { border-left: 3px solid #2F6FD6; border-radius: 8px 0 0 8px; }
.cmprow .pwseg.b.unk { border-style: dashed; }
.pwseg.g.unk { background: #fff; border-style: dashed; border-left: 3px dashed #16A34A; }
@media (max-width: 600px) { .cmpwho { width: 64px; font-size: 13px; white-space: nowrap; } }

/* ป.2 02-09: two-step word problems — one bar per step (the step-1 bar stays, step 2 under it), the parts named, one scale */
.tsbars { width: min(100%, 620px); display: flex; flex-direction: column; gap: 8px; margin: 4px auto; }
.tsline { display: flex; align-items: flex-end; gap: 8px; }
.tsline > .tstag { flex: none; width: 84px; text-align: right; padding-bottom: 20px; }
.tstag { font-weight: 700; font-size: 17px; color: #6B7390; white-space: nowrap; }
.tsline.r1 > .tstag { color: #C2410C; } .tsline.r2 > .tstag { color: #15803D; }
.tsbar { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsbar .pwrow { height: 62px; }
.tsbar .pwseg { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.05; font-size: 24px;
  border-left: 3px solid; border-radius: 0; }
.tsbar .pwseg:first-child { border-radius: 8px 0 0 8px; } .tsbar .pwseg:last-child { border-left: none; border-radius: 0 8px 8px 0; }
.tsbar .pwseg.unk:last-child, .tsbar .pwseg.carry:last-child { border-left: 3px dashed; }
.tsn { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 3px; }
.pwseg.x { background: #E5E7EB; border-color: #9CA3AF; color: #6B7280; }
.pwseg.carry { background: #fff; border-style: dashed; }
.pwlab.carry .v { border: 3px dashed #6D28D9; border-radius: 10px; padding: 0 14px; background: #fff; }
.pwlab.unk.found .v, .pwlab.carry.found .v { border-color: #047857; }
.tsbar .pwlab .v { font-size: 26px; }
.tsdone, .tssteps { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tsdone, .tsstep { display: flex; align-items: baseline; gap: 10px; }
.tsdone { flex-direction: row; justify-content: center; }
.tscheck { font-size: 20px; font-weight: 700; color: #5B3FC4; }
.tscheck .mn { display: inline-block; width: .55em; height: .11em; border-radius: .05em; background: currentColor; vertical-align: middle; margin: 0 .2em; }
.tsfriend { font-size: 24px; font-weight: 700; color: #5B3FC4; background: #F5F3FF; border-radius: 10px; padding: 4px 14px; }
.tspairs .wpchoice { padding: 10px 16px; }
.tspair { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.wpchoice .tspair .ffsent { font-size: 26px; }
.compose-row.ff.ts > .tstag { font-size: 22px; }
.options.tsqs { flex-direction: column; align-items: stretch; } .options.sentences.tsqs .paircard { font-size: 26px; }
@media (max-width: 600px) {
  .tsline > .tstag { width: 58px; font-size: 13px; padding-bottom: 16px; } .tsbar .pwrow { height: 50px; } .tsbar .pwseg { font-size: 18px; }
  .tsn { font-size: 11px; } .options.sentences.tsqs .paircard { font-size: 20px; } .tsbar .pwlab .v { font-size: 20px; } .tsfriend { font-size: 18px; } .wpchoice .tspair .ffsent { font-size: 19px; }
  .tscheck { font-size: 16px; } .compose-row.ff.ts > .tstag { font-size: 14px; }
  .stage.compose .compose-row.ff.ts .numcard.mini { height: 50px; font-size: 28px; padding: 0 6px; } .compose-row.ff.ts .op { font-size: 22px; }
  .compose-row.ff.ts .slot .cell { width: 26px; height: 44px; font-size: 32px; } .compose-row.ff.ts .slot { gap: 4px; padding: 4px 8px 6px; }
}

/* ป.2 03-01: การคูณคืออะไร — the plates, a repeated addition / multiplication as big text, choices in a column */
.mushow { font-size: 40px; font-weight: 700; color: var(--navy); text-align: center; margin: 8px auto; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mushow .boxed { outline: 4px solid #F9A826; border-radius: 10px; padding: 0 8px; background: #FFF4D6; }
.options.muopts.col { flex-direction: column; align-items: center; }
.options.muopts .wpchoice { font-size: 30px; }
.compose-row.ff.mu { flex-wrap: wrap; }
.murun .mushow { font-size: 44px; }
@media (max-width: 600px) {
  .mushow { font-size: 28px; gap: 6px; } .options.muopts .wpchoice { font-size: 22px; }
  .stage.compose .compose-row.ff.mu .numcard.mini { height: 48px; font-size: 26px; padding: 0 5px; } .compose-row.ff.mu { gap: 3px; }
  .compose-row.ff.mu .op { font-size: 20px; } .compose-row.ff.mu .slot .cell { width: 28px; height: 44px; font-size: 32px; } .compose-row.ff.mu .slot { gap: 4px; padding: 4px 8px 6px; }
  .murun .mushow { font-size: 30px; }
}

/* ป.2 03-02: dots in rows, grouped across or down (orange boxes), one grouping or both side by side ("ชุดเดิม") */
.arrview { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 6px auto; }
.aside { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.arr { display: flex; gap: 6px; padding: 8px; background: #FEF3C7; border: 3px solid #E7C27A; border-radius: 14px; }
.arr.h { flex-direction: column; } .arr.v { flex-direction: row; }
.agrp { display: flex; gap: 6px; padding: 4px; border: 3px solid #EA7317; border-radius: 12px; }
.arr.h .agrp { flex-direction: row; } .arr.v .agrp { flex-direction: column; }
.adot { width: 22px; height: 22px; border-radius: 50%; background: #FDBA74; border: 2px solid #C2410C; }
.alab { font-size: 22px; font-weight: 700; color: var(--navy); }
.asame { display: flex; flex-direction: column; align-items: center; color: #6B7390; font-weight: 700; font-size: 16px; }
.asame .a { font-size: 30px; line-height: 1; }
@media (max-width: 600px) {
  .arrview { gap: 8px; } .arr, .agrp { gap: 3px; } .arr { padding: 5px; } .agrp { padding: 2px; border-width: 2px; }
  .adot { width: 14px; height: 14px; } .alab { font-size: 16px; } .asame { font-size: 13px; }
}
.arrview.wide { flex-direction: column; } .arrview.wide .asame { flex-direction: row; gap: 8px; } .arrview.wide .asame .a { transform: rotate(90deg); }

/* ป.2 03-03: ท่องสูตรคูณ (chant.html) — the table big, the line being chanted lit, the child's turn green */
.chant-main { max-width: 640px; margin: 0 auto; padding: 12px 16px 32px; text-align: center; }
.chant-main h1 { color: #5B3FC4; margin: 8px 0 4px; }
.ch-lead { color: #6B7390; margin: 0 0 12px; }
.ch-btns { flex-wrap: wrap; gap: 8px; }
.ch-say { min-height: 1.6em; font-size: 22px; font-weight: 700; color: #15803D; margin: 8px 0; }
.ch-table { list-style: none; padding: 0; margin: 0 auto; display: inline-flex; flex-direction: column; gap: 4px; }
.ch-line { display: grid; grid-template-columns: 2.2em 1.2em 2em 1.2em 2.6em; align-items: center; font-size: 34px; font-weight: 700;
  padding: 2px 18px; border-radius: 12px; cursor: pointer; border: 3px solid transparent; }
.ch-line .a { color: #C2410C; text-align: right; } .ch-line .n { color: #2F6FD6; } .ch-line .r { color: #5B3FC4; text-align: left; }
.ch-line .op { color: #6B7390; }
.ch-line.now { background: #FFF4D6; border-color: #F9A826; }
.ch-line.turn { background: #ECFDF5; border-color: #16A34A; }
.ch-table.hide .ch-line:not(.shown) .r { color: transparent; background: #EEF2FF; border-radius: 8px; }
.ch-note { color: #6B7390; font-size: 15px; margin: 14px 0; }
@media (max-width: 600px) { .ch-line { font-size: 26px; padding: 2px 10px; } .ch-say { font-size: 18px; } }
.mustage .pic.groups.hands { gap: 4px; } .mustage .pic.groups.hands .grp { padding: 2px; } .mustage .pic.groups.hands .pic.fingers { zoom: .3; }
.chant-main .row-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .chant-main .ch-lead { white-space: normal; }
@media (max-width: 600px) { .chant-main .row-btns .btn { font-size: 16px; padding: 10px 14px; } }

/* แม่ 4 = แม่ 2 twice (G2-L1-03-04-2 t_double, clip 03-04): each plate 2 orange + 2 blue, a small gap between the halves */
.pic.groups .grp > .obj.h1 + .obj.h2 { margin-left: 6px; }
.pic.groups .grp > .obj.h2 img { filter: hue-rotate(185deg) saturate(1.3); }
.pic.groups .grp > .obj.h2.dim img, .pic.groups .grp > .obj.h1.dim img { opacity: .28; filter: grayscale(1); }
.mushow.mudouble { font-size: 34px; }
/* plates of 6 or more (แม่ 6 7 …): smaller things so two plates fit a row on a phone */
.pic.groups.many .grp { min-width: 0; padding: 3px 7px; }
.pic.groups.many .grp > .obj { width: 17px; height: 17px; }
.pic.groups.many .grp > .obj.h1 + .obj.h2 { margin-left: 4px; }
/* แม่ 9 (G2-L1-03-06-2 t_minus, clip 03-06): the missing tenth of each plate, grey; in the solution it is taken away (dashed ring) */
.pic.groups .grp > .obj.ghost img { opacity: .35; filter: grayscale(1); }
.pic.groups .grp > .obj.ghost.gone { outline: 2px dashed #9CA3AF; outline-offset: 1px; border-radius: 50%; }
.pic.groups .grp > .obj.ghost.gone img { opacity: .15; }
.pic.groups.tall .grp { border-radius: 40%; }
.pic.groups.tall .grp > .obj.h1 + .obj.h2 { margin-left: 0; }
/* a × 0 (G2-L1-03-07-1, clip 03-07): no plate at all — an empty table */
.pic.groups .nogroups { padding: 16px 28px 22px; border-bottom: 10px solid #C08457; border-radius: 6px; color: #64748B; font-weight: 700; font-size: 20px; }
/* โจทย์ปัญหาการคูณ (G2-L1-03-09-1): one labelled box per equal group when the things are too many to draw; the running total on top */
.wmboxes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wmbox { position: relative; min-width: 54px; padding: 10px 8px; border: 3px solid #14917F; border-radius: 12px; background: #ECFDF5;
  font-size: 24px; font-weight: 700; color: #C2410C; text-align: center; }
.wmbox.sel { outline: 4px solid #F9A826; outline-offset: 2px; }
.wmbox.sel::after { content: attr(data-sum); position: absolute; top: -26px; left: 0; right: 0; font-size: 18px; color: #6D28D9; }

/* การหาร (G2-L1-04-01): the pile on a tray, one named plate a person, แจก 1 รอบ · the units under 12 ÷ 3 = 4 (levels 1–2) */
.pic.groups.share { flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
.pic.share .dvpile { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; width: min(340px, 100%); box-sizing: border-box; min-height: 44px; padding: 8px 12px;
  border-radius: 16px; background: #FDF2E3; border: 2px dashed #E8C9A0; }
.pic.share .dvpile.empty { visibility: hidden; height: 0; min-height: 0; padding: 0; border: 0; }
.pic.share .dvpile > .obj { width: 28px; height: 28px; padding: 0; border: none; background: none; }
.pic.share.many .dvpile > .obj { width: 20px; height: 20px; }
.pic.share .plates { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; }
.pic.share .grp { min-width: 78px; min-height: 66px; max-width: 112px; padding: 8px 10px 26px; border-radius: 40px; align-content: center; }
.pic.share.many .grp > .obj { width: 20px; height: 20px; }
.pic.share .grp .badge { top: -16px; right: -12px; }
.pic.share .grp .who { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 16px; font-weight: 700; color: var(--navy); }
.pic.share .obj.dealt { animation: dvdrop .25s ease-out; }
@keyframes dvdrop { from { transform: translateY(-28px); opacity: 0; } }
.dealbar { display: flex; gap: 12px; align-items: center; justify-content: center; }
.btn.dealbtn { font-size: 20px; padding: 8px 18px; }
.btn.dealbtn[disabled] { opacity: .45; }
.dvround { font-size: 18px; font-weight: 700; color: var(--navy); min-width: 110px; }
.dvcol { position: relative; display: inline-flex; }
.dvlab { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 18px; font-weight: 700; color: #64748B; white-space: nowrap; }
.compose-row.ff.mu:has(.dvcol), .dvsent:has(.dvcol) { margin-bottom: 34px; gap: 26px; }   /* room for the labels (กล่องละ 3 ฟอง) */
.dvsent { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 8px auto; }
.dvsent .op { font-size: 40px; font-weight: 700; color: var(--navy); }
.dvsent .op .mn { display: inline-block; width: 24px; height: 5px; border-radius: 3px; background: var(--navy); vertical-align: middle; }
.dvsent .numcard.mini { min-width: 64px; height: 74px; font-size: 46px; }
.dvsent .numcard.boxed { outline: 4px solid #F9A826; outline-offset: 3px; background: #FFF4D6; }
.dvsent.dvsol .numcard.mini { min-width: 52px; height: 60px; font-size: 36px; border-color: #16A34A; color: #15803D; }
@media (max-width: 600px) {
  .dvlab { font-size: 14px; margin-top: 4px; } .dvsent .op { font-size: 26px; } .dvsent { gap: 5px; }
  .dvsent .numcard.mini { min-width: 0; padding: 0 8px; height: 52px; font-size: 32px; }
  .pic.share .grp { min-width: 62px; padding: 6px 8px 22px; } .pic.share .grp .badge { top: -16px; right: -12px; }
.pic.share .grp .who { font-size: 13px; }
  .compose-row.ff.mu:has(.dvcol), .dvsent:has(.dvcol) { margin-bottom: 26px; gap: 22px; }
}

/* การหาร (2) G2-L1-04-02: หยิบ 1 กลุ่ม (the pile greys in place, a holder a group) · ลบ 3 (backward hops on a number line) */
.pic.groups.take, .pic.groups.hops { flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; width: 100%; }
.pic.take .dvpile { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; width: min(340px, 100%); box-sizing: border-box; padding: 8px 12px;
  border-radius: 16px; background: #FDF2E3; border: 2px dashed #E8C9A0; }
.pic.take .dvpile > .obj { width: 28px; height: 28px; padding: 0; border: none; background: none; }
.pic.take .dvpile > .obj.gone img { filter: grayscale(1); opacity: .3; }
.pic.take .holders { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; min-height: 10px; }
.pic.take .holder { min-width: 78px; min-height: 60px; max-width: 120px; padding: 8px 10px 26px; }
.pic.take .holder > .obj { width: 26px; height: 26px; padding: 0; border: none; background: none; }
.pic.take .holder .who { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 15px; font-weight: 700; color: var(--navy); }
.pic.take .holder .badge { top: -16px; right: -12px; }
.pic.take .holder.h-candy { border-radius: 14px 14px 22px 22px; background: #ECFDF5; border-color: #86EFAC; }   /* ถุง */
.pic.take .holder.h-apple { border-radius: 10px 10px 26px 26px; background: #F5E6D3; border-color: #B08850; }   /* ตะกร้า */
.pic.take .obj.dealt { animation: dvdrop .25s ease-out; }
.pic.hops .hopsvg { width: min(680px, 100%); }
.hopline { width: 100%; height: auto; display: block; }
.hopline .ax { stroke: var(--navy); stroke-width: 3; } .hopline .tk { stroke: var(--navy); stroke-width: 2; } .hopline .tk.big { stroke-width: 3.5; }
.hopline .nm { font: 700 30px var(--font, sans-serif); fill: var(--navy); text-anchor: middle; } .hopline .nm.top { fill: #C2410C; }
.hopline .arc { fill: none; stroke: #2F6FD6; stroke-width: 4; } .hopline .hdm { fill: #2F6FD6; }
.hopline .arc.fresh { stroke-dasharray: 600; stroke-dashoffset: 600; animation: hopdraw .35s ease-out forwards; }
@keyframes hopdraw { to { stroke-dashoffset: 0; } }
.hopline .mb { font: 700 28px var(--font, sans-serif); fill: #2F6FD6; text-anchor: middle; }
.hopline .hn { font: 700 34px var(--font, sans-serif); fill: #7C3AED; text-anchor: middle; }
.hopline .dot { fill: #C2410C; }
.dvchain { display: flex; justify-content: center; margin: 4px auto; } .dvchain .ffsent { font-size: 26px; white-space: normal; text-align: center; }
.dvsent { flex-wrap: wrap; }
@media (max-width: 600px) { .pic.take .holder { min-width: 62px; padding: 6px 8px 22px; } .pic.take .holder .who { font-size: 12px; } .dvchain .ffsent { font-size: 20px; } }
.dvsent.long { gap: 4px; } .dvsent.long .numcard.mini { min-width: 0; padding: 0 7px; height: 52px; font-size: 32px; } .dvsent.long .op .mn { width: 16px; }
@media (max-width: 600px) { .dvsent.long { gap: 2px; } .dvsent.long .numcard.mini { height: 36px; font-size: 20px; padding: 0 4px; border-width: 2px; border-radius: 10px; } .dvsent.long .op { font-size: 16px; } .dvsent.long .op .mn { width: 9px; height: 3px; } }

/* G2-L1-04-03: the table of the divisor (แม่ 6) on a hint, its line ringed in a solution · "รู้ว่า 4 × 3 = 12" / "คิดว่า 6 × ? = 24" */
.pic.groups.tab { flex-direction: column; align-items: stretch; gap: 2px; width: min(220px, 80%); margin: 0 auto; padding: 8px 14px; border-radius: 16px; background: #EFF6FF; border: 2px solid #BFDBFE; }
.pic.tab .tabhead { font-size: 22px; font-weight: 700; color: #2F6FD6; text-align: center; margin-bottom: 4px; }
.pic.tab .tabrow { font-size: 22px; font-weight: 700; color: var(--navy); text-align: center; border-radius: 8px; padding: 1px 6px; }
.pic.tab .tabrow.sel { outline: 3px solid #F9A826; background: #FFF4D6; }
.pic.tab .tabrow.ok { outline: 3px solid #16A34A; background: #DCFCE7; }
.dvthink { font-size: 30px; font-weight: 700; color: #64748B; text-align: center; margin: 6px auto; }
@media (max-width: 600px) { .pic.tab .tabrow { font-size: 18px; } .dvthink { font-size: 22px; } }

/* G2-L1-04-04: the blank of a shown sentence (ที่หายไปคือตัวไหน) · the meaning line (step 2) */
.numcard.blankcard { border-style: dashed; border-color: #C2410C; color: #C2410C; background: #FFF7ED; }
.dvmean { color: #7C3AED; }

/* G2-L1-04-05: what is left stays on the tray, "เหลือ" (not grey) · the quotient-and-remainder slot · เศษ in a sentence */
.dvleftlab { font-size: 22px; font-weight: 700; color: #0F766E; text-align: center; margin-bottom: -6px; }
.pic.share .dvpile.left { width: auto; min-width: 90px; border: 3px solid #0F766E; background: #F0FDFA; }
.slot .qrsep { align-self: center; font-size: 30px; font-weight: 700; color: #0F766E; padding: 0 6px; }
.op.remword, .dvsent .op.remword { font-size: 34px; color: #0F766E; }
@media (max-width: 600px) { .slot .qrsep { font-size: 20px; padding: 0 3px; } .op.remword, .dvsent .op.remword { font-size: 22px; } }
/* ป.2 04-06: division word problems — the whole on top, one box per share or per group, the remainder apart */
.dvwp { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dvwhole { font-size: 24px; font-weight: 700; color: #6D28D9; padding: 4px 16px; border: 3px solid #6D28D9; border-radius: 999px; background: #F5F3FF; }
.dvwp .wmbox.left { border-style: dashed; border-color: #0F766E; background: #F0FDFA; color: #0F766E; }
.dvmore { align-self: center; font-size: 28px; font-weight: 700; color: #14917F; padding: 0 4px; }
.dvwpcap { font-size: 20px; color: #334155; }
@media (max-width: 600px) { .dvwhole { font-size: 19px; } .dvwpcap { font-size: 16px; } }
.compose-row.wp.qr { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
.compose-row.wp.qr .wpbreak { flex-basis: 100%; height: 0; }
/* ป.2 05-01: วงเล็บ — orange brackets, the step rows, the story's picture (grey in place, new ones beside), the clip's lines */
.op.br, .eqop.br, .ffsent i.br { color: #C2410C; font-weight: 800; font-style: normal; }
.compose-row.ff.br .op.br { font-size: 44px; }
.brsent { display: flex; align-items: flex-start; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.brsent > .op { align-self: flex-start; margin-top: 6px; }
.brsent .dvcol .dvlab { font-size: 13px; max-width: 64px; text-align: center; line-height: 1.2; }
.brline { display: flex; align-items: center; justify-content: center; gap: 10px; }
.brline.done { opacity: .75; }
.brpic { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.brhave { font-size: 15px; color: #475569; }
.brrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.brgrp { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; max-width: 200px; flex-shrink: 0; }
.brgrp.come { max-width: 120px; }
.brgrp.come { padding: 2px 6px; border: 2px dashed #16A34A; border-radius: 10px; }
.brgrp > .obj { width: 26px; height: 26px; padding: 0; border: none; background: none; pointer-events: none; }
.brgrp > .obj.gone img { filter: grayscale(1); opacity: .3; }
.brcap { font-size: 14px; color: #64748B; }
.brchoices .brchoice .ffsent { font-size: 26px; }
.brwork { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 6px auto 0; font-size: 26px; }
.brwork .brin { border-radius: 8px; padding: 0 4px; transition: background .3s; }
.brwork .ffsent.brfirst .brin { background: #FFEDD5; box-shadow: inset 0 0 0 3px #C2410C; }
.brsent .dvlab { white-space: normal; width: 66px; text-align: center; font-size: 12px; line-height: 1.15; }
.dvsent.brsent:has(.dvcol) { margin-bottom: 44px; gap: 8px; }
@media (max-width: 600px) { .compose-row.ff.br .op.br { font-size: 30px; } .brchoices .brchoice .ffsent { font-size: 22px; } .brwork { font-size: 22px; } .brgrp > .obj { width: 22px; height: 22px; } }
/* ป.2 05-02: equal groups in the story's picture — a box per group, the shared plates */
.brgrp.box { padding: 3px 5px; border: 2px solid #B45309; border-radius: 8px; background: #FEF3C7; max-width: 96px; }
.brgrp.box.dish { border-color: #CBD5E1; background: #fff; border-radius: 999px; padding: 4px 10px; }
/* ป.2 05-03: a group with its added part inside, the empty dishes still to share into */
.brgrp.box > .brgrp.come { max-width: 70px; padding: 1px 3px; }
.brgrp.box.box { max-width: 130px; }
.brgrp.box.dish.empty { min-width: 46px; min-height: 30px; justify-content: center; align-items: center; color: #6D28D9; font-weight: 700; font-size: 18px; }
/* ป.2 05-04: the invisible bracket — a dashed orange frame round the part done first */
.brghost { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 3px dashed #C2410C; border-radius: 10px; }
.brwork .brin.ghost { border: 3px dashed #C2410C; }
.brwork .ffsent.brfirst .brin.ghost { background: #FFEDD5; box-shadow: none; }
.dvsent.brsent.long { gap: 4px; }
.dvsent.brsent.long .numcard.mini { min-width: 0; padding: 0 6px; height: 44px; font-size: 26px; }
.dvsent.brsent.long .op { font-size: 24px; }
/* ป.2 05-05: choices in words (what step 1 finds, which unit to change) */
.brchoice .brword { font-size: 22px; font-weight: 700; color: var(--navy); }
@media (max-width: 600px) { .brchoice .brword { font-size: 18px; } }
/* ป.2 06-01: นาฬิกา — the clip's dial (short hand orange, long hand blue); tap a number / a hand, drag the short hand */
.stage.ckstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
.ckpic svg { display: block; margin: 0 auto; overflow: visible; }
.cknum .ckring { fill: transparent; stroke: transparent; stroke-width: 3; }
.cknum.tap, .ckhand.tap { cursor: pointer; }
.cknum.tap:hover .ckring { fill: #EEF2FF; }
.cknum.hring .ckring { fill: #FFF1E6; stroke: #E8833A; }
.cknum.mring .ckring { fill: #E0ECFF; stroke: #2F6FD6; }
.cknum.okring .ckring, .cknum.right .ckring { fill: #DCFCE7; stroke: var(--green); }
.cknum.wrong .ckring { fill: #FEE2E2; stroke: var(--red); }
.cknum.picked .ckring { fill: #E0E7FF; stroke: var(--purple); }
.ckhand.right { filter: drop-shadow(0 0 5px var(--green)); }
.ckhand.wrong { filter: drop-shadow(0 0 5px var(--red)); }
.ckhand.picked { filter: drop-shadow(0 0 5px var(--purple)); }
.ckhand.pulse .ckbody { animation: ckpulse 0.9s ease-in-out 3; }
@keyframes ckpulse { 50% { opacity: 0.35; } }
.ckshort.drag { cursor: grab; }
.ckleg { font-size: 18px; font-weight: 600; color: var(--navy); text-align: center; background: #FFF7ED; border-radius: 12px; padding: 6px 12px; }
.ckopts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ckopts .ckcard { padding: 6px; }
.ckunit { margin-left: 4px; }
.num.ckbtn { width: auto; min-width: 140px; padding: 0 18px; font-size: 22px; white-space: nowrap; }
.ckopts { gap: 8px; } .ckopts .ckcard { padding: 4px; }
.stage .dopts.ckopts { gap: 8px; }
.stage .dopts .group.dcard.ckcard { min-width: 0; padding: 4px; }
.ckctr { animation: ckpulse 0.8s ease-in-out 3; }   /* the centre: where reading a hand starts */
/* ป.2 06-02: minute labels round the dial (hidden until counted), [ ] . [ ] น. */
.ckmin { opacity: 0; transition: opacity 0.25s; }
.ckmin.on { opacity: 1; }
.ckmin.pop text { animation: ckpop 0.5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes ckpop { 40% { transform: scale(1.6); } }
.ckhmrow { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.ckslot { width: 64px; height: 78px; border: 3px solid var(--navy); border-radius: 16px; background: #fff; display: grid; place-items: center;
  font-size: 40px; font-weight: 700; color: var(--navy); cursor: pointer; }
.ckslot.on { border-color: var(--amber); box-shadow: 0 0 0 4px #FFF1D6; }
.ckslot[data-f="m"] { width: 84px; }
.ckdot { font-size: 44px; font-weight: 700; color: var(--navy); line-height: 1; }
#ckhm.right .ckslot { border-color: var(--green); color: var(--green); }
#ckhm.wrong .ckslot { border-color: var(--red); color: var(--red); }
/* ป.2 06-03: an event of the day (its name, its period), the hours after noon round the dial, a 24-hour time */
.ckevent { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ckname { font-size: 24px; font-weight: 700; color: var(--navy); }
.ckper { font-size: 18px; font-weight: 700; border-radius: 999px; padding: 3px 12px; color: #fff; background: #94A3B8; }
.ckper.morn { background: #E8833A; } .ckper.aft { background: #0F766E; } .ckper.eve { background: #7C3AED; } .ckper.night { background: #1E3A8A; }
.ckper.pop { animation: ckpulse 0.9s ease-in-out 3; }
.ckpm { opacity: 0; transition: opacity 0.25s; } .ckpm.on { opacity: 1; }
.ckpm.pop text { animation: ckpop 0.5s ease-out; transform-box: fill-box; transform-origin: center; }
.cktime { font-size: 64px; font-weight: 700; color: var(--navy); }
.ckfirst .ckname { font-size: 18px; } .ckfirst .ckper { font-size: 14px; padding: 2px 8px; }
.ckfirst .ckevent { flex-direction: column; gap: 4px; }
/* ป.2 06-04: ระยะเวลา — two durations (the number, its unit under it), the dial's start line and arc, start / end in words */
.duask { font-size: 22px; font-weight: 700; color: var(--purple); }
.stage .dopts.duopts { gap: 14px; }
.stage .dopts .group.dcard.ducard { min-width: 130px; padding: 10px 14px; gap: 4px; }
.ducard .dname { font-size: 20px; font-weight: 700; color: var(--navy); }
.ducard .dnum { font-size: 48px; font-weight: 700; line-height: 1.05; }
.ducard .dunit { font-size: 20px; font-weight: 700; }
.ducard .hr { color: #E8833A; } .ducard .mn { color: #2F6FD6; }
.ducard .dunit.pop { animation: ckpulse 0.9s ease-in-out 3; }
.dulines { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.duline { font-size: 26px; font-weight: 700; color: var(--navy); background: #F1F5F9; border-radius: 12px; padding: 4px 14px; }
.dupre { font-size: 30px; }
.dustage .compose-row.cm { flex-wrap: nowrap; gap: 8px; }
.dupre { font-size: 26px; white-space: nowrap; }
.dulines { flex-wrap: nowrap; gap: 10px; }
.duline { font-size: 21px; padding: 3px 10px; white-space: nowrap; }
/* ป.2 06-05: the day wheel, a row of days / months with one missing, the wall calendar (top row in the Thai day colours) */
.cdpic svg { display: block; margin: 0 auto; }
.cdsec { transition: opacity .3s; }
.cdsec.skip { opacity: .35; }
.cdsec.pop { animation: ckpulse .9s ease-in-out 3; }
.cdcnt { animation: fmkIn .3s; }
#answer.cddays { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.num.munitbtn.cdbtn { font-size: 21px; width: auto; min-width: 0; height: 52px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 16px; }
.cddot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); flex: none; }
.cdseq { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; max-width: 360px; margin: 0 auto; }
.cdchip { font-size: 21px; font-weight: 700; color: var(--navy); background: #fff; border: 3px solid #94A3B8; border-radius: 14px; padding: 6px 10px; min-width: 56px; text-align: center; }
.cdseq.month .cdchip { flex: 0 0 calc(50% - 8px); box-sizing: border-box; }   /* four months: two by two, read left to right */
.cdseq.month .cdchip { background: #EEF2FF; border-color: #A5B4FC; }
.cdchip.blank { border-style: dashed; border-color: var(--orange); color: var(--orange); background: #FFF7ED; min-width: 80px; }
.cdchip.blank.filled { border-style: solid; color: var(--green); background: #ECFDF5; }
.cdchip.pop { animation: ckpulse .9s ease-in-out 3; }
.calpic { width: min(100%, 360px); margin: 0 auto; }
.caltitle { font-size: 22px; font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 6px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1.5px solid #CBD5E1; background: #CBD5E1; gap: 1.5px; }
.calh { font-size: 17px; font-weight: 700; text-align: center; padding: 4px 0; }
.cald { position: relative; background: #fff; font-size: 20px; font-weight: 600; color: var(--ink); text-align: center; height: 40px; line-height: 40px; }
.cald.empty { background: #F8FAFC; }
.cald.today::after, .cald.target::after, .cald.okring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #E8833A; }
.cald.target::after { border-color: var(--purple); }
.cald.okring::after { border-color: var(--green); border-width: 4px; }
.calh.okring { box-shadow: inset 0 0 0 4px var(--green); }
.cald.band, .calh.band { box-shadow: inset 0 0 0 100px rgba(75, 69, 198, .14); }
.calh.band { box-shadow: inset 0 0 0 3px var(--purple); }
.cald.cross { background: linear-gradient(45deg, transparent 46%, rgba(214,69,69,.85) 47%, rgba(214,69,69,.85) 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(214,69,69,.85) 47%, rgba(214,69,69,.85) 53%, transparent 54%), #fff; }
.cald.start { box-shadow: inset 0 0 0 3px var(--green); }
.cald.counted { background: #DCFCE7; }
.calcnt { position: absolute; right: 3px; bottom: 1px; font-size: 12px; line-height: 1; font-weight: 700; color: var(--green); animation: fmkIn .3s; }
.cdsec.skip.lit { opacity: 1; }
.calh.band.okring { box-shadow: inset 0 0 0 4px var(--green); }
/* ป.2 06-06: the change of unit under the card (สังเกตหน่วย: 1 ชั่วโมง = 60 นาที) */
.wpconv { align-self: center; font-size: 20px; font-weight: 700; color: var(--purple); background: #EEF2FF; border: 2px solid #A5B4FC; border-radius: 12px; padding: 4px 14px; margin: 6px auto 0; width: fit-content; }
/* ---- เมตรกับเซนติเมตร (ป.2 07-01): the metre stick above, "1 ม. 25 ซม. = [ ] ซม." / "[ ] ม. [ ] ซม." below on one line ---- */
.mcpic { display: flex; justify-content: center; width: 100%; }
.mcpic svg { display: block; }
.mcstage .compose-row.cm { flex-wrap: nowrap; gap: 10px; }
.mcline { font-size: 38px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.mcline b, .mcpost b { font-weight: 800; }
@media (max-width: 600px) { .mcstage .compose-row.cm { gap: 6px; } .mcline { font-size: 30px; } .mcstage .wplab, .mcstage .wpunit { font-size: 24px; white-space: nowrap; } }
/* เปรียบเทียบและคาดคะเนความยาว (ป.2 07-02): ม. in the metre stick's yellow-brown, ซม. blue · every length also in ซม. with the hint */
.lcu { font-weight: 700; } .lcu.m { color: #A16207; } .lcu.c { color: #2F6FD6; }
.lcu.hi { border-radius: 6px; padding: 0 3px; } .lcu.m.hi { background: #FEF3C7; } .lcu.c.hi { background: #DBEAFE; }
.lcu.kg { color: #1E3A8A; } .lcu.kh { color: #B45309; } .lcu.g { color: #0F766E; }   /* weights (ป.2 08-02-2): กก. · ขีด · กรัม */
.lcu.kg.hi { background: #DBEAFE; } .lcu.kh.hi { background: #FEF3C7; } .lcu.g.hi { background: #CCFBF1; }
.lclen { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lcname { font-size: 18px; color: var(--muted, #545B78); }
.lcval { font-size: 34px; color: var(--navy); white-space: nowrap; }
.lcval b { font-weight: 800; }
.lcconv { font-size: 22px; color: var(--navy); visibility: hidden; white-space: nowrap; }
.lclen.conv .lcconv { visibility: visible; }
.lcstage .lcrow { gap: 18px; align-items: flex-start; flex-wrap: nowrap; }
.lcvol .lcval { display: flex; flex-direction: column; align-items: center; line-height: 1.15; gap: 2px; }
.lcvol .lcopts .lcval { font-size: 24px; }
.lcstage .lcrow .signbox { margin-top: 4px; }
.lcopts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lcopts .group.lcopt { min-width: 120px; padding: 10px 18px; display: flex; justify-content: center; }
.lctrio .group.wopt { min-width: 150px; padding: 24px 12px 10px; }
.lctrio .lcval { font-size: 28px; }
.lcbars, .lepic { display: flex; justify-content: center; width: 100%; }
.lcbars svg, .lepic svg { display: block; }
.lesent { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.lesay { font-size: 30px; font-weight: 700; color: var(--navy); }
.eqrow.lcrun { gap: 14px; }
/* กรัม (ป.2 08-01) */
.gwgroups { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0; }
.gwg { font-size: 16px; font-weight: 700; border-radius: 6px; padding: 4px 8px; }
.gwg.flat { background: #99F6E4; border: 2px solid #0F766E; color: #0F766E; min-width: 46px; min-height: 40px; display: grid; place-items: center;
  background-image: linear-gradient(#0F766E33 1px, transparent 1px), linear-gradient(90deg, #0F766E33 1px, transparent 1px); background-size: 8px 8px; }
.gwg.kg { background: #FEF3C7; border: 2px solid #B45309; color: #78350F; }
.gwg.one { background: #FFEDD5; border: 2px solid #C2410C; color: #9A3412; font-size: 13px; padding: 4px 5px; }   /* 08-02-1: one ขีด left over */
.gwzoom { background: #F8FAFC; border: 2px solid #CBD5E1; border-radius: 10px; margin-top: 4px; padding: 2px 4px; }   /* 08-02-1: the kg step zoomed */
.gwg.gram { background: #CCFBF1; border: 2px dashed #0F766E; color: #0F766E; }
.gwref { font-size: 18px; color: var(--navy); background: #FFFBEB; border-radius: 10px; padding: 6px 12px; }
.gwthing svg { display: block; }
/* บวกลบความยาวเมตรและเซนติเมตร (ป.2 07-04): ตั้งสองช่อง ม. | ซม. */
.mspic { display: flex; justify-content: center; width: 100%; }
.mspic svg { display: block; }
.mstable { display: grid; grid-template-columns: 44px 84px 104px; align-items: center; justify-items: center; margin: 4px auto 6px; }
.mscell { font-size: 40px; font-weight: 700; color: var(--navy); padding: 2px 10px; min-height: 52px; display: grid; place-items: center; }
.mscell.h { font-size: 26px; }
.mscell.h.m { color: #A16207; } .mscell.h.c { color: #2F6FD6; }
.mscell.m { border-right: 3px dashed #CBD5E1; justify-self: stretch; }
.mscell.line { border-top: 4px solid var(--navy); justify-self: stretch; }
.mscell.ans { color: #9CA3AF; }
.mscell.ans.found { color: #047857; }
.mscell.c.hi { background: #DBEAFE; border-radius: 8px; }
.mstable.mw .mscell.h.m { color: #1E3A8A; } .mstable.mw.kh .mscell.h.c { color: #B45309; } .mstable.mw.g .mscell.h.c { color: #0F766E; }   /* 08-03-2: กก. | ขีด · กก. | กรัม */
.mstable.mw.kh .mscell.c.hi { background: #FEF3C7; } .mstable.mw.g .mscell.c.hi { background: #CCFBF1; } .mstable.mw.g { grid-template-columns: 44px 84px 124px; }
.mscard { border: 2px solid #CBD5E1; border-radius: 14px; padding: 10px 16px; background: #fff; max-width: 560px; }
.mstell { font-size: 24px; color: var(--navy); } .msask { font-size: 24px; font-weight: 700; color: #4C1D95; margin-top: 4px; }
@media (max-width: 600px) { .mscell { font-size: 32px; min-height: 44px; } .mstable { grid-template-columns: 36px 70px 88px; } .mstell, .msask { font-size: 20px; } }
.lcrunlen { font-size: 34px; font-weight: 800; color: var(--navy); white-space: nowrap; }
@media (max-width: 600px) { .lcval { font-size: 26px; } .lcconv { font-size: 18px; } .lcstage .lcrow { gap: 8px; } .lctrio .group.wopt { min-width: 100px; }
  .lctrio .lcval { font-size: 20px; } .lesay { font-size: 24px; } .lcrunlen { font-size: 24px; } .lcopts .group.lcopt { min-width: 96px; } }
/* ปริมาตรคืออะไร (G2-L1-09-01): lumps of equal blocks, containers — counts, part names, brim line, rise and the chip show on a hint */
.vmrow { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; }
.stage .vmrow .group.vmcard { flex: none; min-width: 0; min-height: 0; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vmside { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vmact { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 150px; text-align: center; font-size: 19px; font-weight: 700; color: var(--navy); }
.vmpic { display: flex; flex-direction: column; align-items: center; }
.vmnum, .vmrise, .vmcapline { visibility: hidden; }
.vmcount, .vmchip { visibility: hidden; font-size: 18px; font-weight: 700; color: #C2410C; }
.vmchip { font-size: 20px; color: var(--navy); background: #FFF7ED; border: 2px solid #FDBA74; border-radius: 12px; padding: 4px 12px; }
.vmhint .vmnum, .vmhint .vmrise, .vmhint .vmcapline, .vmhint .vmcount, .vmhint .vmchip { visibility: visible; }
.vmhint .vmact span { background: #FEF3C7; border-radius: 8px; padding: 0 6px; }
.vmstones { gap: 40px; }
.vmrow.vmthree { flex-wrap: nowrap; gap: 8px; } .stage .vmthree .group.vmcard { flex: 1 1 0; min-width: 0; max-width: 150px; padding: 6px 4px; } .vmthree svg { max-width: 100%; height: auto; } .vmthree .vmcount { font-size: 15px; text-align: center; line-height: 1.2; }
.num.vmbtn { width: auto; height: auto; padding: 8px 10px; }
@media (max-width: 560px) { .vmrow { gap: 6px; } .stage .vmrow .group.vmcard { padding: 6px 6px; } .vmrow svg { max-width: 42vw; height: auto; } .vmact { font-size: 15px; max-width: 96px; } .vmact svg { width: 40px; } .vmchip { font-size: 16px; } }
/* ภาชนะไหนจุมากกว่า (G2-L1-09-02): pours, bottles and small glasses */
.ccspill { font-size: 17px; font-weight: 700; color: var(--red); }
.vmrow.ccpour { align-items: center; flex-wrap: nowrap; gap: 6px; } .stage .ccpour .group.vmcard { min-width: 0; padding: 6px 4px; }
.ccpours { gap: 10px; } .ccpourbox { display: flex; align-items: flex-end; gap: 2px; border: 2px dashed #CBD5E1; border-radius: 12px; padding: 4px 6px; }
.ccpourbox .mname { font-size: 14px; } .ccpourbox .ccspill { font-size: 13px; } .ccpourbox .vmact span { font-size: 14px; }
.kmpeek { visibility: hidden; margin-top: 12px; } .vmhint .kmpeek { visibility: visible; }
.kmtwo { align-items: flex-start; gap: 16px; } .kmbox { gap: 4px; } .stage .kmtwo .group.vmcard { padding: 8px 8px; }
.kmamt { font-size: 20px; font-weight: 700; } .kmthing { gap: 2px; margin-bottom: 8px; }
.kmstage .vmchip { margin: 6px auto 8px; }
/* ลิตร (ป.2 09-04): bottles in rows, the tub beside them, the thing to measure as a line of text */
.ltbottles { display: grid; gap: 4px 6px; justify-content: center; align-items: end; }
.ltstage .vmpic { text-align: center; }
.ltstage .vmchip { margin: 6px auto 8px; display: table; }
.ltstage .ltact { margin: 2px auto; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: none; }
.ltthing { font-size: 24px; font-weight: 700; color: var(--navy); text-align: center; margin: 4px 0 10px; }
.ltthing b { color: #C2410C; }
.ltstage .kmpeek { display: none; } .ltstage.vmhint .kmpeek { display: block; }   /* the cups appear only on a hint: no blank gap before */
@media (max-width: 560px) { .ltpour .ltbottles svg { width: 22px; height: auto; } .ltthing { font-size: 20px; } }
.ccbottle { gap: 4px; } .ccfair { align-items: flex-start; gap: 22px; } .ccfairbox { gap: 4px; } .ccfairtxt { font-size: 17px; font-weight: 700; color: var(--navy); text-align: center; }
@media (max-width: 560px) { .ccpours { flex-direction: column; align-items: center; } .ccfair { gap: 10px; } .ccfairtxt { font-size: 15px; } }


/* รูปหลายเหลี่ยม (ป.2 10-01) */
.pgtext { font-size: 34px; font-weight: 700; color: var(--navy); padding: 14px 22px; border: 3px solid #CBD5E1; border-radius: 16px; background: #fff; }
.stage .dopts .group.dcard.pgword { min-width: 130px; justify-content: center; }
.pgword span { font-size: 22px; }
.pgstage .mcard { gap: 6px; }
@media (max-width: 560px) { .pgtext { font-size: 26px; } }

/* แผนภูมิรูปภาพ (ป.2 11) */
.pcpic svg { display: block; overflow: visible; }
.pcrow { transition: opacity .3s; }
.pcrow.pdim { opacity: .15; }

/* ซื้อคอร์ส (practice/buy.html, Chai 2569-11-02) */
.buy .buy-title { margin: 4px 0 0; font-size: clamp(22px, 4vw, 30px); }
.buy .buy-title small { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 8px; }
.buy .buy-step { margin: 18px 0 8px; font-size: 19px; }
.choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.choice-list.months { grid-template-columns: repeat(3, 1fr); }
.choice { display: grid; gap: 4px; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 16px; padding: 12px 16px; }
.choice b { font-size: 20px; color: var(--navy); }
.choice span { font-size: 15px; color: var(--muted); }
.choice.on { border-color: var(--navy); box-shadow: 0 0 0 3px #DCE4F7; background: #F5F8FF; }
.buy-sum { margin-top: 16px; }
.sum-row, .pay-amount { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 17px; }
.sum-row b, .pay-amount b { font-size: 28px; color: var(--navy); white-space: nowrap; }
.btn.big { width: 100%; max-width: 420px; }
.pay-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 14px 0 6px; }
.pay-qr #qr svg { display: block; width: 240px; height: 240px; border: 1px solid var(--line); border-radius: 12px; }
.pay-qr > div:last-child { flex: 1; min-width: 220px; }
.pay-qr h3 { margin: 0 0 4px; }
.bank summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 8px 0; }
.sel { user-select: text; font-weight: 700; }
.copy { font-size: 14px; }
.slip-pick { display: inline-flex; align-items: center; margin: 8px 0; }
.slip-preview { display: block; max-width: 260px; max-height: 360px; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; }
.done-box h1 { margin: 0 0 6px; color: #0a6b43; }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-row > div { display: grid; }
.ostat { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 4px 12px; background: #EEF0F7; color: var(--muted); }
.ostat.checking { background: #FFF1D6; color: #8a4b00; }
.ostat.confirmed { background: #E9F8F1; color: #0a6b43; }
.ostat.rejected { background: #FDECEC; color: var(--red); }
.buy-link { display: inline-flex; align-items: center; min-height: 48px; font-size: 18px; text-decoration: none; margin-top: 8px; }
@media (max-width: 560px) {
  .choice-list.months { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .choice { padding: 10px; }
  .choice b { font-size: 17px; }
  .pay-qr #qr svg { width: 220px; height: 220px; }
}

/* หน้ากฎหมาย: ข้อตกลง · คืนเงิน · ความเป็นส่วนตัว (practice/terms.html, refund.html, privacy.html) */
body.legal { user-select: text; }
.legal main { max-width: 760px; gap: 0; line-height: 1.75; font-size: 17px; }
.legal h1 { font-size: clamp(24px, 4vw, 32px); color: var(--navy); margin: 10px 0 8px; }
.legal h2 { font-size: 20px; margin: 26px 0 6px; color: var(--ink); }
.legal p, .legal li { margin: 6px 0; }
.legal ul, .legal ol { padding-left: 22px; margin: 6px 0; }
.legal a { color: var(--navy); font-weight: 600; }
.legal .lead { font-size: 18px; background: #F5F8FF; border-left: 4px solid var(--navy); padding: 10px 14px; border-radius: 8px; }
.legal .effective { font-size: 15px; color: #6b7280; margin-top: -4px; }
.legal-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.legal-nav a { font-size: 15px; text-decoration: none; border: 2px solid var(--line); border-radius: 999px; padding: 6px 14px; background: #fff; }
.legal-nav a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.legal-table td { vertical-align: top; padding: 8px 10px 8px 0; line-height: 1.6; }
.legal-table td:first-child { width: 34%; }
.auth-card .check a, .legal-links a { color: var(--navy); font-weight: 700; }
.auth-legal { text-align: center; margin: 0; font-size: 14px; color: var(--muted); }
.auth-legal a { color: var(--muted); }

/* buy page: the refund terms are acknowledged before paying · guardian zone: courses that end soon (2569-11-03) */
.buy-ack { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 15px; line-height: 1.55; }
.buy-ack input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.buy-ack a { color: var(--navy); font-weight: 700; }
.banner.renew { flex-direction: column; align-items: stretch; gap: 8px; }
.renew-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }