/* Phiếu studio "chốn riêng của bạn", một trang cuộn A → F. Luôn ở chế độ đêm (khung quán). Mọi số lấy từ shared/tokens.css.
   Bố cục: hàng trên cùng (về trang chủ, đóng) cuộn đi theo trang / dải phiếu (số phiếu, 6 ngọn đèn, giọt màu) dính trên đầu /
   các khối câu hỏi nối nhau, đáp án hiện sẵn / nút "Xong, xem bản brief" ở cuối. Trang cuộn bằng chính tài liệu.
   Tờ brief và khoảnh khắc mở ra: brief.css. KHÔNG có khung xem trước trang ở bất kỳ khổ nào: máy tính chỉ rộng cột hơn,
   bàn ảnh nhiều cột hơn, thẻ cặp to hơn. */

/* Ô nhập, khối được đưa tới (đèn, "Sửa", chỗ còn thiếu) nằm dưới dải phiếu dính: --stick do form-scroll.js đo. */
html { scroll-padding-top: calc(var(--stick, 84px) + env(safe-area-inset-top, 0px) + var(--sp-4)); scroll-padding-bottom: var(--sp-7); }
html[data-boot="brief"] #form { display: none; } /* mở thẳng tờ brief: không chớp phiếu trước khi phieu.js dựng tờ */
html.is-locked { overflow: hidden; }              /* lớp mở ra đang phủ màn */

/* overflow-x: clip (không phải hidden): vũng đèn rộng hơn màn bị cắt mà không biến .studio thành khung cuộn, dải phiếu
   vẫn dính theo trang. Không cắt thì điện thoại nới khung trang theo vũng đèn và thu nhỏ cả phiếu. */
.studio { --col: 640px; position: relative; isolation: isolate; min-height: 100svh; overflow-x: clip; background: var(--cr-ink); }
.studio__in { width: 100%; max-width: var(--col); margin-inline: auto; }
@media (min-width: 768px) { .studio { --col: 720px; } }
/* Đèn bàn của studio chiếu xuống đầu phiếu: một vũng sáng nằm yên ở đầu trang, cuộn đi cùng trang. */
.studio__lamp { position: absolute; z-index: -1; top: -34vh; left: 50%; width: min(1200px, 170vw); height: 86vh; transform: translateX(-50%); background: var(--cr-pool-soft); pointer-events: none; }
/* Vùng tai thỏ / thanh trạng thái: luôn tối, để chữ cuộn lên không chạy dưới giờ và pin. */
.safe-cap { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-sticky) + 1); height: env(safe-area-inset-top, 0px); background: var(--cr-ink); pointer-events: none; }

/* ---------- Hàng trên cùng ---------- */
.studio__bar { display: flex; align-items: center; min-height: 44px; max-width: calc(var(--col) + var(--gut) * 2); padding: max(var(--sp-2), env(safe-area-inset-top, 0px)) var(--gut) 0; }
.studio__home { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 700 1.0625rem/1 var(--font-display); letter-spacing: -.01em; color: var(--cr-paper); }
.studio__home i { width: 9px; height: 9px; border-radius: 50%; background: var(--cr-lamp); box-shadow: 0 0 12px rgb(242 193 78 / .8); }

/* ---------- Dải phiếu dính ---------- */
/* Chiều cao cố định (không co lại khi cuộn: dải đổi cao là cả trang giật). Nền tối chỉ bật khi dải đã dính (.is-stuck,
   form-scroll.js), để ở đầu trang dải nằm trong vũng đèn chứ không cắt ngang vũng sáng; mép dưới tan dần, không làm mờ kính. */
.studio__top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky); padding: var(--sp-1) var(--gut) var(--sp-2); }
.studio__top::before, .studio__top::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--d-fast) ease; }
.studio__top::before { top: 0; bottom: 0; background: var(--cr-ink); }
.studio__top::after { top: 100%; height: 20px; background: linear-gradient(var(--cr-ink), rgb(15 14 12 / 0)); }
.studio__top.is-stuck::before, .studio__top.is-stuck::after { opacity: 1; }
/* Một dòng ở mọi khổ. Sáu đèn và số đếm luôn trọn ở bên phải; phần chữ bên trái (số phiếu, tên, quán, khoá) nằm trong
   .ticket__info, hết chỗ thì bỏ dần: phần giờ rơi hẳn (chỗ ngồi là hàng flex xuống dòng, cao một dòng, mảnh nào không vừa
   thì sang dòng ẩn; hệ số co 999 để chỗ ngồi co trước tên), rồi tên co lại có "…". Tên rất dài cộng quán dài ở máy hẹp
   vẫn không vừa thì phần chữ bị cắt ở mép phải và mờ dần vào đó, không bao giờ đẩy đèn ra khỏi màn. */
