/*
 * Bộ tự chẩn đoán.
 * Khối nằm trên nền sáng (premium-ivory) như các mục nội dung khác,
 * nên dùng bộ token premium-* chứ không phải bộ token nền tối của hero.
 */

.diagnostic [hidden] {
  display: none !important;
}

.diagnostic-panel {
  display: grid;
  gap: 26px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--premium-line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--premium-shadow-sm);
}

.diagnostic-step {
  margin: 0;
  padding: 0;
  border: 0;
}

.diagnostic-question {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 16px;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--premium-950);
}

.diagnostic-step-index {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--premium-950);
  color: var(--premium-gold-light);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.diagnostic-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.diagnostic-choice {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--premium-line);
  border-radius: 14px;
  background: var(--premium-surface);
  color: var(--premium-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
}

.diagnostic-choice strong {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
}

.diagnostic-choice span {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--premium-muted);
}

.diagnostic-choice:hover {
  border-color: var(--premium-gold);
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-sm);
}

.diagnostic-choice:focus-visible {
  outline: 3px solid var(--premium-gold);
  outline-offset: 3px;
}

/* Ô đã chọn: viền vàng đậm + nền trắng, đọc ra ngay là "đang chọn"
   chứ không phải "bị khoá". Không đảo sang nền tối vì trên nền sáng
   nền tối lại giống nút bị vô hiệu hoá. */
.diagnostic-choice.is-selected {
  border-color: var(--premium-gold);
  border-width: 2px;
  padding: 15px 17px;
  background: var(--paper);
  box-shadow: var(--premium-shadow-sm);
}

.diagnostic-choice.is-selected strong {
  color: var(--premium-950);
}

.diagnostic-choice.is-selected strong::after {
  content: " ✓";
  color: var(--gold-dark);
  font-weight: 700;
}

.diagnostic-result {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.8vw, 30px);
  border-radius: 16px;
  background: var(--premium-900);
}

.diagnostic-outcome-kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--premium-gold);
}

.diagnostic-outcome h3 {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 2.6vw, 1.42rem);
  line-height: 1.45;
  color: #fff;
}

.diagnostic-outcome p,
.diagnostic-note {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
}

.diagnostic-note {
  padding: 14px 16px;
  border-left: 3px solid var(--premium-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.06);
}

.diagnostic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button-ghost {
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.button-ghost:hover {
  border-color: var(--premium-gold);
  color: var(--premium-gold-light);
}

.diagnostic-fallback {
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px solid var(--premium-line);
  border-radius: var(--radius);
  background: var(--paper);
}

.diagnostic-fallback h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--premium-950);
}

.diagnostic-fallback ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--premium-muted);
}

.diagnostic-fallback strong {
  color: var(--premium-950);
}

@media (prefers-reduced-motion: reduce) {
  .diagnostic-choice {
    transition: none;
  }

  .diagnostic-choice:hover {
    transform: none;
  }
}