/* ============================================================
   QUIZ — Test 60 giây. Một câu hỏi một màn hình, mobile-first.
   ============================================================ */

.quiz-body { background: var(--white); min-height: 100dvh; display: flex; flex-direction: column; }

/* --- Thanh đầu: quay lại + tiến độ --- */
.quiz-top {
  position: sticky; top: 0; z-index: 20; background: var(--white);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line-2);
}
.quiz-top__row { display: flex; align-items: center; gap: var(--s-4);
                 max-width: 560px; margin-inline: auto; }
.quiz-back {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 20px; color: var(--ink-2);
  flex: 0 0 auto;
}
.quiz-back:hover { background: var(--cream); }
.quiz-back[hidden] { visibility: hidden; display: grid !important; }

.quiz-logo { display: flex; align-items: center; gap: var(--s-2);
             font-weight: 900; color: var(--ink); margin-inline: auto; }
.quiz-logo .logo__mark { width: 28px; height: 28px; font-size: 14px; border-radius: var(--r-sm); }

.quiz-count { font-size: var(--fs-xs); color: var(--ink-4); font-weight: 700; flex: 0 0 auto; }

.bar { height: 6px; border-radius: var(--r-pill); background: var(--line);
       max-width: 560px; margin: var(--s-3) auto 0; overflow: hidden; }
.bar__fill { height: 100%; width: 0; border-radius: var(--r-pill);
             background: var(--lime); transition: width var(--t) var(--ease); }

/* --- Thân --- */
.quiz-main { flex: 1; display: flex; flex-direction: column;
             padding: var(--s-8) var(--s-5) var(--s-10);
             max-width: 560px; width: 100%; margin-inline: auto; }

.quiz-q { text-align: center; margin-bottom: var(--s-8); }
.quiz-q h1 { font-size: clamp(22px, 5vw, 30px); }
.quiz-q .hint { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--fs-sm); }

/* --- Đáp án dạng danh sách --- */
.opts { display: grid; gap: var(--s-3); }

.opt {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left;
  min-height: 68px; padding: var(--s-4) var(--s-5);
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.opt:hover { border-color: var(--lime-deep); background: var(--lime-wash); }
.opt:active { transform: scale(.99); }
.opt[aria-pressed="true"] { border-color: var(--lime-deep); background: var(--lime-wash); }

.opt__icon { flex: 0 0 44px; height: 44px; border-radius: var(--r-md);
             background: var(--cream); display: grid; place-items: center; font-size: 20px; }
.opt[aria-pressed="true"] .opt__icon { background: var(--lime); }
.opt__text { flex: 1; }
.opt__label { display: block; font-weight: 700; color: var(--ink); }
.opt__desc  { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.opt__chev  { color: var(--ink-4); font-size: 18px; }

.opt__check {
  flex: 0 0 24px; height: 24px; border-radius: var(--r-pill);
  border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 13px; color: transparent;
}
/* Ô tick khi chọn: nền lime SÁNG, dấu tick màu than (14.55:1).
   Không dùng chữ trắng — trên lime là tàng hình. */
.opt[aria-pressed="true"] .opt__check {
  background: var(--lime); border-color: var(--lime-deep); color: var(--ink);
}

.opt__badge { font-size: var(--fs-xs); font-weight: 800; color: var(--ink);
              background: var(--lime); border-radius: var(--r-pill); padding: 2px var(--s-3); }

/* --- Đáp án dạng thẻ ảnh (màn cổng: giới tính, tuổi) --- */
.opts--cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); }
@media (min-width: 700px) { .opts--cards { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.opts--cards.is-two { grid-template-columns: repeat(2, minmax(0,1fr)); }

.opt-card {
  border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--white); transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.opt-card:hover { border-color: var(--lime-deep); transform: translateY(-2px); }
.opt-card__foot {
  height: 44px; display: grid; place-items: center;
  background: var(--lime); color: var(--ink); font-weight: 800; font-size: var(--fs-sm);
}

/* --- Màn vỗ về: không hỏi gì, chỉ động viên rồi đi tiếp --- */
.quiz-cheer { margin-top: var(--s-10); }
.quiz-cheer__ico {
  width: 88px; height: 88px; margin: 0 auto var(--s-6);
  border-radius: var(--r-pill); background: var(--lime-wash);
  display: grid; place-items: center; font-size: 40px; line-height: 1;
  border: 2px solid var(--lime);
}
.quiz-cheer__body {
  margin: var(--s-5) auto 0; max-width: 34em;
  color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body);
}

/* --- Chân: nút tiếp tục (câu nhiều lựa chọn + màn vỗ về) --- */
.quiz-foot { margin-top: var(--s-8); }

/* --- Đồng ý điều khoản --- */
.consent {
  margin-top: auto; padding-top: var(--s-10);
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5;
}
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--lime); }
.consent a { color: var(--ink-2); text-decoration: underline; }
.consent-err { color: var(--danger); font-size: var(--fs-xs); margin-top: var(--s-2); text-align: center; }
.consent-err[hidden] { display: none; }

