/* ============================================================
   TEST XẾP LỚP TIẾNG ĐỨC — /test-trinh-do.html
   Dùng design tokens của home-pne.css (--red, --bg-alt, --text-2…).
   Mọi class đều có tiền tố .tst- để không đụng CSS trang khác.
   ============================================================ */

.tst-page { background: var(--bg-soft); }

/* Ẩn thanh CTA nổi đáy (.mobile-cta, component dùng chung) CHỈ ở trang test — nó che đáp án dài trên
   mobile, mà trang test đã có CTA riêng (gate SĐT + "Xem lịch khai giảng"). Scope .tst-page → KHÔNG
   ảnh hưởng trang khác (quy tắc 6: không sửa component dùng chung, chỉ override trong phạm vi trang). */
.tst-page .mobile-cta { display: none !important; }

/* banner khách vào từ link tư vấn viên (không gate) */
.tst-tvv { background: var(--green-bg); color: var(--green); border-bottom: 1px solid var(--border-s); padding: 10px 20px; font-size: 13.5px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tst-tvv i { font-size: 16px; }

.tst-wrap { max-width: 780px; margin: 0 auto; padding: 40px 20px 90px; }

.tst-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-l, 22px);
  box-shadow: var(--sh-s); padding: 38px;
}
.tst-hidden { display: none !important; }

.tst-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 99px; background: var(--red-light); color: var(--red);
}
.tst-wrap h1 { font-size: 31px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 16px 0 12px; }
.tst-h2 { font-size: 16px; font-weight: 700; margin: 26px 0 12px; }
.tst-lead { color: var(--text-2); font-size: 15px; }

/* ── nút ─────────────────────────────────────── */
.tst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border: none; border-radius: 99px;
  font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: .18s;
}
.tst-btn-full { width: 100%; margin-top: 10px; }
.tst-btn-red { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.tst-btn-red:hover { background: var(--red-deep); transform: translateY(-1px); }
/* (5b) chưa chọn đáp án → THẬT SỰ mờ + không bấm được; đã chọn → nút đỏ sáng rõ (.tst-btn-red). */
.tst-btn-red:disabled { background: var(--border-s); color: var(--text-3); box-shadow: none; cursor: not-allowed; transform: none; opacity: .6; }
.tst-btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border-s); }
.tst-btn-ghost:hover { background: var(--bg-alt); }

/* ── giới thiệu ──────────────────────────────── */
.tst-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 20px; }
.tst-fact { background: var(--bg-alt); border-radius: var(--r-m, 14px); padding: 16px 18px; }
.tst-fact b { display: block; font-size: 19px; font-weight: 800; }
.tst-fact span { font-size: 12.5px; color: var(--text-2); }

.tst-luuy {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--amber-bg); border-radius: var(--r-m, 14px);
  padding: 14px 16px; font-size: 13.5px; color: #7C6500; line-height: 1.6;
}
.tst-luuy i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
/* H6(2): câu hỏi kinh nghiệm (bắt buộc chọn trước khi bắt đầu). */
.tst-kn { margin: 18px 0 6px; }
.tst-kn-q { font-weight: 700; font-size: 15px; margin-bottom: 9px; }
.tst-kn-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tst-kn-opt { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-s); border-radius: 10px; padding: 9px 13px; cursor: pointer; font-size: 14px; transition: .15s; }
.tst-kn-opt:has(input:checked) { border-color: var(--red); background: #FFF5F5; font-weight: 600; }
.tst-kn-opt input { accent-color: var(--red); }

.tst-hint { font-size: 12.5px; color: var(--text-3); margin-top: 10px; }

/* ── làm bài ─────────────────────────────────── */
.tst-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.tst-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.tst-timer.low { color: var(--red); }

.tst-progress { height: 6px; background: var(--border-s); border-radius: 99px; overflow: hidden; margin-bottom: 26px; }
.tst-progress i { display: block; height: 100%; width: 4%; background: var(--red); border-radius: 99px; transition: width .35s cubic-bezier(.4,0,.2,1); }

.tst-pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px; margin-bottom: 14px;
  /* H6(5): brand — grammar = xám trung tính (KHÔNG xanh dương). */
  background: var(--bg-alt); color: var(--text-2);
}
.tst-pill.sk-vocab { background: var(--amber-bg); color: var(--gold); }
.tst-pill.sk-reading { background: var(--red-light); color: var(--red); }        /* KHÔNG xanh lá */
.tst-pill.sk-listening { background: var(--red-light); color: var(--red-deep); }

