/* VSW-TC-07 · Đăng ký vé: phần điền (bước 1, người đăng ký thay, tab đại biểu, ô nhập 2 cột, ảnh chân dung,
   lệ phí, câu hỏi nội trú / tiệc tối) + thanh dính đáy điện thoại (DESIGN-SYSTEM 5.8, 5.11, Q51-Q54) */

/* Nhãn chữ hoa của Google Form: chú thích 13px đậm 600; ghi chú nghiêng màu phụ ngay dưới nhãn */
.dkv-form .vs-o-nhan, .dkv-form fieldset.vs-o legend { font-weight: 600; }
.dkv-form .vs-o-nhan:has(+ .vs-o-ghi-chu) { margin-bottom: var(--vs-k1); }
.dkv-form .vs-o-nhan + .vs-o-ghi-chu, .dkv-form .vs-o-ghi-chu + .vs-o-ghi-chu { margin-top: 0; margin-bottom: var(--vs-k2); }
.dkv-ghi-chu-nghieng { font-style: italic; }
.dkv-ghi-chu-dam { font-weight: 700; }
/* Q63: condition line ahead of the resident-physician confirmation-letter box */
.dkv-xnnt-dieu-kien { margin-bottom: var(--vs-k2); }

/* Bước 1: đối tượng */
.dkv-doi-tuong { margin-bottom: 0; }
.dkv-lua-chon-doc { display: flex; flex-direction: column; gap: var(--vs-k2); }
.dkv-lua-chon-doc .vs-lua-chon { font-size: var(--vs-co-chu-thich); font-weight: 600; line-height: 1.4; }

/* Tiêu đề mục (kiểu dải tiêu đề của form, thu nhỏ) */
.dkv-muc-h3 {
  margin: 0 0 var(--vs-k4); padding-bottom: var(--vs-k2); border-bottom: 1px solid var(--vs-line);
  font-family: var(--vs-font-noi-dung); font-size: var(--vs-co-nho); font-weight: 700; line-height: 1.4;
  letter-spacing: .02em; color: var(--vs-blue); text-wrap: balance;
}
/* Nhanh tu dang ky (Q55): LE_PHI + cau hoi duoc doi DOM that len truoc khoi nay -> can khoang cach tren cho h3
   khi no thanh hang xom moi. Chi khop khi #dkvCauHoiTuDk dang HIEN va dung ke h3 (dung nhanh tu-dk); nop-thay
   khong bao gio o canh nhau nen khong doi gi ca. */
.dkv-cau-hoi-khoi:not([hidden]) + .dkv-muc-h3 { margin-top: var(--vs-k6); }

.dkv-nguoi-dk { margin-bottom: var(--vs-k6); }
/* Nhanh tu-dk (Q53/Q55): #dkvNguoiDk stays hidden and .dkv-le-phi is moved right after it (ve-nhanh.js), so its own
   margin-top would stack with .dkv-dien's margin-top (grid items don't collapse margins with their children) ->
   64px thay vi 32px (Tester-5 loi 2). Zero it only in that exact adjacency; nhanh nop-thay never has them next to
   each other so it is unaffected. */
.dkv-nguoi-dk[hidden] + .dkv-le-phi { margin-top: 0; }
.dkv-nguoi-dk-ghi-chu { margin: 0 0 var(--vs-k4); }
.dkv-goi-y-so-luong { padding: var(--vs-k4); border-radius: var(--vs-bo-nho); background: var(--vs-ice); color: var(--vs-ink); font-size: var(--vs-co-chu-thich); text-wrap: balance; }

/* Ô nhập: 1 cột trên điện thoại, 2 cột từ 768px. Mỗi ô là subgrid 4 hàng (nhãn, ghi chú, ô, lỗi) để 2 ô cạnh nhau
   luôn thẳng hàng dù chỉ 1 bên có ghi chú. Ô rộng (địa chỉ, chứng chỉ, ảnh, mục khác) chiếm cả hàng. */
.dkv-o-luoi { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--vs-k4); }
@media (min-width: 768px) {
  .dkv-o-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dkv-o-luoi > .vs-o:not([hidden]):not(.dkv-o-rong) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .dkv-o-luoi > .vs-o > .vs-o-nhan { grid-row: 1; align-self: end; }
  .dkv-o-luoi > .vs-o > .vs-o-ghi-chu { grid-row: 2; }
  /* align-self: start - a taller neighbour (e.g. the gender options on 2 lines) never stretches this row's select */
  .dkv-o-luoi > .vs-o > :is(.vs-o-nhap, .vs-lua-chon-nhom) { grid-row: 3; align-self: start; }
  .dkv-o-luoi > .vs-o > .vs-o-loi-chu { grid-row: 4; }
  .dkv-o-luoi > .dkv-o-ns > .dkv-ns { grid-row: 1 / 4; align-self: end; }
  .dkv-o-luoi > .dkv-o-rong { grid-column: 1 / -1; }
}
/* Nam / Nữ (Male / Female): 2 lựa chọn chia đều 1 hàng, đệm ngang gọn để còn 1 hàng ở cột hẹp (1024px bản Anh);
   dòng chữ = dòng của ô nhập (.vs-o-nhap: cỡ nội dung x 1.4) nên lựa chọn cao bằng ô chức danh bên cạnh */
