/* ============================================================
   THỬ NGHIỆM BỐ CỤC — trang tự khai bệnh (desktop)
   Lớp override nạp SAU patients-self-report.css.
   Gỡ toàn bộ thử nghiệm: xóa <link layout-experiment.css> trong index.html
   Phạm vi: chỉ trình bày/bố cục — không đổi nội dung, không đổi luồng câu hỏi.
   ============================================================ */

/* ---------- 1. Bố cục đáp án THÍCH ỨNG — lấp kín chiều rộng, giữ trật tự đọc (P0.2) ----------
   - Mặc định (đáp án dài): lưới tự dàn 2–3 cột tùy màn hình, mỗi ô tối thiểu 520px.
   - Nhóm đáp án ngắn (layout-experiment.js gắn data-sr-layout="row"): một hàng ngang
     chia đều — thang mức độ nhẹ→nặng đọc trái→phải trên MỘT dòng, không zích zắc. */
.vgp-self-report__options,
.vgp-self-report__panel[data-sr-panel="2"] .vgp-self-report__options {
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 12px;
}

.vgp-self-report__options[data-sr-layout="row"] {
  display: flex;
  flex-wrap: wrap;
}

.vgp-self-report__options[data-sr-layout="row"] .vgp-self-report__option {
  flex: 1 1 0;
  min-width: 220px; /* màn hình hẹp thì tự xuống dòng, không ép chữ */
}

/* ---------- 2. Cỡ chữ + vùng chạm cho mắt và tay người lớn tuổi (P0.3) ---------- */
.vgp-self-report__question-text,
.vgp-self-report__panel[data-sr-panel="2"] .vgp-self-report__question-text {
  font-size: 18px;
  line-height: 1.45;
}

.vgp-self-report__option {
  min-height: 56px;
  padding: 13px 16px;
  font-size: 16.5px;
  line-height: 1.35;
  border-radius: 12px;
  /* viền đậm rõ để từng đáp án là một khối tách bạch
     (#7292b0 trên nền trắng ~3.2:1 — đạt chuẩn WCAG 1.4.11 cho viền thành phần) */
  border: 2px solid #7292b0;
  background: #fbfdff;
}

/* Rê chuột/focus CHỈ đổi viền — nền xanh + dấu ✓ dành riêng cho trạng thái ĐÃ CHỌN,
   tránh người bệnh tưởng nhầm mình đã trả lời */
.vgp-self-report__option:hover {
  border-color: #2f80ed;
  background: #fbfdff;
}

.vgp-self-report__option input {
  width: 24px;
  height: 24px;
}

/* Điều hướng bằng bàn phím / focus rõ ràng */
.vgp-self-report__option:focus-within {
  outline: 3px solid rgba(47, 128, 237, .45);
  outline-offset: 1px;
}

/* Tab con cao và dễ bấm hơn */
.vgp-self-report__layer-tab {
  min-height: 44px;
  padding: 9px 16px;
  font-size: 15px;
}

/* Ghi chú dưới câu hỏi to hơn một chút */
.vgp-self-report__hint {
  font-size: 14px;
}

/* ---------- 3. Trạng thái ĐÃ CHỌN nổi bật: viền đậm + nền rõ + dấu ✓ lớn (P1.2) ---------- */
.vgp-self-report__option.is-checked {
  background: #dcebff;
  box-shadow: inset 0 0 0 2px var(--sr-primary);
}

.vgp-self-report__option.is-checked::after {
  content: "✓";
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sr-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

/* ---------- 4. Nút "Tiếp tục" đúng vai trò hành động chính (P1.3) ---------- */
/* Nền --sr-primary-deep: tương phản với chữ trắng 8.7:1 (đạt WCAG AAA) */
.vgp-self-report__audio-continue {
  height: 52px;
  min-width: 180px;
  padding: 0 26px;
  border-color: var(--sr-primary-deep);
  background: var(--sr-primary-deep);
  border-radius: 12px;
  font-size: 17px;
}

.vgp-self-report__audio-continue:not(:disabled):hover {
  background: #0c3f6b;
  border-color: #0c3f6b;
}

/* Nút phụ "Nghe lại" cùng chiều cao nhưng vẫn là vai phụ (nền trắng) */
.vgp-self-report__audio-replay {
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
}

/* Footer chia hai cụm dứt khoát: điều khiển âm thanh (thanh trượt + tua + Nghe lại)
   gom về trái, hành động chính "Tiếp tục" neo hẳn bên phải */
.vgp-self-report__audio-strip {
  justify-content: flex-start;
  gap: 12px;
}

.vgp-self-report__audio-continue {
  margin-left: auto;
}

/* ---------- 5. Chia khối thị giác: mỗi câu hỏi một thẻ (P1.1 — không đổi luồng) ---------- */
/* Nền panel sẫm hơn một tông (#f8fcff → #e9f1f8) để thẻ trắng nổi hẳn lên */
.vgp-self-report {
  --sr-panel: #e9f1f8;
}

.vgp-self-report__question {
  margin: 0 16px 22px calc(var(--sr-depth, 0) * 14px);
  padding: 16px 18px;
  /* viền mạnh + bóng nhẹ để thẻ câu hỏi tách hẳn khỏi nền */
  border: 1px solid var(--sr-border-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 40, 72, .10);
}

/* Vạch phân vùng trong thẻ: phần câu hỏi tách khỏi phần đáp án */
.vgp-self-report__question-head {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #dde8f2;
}

/* ---------- 6. Phân cấp thị giác: tiêu đề mục khác hẳn câu hỏi (P2.1) ---------- */
.vgp-self-report__section-title,
.vgp-self-report__group {
  font-size: 13.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sr-primary-deep);
  border-left: 4px solid var(--sr-primary);
  padding-left: 10px;
  margin: 18px 0 10px;
}

.vgp-self-report__group {
  padding-left: calc(var(--sr-depth, 0) * 14px + 10px);
}

/* Cột "Ghi nhận" nhường chỗ cho vùng thao tác chính ở bước 2/3 */
.vgp-self-report__modal-body[data-active-tab="2"],
.vgp-self-report__modal-body[data-active-tab="3"] {
  grid-template-columns: 2.2fr 1fr;
}

/* ---------- 7. Bỏ tiêu đề thừa + tab con cho nhóm gốc (layout-experiment.js) ---------- */
.sr-exp-hidden,
.sr-exp-tab-hidden {
  display: none !important;
}

/* Thanh layer-tab gốc của sản phẩm bị khóa theo điều kiện → luôn hiển thị
   (layout-experiment.js gắn sr-exp-show; từng nút vẫn ẩn/hiện theo dẫn luồng) */
.vgp-self-report__layer-tabs.sr-exp-show {
  display: inline-flex !important;
}