/* Giao diện mầm non — chủ đề BIỂN với bạn Cá Voi */
body { font-family: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; background: linear-gradient(#8fd3ff 0%, #c9ecff 38%, #e8f8ff 62%, #fff6d8 100%) fixed; color: #1f3350; line-height: 1.25; }
#app { position: relative; z-index: 1; }
.sea { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  background:
    radial-gradient(60px 26px at 12% 9%, #fff 98%, transparent), radial-gradient(44px 22px at 17% 7%, #fff 98%, transparent), radial-gradient(40px 18px at 8% 8%, #fff 98%, transparent),
    radial-gradient(70px 28px at 82% 15%, #ffffffd9 98%, transparent), radial-gradient(46px 22px at 88% 13%, #ffffffd9 98%, transparent),
    radial-gradient(50px 50px at 93% 5%, #ffe066 60%, #ffe06655 62%, transparent 75%); }
.sea b { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q30 10 60 40 T120 40 T180 40 T240 40 V90 H0Z' fill='%2374c0fc'/%3E%3Cpath d='M0 58 Q30 34 60 58 T120 58 T180 58 T240 58 V90 H0Z' fill='%234dabf7'/%3E%3C/svg%3E") repeat-x bottom / 240px 90px; }
.sea i { position: absolute; bottom: -40px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #ffffffcc; background: #ffffff55; animation: bub 11s linear infinite; }
.sea i:nth-child(1) { left: 8%; } .sea i:nth-child(2) { left: 26%; width: 14px; height: 14px; animation-delay: 3s; animation-duration: 9s; }
.sea i:nth-child(3) { left: 47%; animation-delay: 6s; } .sea i:nth-child(4) { left: 66%; width: 30px; height: 30px; animation-delay: 1.5s; animation-duration: 14s; }
.sea i:nth-child(5) { left: 82%; width: 16px; height: 16px; animation-delay: 8s; } .sea i:nth-child(6) { left: 93%; animation-delay: 4.5s; animation-duration: 12s; }
@keyframes bub { to { transform: translateY(-115vh) translateX(24px); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .sea i, .mascot .whale { animation: none !important; } }

/* Linh vật */
.mascot { width: 150px; flex: none; }
.mascot .whale { width: 100%; display: block; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 6px 6px #1c7ed633); }
.mascot.sm { width: 84px; }
.mascot.jump .whale { animation: jump .7s ease-in-out 3, bob 3s 2.1s ease-in-out infinite; }
.card > .mascot { margin: -4px auto 4px; }
.whale .spout { animation: spout 1.6s ease-in-out infinite; transform-origin: 96px 40px; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(-3deg); } }
@keyframes jump { 40% { transform: translateY(-22px) rotate(-8deg); } }
@keyframes spout { 50% { transform: scaleY(.6); opacity: .6; } }

/* Trang chủ */
.home { padding-top: 1vh; }
.hero { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.hero .avbtn { margin: 0; }
.bubble { position: relative; background: #fff; border-radius: 26px; padding: 12px 18px; box-shadow: 0 5px 0 #a5d8ff; text-align: left; max-width: 300px; }
.bubble::after { content: ""; position: absolute; right: -12px; top: 50%; border: 9px solid transparent; border-left-color: #fff; border-right: 0; margin-top: -9px; }
.bubble b { display: block; font-size: clamp(22px, 4.6vw, 32px); font-weight: 800; color: #1864ab; }
.bubble span { font-size: clamp(15px, 2.8vw, 19px); color: #4b6584; }
.stats span { background: #fff; color: #e8590c; box-shadow: 0 4px 0 #ffd8a8; font-size: 19px; }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; margin: 0 auto; }
.mcard { border-radius: 30px; padding: 16px 10px 14px; color: #fff; box-shadow: 0 8px 0 #0000002b, inset 0 3px 0 #ffffff66; border: 4px solid #ffffffaa; transition: transform .1s; }
.mcard:active { transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 #0000002b; }
.mcard i { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 6px; background: #ffffff55; border-radius: 50%; font-size: 50px; font-style: normal; }
.mcard b { display: block; font-size: clamp(19px, 3.8vw, 26px); font-weight: 800; text-shadow: 0 2px 0 #00000022; }
.mcard small { font-size: 15px; opacity: .92; }
@media (min-width: 760px) { .menu { grid-template-columns: repeat(4, 1fr); max-width: 860px; } }
.c1 { background: linear-gradient(160deg, #ffa94d, #ff6b6b); } .c2 { background: linear-gradient(160deg, #66d9e8, #4c6ef5); }
.c3 { background: linear-gradient(160deg, #8ce99a, #12b886); } .c4 { background: linear-gradient(160deg, #faa2c1, #cc5de8); }
.topics button { box-shadow: 0 4px 0 #a5d8ff; border-radius: 18px; color: #1864ab; }
.sub { color: #4b6584; font-weight: 700; }
.home h1 { color: #1864ab; text-shadow: 0 2px 0 #fff; }
.link { color: #4b6584; }
.bigbtn { border: 4px solid #ffffffaa; box-shadow: 0 7px 0 #0000002b, inset 0 3px 0 #ffffff66; border-radius: 28px; }

/* Câu hỏi */
.x { box-shadow: 0 3px 0 #a5d8ff; color: #1864ab; }
.prog i { height: 14px; background: #ffffffaa; box-shadow: inset 0 0 0 2px #fff; }
.prog i.done { background: #51cf66; } .prog i.miss { background: #ffa94d; } .prog i.cur { background: #ffd43b; }
.timer { box-shadow: 0 3px 0 #a5d8ff; color: #1864ab; }
.qtext { border: 4px solid #fff; border-radius: 26px; box-shadow: 0 6px 0 #a5d8ff; }
.qtext .vi { color: #1f3350; }
.qno { background: #ff922b; color: #fff; border-radius: 12px; padding: 0 9px; margin-right: 8px; display: inline-block; }
.qtext.enfirst .vi .qno { font-style: normal; }
.spk { background: #fff3bf; box-shadow: 0 3px 0 #ffd43b; }
.emo, .bigmath, .fig, .bal, .grp div { box-shadow: 0 5px 0 #a5d8ff; border-radius: 24px; }
.bigmath { color: #1864ab; }
.ch { border-width: 4px; border-radius: 26px; }
.ch:nth-child(1) { border-color: #ffa8a8; box-shadow: 0 6px 0 #ffa8a8; } .ch:nth-child(1) b { background: #ff8787; color: #fff; }
.ch:nth-child(2) { border-color: #74c0fc; box-shadow: 0 6px 0 #74c0fc; } .ch:nth-child(2) b { background: #4dabf7; color: #fff; }
.ch:nth-child(3) { border-color: #8ce99a; box-shadow: 0 6px 0 #8ce99a; } .ch:nth-child(3) b { background: #51cf66; color: #fff; }
.ch:nth-child(4) { border-color: #ffd43b; box-shadow: 0 6px 0 #ffd43b; } .ch:nth-child(4) b { background: #fab005; color: #fff; }
.ch:active { transform: translateY(4px); }
.ch.ok { background: #d3f9d8; border-color: #40c057; box-shadow: 0 6px 0 #40c057; }
.ch.bad { background: #ffe3e3; border-color: #ff8787; box-shadow: none; }
.ch.sel { background: #d0ebff; border-color: #339af0; box-shadow: 0 6px 0 #339af0; }
.fbrow { display: flex; align-items: center; gap: 10px; justify-content: center; }
.fbrow .hint { flex: 1; position: relative; background: #fff; border: 3px solid #ffd43b; box-shadow: 0 5px 0 #ffd43b; }
.good { color: #2b8a3e; text-shadow: 0 2px 0 #fff; font-size: clamp(24px, 5vw, 34px); }
.next { border: 4px solid #ffffffaa; border-radius: 26px; font-size: 28px; }
.nav button, .grid button { box-shadow: 0 3px 0 #a5d8ff; color: #1864ab; }
.card { border: 4px solid #fff; border-radius: 30px; box-shadow: 0 6px 0 #a5d8ff; }
.card h2 { color: #1864ab; }
.whobtn { border: 4px solid #fff; box-shadow: 0 7px 0 #a5d8ff; }
.av { border-color: #fff; box-shadow: 0 4px 0 #a5d8ff; }
.delist div { box-shadow: 0 4px 0 #a5d8ff; }
@media (max-width: 480px) { .mascot { width: 104px; } .mcard i { width: 68px; height: 68px; font-size: 40px; } .hero { gap: 6px; } .av.lg { width: 72px; height: 72px; font-size: 44px; } }

/* ───── Trang chủ kiểu "Lớp Cá Voi" (theo ảnh mẫu Anh gửi) ───── */
.sea { background: radial-gradient(60px 26px at 12% 9%, #fff 98%, transparent), radial-gradient(44px 22px at 17% 7%, #fff 98%, transparent), radial-gradient(70px 28px at 82% 15%, #ffffffd9 98%, transparent), radial-gradient(46px 22px at 88% 13%, #ffffffd9 98%, transparent); }
#app { max-width: 1180px; }
.qwrap, .card, .delist, .who { max-width: 900px; margin-left: auto; margin-right: auto; }
.topbar { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 26px; padding: 8px 16px; box-shadow: 0 4px 0 #a5d8ff; }
.topbar .logo { height: 46px; }
.topbar nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.topbar nav button { background: none; font-size: 17px; font-weight: 700; color: #1f3350; padding: 9px 14px; border-radius: 99px; white-space: nowrap; }
.topbar nav button.on { background: #1c7ed6; color: #fff; box-shadow: 0 3px 0 #1864ab; }
.me { display: flex; align-items: center; gap: 8px; background: none; text-align: left; margin-left: auto; }
.me .av { width: 46px; height: 46px; font-size: 28px; }
.me span { font-size: 15px; color: #1f3350; line-height: 1.15; } .me b { color: #1864ab; }
.me small { display: block; font-size: 12px; color: #868e96; }
.herob { display: block; width: 100%; aspect-ratio: 1536 / 396; margin: 12px 0 0; border-radius: 30px; border: 5px solid #fff; background: url(/img/banner-pc.jpg?v=muunnf52) 40% center / cover; box-shadow: 0 7px 0 #74c0fc; }
.herob:active { transform: translateY(3px); }
.lop .stats { margin: 14px 0; }
.cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; background: #ffffffcc; border-radius: 30px; padding: 14px; box-shadow: 0 5px 0 #a5d8ff; }
.cat { position: relative; border-radius: 24px; padding: 12px 6px 44px; text-align: center; border: 3px solid #fff; box-shadow: 0 5px 0 #00000014; }
.cat:active { transform: translateY(3px); }
.cat .ic { display: grid; place-items: center; height: 84px; font-size: 56px; }
.cat .ic img { max-height: 84px; max-width: 100%; border-radius: 18px; }
.cat b { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; margin-top: 6px; }
.cat small { font-size: 13px; opacity: .8; }
.cat i { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 28px; height: 28px; line-height: 28px; border-radius: 50%; color: #fff; font-style: normal; font-size: 15px; }
.cat em { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 700; background: #fff; color: #868e96; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.k1 { background: linear-gradient(#ffe3ec, #ffd0dd); color: #e03162; } .k1 i { background: #f03e6e; }
.k2 { background: linear-gradient(#fff9db, #ffec99); color: #e67700; } .k2 i { background: #f59f00; }
.k3 { background: linear-gradient(#e6fcf0, #c3fae0); color: #2b8a3e; } .k3 i { background: #2f9e44; }
.k4 { background: linear-gradient(#e7f5ff, #d0ebff); color: #1971c2; }
.k5 { background: linear-gradient(#fff4e6, #ffe8cc); color: #d9480f; }
.k6 { background: linear-gradient(#f3f0ff, #e5dbff); color: #6741d9; }
.k7 { background: linear-gradient(#fff0f6, #ffdeeb); color: #c2255c; } .k7 i { background: #e64980; }
.cat[data-act="soon"] { opacity: .78; }
.k6 i { background: #7950f2; }
.cat.shake { animation: shake .35s; }
.sect { margin: 22px 6px 10px; text-align: left; }
.sect h2 { margin: 0; font-size: clamp(24px, 4vw, 32px); color: #1864ab; text-shadow: 0 2px 0 #fff; }
.sect p { margin: 2px 0 0; color: #4b6584; font-size: 17px; }
.acts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.act { background: #fff; border-radius: 22px; padding: 0 0 12px; overflow: hidden; text-align: left; box-shadow: 0 5px 0 #a5d8ff; }
.act:active { transform: translateY(3px); }
.act .thumb { position: relative; display: grid; place-items: center; height: 110px; font-size: 58px; }
.act .thumb u { position: absolute; right: 10px; bottom: 8px; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; background: #f03e3e; color: #fff; font-size: 15px; text-decoration: none; border: 3px solid #fff; }
.tg1 { background: linear-gradient(135deg, #a5d8ff, #d0bfff); } .tg2 { background: linear-gradient(135deg, #ffc9c9, #ffe066); } .tg3 { background: linear-gradient(135deg, #b2f2bb, #99e9f2); }
.tg4 { background: linear-gradient(135deg, #99e9f2, #a5d8ff); } .tg5 { background: linear-gradient(135deg, #eebefa, #ffc9c9); }
.act b { display: block; padding: 10px 12px 4px; font-size: 18px; color: #1f3350; }
.act small { margin-left: 12px; font-size: 12px; font-weight: 700; color: #e03162; border: 2px solid #ffa8c0; border-radius: 99px; padding: 1px 10px; }
.mascot .whale { border-radius: 26px; border: 4px solid #fff; box-shadow: 0 5px 0 #a5d8ff; filter: none; }
.mascot.big { width: 260px; max-width: 70%; }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(4, 1fr); } .acts { grid-template-columns: repeat(3, 1fr); } .topbar nav button { padding: 8px 9px; font-size: 15px; } }
@media (max-width: 700px) {
  .topbar nav { display: none; } .topbar .logo { height: 38px; }
  .herob { aspect-ratio: auto; height: 170px; background-position: 44% center; border-radius: 24px; }
  .cats { grid-template-columns: repeat(2, 1fr); padding: 10px; gap: 10px; } .acts { grid-template-columns: repeat(2, 1fr); }
  .cat .ic { height: 70px; font-size: 46px; } .cat .ic img { max-height: 70px; }
}

/* Menu ở mọi trang mục + thanh menu dưới cho điện thoại */
.topbar .logo { cursor: pointer; }
.tabbar { display: none; }
@media (max-width: 700px) {
  .tabbar { display: flex; position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; background: #fff; border-radius: 24px; padding: 6px 4px; box-shadow: 0 4px 0 #74c0fc, 0 6px 20px #1864ab33; }
  .tabbar button { flex: 1; background: none; font-size: 12px; font-weight: 700; color: #4b6584; padding: 4px 0; border-radius: 18px; line-height: 1.2; }
  .tabbar button i { display: block; font-style: normal; font-size: 24px; }
  .tabbar button.on { background: #e7f5ff; color: #1864ab; }
  .lop { padding-bottom: 92px; }
}
.lop > .home { padding-top: 14px; } .lop > .card:first-of-type, .lop > .pbtn:first-of-type { margin-top: 14px; }

/* ───── Bộ hình vẽ lại (04/10) ───── */
.logo { display: inline-flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.logo img { height: 46px; }
.logo b:nth-of-type(1) { color: #1864ab; } .logo b:nth-of-type(2) { color: #f03e6e; } .logo b:nth-of-type(3) { color: #2f9e44; }
.herob { position: relative; aspect-ratio: 1920 / 713; background: url(/img/banner-pc.jpg?v=muunnf52) center / cover; }
.ht { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(34%, 380px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ht b { font-weight: 800; line-height: 1.05; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; white-space: nowrap; }
.ht .l1 { font-size: clamp(22px, 4vw, 50px); color: #1c7ed6; }
.ht .l2 { font-size: clamp(20px, 3.6vw, 46px); background: #f4a259; border: 4px solid #fff; border-radius: 16px; padding: 2px 14px; box-shadow: 0 5px 0 #c97b3a; transform: rotate(-2deg); }
.ht .l2 u { text-decoration: none; } .ht .l2 u:nth-child(1) { color: #f76707; } .ht .l2 u:nth-child(2) { color: #2f9e44; } .ht .l2 u:nth-child(3) { color: #f03e6e; } .ht .l2 u:nth-child(4) { color: #1c7ed6; }
.ht small { font-size: clamp(11px, 1.3vw, 16px); color: #1f3350; font-weight: 700; margin-top: 8px; text-shadow: 0 1px 0 #fff; }
.ht em { font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(#ff6b81, #f03e6e); padding: 8px 22px; border-radius: 99px; font-size: clamp(14px, 1.7vw, 20px); box-shadow: 0 4px 0 #c2255c; margin-top: 6px; white-space: nowrap; }
.cat .ic img { max-height: 92px; border-radius: 0; filter: drop-shadow(0 4px 4px #00000022); }
.cat .ic { height: 92px; }
.act .thumb img { height: 92px; filter: drop-shadow(0 4px 4px #00000022); }
.mascot .whale { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 6px 6px #1c7ed633); }
.mascot.big { width: 240px; }
.mascot.sm { width: 96px; }
.top .logo { font-size: 20px; } .top .logo img { height: 36px; }
.qrow { display: flex; align-items: center; gap: 8px; }
.qrow .qtext { flex: 1; position: relative; }
.qrow .qtext::before { content: ""; position: absolute; left: -11px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.mascot.qm { width: 120px; }
@media (max-width: 700px) {
  .herob { aspect-ratio: 16 / 9; height: auto; background-image: url(/img/banner-mb.jpg?v=muunnf52); background-position: center; }
  .ht { top: 30%; width: 62%; left: 52%; } .ht small { display: none; } .ht b { -webkit-text-stroke-width: 4px; } .ht .l2 { padding: 0 8px; border-width: 3px; }
  .logo { font-size: 21px; } .logo img { height: 38px; }
  .top .logo b { display: none; }
  .mascot.qm { width: 64px; } .qrow { gap: 4px; align-items: flex-start; }
  .cat .ic, .cat .ic img { height: 76px; max-height: 76px; }
}

/* ───── Toán vào lớp 1 ───── */
.choices.n3 { grid-template-columns: repeat(3, 1fr); } .choices.n2 { grid-template-columns: 1fr 1fr; }
.choices.n3 .ch, .choices.n2 .ch { padding-left: 10px; } .choices.n3 .ch b, .choices.n2 .ch b { display: none; }
.cmp { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cmp .emo { flex: 1; min-width: 110px; max-width: 320px; font-size: clamp(26px, 5vw, 40px); }
.cmp > b { font-size: clamp(30px, 6vw, 48px); color: #1864ab; white-space: nowrap; }
.numrow { display: flex; justify-content: center; margin: 4px 0 12px; }
.ansbox { min-width: 130px; height: 84px; padding: 0 18px; border-radius: 22px; background: #fff; border: 5px dashed #74c0fc; font-size: 56px; font-weight: 800; color: #1864ab; display: grid; place-items: center; }
.ansbox.ok { border: 5px solid #40c057; background: #d3f9d8; } .ansbox.shake, .ordt.shake, .mr.shake { animation: shake .35s; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; }
.pad button { height: 68px; border-radius: 20px; background: #fff; font-size: 32px; font-weight: 800; color: #1f3350; border: 4px solid #a5d8ff; box-shadow: 0 5px 0 #a5d8ff; }
.pad button:active { transform: translateY(3px); box-shadow: 0 2px 0 #a5d8ff; }
.pad .okk { background: #40c057; color: #fff; border-color: #2f9e44; box-shadow: 0 5px 0 #2f9e44; } .pad .del { background: #fff5f5; border-color: #ffa8a8; box-shadow: 0 5px 0 #ffa8a8; color: #e03131; }
@media (min-width: 760px) { .pad { grid-template-columns: repeat(6, 1fr); max-width: 760px; } }
.slots { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px; border-radius: 22px; }
.slots span { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 4px dashed #74c0fc; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #1864ab; }
.slots b { font-size: 26px; color: #f03e6e; } .slots.ok span { border: 4px solid #40c057; background: #d3f9d8; }
.ordrow { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ordt, .ml, .mr { min-width: 76px; padding: 14px 18px; border-radius: 20px; background: #fff; border: 4px solid #ffd43b; box-shadow: 0 5px 0 #ffd43b; font-size: 32px; font-weight: 800; color: #1f3350; }
.ordt:disabled { opacity: .25; box-shadow: none; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; max-width: 560px; margin: 0 auto; }
.match > div { display: grid; gap: 12px; }
.ml { border-color: #74c0fc; box-shadow: 0 5px 0 #74c0fc; font-size: 28px; } .ml.sel { background: #d0ebff; transform: scale(1.05); }
.ml:disabled, .mr:disabled { box-shadow: none; color: #1f3350; opacity: 1; }
.tens { display: inline-flex; align-items: flex-end; gap: 10px; background: #fff; border-radius: 24px; padding: 16px 22px; box-shadow: 0 5px 0 #a5d8ff; }
.tens .ten { width: 22px; height: 180px; border-radius: 5px; border: 2px solid #1971c2; background: repeating-linear-gradient(#74c0fc 0 16px, #1971c2 16px 18px); }
.tens span { display: grid; grid-template-columns: repeat(3, 22px); gap: 5px; margin-left: 12px; align-content: end; }
.tens .one { width: 22px; height: 18px; border-radius: 4px; background: #ffa94d; border: 2px solid #e8590c; }
.colcalc { display: inline-grid; justify-items: end; background: #fff; border-radius: 24px; padding: 14px 34px; font-size: clamp(40px, 8vw, 60px); font-weight: 800; color: #1864ab; line-height: 1.15; box-shadow: 0 5px 0 #a5d8ff; letter-spacing: 6px; }
.colcalc hr { width: 100%; border: 0; border-top: 5px solid #1f3350; margin: 4px 0; } .colcalc span:last-child { font-size: .7em; }
.tg { background: #ffffffcc; border-radius: 28px; padding: 12px 14px 16px; margin: 14px 0; box-shadow: 0 5px 0 #a5d8ff; }
.tg h3 { margin: 2px 4px 10px; font-size: 22px; text-align: left; }
.tn1 h3 { color: #e8590c; } .tn2 h3 { color: #2b8a3e; } .tn3 h3 { color: #1971c2; } .tn4 h3 { color: #9c36b5; }
.lesl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.les { position: relative; border-radius: 22px; padding: 12px 8px 14px; border: 3px solid #fff; box-shadow: 0 5px 0 #00000014; color: #1f3350; }
.les:active { transform: translateY(3px); }
.tn1 .les { background: linear-gradient(#fff4e6, #ffe8cc); } .tn2 .les { background: linear-gradient(#ebfbee, #d3f9d8); } .tn3 .les { background: linear-gradient(#e7f5ff, #d0ebff); } .tn4 .les { background: linear-gradient(#f8f0fc, #eebefa); }
.les i { display: block; font-style: normal; font-size: 40px; } .les b { display: block; font-size: 16px; line-height: 1.2; margin-top: 4px; }
.les em { display: block; font-style: normal; font-size: 14px; margin-top: 4px; letter-spacing: 1px; }
@media (max-width: 700px) { .tabbar button { font-size: 11px; } .tabbar button i { font-size: 22px; } .ansbox { height: 70px; font-size: 46px; } .pad button { height: 58px; } }

@media (max-width: 1100px) { .topbar { gap: 6px; padding: 8px 10px; } .topbar nav button { padding: 8px 8px; font-size: 14px; } .me span { display: none; } .topbar .logo { font-size: 20px; } .topbar .logo img { height: 38px; } }
@media (max-width: 700px) { .me span { display: inline; } }

/* ───── Toán vào lớp 1 — màn chọn bài kiểu "poster" (khung viền, ruy băng, hình minh hoạ) ───── */
.tthhead { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; background: linear-gradient(135deg, #fff9db, #ffe8cc); border: 4px solid #fff; border-radius: 30px; padding: 10px 18px; box-shadow: 0 6px 0 #ffc078; position: relative; overflow: hidden; }
.tthhead::after { content: "✦ ★ ✦"; position: absolute; right: 18px; top: 8px; color: #ffd43b; font-size: 22px; letter-spacing: 8px; }
.tthhead img { width: 96px; filter: drop-shadow(0 4px 4px #0002); }
.tthhead h2 { margin: 0; font-size: clamp(26px, 5vw, 38px); color: #e8590c; -webkit-text-stroke: 5px #fff; paint-order: stroke fill; text-align: left; }
.tthhead p { margin: 2px 0 0; color: #7c4a03; font-weight: 700; font-size: 16px; text-align: left; }
.tgp { --c: #ff922b; --p: #fff4e6; --d: #e8590c; position: relative; margin: 34px 0 18px; padding: 44px 14px 18px; background: #fffdf7; border: 4px solid #fff; border-radius: 34px; box-shadow: 0 7px 0 var(--c), 0 10px 24px #1864ab22; outline: 3px dashed var(--c); outline-offset: -11px; }
.tgp.tn2 { --c: #51cf66; --p: #ebfbee; --d: #2b8a3e; } .tgp.tn3 { --c: #4dabf7; --p: #e7f5ff; --d: #1971c2; } .tgp.tn4 { --c: #cc5de8; --p: #f8f0fc; --d: #9c36b5; }
.tgh { position: absolute; left: 18px; top: -26px; display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--c), var(--d)); color: #fff; padding: 6px 22px 6px 78px; border-radius: 99px; border: 4px solid #fff; box-shadow: 0 5px 0 #0000001f; max-width: calc(100% - 36px); }
.tgh img { position: absolute; left: -8px; top: -22px; width: 84px; filter: drop-shadow(0 4px 3px #0003); }
.tgh small { display: block; font-size: 13px; font-weight: 700; opacity: .9; line-height: 1; text-align: left; }
.tgh b { display: block; font-size: clamp(17px, 3.4vw, 23px); line-height: 1.15; text-align: left; }
.tgp .cnt { position: absolute; right: 22px; top: 12px; font-size: 13px; font-weight: 800; color: var(--d); background: var(--p); border-radius: 99px; padding: 2px 12px; }
.tgp .lesl { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-top: 8px; }
.tgp .les { background: #fff; border: 4px solid var(--c); border-radius: 28px; padding: 14px 8px 10px; box-shadow: 0 6px 0 var(--c); outline: 2px dashed var(--c); outline-offset: -10px; color: #1f3350; transition: transform .12s; }
.tgp .les:active { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 var(--c); }
.tgp .les u { position: absolute; left: -8px; top: -10px; width: 34px; height: 34px; line-height: 28px; border-radius: 50%; background: var(--d); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; border: 3px solid #fff; box-shadow: 0 3px 0 #0002; }
.tgp .les .blob { display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--p) 60%); }
.tgp .les .blob img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 3px #0002); }
.tgp .les b { font-size: 16.5px; margin-top: 8px; min-height: 2.4em; display: grid; place-items: center; }
.tgp .les em { display: block; font-style: normal; font-size: 17px; letter-spacing: 2px; margin-top: 2px; background: var(--p); border-radius: 99px; padding: 1px 0; }
.tgp .les em s { text-decoration: none; filter: grayscale(1); opacity: .28; }
.tgp .les.mix { grid-column: span 2; display: grid; grid-template-columns: 116px 1fr; align-items: center; text-align: left; gap: 4px 12px; padding: 12px 16px; border: 4px solid #fff; outline: 0; background: linear-gradient(120deg, #ffe066, #ffa8a8 35%, #b197fc 68%, #74c0fc); box-shadow: 0 6px 0 #f783ac; color: #5f3dc4; }
.tgp .les.mix .blob { grid-row: span 3; background: #ffffffb3; width: 112px; height: 112px; }
.tgp .les.mix .rb { justify-self: start; background: #f03e6e; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 12px; border-radius: 99px; box-shadow: 0 2px 0 #c2255c; }
.tgp .les.mix b { font-size: 22px; min-height: 0; place-items: start; margin: 0; color: #3b2a8c; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.tgp .les.mix em { background: #ffffffb3; text-align: center; max-width: 150px; }
@media (max-width: 700px) { .tgp { padding: 40px 10px 14px; } .tgp .lesl { grid-template-columns: 1fr 1fr; gap: 12px; } .tgp .les .blob { width: 88px; height: 88px; } .tgp .les .blob img { width: 78px; height: 78px; } .tgp .les.mix { grid-template-columns: 92px 1fr; } .tgp .les.mix .blob { width: 92px; height: 92px; } .tthhead img { width: 72px; } .tgp .cnt { display: none; } }
@media (max-width: 700px) { .tthhead::after { display: none; } }

/* ───── Bộ sưu tập sticker ───── */
.sthead { display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; background: linear-gradient(135deg, #ffdeeb, #e5dbff 55%, #d0ebff); border: 4px solid #fff; border-radius: 30px; padding: 12px 18px; box-shadow: 0 6px 0 #f783ac; text-align: left; }
.sthead .mascot { width: 110px; }
.sthead h2 { margin: 0; font-size: clamp(24px, 4.6vw, 36px); color: #c2255c; -webkit-text-stroke: 5px #fff; paint-order: stroke fill; }
.sthead p { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: #5f3dc4; }
.sthead .big { display: inline-block; background: #fff; color: #f03e6e; font-size: 30px; font-weight: 800; border-radius: 16px; padding: 0 12px; box-shadow: 0 3px 0 #ffa8c0; margin: 0 2px; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 14px; padding: 26px 18px; border-radius: 34px; border: 4px solid #fff; outline: 3px dashed #b197fc; outline-offset: -12px; box-shadow: 0 7px 0 #b197fc;
  background: #fffdf7 radial-gradient(#e5dbff 2px, transparent 2.5px) 0 0 / 26px 26px; }
.stk2 { position: relative; background: none; padding: 0; text-align: center; transition: transform .15s; }
.stk2 img { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 6px #5f3dc433); transition: transform .2s; }
.stk2:nth-child(3n+1) img { transform: rotate(-5deg); } .stk2:nth-child(3n+2) img { transform: rotate(4deg); } .stk2:nth-child(4n) img { transform: rotate(-2deg); }
.stk2:hover img, .stk2:active img { transform: scale(1.12) rotate(0deg); }
.stk2 b { display: inline-block; margin-top: 4px; font-size: 15px; background: #fff; border-radius: 99px; padding: 2px 12px; color: #5f3dc4; box-shadow: 0 3px 0 #d0bfff; }
.stk2.rare::before, .zoomin.rare::before { content: "✨ Hiếm"; position: absolute; left: 6px; top: 0; z-index: 1; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #f59f00, #f03e6e, #7950f2); padding: 2px 10px; border-radius: 99px; box-shadow: 0 2px 0 #0002; }
.stk2.rare img { filter: drop-shadow(0 0 10px #ffd43b) drop-shadow(0 6px 6px #5f3dc433); }
.stk2.new::after { content: "MỚI"; position: absolute; right: 8px; top: 0; font-size: 12px; font-weight: 800; color: #fff; background: #f03e6e; padding: 2px 9px; border-radius: 99px; }
.stk2.myst { display: grid; place-items: center; align-content: center; min-height: 190px; border-radius: 28px; border: 4px dashed #d0bfff; background: #ffffffaa; color: #7950f2; font-weight: 800; }
.stk2.myst i { font-style: normal; font-size: 64px; animation: bob 2.4s ease-in-out infinite; } .stk2.myst span { font-size: 15px; padding: 0 10px; }
.friends { margin: 22px 0 10px; text-align: left; }
.friends h3 { margin: 0 6px 10px; font-size: 22px; color: #1864ab; }
.frow { display: flex; gap: 12px; flex-wrap: wrap; }
.fr { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 22px; padding: 8px 16px 8px 8px; box-shadow: 0 5px 0 #a5d8ff; font-weight: 800; color: #1f3350; font-size: 17px; text-align: left; }
.fr small { display: block; color: #f03e6e; font-size: 14px; } .fr.me2 { box-shadow: 0 5px 0 #ffa8c0; background: #fff0f6; } .fr .crown { font-size: 22px; }
.zoom { position: fixed; inset: 0; z-index: 20; background: #1b1464cc; display: grid; place-items: center; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.zoomin { position: relative; text-align: center; padding: 20px; }
.zoomin .rays { position: absolute; left: 50%; top: 44%; width: 150vmin; height: 150vmin; margin: -75vmin 0 0 -75vmin; background: repeating-conic-gradient(#ffffff26 0 12deg, transparent 12deg 24deg); border-radius: 50%; animation: spin 18s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.zoomin img { position: relative; width: min(74vw, 440px); max-height: 60vh; object-fit: contain; filter: drop-shadow(0 12px 18px #0006); animation: stpop .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stpop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.zoomin h3 { position: relative; margin: 14px auto 0; display: inline-block; font-size: clamp(24px, 5vw, 36px); color: #fff; background: linear-gradient(180deg, #ff6b81, #f03e6e); padding: 6px 28px; border-radius: 99px; border: 4px solid #fff; box-shadow: 0 6px 0 #c2255c; }
.zoomin p { position: relative; color: #fff; font-weight: 700; margin: 12px 0 0; opacity: .85; }
.zoomin.rare::before { left: 50%; top: 4px; transform: translateX(-50%); font-size: 16px; padding: 4px 16px; }
.newst2 { display: block; margin: 0 auto; background: none; } .newst2 img { width: min(60vw, 260px); filter: drop-shadow(0 8px 8px #5f3dc433); animation: stpop .7s cubic-bezier(.2, 1.6, .4, 1); }
.newst2 b { display: block; font-size: 22px; color: #c2255c; margin-top: 4px; }
@media (max-width: 700px) { .album { grid-template-columns: 1fr 1fr; padding: 22px 12px; } .sthead .mascot { width: 76px; } }

/* ───── Trang trí khung viền toàn web (04/10) ───── */
/* Khung + ruy băng dùng chung */
.frame { --c: #4dabf7; --d: #1c7ed6; position: relative; margin: 36px 0 18px; padding: 40px 14px 16px; background: #fffdf7; border: 4px solid #fff; border-radius: 34px; box-shadow: 0 7px 0 var(--c), 0 10px 24px #1864ab22; outline: 3px dashed var(--c); outline-offset: -11px; }
.frame.fb { --c: #f783ac; --d: #e64980; } .frame.fc { --c: #ffa94d; --d: #e8590c; }
.rib { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, var(--c), var(--d)); color: #fff; font-weight: 800; font-size: clamp(17px, 3.2vw, 23px); padding: 7px 26px; border-radius: 99px; border: 4px solid #fff; box-shadow: 0 5px 0 #0000001f; }
.rib::before, .rib::after { content: "✦"; color: #ffe066; margin: 0 8px; }
.frame .cats { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.cat { border-width: 4px; border-radius: 28px; outline: 2px dashed #ffffffd9; outline-offset: -9px; box-shadow: 0 6px 0 #00000018; }
.cat b { font-size: 18px; }
.act { border: 4px solid #fff; border-radius: 26px; box-shadow: 0 6px 0 #ffa8c0; outline: 2px dashed #ffc9de; outline-offset: -8px; }
.lop .stats span { border: 3px solid #fff; outline: 2px dashed #ffd8a8; outline-offset: -6px; padding: 9px 18px; }
.topbar { border: 4px solid #fff; outline: 2px dashed #a5d8ff; outline-offset: -8px; }
.herob { outline: 3px dashed #ffffffcc; outline-offset: -12px; }
.card { outline: 3px dashed #a5d8ff; outline-offset: -11px; }
.delist div { border: 3px solid #fff; outline: 2px dashed #a5d8ff; outline-offset: -7px; border-radius: 22px; }
.bigbtn { outline: 2px dashed #ffffff99; outline-offset: -9px; }

/* Màn làm bài */
.qtext { outline: 3px dashed #a5d8ff; outline-offset: -9px; padding: 16px 20px; }
.board { position: relative; margin-top: 14px; padding: 18px 14px 16px; background: #fffdf7; border: 4px solid #fff; border-radius: 32px; box-shadow: 0 7px 0 #ffd43b, 0 10px 24px #1864ab1f; outline: 3px dashed #ffd43b; outline-offset: -11px; }
.board::before, .board::after { content: "⭐"; position: absolute; top: -16px; font-size: 26px; filter: drop-shadow(0 2px 0 #fff); }
.board::before { left: 18px; transform: rotate(-14deg); } .board::after { right: 18px; transform: rotate(14deg); }
.board .visual:empty { margin: 0; }
.board .emo, .board .bigmath, .board .fig, .board .bal, .board .tens, .board .colcalc, .board .grp div { box-shadow: none; border: 3px dashed #a5d8ff; background: #f4faff; }
.board .bigmath { color: #1864ab; }
#fb .hint, #fb .good { border-radius: 24px; }
.fbrow .hint { outline: 2px dashed #ffe066; outline-offset: -8px; padding: 16px 18px; }

/* Bảng số 0–20: bấm một lần */
.pad20 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; max-width: 760px; margin: 6px auto 0; }
.pad20 button { height: 62px; border-radius: 20px; font-size: 28px; font-weight: 800; color: #1f3350; background: #fff; border: 4px solid var(--k, #74c0fc); box-shadow: 0 5px 0 var(--k, #74c0fc); padding: 0; }
.pad20 button:nth-child(4n+1) { --k: #ffa8a8; } .pad20 button:nth-child(4n+2) { --k: #74c0fc; } .pad20 button:nth-child(4n+3) { --k: #8ce99a; } .pad20 button:nth-child(4n) { --k: #ffd43b; }
.pad20 button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--k); }
.pad20 button.ok { background: #d3f9d8; border-color: #40c057; box-shadow: 0 5px 0 #40c057; animation: pop .4s; }
.pad20 button.bad { background: #ffe3e3; border-color: #ffa8a8; box-shadow: none; opacity: .45; animation: shake .35s; }
.pad button { border-radius: 22px; }
@media (max-width: 700px) { .pad20 { gap: 6px; } .pad20 button { height: 50px; font-size: 22px; border-width: 3px; border-radius: 15px; } .board { padding: 16px 8px 12px; } .frame { padding: 36px 8px 12px; } .rib { font-size: 16px; padding: 6px 14px; } .rib::before, .rib::after { margin: 0 4px; } }

/* Hộp thoại của Cá Voi — luôn ở giữa màn hình */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: #1b1464b3; animation: fadein .18s; }
.mbox { position: relative; width: min(460px, 100%); background: #fffdf7; border: 5px solid #fff; border-radius: 36px; padding: 74px 22px 22px; text-align: center; box-shadow: 0 9px 0 #74c0fc, 0 20px 50px #0006; outline: 3px dashed #74c0fc; outline-offset: -13px; animation: stpop .35s cubic-bezier(.2, 1.5, .4, 1); }
.mbox::before, .mbox::after { content: "✦"; position: absolute; top: 22px; font-size: 26px; color: #ffd43b; } .mbox::before { left: 28px; } .mbox::after { right: 28px; }
.mbox .mascot { position: absolute; left: 50%; top: -62px; width: 128px; margin-left: -64px; }
.mbox p { margin: 0 0 16px; font-size: clamp(19px, 3.6vw, 24px); font-weight: 700; color: #1f3350; line-height: 1.4; }
.mbox p b { color: #f03e6e; }
.mbox input { display: block; width: 150px; margin: 0 auto 16px; font: inherit; font-size: 34px; font-weight: 800; text-align: center; padding: 8px; border: 4px dashed #74c0fc; border-radius: 18px; background: #fff; color: #1864ab; -webkit-user-select: text; user-select: text; }
.mbtn { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mbtn button { flex: 1; min-width: 130px; padding: 13px 16px; font-size: 20px; font-weight: 800; border-radius: 22px; border: 4px solid #fff; color: #fff; }
.mbtn .myes { background: linear-gradient(180deg, #ff8787, #f03e6e); box-shadow: 0 5px 0 #c2255c; }
.mbtn .mno { background: linear-gradient(180deg, #69db7c, #37b24d); box-shadow: 0 5px 0 #2b8a3e; }
.mbtn button:active { transform: translateY(3px); }
.zoomin { display: grid; justify-items: center; }
@media (max-width: 700px) { .rib::before, .rib::after { display: none; } .rib { font-size: 15px; padding: 6px 12px; } .mbtn button { min-width: 110px; font-size: 18px; white-space: nowrap; padding: 13px 8px; } }

/* ───── Màn "làm xong": 2 cột — kết quả bên trái, cột nút bên phải ───── */
.done2 { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; margin-top: 8px; }
.done2 .card { max-width: none; }
.dside { --c: #b197fc; --d: #7950f2; position: sticky; top: 12px; margin-top: 38px; padding: 40px 14px 16px; display: grid; gap: 14px; background: #fffdf7; border: 4px solid #fff; border-radius: 34px; box-shadow: 0 7px 0 var(--c), 0 10px 24px #1864ab22; outline: 3px dashed var(--c); outline-offset: -11px; }
.dside .rib { font-size: 17px; padding: 6px 16px; } .dside .rib::before, .dside .rib::after { margin: 0 5px; }
.nbtn { --a: #ffa94d; --b: #ff6b6b; --s: #e03131; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; color: #fff; border-radius: 26px; border: 4px solid #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 6px 0 var(--s), inset 0 3px 0 #ffffff66; outline: 2px dashed #ffffffb3; outline-offset: -8px; overflow: hidden; transition: transform .1s; }
.nbtn::after { content: "➜"; margin-left: auto; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--s); font-size: 16px; box-shadow: 0 3px 0 #0002; }
.nbtn::before { content: "✦"; position: absolute; right: 54px; top: 6px; color: #ffffffb3; font-size: 15px; }
.nbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--s); }
.nbtn i { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: #ffffffd9; font-style: normal; font-size: 32px; box-shadow: inset 0 -3px 0 #0001; }
.nbtn i img { width: 48px; height: 48px; object-fit: contain; }
.nbtn b { display: block; font-size: 20px; line-height: 1.15; text-shadow: 0 2px 0 #00000026; }
.nbtn small { font-size: 13px; opacity: .95; }
.nbtn.n2 { --a: #66d9e8; --b: #4c6ef5; --s: #364fc7; } .nbtn.n3 { --a: #faa2c1; --b: #cc5de8; --s: #9c36b5; } .nbtn.n4 { --a: #ffe066; --b: #fd7e14; --s: #d9480f; } .nbtn.n5 { --a: #8ce99a; --b: #12b886; --s: #087f5b; }
@media (max-width: 860px) { .done2 { grid-template-columns: 1fr; } .dside { position: static; margin-top: 30px; } }

/* ───── Tài liệu tham khảo ───── */
.dochead { background: linear-gradient(135deg, #e7f5ff, #d3f9d8); box-shadow: 0 6px 0 #69db7c; } .dochead h2 { color: #1971c2; } .dochead p { color: #2b6a3e; }
.docl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.doc { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: #fff; border: 4px solid #ffd8a8; border-radius: 26px; padding: 14px; box-shadow: 0 6px 0 #ffd8a8; outline: 2px dashed #ffc078; outline-offset: -9px; }
.doc > i { flex: none; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px; background: #fff4e6; font-style: normal; font-size: 40px; }
.doc b { display: block; font-size: 19px; color: #1f3350; line-height: 1.25; } .doc p { margin: 4px 0 10px; font-size: 15px; color: #4b6584; line-height: 1.35; }
.dopen { display: inline-block; margin-top: 6px; text-decoration: none; color: #fff; font-weight: 800; font-size: 16px; padding: 8px 18px; border-radius: 99px; background: linear-gradient(180deg, #4dabf7, #1c7ed6); border: 3px solid #fff; box-shadow: 0 4px 0 #1864ab; }
.ddel { margin-left: 8px; background: #fff5f5; color: #e03131; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 99px; border: 2px solid #ffa8a8; }
.docform { text-align: left; max-width: 560px; margin: 0 auto; } .docform label { display: block; font-weight: 800; margin: 12px 0 6px; color: #1f3350; }
.docform input { width: 100%; font: inherit; font-size: 18px; padding: 11px 14px; border: 3px solid #a5d8ff; border-radius: 16px; background: #fff; -webkit-user-select: text; user-select: text; }
.topbar nav button { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1240px) { .topbar nav button { font-size: 15px; padding: 8px 7px; } }
@media (max-width: 700px) { .tabbar button { font-size: 10px; } .tabbar button i { font-size: 20px; } .docl { grid-template-columns: 1fr; } }
.dby { display: block; margin-top: 10px; font-size: 13px; color: #868e96; } .dby b { display: inline; font-size: 13px; color: #e8590c; }

/* ───── Tài khoản: trang chào, đăng nhập, đăng ký ───── */
.land { min-height: 86vh; display: grid; place-items: center; padding: 12px 0; }
.lbox { width: min(480px, 100%); text-align: center; background: #fffdf7; border: 5px solid #fff; border-radius: 38px; padding: 26px 22px; box-shadow: 0 9px 0 #74c0fc, 0 18px 40px #1864ab33; outline: 3px dashed #74c0fc; outline-offset: -13px; }
.lbox .mascot { margin: 0 auto 6px; width: 130px; } .lbox .mascot.big { width: 210px; }
.lbox h1 { margin: 6px 0; } .lbox h1 .logo { font-size: 38px; cursor: default; } .lbox h1 .logo img { height: 62px; }
.lbox h2 { color: #1864ab; margin: 6px 0 10px; font-size: 28px; }
.lbox p { font-size: 18px; color: #4b6584; font-weight: 700; line-height: 1.45; } .lbox p b { color: #e8590c; }
.lbox small { display: block; margin-top: 12px; color: #868e96; font-size: 14px; } .lbox small b { color: #e8590c; }
.lbox.pf { text-align: left; } .lbox.pf h2, .lbox.pf .mascot { text-align: center; }
.pf input:not([type=checkbox]):not([type=file]) { width: 100%; font: inherit; font-size: 20px; padding: 12px 16px; border: 3px solid #dbe4ee; border-radius: 18px; background: #f4f7fb; -webkit-user-select: text; user-select: text; }
.pf .err { color: #e03131; font-weight: 800; min-height: 1.3em; margin: 12px 0 0; font-size: 16px; text-align: center; }
.pf .chk { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 700; } .pf .chk input { width: 24px; height: 24px; flex: none; }
.whobtn small { display: block; }

/* ───── Bảng chào mừng + thi đua ───── */
.wel { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 18px 22px; background: linear-gradient(135deg, #fff9db, #ffe3ec 60%, #e5dbff); border: 5px solid #fff; border-radius: 36px; box-shadow: 0 8px 0 #f783ac; outline: 3px dashed #ffffffd9; outline-offset: -12px; }
.wel .mascot.big { width: 190px; flex: none; }
.wel h2 { margin: 0 0 10px; font-size: clamp(26px, 5vw, 40px); color: #c2255c; -webkit-text-stroke: 5px #fff; paint-order: stroke fill; text-align: left; }
.wel .stats { justify-content: flex-start; margin: 0 0 6px; } .wel .bigbtn { margin: 10px 0 0; width: min(100%, 380px); }
.lop .stats button { background: linear-gradient(180deg, #ffd43b, #fab005); color: #7c4a03; font-weight: 800; font-size: 19px; padding: 9px 18px; border-radius: 99px; border: 3px solid #fff; box-shadow: 0 4px 0 #e67700; }
.bds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bd { --c: #51cf66; background: #fff; border: 4px solid var(--c); border-radius: 26px; padding: 10px 10px 12px; box-shadow: 0 5px 0 var(--c); text-align: left; }
.bd.b1 { --c: #ff922b; } .bd.b2 { --c: #fcc419; } .bd.b3 { --c: #f783ac; }
.bd h3 { margin: 0 0 8px; font-size: 17px; text-align: center; color: #1f3350; background: color-mix(in srgb, var(--c) 22%, #fff); border-radius: 99px; padding: 4px 6px; }
.bd p { margin: 8px 4px; color: #868e96; font-size: 14px; text-align: center; }
.brow { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 16px; font-size: 15px; }
.brow.me3 { background: #fff3bf; outline: 2px dashed #fab005; }
.brow i { width: 24px; text-align: center; font-style: normal; font-weight: 800; color: #868e96; flex: none; }
.brow .av { width: 36px; height: 36px; font-size: 22px; flex: none; border-width: 2px; box-shadow: none; }
.brow b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow span:last-child { font-weight: 800; color: #e8590c; white-space: nowrap; font-size: 14px; }
@media (max-width: 1000px) { .bds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .wel { flex-direction: column; text-align: center; padding: 14px; } .wel h2 { text-align: center; } .wel .stats { justify-content: center; } .wel .mascot.big { width: 140px; } .wel .bigbtn { margin: 10px auto 0; } .bds { grid-template-columns: 1fr; } }

/* ───── Quản trị + lịch sử ───── */
.tblw { overflow-x: auto; } .histw { max-height: 420px; overflow-y: auto; }
.adm { text-align: left; } .adm h2 { text-align: left; font-size: 22px; } .adm .inv { background: #fff3bf; border: 3px dashed #fab005; border-radius: 14px; padding: 2px 14px; color: #e8590c; letter-spacing: 2px; -webkit-user-select: text; user-select: text; }
.adm td .av { width: 34px; height: 34px; font-size: 20px; border-width: 2px; box-shadow: none; } .adm td { white-space: nowrap; }
.abtn { background: #e7f5ff; color: #1864ab; font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 12px; margin: 2px; border: 2px solid #a5d8ff; }
.abtn.ok { background: #d3f9d8; border-color: #69db7c; color: #2b8a3e; font-size: 16px; } .abtn.no { background: #fff5f5; border-color: #ffa8a8; color: #e03131; }
.pend > div { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 18px; background: #f8f9fa; margin-bottom: 8px; flex-wrap: wrap; }
.pend span { flex: 1; min-width: 150px; } .pend small { display: block; color: #868e96; font-size: 13px; }
.mbox input[type=password], .mbox input:not([type]) { width: 210px; letter-spacing: 4px; }
.topbar nav:has(button:nth-child(8)) ~ .me span { display: none; }
.out { flex: none; display: flex; align-items: center; gap: 5px; background: #fff5f5; color: #e03131; font-weight: 800; font-size: 14px; padding: 8px 12px; border-radius: 99px; border: 2px solid #ffa8a8; white-space: nowrap; }
.me { margin-left: auto; } .topbar .out { margin-left: 0; }
@media (max-width: 1240px) { .out span { display: none; } .out { padding: 8px 10px; font-size: 17px; } }
.topbar nav:has(button:nth-child(8)) ~ .out span { display: none; }
.topbar nav:has(button:nth-child(8)) ~ .out { padding: 8px 10px; font-size: 17px; }
.topbar { flex-wrap: nowrap; } .topbar nav { min-width: 0; }

/* ───── Menu con sổ xuống (Thi TIMO, tài khoản) ───── */
.ddw { position: relative; display: inline-flex; }
.ddm { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 15; min-width: 190px; padding: 10px; background: #fffdf7; border: 4px solid #fff; border-radius: 24px; box-shadow: 0 6px 0 #a5d8ff, 0 14px 30px #1864ab33; outline: 2px dashed #a5d8ff; outline-offset: -8px; }
.ddw.open > .ddm { display: grid; gap: 6px; }
.ddm button { display: block; width: 100%; text-align: left; background: #fff; font-size: 17px; font-weight: 700; color: #1f3350; padding: 10px 14px; border-radius: 16px; white-space: nowrap; border: 2px solid #e7f5ff; }
.ddm button:hover, .ddm button.on { background: #e7f5ff; color: #1864ab; }
.topbar nav .ddm button.on { box-shadow: none; }
.ddw.acc { margin-left: auto; flex: none; } .ddw.acc .ddm { left: auto; right: 0; transform: none; min-width: 230px; }
.who2 { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; border-bottom: 2px dashed #a5d8ff; margin-bottom: 4px; text-align: left; }
.who2 b { display: block; font-size: 18px; color: #1864ab; } .who2 small { color: #868e96; font-size: 13px; }
.ddm .dout { background: #fff5f5; color: #e03131; border-color: #ffa8a8; margin-top: 4px; }
.topbar .logo img { height: 50px; }
.tabbar .ddw { flex: 1; } .tabbar .ddw > button { width: 100%; }
.tabbar .ddm { top: auto; bottom: calc(100% + 12px); }
.tabbar .ddm button { font-size: 17px; padding: 12px 14px; }
.topbar nav:has(button:nth-child(8)) ~ .ddw .me > span { display: none; }
@media (max-width: 1100px) { .ddw .me > span { display: none; } }
@media (max-width: 700px) { .ddw .me > span { display: inline; } .tabbar button { font-size: 11px; } }

/* ───── Trang Đề mẫu + Thi thử: thẻ có khung + cột thống kê ───── */
.dehead { background: linear-gradient(135deg, #ffe3ec, #f3d9fa); box-shadow: 0 6px 0 #e599f7; } .dehead h2 { color: #c2255c; } .dehead p { color: #862e9c; }
.exhead { background: linear-gradient(135deg, #d0ebff, #d3f9d8); box-shadow: 0 6px 0 #74c0fc; } .exhead h2 { color: #1971c2; } .exhead p { color: #1b6e3c; }
.done2 .frame { margin-top: 38px; }
.decards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 14px; margin-top: 6px; }
.dcard { --c: #ffa94d; --p: #fff4e6; --d: #e8590c; position: relative; text-align: center; background: #fff; border: 4px solid var(--c); border-radius: 28px; padding: 14px 10px 12px; box-shadow: 0 6px 0 var(--c); outline: 2px dashed var(--c); outline-offset: -10px; }
.dc2 { --c: #74c0fc; --p: #e7f5ff; --d: #1971c2; } .dc3 { --c: #8ce99a; --p: #ebfbee; --d: #2b8a3e; } .dc4 { --c: #e599f7; --p: #f8f0fc; --d: #9c36b5; }
.dcard > u { position: absolute; left: -8px; top: -10px; width: 38px; height: 38px; line-height: 32px; border-radius: 50%; background: var(--d); color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; border: 3px solid #fff; box-shadow: 0 3px 0 #0002; }
.dcard .blob, .xcard .blob { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--p) 60%); }
.dcard .blob img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 4px 3px #0002); }
.dcard > b { display: block; font-size: 21px; color: var(--d); margin-top: 6px; }
.dcard > em { display: block; font-style: normal; font-size: 14px; font-weight: 700; color: #4b6584; background: var(--p); border-radius: 99px; padding: 2px 8px; margin: 4px 0 10px; }
.dcard > div { display: flex; gap: 8px; }
.go { flex: 1; padding: 9px 4px; border-radius: 16px; border: 3px solid #fff; color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; }
.go.g1 { background: linear-gradient(180deg, #ffa94d, #ff6b6b); box-shadow: 0 4px 0 #e03131; } .go.g2 { background: linear-gradient(180deg, #74c0fc, #4c6ef5); box-shadow: 0 4px 0 #364fc7; }
.go:active { transform: translateY(3px); }
.xcards { display: grid; gap: 16px; margin-top: 6px; }
.xcard { --a: #66d9e8; --b: #4c6ef5; --s: #364fc7; --p: #ffffffd9; display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; color: #fff; padding: 16px 18px; border-radius: 30px; border: 4px solid #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 7px 0 var(--s), inset 0 3px 0 #ffffff66; outline: 2px dashed #ffffffb3; outline-offset: -9px; }
.xcard.x2 { --a: #ffa94d; --b: #ff6b6b; --s: #e03131; }
.xcard:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--s); }
.xcard .blob { flex: none; margin: 0; width: 110px; height: 110px; } .xcard .blob img { width: 96px; height: 96px; object-fit: contain; }
.xcard > span:nth-child(2) { flex: 1; min-width: 0; }
.xcard b { display: block; font-size: clamp(24px, 4.4vw, 32px); text-shadow: 0 2px 0 #00000026; line-height: 1.1; }
.xcard .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .xcard .chips i { font-style: normal; font-weight: 800; font-size: 15px; background: #fff; color: var(--s); border-radius: 99px; padding: 2px 12px; }
.xcard small { font-size: 15px; opacity: .97; }
.xcard em { flex: none; font-style: normal; font-weight: 800; background: #fff; color: var(--s); border-radius: 99px; padding: 10px 16px; box-shadow: 0 4px 0 #0002; white-space: nowrap; }
.note { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; background: #fff9db; border: 3px dashed #ffd43b; border-radius: 22px; padding: 12px 16px; text-align: left; font-size: 16px; color: #5c4a03; line-height: 1.4; }
.note b { white-space: nowrap; color: #e67700; } .note span { flex: 1; min-width: 220px; }
.sstat { --c: #74c0fc; --d: #1c7ed6; text-align: left; gap: 10px; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbox { --k: #ffe8cc; text-align: center; background: var(--k); border: 3px solid #fff; border-radius: 22px; padding: 8px 4px 10px; box-shadow: 0 4px 0 #00000012; }
.sbox.s2 { --k: #fff3bf; } .sbox.s3 { --k: #d0ebff; } .sbox.s4 { --k: #ffdeeb; }
.sbox i { display: block; font-style: normal; font-size: 26px; } .sbox b { display: block; font-size: 30px; line-height: 1.05; color: #1f3350; } .sbox b.sm { font-size: 18px; line-height: 1.7; } .sbox small { font-size: 13px; color: #4b6584; font-weight: 700; }
.sstat h4 { margin: 8px 2px 0; font-size: 16px; color: #1864ab; }
.bars > div { display: grid; grid-template-columns: 108px 1fr 40px; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1f3350; margin-top: 6px; }
.bars u { height: 14px; background: #edf2f7; border-radius: 99px; overflow: hidden; text-decoration: none; display: block; } .bars u i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd43b, #ff922b); } .bars u i.hi { background: linear-gradient(90deg, #8ce99a, #37b24d); } .bars u i.lo { background: linear-gradient(90deg, #ffa8a8, #f03e3e); }
.bars b { text-align: right; }
.recent > div { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 8px; background: #f8f9fa; border-radius: 14px; margin-top: 6px; }
.recent span { color: #868e96; } .recent b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent em { font-style: normal; font-weight: 800; color: #e8590c; white-space: nowrap; }
.snone { margin: 4px 2px; color: #4b6584; font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; background: #f1f8ff; border-radius: 18px; padding: 12px; }
@media (max-width: 700px) { .decards { grid-template-columns: 1fr 1fr; gap: 14px 10px; } .dcard .blob { width: 72px; height: 72px; } .dcard .blob img { width: 60px; height: 60px; } .go { font-size: 13px; padding: 8px 2px; } .dcard > div { gap: 4px; }
  .xcard { flex-wrap: wrap; padding: 14px; } .xcard .blob { width: 80px; height: 80px; } .xcard .blob img { width: 70px; height: 70px; } .xcard em { width: 100%; text-align: center; } }

/* ───── Nút Trước / Sau / số câu / Nộp bài khi thi ───── */
.nav { gap: 14px; margin-top: 18px; }
.nav button { padding: 14px 10px; font-size: 22px; font-weight: 800; color: #fff; border-radius: 24px; border: 4px solid #fff; outline: 2px dashed #ffffffb3; outline-offset: -8px; text-shadow: 0 2px 0 #00000026; }
.nav button[data-act="prev"] { background: linear-gradient(135deg, #b197fc, #7950f2); box-shadow: 0 6px 0 #5f3dc4, inset 0 3px 0 #ffffff55; color: #fff; }
.nav button[data-act="nextQ"] { background: linear-gradient(135deg, #ffa94d, #ff6b6b); box-shadow: 0 6px 0 #e03131, inset 0 3px 0 #ffffff55; color: #fff; }
.nav button:active { transform: translateY(4px); box-shadow: 0 2px 0 #0003; }
.grid { gap: 8px; margin-top: 16px; }
.grid button { width: 44px; height: 44px; border-radius: 14px; font-size: 16px; font-weight: 800; background: #fff; color: #1864ab; border: 3px solid #a5d8ff; box-shadow: 0 3px 0 #a5d8ff; }
.grid button.ans { background: linear-gradient(180deg, #8ce99a, #51cf66); color: #fff; border-color: #fff; box-shadow: 0 3px 0 #2f9e44; }
.grid button.cur { outline: 0; border-color: #ff922b; box-shadow: 0 3px 0 #ff922b; transform: scale(1.12); }
.submitbig { background: linear-gradient(135deg, #69db7c, #12b886); box-shadow: 0 6px 0 #087f5b, inset 0 3px 0 #ffffff55; border: 4px solid #fff; outline: 2px dashed #ffffffb3; outline-offset: -8px; border-radius: 26px; font-size: 22px; padding: 14px 44px; text-shadow: 0 2px 0 #00000026; }

/* ───── Tiền tiểu học: chữ cái + thế giới quanh em ───── */
.xcard.x3 { --a: #b197fc; --b: #7950f2; --s: #5f3dc4; }
.cchead { background: linear-gradient(135deg, #e5dbff, #d0ebff); box-shadow: 0 6px 0 #b197fc; } .cchead h2 { color: #5f3dc4; } .cchead p { color: #364fc7; }
.tghead { background: linear-gradient(135deg, #d3f9d8, #fff3bf); box-shadow: 0 6px 0 #8ce99a; } .tghead h2 { color: #2b8a3e; } .tghead p { color: #5c4a03; }
.dcard .ltrs { font-size: 34px; letter-spacing: 2px; margin: 14px 0 2px; }
.dcard .st3 { background: var(--p); border-radius: 99px; font-size: 16px; letter-spacing: 2px; padding: 1px 0; margin: 4px 0 10px; display: block; font-style: normal; } .st3 s { text-decoration: none; filter: grayscale(1); opacity: .28; }
.dcard.mixc { --c: #f783ac; --p: #ffffffb3; --d: #5f3dc4; background: linear-gradient(120deg, #ffe066, #ffa8a8 35%, #b197fc 68%, #74c0fc); border-color: #fff; outline: 0; }
.dcard.mixc .rb { display: inline-block; background: #f03e6e; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 12px; border-radius: 99px; }
.decards.wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.go.g3 { background: linear-gradient(180deg, #8ce99a, #12b886); box-shadow: 0 4px 0 #087f5b; }
.dcard .blob .pal { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .dcard .blob .pal i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 4px #0003; }
.cimg { width: min(130px, 30vw); height: min(130px, 30vw); object-fit: contain; display: block; margin: 0 auto; }
.bimg { width: min(220px, 52vw); height: min(220px, 52vw); object-fit: contain; filter: drop-shadow(0 6px 6px #0002); }
.sw { display: block; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 0 0 3px #ced4da, 0 6px 10px #0002; margin: 0 auto; }
.cimg.sw { width: min(104px, 24vw); height: min(104px, 24vw); } .himg.sw { width: 200px; height: 200px; }
.choices.big .ch:has(.cimg) { padding: 10px 6px 10px 6px; } .ch:has(.cimg) > b { top: 22px; transform: none; }
.choices.ltr .ch { font-size: clamp(40px, 9vw, 60px); letter-spacing: 6px; color: #5f3dc4; }
.choices.n2 .ch, .choices.n3 .ch { font-size: clamp(18px, 3.6vw, 26px); }
.wtiles { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.wt { min-width: 70px; height: 86px; padding: 0 14px; border-radius: 22px; background: #fff; border: 4px solid #b197fc; box-shadow: 0 6px 0 #b197fc; font-size: 50px; font-weight: 800; color: #1f3350; }
.wt:active { transform: translateY(3px); } .wt.ok { background: #d3f9d8; border-color: #40c057; box-shadow: 0 6px 0 #40c057; animation: pop .4s; } .wt.bad { background: #ffe3e3; border-color: #ffa8a8; box-shadow: none; opacity: .45; animation: shake .35s; }
.wtiles .gap { width: 22px; }
.ml, .mr { text-transform: none; }
/* thẻ học */
.flc { text-align: center; padding: 22px 14px 18px; }
.fl { display: grid; justify-items: center; gap: 6px; }
.fl .himg { width: min(300px, 62vw); height: min(300px, 62vw); object-fit: contain; filter: drop-shadow(0 8px 8px #0002); }
.fl .nm { font-size: clamp(34px, 7vw, 52px); color: #1864ab; line-height: 1.1; }
.fl .eng { font-size: clamp(22px, 4.4vw, 30px); font-weight: 800; color: #e8590c; background: #fff4e6; border: 3px dashed #ffc078; border-radius: 99px; padding: 2px 20px; }
.fl p { margin: 4px 0 0; font-size: clamp(18px, 3.6vw, 24px); font-weight: 700; color: #4b6584; }
.fl .big2 { font-size: clamp(90px, 22vw, 150px); line-height: 1; color: #7950f2; -webkit-text-stroke: 8px #fff; paint-order: stroke fill; filter: drop-shadow(0 6px 0 #d0bfff); letter-spacing: 10px; }
.fl .snd { font-size: 22px; font-weight: 800; color: #868e96; }
.exs { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.exs .eimg { width: min(150px, 34vw); height: min(150px, 34vw); object-fit: contain; display: block; }
.exs i { display: block; font-style: normal; font-size: 34px; font-weight: 800; color: #1f3350; } .exs u { text-decoration: none; color: #f03e6e; }
.spk.big3 { margin-top: 14px; font-size: 19px; font-weight: 800; padding: 8px 22px; color: #7c4a03; }
.nav .playb { background: linear-gradient(135deg, #69db7c, #12b886); box-shadow: 0 6px 0 #087f5b, inset 0 3px 0 #ffffff55; color: #fff; }
.nav button[data-act="cardPrev"] { background: linear-gradient(135deg, #b197fc, #7950f2); box-shadow: 0 6px 0 #5f3dc4, inset 0 3px 0 #ffffff55; }
.nav button[data-act="cardNext"] { background: linear-gradient(135deg, #ffa94d, #ff6b6b); box-shadow: 0 6px 0 #e03131, inset 0 3px 0 #ffffff55; }
@media (max-width: 700px) { .dcard .ltrs { font-size: 26px; } .decards.wide { grid-template-columns: 1fr; } .wt { min-width: 54px; height: 70px; font-size: 38px; } }

/* ───── Luyện đọc ───── */
.xcard.x4 { --a: #8ce99a; --b: #12b886; --s: #087f5b; }
.ldhead { background: linear-gradient(135deg, #d3f9d8, #c5f6fa); box-shadow: 0 6px 0 #63e6be; } .ldhead h2 { color: #087f5b; } .ldhead p { color: #0b7285; }
.fl .ttl { font-size: clamp(26px, 5vw, 36px); color: #087f5b; }
.sgridw { display: grid; gap: 12px; margin-top: 8px; }
.srow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.srow u { min-width: 74px; text-decoration: none; font-size: 24px; font-weight: 800; color: #e03131; background: #fff5f5; border: 3px dashed #ffa8a8; border-radius: 16px; padding: 6px 10px; }
.syl { min-width: 70px; padding: 8px 12px; border-radius: 18px; background: #fff; border: 4px solid #74c0fc; box-shadow: 0 5px 0 #74c0fc; font-size: clamp(28px, 6vw, 40px); font-weight: 800; color: #1864ab; }
.syl:active { transform: translateY(3px); } .syl.on { background: #fff3bf; border-color: #fab005; box-shadow: 0 5px 0 #fab005; color: #e8590c; }
.rline { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.rline .syl { font-size: clamp(44px, 10vw, 72px); min-width: 90px; padding: 10px 18px; border-radius: 24px; }
.recb { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.rbtn { padding: 12px 18px; border-radius: 99px; border: 4px solid #fff; color: #fff; font-weight: 800; font-size: 18px; background: linear-gradient(180deg, #ff8787, #f03e6e); box-shadow: 0 5px 0 #c2255c; }
.rbtn.on { animation: blink .7s infinite alternate; background: linear-gradient(180deg, #495057, #212529); box-shadow: 0 5px 0 #000; }
.rbtn.play { background: linear-gradient(180deg, #b197fc, #7950f2); box-shadow: 0 5px 0 #5f3dc4; } .rbtn:disabled { opacity: .4; box-shadow: none; }
@media (max-width: 700px) { .srow u { min-width: 56px; font-size: 18px; } .syl { min-width: 52px; padding: 6px 8px; } }

/* ───── Đánh vần ───── */
.smode { display: inline-flex; gap: 4px; margin-top: 14px; padding: 5px; background: #fff; border: 3px solid #a5d8ff; border-radius: 99px; }
.smode button { background: none; font-size: 17px; font-weight: 800; color: #4b6584; padding: 8px 16px; border-radius: 99px; }
.smode button.on { background: linear-gradient(180deg, #ffa94d, #ff6b6b); color: #fff; box-shadow: 0 3px 0 #e03131; }
.spelled { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.spelled i { font-style: normal; font-size: clamp(22px, 4.6vw, 32px); font-weight: 800; color: #1864ab; background: #e7f5ff; border: 3px dashed #74c0fc; border-radius: 16px; padding: 2px 14px; }
.spelled i.fin { background: #fff3bf; border-color: #fab005; color: #e8590c; } .spelled u { text-decoration: none; color: #adb5bd; font-weight: 800; }

/* ───── Thanh menu bên trái của khu Tiền tiểu học ───── */
.psh { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.pside { position: sticky; top: 12px; display: grid; gap: 12px; padding: 14px 12px 16px; background: #fffdf7; border: 4px solid #fff; border-radius: 32px; box-shadow: 0 7px 0 #ffc078, 0 10px 24px #1864ab22; outline: 3px dashed #ffc078; outline-offset: -10px; }
.phub { background: linear-gradient(180deg, #ffa94d, #e8590c); color: #fff; font-weight: 800; font-size: 18px; padding: 9px 10px; border-radius: 99px; border: 3px solid #fff; box-shadow: 0 4px 0 #0000001f; }
.pnav { --c: #ffa8a8; --p: #fff5f5; --d: #e03131; display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 4px solid var(--c); border-radius: 24px; padding: 8px 10px; box-shadow: 0 5px 0 var(--c); color: #1f3350; }
.pnav:nth-of-type(3) { --c: #b197fc; --p: #f3f0ff; --d: #5f3dc4; } .pnav:nth-of-type(4) { --c: #63e6be; --p: #e6fcf5; --d: #087f5b; } .pnav:nth-of-type(5) { --c: #74c0fc; --p: #e7f5ff; --d: #1971c2; }
.pnav span { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--p); } .pnav img { width: 44px; height: 44px; object-fit: contain; }
.pnav b { font-size: 16.5px; line-height: 1.15; } .pnav small { display: block; font-size: 12.5px; font-weight: 700; color: #868e96; }
.pnav.on { background: var(--p); outline: 2px dashed var(--c); outline-offset: -8px; transform: translateX(4px); } .pnav.on b { color: var(--d); }
.pnav:active { transform: translateY(3px); }
.pmain > .tthhead:first-child { margin-top: 0; }
@media (max-width: 900px) { .psh { grid-template-columns: 1fr; gap: 10px; } .pside { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 10px; border-radius: 24px; outline: 0; } .phub { display: none; } .pnav { flex: none; padding: 6px 12px 6px 6px; border-width: 3px; box-shadow: 0 3px 0 var(--c); } .pnav span { width: 40px; height: 40px; } .pnav img { width: 32px; height: 32px; } .pnav small { display: none; } .pnav b { font-size: 14px; white-space: nowrap; } .pnav.on { transform: none; } }

/* Trang Tiền tiểu học: 4 thẻ chia 2 cột */
.xcards.two { grid-template-columns: 1fr 1fr; gap: 18px; }
.xcards.two .xcard { flex-direction: column; text-align: center; padding: 20px 16px; gap: 10px; } .xcards.two .xcard .blob { width: 130px; height: 130px; margin: 0 auto; } .xcards.two .xcard .blob img { width: 112px; height: 112px; }
.xcards.two .chips { justify-content: center; } .xcards.two .xcard > span:nth-child(2) { flex: none; }
@media (max-width: 700px) { .xcards.two { grid-template-columns: 1fr; } }

/* ───── Màn học bài Luyện đọc: khung trang trí + menu các bài ───── */
.rdsh { grid-template-columns: 210px minmax(0, 1fr); margin-top: 6px; }
.rdsh .qwrap { max-width: none; }
.rdside { --k: #63e6be; box-shadow: 0 7px 0 #63e6be, 0 10px 24px #1864ab22; outline-color: #63e6be; gap: 9px; max-height: calc(100vh - 30px); overflow-y: auto; }
.rdside .phub { background: linear-gradient(180deg, #38d9a9, #087f5b); }
.rdl { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 2px 8px; text-align: left; background: #fff; border: 3px solid #c3fae8; border-radius: 20px; padding: 7px 10px; box-shadow: 0 4px 0 #c3fae8; color: #1f3350; }
.rdl u { grid-row: span 2; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; background: #e6fcf5; color: #087f5b; font-weight: 800; text-decoration: none; }
.rdl b { font-size: 19px; letter-spacing: 1px; } .rdl .st3 { font-size: 12px; font-style: normal; letter-spacing: 1px; background: none; margin: 0; padding: 0; text-align: left; }
.rdl.on { background: linear-gradient(135deg, #c3fae8, #96f2d7); border-color: #20c997; box-shadow: 0 4px 0 #20c997; transform: translateX(4px); } .rdl.on u { background: #087f5b; color: #fff; }
.rdb { position: relative; margin-top: 30px; padding: 46px 18px 22px; background: #fffdf7 radial-gradient(#d3f9d8 2px, transparent 2.5px) 0 0 / 28px 28px; box-shadow: 0 8px 0 #63e6be, 0 12px 26px #1864ab22; outline: 4px dashed #63e6be; outline-offset: -13px; border-radius: 38px; }
.rdb::before, .rdb::after { content: "🌟"; top: -18px; font-size: 30px; }
.rdb > .rib { --c: #38d9a9; --d: #087f5b; top: -22px; }
.rdb .deco { position: absolute; width: 92px; pointer-events: none; filter: drop-shadow(0 4px 4px #0002); }
.rdb .d1 { left: 16px; bottom: 14px; animation: bob 3s ease-in-out infinite; } .rdb .d2 { right: 18px; bottom: 16px; width: 80px; transform: rotate(8deg); }
.rdb .fl { position: relative; z-index: 1; background: #ffffffe6; border: 4px solid #fff; border-radius: 30px; padding: 18px 14px; box-shadow: 0 0 0 3px #c3fae8, 0 6px 14px #087f5b1a; }
.rdb .snd { background: #e6fcf5; color: #087f5b; border-radius: 99px; padding: 4px 18px; font-size: 18px; }
.rdb .rline .syl { border-color: #ffa94d; box-shadow: 0 7px 0 #ffa94d; color: #d9480f; background: linear-gradient(#fff, #fff4e6); }
.rdb .rline .syl:nth-child(2n) { border-color: #74c0fc; box-shadow: 0 7px 0 #74c0fc; color: #1864ab; background: linear-gradient(#fff, #e7f5ff); }
.rdb .rline .syl:nth-child(3n) { border-color: #b197fc; box-shadow: 0 7px 0 #b197fc; color: #5f3dc4; background: linear-gradient(#fff, #f3f0ff); }
.rdb .rline .syl.on { background: #fff3bf; border-color: #fab005; box-shadow: 0 7px 0 #fab005; color: #e8590c; }
.rdb .spk.big3 { position: relative; z-index: 1; }
@media (max-width: 900px) { .rdsh { grid-template-columns: 1fr; } .rdside { max-height: none; overflow-y: visible; } .rdl { flex: none; grid-template-columns: 28px auto; padding: 5px 10px 5px 6px; } .rdl u { width: 28px; height: 28px; line-height: 28px; grid-row: auto; } .rdl .st3 { display: none; } .rdl b { font-size: 15px; white-space: nowrap; } .rdl.on { transform: none; } .rdb .deco { width: 56px; opacity: .9; } .rdb .d2 { width: 50px; } .rdb { padding: 40px 10px 70px; } }
.rdsh .qwrap { margin: 0; width: 100%; min-width: 0; }
.rdb .fl { min-height: 300px; align-content: center; }

/* ───── Font chữ (04/10): bỏ Baloo 2 vì chữ "t" thường thiếu nét ngang bên trái ─────
   Giao diện: Nunito (tròn, chữ t đủ nét). Chữ để bé HỌC ĐỌC: Andika — font thiết kế cho trẻ tập đọc (a, g một tầng như chữ trong sách). */
body { font-family: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight: 700; }
.syl, .wt, .big2, .exs i, .choices.ltr .ch, .dcard .ltrs, .rdl b, .srow u, .spelled i, .tiles.letters span, .fl .nm { font-family: "Andika", "Nunito", sans-serif; font-weight: 700; }
.choices.ltr .ch { letter-spacing: 3px; }
.fl .big2 { letter-spacing: 6px; }
h1, h2, h3, .rib, .ht b, .xcard b, .mcard b, .nbtn b, .bigbtn, .next, .cat b { font-weight: 900; }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 12px 0 4px; width: 100%; }
.wgrid .rline { margin: 0; background: #ffffffb3; border: 3px dashed #c3fae8; border-radius: 22px; padding: 10px 6px; }
.rline.sm { gap: 8px; } .rline.sm .syl { font-size: clamp(26px, 5vw, 38px); min-width: 56px; padding: 6px 12px; border-radius: 18px; }
@media (max-width: 700px) { .wgrid { grid-template-columns: 1fr; } }
.src { margin: 18px auto 0; max-width: 820px; font-size: 14px; color: #4b6584; background: #ffffffb3; border: 2px dashed #a5d8ff; border-radius: 16px; padding: 8px 14px; text-align: center; line-height: 1.4; }
.pad20 button.sel { background: #d0ebff; border-color: #339af0; box-shadow: 0 5px 0 #339af0; }
.rowsq { display: inline-grid; background: #fff; border: 2px solid #333; font-size: 24px; text-align: left; } .rowsq div { border-bottom: 1px solid #333; padding: 2px 12px; min-width: 250px; min-height: 36px; letter-spacing: 3px; } .rowsq div:last-child { border-bottom: 0; }

/* ───── Thẻ Thế giới quanh em: bấm từng phần để nghe + menu chủ đề ───── */
.sayb { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; font-weight: 800; cursor: pointer; text-align: left; line-height: 1.3; }
.sayb i { font-style: normal; font-size: .7em; background: #fff3bf; border-radius: 50%; width: 1.9em; height: 1.9em; display: grid; place-items: center; flex: none; box-shadow: 0 2px 0 #ffd43b; }
.sayb.on { outline: 4px solid #ffd43b; }
.sayb.nm { font-size: clamp(32px, 6.5vw, 48px); color: #1864ab; padding: 2px 20px; border: 4px solid #a5d8ff; box-shadow: 0 5px 0 #a5d8ff; font-family: "Andika", "Nunito", sans-serif; }
.sayb.eng { font-size: clamp(22px, 4.4vw, 30px); color: #e8590c; background: #fff4e6; border: 3px dashed #ffc078; padding: 2px 18px; margin-top: 6px; }
.sents { display: grid; gap: 8px; margin-top: 10px; width: min(100%, 640px); }
.sayb.sv, .sayb.se { font-size: clamp(17px, 3.2vw, 22px); font-weight: 700; padding: 8px 16px; border-radius: 20px; border: 3px solid #d3f9d8; color: #1f3350; justify-content: space-between; }
.sayb.se { border-color: #ffe8cc; color: #7c4a03; background: #fffaf3; }
.tgside { box-shadow: 0 7px 0 #74c0fc, 0 10px 24px #1864ab22; outline-color: #74c0fc; } .tgside .phub { background: linear-gradient(180deg, #4dabf7, #1864ab); font-size: 15px; }
.rdl.tgl { border-color: #d0ebff; box-shadow: 0 4px 0 #d0ebff; } .rdl.tgl u { background: #e7f5ff; font-size: 19px; } .rdl.tgl b { font-size: 15px; letter-spacing: 0; line-height: 1.15; }
.rdl.tgl.on { background: linear-gradient(135deg, #d0ebff, #a5d8ff); border-color: #339af0; box-shadow: 0 4px 0 #339af0; } .rdl.tgl.on u { background: #1864ab; }
.rdb.tgb { box-shadow: 0 8px 0 #74c0fc, 0 12px 26px #1864ab22; outline-color: #74c0fc; background-image: radial-gradient(#d0ebff 2px, transparent 2.5px); } .rdb.tgb > .rib { --c: #4dabf7; --d: #1864ab; }
.rdb.tgb .fl { box-shadow: 0 0 0 3px #d0ebff, 0 6px 14px #1864ab1a; } .rdb.tgb .fl .himg { width: min(240px, 50vw); height: min(240px, 50vw); }
.sents .stl { justify-self: start; font-size: 14px; font-weight: 800; color: #868e96; margin: 4px 0 -2px 6px; }
.sayb.sv, .sayb.se { font-size: clamp(19px, 3.6vw, 25px); font-weight: 800; }
.sayb.si { font-size: clamp(16px, 3vw, 20px); font-weight: 700; padding: 8px 16px; border-radius: 20px; border: 3px dashed #d0ebff; color: #4b6584; background: #f8fbff; justify-content: space-between; }
.good .enw { display: flex; margin: 6px auto 0; font-size: clamp(22px, 4.4vw, 30px); color: #e8590c; background: #fff4e6; border: 3px dashed #ffc078; padding: 2px 18px; width: fit-content; text-shadow: none; }

/* ───── Trang chủ cho khách chưa đăng nhập ───── */
.gauth { display: flex; gap: 8px; margin-left: auto; flex: none; }
.gbtn { font-weight: 800; font-size: 16px; padding: 10px 16px; border-radius: 99px; border: 3px solid #fff; color: #fff; white-space: nowrap; }
.gbtn.in { background: linear-gradient(180deg, #74c0fc, #1c7ed6); box-shadow: 0 4px 0 #1864ab; } .gbtn.up { background: linear-gradient(180deg, #ff8787, #f03e6e); box-shadow: 0 4px 0 #c2255c; }
.gbtn:active { transform: translateY(3px); }
.ginvite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 0; padding: 12px 18px; background: linear-gradient(135deg, #fff9db, #ffe3ec); border: 4px solid #fff; border-radius: 28px; box-shadow: 0 6px 0 #ffc078; outline: 2px dashed #ffffffd9; outline-offset: -9px; }
.ginvite p { flex: 1; min-width: 220px; margin: 0; text-align: left; font-size: 17px; color: #7c4a03; line-height: 1.4; } .ginvite p b { font-size: 20px; color: #e8590c; }
.ginvite .gbtn { font-size: 18px; padding: 12px 22px; }
.tabbar.gtab { gap: 10px; padding: 8px; } .tabbar.gtab .gbtn { flex: 1; font-size: 16px; padding: 12px 6px; }
@media (max-width: 1100px) { .guest .topbar nav button { font-size: 14px; padding: 8px 7px; } }
@media (max-width: 700px) { .guest .gauth { display: flex; } .guest .gauth .gbtn { font-size: 13px; padding: 8px 10px; } .ginvite .gbtn { display: none; } }
.album .stk2 img { max-height: 190px; }
.ginvite:has(> .gbtn:first-child) { justify-content: center; margin-top: 18px; }
@media (max-width: 700px) { .lop .gauth .gbtn { font-size: 12px; padding: 7px 9px; } .ginvite .gbtn { display: inline-block; } }