.dkv-o-luoi .vs-lua-chon-nhom > .vs-lua-chon { flex: 1 1 auto; padding-inline: var(--vs-k3); line-height: calc(var(--vs-co-noi-dung) * 1.4); }
.dkv-ns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vs-k2); align-items: end; }
.dkv-ns-o { display: flex; flex-direction: column; min-width: 0; }
.dkv-ns-o .vs-o-nhan { text-wrap: balance; }

/* Ô chọn tệp + ảnh chân dung: nút tự làm, ô tệp thật trong suốt phủ kín nút */
.dkv-tep-hang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-k2) var(--vs-k3); }
.dkv-tep-nut { position: relative; }
.dkv-tep-nut > input { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
.dkv-tep-nut:has(input:focus-visible) { outline: 2px solid var(--vs-action); outline-offset: 2px; }
.dkv-tep-nut:has(input.vs-o-loi) { border-color: var(--vs-ember); color: var(--vs-ember); }
.vs-o-tep-ten { min-width: 0; font-size: var(--vs-co-chu-thich); color: var(--vs-ink); overflow-wrap: anywhere; }
.dkv-o-tep .dkv-tep-hang + .vs-o-ghi-chu { margin-top: var(--vs-k2); }
/* Khung tròn (Q58): kích thước cố định, không méo mặt dù ảnh dọc/ngang/vuông */
.dkv-anh-xem { display: block; width: 96px; height: 96px; object-fit: cover; object-position: center; border: 1px solid var(--vs-line); border-radius: 50%; background: var(--vs-ice); }

/* Khối đại biểu: nhánh nộp thay = 1 tab 1 người, có viền; nhánh tự đăng ký = phẳng, không đầu khối */
.dkv-db { padding: var(--vs-k5); border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho); }
.dkv-db-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-k2) var(--vs-k3); margin-bottom: var(--vs-k4); }
.dkv-db-h3 { font-family: var(--vs-font-tieu-de); font-size: var(--vs-co-h3); font-weight: 600; color: var(--vs-ink); }
.dkv-db-loai-ve { padding: var(--vs-k1) var(--vs-k3); border-radius: var(--vs-bo-vien-thuoc); background: var(--vs-ice); color: var(--vs-ink); font-size: var(--vs-co-chu-thich); font-weight: 600; text-wrap: balance; }
.dkv-db-loai-ve:empty { display: none; }
.dkv-db-chep { margin-left: auto; }
.dkv-db-di-kem { margin-top: var(--vs-k2); }
.dkv-db-goi-y { margin-top: 0; padding-left: calc(20px + var(--vs-k3)); }
/* locked Gala box (count reached / 0): muted text instead of a faded row, so the text keeps >= 4.5:1 */
.dkv-db-di-kem .vs-o-check:has(input:disabled) { opacity: 1; color: var(--vs-muted); }
.dkv-db-di-kem .vs-o-check > input:disabled + .vs-o-dau { border-color: var(--vs-line); background: var(--vs-ice); }
.dkv-db-chan { display: flex; justify-content: flex-end; margin-top: var(--vs-k4); padding-top: var(--vs-k4); border-top: 1px solid var(--vs-line); }
.dkv-luoi[data-nhanh="tu-dk"] .dkv-db { padding: 0; border: 0; }
.dkv-luoi[data-nhanh="tu-dk"] :is(.dkv-db-dau, .dkv-db-di-kem, .dkv-db-chan) { display: none; }

/* Tab đại biểu (5.8): tên + trạng thái "Đủ" / "Thiếu N ô" */
.dkv-tab-thanh { display: flex; width: 100%; margin-bottom: var(--vs-k4); scroll-margin-top: calc(var(--vs-cao-header) + var(--vs-k4)); }
.dkv-tab { flex-direction: column; flex: 1 0 auto; gap: 0; padding-inline: var(--vs-k4); line-height: 1.25; }
.dkv-tab-trang-thai { font-size: var(--vs-co-chu-thich); font-weight: 600; color: var(--vs-ember); }
.dkv-tab[data-du="1"] .dkv-tab-trang-thai { color: var(--vs-success); }
.dkv-tab:focus-visible { outline: 2px solid var(--vs-action); outline-offset: 2px; }

/* Lệ phí + câu hỏi nhánh tự đăng ký (nguyên văn form) */
.dkv-le-phi { margin-top: var(--vs-k6); padding: var(--vs-k5); border-radius: var(--vs-bo-nho); background: var(--vs-ice); font-size: var(--vs-co-chu-thich); line-height: 1.6; color: var(--vs-ink); }
.dkv-le-phi > p + p { margin-top: var(--vs-k2); }
.dkv-le-phi p { text-wrap: pretty; }
.dkv-muc { margin-top: var(--vs-k6); }
.dkv-muc > .vs-o-ghi-chu { margin: 0 0 var(--vs-k4); }
.dkv-muc .vs-o { margin-bottom: 0; }
.dkv-tiec-toi-ghi-chu { color: var(--vs-ink); }

/* Thanh dính đáy điện thoại (Q52) */
.dkv-thanh-day {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vs-k3);
  padding: var(--vs-k2) var(--vs-le-khung) calc(var(--vs-k2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--vs-line); background: var(--vs-trang); box-shadow: var(--vs-bong-noi);
}
.dkv-thanh-day-chu { margin: 0; min-width: 0; font-size: var(--vs-co-nho); font-weight: 600; color: var(--vs-ink); font-variant-numeric: tabular-nums; }
.dkv-thanh-day-nut { flex-shrink: 0; }
@media (min-width: 768px) {
  .dkv .dkv-thanh-day { display: none; }
}