/* assets/chibi.css (override nhẹ – dùng sau style.css) */

/* giữ biến của style.css, chỉ bổ sung vài biến chibi */
:root{
  --chibi-bg1:#f6fbff;
  --chibi-bg2:#eaf6ff;
  --chibi-shadow: 0 14px 28px rgba(2,6,23,.08);
  --chibi-radius: 22px;
}

/* nền nhẹ nhàng */
body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(30,136,229,.18), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(30,136,229,.10), transparent 60%),
    linear-gradient(180deg, var(--chibi-bg1), var(--chibi-bg2)) !important;
}

/* card mềm hơn */
.card{
  border-radius: var(--chibi-radius) !important;
  box-shadow: var(--chibi-shadow) !important;
}

/* logo/badge nền trắng (đẹp, sạch) */
.logo{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow: 0 10px 18px rgba(2,6,23,.08) !important;
}
.logo::after{
  content:"🐼";
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:18px;
}

/* nút kiểu chibi */
.btn{
  border-radius: 999px !important;
}
.btn:not(.secondary):not(.danger){
  border:0 !important;
  background: linear-gradient(135deg, #1e88e5, #60a5fa) !important;
  box-shadow: 0 12px 18px rgba(30,136,229,.22) !important;
}
.btn.secondary{
  background:#fff !important;
  border:1px solid var(--border) !important;
}

/* ===== Fix đáp án trên mobile/desktop: không để radio “lạc chỗ” ===== */
/* Tác động rộng một chút để bắt được nhiều kiểu HTML option */
.choice, .option, .answer, .opt, .qopt, .answer-item, .pick{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px 14px !important;
  border:1px solid var(--border) !important;
  border-radius: 18px !important;
  background:#fff !important;
}

/* radio/checkbox luôn nằm “đúng hàng”, không bị absolute từ css cũ */
.choice input[type=radio],
.choice input[type=checkbox],
.option input[type=radio],
.option input[type=checkbox],
.answer input[type=radio],
.answer input[type=checkbox],
.opt input[type=radio],
.opt input[type=checkbox],
.answer-item input[type=radio],
.answer-item input[type=checkbox]{
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  accent-color: var(--primary);
}

/* nếu text option nằm trong label/div, cho nó co giãn */
.choice label, .option label, .answer label, .opt label, .answer-item label,
.choice .text, .option .text, .answer .text, .opt .text, .answer-item .text{
  flex: 1 1 auto !important;
}

/* highlight khi chọn (dùng :has – iOS/Chrome hiện nay đều ok) */
.choice:has(input:checked),
.option:has(input:checked),
.answer:has(input:checked),
.opt:has(input:checked),
.answer-item:has(input:checked),
.pick:has(input:checked){
  border-color: rgba(30,136,229,.55) !important;
  background: rgba(30,136,229,.06) !important;
  box-shadow: 0 0 0 5px rgba(30,136,229,.10) !important;
}

/* ===== Mobile: ẩn nav danh sách câu (navCard) ===== */
@media (max-width: 720px){
  #navCard{ display:none !important; }
  .grid{ grid-template-columns: 1fr !important; }
}

/* mobile: tăng cỡ chữ input tránh iOS zoom */
@media (max-width: 560px){
  input,select,textarea{ font-size:16px !important; }
}