.ticket { min-height: 2.6em; min-width: 0; overflow: hidden; flex-wrap: nowrap; white-space: nowrap; }
.ticket > * { flex: none; }
.ticket > .ticket__info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .35em .9em; overflow: hidden; -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); }
.ticket__info > * { flex: none; }
.ticket__info > .ticket__name { flex: 0 1 auto; max-width: 12ch; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; color: var(--cr-paper); }
.ticket__info > #t-room { flex: 0 999 auto; min-width: min-content; display: flex; flex-wrap: wrap; column-gap: .45em; height: 1.4em; overflow: hidden; }
.ticket__info > #t-room[hidden], .ticket__info > #t-room > [hidden] { display: none; }
.ticket__lock { display: inline-flex; align-items: center; gap: 5px; color: var(--cr-lamp); }
.ticket__lock svg { width: 10px; height: 12px; flex: none; }
.ticket:has(#t-count:not([hidden])) #t-room { display: none; } /* đang đếm ghim/cặp: chỗ ngồi nhường chỗ */
/* Máy hẹp: phần giờ rơi (dưới 420px), cả chỗ ngồi rơi (dưới 360px) để tên còn đọc được; đang đếm thì tên nhường chỗ
   (dưới 420px), rồi tới chữ "Phiếu" (dưới 360px). */
@media (max-width: 419px) { .ticket #t-time { display: none; } .ticket:has(#t-count:not([hidden])) .ticket__name { display: none; } }
@media (max-width: 359px) { .ticket #t-room { display: none; } .ticket:has(#t-count:not([hidden])) .ticket__word { display: none; } }
@media (max-width: 479px) { .ticket__lock-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ticket .lamps { gap: 0; }
/* Sáu ngọn đèn là sáu nút tới sáu phần. Vùng chạm 24×40 (sáu nút 44px không vừa một dòng ở máy 320px; 24px là mức tối
   thiểu WCAG 2.2); lề âm giữ dòng phiếu không cao lên vì nút, và không chồng lên vùng chạm nút x ngay dưới. */
.lamp-btn { display: grid; place-items: center; width: 24px; height: 40px; margin-block: -12px; border-radius: var(--r-xs); }
.lamp-btn:active .lamp-dot { transform: scale(.9); }
.lamp-btn .lamp-dot { transition: background-color var(--d-fast) ease, box-shadow var(--d-fast) ease, transform var(--d-press) var(--ease-out); }
.ticket__count { color: var(--cr-paper); min-width: 3.4em; text-align: right; }
/* Giọt màu rút từ ảnh ghim: dấu vết làm việc, không phải bản xem trước. Mỗi tấm ghim là một cụm. */
/* Hàng thứ hai của dải: giọt màu bên trái, nút x bên phải (dưới đèn F). Hàng cao đúng 22px như hàng giọt màu cũ; nút x
   có vùng chạm 44×34 nhờ lề âm, dải không cao thêm. Giọt màu không vừa thì bị cắt ở mép trước nút x. */
.studio__row { display: flex; align-items: center; gap: var(--sp-2); height: 22px; margin-top: var(--sp-2); }
.studio__close { flex: none; display: grid; place-items: center; width: 44px; height: 34px; margin: -6px -13px -6px 0; border-radius: var(--r-xs); color: var(--cr-muted); transition: transform var(--d-press) var(--ease-out), color var(--d-fast) ease; }
.studio__close:active { transform: scale(.97); }
.studio__close svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .studio__close:hover { color: var(--cr-paper); } }
.drops { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 22px; overflow: hidden; }
.drops__group { display: flex; align-items: center; }
.drop { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--cr-ink); margin-left: -4px; }
.drops__group .drop:first-child { margin-left: 0; }
.drops__hint { font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cr-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drops:has(.drops__group) .drops__hint { display: none; }

/* ---------- Khối ---------- */
/* Mỗi phần (A–F) mở bằng một đường gạch đứt như mép xé của phiếu; khối con trong phần B chỉ cách bằng khoảng trống. */
.form { padding-bottom: env(safe-area-inset-bottom, 0px); }
.blk { position: relative; padding: var(--sp-8) var(--gut) 0; }
.blk:first-child { padding-top: var(--sp-5); }
.blk--part:not(:first-child) > .studio__in { padding-top: var(--sp-7); border-top: 1px dashed var(--cr-line-strong); }
.blk--wide { --col: 1060px; }
.blk--end { padding-bottom: calc(var(--sp-9) + var(--sp-7)); }
.blk__kicker { display: block; margin-bottom: var(--sp-3); }
.blk__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2); line-height: 1.02; letter-spacing: var(--track-2); text-wrap: balance; padding-top: .14em; color: var(--cr-paper); }
.blk:not(.blk--part) .blk__title { font-size: clamp(1.5rem, 5.4vw, 2.5rem); line-height: 1.06; }
.blk__title:focus { outline: none; }
.blk__whisper { margin-top: var(--sp-3); font-family: var(--font-whisper); font-style: italic; font-weight: 400; font-size: clamp(1.125rem, 4.4vw, 1.5rem); line-height: var(--lh-whisper); color: var(--cr-muted); text-wrap: pretty; }
.blk__body { margin-top: var(--sp-5); }
.blk__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--cr-muted); text-wrap: pretty; }
.blk__note--lamp { color: var(--cr-lamp); }
/* Hiện dần một lần (form-scroll.js): khối chưa tới khung nhìn thì chờ ở trạng thái mờ. */
.is-wait { opacity: 0; }
/* Được đưa tới từ tờ brief: quầng đèn mờ lên rồi tắt một nhịp sau đầu khối (chỉ độ mờ). */
.blk::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(100%, 520px); background: radial-gradient(ellipse 70% 70% at 50% 0%, rgb(255 214 120 / .16), rgb(242 193 78 / 0) 72%); opacity: 0; pointer-events: none; }
.blk.is-flash::before { animation: blk-flash 1100ms var(--ease-out); }
@keyframes blk-flash { 22% { opacity: 1; } 100% { opacity: 0; } }
.private { display: inline-flex; align-items: center; gap: 6px; font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cr-muted); }
.private::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }

