/* Trò chơi tiểu học Dora (29/10/2026) — dùng chung cho app bé, trang /dora/tro-choi, trò chơi cho lớp. Tiền tố dg-. */
.dg { --dg-c: #F08A00; --dg-ink: #1f2440; --dg-soft: #fff; position: relative; max-width: 640px; margin: 0 auto; font-family: inherit; color: var(--dg-ink); }
.dg * { box-sizing: border-box; }
.dg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dg-name { flex: 1; font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dg-name small { font-weight: 600; font-size: 12px; background: color-mix(in srgb, var(--dg-c) 15%, #fff); color: var(--dg-c); padding: 2px 8px; border-radius: 99px; margin-left: 4px; }
.dg-x, .dg-mute { border: 0; background: #f1f2f6; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer; flex: none; }
.dg-bar { height: 8px; background: #eceef4; border-radius: 99px; overflow: hidden; }
.dg-bar i { display: block; height: 100%; background: var(--dg-c); border-radius: 99px; transition: width .3s; }
.dg-meta { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: #6b7088; margin: 6px 2px 10px; }
.dg-clock.low { color: #e03131; animation: dg-pulse .6s infinite alternate; }
@keyframes dg-pulse { to { transform: scale(1.15); } }
.dg-body { background: var(--dg-soft); border-radius: 20px; padding: 18px 14px; box-shadow: 0 4px 18px rgba(30, 40, 90, .08); min-height: 320px; position: relative; overflow: hidden; }
.dg-q { text-align: center; position: relative; margin-bottom: 14px; }
.dg-q.redo { padding-top: 22px; }
.dg-redo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #9c36b5; background: #f8f0fc; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.dg-big-q { font-size: 40px; font-weight: 800; line-height: 1.2; margin: 6px 0; letter-spacing: .5px; }
.dg-sub { font-size: 15px; color: #4c5272; margin: 6px 0; line-height: 1.45; }
.dg-sent, .dg-story { font-size: 20px; font-weight: 600; line-height: 1.5; margin: 8px 0; }
.dg-story { font-size: 17px; text-align: left; background: #f8f9fc; padding: 12px; border-radius: 12px; }
.dg-blank { display: inline-block; min-width: 2.2em; border-bottom: 3px solid var(--dg-c); color: var(--dg-c); text-align: center; font-weight: 800; }
.dg-say { position: absolute; right: 0; top: 0; border: 0; background: #eef6ff; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.dg-ear { font-size: 56px; }
.dg-tag { display: inline-block; font-size: 12px; font-weight: 700; background: #f3f0ff; color: #6741d9; padding: 2px 10px; border-radius: 99px; }
.dg-opts { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; }
.dg-opt { border: 2px solid #e3e6ef; background: #fff; border-radius: 16px; padding: 14px 10px; font-size: 19px; font-weight: 700; color: var(--dg-ink); cursor: pointer; min-height: 58px; transition: transform .08s, border-color .15s; font-family: inherit; line-height: 1.3; }
.dg-opt:hover { border-color: var(--dg-c); }
.dg-opt:active { transform: scale(.97); }
.dg-opt small { display: block; font-size: 11px; font-weight: 600; color: #6b7088; margin-top: 2px; }
.dg-opt.right { border-color: #2f9e44; background: #ebfbee; }
.dg-opt.wrong { border-color: #e03131; background: #fff5f5; animation: dg-shake .3s; }
.dg-opt:disabled { cursor: default; }
@keyframes dg-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.dg-opts.emo .dg-opt { font-size: 44px; padding: 10px; }
.dg-emo { font-size: 44px; }
.dg-opts.bins .dg-opt { min-height: 88px; background: #f8f9fc; }
.dg-opts.doors .dg-opt { min-height: 110px; background: linear-gradient(#fff, #fff4e6); border-color: #f3d9b1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dg-opts.doors .door { font-size: 34px; }
.dg-sym { font-size: 30px; }
.dg-fb { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; max-width: calc(100% - 28px); text-align: center; animation: dg-up .25s; z-index: 5; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.dg-fb.ok { background: #2f9e44; color: #fff; }
.dg-fb.bad { background: #fff9db; color: #5c3d00; border: 2px solid #fcc419; }
@keyframes dg-up { from { transform: translate(-50%, 12px); opacity: 0; } }
.dg-qt { height: 6px; background: #eceef4; border-radius: 99px; margin: -4px 0 12px; overflow: hidden; }
.dg-qt i { display: block; height: 100%; width: 100%; background: #fab005; }
/* numpad */
.dg-ans { text-align: center; font-size: 40px; font-weight: 800; min-height: 60px; margin-bottom: 10px; }
.dg-ans .dg-v { display: inline-block; min-width: 120px; border-bottom: 4px solid var(--dg-c); padding: 0 8px; }
.dg-ans small { font-size: 18px; margin-left: 6px; color: #6b7088; }
.dg-ans.right .dg-v { color: #2f9e44; border-color: #2f9e44; }
.dg-ans.wrong .dg-v { color: #e03131; border-color: #e03131; }
.dg-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.dg-pad button { border: 0; background: #f1f3f9; border-radius: 14px; font-size: 24px; font-weight: 800; padding: 12px 0; cursor: pointer; color: var(--dg-ink); font-family: inherit; }
.dg-pad button:active { background: #dde2ee; }
.dg-pad button.go { background: var(--dg-c); color: #fff; }
.dg-pad.sdk { grid-template-columns: repeat(7, 1fr); max-width: 420px; margin-top: 10px; }
/* xep thu tu */
.dg-slot { min-height: 58px; border: 2px dashed #cfd4e2; border-radius: 14px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-bottom: 12px; }
.dg-slot.right { border-color: #2f9e44; background: #ebfbee; }
.dg-slot.wrong { border-color: #e03131; background: #fff5f5; }
.dg-ph { color: #9aa0b8; font-size: 14px; }
.dg-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 50px; }
.dg-tile { border: 2px solid #d9dceb; background: #fff; border-radius: 12px; padding: 9px 13px; font-size: 18px; font-weight: 700; cursor: pointer; color: var(--dg-ink); font-family: inherit; }
.dg-tile.on { background: color-mix(in srgb, var(--dg-c) 12%, #fff); border-color: var(--dg-c); }
.dg-tile.used { visibility: hidden; }
.dg-slot.tight .dg-tile, .dg-tiles .dg-tile { min-width: 44px; }
.dg-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; align-items: center; }
.dg-row.wrap { flex-wrap: wrap; }
.dg-btn { border: 0; background: var(--dg-c); color: #fff; font-weight: 800; font-size: 16px; padding: 12px 20px; border-radius: 14px; cursor: pointer; font-family: inherit; }
.dg-btn.ghost { background: #f1f3f9; color: var(--dg-ink); }
.dg-btn.sm { padding: 6px 12px; font-size: 14px; }
.dg-btn:disabled { opacity: .45; cursor: default; }
.dg-btn.mic.on { background: #e03131; animation: dg-pulse .7s infinite alternate; }
/* bong bay */
.dg-sky { position: relative; height: 300px; background: linear-gradient(#e7f5ff, #fff); border-radius: 14px; overflow: hidden; }
.dg-balloon { position: absolute; bottom: -90px; width: 72px; height: 86px; border-radius: 50% 50% 46% 46%; border: 0; color: #fff; font-size: 24px; font-weight: 800; cursor: pointer; animation: dg-rise linear forwards; box-shadow: inset -8px -10px 0 rgba(0,0,0,.08); font-family: inherit; }
.dg-balloon::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 1px; height: 26px; background: #999; }
.dg-balloon span { text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.dg-balloon.pop { animation: none; transform: scale(1.4); opacity: 0; transition: all .25s; }
.dg-balloon.bad { filter: grayscale(1); }
.dg-balloon.hint { outline: 4px solid #2f9e44; }
@keyframes dg-rise { from { bottom: -30px; } to { bottom: 330px; } }
/* lat cap */
.dg-pairs { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; }
.dg-pc { position: relative; height: 76px; border: 0; background: transparent; perspective: 600px; cursor: pointer; padding: 0; font-family: inherit; }
.dg-pc span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; backface-visibility: hidden; transition: transform .35s; font-weight: 800; }
.dg-pc .b { background: var(--dg-c); color: #fff; font-size: 26px; }
.dg-pc .f { background: #fff; border: 2px solid #e3e6ef; transform: rotateY(180deg); font-size: 18px; }
.dg-pc.on .b, .dg-pc.done .b { transform: rotateY(180deg); }
.dg-pc.on .f, .dg-pc.done .f { transform: rotateY(360deg); }
.dg-pc.done .f { border-color: #2f9e44; background: #ebfbee; }
/* tien */
.dg-notes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dg-notes button { border: 0; background: none; padding: 0; cursor: pointer; }
.dg-note { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; height: 44px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); font-weight: 800; font-size: 15px; color: #233; line-height: 1; }
.dg-note small { font-size: 9px; font-weight: 600; margin-top: 2px; }
.dg-wallet { min-height: 52px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; border: 2px dashed #cfd4e2; border-radius: 12px; padding: 4px; }
.dg-wallet .dg-note { min-width: 64px; height: 36px; font-size: 12px; }
.dg-sum { text-align: center; margin: 8px 0; font-size: 15px; }
/* dong ho */
.dg-clkbox { display: flex; justify-content: center; }
.dg-clk { width: 190px; height: 190px; }
/* hinh */
.dg-shapes { width: 100%; max-width: 360px; height: auto; background: #fbfcff; border-radius: 12px; border: 1px solid #eceef4; }
.dg-pie { width: 170px; height: 170px; }
.dg-pie2 { display: flex; justify-content: center; gap: 16px; }
.dg-pie2 .dg-pie { width: 130px; height: 130px; }
.dg-fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; font-weight: 800; }
.dg-fr i { font-style: normal; padding: 0 4px; }
.dg-fr i:first-child { border-bottom: 2px solid currentColor; }
/* ghep van */
.dg-van { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 30px; font-weight: 800; margin: 6px 0 4px; }
.dg-van span { min-width: 64px; padding: 6px 10px; border: 2px dashed #cfd4e2; border-radius: 12px; color: #9aa0b8; }
.dg-van span.on { border-style: solid; border-color: var(--dg-c); color: var(--dg-ink); }
.dg-van span.res { border-color: #2f9e44; color: #2f9e44; }
.dg-van b { color: #9aa0b8; }
/* doc nhanh */
.dg-read { font-size: 19px; line-height: 1.7; background: #fffdf5; border: 1px solid #f3e3c4; border-radius: 14px; padding: 14px; text-align: left; }
.dg-peek { text-align: left; font-size: 14px; color: #4c5272; margin-bottom: 8px; }
.dg-peek summary { cursor: pointer; font-weight: 700; color: var(--dg-c); }
/* cuu cu */
.dg-owl { position: relative; height: 150px; display: flex; flex-direction: column; align-items: center; }
.dg-owl .rope { width: 3px; background: #8d6e63; transition: height .3s; }
.dg-owl .bird { font-size: 48px; margin-top: -4px; transition: transform .6s; }
.dg-owl .bird.fall { transform: translateY(40px) rotate(160deg); }
.dg-owl .ground { position: absolute; bottom: 0; font-size: 20px; }
.dg-word { display: flex; justify-content: center; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.dg-word span { width: 34px; height: 44px; border-bottom: 4px solid var(--dg-c); font-size: 28px; font-weight: 800; text-align: center; text-transform: lowercase; }
.dg-kb { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; max-width: 460px; margin: 0 auto; }
.dg-kb button { border: 0; background: #f1f3f9; border-radius: 9px; padding: 9px 0; font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--dg-ink); }
.dg-kb button.ok { background: #d3f9d8; } .dg-kb button.no { background: #ffe3e3; color: #c92a2a; }
.dg-word-big { font-size: 36px; font-weight: 800; color: var(--dg-c); }
.dg-heard { text-align: center; margin-top: 10px; font-size: 15px; min-height: 22px; }
/* bingo */
.dg-bingo { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; margin-top: 12px; }
.dg-bingo button { aspect-ratio: 1; border: 2px solid #e3e6ef; background: #fff; border-radius: 14px; cursor: pointer; font-family: inherit; }
.dg-bingo .num { font-size: 28px; font-weight: 800; color: var(--dg-ink); }
.dg-bingo .emo { font-size: 36px; }
.dg-bingo button.hit { background: #ebfbee; border-color: #2f9e44; }
.dg-bingo button.hit.shown { background: #fff9db; border-color: #fab005; }
.dg-bingo button.miss { background: #fff5f5; border-color: #e03131; }
.dg-bcount { font-weight: 800; color: #6b7088; }
/* sudoku */
.dg-sdk { display: grid; grid-template-columns: repeat(var(--n), 1fr); max-width: 360px; margin: 10px auto 0; border: 3px solid var(--dg-ink); border-radius: 8px; overflow: hidden; }
.dg-sdk button { aspect-ratio: 1; border: 1px solid #cfd4e2; background: #fff; font-size: 22px; font-weight: 800; color: #1971c2; cursor: pointer; font-family: inherit; padding: 0; }
.dg-sdk button.g { color: var(--dg-ink); background: #f4f5f9; cursor: default; }
.dg-sdk button.sel { background: #fff3bf; }
.dg-sdk button.br { border-right: 3px solid var(--dg-ink); }
.dg-sdk button.bb { border-bottom: 3px solid var(--dg-ink); }
.dg-sdk button.ok { background: #ebfbee; } .dg-sdk button.no { background: #ffe3e3; color: #c92a2a; }
/* simon */
.dg-simon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 280px; margin: 14px auto 0; }
.dg-simon button { aspect-ratio: 1; border: 0; border-radius: 20px; opacity: .45; cursor: pointer; transition: opacity .1s, transform .1s; }
.dg-simon button.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 24px rgba(0,0,0,.25); }
/* ket thuc */
.dg-end { text-align: center; padding: 18px 8px; }
.dg-face { font-size: 72px; }
.dg-end h2 { margin: 4px 0 14px; font-size: 26px; }
.dg-res { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dg-res div { background: #fff; border-radius: 16px; padding: 12px 16px; min-width: 96px; box-shadow: 0 2px 10px rgba(30,40,90,.07); }
.dg-res b { display: block; font-size: 22px; }
.dg-res small { color: #6b7088; font-size: 12px; }
.dg-hint, .dg-note { font-size: 14px; color: #4c5272; margin: 12px 0 0; }
.dg-note { background: #fff9db; border-radius: 12px; padding: 10px; }
.dg-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.dg-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dg-confetti i { position: absolute; top: -30px; font-size: 26px; font-style: normal; animation: dg-fall 2.2s ease-in forwards; }
@keyframes dg-fall { to { transform: translateY(520px) rotate(300deg); opacity: .2; } }
/* luoi chon tro */
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.dg-card { --dg-c: #F08A00; position: relative; display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 18px; padding: 14px; text-decoration: none; color: var(--dg-ink); border: 2px solid transparent; box-shadow: 0 2px 12px rgba(30,40,90,.07); transition: transform .1s, border-color .15s; }
.dg-card:hover { border-color: var(--dg-c); transform: translateY(-2px); }
.dg-card .ic { font-size: 34px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: color-mix(in srgb, var(--dg-c) 14%, #fff); }
.dg-card b { font-size: 16px; line-height: 1.25; }
.dg-card small { font-size: 13px; color: #555c78; line-height: 1.35; }
.dg-card em { font-style: normal; font-size: 12px; color: var(--dg-c); font-weight: 700; margin-top: auto; }
.dg-badge { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; background: #fff3bf; color: #8a5a00; padding: 2px 8px; border-radius: 99px; }
/* chieu len lop */
.dg-big { max-width: 1100px; }
.dg-big .dg-big-q { font-size: 72px; }
.dg-big .dg-sent { font-size: 34px; }
.dg-big .dg-sub { font-size: 22px; }
.dg-big .dg-opt { font-size: 32px; min-height: 96px; }
.dg-big .dg-body { min-height: 60vh; }
@media (max-width: 420px) {
  .dg-big-q { font-size: 34px; }
  .dg-opt { font-size: 17px; padding: 12px 8px; }
  .dg-sky { height: 260px; }
  .dg-balloon { width: 62px; height: 76px; font-size: 20px; }
  .dg-kb { grid-template-columns: repeat(7, 1fr); }
  .dg-word span { width: 28px; font-size: 24px; }
}