/* Khảo sát "Bếp Việt lên món mới" – Dh Foods
   Bố cục: một cột cho điện thoại (tối đa 560px), header xanh thương hiệu cố định trên,
   thanh nút Quay lại / Tiếp tục cố định dưới. Một giao diện sáng duy nhất theo nhận diện. */
:root {
  /* Màu thương hiệu (Brand guideline Ver8, mục 2.1–2.2) */
  --brand: #003E2D;        /* Xanh Dh Foods */
  --brand-2: #005B41;
  --leaf: #467D58;
  --lime: #A3CF62;
  --mist: #CBDDD1;
  --cream: #FEFCE8;
  --beige: #FCD7A3;
  --white: #FFFFFF;
  /* Màu chữ & trạng thái – đều lấy từ bảng màu guideline */
  --ink: #003E2D;
  --muted: #467D58;
  --line: #CBDDD1;
  --select-bg: #CBDDD1;
  --warn: #B32F30;
  --warn-bg: #FCD7A3;

  --font: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: 1.0625rem;    /* 17px */
  --fs-q: 1.1875rem;       /* 19px – câu hỏi */
  --fs-h1: 1.75rem;
  --fs-small: .9375rem;
  --radius: 16px;
  --maxw: 560px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.55;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--brand);
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--brand); color: var(--white);
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.topbar__logo { width: 44px; height: auto; flex: none; }
.topbar__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.topbar__name { font-weight: 800; font-size: 1rem; }
.topbar__step { font-size: .8125rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { height: 6px; background: rgba(255,255,255,.16); }
.progress__fill { height: 100%; width: 0; background: var(--lime); transition: width .35s ease; border-radius: 0 3px 3px 0; }

/* ---------- Màn hình ---------- */
.screen {
  max-width: var(--maxw); margin: 0 auto;
  padding-block: 18px 120px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 18px;
  outline: none;
}
.draft-note {
  font-size: .8125rem; color: var(--muted); background: var(--white);
  border: 1px dashed var(--mist); border-radius: 10px; padding: 8px 12px;
}

.scene { display: flex; flex-direction: column; gap: 12px; }
.scene__img {
  border-radius: var(--radius); overflow: hidden; background: var(--beige);
  aspect-ratio: 4 / 3; max-width: 100%;
  box-shadow: 0 1px 0 rgba(0,62,45,.06), 0 8px 24px -14px rgba(0,62,45,.35);
}
.scene__img img { width: 100%; height: 100%; object-fit: cover; }
.scene__label {
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf);
}
.scene__title { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.3; color: var(--brand); text-wrap: balance; }
.story {
  margin: 0; font-style: italic; color: var(--ink);
  background: var(--white); border-radius: 12px; padding: 12px 14px;
  border-left: 4px solid var(--beige);
}

