/* ===== THEME ===== */
: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: "Inter", 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 !important;
  border-bottom:1px solid var(--card-b);
  box-shadow:0 8px 18px rgba(16,94,60,.08);
}
.navbar-edu .navbar-brand{ font-weight:900; color:#0f3d2e; }
.navbar-edu .nav-link{ font-weight:800; color:#14532d; }
.navbar-edu .nav-item.active .nav-link,
.navbar-edu .nav-link:hover{ color:var(--green); }
.navbar-edu .navbar-toggler{ border:0; }
.navbar-edu .navbar-toggler-icon{ color:#14532d; }
.score-mini{ font-weight:800; color:#14532d; }

/* ===== Ads ===== */
.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; }

/* ===== Cards ===== */
.card-quiz{
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.sec-title{
  font-weight:900; color:#14532d;
  font-size:clamp(16px,2.6vw,18px);
  margin-bottom:8px;
}
.lbl{ display:block; font-weight:800; color:#0f3d2e; margin-top:6px; }

/* Sliders */
.slider{ width:100%; accent-color: var(--green); }

/* Checkbox list to, dễ bấm */
.options-list li{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.options-list input[type="checkbox"]{
  width:22px; height:22px; accent-color: var(--green);
}
.options-list label{ font-weight:800; color:#0f3d2e; }

/* ===== Equation & Inputs ===== */
.equation{
  display:block;
  font-weight:1000;
  color:#065f46;
  letter-spacing:.8px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(32px, 6.8vw, 56px);
}
.answer-input{
  width:min(460px, 92%);
  height: clamp(60px, 9vw, 72px);
  padding:0 16px;
  border:3px solid #bfe6cd;
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  font-weight:900;
  font-size: clamp(22px, 3.6vw, 28px);
  box-shadow: inset 0 6px 16px rgba(16,94,60,.06);
  outline:none;
  transition:border-color .15s, box-shadow .15s, transform .08s;
}
.answer-input::placeholder{ color:#8aa79a; }
.answer-input:focus{ border-color:var(--green); box-shadow:var(--ring), inset 0 6px 16px rgba(16,94,60,.06); transform:translateY(-1px); }

/* Buttons big */
.btn-big{
  display:inline-block;
  min-width: 220px;
  height: clamp(60px, 9vw, 72px);
  padding: 0 22px;
  border-radius: 20px;
  font-weight: 1000;
  font-size: clamp(18px, 3.2vw, 22px);
  border:2px solid transparent;
  box-shadow:0 16px 30px rgba(16,94,60,.16);
  cursor:pointer;
  transition: transform .08s, filter .15s;
}
.btn-big:active{ transform: translateY(2px) scale(.98); }
.btn-next{ background:linear-gradient(135deg, var(--green), var(--green-d)); color:#fff; border-color:#34d399; }
.btn-show{ background:linear-gradient(135deg, var(--yellow), var(--amber)); color:#0b271e; border-color:#f6e05e; }

/* Result text */
.result-text{ font-weight:900; color:#14532d; }

/* ===== Score & History ===== */
.score-box{
  text-align:center;
  font-weight:900; color:#14532d;
  font-size: clamp(18px, 3vw, 22px);
  background:#f0faf3; border:1px solid var(--card-b);
  border-radius:16px; padding:10px 12px;
}
.count{ font-size: clamp(22px, 3.6vw, 28px); color:#065f46; }
.history{
  width:100%; resize:vertical; min-height:260px;
  border:2px solid #cfead8; border-radius:14px; padding:10px;
  font-weight:700; color:#0f3d2e;
  background: #ffffff;
}

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

/* Helpers */
.answer-input.is-correct{ border-color:var(--green)!important; box-shadow:0 0 0 6px rgba(34,197,94,.18) }
.answer-input.is-wrong{ border-color:#ef4444!important; box-shadow:0 0 0 6px rgba(239,68,68,.18) }
/* ===== BOOST khu vực bài tập (card, phép tính, input, nút, kết quả) ===== */

/* Card trắng */
.card-quiz{
  border-radius: 26px;
  border: 1px solid #d9efe0;
  background: #fff;
  box-shadow:
    0 26px 60px rgba(16,94,60,.12),
    0 8px 22px rgba(16,94,60,.08);
  padding: 28px 22px 32px;
}

/* Phép tính */
.equation{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 1000;
  color: #0f5132;              /* xanh đậm dễ đọc */
  letter-spacing: .8px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 7vw, 58px);
}

/* Ô nhập đáp án */
.answer-input{
  width: min(580px, 92%);
  height: clamp(64px, 9.5vw, 76px);
  padding: 0 18px;
  border-radius: 18px;
  border: 3px solid #cfead8;
  background: linear-gradient(180deg,#ffffff,#f7fff9);
  font-weight: 900;
  font-size: clamp(22px, 3.8vw, 28px);
  color: #0f2b22;
  box-shadow: inset 0 8px 18px rgba(16,94,60,.06);
  outline: none;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.answer-input::placeholder{ color:#95b1a6; font-weight: 900; }
.answer-input:focus{
  border-color:#22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.16), inset 0 8px 18px rgba(16,94,60,.06);
  transform: translateY(-1px);
}

/* Hàng nút */
.btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Nút to */
.btn-big{
  min-width: 220px;
  height: clamp(64px, 9.5vw, 76px);
  padding: 0 26px;
  border-radius: 22px;
  border: 2px solid transparent;
  font-weight: 1000;
  font-size: clamp(20px, 3.4vw, 24px);
  letter-spacing: .3px;
  box-shadow:
    0 20px 34px rgba(16,94,60,.16),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-big:active{ transform: translateY(2px) scale(.98); }

/* Màu nút */
.btn-next{                                /* Kiểm tra (xanh) */
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff; border-color:#34d399;
}
.btn-show{                                /* Tiếp theo (vàng) */
  background: linear-gradient(135deg,#fde047,#f59e0b);
  color:#0b271e; border-color:#f6e05e;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Dòng kết quả */
.result-text{
  text-align:center;
  margin-top: 10px;
  font-weight: 900;
  font-size: clamp(16px, 2.8vw, 20px);
  color:#647a73;
}
.result-text.ok{ color:#16a34a; }
.result-text.no{ color:#ef4444; }

/* Trạng thái đúng/sai cho ô nhập (thêm class bằng JS) */
.answer-input.is-correct{
  border-color:#22c55e !important;
  box-shadow: 0 0 0 6px rgba(34,197,94,.2), inset 0 8px 18px rgba(16,94,60,.06);
}
.answer-input.is-wrong{
  border-color:#ef4444 !important;
  box-shadow: 0 0 0 6px rgba(239,68,68,.18), inset 0 8px 18px rgba(16,94,60,.06);
}

/* Khoảng cách tổng thể */
.exercise-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }