/* ==========================================================================
   EMR CHECK 2026 — Màn hình phân tích & Trang kết quả
   Nằm trong takeover của quiz, dùng lại thư viện component sẵn có.
   ========================================================================== */

/* ==========================================================================
   MÀN HÌNH PHÂN TÍCH
   ========================================================================== */

.loading {
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  padding-block: clamp(40px, 8vw, 96px);
  text-align: center;
}

.loading__spinner { display: flex; gap: 7px; }
.loading__spinner span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand-blue);
  animation: loadPulse 1.1s var(--ease-out) infinite;
}
.loading__spinner span:nth-child(2) { animation-delay: .16s; }
.loading__spinner span:nth-child(3) { animation-delay: .32s; }
@keyframes loadPulse {
  0%, 80%, 100% { opacity: .22; transform: scale(.78); }
  40%           { opacity: 1;   transform: scale(1); }
}

.loading__title {
  font-size: var(--fs-h3);
  color: var(--ink-900);
  max-width: 26ch;
}

.loading__steps {
  display: grid;
  gap: var(--s-3);
  text-align: left;
  margin-top: var(--s-2);
}
.loading__step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-300);
  transition: color var(--t-base) var(--ease-out);
}
.loading__step.is-done { color: var(--ink-700); }

.loading__mark {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: transparent;
  transition: all var(--t-base) var(--ease-out);
}
.loading__mark svg { width: 11px; height: 11px; }
.loading__step.is-done .loading__mark {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* ==========================================================================
   TRANG KẾT QUẢ
   ========================================================================== */

.result { max-width: 780px; }
.result__head { margin-bottom: var(--s-8); }
.result__head .eyebrow { display: block; margin-bottom: var(--s-3); }
.result__title { margin-bottom: 0; }

.result__h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-5);
}

.result__section {
  padding-top: var(--s-8);
  margin-top: var(--s-8);
  border-top: 1px solid var(--line);
}

/* ---------- Điểm tổng ---------- */

.result__score {
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  text-align: center;
  padding: var(--s-8);
  background: var(--surface-soft);
  border-radius: var(--r-quiz);
}
@media (min-width: 620px) {
  .result__score {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    gap: var(--s-10);
    align-items: center;
  }
}
.result__scoreMeta { display: grid; gap: var(--s-3); justify-items: inherit; }
.result__scoreDesc { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-500); max-width: 44ch; }

/* ---------- Cảnh báo "nhiều câu không rõ" ---------- */

.result__flag {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--surface-blue);
  border-radius: var(--r-card);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-700);
}
.result__flag svg { flex: none; margin-top: 3px; color: var(--brand-blue); }
.result__flag strong { color: var(--ink-900); }

/* ---------- Áp lực địa phương ---------- */

.result__pressure {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.result__pressureHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.result__pressureName { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); }
.result__pressureMsg  { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-500); }
.result__pressureDate { margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--ink-400); }

/* ---------- Năm nhóm điểm ---------- */

.result__metrics { display: grid; gap: var(--s-5); }

/* ---------- Ba vấn đề ưu tiên ---------- */

.result__issues { display: grid; gap: var(--s-4); }

.issue {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-card);
}
.issue--low  { border-left-color: var(--score-low-bar); }
.issue--mid  { border-left-color: var(--score-mid-bar); }
.issue--good { border-left-color: var(--score-good-bar); }
.issue--high { border-left-color: var(--score-high-bar); }

.issue__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.issue__rank {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.issue__title { font-size: var(--fs-body); font-weight: 700; color: var(--ink-900); margin-right: auto; }
.issue__body { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-500); }
.issue__rec  { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-700); }
.issue__rec strong { color: var(--ink-900); }

/* ---------- Đừng vội thay phần mềm ---------- */

.result__advice p { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-500); }
.result__advice p + p { margin-top: var(--s-3); }
.result__adviceLead strong { color: var(--ink-900); }

/* ---------- CTA nhận checklist ---------- */

.result__cta p { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s-5); }
.result__ctaActions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.result__ctaNote { font-size: var(--fs-xs); color: var(--ink-400); }

/* ---------- Khối gỡ lỗi, chỉ hiện khi có ?debug ---------- */

.result__debug {
  padding: var(--s-5);
  margin-top: var(--s-8);
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.result__debug ul { margin-top: var(--s-3); display: grid; gap: 5px; font-size: var(--fs-xs); color: var(--ink-500); }

.result__disclaimer { margin-top: var(--s-8); }
.result__foot { justify-content: flex-start; }

/* ==========================================================================
   FORM LẤY THÔNG TIN
   Đặt sau khi khách đã xem xong kết quả — không che gì phía trên.
   ========================================================================== */

.lead__sub {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-500);
  margin-bottom: var(--s-6);
  max-width: 52ch;
}
.lead__sub strong { color: var(--ink-900); }

.lead__form { display: grid; gap: var(--s-5); }

.lead__grid { display: grid; gap: var(--s-5); }
@media (min-width: 560px) { .lead__grid { grid-template-columns: repeat(2, 1fr); } }

.lead__consent { margin-top: var(--s-1); }

/* Ô đồng ý bắt buộc — đóng khung nhẹ để tách khỏi ô "muốn rà soát" phía trên,
   tránh khách tưởng hai ô cùng loại rồi bỏ qua ô bắt buộc. */
.lead__consentBox {
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: var(--surface-soft);
}
.lead__consentBox.is-invalid {
  border-color: var(--danger);
  background: var(--score-low-soft);
}

.lead__consentRequired {
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-700);
}
.lead__consentRequired input { margin-top: 3px; }
.lead__consentRequired a { color: var(--brand-blue); font-weight: 600; }

.lead__consentBox .field__error { margin-top: var(--s-2); }

.lead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.lead__privacy {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-400);
  max-width: 64ch;
}

.lead__formError { margin-top: calc(var(--s-2) * -1); }

/* ---------- Màn cảm ơn ---------- */

.lead--done { outline: none; }

.lead__tick {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  background: var(--score-high-soft);
  color: var(--score-high-ink);
}
.lead__tick svg { width: 22px; height: 22px; }

.lead__quick { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

.lead__stub {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  font-style: italic;
}

/* ---------- Buổi rà soát 15 phút ---------- */

.review__list {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  counter-reset: rv;
}
.review__list li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-700);
  counter-increment: rv;
}
.review__list li::before {
  content: counter(rv);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-blue);
  color: var(--brand-blue);
  font-size: var(--fs-micro);
  font-weight: 700;
}

/* ==========================================================================
   CHIA SẺ CHO ĐỒNG NGHIỆP
   Đặt sau màn cảm ơn — lúc khách đã nhận được giá trị, lời mời chia sẻ không
   còn cạnh tranh với việc điền form.
   ========================================================================== */

.share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.share__actions .btn { gap: var(--s-2); }

/* Báo đã chép xong: đổi màu viền chứ không đổi kích thước, để nút không
   nhảy chỗ làm người dùng mất dấu con trỏ. */
.share__actions .btn.is-done {
  border-color: var(--success);
  color: var(--success);
}

.share__url {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  overflow-wrap: anywhere;
}
.share__url code {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

@media (max-width: 479px) {
  .share__actions { flex-direction: column; align-items: stretch; }
  .share__actions .btn { justify-content: center; }
}