/* ---------- A: hai thẻ tuổi (cuống vé), tên gọi, công tắc ---------- */
.age { display: grid; gap: var(--sp-4); }
.age__card {
  position: relative; display: grid; gap: 6px; padding: 22px 22px 20px; border-radius: var(--r-sm); text-align: left;
  background: var(--cr-ink-2); border: 1px solid var(--cr-line-strong);
  transition: transform var(--d-press) var(--ease-out), border-color var(--d-fast) ease, background-color var(--d-fast) ease;
}
.age__card:active { transform: scale(.97); }
.age__big { font: 800 clamp(2rem, 9vw, 2.75rem)/1 var(--font-display); letter-spacing: -.03em; padding-top: .12em; color: var(--cr-paper); text-wrap: balance; }
.age__sub { font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cr-muted); }
.age__card[aria-pressed="true"] { border-color: var(--cr-lamp); background: rgb(242 193 78 / .08); box-shadow: 0 0 0 1px var(--cr-lamp), 0 18px 50px -20px rgb(242 193 78 / .45); }
.age__card[aria-pressed="true"] .age__big { color: var(--cr-lamp); }
@media (min-width: 768px) { .age { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) { .age__card:hover { border-color: var(--cr-paper); } }
.q--name { margin-top: var(--sp-7); }
.q--name .field { margin-top: var(--sp-3); }
.q__switch { margin-top: var(--sp-5); border-top: 1px solid var(--cr-line); }
/* Chỗ còn thiếu khi bấm nút cuối trang: viền đèn ở đúng chỗ + một câu ngay cạnh. */
.need { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--cr-lamp); }
.age.is-need .age__card { border-color: rgb(242 193 78 / .75); }
.field.is-need .field__input { border-bottom-color: var(--cr-lamp); }
.field.is-need .field__hint { color: var(--cr-lamp); }
.toggle-row.is-need > .switch { border-color: var(--cr-lamp); box-shadow: 0 0 0 4px rgb(242 193 78 / .2); }

