/* ============================================================================
   Trang tạo bình chọn — Phase 2..6 của MASTER-PLAN-vote-create-redesign.md

   Mọi rule ở đây đều nằm dưới `.vc`. Không rule nào chạm tới trang bỏ phiếu,
   trang kết quả, trang khoá hay dashboard (§1.5).
   Mọi khoảng cách lấy từ --s1..--s6, mọi cỡ chữ từ --t-*, mọi transition dùng
   var(--dur) var(--ease) — trừ hai ngoại lệ §3.3 (dòng vào 260ms, panel 280ms).

   ĐI LỆCH CÓ CHỦ Ý khỏi acceptance của §3.3 ("không còn px nào ngoài thang"):
   vài padding/gap nhỏ giữ nguyên số của prototype (2/3/4/5/6/7/9px) vì chính
   prototype dùng những số đó, và §0 quy định "prototype thắng" khi mâu thuẫn.
   Chúng là khoảng đệm quanh icon và vùng chạm, dưới bậc nhỏ nhất của thang
   (--s1 = 8px); ép lên 8px sẽ làm nút xoá và chevron lệch khỏi bản vẽ.
   Mọi khoảng cách ở tầm bố cục đều dùng thang.
   ========================================================================= */

.vc {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
}

/* ---------- Khung: một cột, khối chính ở 38.2% chiều cao (§4.2) ---------- */

.vc-stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--s3);
}

/* 0.618 trên, 1 dưới ⇒ tâm quang học ở 0.618/1.618 = 38.2% */
.vc-pad-top {
  flex: 0.618 1 0;
  min-height: var(--s4);
}

.vc-pad-bottom {
  flex: 1 1 0;
  min-height: var(--s5);
}

/* Header, main và footer dùng chung đúng một container. Bản cũ để header căn
   theo viewport còn nội dung căn theo cột hẹp — hai hệ lưới cãi nhau (§4.1). */
.vc-col,
.vc-head,
.vc-foot {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
}

/* .vc-col CHÍNH LÀ thẻ <main>, nên nó thừa hưởng padding ngang của `main`
   trong style.css — cộng thêm vào padding của .vc-stage bao ngoài. Kết quả là
   nội dung thụt vào sâu hơn header và footer đúng bằng một lần padding
   (28px so với 14px trên iPhone). Đệm ngang do .vc-stage lo, main không lo. */
