/* ============ Vui Học — Giao diện học sinh & trò chơi ============ */
:root {
  --primary: #ff7a59; --secondary: #4f8cff;
  --ink: #2b2d42; --soft: #6b7194;
  --ok: #2fb36d; --ok-bg: #d3f9d8; --bad: #e5484d; --bad-bg: #ffe3e3; --part: #f59f00; --part-bg: #fff3bf;
  --c-red: #ff6b6b; --c-blue: #4dabf7; --c-yellow: #fcc419; --c-green: #51cf66; --c-purple: #b197fc; --c-orange: #ff922b; --c-pink: #f783ac; --c-teal: #38d9a9;
  --bg1: #36d1dc; --bg2: #5b86e5;
  --radius: 22px;
  --font: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; font: 18px/1.45 var(--font); color: var(--ink); background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed; display: flex; flex-direction: column; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }
.soft { color: var(--soft); }
.center { text-align: center; }

/* ----- Chủ đề ----- */
body.theme-ocean  { --bg1: #36d1dc; --bg2: #5b86e5; }
body.theme-space  { --bg1: #1a0b3b; --bg2: #4b5bbf; }
body.theme-forest { --bg1: #56ab2f; --bg2: #a8e063; }
body.theme-candy  { --bg1: #ff9a9e; --bg2: #a18cd1; }
body.theme-sunset { --bg1: #ff7e5f; --bg2: #feb47b; }
body.theme-snow   { --bg1: #83a4d4; --bg2: #b6fbff; }
body.page-home, body.page-login, body.page-msg { --bg1: color-mix(in srgb, var(--secondary) 75%, #fff); --bg2: color-mix(in srgb, var(--primary) 70%, #fff); }

.bg-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-deco::before, .bg-deco::after { position: absolute; font-size: 64px; opacity: .22; white-space: pre; line-height: 2.2; letter-spacing: 1.6em; animation: drift 26s linear infinite; }
.bg-deco::before { content: "☁️   ⭐     🎈\A   🌈      ✏️   \A ⭐    📚     ☁️"; top: 6%; left: -5%; }
.bg-deco::after { content: "🎨      ⭐\A    🎈   ☁️  \A🌟      🧩"; bottom: 4%; right: -6%; animation-duration: 32s; animation-direction: reverse; }
.theme-ocean .bg-deco::before { content: "🫧    🐠     🫧\A   🐬      🫧   \A 🫧    🐙     🐟"; }
.theme-ocean .bg-deco::after { content: "🐳      🫧\A    🦀   🫧  \A🐚      🐡"; }
.theme-space .bg-deco::before { content: "✨    🪐     ⭐\A   🌙      ✨   \A ⭐    ☄️     ✨"; opacity: .45; }
.theme-space .bg-deco::after { content: "🛰️      ✨\A    ⭐   🌍  \A✨      👽"; opacity: .45; }
.theme-forest .bg-deco::before { content: "🍃    🌳     🦋\A   🌼      🍃   \A 🐞    🌲     🍄"; }
.theme-forest .bg-deco::after { content: "🐿️      🍃\A    🌻   🐝  \A🌿      🦔"; }
.theme-candy .bg-deco::before { content: "🍭    🍬     🧁\A   🍩      🍬   \A 🍓    🍰     🍭"; }
.theme-candy .bg-deco::after { content: "🍪      🍬\A    🎂   🍦  \A🍫      🍡"; }
.theme-sunset .bg-deco::before { content: "☀️    🌴     🕊️\A   ⛵      🌤️   \A 🌅    🦩     🌴"; }
.theme-sunset .bg-deco::after { content: "🌞      🐚\A    🏝️   🦜  \A🌺      ⛱️"; }
.theme-snow .bg-deco::before { content: "❄️    ⛄     ❄️\A   🎄      ❄️   \A ❄️    🧣     🎁"; }
.theme-snow .bg-deco::after { content: "🐧      ❄️\A    ☃️   🌨️  \A❄️      🦌"; }
@keyframes drift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(40px, -30px) rotate(3deg); } 100% { transform: translate(0, 0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .bg-deco::before, .bg-deco::after { animation: none; } }

/* ----- Đầu trang ----- */
.fhead { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.fbrand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.2); }
.fbrand img { height: 44px; background: #fff; border-radius: 12px; padding: 3px; }
.fbrand-emoji { font-size: 2.2rem; }
.fbrand b { display: block; font-size: 1.25rem; line-height: 1.1; }
.fbrand small { display: block; font-size: .8rem; opacity: .9; }
.fhead-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kid-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); padding: 4px 14px 4px 6px; border-radius: 99px; font-weight: 800; text-decoration: none; font-size: .95rem; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-chip span { font-size: 1.5rem; }
body.in-game .fhead, body.in-game .ffoot { display: none; }
.ffoot { position: relative; z-index: 1; text-align: center; color: rgba(255,255,255,.9); font-size: .8rem; padding: 18px 12px; margin-top: auto; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.fmain { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 8px 14px 20px; flex: 1; }
.center-box { display: grid; place-items: center; }

/* ----- Nút kiểu trẻ em ----- */
.kbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 16px; border: 0; background: #fff; color: var(--ink); font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.15); transition: transform .08s, box-shadow .08s, filter .15s; user-select: none; }
.kbtn:hover { filter: brightness(1.05); }
.kbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.kbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.kbtn.primary { background: var(--primary); color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--primary) 65%, #000); }
.kbtn.success { background: var(--ok); color: #fff; box-shadow: 0 5px 0 #1e7a48; }
.kbtn.ghost { background: rgba(255,255,255,.25); color: inherit; box-shadow: none; }
.kbtn.small { padding: 6px 12px; font-size: .9rem; border-radius: 12px; }
.kbtn.big { padding: 14px 26px; font-size: 1.2rem; border-radius: 18px; }
.kbtn.huge { padding: 18px 40px; font-size: 1.5rem; border-radius: 22px; width: 100%; max-width: 420px; }
.kbtn.pulse:not(:disabled) { animation: pulse 1.6s ease-in-out infinite; }
.btn-col { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.btn-col .kbtn { width: 100%; max-width: 380px; }
.kalert { background: #fff3bf; color: #7a5a00; border-radius: 14px; padding: 10px 16px; font-weight: 700; margin: 10px auto; max-width: 480px; text-align: center; }
.kalert.info { background: #e7f5ff; color: #1864ab; }

/* ----- Trang chủ ----- */
.hero { text-align: center; color: #fff; padding: 20px 0 10px; }
.hero-title { font-size: clamp(1.8rem, 6vw, 3rem); margin: 0; line-height: 1.15; text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.hero-hi { font-size: 1.1rem; margin: 8px auto 18px; max-width: 640px; }
.code-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; background: rgba(255,255,255,.95); padding: 10px; border-radius: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.code-form input { flex: 1; min-width: 180px; font: inherit; font-size: 1.5rem; font-weight: 800; text-align: center; letter-spacing: .15em; text-transform: uppercase; border: 3px solid #eee; border-radius: 18px; padding: 10px; color: var(--ink); }
.code-form input:focus { outline: none; border-color: var(--secondary); }
.code-form input::placeholder { letter-spacing: .02em; text-transform: none; font-size: 1.15rem; font-weight: 700; color: #aab; }
.hero-or { margin-top: 16px; }
.tiles-section { margin-top: 26px; }
.tiles-section h2 { color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.2); margin: 0 0 12px; }
.tiles-section .soft { color: #fff; }
.qtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.qtile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; padding: 14px; border-radius: var(--radius); text-decoration: none; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 10px 25px rgba(0,0,0,.12); background: linear-gradient(150deg, var(--bg1), var(--bg2)); overflow: hidden; transition: transform .15s; }
.qtile:hover { transform: translateY(-4px) rotate(-.5deg); }
.qtile.theme-ocean { --bg1: #36d1dc; --bg2: #5b86e5; } .qtile.theme-space { --bg1: #2b1055; --bg2: #7597de; }
.qtile.theme-forest { --bg1: #56ab2f; --bg2: #a8e063; } .qtile.theme-candy { --bg1: #ff9a9e; --bg2: #a18cd1; }
.qtile.theme-sunset { --bg1: #ff7e5f; --bg2: #feb47b; } .qtile.theme-snow { --bg1: #83a4d4; --bg2: #6fc3df; }
.qtile-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.qtile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.6)); }
.qtile-mascot { position: absolute; right: 10px; top: 6px; font-size: 3.6rem; animation: float 3s ease-in-out infinite; }
.qtile-subject { position: absolute; left: 12px; top: 12px; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 800; z-index: 1; }
.qtile-title { position: relative; font-size: 1.15rem; line-height: 1.2; text-shadow: 0 2px 3px rgba(0,0,0,.3); }
.qtile-meta { position: relative; font-size: .85rem; font-weight: 700; opacity: .95; }
.new-badge { background: #ffd43b; color: #5c3c00; padding: 0 8px; border-radius: 99px; font-weight: 900; }

/* ----- Đăng nhập học sinh ----- */
.login-box, .login-wide, .msg-card, .intro, .result, .review, .leaderboard, .modal { background: rgba(255,255,255,.97); border-radius: 30px; box-shadow: 0 16px 50px rgba(0,0,0,.18); padding: 26px 22px; margin: 10px auto; text-align: center; }
.login-box { max-width: 440px; }
.login-wide { max-width: 1000px; }
.login-wide h1, .login-box h1 { margin: 6px 0; font-size: 1.6rem; line-height: 1.2; }
.back-link { display: inline-block; margin-bottom: 4px; font-weight: 700; color: var(--soft); text-decoration: none; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 18px 0; }
.class-tile { display: flex; flex-direction: column; align-items: center; padding: 22px 10px; border-radius: 22px; background: var(--c); color: #fff; text-decoration: none; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 65%, #000); transition: transform .1s; }
.class-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 65%, #000); }
.class-tile b { font-size: 2.2rem; line-height: 1; }
.name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.name-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 20px; background: #f6f8ff; border: 3px solid #e6ebff; text-decoration: none; transition: transform .1s, border-color .1s; }
.name-tile:hover { border-color: var(--secondary); transform: translateY(-3px); }
.name-tile span { font-size: 2.8rem; line-height: 1; }
.name-tile b { font-size: 1rem; line-height: 1.2; }
.big-avatar { font-size: 5rem; line-height: 1; }
.secret-label { display: block; font-weight: 800; margin: 14px 0 6px; }
.secret-input { width: 100%; font: inherit; font-size: 2rem; font-weight: 900; text-align: center; letter-spacing: .2em; padding: 8px; border-radius: 18px; border: 3px solid #e6ebff; }
.secret-input:focus { outline: none; border-color: var(--secondary); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 18px; }
.keypad button { font-size: 1.7rem; font-weight: 900; padding: 12px 0; border-radius: 18px; border: 0; background: #eef2ff; box-shadow: 0 4px 0 #cdd5f5; cursor: pointer; }
.keypad button.pressed, .keypad button:active { transform: translateY(3px); box-shadow: 0 1px 0 #cdd5f5; }

/* ----- Thông báo ----- */
.msg-card { max-width: 480px; }
.msg-emoji { font-size: 4.5rem; line-height: 1.1; }
.msg-card h1 { margin: 8px 0; }

/* ----- Màn hình giới thiệu ----- */
.play-app { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 8px 12px 20px; flex: 1; display: flex; flex-direction: column; }
body.in-game .play-app { padding-top: 6px; }
.loading-screen { margin: auto; text-align: center; color: #fff; font-weight: 800; }
.spinner { width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%; border: 7px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin 0.9s linear infinite; }
.intro { max-width: 580px; width: 100%; }
.intro-mascot { font-size: 5.5rem; line-height: 1; }
.intro-cover { height: 170px; border-radius: 20px; background-size: cover; background-position: center; margin: -8px -6px 10px; }
.intro-subject { display: inline-block; background: #f1f3ff; padding: 2px 12px; border-radius: 99px; font-weight: 800; font-size: .9rem; }
.intro-title { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 8px 0; line-height: 1.15; }
.intro-desc { color: var(--soft); margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.chip { background: #f1f3ff; border-radius: 99px; padding: 4px 14px; font-weight: 800; font-size: .95rem; }
.intro-who { display: inline-flex; gap: 10px; align-items: center; background: #fff8e6; padding: 8px 18px; border-radius: 20px; margin: 8px 0 14px; text-align: left; }
.who-avatar { font-size: 2.6rem; }
.intro-who small { display: block; color: var(--soft); }
.intro-name { margin: 8px 0 14px; }
.intro-name label { display: block; font-weight: 800; margin-bottom: 6px; }
.name-input { width: 100%; max-width: 380px; font: inherit; font-size: 1.4rem; font-weight: 800; text-align: center; padding: 10px; border-radius: 18px; border: 3px solid #e6ebff; }
.name-input:focus { outline: none; border-color: var(--secondary); }
.login-link { display: block; margin-top: 8px; font-weight: 700; color: var(--secondary); }
.intro-best { font-weight: 800; color: #b07800; margin-bottom: 10px; }
.intro .kbtn.ghost { margin-top: 12px; background: #f1f3ff; }

/* ----- Đếm ngược ----- */
.countdown { margin: auto; text-align: center; color: #fff; }
.cd-mascot { font-size: 5rem; animation: float 1.5s ease-in-out infinite; }
.cd-num { font-size: 8rem; font-weight: 900; line-height: 1; text-shadow: 0 6px 0 rgba(0,0,0,.15); }
.cd-num.bump { animation: bump .5s; }
.cd-num.go { font-size: 4rem; animation: pop .4s; }
.countdown p { font-size: 1.4rem; font-weight: 800; }

/* ----- HUD ----- */
.game { display: flex; flex-direction: column; flex: 1; gap: 10px; }
.hud { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.95); padding: 8px 10px; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.1); position: sticky; top: 6px; z-index: 5; flex-wrap: wrap; }
.hud-btn { border: 0; background: #f1f3ff; width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; font-weight: 900; cursor: pointer; flex: none; }
.hud-btn.small { width: 34px; height: 34px; }
.hud-btn.off { opacity: .4; }
.track { flex: 1; min-width: 140px; height: 18px; background: #e9ecf7; border-radius: 99px; position: relative; margin: 0 22px 0 6px; }
.track-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-green), var(--c-teal)); transition: width .6s; }
.track-mascot { position: absolute; top: 50%; transform: translate(-50%, -55%) scaleX(-1); font-size: 1.9rem; transition: left .6s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.track-flag { position: absolute; right: -26px; top: 50%; transform: translateY(-55%); font-size: 1.4rem; }
.hud-stats { display: flex; align-items: center; gap: 8px; font-weight: 900; flex-wrap: wrap; }
.hud-stats > span { background: #f1f3ff; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.hud-points.bump, .cd-num.bump { animation: bump .5s; }
.hud-lives { letter-spacing: -2px; }
.hud-lives.lose { animation: shake .5s; }
.hud-streak { background: #fff0e0 !important; color: #d9480f; animation: pulse 1s infinite; }
.hud-timer { font-variant-numeric: tabular-nums; }
.hud-timer.warn { background: var(--bad) !important; color: #fff; animation: pulse .5s infinite; }
@media (max-width: 600px) {
  .hud { gap: 6px; }
  .track { order: 3; flex-basis: 100%; margin: 4px 22px 4px 6px; }
  .hud-stats { margin-left: auto; font-size: .9rem; }
}

/* ----- Thẻ câu hỏi ----- */
.stage { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.qcard { background: #fff; border-radius: var(--radius); padding: 14px 18px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); text-align: center; }
.qhead { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qtype { font-size: .82rem; font-weight: 800; background: #f1f3ff; padding: 2px 12px; border-radius: 99px; color: var(--soft); }
.qpoints { font-size: .82rem; font-weight: 800; background: #fff3bf; padding: 2px 10px; border-radius: 99px; }
.speak-btn { border: 0; background: #e7f5ff; border-radius: 50%; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; box-shadow: 0 3px 0 #a5d8ff; }
.speak-btn:active { transform: translateY(2px); box-shadow: none; }
.qtext { font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 800; line-height: 1.3; margin: 8px 0; white-space: pre-line; word-break: break-word; }
.qimg { max-height: 34vh; border-radius: 16px; margin: 4px auto; display: block; }
.qaudio { width: 100%; max-width: 420px; margin: 6px auto; display: block; }
.qhint { font-size: .9rem; color: var(--soft); font-weight: 700; }
.qtime { height: 8px; background: #eee; border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.qtime i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--c-red), var(--c-yellow), var(--c-green)); transition: width .25s linear; }
.answer-area { flex: 1; }
.action-bar { display: flex; gap: 10px; justify-content: center; padding: 6px 0 4px; position: sticky; bottom: 8px; z-index: 4; }
.action-bar .kbtn { min-width: 180px; }
.check-btn:not(.ready) { filter: grayscale(.4); }
.check-btn.ready { animation: pulse 1.4s infinite; }

/* ----- Chọn đáp án ----- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.choice-grid.n2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .choice-grid, .choice-grid.n3 { grid-template-columns: 1fr; } .choice-grid.with-img { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 14px 16px 14px 50px; border: 0; border-radius: 20px; color: #fff; font-size: clamp(1.1rem, 3.5vw, 1.45rem); font-weight: 800; cursor: pointer; background: var(--c); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 62%, #000); transition: transform .08s, box-shadow .08s, opacity .2s; text-shadow: 0 1px 2px rgba(0,0,0,.2); word-break: break-word; }
.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 62%, #000); }
.choice .shape { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; opacity: .85; }
.choice img { max-height: 120px; border-radius: 12px; background: #fff; }
.choice .tick { position: absolute; right: 12px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; font-size: 1rem; color: transparent; }
.choice.selected { outline: 5px solid #fff; outline-offset: -9px; transform: scale(1.02); }
.choice.selected .tick { background: #fff; color: var(--c); }
.choice.right { background: var(--ok) !important; --c: var(--ok); animation: pop .4s; }
.choice.wrong { background: var(--bad) !important; --c: var(--bad); animation: shake .45s; }
.choice.faded { opacity: .35; }
.c-red { --c: var(--c-red); } .c-blue { --c: var(--c-blue); } .c-yellow { --c: #f2b705; } .c-green { --c: #37b24d; }
.c-purple { --c: #9775fa; } .c-orange { --c: var(--c-orange); } .c-pink { --c: #f06595; } .c-teal { --c: #20c997; }

/* ----- Đúng / Sai ----- */
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tf-btn { border: 0; border-radius: 26px; padding: 26px 10px; cursor: pointer; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.8rem; transition: transform .08s; }
.tf-true { background: #37b24d; box-shadow: 0 7px 0 #2b8a3e; }
.tf-false { background: #f03e3e; box-shadow: 0 7px 0 #c92a2a; }
.tf-btn:active { transform: translateY(5px); box-shadow: none; }
.tf-emoji { font-size: 3.6rem; line-height: 1; }
.tf-btn.selected { outline: 6px solid #fff; outline-offset: -12px; }
.tf-btn.right { animation: pop .4s; outline: 6px solid #ffd43b; outline-offset: -12px; }
.tf-btn.wrong { opacity: .5; animation: shake .45s; }

/* ----- Nhập chữ / số ----- */
.input-wrap { display: flex; justify-content: center; }
.big-input { width: 100%; max-width: 560px; font: inherit; font-size: 1.8rem; font-weight: 800; text-align: center; padding: 14px; border-radius: 22px; border: 4px solid #fff; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.big-input:focus { outline: none; border-color: var(--secondary); }
.big-input.right, .num-display.right { border-color: var(--ok); background: var(--ok-bg); }
.big-input.wrong, .num-display.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake .45s; }
.num-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.num-display { min-width: 220px; background: #fff; border-radius: 22px; padding: 6px 24px; font-size: 2.6rem; font-weight: 900; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.1); display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.num-display .empty { color: #ccc; }
.num-display small { font-size: 1.1rem; color: var(--soft); }
.numpad { display: grid; grid-template-columns: repeat(3, 78px); gap: 10px; }
.numpad button { height: 66px; border: 0; border-radius: 18px; background: #fff; font-size: 1.9rem; font-weight: 900; box-shadow: 0 5px 0 #c9d1ee; cursor: pointer; }
.numpad button:active { transform: translateY(4px); box-shadow: 0 1px 0 #c9d1ee; }
.numpad button.del { background: #ffe3e3; box-shadow: 0 5px 0 #ffb8b8; grid-column: 2 / span 2; }

/* ----- Thẻ kéo thả chung ----- */
.tile { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 52px; padding: 8px 16px; border-radius: 16px; background: #fff; border: 0; font-weight: 800; font-size: 1.25rem; box-shadow: 0 5px 0 #c9d1ee; cursor: grab; user-select: none; touch-action: none; transition: transform .1s, opacity .15s; }
.tile.selected { outline: 4px solid var(--secondary); transform: translateY(-4px); }
.tile.dragging { opacity: .3; }
.tile.locked { pointer-events: none; }
.tile.right { background: var(--ok-bg); box-shadow: 0 5px 0 #8ce99a; }
.tile.wrong { background: var(--bad-bg); box-shadow: 0 5px 0 #ffa8a8; animation: shake .45s; }
.draggable { touch-action: none; }
.drag-ghost { position: fixed !important; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: .95; box-shadow: 0 16px 30px rgba(0,0,0,.25) !important; transition: none !important; margin: 0 !important; }
.drop-hover { outline: 4px dashed var(--secondary) !important; outline-offset: 3px; transform: scale(1.03); }
.pop { animation: pop .3s; }

/* ----- Điền chỗ trống ----- */
.fb-sentence { background: #fff; border-radius: 22px; padding: 18px; font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 700; line-height: 2.3; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.1); margin-bottom: 14px; white-space: pre-line; }
.fb-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; min-height: 52px; padding: 0 12px; margin: 0 4px; vertical-align: middle; border-radius: 14px; border: 3px dashed #b8c2f0; background: #f4f6ff; font-weight: 900; color: var(--secondary); line-height: 1.2; cursor: pointer; position: relative; }
.fb-slot.active { border-color: var(--primary); background: #fff4e6; }
.fb-slot.filled { border-style: solid; border-color: var(--secondary); background: #e7f0ff; }
.fb-slot.right { border-color: var(--ok); background: var(--ok-bg); color: #2b8a3e; }
.fb-slot.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); text-decoration: line-through; }
.fb-slot.wrong[data-sol]::after { content: attr(data-sol); position: absolute; top: -16px; right: -8px; background: var(--ok); color: #fff; text-decoration: none; font-size: .8rem; padding: 0 8px; border-radius: 99px; line-height: 1.6; }
.fb-input { font: inherit; font-weight: 900; text-align: center; width: 7em; border: 0; border-bottom: 4px solid var(--secondary); background: #f4f6ff; border-radius: 10px 10px 0 0; padding: 2px 6px; margin: 0 4px; color: var(--secondary); }
.fb-input:focus { outline: none; background: #fff4e6; }
.fb-input.right { border-color: var(--ok); background: var(--ok-bg); }
.fb-input.wrong { border-color: var(--bad); background: var(--bad-bg); }
.fb-bank { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 10px; }
.fb-bank .tile.used { opacity: .2; pointer-events: none; transform: scale(.9); }

/* ----- Ghép nối ----- */
.match-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 12vw, 140px); background: rgba(255,255,255,.35); border-radius: 22px; padding: 14px; }
.match-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.mline { fill: none; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.mline.dashed { stroke-dasharray: 10 8; }
.match-col { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.match-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 10px 14px; background: #fff; border-radius: 16px; font-weight: 800; font-size: clamp(1rem, 3.5vw, 1.3rem); text-align: center; box-shadow: 0 5px 0 #c9d1ee; cursor: pointer; user-select: none; border: 4px solid transparent; word-break: break-word; }
.match-item span { flex: 1; }
.match-item .dot { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #dfe4f5; border: 3px solid #fff; transform: translateY(-50%); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.match-col.left .dot { right: -12px; } .match-col.right .dot { left: -12px; }
.match-item.linked { border-color: var(--lc); }
.match-item.linked .dot { background: var(--lc); }
.match-item.selected { border-color: var(--primary); transform: scale(1.04); animation: pulse 1s infinite; }
.match-item.right { background: var(--ok-bg); }
.match-item.wrong { background: var(--bad-bg); }
.match-item.locked { pointer-events: none; }

/* ----- Kéo thả ghép đôi ----- */
.dm-board { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.dm-arrow { font-size: 1.5rem; font-weight: 900; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.25); }
.dm-target { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 14px; border-radius: 18px; background: var(--c); color: #fff; font-weight: 900; font-size: clamp(1.1rem, 4vw, 1.5rem); text-align: center; box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 62%, #000); text-shadow: 0 1px 2px rgba(0,0,0,.2); word-break: break-word; }
.dm-slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 6px; border-radius: 18px; border: 4px dashed rgba(255,255,255,.9); background: rgba(255,255,255,.35); cursor: pointer; transition: background .15s, transform .15s; }
.dm-slot .dm-ph { color: #fff; font-weight: 800; font-size: .95rem; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dm-slot.filled .dm-ph, .dm-slot .tile ~ .dm-ph { display: none; }
.dm-slot.filled { border-style: solid; background: rgba(255,255,255,.75); }
.dm-slot.active { border-color: var(--primary); background: #fff4e6; animation: pulse 1s infinite; }
.dm-slot .tile { width: 100%; }
.dm-slot.right { border-color: var(--ok); background: var(--ok-bg); }
.dm-slot.right .tile { background: var(--ok-bg); box-shadow: 0 5px 0 #8ce99a; }
.dm-slot.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake .45s; }
.dm-slot.wrong .tile { background: var(--bad-bg); box-shadow: 0 5px 0 #ffa8a8; text-decoration: line-through; }
.dm-slot.wrong[data-sol]::after { content: "✔ " attr(data-sol); position: absolute; top: -14px; right: 6px; background: var(--ok); color: #fff; font-size: .85rem; font-weight: 800; padding: 0 10px; border-radius: 99px; line-height: 1.7; z-index: 2; }
.dm-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 72px; padding: 10px; background: rgba(255,255,255,.35); border-radius: 20px; border: 3px dashed rgba(255,255,255,.8); max-width: 760px; margin: 0 auto; }
.dm-card { font-size: clamp(1.05rem, 3.8vw, 1.35rem); }
@media (max-width: 480px) { .dm-row { gap: 6px; } .dm-arrow { font-size: 1.1rem; } .dm-slot .dm-ph { font-size: .8rem; } }

/* ----- Lật thẻ ----- */
.mem-info { text-align: center; color: #fff; font-weight: 800; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; margin: 0 auto; perspective: 900px; }
.mem-grid.n4 { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
.mem-grid.n6 { grid-template-columns: repeat(3, 1fr); max-width: 540px; }
.mem-grid.n18, .mem-grid.n20, .mem-grid.n24 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 560px) { .mem-grid { gap: 8px; } .mem-grid.n18, .mem-grid.n20, .mem-grid.n24 { grid-template-columns: repeat(4, 1fr); } .mem-front { font-size: 1.8rem; } }
.mem-card { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; }
.mem-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }
.mem-front, .mem-back { position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-weight: 900; padding: 6px; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.mem-front { background: var(--c); color: rgba(255,255,255,.9); font-size: 2.6rem; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 50%); }
.mem-back { background: #fff; transform: rotateY(180deg); font-size: clamp(1rem, 3.5vw, 1.4rem); line-height: 1.15; word-break: break-word; }
.mem-card.matched .mem-back { background: var(--ok-bg); box-shadow: 0 5px 0 #8ce99a; animation: pop .4s; }
.mem-card.nope .mem-back { background: var(--bad-bg); animation: shake .4s; }

/* ----- Sắp xếp ----- */
.order-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
.order-item { display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 12px; border-radius: 18px; box-shadow: 0 5px 0 #c9d1ee; font-weight: 800; font-size: clamp(1.05rem, 3.5vw, 1.35rem); cursor: grab; user-select: none; touch-action: none; transition: box-shadow .15s; }
.order-item.dragging { opacity: 1; box-shadow: 0 12px 26px rgba(0,0,0,.25); transform: scale(1.03); z-index: 3; position: relative; background: #fff8e1; }
.ord-num { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--secondary); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.ord-grip { color: #b5bdd8; font-size: 1.4rem; }
.ord-text { flex: 1; text-align: left; word-break: break-word; }
.ord-arrows { display: flex; flex-direction: column; gap: 4px; }
.ord-arrow { border: 0; background: #eef2ff; border-radius: 8px; width: 38px; height: 26px; font-size: .8rem; cursor: pointer; }
.order-item.right { background: var(--ok-bg); } .order-item.right .ord-num { background: var(--ok); }
.order-item.wrong { background: var(--bad-bg); } .order-item.wrong .ord-num { background: var(--bad); }
.order-item.locked { pointer-events: none; }

/* ----- Phân loại ----- */
.cat-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cat-bucket { background: color-mix(in srgb, var(--c) 18%, #fff); border: 4px solid var(--c); border-radius: 22px; padding: 8px; min-height: 140px; display: flex; flex-direction: column; cursor: pointer; transition: transform .12s; }
.cat-name { background: var(--c); color: #fff; font-weight: 900; border-radius: 14px; padding: 6px; text-align: center; font-size: 1.15rem; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cat-body { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; justify-content: center; padding: 10px 4px; }
.cat-body .tile { font-size: 1.05rem; min-height: 44px; }
.pool-label { color: #fff; font-weight: 800; margin: 14px 0 4px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.cat-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 70px; padding: 10px; background: rgba(255,255,255,.35); border-radius: 20px; border: 3px dashed rgba(255,255,255,.8); }

/* ----- Xếp chữ ----- */
.scr-hint { text-align: center; color: #fff; font-weight: 800; margin-bottom: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.scr-answer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 80px; padding: 12px; background: #fff; border-radius: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.1); margin-bottom: 16px; border: 4px solid #fff; }
.scr-answer.right { border-color: var(--ok); background: var(--ok-bg); }
.scr-answer.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake .45s; }
.scr-slot { width: 54px; height: 60px; border-radius: 14px; border: 3px dashed #c9d1ee; }
.scr-answer.words .scr-slot { width: 80px; }
.scr-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.scr-tile { color: #fff; background: var(--c); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 62%, #000); font-size: 1.6rem; min-width: 56px; min-height: 60px; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.scr-pool.words .scr-tile, .scr-answer.words .scr-tile { font-size: 1.25rem; }
.scr-ghost { width: 56px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.3); }
.scr-pool.words .scr-ghost { display: none; }

/* ----- Phản hồi đúng/sai ----- */
.feedback { position: sticky; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; padding: 14px 18px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: slideUp .3s ease-out; }
.feedback.ok { background: var(--ok-bg); border: 4px solid var(--ok); }
.feedback.bad { background: var(--bad-bg); border: 4px solid var(--bad); }
.feedback.part { background: var(--part-bg); border: 4px solid var(--part); }
.fb-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; text-align: left; }
.fb-emoji { font-size: 3rem; line-height: 1; }
.fb-title { font-size: 1.45rem; display: block; line-height: 1.15; }
.feedback.ok .fb-title { color: #2b8a3e; } .feedback.bad .fb-title { color: #c92a2a; } .feedback.part .fb-title { color: #a15c00; }
.fb-pts { font-weight: 900; color: #b07800; }
.fb-sol, .fb-exp { font-size: 1rem; margin-top: 2px; }
.feedback .kbtn { margin-left: auto; }

/* ----- Kết quả ----- */
.result { max-width: 560px; width: 100%; }
.trophy { font-size: 5.5rem; line-height: 1; }
.result h1 { margin: 6px 0 0; font-size: 2rem; }
.big-score { font-size: 5rem; font-weight: 900; line-height: 1; color: var(--primary); text-shadow: 0 4px 0 rgba(0,0,0,.08); }
.big-score small { font-size: 2rem; color: var(--soft); }
.stars-row { font-size: 3.2rem; letter-spacing: 6px; line-height: 1.2; }
.star { color: #dee2e6; display: inline-block; }
.star.on { color: #fcc419; animation: starIn .6s both; text-shadow: 0 3px 0 #e8a400; }
.stars-row.big { font-size: 4.2rem; letter-spacing: 2px; }
@media (max-width: 420px) { .stars-row.big { font-size: 3rem; } }
.stars-caption { font-weight: 800; color: #b07800; }
.tt27-badge { display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 10px 22px; border-radius: 22px; font-size: 1.7rem; font-weight: 900; color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.15); animation: pop .5s; }
.tt27-badge span { font-size: 2.2rem; }
.tt27-badge.lv2 { background: linear-gradient(135deg, #37b24d, #20c997); }
.tt27-badge.lv1 { background: linear-gradient(135deg, #4dabf7, #339af0); }
.tt27-badge.lv0 { background: linear-gradient(135deg, #ff922b, #f76707); }
.result-msg { font-size: 1.2rem; font-weight: 800; margin: 6px 0; }
.review { max-width: 760px; width: 100%; text-align: left; }
.review h1 { text-align: center; }
.review > .kbtn { display: flex; margin: 10px auto 0; }
.review-list { padding-left: 0; list-style: none; counter-reset: rv; }
.review-list li { border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; border: 3px solid; }
.review-list li.ok { border-color: #b2f2bb; background: #f4fff5; }
.review-list li.bad { border-color: #ffc9c9; background: #fff6f6; }
.review-list li.part { border-color: #ffe066; background: #fffbe6; }
.rv-q { font-weight: 800; font-size: 1.1rem; }
.rv-mark { margin-right: 6px; }
.rv-img { max-height: 120px; border-radius: 10px; display: block; margin: 6px 0; }
.rv-a, .rv-c, .rv-e { font-size: .98rem; margin-top: 4px; }
.rv-c b { color: #2b8a3e; }

/* ----- Bảng xếp hạng ----- */
.leaderboard { max-width: 620px; width: 100%; }
.leaderboard h1 { margin: 0; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; margin: 16px 0; }
.pod { display: flex; flex-direction: column; align-items: center; }
.pod-avatar { font-size: 3rem; line-height: 1; }
.pod-name { font-weight: 800; font-size: .95rem; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pod-score { font-weight: 900; color: var(--primary); }
.pod-block { width: 100%; border-radius: 16px 16px 6px 6px; display: grid; place-items: start center; padding-top: 8px; font-size: 2rem; margin-top: 4px; }
.pod1 .pod-block { height: 130px; background: linear-gradient(#ffe066, #fcc419); }
.pod2 .pod-block { height: 95px; background: linear-gradient(#e9ecef, #ced4da); }
.pod3 .pod-block { height: 70px; background: linear-gradient(#ffc9a3, #ff922b); }
.pod1 .pod-avatar { font-size: 3.8rem; animation: float 2s ease-in-out infinite; }
.pod.me .pod-name { color: var(--secondary); }
.lb-list { list-style: none; padding: 0; margin: 0 0 10px; text-align: left; }
.lb-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; margin-bottom: 6px; background: #f6f8ff; font-weight: 700; }
.lb-list li.me { background: #fff3bf; outline: 3px solid #fcc419; }
.lb-rank { width: 30px; height: 30px; border-radius: 50%; background: #dbe4ff; display: grid; place-items: center; font-weight: 900; flex: none; }
.lb-av { font-size: 1.5rem; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-time { color: var(--soft); font-size: .85rem; }
.lb-score { color: var(--primary); min-width: 40px; text-align: right; }
.lb-me { background: #fff3bf; border-radius: 14px; padding: 8px; font-weight: 700; margin-bottom: 12px; }

/* ----- Hộp thoại, thông báo nổi ----- */
.modal-back { position: fixed; inset: 0; background: rgba(20, 25, 50, .5); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { max-width: 420px; width: 100%; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #fff; padding: 10px 22px; border-radius: 99px; font-weight: 800; box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 200; animation: slideDown .3s; transition: opacity .4s, transform .4s; }
.toast.ok { background: var(--ok-bg); } .toast.warn { background: #ffe8cc; } .toast.info { background: #e7f5ff; }
.toast.out { opacity: 0; transform: translate(-50%, -20px); }
.net-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #ffd43b; text-align: center; padding: 8px; font-weight: 800; z-index: 300; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 150; }

/* ----- Hoạt hình ----- */
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideDown { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes starIn { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 70% { transform: scale(1.3) rotate(10deg); opacity: 1; } 100% { transform: scale(1); } }
.pop-in { animation: pop .35s ease-out; }
.bounce { animation: float 1.6s ease-in-out infinite; }
.float { animation: float 3s ease-in-out infinite; }
.shake { animation: shake .45s; }

/* ----- Định dạng: phân số, gạch chân ----- */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .82em; line-height: 1.05; margin: 0 3px; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px 1px; }
.frac > span:last-child { padding: 1px 3px 0; }
.qtext u, .choice u, .tile u { text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--primary); }

/* ----- Bộ sưu tập sao ----- */
.star-bank { background: rgba(255,255,255,.95); color: var(--ink); border-radius: 22px; padding: 10px 18px; max-width: 420px; margin: 0 auto 16px; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.sb-title { font-weight: 900; font-size: 1.2rem; }
.sb-title span { font-size: 1.6rem; }
.sb-count { font-weight: 700; }
.sb-count b { color: #e8a400; font-size: 1.3rem; }
.sb-bar { height: 12px; background: #eee; border-radius: 99px; overflow: hidden; margin: 6px 0 2px; }
.sb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd43b, #ff922b); border-radius: 99px; }
.sb-next { font-size: .85rem; color: var(--soft); font-weight: 700; }
.choice .frac, .dm-target .frac, .tile .frac { font-size: .95em; }

/* ----- Ảnh trong thẻ ----- */
.item-img { display: block; max-width: 100%; max-height: 96px; margin: 2px auto; border-radius: 10px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.tile .item-img { max-height: 72px; }
.mem-back .item-img { max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.qtext .item-img { display: inline-block; max-height: 120px; vertical-align: middle; }
.match-item .item-img, .dm-target .item-img { max-height: 84px; }
.cat-name .item-img { max-height: 40px; display: inline-block; vertical-align: middle; }
.order-item .item-img { max-height: 60px; margin: 0; }

.chip.dl-soon { background: #ffe8cc; color: #d9480f; animation: pulse 1.6s infinite; }
.chip.dl-late { background: #ffe3e3; color: #c92a2a; }
.dl-badge { position: relative; display: inline-block; font-size: .75rem; font-weight: 900; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.92); color: #444; margin-top: 2px; }
.dl-badge.soon { background: #ffd8a8; color: #a63c06; }
.dl-badge.late { background: #ffc9c9; color: #a51111; }
.qtile.done { opacity: .85; }
.done-badge { position: absolute; right: 10px; bottom: 10px; background: #2fb36d; color: #fff; font-size: .75rem; font-weight: 900; padding: 1px 8px; border-radius: 99px; }
.todo-count { background: #ff6b6b; color: #fff; padding: 0 12px; border-radius: 99px; font-size: .9em; text-shadow: none; }

/* ----- Trang phụ huynh ----- */
.parent-card { background: rgba(255,255,255,.97); border-radius: 26px; padding: 20px; box-shadow: 0 16px 50px rgba(0,0,0,.18); max-width: 860px; margin: 10px auto; }
.parent-card h1 { margin: 0; font-size: 1.6rem; }
.parent-card h2 { font-size: 1.2rem; margin: 18px 0 8px; }
.pc-head { display: flex; gap: 14px; align-items: center; }
.pc-head .big-avatar { font-size: 3.6rem; }
.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.pc-stats div { background: #f4f6ff; border-radius: 16px; padding: 10px; text-align: center; }
.pc-stats b { display: block; font-size: 1.6rem; line-height: 1.1; }
.pc-stats small { color: var(--soft); font-weight: 700; font-size: .8rem; }
@media (max-width: 560px) { .pc-stats { grid-template-columns: 1fr 1fr; } }
.pc-list { list-style: none; padding: 0; margin: 0; }
.pc-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: #fff8e6; margin-bottom: 8px; }
.pc-list li > span:first-child { flex: 1; min-width: 180px; }
.pc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pc-table th, .pc-table td { padding: 8px 6px; border-bottom: 1px solid #eef; text-align: left; vertical-align: middle; }
.pc-table th { font-size: .78rem; color: var(--soft); text-transform: uppercase; }
.pc-score { display: inline-block; min-width: 44px; padding: 1px 10px; border-radius: 99px; color: #fff; background: #e5484d; text-align: center; }
.pc-score.s1 { background: #f59f00; } .pc-score.s2 { background: #4f8cff; } .pc-score.s3 { background: #2fb36d; }
.small { font-size: .85rem; }
/* Ảnh trong phần "đáp án đúng" / xem lại: nhỏ gọn, nằm cùng dòng */
.fb-sol .item-img, .rv-a .item-img, .rv-c .item-img, .rv-q .item-img, .fb-exp .item-img { display: inline-block; max-height: 38px; max-width: 60px; margin: 0 2px; vertical-align: middle; }

/* ----- Khung chơi thử trong trang hướng dẫn (demo.php) ----- */
body.demo-frame { min-height: 0; display: block; }
body.demo-frame .play-app { padding: 12px 12px 14px; min-height: 0; }
body.demo-frame .action-bar, body.demo-frame .feedback { position: static; }
body.demo-frame .game { gap: 10px; }