/* ================= THEME: Green + Yellow (Kid-friendly) ================= */
:root{
  --green:#22c55e; --green-d:#16a34a; --lime:#84cc16;
  --yellow:#facc15; --amber:#f59e0b;
  --ink:#123227; --muted:#5b7f73;
  --bg:#f4f9f4; --bg2:#eaf6ea;
  --card:#ffffff; --card-b:#d9efe0;
  --ring:0 0 0 4px rgba(34,197,94,.18);
  --shadow:0 16px 36px rgba(16,94,60,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Baloo 2",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 15% -10%, var(--bg2) 0%, transparent 60%),
    radial-gradient(800px 600px at 90% 10%, #dcf4e3 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), #fff);
}

/* ================= Navbar ================= */
.navbar-edu{
  background:#e9f7ef;
  border-bottom:1px solid var(--card-b);
  box-shadow:0 8px 18px rgba(16,94,60,.08);
}
.navbar-edu .navbar-brand{
  font-weight:800; color:#0f3d2e; letter-spacing:.3px;
}
.navbar-edu .nav-link{ font-weight:700; color:#14532d; }
.navbar-edu .nav-link:hover,
.navbar-edu .nav-item.active .nav-link{ color:var(--green); }
.navbar-edu .score-mini{ font-weight:800; color:#14532d; }

/* ================= Ad slots ================= */
.ad-slot-wrap{
  margin:12px auto 18px; max-width:1100px;
  border:1px dashed #bfe6cd; border-radius:14px;
  background:linear-gradient(180deg,#fff,#f4fbf6);
  padding:8px;
}
.ad-caption{ text-align:center; font-size:12px; color:var(--muted); margin-bottom:4px; }

/* ================= Main board ================= */
.board-container{ padding:8px 0 24px; }
.top-row{ margin-bottom:10px; }
.score-badge{
  display:inline-block;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff; border:2px solid #34d399;
  border-radius:16px; padding:10px 14px;
  font-weight:900; font-size:22px;
  box-shadow:0 10px 22px rgba(16,94,60,.16);
}

/* Card quiz wrapper */
.card-quiz{
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:20px 16px 24px;
  margin-bottom:16px;
}

/* ========== Customized puzzle (trắc nghiệm nhiều đáp án) ========== */
.question-desc{
  text-align:center;
  font-size:clamp(20px,3.6vw,24px);
  font-weight:800; color:#14532d; margin-bottom:8px;
}
.answers-grid{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.answers-grid .btn,
.answers-grid button,
.answers-grid input[type="button"]{
  min-width:220px; max-width:320px;
  height:clamp(64px,10vw,80px);
  border-radius:22px; border:2px solid transparent;
  font-weight:900; font-size:clamp(22px,3.6vw,28px);
  box-shadow:0 18px 32px rgba(16,94,60,.16);
  transition:transform .08s ease, box-shadow .15s ease;
}
.answers-grid .btn-primary{
  color:#0b271e;
  background:linear-gradient(135deg,var(--yellow),var(--amber));
  border-color:#f6e05e;
}
.answers-grid .btn-success{
  color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  border-color:#34d399;
}
.answers-grid .btn:active{ transform:translateY(2px) scale(.98); }

/* ========== Predefined puzzle (câu hỏi + bàn phím số) ========== */
#question-area{ margin-bottom:12px; }
.question-block{
  display:inline-block; margin:0 6px;
  font-weight:1000; letter-spacing:.6px; text-align:center;
  color:#065f46;
  font-size:clamp(34px,7vw,54px);
  font-variant-numeric:tabular-nums;
}
.pad{ margin-bottom:10px; gap:10px; flex-wrap:wrap; }
.pad .key,
.pad button{
  width:86px; height:86px;
  border-radius:18px; border:2px solid #bfe6cd;
  background:#fff; font-weight:900; font-size:28px; color:#0f3d2e;
  box-shadow:0 12px 24px rgba(16,94,60,.12);
  transition:transform .08s, border-color .15s;
}
.pad .key:hover, .pad button:hover{ border-color:var(--green); }
.pad .key:active, .pad button:active{ transform:translateY(2px) }

/* ========== Footer ========== */
.footer{
  padding:14px 0 26px; color:var(--muted);
  border-top:1px solid var(--card-b);
  background:#f0faf3;
  font-weight:700;
}

/* ========== Helpers for correctness (JS thêm class) ========== */
.is-correct{ box-shadow:0 0 0 6px rgba(34,197,94,.2) !important; }
.is-wrong{ box-shadow:0 0 0 6px rgba(239,68,68,.18) !important; }

/* ========== Small screens ========== */
@media (max-width:480px){
  .score-badge{ font-size:20px; }
  .pad .key, .pad button{ width:76px; height:76px; font-size:26px; }
}