.vc-col {
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Header (§4.3) ---------- */

.vc-head {
  padding: var(--s3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vc-mark {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.vc-head-link {
  font-size: var(--t-body);
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 2px;
  transition: color var(--dur) var(--ease);
}

.vc-head-link:hover {
  color: var(--ink);
}

/* ---------- Footer (§4.4) ---------- */

.vc-foot {
  /* --s3 trên và dưới, không phải --s3/--s4: CLAUDE.md ("Footer") yêu cầu
     footer giống hệt nhau ở mọi project, và .footer bên style.css dùng đệm
     dọc cân. Đáy lệch thêm một nấc chỉ ở riêng trang này là chỗ dễ nhận ra
     khi chuyển qua lại giữa trang tạo và trang bỏ phiếu. */
  padding: var(--s3) 0;
  display: flex;
  align-items: center;
  /* Căn giữa (22/08/2026, chung cả repo — branding/chrome.css), khớp với
     .footer bên style.css. */
  justify-content: center;
  text-align: center;
  gap: var(--s3);
  font-size: var(--t-cap);
  color: var(--ink-3);
  flex-wrap: wrap;
}

.vc-foot p {
  margin: 0;
}

/* Cùng lý do như .footer a trong style.css: viên thuốc ngôn ngữ giữ màu riêng. */
.vc-foot a:not(.lang-switch) {
  color: inherit;
  text-decoration: none;
}

.vc-foot a:not(.lang-switch):hover {
  color: var(--ink-2);
}

/* ---------- Thẻ nhập liệu (§5) ---------- */

/* Không đổ bóng, và không đổi viền khi focus. Thẻ này gần như chiếm trọn
   phần nhìn của trang, nên một lớp bóng + một viền đậm lên là hai thứ gây
   nhiễu chứ không phân tầng thêm được gì — nhất là khi trang tự focus ô câu
   hỏi lúc mới mở, khiến trạng thái "đậm" bật lên ngay trước khi người dùng
   chạm vào bất cứ đâu. Giữ đúng một hairline tĩnh. */
.vc-sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.vc-q-wrap {
  /* Đệm dọc --s3 chứ không --s4: ô câu hỏi cao 41px mà đệm 34px trên dưới thì
     hộp thành gần 110px cho một dòng chữ. Trên và dưới BẰNG NHAU — bộ đếm ký
     tự không còn nằm trong dòng chảy nên không đội thêm chiều cao ở đáy. */
  position: relative;
  /* Ngang --s3 chứ không --s4: khung tuỳ chọn bên dưới đệm 21px, để thẻ này
     34px thì chữ trong hai khối lệch mép nhau 13px. */
  padding: var(--s3);
  transition: background var(--dur) var(--ease);
}

/* Con trỏ đặt vào tiêu đề thì nền thẫm lên y như khi đặt vào một dòng lựa
   chọn — cùng một tín hiệu "đang gõ ở đây" cho cả hai loại ô. Bo góc trên phải
   khớp bo góc của thẻ, không thì mảng nền vuông góc thò ra khỏi hai góc cong. */
.vc-q-wrap:focus-within {
  background: var(--fill);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.vc-q {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  font-size: var(--t-q);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.22;
  /* Sàn đúng một dòng chữ. grow() đặt height = scrollHeight, mà scrollHeight
     của một textarea RỖNG trả về chiều cao theo font metrics (32px) chứ không
     theo line-height (41px) — thiếu 9px, và overflow:hidden cắt mất phần dưới.
     Tiếng Việt là nơi lộ ra ngay: "ề" có dấu chồng, phần thân chữ tụt xuống
     đúng vùng bị cắt. */
  min-height: 1.22em;
  padding: 0;
  margin: 0;
  color: var(--ink);
  caret-color: var(--accent);
}

/* Placeholder giữ weight 600 để khớp cỡ chữ thật -- nếu nhẹ hơn, ô trống trông
   như cỡ chữ khác với ô đã gõ. */
.vc-q::placeholder {
  color: var(--ink-3);
  font-weight: 600;
}

.vc-q:focus {
  outline: none;
}

/* Tuyệt đối chứ không nằm trong dòng chảy: nó vô hình gần như suốt (chỉ hiện
   khi đã dùng ~70% hạn mức) nhưng vẫn chiếm một dòng, làm đáy hộp tiêu đề cao
   hơn đỉnh dù padding khai báo bằng nhau. */
.vc-q-count {
  position: absolute;
  right: var(--s4);
  bottom: 6px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: var(--s1);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.vc-q-count.on {
  opacity: 1;
}

.vc-q-count.warn {
  color: var(--accent);
}

/* ---------- Dòng lựa chọn (§5.2) ---------- */

/* Không viền quanh từng ô: chỉ hairline phân cách. Bản cũ lồng hộp trong hộp. */
.vc-rows {
  border-top: 1px solid var(--line);
}

.vc-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  height: 52px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.vc-row:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.vc-row:focus-within {
  background: var(--fill);
}

/* Vòng tròn giống hệt thứ người bỏ phiếu sẽ thấy: form chính là bản xem
   trước, nên không cần màn hình preview riêng. */
.vc-ring {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  transition:
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.vc-row:focus-within .vc-ring {
  border-color: var(--accent);
}

.vc-row.is-add .vc-ring {
  border-style: dashed;
  opacity: 0.7;
}

.vc-row-in {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--t-opt);
  letter-spacing: -0.01em;
  color: var(--ink);
  caret-color: var(--accent);
}

.vc-row-in::placeholder {
  color: var(--ink-3);
}

.vc-row-in:focus {
  outline: none;
}

.vc-row-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  /* Hiện sẵn, không đợi hover: trên desktop nút này gần như vô hình nên không
     ai biết là có thể xoá một lựa chọn. Chỉ xuất hiện khi .can-remove, tức là
     khi còn nhiều hơn số lựa chọn tối thiểu — bấm mới có tác dụng thật. */
  opacity: 0;
  pointer-events: none;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
  transition:
    opacity var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.vc-row-x svg {
  width: 11px;
  height: 11px;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.vc-row.can-remove .vc-row-x {
  opacity: 1;
  pointer-events: auto;
}

.vc-row-x:hover {
  color: var(--ink);
  background: var(--fill);
}

@keyframes vc-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Ngoại lệ §3.3: 260ms cho dòng mới vào. */
.vc-row.enter {
  animation: vc-row-in 260ms var(--ease) both;
}

/* ---------- Gợi ý bàn phím (§5.5) ---------- */

/* ---------- Panel tuỳ chọn (§7) ---------- */

/* Cùng ý như .poll-actions ở style.css: thẻ nhập là việc chính, "Tuỳ chọn" là
   việc phụ. Nới khoảng cách để hai phần không đọc ra như một khối liền. */
.vc-more {
  margin-top: var(--s4);
}

.vc-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--ink-2);
  padding: 5px 2px;
  transition: color var(--dur) var(--ease);
}

.vc-more-btn:hover {
  color: var(--ink);
}

.vc-more-btn svg {
  width: 11px;
  height: 11px;
  stroke: currentcolor;
  stroke-width: 1.9;
  transition: transform 240ms var(--ease);
}

.vc-more-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 0fr → 1fr: mở mượt mà không cần JS đo chiều cao. */
.vc-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease);
}

.vc-more-panel.open {
  grid-template-rows: 1fr;
}

.vc-more-inner {
  overflow: hidden;
}

.vc-more-body {
  margin-top: var(--s2);
  /* Đệm ĐỀU bốn phía. Trước là 21px trên dưới / 34px trái phải — hai con số
     khác nhau ở cùng một khung, và cạnh ngang dày gần gấp rưỡi cạnh dọc. */
  padding: var(--s3);
  /* Viền trong suốt 1px: thẻ nhập phía trên có viền thật, nên nếu khung này
     không có thì chữ hai bên lệch nhau đúng 1px dù padding bằng nhau. */
  border: 1px solid transparent;
  background: var(--fill);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 220ms var(--ease) 40ms,
    transform 220ms var(--ease) 40ms;
}

.vc-more-panel.open .vc-more-body {
  opacity: 1;
  transform: none;
}

.vc-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  /* Lên một bậc thang (13 -> 21): các hàng cách nhau rộng hơn nên đường kẻ
     giữa chúng đọc ra là "ngăn cách", không phải "chật". */
  padding: var(--s3) 0;
}

.vc-opt-row + .vc-opt-row {
  border-top: 1px solid var(--line);
}

/* Hàng đầu và hàng cuối bỏ đệm dọc của riêng chúng: đệm 21px của khung đã lo
   phần mép rồi, cộng thêm 21px nữa thành 42px — gấp đôi cạnh trái/phải, và đó
   đúng là chỗ nhìn ra "trên dưới rộng hơn hai bên". Khoảng cách GIỮA các hàng
   vẫn 42px vì hai hàng liền nhau vẫn góp mỗi bên 21px. */
.vc-opt-row:first-child {
  padding-top: 0;
}

.vc-opt-row:last-child {
  padding-bottom: 0;
}

/* Icon + nhãn đi thành một khối, để hàng vẫn chỉ có hai flex item khi xuống
   dòng trên mobile. */
.vc-opt-main {
  display: flex;
  /* Căn GIỮA, không phải flex-start: control bên phải cũng căn giữa theo cả
     khối hai dòng (nhãn + mô tả), nên icon căn theo dòng nhãn sẽ lệch trục
     với nó. Cùng một trục thì cả hàng đọc ra đều. */
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}

/* Icon là trang trí, đứng thẳng hàng với DÒNG NHÃN chứ không căn giữa cả khối
   — khối có hai dòng (nhãn + mô tả), căn giữa sẽ làm icon trôi xuống giữa hai
   dòng. margin-top nhỏ để tâm icon khớp tâm chữ 15px. */
.vc-opt-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}

.vc-opt-label {
  font-size: var(--t-body);
  color: var(--ink);
}

.vc-opt-sub {
  display: block;
  font-size: var(--t-cap);
  color: var(--ink-2);
  margin-top: 2px;
}

/* Track vẽ bằng ::before chứ không phải nền của chính nút. Nhờ vậy chiều cao
   vùng chạm phóng lên 44px trên cảm ứng mà track vẫn đúng 42x25 của bản vẽ —
   nếu để nền trên nút thì phóng vùng chạm sẽ phình luôn cả track. */
.vc-switch {
  flex: 0 0 auto;
  width: 42px;
  height: 25px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  position: relative;
}

.vc-switch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -12.5px;
  width: 42px;
  height: 25px;
  border-radius: var(--radius-pill);
  background: var(--line-2);
  transition: background var(--dur) var(--ease);
}