.tst-passage {
  background: var(--bg-alt); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0;
  padding: 16px 18px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.75; white-space: pre-line; color: #333;
}
.tst-qtext { font-size: 19px; font-weight: 600; line-height: 1.45; margin-bottom: 20px; }
.tst-foot { display: flex; justify-content: flex-end; margin-top: 26px; }

/* nghe */
.tst-audiobox {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-alt); border: 1px solid var(--border-s); border-radius: var(--r-m, 14px);
  padding: 16px 18px; margin-bottom: 20px;
}
.tst-play {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: none;
  background: var(--red); color: #fff; display: grid; place-items: center;
  font-size: 15px; cursor: pointer; box-shadow: var(--sh-red); transition: .16s;
}
.tst-play:hover { background: var(--red-deep); }
.tst-play:disabled { background: var(--border-s); color: var(--text-3); box-shadow: none; cursor: not-allowed; }
.tst-audio-meta { flex: 1; min-width: 0; }
.tst-audio-meta b { display: block; font-size: 14px; font-weight: 600; }
.tst-audio-meta span { font-size: 12.5px; color: var(--text-2); }
/* H6(3b): thanh tiến trình audio + thời lượng. */
.tst-audio-bar { height: 5px; background: var(--border-s); border-radius: 99px; overflow: hidden; margin: 7px 0 3px; }
.tst-audio-bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s linear; }
.tst-audio-time { font-variant-numeric: tabular-nums; }
/* (5a) nhắc rõ phải nghe trước khi trả lời — màu vàng "chú ý" */
.tst-audio-note { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #7C6500; margin: 10px 0 18px; }

/* ── ① trắc nghiệm ───────────────────────────── */
.tst-opts { display: flex; flex-direction: column; gap: 10px; }
.tst-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 18px; border: 1.5px solid var(--border-s); border-radius: var(--r-m, 14px);
  background: #fff; font-family: inherit; font-size: 15.5px; cursor: pointer; transition: .14s;
}
.tst-opt:hover { border-color: var(--red-border); background: var(--red-light); }
.tst-opt.sel { border-color: var(--red); background: var(--red-light); font-weight: 600; }
.tst-opt-k {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; background: var(--bg-alt);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-2);
}
.tst-opt.sel .tst-opt-k { background: var(--red); color: #fff; }

/* ── ② điền từ ───────────────────────────────── */
.tst-gap {
  width: 100%; padding: 15px 18px; border: 1.5px solid var(--border-s); border-radius: var(--r-m, 14px);
  font-family: inherit; font-size: 17px; background: #fff; transition: .15s;
}
.tst-gap:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-light); }
.tst-gap-hint { font-size: 13px; color: var(--text-2); margin-top: 9px; }
.tst-gap-hint b { color: var(--text); font-weight: 600; }