/* ---------- Hàng công tắc ---------- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; min-height: 64px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--cr-line); text-align: left; font-size: 1rem; line-height: 1.4; color: var(--cr-paper); }
.toggle-row:first-child { border-top: 1px solid var(--cr-line); }
.toggle-row small { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--cr-muted); }
.toggle-row[aria-disabled="true"] { color: var(--cr-muted); cursor: not-allowed; }
/* Cả dòng là công tắc (role=switch ở dòng): tô .switch con theo trạng thái của dòng. */
.toggle-row[aria-checked="true"] > .switch { background: rgb(242 193 78 / .22); border-color: var(--cr-lamp); }
.toggle-row[aria-checked="true"] > .switch::after { transform: translateX(20px); background: var(--cr-lamp); box-shadow: 0 0 14px rgb(242 193 78 / .7); }
.toggle-row[aria-disabled="true"] > .switch { opacity: .45; }
.toggle-row.is-shake { animation: pin-shake 360ms var(--ease-out); }

/* ---------- Chip có chấm màu, nhóm chip ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.chip[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--you-bg); }
.group + .group { margin-top: var(--sp-5); }
.group__label { display: block; margin-bottom: var(--sp-3); }

/* ---------- B1: bàn ảnh để ghim ---------- */
.mb { display: flex; align-items: flex-start; gap: clamp(12px, 3vw, 22px); margin-top: var(--sp-6); }
.mb__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(18px, 4vw, 28px); }
.mb__col:nth-child(even) { padding-top: clamp(26px, 8vw, 54px); }
.mb .print { width: 100%; padding: 5px 5px 0; text-align: left; }
.print > .print__art { overflow: hidden; }
.print__art svg { width: 100%; height: 100%; }
.print__cap { display: flex; justify-content: space-between; gap: 6px; padding: 7px 3px 7px; font: 450 .75rem/1.25 var(--font-label); letter-spacing: .01em; color: var(--cr-print-ink); }
.print__cap span:last-child { color: #6b6152; flex: none; }
.mb .print__no { bottom: 38px; }
.mb .print.is-shake { animation: pin-shake 360ms var(--ease-out); }
@keyframes pin-shake { 20% { translate: -4px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } 100% { translate: 0 0; } }
.mb__toast { position: sticky; bottom: max(var(--sp-3), env(safe-area-inset-bottom, 0px)); z-index: 2; margin: var(--sp-5) auto 0; width: fit-content; max-width: 100%; padding: 10px 16px; border-radius: var(--r-pill); background: var(--cr-ink-3); border: 1px solid var(--cr-line-strong); font-size: var(--fs-small); color: var(--cr-paper); opacity: 0; transform: translateY(calc(8px * var(--move, 1))); pointer-events: none; transition: opacity var(--d-fast) ease, transform var(--d-ui) var(--ease-out); }
.mb__toast.is-on { opacity: 1; transform: none; }

/* ---------- Bảng của bạn (hiện ngay dưới bàn ảnh khi đã ghim) ---------- */
.blk--mine { padding-top: var(--sp-7); }
.pinboard { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; max-width: 520px; margin: var(--sp-5) auto 0; padding: 30px 8px 26px; border-radius: var(--r-sm); background-color: var(--cr-ink-2); background-image: radial-gradient(rgb(242 237 227 / .07) 1px, transparent 1.2px); background-size: 14px 14px; box-shadow: inset 0 0 0 1px var(--cr-line); }
.pinboard__slot { position: relative; width: 42%; margin: 4% 3% 0; transform-origin: 0 0; }
.pinboard__slot:nth-child(even):not(.is-main) { margin-top: 9%; }
.pinboard__slot.is-main { z-index: 1; width: 74%; margin: 0 13% 1%; }
.pinboard:has(.pinboard__slot:only-child) { padding-bottom: 30px; }
.pinboard__slot .print { width: 100%; padding: 5px; }
.pinboard__slot .print[aria-pressed="true"] { transform: rotate(var(--rot)); }
.pinboard__slot .print__tape { clip-path: inset(0 0 0 0); }
.pinboard__slot .print__no { opacity: 1; transform: none; }
.pinboard__main { position: absolute; left: 10px; top: -11px; z-index: 3; padding: 3px 8px; border-radius: var(--r-pill); background: var(--cr-lamp); color: var(--cr-lamp-ink); font: 500 .75rem/1.3 var(--font-label); letter-spacing: .04em; text-transform: uppercase; }
.pinboard__chips { display: flex; gap: 3px; padding: 6px 1px 1px; }
.pinboard__chips i { flex: 1; height: 8px; border-radius: 1px; background: var(--c); }
.palette { margin: var(--sp-6) auto 0; max-width: 520px; }
.palette__row { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: var(--sp-3); }
.blk--mine .blk__note { max-width: 520px; margin-inline: auto; }
.swatch-btn { position: relative; display: grid; justify-items: center; gap: 6px; width: 52px; padding-bottom: 2px; transition: transform var(--d-press) var(--ease-out); }
.swatch-btn:active { transform: scale(.97); }
.swatch-btn i { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgb(242 237 227 / .14); transition: box-shadow var(--d-fast) ease; }
.swatch-btn span { min-height: 2.5em; font: 450 .75rem/1.25 var(--font-label); color: var(--cr-muted); text-align: center; }
.swatch-btn span:empty { display: none; }
.swatch-btn[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--cr-ink), 0 0 0 5px var(--cr-lamp); }
.swatch-btn[aria-pressed="true"] span, .swatch-btn.is-second span { color: var(--cr-paper); }
@media (min-width: 768px) { .pinboard { max-width: 460px; } .pinboard__slot.is-main { width: 62%; margin: 0 19% 1%; } }