/* ---------- Màn chào ---------- */
.welcome { display: flex; flex-direction: column; gap: 16px; }
.welcome__eyebrow { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); margin: 0; }
.welcome h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.2; font-weight: 800; color: var(--brand); text-wrap: balance; }
.welcome p { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column;
}
.fact b { font-size: 1.375rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.fact span { font-size: .875rem; color: var(--muted); }
.btn--start { width: 100%; min-height: 58px; font-size: 1.125rem; }

/* ---------- Câu hỏi ---------- */
.q { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.q__head { display: flex; flex-direction: column; gap: 6px; }
.q__num {
  align-self: flex-start; font-size: .8125rem; font-weight: 800; color: var(--white);
  background: var(--brand); border-radius: 999px; padding: 2px 10px;
}
.q__text { margin: 0; font-size: var(--fs-q); font-weight: 700; line-height: 1.4; color: var(--ink); }
.q__note { margin: 0; font-size: var(--fs-small); color: var(--muted); font-style: italic; }
.q__count { font-size: .875rem; color: var(--leaf); font-weight: 700; }
.q__error {
  margin: 0; font-size: .9375rem; color: var(--warn); background: var(--warn-bg);
  border-radius: 10px; padding: 8px 12px;
}

.options { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 14px; text-align: left;
  background: var(--white); border: 2px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.opt:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.opt__mark {
  flex: none; width: 24px; height: 24px; border: 2px solid var(--muted); background: var(--white);
  display: grid; place-items: center;
}
.opt--radio .opt__mark { border-radius: 50%; }
.opt--check .opt__mark { border-radius: 7px; }
.opt__mark::after { content: ""; display: none; }
.opt[aria-checked="true"] { border-color: var(--brand); background: var(--select-bg); }
.opt[aria-checked="true"] .opt__mark { background: var(--brand); border-color: var(--brand); }
.opt--radio[aria-checked="true"] .opt__mark::after {
  display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--white);
}
.opt--check[aria-checked="true"] .opt__mark::after {
  display: block; width: 6px; height: 11px; border: solid var(--white); border-width: 0 3px 3px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.opt.is-dim { opacity: .5; }
.opt__body { min-width: 0; flex: 1; }
.opt__label { font-weight: 800; color: var(--brand); }

/* Đáp án có hình (câu 15) */
.opt--pic { align-items: stretch; padding: 10px; }
.opt--pic .opt__mark { align-self: center; }
.opt__pic {
  flex: none; width: 96px; border-radius: 10px; overflow: hidden; background: var(--cream); align-self: center;
}
.opt__pic img { width: 100%; height: auto; }
.opt--pic .opt__body { align-self: center; font-size: 1rem; line-height: 1.45; }

.other-input, .text-input {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--white); color: var(--ink);
}
.other-input:focus, .text-input:focus { outline: none; border-color: var(--brand); }

/* ---------- Câu 17: chọn tính cách cho 3 người ---------- */
.people-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ptab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px 10px; background: var(--white); border: 2px solid var(--line); border-radius: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ptab:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.ptab[aria-selected="true"] { border-color: var(--brand); background: var(--select-bg); }
.ptab__pic { width: 100%; border-radius: 8px; overflow: hidden; background: var(--cream); }
.ptab__name { font-size: .875rem; font-weight: 800; color: var(--brand); line-height: 1.2; text-align: center; }
.ptab__count { font-size: .75rem; font-weight: 700; color: var(--muted); }
.ptab__count.is-done { color: var(--leaf); }
.ptab__count.is-done::before { content: "✓ "; }

.person-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.person-panel__title { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--brand); }
.person-panel__list { margin: 0; font-size: .9375rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--white); font-size: .9375rem; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.chip:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); font-weight: 700; }
.chip.is-dim { opacity: .45; }
.person-next { align-self: flex-end; }

/* ---------- Thanh nút dưới ---------- */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(254,252,232,.96); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navbar__inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; gap: 10px;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.btn {
  min-height: 52px; border-radius: 14px; padding: 0 18px; font-weight: 800; font-size: 1.0625rem;
  cursor: pointer; border: 2px solid transparent; -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.btn--primary { background: var(--brand); color: var(--white); flex: 1; }
.btn--primary:active { background: var(--brand-2); }
.btn--ghost { background: var(--white); color: var(--brand); border-color: var(--mist); }
.btn--small { min-height: 44px; font-size: .9375rem; padding: 0 14px; }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  max-width: calc(100% - 32px); background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: 12px; font-size: .9375rem; text-align: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
}

/* ---------- Màn kết bản nháp ---------- */
.summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.summary dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: .9375rem; }
.summary dt { font-weight: 800; color: var(--brand); }
.summary dd { margin: 0; }