/* ── ③ sắp xếp câu ───────────────────────────── */
.tst-build {
  min-height: 58px; border: 1.5px dashed var(--border-s); border-radius: var(--r-m, 14px);
  background: var(--bg-soft); padding: 11px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
}
.tst-build:empty::before { content: 'Bấm vào các từ bên dưới để xếp câu'; color: var(--text-3); font-size: 14px; padding: 6px 4px; }
.tst-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tst-chip {
  padding: 10px 15px; border: 1.5px solid var(--border-s); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 15.5px; cursor: pointer; transition: .12s;
}
.tst-chip:hover { border-color: var(--red); background: var(--red-light); }
.tst-build .tst-chip { background: var(--red); color: #fff; border-color: var(--red); }

/* ── ④ ghép cặp ──────────────────────────────── */
.tst-match { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.tst-match:last-child { border-bottom: none; }
.tst-match-de { flex: 1; font-size: 15.5px; font-weight: 600; }
.tst-match select {
  flex: 1; padding: 11px 13px; border: 1.5px solid var(--border-s); border-radius: 8px;
  /* #127 (patch #115): 16px để iOS Safari KHÔNG tự zoom khi focus select câu ghép cặp.
     .tst-match select (specificity 0,1,1) đè lưới an toàn input,select,textarea{16px} (0,0,1) nên phải sửa tại đây. */
  font-family: inherit; font-size: 16px; background: #fff;
}
.tst-match select:focus { outline: none; border-color: var(--red); }

/* ── kết quả ─────────────────────────────────── */
.tst-top-actions { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.tst-relam { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); text-decoration: none; padding: 5px 10px; border: 1px solid var(--border-s); border-radius: 99px; }
.tst-relam:hover { border-color: var(--red-border); color: var(--red); }

.tst-hero { text-align: center; padding: 8px 0 26px; border-bottom: 1px solid var(--border); }
.tst-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: var(--red-light); color: var(--red); border-radius: 99px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; }
.tst-lvl { font-size: 64px; font-weight: 800; letter-spacing: -.04em; color: var(--red); line-height: 1; }
.tst-lvl-label { font-size: 17px; font-weight: 600; margin-top: 6px; }
/* H9(3): dòng kết luận "Trình độ … · Lớp nên vào …" — nổi bật, viền nhẹ, ngay dưới cấp độ. */
.tst-lvl-ket { display: inline-block; margin-top: 10px; padding: 7px 14px; border-radius: 99px;
  background: var(--red-light); color: var(--text); font-size: 14px; font-weight: 600; }
.tst-lvl-ket b { color: var(--red); }
.tst-lvl-sum { color: var(--text-2); font-size: 14px; max-width: 560px; margin: 12px auto 0; line-height: 1.6; }
.tst-lvl-sum b { color: var(--text); }

/* gợi ý kỹ năng yếu nhất */
.tst-weak { margin-top: 14px; background: var(--amber-bg); border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; padding: 10px 13px; font-size: 13px; color: #7C6500; line-height: 1.55; }
.tst-weak i { color: var(--amber); }
.tst-weak b { color: #5F4800; }

/* khoá học phù hợp (miễn phí) */
.tst-crs-sec { margin-top: 26px; }
.tst-crs-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.tst-free { display: inline-flex; align-items: center; gap: 4px; background: var(--green-bg); color: var(--green); border-radius: 99px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.tst-crs-s { font-size: 13px; color: var(--text-2); margin-bottom: 13px; }
/* H6(1): nhãn nhóm lớp (Lớp thường / Lớp cấp tốc) — dùng token chữ sẵn có, không màu mới. */
.tst-crs-grp { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 16px 0 8px; }
.tst-crs-grp:first-child { margin-top: 2px; }
.tst-crs-grp em { font-weight: 400; font-style: normal; color: var(--text-3); }
.tst-crs { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--border-s); border-radius: 10px; padding: 12px 13px; margin-bottom: 9px; text-decoration: none; color: inherit; transition: .15s; }
.tst-crs:hover { border-color: var(--red-border); background: #FFFCFC; }
.tst-crs.main { border-color: var(--red-border); background: #FFFAFA; }
.tst-crs-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: var(--red-light); color: var(--red); display: grid; place-items: center; font-size: 17px; }
.tst-crs-tx { min-width: 0; }
.tst-crs-tx b { display: block; font-size: 14px; }
.tst-crs-tx span { display: block; font-size: 12.5px; color: var(--text-2); }
.tst-crs-go { margin-left: auto; color: var(--red); font-size: 17px; flex: none; }
/* H11(2): nhãn GỢI Ý, không phải dịch vụ Đức → bỏ vàng #FFCC00 (brand chỉ cho badge DEUTSCH).
   Huy hiệu nhỏ ôm sát chữ (fit-content) — không kéo dài thành thanh ngang. */
.tst-pin { display: inline-flex; width: fit-content; align-items: center; gap: 4px; background: var(--red-light); color: var(--red-deep); border-radius: 99px; padding: 1px 8px; font-size: 10px; font-weight: 800; margin-left: 6px; vertical-align: middle; }

.tst-bar-row { margin-bottom: 16px; }
.tst-bar-top { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.tst-bar-top em { font-style: normal; color: var(--text-2); font-weight: 500; }
.tst-bar-line { height: 8px; background: var(--border-s); border-radius: 99px; overflow: hidden; }
.tst-bar-line i { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.4,0,.2,1); }
.tst-note {
  background: var(--bg-alt); border-radius: var(--r-m, 14px); padding: 16px 18px;
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}

/* gate: chỉ đáp án + tư vấn */
.tst-gate { background: var(--bg-alt); border: 1px solid var(--border-s); border-radius: var(--r-m, 14px); padding: 22px; margin-top: 26px; }
.tst-gate-h { font-size: 16px; font-weight: 800; margin-bottom: 3px; }
.tst-gate-s { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.tst-give { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 13.5px; }
.tst-give i { color: var(--red); font-size: 17px; flex: none; margin-top: 2px; }
.tst-give b { font-weight: 600; }
.tst-give span { display: block; color: var(--text-2); font-size: 12.5px; }
.tst-fine { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 10px; line-height: 1.5; }
.tst-consent { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 6px 0 12px; }
.tst-consent a { color: var(--text-2); text-decoration: underline; }
/* nút (không phải link) nhưng nhìn như link — reset viền/nền mặc định của button để giữ nguyên giao diện */
.tst-skip { display: block; width: 100%; background: none; border: 0; font-family: inherit; text-align: center; font-size: 13px; color: var(--text-2); margin-top: 12px; text-decoration: underline; cursor: pointer; }
.tst-skip:hover { color: var(--text); }

.tst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.tst-field { margin-bottom: 14px; }
.tst-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tst-field label em { font-style: italic; font-weight: 400; color: var(--text-3); }
.tst-field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-s); border-radius: 8px;
  font-family: inherit; font-size: 16px; background: #fff;   /* #115: 15→16, iOS không zoom */
  transition: border-color .15s, box-shadow .15s;   /* #131: bỏ transition:all (giật khi focus/cuộn) */
}
.tst-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-light); }

/* 2 dòng "bịt" khi mở đáp án */
.tst-rnote { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--border-s); }