/* --- Màn kết quả --- */
.result { text-align: center; }
.result__ring {
  width: 132px; height: 132px; margin: 0 auto var(--s-6);
  border-radius: var(--r-pill); display: grid; place-items: center;
  background: conic-gradient(var(--lime) var(--p, 0%), var(--line) 0);
  position: relative;
}
.result__ring::after {
  content: ""; position: absolute; inset: 10px; background: var(--white); border-radius: inherit;
}
.result__ring b { position: relative; z-index: 1; font-size: 26px; font-weight: 900; color: var(--ink); }

.result__grid { display: grid; gap: var(--s-3); margin: var(--s-8) 0; text-align: left; }
.result__row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md);
}
.result__row span { color: var(--ink-3); font-size: var(--fs-sm); }
.result__row b { color: var(--ink); }

.result__days { display: grid; gap: var(--s-2); margin-bottom: var(--s-8); text-align: left; }
.result__day {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--cream);
}
.result__day b { flex: 0 0 52px; font-size: var(--fs-xs); color: var(--ink-3); }
.result__day span { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }

/* ============================================================
   BÙ TRỪ CHO KHỐI <style> NỘI TUYẾN TRONG quiz.html
   (các màn nhập số / BMI / ngày dự kiến / thanh chờ)

   Khối đó viết khi bảng màu còn là HỒNG, lúc ấy --lime-deep là
   màu TỐI nên "nền lime-deep + chữ trắng" và "chữ lime-deep trên
   nền trắng" đều đọc được. Nay --lime-deep là #C2E724 — màu RẤT
   SÁNG (1.42:1 trên trắng) — nên cả hai kiểu đó thành chữ tàng hình.

   quiz.html đang có agent khác sửa nên KHÔNG đụng vào. Sửa từ đây,
   dùng bộ chọn đặc hiệu hơn (thêm body.quiz-body) để thắng khối
   <style> nội tuyến vốn nạp sau file này.
   Khi quiz.html được dọn lại theo trục lime, xoá khối này đi.
   ============================================================ */

/* Nút đơn vị đang chọn: nền lime sáng + chữ than (14.55:1) */
body.quiz-body .m-unit.is-on { background: var(--lime); color: var(--ink); }

/* Các con số / liên kết nhấn: --ink thay cho lime (lime trên nền
   sáng chỉ 1.17–1.42:1) */
body.quiz-body .m-skip:hover { color: var(--ink); }
body.quiz-body .o-date       { color: var(--ink); }
body.quiz-body .g-num        { color: var(--ink); }

/* Ảnh thật trong thẻ lựa chọn — khung 4:5 giống ô giữ chỗ cũ */
.opt-card__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; display: block; }

/* Ảnh thật thay biểu tượng trong lựa chọn dạng danh sách */
.opt__img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
            flex: 0 0 auto; display: block; }