.vc-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  background: var(--switch-knob);
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  transition: transform 220ms var(--ease);
}

.vc-switch[aria-checked="true"]::before {
  background: var(--accent);
}

.vc-switch[aria-checked="true"]::after {
  transform: translateX(17px);
}

/* Mọi control bên phải dùng chung một hộp: cùng chiều cao, cùng bo góc, cùng
   chữ. Trước đây select cao 34px còn ô mật khẩu 32px, và hai select rộng 162
   với 142 nên mép phải răng cưa — đó là thứ khiến bảng này trông "khác font"
   dù font-family/size tính ra đã giống nhau. Thủ phạm thật là appearance:auto:
   macOS vẽ widget riêng của nó, bezel và mũi tên stepper và tất cả. */
.vc-pick,
.vc-secret {
  appearance: none;
  box-sizing: border-box;
  height: var(--ctl-h);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: normal;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0 9px;
  cursor: pointer;
}

/* Một bề rộng chung cho cả ba hàng, nên mép phải thẳng hàng: select chiếm trọn
   --ctl-w, còn ô mật khẩu chừa chỗ cho nút con mắt (4px gap + 26px nút). */
.vc-pick-wrap {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: var(--ctl-w);
}

.vc-pick {
  width: 100%;
  /* chừa chỗ cho mũi tên vẽ bằng ::after */
  padding-right: 28px;
}

