/* Trang Đề kiểm tra /de-kiem-tra theo thiết kế "Bàn làm việc" (ADR-0045, Đợt A Task 7; design-handoff/.../TinhNangDe.dc.html). Trang do máy chủ dựng
   (backend/app/public_pages.py exam_page), mang nhãn Sắp ra mắt: hero có chồng giấy minh họa, ba bước, năm phần của bộ hồ sơ, hỏi đáp. Nhãn, nút, hỏi đáp ở public-ui.css. */

.d-exam-page { box-sizing: border-box; display: flex; flex-direction: column; gap: 60px; max-width: 1232px; margin: 0 auto; padding: 24px 16px 72px; color: var(--d-ink); font-family: var(--d-font-sans); }
.d-exam-page h1, .d-exam-page h2 { letter-spacing: 0; }  /* styles.css kéo sát chữ của mọi tiêu đề */
.d-exam-title { margin: 0; text-align: center; color: var(--d-ink); font: 700 calc(clamp(28px, 3vw, 36px) * var(--d-text-scale)) / 1.2 var(--d-font-display); }

/* ---- Hero: chữ bên trái, chồng năm tờ giấy bên phải (trang trí; overflow: clip giữ các tờ xoay trong hero mà không cắt vòng focus) ---- */
.d-exam-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 44px; overflow: clip; overflow-clip-margin: 12px; }
.d-exam-hero__copy { display: flex; flex: 1 1 500px; flex-direction: column; gap: 18px; min-width: 0; }
.d-exam-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.d-exam-hero h1 { margin: 0; color: var(--d-ink); overflow-wrap: break-word; font: 700 calc(clamp(32px, 4vw, 52px) * var(--d-text-scale)) / 1.12 var(--d-font-display); }
.d-exam-hero__lead { max-width: 60ch; margin: 0; color: var(--d-ink-soft); font: 400 var(--d-fs-body-l) / 1.55 var(--d-font-sans); }
.d-exam-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.d-exam-hero__main { box-shadow: var(--d-shadow-press); }
.d-exam-hero__art { position: relative; flex: 1 1 380px; max-width: 470px; height: 300px; margin-inline: auto; }
.d-exam-paper { position: absolute; top: 20px; box-sizing: border-box; display: flex; justify-content: center; width: 150px; height: 200px; padding: 16px 8px 0; border: 2px solid var(--d-tile-sky-ink);
  border-radius: 14px; color: var(--d-ink); text-align: center; font: 700 calc(15px * var(--d-text-scale)) / 1.3 var(--d-font-sans); }
.d-exam-paper:nth-child(1) { left: 0; transform: rotate(-8deg); }
.d-exam-paper:nth-child(2) { left: 13%; top: 46px; transform: rotate(-3deg); }
.d-exam-paper:nth-child(3) { left: 26%; transform: rotate(2deg); }
.d-exam-paper:nth-child(4) { left: 39%; top: 46px; transform: rotate(6deg); }
.d-exam-paper:nth-child(5) { left: 52%; transform: rotate(10deg); }
.d-exam-paper--sky { background: #DCE9F7; }
.d-exam-paper--violet { background: #E7E3F7; }
.d-exam-paper--paper { background: var(--d-surface); }
.d-exam-paper--mint { background: #DFF1EA; }
.d-exam-paper--sun { background: var(--d-sun-tint); }

/* ---- Ba bước (StepIndicator): danh sách có thứ tự, số trong vòng tròn ---- */
.d-exam-steps { display: flex; flex-direction: column; gap: 20px; }
.d-exam-steps__list { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.d-exam-step { display: flex; flex: 1 1 260px; align-items: flex-start; gap: 16px; min-width: 0; padding: 22px; border: 2px solid var(--d-line); border-radius: var(--d-radius-xl); background: var(--d-surface); }
.d-exam-step__num { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font: 700 calc(24px * var(--d-text-scale)) / 1 var(--d-font-display); }
.d-exam-step:nth-child(1) .d-exam-step__num { background: #DCE9F7; color: var(--d-ink); }
.d-exam-step:nth-child(2) .d-exam-step__num { background: var(--d-sun-tint); color: var(--d-sun-text); }
.d-exam-step:nth-child(3) .d-exam-step__num { background: #DFF1EA; color: var(--d-brand-deep); }
.d-exam-step__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d-exam-step__title { font: 700 var(--d-fs-title-s) / 1.25 var(--d-font-display); }
.d-exam-step__note { color: var(--d-ink-soft); font: 400 var(--d-fs-caption) / 1.45 var(--d-font-sans); }

/* ---- Năm phần của bộ hồ sơ ---- */
.d-exam-kit { display: flex; flex-direction: column; gap: 20px; }
.d-exam-kit__list { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.d-exam-kit__item { display: flex; flex: 1 1 200px; flex-direction: column; gap: 6px; min-width: 0; padding: 18px; border-radius: 20px; }
.d-exam-kit__item svg { width: 30px; height: 30px; fill: none; stroke: var(--d-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-exam-kit__name { font: 700 var(--d-fs-label) / 1.3 var(--d-font-sans); }
.d-exam-kit__item--sky { background: #DCE9F7; }
.d-exam-kit__item--violet { background: #E7E3F7; }
.d-exam-kit__item--paper { border: 2px solid var(--d-line); background: var(--d-surface); }
.d-exam-kit__item--mint { background: #DFF1EA; }
.d-exam-kit__item--sun { background: var(--d-sun-tint); }

@media (max-width: 760px) {
  .d-exam-page { gap: 44px; padding-top: 12px; }
  .d-exam-hero { gap: 28px; }
  .d-exam-hero__actions > .d-btn { flex: 1 1 100%; }
  .d-exam-hero__art { flex-basis: 100%; height: 250px; }
  .d-exam-paper { width: 120px; height: 160px; }
}
@media (forced-colors: active) {
  .d-exam-kit__item, .d-exam-step { border: 2px solid CanvasText; }
}