@media (min-width: 600px) {
  .screen { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Màn chào: logo chiến dịch 14 năm ---------- */
.hero {
  background: var(--brand); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.hero__logo { width: min(72%, 300px); margin: 22px auto 14px; }
.hero__img { aspect-ratio: 4 / 3; background: var(--cream); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.age-note {
  display: flex; gap: 10px; align-items: center;
  background: var(--beige); color: var(--brand); font-weight: 700;
  border-radius: 12px; padding: 10px 14px; font-size: .9375rem;
}
.age-note__badge {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: var(--white); font-weight: 800; font-size: .9375rem;
}

/* =====================  BƯỚC 2  ===================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Mở đầu mỗi phần */
.part {
  background: var(--brand); color: var(--white); border-radius: var(--radius);
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px;
}
.part__title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; letter-spacing: .02em; text-wrap: balance; }
.part__intro { margin: 0; color: var(--cream); font-size: 1rem; }

/* Cảnh */
.scene__head { display: flex; flex-direction: column; gap: 2px; }
.scene__img--small { aspect-ratio: 6 / 5; max-width: 240px; align-self: center; }
.scene__img--brand { background: var(--brand); }
.scene__img--brand img { object-fit: contain; }
.scene--compact .scene__img--compact { aspect-ratio: 16 / 8; position: relative; }
.scene--compact .scene__img--compact img { object-position: center 68%; }
.scene__chip {
  position: absolute; left: 10px; top: 10px; background: var(--brand); color: var(--white);
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}

/* Đầu câu hỏi */
.q__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.q__hint {
  font-size: .8125rem; font-weight: 700; color: var(--leaf);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.q__count { margin-left: auto; }
.q__body { display: flex; flex-direction: column; gap: 12px; }

/* Số thứ tự trên hình (giỏ 01 / 02 / 03) */
.badge {
  position: absolute; left: 6px; top: 6px; min-width: 30px; height: 30px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--white); color: var(--brand); border: 2px solid var(--brand);
  font-size: .8125rem; font-weight: 800; line-height: 1;
}
.opt__pic, .ptab__pic { position: relative; }

/* Câu 15: đáp án dạng giỏ hàng */
.options--baskets .opt__pic { width: 108px; }

/* Câu 3: đáp án ngắn trên một hàng */
.options--inline { flex-direction: row; flex-wrap: wrap; }
.options--inline .opt { flex: 1 1 96px; width: auto; }

/* Câu 12, 13: lưới sản phẩm */
.options--products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.options--products .opt--pic {
  flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 8px 12px; position: relative;
}
.options--products .opt__mark { position: absolute; top: 10px; right: 10px; }
.options--products .opt__pic { width: auto; background: transparent; }
.options--products .opt__pic img { height: 132px; width: auto; margin: 0 auto; }
.options--products .opt__body { font-weight: 700; font-size: .9375rem; line-height: 1.3; }

/* Câu 14: sản phẩm đã chọn ở câu 13 */
.picked {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--white); border: 2px dashed var(--line); border-radius: 14px;
}
.picked img { height: 72px; width: auto; }
.picked__name { font-weight: 800; color: var(--brand); }

/* Câu 11: chấm điểm 1–5 */
.rating { display: flex; flex-direction: column; gap: 10px; }
.rating__legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; color: var(--muted);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.rating__legend b { color: var(--brand); }
.rating__item {
  display: flex; gap: 12px; align-items: center; background: var(--white);
  border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px;
}
.rating__item.is-done { border-color: var(--leaf); }
.rating__img { height: 104px; width: 52px; object-fit: contain; flex: none; }
.rating__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rating__name { margin: 0; font-weight: 800; color: var(--brand); line-height: 1.3; }
.rating__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rate {
  min-height: 44px; border-radius: 10px; border: 2px solid var(--line); background: var(--cream);
  font-weight: 800; font-size: 1.0625rem; color: var(--brand); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rate:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.rate[aria-checked="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); }
.rating__val { margin: 0; font-size: .8125rem; color: var(--muted); min-height: 1.2em; }
.rating__item.is-done .rating__val { color: var(--leaf); font-weight: 700; }

/* Câu 17: thẻ người, dùng số thay chữ */
.ptab { padding: 6px 6px 8px; }
.ptab__count { font-size: .8125rem; }

/* Ô nhập */
.select {
  font: inherit; font-size: 1rem; padding: 12px 10px; border-radius: 12px; min-height: 50px;
  border: 2px solid var(--line); background: var(--white); color: var(--ink); width: 100%;
}
.select:focus { outline: none; border-color: var(--brand); }
.date-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.text-input[readonly] { background: var(--cream); color: var(--muted); }

/* Lưu ý pháp lý (thu gọn) */
.notes {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  font-size: .9375rem;
}
.notes summary { font-weight: 800; color: var(--brand); cursor: pointer; }
.notes__body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; color: var(--ink); }
.notes__body p { margin: 0; }
.consent .opt__body { font-weight: 700; }

/* Màn chào: làm tiếp */
.resume { display: flex; flex-direction: column; gap: 10px; }
.resume__text { margin: 0; font-weight: 700; color: var(--brand); }

/* Màn cảm ơn */
.thanks { text-align: left; }
.testdata pre {
  margin: 10px 0 0; max-height: 320px; overflow: auto; font-size: .75rem; line-height: 1.4;
  background: var(--cream); padding: 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word;
}