.tst-review { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 20px; }
.tst-review .tst-h2 { display: flex; align-items: center; gap: 8px; }
.tst-rev { padding: 14px 0; border-bottom: 1px solid var(--border); }
.tst-rev-q { font-size: 14.5px; font-weight: 600; display: flex; gap: 9px; align-items: flex-start; }
.tst-mark { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; margin-top: 2px; }
.tst-mark.ok { background: var(--green); }
.tst-mark.no { background: var(--red); }
.tst-rev-a { font-size: 13.5px; color: var(--text-2); margin-top: 6px; padding-left: 29px; }
.tst-rev-a b { color: var(--green); font-weight: 600; }
.tst-rev-a s { color: var(--red); }
.tst-rev-why { font-size: 13px; color: var(--text-3); margin-top: 3px; padding-left: 29px; font-style: italic; }

.tst-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.tst-disc { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 640px) {
  .tst-wrap { padding: 20px 14px 60px; }
  .tst-card { padding: 24px 20px; border-radius: 14px; }
  .tst-wrap h1 { font-size: 25px; }
  /* #132A: GIỮ 3 cột (không ép 1fr — trước đây xếp DỌC làm thẻ to, trống). Thu nhỏ như mockup:
     gap 8, padding vừa, số 17px, nhãn 11px, căn giữa; bớt margin trên/dưới cho đặc. */
  .tst-facts { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 16px; }
  .tst-fact { padding: 14px 8px; text-align: center; }
  .tst-fact b { font-size: 17px; }
  .tst-fact span { font-size: 11px; line-height: 1.3; }
  .tst-grid { grid-template-columns: 1fr; }
  .tst-match { flex-direction: column; align-items: stretch; gap: 7px; }
  .tst-lvl { font-size: 52px; }
}