/* Bé sẵn sàng vào lớp 1 */
.g1-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vmin, 16px); width: min(900px, 100%); }
.g1-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 5px solid var(--c); box-shadow: 0 8px 0 var(--d), 0 16px 26px rgba(0, 0, 0, .16), inset 0 3px 0 #fff; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .05s); }
.g1-card b { font-size: clamp(16px, 2.8vmin, 22px); color: var(--d); line-height: 1.15; text-align: center; }
.g1-card .pic.lg { --s: clamp(48px, 9vmin, 80px); }
.g1-card.picked { animation: bump .5s ease; }
.g1-tick { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--good); color: #fff; font-weight: 800; display: grid; place-items: center; }
.g1-plan-btn { display: inline-flex; align-items: center; gap: 6px; color: #2c5d86; padding: 6px 16px 6px 8px; min-height: 52px; }
.g1-plan-btn b { font-size: 15px; }

/* Lộ trình cho bố mẹ */
.g1-plan { width: min(860px, 94vw); max-height: 88vh; overflow: auto; padding: 18px 20px; font-family: 'Nunito', system-ui, sans-serif; text-align: left; }
.g1-plan h2 { margin: 0 0 10px; font-family: var(--font); font-size: 24px; }
.g1-plan h2 small { display: block; font-size: 14px; color: var(--ink-soft); }
.g1-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .g1-plan-list { grid-template-columns: 1fr; } }
.g1-plan section { border: 2px solid #e3ebf5; border-radius: 14px; padding: 8px 12px; }
.g1-plan h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 15.5px; }
.g1-plan ul { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.g1-plan p { margin: 0 0 4px; font-size: 13px; color: var(--ink-soft); }
.g1-plan .g1-games { color: #1d6fd1; font-weight: 700; }
.g1-plan-tip { margin: 10px 0 !important; padding: 8px 12px; background: #fff8e1; border-radius: 12px; color: #8a5a00 !important; font-weight: 700; }

/* Chữ cái, tiếng có dấu */
.g1-letter b { font-family: var(--font); }
.g1-letter.syl b { font-size: calc(var(--s) * .4); }
.g1-letter.big { --s: clamp(110px, 26vmin, 200px); }

/* Hình học: vẽ bằng CSS */
.g1-shape-wrap { display: grid; place-items: center; }
.g1-shape { display: block; width: 72%; height: 72%; background: var(--c); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12), inset 0 6px 0 rgba(255, 255, 255, .35); }
.g1-shape.circle { border-radius: 50%; }
.g1-shape.square { border-radius: 10%; }
.g1-shape.rect { height: 44%; width: 86%; border-radius: 8%; }
.g1-shape.triangle { clip-path: polygon(50% 4%, 96% 92%, 4% 92%); box-shadow: none; }

/* Toán: nhóm đồ vật, dấu cộng, đồ vật đã ăn */
.g1-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: clamp(100px, 22vmin, 170px); min-height: clamp(70px, 14vmin, 110px); align-content: center; }
.g1-sum { align-items: center; }
.g1-op { font: 800 clamp(30px, 6vmin, 48px) var(--font); color: #ff9f1c; margin: 0 6px; }
.g1-it.gone { opacity: .25; filter: grayscale(1); position: relative; }
.g1-it.gone::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 4px; border-radius: 4px; background: #8a8fa3; transform: rotate(-35deg); }

/* Quy luật */
.g1-seq { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(4px, 1.2vmin, 10px); max-width: min(720px, 90vw); }
.g1-q { display: grid; place-items: center; width: clamp(44px, 10vmin, 72px); height: clamp(44px, 10vmin, 72px); border: 4px dashed #ffb347; border-radius: 16px; font: 800 clamp(26px, 5vmin, 40px) var(--font); color: #ff9f1c; animation: pulse 1.4s ease-in-out infinite; }
.g1-new { animation: pop .45s ease; }

/* Ghép vần, tập đọc, số đến 20 */
.g1-spell, .g1-eq { display: flex; align-items: center; gap: 4px; }
.g1-read { padding: clamp(14px, 3vmin, 26px) clamp(20px, 4vmin, 40px); }
.g1-read b { font: 800 clamp(34px, 7vmin, 64px)/1.15 var(--font); color: #d63a3a; letter-spacing: 1px; }
.g1-read.sent b { font-size: clamp(24px, 4.6vmin, 42px); color: #2c5d86; }
.g1-sticks { display: flex; align-items: flex-end; gap: clamp(4px, 1vmin, 8px); padding: 14px 18px; }
.g1-stick { display: block; width: clamp(7px, 1.4vmin, 11px); height: clamp(60px, 13vmin, 110px); border-radius: 6px; background: linear-gradient(90deg, #ffcf6b, #e8a33a); box-shadow: 0 3px 0 #c98a2b; }
.g1-bundle { position: relative; display: flex; gap: 1px; margin-right: clamp(8px, 2vmin, 18px); }
.g1-bundle::after { content: ''; position: absolute; left: -4px; right: -4px; top: 45%; height: 10px; border-radius: 6px; background: #ff5d5d; }
.g1-eq .g1-q { width: clamp(64px, 14vmin, 110px); height: clamp(64px, 14vmin, 110px); }
.pic.num.small b { letter-spacing: -2px; }
a.g1-print { text-decoration: none; color: #16a34a; }

/* Đoạn văn */
.g1-passage { max-width: min(620px, 90vw); text-align: left; }
.g1-passage b { font-size: clamp(20px, 3.6vmin, 32px); line-height: 1.45; }

/* Đồng hồ, lịch */
.g1-clock svg { width: 100%; height: 100%; }
.g1-clock .face { fill: #fff; stroke: #3aa0ff; stroke-width: 5; }
.g1-clock line { stroke: #9fb3c8; stroke-width: 2.5; stroke-linecap: round; }
.g1-clock text { font: 800 11px var(--font); fill: #2c5d86; text-anchor: middle; }
.g1-clock .hh { stroke: #ff5d5d; stroke-width: 6; }
.g1-clock .mh { stroke: #2c5d86; stroke-width: 4; }
.g1-clock .pin { fill: #2c5d86; }
.g1-day { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18%; background: linear-gradient(#ff7a7a 0 26%, #fff 26%); box-shadow: inset 0 0 0 3px #ffd0d0; }
.g1-day small { font: 800 calc(var(--s) * .14) var(--font); color: #2c5d86; margin-top: 14%; }
.g1-day b { font: 800 calc(var(--s) * .4)/1 var(--font); color: #2c5d86; }
.g1-day.today { --s: clamp(110px, 24vmin, 180px); box-shadow: inset 0 0 0 4px #ff9f1c, 0 0 0 6px rgba(255, 159, 28, .25); }

/* Tiền Việt Nam (tờ tiền vẽ bằng CSS) */
.g1-note { width: calc(var(--s) * 1.25); height: calc(var(--s) * .62); border-radius: 10px; flex-direction: column; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 90%, white) 0 6px, var(--c) 6px 12px); border: 3px solid var(--d); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .45); }
.g1-note b { font: 800 calc(var(--s) * .24)/1 var(--font); color: #fff; text-shadow: 0 2px 0 var(--d), 0 0 6px var(--d); }
.g1-note small { font: 700 calc(var(--s) * .1) var(--font); color: #fff; text-shadow: 0 1px 0 var(--d); }
.g1-shop { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g1-price { font: 800 clamp(20px, 4vmin, 30px) var(--font); color: #d63a3a; background: #fff3d6; border: 2px dashed #ffb347; border-radius: 12px; padding: 2px 12px; }

/* Tập viết */
.g1write .main { justify-content: flex-start; overflow-y: auto; }
.g1-wsec { width: min(900px, 100%); }
.g1-wsec h4 { margin: 4px 0 6px; font-size: 16px; color: #2c5d86; }
.g1-wrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.g1-w { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 4px; min-height: 72px; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .02s); }
.g1-w .lsvg { width: 48px; height: auto; --c: var(--c); }
.g1-w .lsvg path { stroke-width: 9; }
.g1-num { font: 800 34px/1 var(--font); color: var(--c); }
.g1-w .lv-stars i { width: 12px; height: 12px; }
.g1-dots-btn { grid-column: span 2; flex-direction: row; justify-content: center; gap: 6px; color: #7c3aed; }

/* Nối điểm */
.g1-board { width: min(62vmin, 520px); aspect-ratio: 1; padding: 10px; }
.g1-svg { width: 100%; height: 100%; overflow: visible; }
.g1-svg .line { fill: none; stroke: #3aa0ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g1-svg .fill { opacity: .85; stroke: #fff; stroke-width: 1.5; animation: pop .5s ease; }
.g1-svg .dot { cursor: pointer; }
.g1-svg .hit { fill: transparent; }
.g1-svg .pt { fill: #c3cfdf; stroke: #fff; stroke-width: 1; }
.g1-svg .dot.on .pt { fill: #3aa0ff; }
.g1-svg .dot.cur .pt { fill: #2fcf6a; animation: tstart 1s ease-in-out infinite; }
.g1-svg text { font: 800 5.6px var(--font); fill: #2c5d86; text-anchor: middle; pointer-events: none; }
.g1-svg .dot.nope .pt { fill: #ff9f1c; }

/* Mê cung */
.g1-mz { --S: min(64vmin, 520px); position: relative; width: var(--S); height: var(--S); padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); overflow: hidden; background: #f3fbff; }
.g1-mz.nope { animation: shake .4s ease; }
.mz-c { border: 3px solid transparent; cursor: pointer; }
.mz-c.wn { border-top-color: #5b7fa8; } .mz-c.ws { border-bottom-color: #5b7fa8; }
.mz-c.we { border-right-color: #5b7fa8; } .mz-c.ww { border-left-color: #5b7fa8; }
.mz-bear, .mz-goal { position: absolute; width: calc(var(--S) / var(--n)); height: calc(var(--S) / var(--n)); left: calc(var(--c) * var(--S) / var(--n)); top: calc(var(--r) * var(--S) / var(--n)); display: grid; place-items: center; pointer-events: none; transition: left .13s linear, top .13s linear; }
.mz-bear img { height: calc(var(--S) / var(--n) * .86); width: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2)); }
.mz-goal .pic { --s: calc(var(--S) / var(--n) * .75); animation: pulse 1.4s ease-in-out infinite; }

@media (orientation: portrait) {
  .g1-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .g1-card { padding: 8px 4px; border-width: 3px; }
  .g1-card .pic.lg { --s: 52px; }
  .g1-card b { font-size: 13px; }
  .g1-board, .g1-mz { --S: min(88vw, 52vh); width: var(--S); }
  .g1-board { height: auto; }
}
/* điện thoại xoay ngang */
@media (orientation: landscape) and (max-height: 520px) {
  .g1-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .g1-card { padding: 4px; flex-direction: row; justify-content: center; border-width: 3px; }
  .g1-card .pic.lg { --s: 9vh; }
  .g1-card b { font-size: 12px; }
  .g1-grid { gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g1-passage b { font-size: 17px; }
  .g1-read b { font-size: 30px; }
  .g1-read.sent b { font-size: 22px; }
  .g1-stick { height: 22vh; }
  .g1-plan-btn { min-height: 44px; }
  .g1-board { width: 74vh; }
  .g1-mz { --S: 74vh; }
}
@media (orientation: portrait) and (max-height: 660px) {
  .g1-card { padding: 6px; }
  .g1-card .pic.lg { --s: 48px; }
}