/* ---------- B2: tám cặp, mỗi cặp một hàng ---------- */
/* Hai tấm luôn cạnh nhau (cả trên điện thoại) để mỗi hàng chỉ cao chừng nửa màn. Ảnh tải lười, khung ảnh giữ sẵn tỉ lệ
   nên ảnh về không đẩy trang. KHÔNG dùng content-visibility cho hàng: chiều cao đoán trước lệch theo bề rộng máy, chạm
   đèn để cuộn qua tám hàng sẽ dừng sai chỗ khi các hàng lần lượt dựng ra cao thật. */
.blk[data-blk="b2"] { --col: 640px; }
.pairs { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
.prow__head { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.prow__no { flex: none; min-width: 2.6em; font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); color: var(--cr-muted); transition: color var(--d-fast) ease; }
.prow.is-done .prow__no { color: var(--cr-lamp); }
.prow__axis { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--cr-paper); }
.prow__both { flex: none; padding-inline: 14px; font-size: var(--fs-small); }
.prow__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 3vw, 20px); margin-top: var(--sp-2); }
.pair__card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 5px; border-radius: var(--r-paper); background: var(--cr-print); box-shadow: var(--shadow-print); text-align: left; transform: rotate(var(--rot, 0deg)); transition: transform var(--d-press) var(--ease-out), opacity var(--d-fast) ease, box-shadow var(--d-fast) ease; }
.pair__card::before { content: ""; position: absolute; inset: -18%; z-index: -1; background: var(--cr-pool); opacity: 0; transition: opacity var(--d-fast) ease; pointer-events: none; }
.pair__card:active { transform: rotate(var(--rot, 0deg)) scale(.97); }
.pair__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 1px; background: var(--cr-print-edge); }
.pair__art img, .pair__art svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ảnh nằm trong nút (bàn ảnh, bảng ghim, thẻ cặp): không nhận chạm, để ấn giữ không bật menu ảnh của Android/iOS
   ("Tải ảnh / Mở ảnh") hay kéo ảnh đi; cú chạm rơi vào nút. */
button.print img, .pair__card img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.pair__card .print__cap { font-size: .8125rem; }
/* Nhãn thẻ là nghĩa của lựa chọn, không cắt "…": xuống tối đa hai dòng, hai thẻ trong hàng cao bằng nhau (lưới kéo giãn). */
.pair__card .print__cap { flex: 1 0 auto; align-items: flex-start; }
.pair__card .print__cap span:first-child { min-width: 0; text-wrap: pretty; }
.pair__card.is-chosen::before { opacity: 1; }
.pair__card.is-chosen { box-shadow: 0 0 0 2px var(--cr-lamp), var(--shadow-lift); }
.pair__card.is-dim { opacity: .45; }
@media (min-width: 768px) {
  .blk[data-blk="b2"] { --col: 860px; }
  .pairs { gap: var(--sp-7); }
  .pair__art { aspect-ratio: 5 / 4; }
  .prow__axis { font-size: 1.125rem; }
}