/* Mũi tên chevron-down của Lucide, vẽ bằng mask + currentColor để tự đúng màu
   ở cả hai theme (quy ước icon của repo). background-image data-URI sẽ phải
   viết cứng một mã màu và sai ở theme còn lại. */
.vc-pick-wrap::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -4px;
  width: 11px;
  height: 8px;
  pointer-events: none;
  background-color: var(--ink-2);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m1.5 2.5 4.5 4 4.5-4"/></svg>')
    center / contain no-repeat;
}

/* Con mắt nằm TRONG ô, không đứng cạnh: ô nhập chiếm trọn --ctl-w rồi chừa
   phần đệm phải cho nút, nên mép phải của ô mật khẩu trùng luôn với mép phải
   của hai select mà không phải cộng trừ bề rộng nút nữa. */
.vc-secret-wrap {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: var(--ctl-w);
}

/* Ô nhập co giãn, nút con mắt thì không: trên cảm ứng nút phóng lên 44px và
   nếu nó cũng co được thì flex sẽ bóp nó còn 40px, phá đúng cái ngưỡng 44pt mà
   bản phóng to sinh ra để đạt (§9). */
.vc-secret {
  width: 100%;
  padding-right: 34px;
  cursor: text;
}

/* KHÔNG đổi màu viền khi focus. Quy tắc focus chung của trang đã vẽ một vòng
   accent bao ngoài (.vc :focus-visible), nên tô đỏ luôn viền của chính control
   là vẽ hai vòng đỏ lồng nhau — nhìn ra "viền đôi" chứ không ra "đang chọn".
   Giữ đúng một tín hiệu: vòng ngoài. */
.vc-secret:focus,
.vc-pick:focus {
  outline: none;
}

.vc-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -13px;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.vc-eye:hover {
  color: var(--ink);
  background: var(--sheet);
}

.vc-eye svg {
  width: 15px;
  height: 15px;
  stroke: currentcolor;
  stroke-width: 1.8;
  fill: none;
}

/* ---------- Nút chính (§8.1) ---------- */

.vc-cta {
  display: block;
  width: 100%;
  height: 52px;
  /* --s3 chứ không --s4: nút chính thuộc về khối form ngay trên nó, để cách xa
     quá thì nó trôi ra như một phần riêng của trang. */
  margin-top: var(--s3);
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.01em;
  /* Disabled: nhạt và không đổ bóng. Bản cũ dùng xám đậm nguyên khối, biến
     thứ chưa dùng được thành vật thể nặng nhất trang. */
  background: var(--fill);
  color: var(--ink-3);
  cursor: default;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform 120ms var(--ease);
}

/* Lúc đang chờ, nút xếp ngang: vòng xoay và chữ cách nhau đều, cùng căn giữa.
   Để nguyên display:block thì hai <span> nằm sát nhau như một cụm chữ. */
