:root {
  --ks-primary: #0d6efd;
  --ks-green-1: #1e8f57;
  --ks-green-2: #0f6b3d;
  --ks-bg: #f4f6f9;
  --ks-card: #ffffff;
  --ks-border: #dee2e6;
  --ks-sel: #e7f1ff;
}
[data-bs-theme="dark"] {
  --ks-bg: #14171c;
  --ks-card: #1e2229;
  --ks-border: #343a44;
  --ks-sel: #1b2f4d;
}
html { -webkit-text-size-adjust: 100%; }
body.survey-body {
  background: var(--ks-bg);
  font-size: 1rem;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 1rem; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ks-card);
  border-bottom: 1px solid var(--ks-border);
  padding: calc(.6rem + env(safe-area-inset-top)) 0 .6rem;
}
.topbar-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.progress-wrap { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.progress { flex: 1; height: .5rem; }
.progress-text { font-size: .85rem; color: var(--bs-secondary-color); white-space: nowrap; }

.intro { margin: 1rem 0 0; color: var(--bs-secondary-color); }
.card-box {
  background: var(--ks-card);
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 1.25rem 1rem;
  margin-top: 1rem;
}
@media (min-width: 576px) { .card-box { padding: 1.5rem; } }

.sec-title {
  font-size: 1.05rem; font-weight: 700; color: var(--ks-primary);
  text-transform: uppercase; margin: 0 0 .9rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--ks-border);
}
.sec-title .bi { margin-right: .25rem; }
.sec-desc { color: var(--bs-secondary-color); font-size: .95rem; }

/* Chống iOS zoom: cỡ chữ ô nhập >= 16px */
.form-control, .form-select, .btn { font-size: 1rem; }
.form-control, .form-select { min-height: 48px; }
.form-control[readonly] { background: var(--bs-tertiary-bg); }
textarea.form-control { min-height: 96px; }

.q { margin-top: 1.1rem; }
.q:first-child { margin-top: 0; }
.q-label { font-weight: 600; margin-bottom: .5rem; }
.q-help { font-size: .875rem; color: var(--bs-secondary-color); margin: -.25rem 0 .5rem; }
.q-error, .step-error { color: var(--bs-danger); font-size: .9rem; margin-top: .4rem; }
.q-error:empty { display: none; }
.step-error { padding: .6rem .75rem; background: var(--bs-danger-bg-subtle); border-radius: .5rem; margin-top: 1rem; }
.q.has-error .form-control, .q.has-error .form-select { border-color: var(--bs-danger); }
.q.has-error .opts { outline: 1px solid var(--bs-danger); outline-offset: 2px; border-radius: .6rem; }

/* Mỗi lựa chọn là một hàng chạm lớn */
.opts { display: flex; flex-direction: column; gap: .5rem; }
.opt {
  display: flex; align-items: flex-start; gap: .75rem;
  min-height: 48px; padding: .7rem .85rem; margin: 0;
  border: 1px solid var(--ks-border); border-radius: .6rem;
  cursor: pointer; line-height: 1.4; -webkit-tap-highlight-color: transparent;
}
.opt .form-check-input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: .05rem; float: none; }
.opt:has(input:checked) { background: var(--ks-sel); border-color: var(--ks-primary); }

.rating { display: flex; gap: .5rem; }
.rate { flex: 1; position: relative; margin: 0; }
.rate input { position: absolute; opacity: 0; inset: 0; }
.rate span {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px solid var(--ks-border); border-radius: .6rem; font-weight: 600;
}
.rate input:checked + span { background: var(--ks-primary); border-color: var(--ks-primary); color: #fff; }

/* Accordion */
.accordion { --bs-accordion-btn-padding-y: 1rem; }
.accordion-button { font-weight: 600; min-height: 56px; }
.accordion-button:not(.collapsed) { background: var(--ks-sel); color: var(--bs-body-color); }
.accordion-body { padding: 1rem .75rem; }
@media (min-width: 576px) { .accordion-body { padding: 1rem; } }
.accordion-item[hidden] { display: none !important; }

/* Thanh điều hướng dưới */
.navbar-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--ks-card); border-top: 1px solid var(--ks-border);
  padding: .65rem 0 calc(.65rem + env(safe-area-inset-bottom));
}
.navbar-bottom .btn { min-height: 52px; font-weight: 600; }
.btn-send {
  color: #fff; background: linear-gradient(135deg, var(--ks-green-1), var(--ks-green-2));
  border: 0; letter-spacing: .02em;
}
.btn-send:hover, .btn-send:focus, .btn-send:active { color: #fff; filter: brightness(1.08); }
.btn-send:disabled { opacity: .7; color: #fff; }

/* Xem lại */
.rv-sec { padding: .85rem 0; border-top: 1px solid var(--ks-border); }
.rv-sec:first-child { border-top: 0; padding-top: 0; }
.rv-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; }
.rv-item { margin-top: .5rem; }
.rv-q { font-size: .875rem; color: var(--bs-secondary-color); }
.rv-a ul { margin: 0; padding-left: 1.2rem; }
.rv-empty { color: var(--bs-secondary-color); font-style: italic; }