/* Giao diện "vui mắt" (redesign 18/10/2026): màn chọn bé, trang chủ, logo chữ, icon, thanh tab,
   gợi ý, báo câu sai. Nguyên tắc: một nút chính thật nổi, tiến độ + phần thưởng luôn nhìn thấy,
   ít chữ, nút to dễ chạm (≥ 44px). Bé lớp 9: phong cách thể thao/đua xe (không "trẻ con");
   bé lớp 4: pastel mây bông. */
:root {
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --pop: #ff4b55; --pop-dark: #c9343d; --sun: #ffc83d; --sky: #4a7dff;
}
h1, h2, h3 { letter-spacing: -.2px; }

/* ── Icon & logo chữ ──────────────────────────────────── */
.ico { width: 1.25em; height: 1.25em; vertical-align: -.28em; flex: none; }
.wordmark { font-weight: 900; letter-spacing: -.5px; display: inline-flex; gap: .18em; line-height: 1; }
.wordmark b { color: #3f6dff; }
.wordmark i { font-style: normal; color: #ff4b6e; }
.brand .wordmark { font-size: 21px; }
.brand img { border-radius: 9px; box-shadow: 0 2px 6px rgba(63, 109, 255, .3); }

/* ── Linh vật ─────────────────────────────────────────── */
.mascot {
  display: inline-block; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background-color: #fff; background-repeat: no-repeat; border: 3px solid #fff;
  box-shadow: 0 3px 12px rgba(15, 30, 60, .22);
}
.mascot.cloud { background-color: #a3c8db; }
.mascot.sm { width: 46px; height: 46px; border-width: 2px; }
.mascot.lg { width: 100px; height: 100px; margin: 0 auto 6px; display: block; }
.mascot.xl { width: 116px; height: 116px; border-width: 4px; }
body[data-theme="speed"] .today .mascot.xl { box-shadow: 0 0 0 4px #ffc83d, 0 6px 18px rgba(0, 0, 0, .35); }
body[data-theme="cloud"] .today .mascot.xl { box-shadow: 0 0 0 4px #ffd6e8, 0 6px 18px rgba(120, 160, 210, .35); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.today .mascot.xl { animation: bob 3.4s ease-in-out infinite; }

/* ── Màn chọn bé ──────────────────────────────────────── */
body[data-theme="welcome"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 214, 232, .9) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 12%, rgba(191, 227, 255, .9) 0 120px, transparent 121px),
    radial-gradient(circle at 85% 88%, rgba(255, 236, 170, .7) 0 140px, transparent 141px),
    linear-gradient(160deg, #f4f7ff, #fff6fb);
  min-height: 100vh;
}
body[data-theme="welcome"] .topbar { display: none; }
.welcome { max-width: 900px; margin: 0 auto; text-align: center; padding: 6px 0 24px; }
.welcome-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 10px; }
.welcome-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 10px 28px rgba(63, 109, 255, .35); animation: bob 4s ease-in-out infinite; }
.wordmark.big { font-size: 46px; margin: 4px 0 0; }
.welcome-tag { margin: 0; color: var(--ink-2); font-weight: 600; }
.welcome-q { font-size: 26px; margin: 18px 0 14px; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.door {
  position: relative; display: flex; flex-direction: column; border: 0; padding: 0; cursor: pointer; text-align: left;
  border-radius: 28px; overflow: hidden; background: #fff; color: var(--ink);
  box-shadow: 0 10px 30px rgba(31, 42, 80, .14); transition: transform .18s ease, box-shadow .18s ease;
}
.door:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(31, 42, 80, .2); }
.door.pressed { transform: scale(.97); }
.door-scene { position: relative; height: 170px; display: block; }
.door-scene .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.door-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 62px 18px 22px; }
.door-name { font-size: 30px; font-weight: 900; }
.door-sub { color: var(--ink-3); font-weight: 600; }
.door-stats { display: flex; gap: 14px; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.door-go {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; color: #fff;
  padding: 12px 26px; border-radius: 99px; background: var(--pop); box-shadow: 0 5px 0 var(--pop-dark);
}
.door.cloud .door-go { background: #ff8fb1; box-shadow: 0 5px 0 #e0688e; }
.door-go .ico { width: 16px; height: 16px; vertical-align: 0; }
.welcome-parent { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; color: var(--ink-2); font-weight: 600; text-decoration: none; padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .8); }

/* ── Khối "Hôm nay" ───────────────────────────────────── */
.today { position: relative; border-radius: 28px; overflow: hidden; margin: 6px 0 14px; color: #fff; box-shadow: 0 12px 30px rgba(20, 50, 120, .25); }
.today.cloud { color: #2b4a66; box-shadow: 0 12px 30px rgba(120, 170, 220, .3); }
.today > .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.today-in { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 20px; }
.hello { display: flex; align-items: center; gap: 14px; }
.bubble {
  position: relative; background: #fff; color: var(--ink); border-radius: 20px; padding: 12px 16px;
  font-size: 16px; line-height: 1.45; flex: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.bubble::before { content: ''; position: absolute; left: -10px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.btn.go-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 16px;
  font-size: 24px; font-weight: 900; padding: 12px 18px 10px; border-radius: 20px; line-height: 1.15;
  background: var(--pop); border: 0; color: #fff; box-shadow: 0 6px 0 var(--pop-dark), 0 10px 20px rgba(0, 0, 0, .25);
  text-decoration: none; transition: transform .1s;
}
.btn.go-btn .ico { width: 22px; height: 22px; display: inline; vertical-align: -3px; margin-right: 4px; }
.btn.go-btn small { font-size: 13px; font-weight: 700; opacity: .9; margin-top: 2px; }
.btn.go-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pop-dark); }
.today.cloud .btn.go-btn { background: #ff8fb1; box-shadow: 0 6px 0 #e0688e, 0 10px 20px rgba(224, 104, 142, .25); }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
.btn.go-btn { animation: glow 2.4s ease-in-out infinite; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.chips-l { font-size: 14px; font-weight: 700; background: rgba(8, 22, 56, .55); color: #fff; padding: 4px 10px; border-radius: 99px; }
.today.cloud .chips-l { background: rgba(255, 255, 255, .7); color: #2b4a66; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .95); color: var(--ink); border-radius: 99px; padding: 5px 12px 5px 8px; font-size: 15px; text-decoration: none; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.meter-box { width: 230px; background: rgba(8, 22, 56, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); border-radius: 22px; padding: 10px 12px 8px; text-align: center; backdrop-filter: blur(2px); }
.today.cloud .meter-box { background: rgba(255, 255, 255, .55); }
.meter { width: 100%; height: auto; display: block; }
.meter-n { font: 900 30px var(--font); fill: #fff; }
.meter-u { font: 700 12px var(--font); fill: rgba(255, 255, 255, .9); }
.meter-n.sm { font-size: 20px; }
.today.cloud .meter-n { fill: #2b4a66; }
.today.cloud .meter-u { fill: #4d6b88; }
.meter-label { font-weight: 800; font-size: 14px; margin-top: 2px; }
.meter-fill { transition: stroke-dasharray .8s ease; }

/* ── Hàng chỉ số ──────────────────────────────────────── */
.statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.stat2 {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); line-height: 1.25; min-height: 76px;
}
.stat2 > .ico { width: 40px; height: 40px; }
.stat2 b { font-size: 22px; }
.stat2 small { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.stat2.flame { background: linear-gradient(140deg, #fff4e8, #fff); }
.stat2.coin { background: linear-gradient(140deg, #fff9df, #fff); }
.stat2.card-peek { background: linear-gradient(140deg, #eef3ff, #fff); }
.mini-bar { display: block; height: 7px; border-radius: 99px; background: rgba(31, 42, 51, .08); margin-top: 6px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb648, #ff5a5f); }
.peek { flex: none; width: 46px; height: 60px; border-radius: 8px; overflow: hidden; background: #dfe7f5; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transform: rotate(-6deg); display: grid; place-items: center; }
.peek.land { width: 62px; height: 44px; }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.empty { font-weight: 900; font-size: 22px; color: #9aa7b4; border: 2px dashed #b9c4d0; background: #f4f6f9; }

/* ── Thẻ nhanh + các môn ──────────────────────────────── */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 6px; }
.qcard { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 22px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s; }
.qcard:hover, .subj:hover, .stat2:hover { transform: translateY(-2px); }
.qcard b { font-size: 18px; }
.qcard small { display: block; color: var(--ink-3); font-size: 14px; }
.qcard small em { font-style: normal; color: #c25b00; font-weight: 800; }
.qtile { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; }
.qtile .ico { width: 38px; height: 38px; vertical-align: 0; }
.qcard.exam .qtile { background: #e6efff; }
.qcard.know .qtile { background: #fff4c7; }
.sec-title { margin: 22px 0 10px; }
.subjects2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.subj { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: 24px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s; }
.subj-tile { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 6px; }
.subj-tile .ico { width: 44px; height: 44px; vertical-align: 0; }
.subj.blue .subj-tile { background: linear-gradient(140deg, #dbe9ff, #f1f6ff); }
.subj.red .subj-tile { background: linear-gradient(140deg, #ffe0e1, #fff3f3); }
.subj.green .subj-tile { background: linear-gradient(140deg, #dcf7e7, #f1fcf5); }
.subj-name { font-size: 19px; font-weight: 800; }
.subj-meta { font-size: 14px; color: var(--ink-3); }
.subj .mini-bar { width: 100%; }
.subj.blue .mini-bar i { background: linear-gradient(90deg, #5aa2ff, #3f6dff); }
.subj.red .mini-bar i { background: linear-gradient(90deg, #ff8a8f, #ff4b55); }
.subj.green .mini-bar i { background: linear-gradient(90deg, #7be0a4, #2fb36b); }
h1 .ico, h2 .ico { width: 1.15em; height: 1.15em; }

/* ── Dải thẻ đang chờ ─────────────────────────────────── */
.teaser-head { display: flex; align-items: baseline; justify-content: space-between; }
.teaser-head a { font-weight: 700; text-decoration: none; }
.teaser { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.teaser::-webkit-scrollbar { display: none; }
.tz { position: relative; flex: none; width: 104px; height: 138px; border-radius: 14px; overflow: hidden; scroll-snap-align: start; background: #e9eef6; box-shadow: 0 4px 12px rgba(31, 42, 80, .14); border: 3px solid #fff; }
.tz.land { width: 170px; height: 116px; align-self: center; }
.tz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tz.tall img { object-fit: contain; background: #f4f4f6; }
.tz.lock img { filter: blur(7px) saturate(.35) brightness(1.05); transform: scale(1.15); }
.tz.lock span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); background: rgba(255, 255, 255, .08); }
.tz.got { transform: rotate(-2deg); }

/* ── Thanh tab dưới ───────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(31, 42, 80, .06);
}
.tabbar a { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink-3); font-size: 13px; font-weight: 800; padding: 4px 0; border-radius: 16px; }
.tabbar a .ti .ico { width: 28px; height: 28px; vertical-align: 0; filter: grayscale(1) opacity(.55); transition: transform .15s, filter .15s; }
.tabbar a.on { color: var(--ink); background: #f1f5ff; }
.tabbar a.on .ti .ico { filter: none; transform: translateY(-2px) scale(1.08); }
body[data-theme="cloud"] .tabbar a.on { background: #fff0f6; }
body.has-tabbar .app { padding-bottom: 96px; }

/* ── iPad dọc / điện thoại ────────────────────────────── */
@media (max-width: 640px) {
  .today-in { grid-template-columns: 1fr; }
  .today-right { justify-self: center; }
  .statbar { grid-template-columns: 1fr; }
  .mascot.xl { width: 92px; height: 92px; }
  .wordmark.big { font-size: 38px; }
}

/* ── Luyện tập: nguồn câu, gợi ý, phản hồi, báo câu sai ── */
.q-src { display: inline-block; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 0 8px; margin-right: 6px; }
.q-src .ico { width: 14px; height: 14px; vertical-align: -2px; }
.hint-row { margin-top: 12px; }
.hint-btn { font-size: 15px; padding: 6px 14px; background: #fff8dc; border-color: #ecd78a; }
.hints { margin: 8px 0 0; background: #fffbea; border-radius: 10px; padding: 8px 12px 8px 30px; font-size: 16px; }
.hints:empty { display: none; }
.fb-head { display: flex; align-items: center; gap: 10px; }
.linkbtn { background: none; border: 0; color: var(--ink-3); font-size: 14px; cursor: pointer; text-decoration: underline; padding: 6px; margin-left: auto; }
.report-box { margin-top: 10px; background: var(--paper); border: 1px dashed var(--line); border-radius: 10px; padding: 10px; }
.report-box textarea { width: 100%; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.exam-review { border-top: 1px solid var(--line); padding: 10px 0; }
.exam-review:first-of-type { border-top: 0; }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.badge.warn { background: #fff1d6; color: #9a5b00; }

/* ── Phụ huynh: mục tiêu, bài đang học, báo câu sai ───── */
.goal-set .field input { max-width: 120px; }
.cur-set { margin-top: 12px; }
.cur-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 12px; margin-top: 4px; font-size: 15px; }
.rp-reports { list-style: none; padding: 0; margin: 10px 0 0; }
.rp-reports li { border-top: 1px solid var(--line); padding: 8px 0; }
.soon-card { text-align: center; padding: 28px 20px; }