.vc-cta.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vc-cta.ready {
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: var(--shadow-accent);
}

.vc-cta.ready:hover {
  background: var(--accent-2);
}

.vc-cta.ready:active {
  transform: translateY(1px);
}

.vc-error {
  margin: var(--s2) 0 0;
  text-align: center;
  font-size: var(--t-cap);
  color: var(--accent);
}

.vc-error[hidden] {
  display: none;
}

/* ---------- Focus: một quy tắc duy nhất cho cả trang (§9) ---------- */

.vc :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  /* No border-radius: it would re-shape whatever is focused rather than round
     the ring. `.vc :focus-visible` outranks a plain class, so this was quietly
     flattening every rounded control on the page the moment it was tabbed to.
     The outline follows the element's own corners by itself. */
}

/* Trừ ô nhập chữ. Ở đó con trỏ nhấp nháy đã là chỉ báo focus, và dòng lựa
   chọn còn đổi nền (.vc-row:focus-within) cộng dòng gợi ý hiện ra — vòng đỏ
   chỉ thêm ồn, lại bật sẵn lúc trang vừa tải vì ô câu hỏi được autofocus.
   Mọi control KHÔNG có con trỏ (nút, switch, select, link) vẫn giữ vòng, vì ở
   đó không còn gì khác cho biết đang đứng ở đâu. */
.vc .vc-q:focus-visible,
.vc .vc-row-in:focus-visible {
  outline: none;
}

/* ---------- Mobile (§4.5) ---------- */

@media (max-width: 680px) {
  .vc {
    --t-q: 26px;
    /* Thang khoảng cách siết lại một bậc trên màn hình hẹp. Sửa ở token nên
       mọi padding/margin ăn theo cùng lúc, thay vì chỉnh tay từng rule rồi
       lệch nhau. Nhịp vẫn là Fibonacci, chỉ dịch xuống: 8/10/16/21. */
    --s2: 10px;
    --s3: 16px;
    --s4: 21px;
    /* Xuống dòng rồi thì control không còn phải chừa chỗ cho nhãn bên trái
       nữa — cho chúng chiếm trọn bề ngang phần ruột của bảng tuỳ chọn, thay vì
       một hộp 200px lửng lơ giữa khoảng trống. */
    --ctl-w: 100%;
  }

  .vc-stage {
    padding: 0 14px;
  }

  /* Đệm vàng thu lại: 0.618/1 vẫn giữ, chỉ hạ sàn tối thiểu. */
  .vc-pad-bottom {
    min-height: var(--s3);
  }

  .vc-q-wrap {
    padding: var(--s3) var(--s3) var(--s2);
  }

  .vc-row {
    padding: 0 var(--s3);
    height: 50px;
  }

  .vc-more-body {
    padding: var(--s3);
  }

  .vc-opt-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }

  /* Con của .vc-opt-row bây giờ là .vc-pick-wrap chứ không phải .vc-pick —
     align-self phải đặt lên chính flex item. */
  .vc-opt-row .vc-pick-wrap,
  .vc-opt-row .vc-secret-wrap {
    align-self: flex-start;
  }

  /* Hàng chỉ có công tắc thì KHÔNG xuống dòng. Công tắc rộng 42px, đặt nó
     xuống dưới nhãn là đổi 60px chiều cao lấy một khoảng trống bên phải —
     đắt nhất bảng này khi đo trên iPhone. Chỉ select và ô mật khẩu mới cần
     nguyên bề ngang. */
  .vc-opt-row:has(.vc-switch) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
  }

  /* Mọi target chạm ≥44px (§9). */
  .vc-row-x,
  .vc-eye {
    width: 44px;
    height: 44px;
  }

  .vc-eye {
    right: 0;
    margin-top: -22px;
  }

  .vc-secret {
    padding-right: 48px;
  }

  /* Ô nhập chỉ cao bằng dòng chữ (20px) nhưng nằm giữa hàng 50px, nên chạm
     vào phần trên/dưới của hàng không focus được. Cho ô cao bằng cả hàng. */
  .vc-row-in {
    align-self: stretch;
    height: auto;
  }

  .vc-switch {
    height: 44px;
  }

  .vc-pick,
  .vc-secret {
    min-height: 44px;
  }

  .vc-more-btn,
  .vc-head-link {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc *,
  .vc *::before,
  .vc *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}