/* ---------- C: đồ trên bàn, mỗi câu hiện sẵn đáp án ---------- */
.qs { margin-top: var(--sp-5); border-top: 1px solid var(--cr-line); }
.q { padding: var(--sp-5) 0 var(--sp-6); border-bottom: 1px solid var(--cr-line); }
.q__head { display: flex; align-items: center; gap: var(--sp-3); }
.q__title { flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--cr-paper); text-wrap: pretty; }
.q__head .private { flex: none; }
/* Chấm màu của câu: vòng gạch đứt khi chưa trả lời, đầy màu khi đã có (colorsOf). */
.q__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--cr-dim); transition: background-color var(--d-fast) ease, border-color var(--d-fast) ease; }
.q__dot.is-on { border: 0; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.q__lead { margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--cr-muted); text-wrap: pretty; }
.q__body { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.q__body > .group + .group { margin-top: var(--sp-2); }
.q__sub { display: block; margin-top: var(--sp-2); }
.q__hint { font-size: var(--fs-small); color: var(--cr-muted); }
.q__clear { justify-self: start; margin-left: -.4em; }
.q__body > .field__error:empty, .q__body > .q__hint:empty { display: none; }
.q--dream { margin-top: var(--sp-6); padding: 0; border: 0; }
.q--dream .chips { margin-top: var(--sp-3); }
.q--dream .input { margin-top: var(--sp-3); }

/* ---------- Ô chữ ---------- */
/* Ô đang gõ không nằm dưới dải phiếu dính (scroll-padding-top) và không sát mép bàn phím. */
.input, .textarea, .select { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--cr-line-strong); background: var(--cr-ink-3); color: var(--cr-paper); line-height: 1.45; transition: border-color var(--d-fast) ease; }
.input, .textarea, .select, .field__input { scroll-margin-bottom: var(--sp-8); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--cr-lamp); }
.input::placeholder, .textarea::placeholder { color: var(--cr-dim); }
.textarea { min-height: 112px; resize: vertical; font-family: var(--font-whisper); font-style: italic; font-size: max(16px, 1.25rem); }
.count { margin-top: 6px; font: 450 var(--fs-label)/1.4 var(--font-label); color: var(--cr-muted); text-align: right; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.duo .field { gap: 6px; }

/* ---------- Mini-me, ảnh ---------- */
.mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
/* Không nền vuông: mini-me đứng trong một quầng đèn mờ, như ở góc của khách trong quán. Chưa chạm gì: dáng mẫu mờ. */
.mini__look { width: 96px; height: 120px; display: grid; place-items: center; background: radial-gradient(closest-side, rgb(242 193 78 / .16), transparent); transition: opacity var(--d-ui) var(--ease-out); }
.mini__look.is-empty { opacity: .4; }
.mini__look svg { width: 100%; height: 100%; }
.mini__toggles { margin-top: var(--sp-2); }
.photo-list { display: grid; gap: var(--sp-3); }
.photo-list:empty { display: none; }
.photo-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.photo-item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-xs); }
.photo-item label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-small); color: var(--cr-muted); }
.photo-item input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--cr-lamp); }
.file-btn { position: relative; overflow: hidden; justify-self: start; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- F: nút cuối trang ---------- */
.finish { display: grid; gap: var(--sp-3); }
#finish[aria-disabled="true"] { cursor: pointer; } /* vẫn bấm được: bấm là được đưa tới chỗ còn thiếu */
.finish__note { font-size: var(--fs-small); line-height: 1.5; color: var(--cr-muted); text-align: center; text-wrap: pretty; }
@media (min-width: 768px) { .finish { justify-items: center; } .finish .btn { width: auto; min-width: 340px; } }

/* Máy yếu / giảm chuyển động: không rung lắc; quầng sáng khối vẫn chỉ là độ mờ nên giữ, ngắn hơn. */
@media (prefers-reduced-motion: reduce) { .is-shake { animation: none !important; } .blk.is-flash::before { animation-duration: 700ms; } }
[data-motion="reduce"] .is-shake { animation: none !important; }