/* VSW-TC-07 · Đăng ký vé trên trang chủ: lưới 2 cột, thẻ tóm tắt đứng yên, màn đơn, popup (DESIGN-SYSTEM 7, Q52) */

#dang-ky { scroll-margin-top: calc(var(--vs-cao-header) + var(--vs-k4)); }
.dkv [hidden] { display: none !important; }

/* Lưới: điện thoại 1 cột (bước 1, thẻ tóm tắt, phần điền, gửi; nhánh tự đăng ký đưa thẻ xuống ngay trên phần gửi).
   Từ 1024px 2 cột: thẻ tóm tắt đứng yên bên trái, bước 1 + phần điền + gửi bên phải. */
.dkv-luoi { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "buoc" "the" "dien" "gui"; align-items: start; }
.dkv-luoi[data-nhanh="tu-dk"] { grid-template-areas: "buoc" "dien" "the" "gui"; }
.dkv-buoc { grid-area: buoc; }
.dkv-the { grid-area: the; margin-top: var(--vs-k6); }
.dkv-buoc[hidden] + .dkv-the { margin-top: 0; }
.dkv-dien { grid-area: dien; margin-top: var(--vs-k6); }
.dkv-gui-vung { grid-area: gui; margin-top: var(--vs-k6); padding-top: var(--vs-k6); border-top: 1px solid var(--vs-line); }
@media (min-width: 1024px) {
  .dkv-luoi, .dkv-luoi[data-nhanh="tu-dk"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "the buoc" "the dien" "the gui"; column-gap: var(--vs-k7);
  }
  .dkv-the {
    margin-top: 0; position: sticky; top: calc(var(--vs-cao-header) + var(--vs-k5));
    max-height: calc(100dvh - var(--vs-cao-header) - 2 * var(--vs-k5)); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* Thẻ tóm tắt: mốc giá + ưu đãi, dòng vé, tạm tính, tổng */
.dkv-chon-ve-h3, .dkv-cot-h3 { font-size: var(--vs-co-h3); letter-spacing: var(--vs-gian-h3); color: var(--vs-ink); margin-bottom: var(--vs-k4); }
.dkv-dang-tai { color: var(--vs-muted); font-size: var(--vs-co-nho); }
.dkv-dong-ban { padding: var(--vs-k5); border-radius: var(--vs-bo-nho); background: var(--vs-ice); }
.dkv-dong-ban-tieu-de { font-weight: 600; color: var(--vs-ink); margin-bottom: var(--vs-k2); }
.dkv-dong-ban-mo-ta { color: var(--vs-muted); font-size: var(--vs-co-nho); }
.dkv-moc-hang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vs-k2) var(--vs-k3); }
/* the period text may wrap to 2 lines so it can share the row with the offer button (Q52); too narrow - the button drops below */
.dkv-moc { flex: 1 1 10rem; margin: 0; font-size: var(--vs-co-chu-thich); line-height: 1.5; color: var(--vs-ink); text-wrap: pretty; }
.dkv-uu-dai-nut { flex: 0 0 auto; }
.dkv-moc-nhan { color: var(--vs-muted); }
.dkv-moc-gia-tri { font-weight: 600; }
.dkv-chon-phan { margin-top: var(--vs-k5); }

.dkv-ve-ds { display: flex; flex-direction: column; gap: var(--vs-k3); margin-bottom: var(--vs-k4); container-type: inline-size; }
.dkv-ve-ds:empty { display: none; }
.dkv-ve-hang {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ten dem" "gia dem" "ghi ghi";
  column-gap: var(--vs-k4); row-gap: var(--vs-k1); align-items: center;
  padding: var(--vs-k3) var(--vs-k4); border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho);
}
/* Q58: name + optional date subline stacked in the same "ten" grid area (hoi_nghi group only; Gala keeps its own note in "ghi"). */
.dkv-ve-ten-nhom { grid-area: ten; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dkv-ve-ten { font-size: var(--vs-co-nho); font-weight: 600; line-height: 1.4; color: var(--vs-ink); text-wrap: balance; }
.dkv-ve-ngay { font-size: var(--vs-co-chu-thich); font-weight: 400; line-height: 1.4; color: var(--vs-muted); text-wrap: balance; }
.dkv-ve-gia { grid-area: gia; font-size: var(--vs-co-chu-thich); font-weight: 600; color: var(--vs-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dkv-ve-ghi-chu { grid-area: ghi; margin-top: var(--vs-k1); font-size: var(--vs-co-chu-thich); line-height: 1.5; color: var(--vs-muted); text-wrap: balance; }
.dkv-ve-dem { grid-area: dem; display: flex; align-items: center; gap: var(--vs-k3); }
.dkv-ve-so { min-width: var(--vs-k5); text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
/* narrow list (phone, or the left column at 1024px): each part gets its own full-width row (name, price, note,
   counter) - price sharing a row with the counter (previous layout) clipped the price text at 320-360px
   (Tester-5 bug 1: price nowrap overflowed its auto column and the counter sat on top of it). Single column
   removes that fight for space; "giải pháp tương đương" allowed by the phiếu since pairing name+price on one
   line left too little room for the counter and wrapped long ticket names into many lines instead. */
@container (max-width: 24rem) {
  .dkv-ve-hang { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ten" "gia" "ghi" "dem"; row-gap: var(--vs-k2); }
}
.dkv-di-kem-o .vs-o-ghi-chu:empty, .dkv-di-kem-o .vs-o-loi-chu:empty { display: none; }
.dkv-chon-phan > .vs-o-loi-chu { margin: 0 0 var(--vs-k4); }
/* Nhánh tự đăng ký: chỉ các dòng đã chọn, không nút -/+ (Q53) */
.dkv-luoi[data-nhanh="tu-dk"] :is(.dkv-ve-dem, .dkv-loi-chua-chon, .dkv-qua-5, .dkv-ve-loi) { display: none; }
/* Nhánh tự đăng ký: nút "Uu dai dang ky" cua the tom tat trung voi nut cung ten trong khung LE PHI (dang-ky-ve-tu-dk.html)
   va lam Tab lech thu tu nhin (Tester-5 loi 3) - an nut cua THE, giu nut trong khung LE PHI. Nhanh nop-thay khong co
   khung LE PHI nen giu nguyen nut cua the. */
.dkv-luoi[data-nhanh="tu-dk"] .dkv-uu-dai-nut { display: none; }
.dkv-luoi[data-nhanh="tu-dk"] :is(.dkv-ve-hang, .dkv-di-kem-o)[data-so="0"] { display: none; }

.dkv-tam-tinh { display: flex; flex-direction: column; gap: var(--vs-k2); margin-bottom: var(--vs-k4); font-size: var(--vs-co-chu-thich); color: var(--vs-ink); }
.dkv-tam-tinh:empty { display: none; }
/* Q56: amount figures in blue (dkv-so-tien wraps just the number, see ve-du-lieu.js dienMauPhan); the quantity/
   ticket-name wording around them stays this block's --vs-ink. */
.dkv-so-tien { color: var(--vs-blue); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dkv-so-tien--tong { font-weight: 700; }
/* "Đã chọn người dự Gala: a/N" dưới dòng Gala (nhánh nộp thay): còn thiếu = đỏ lỗi, đủ = xanh thành công */
.dkv-tam-tinh-nhac { font-weight: 600; color: var(--vs-ember); font-variant-numeric: tabular-nums; }
.dkv-tam-tinh-nhac[data-du="1"] { color: var(--vs-success); }
/* Q58: date subline under a "ten x so_luong = tien" line, hoi_nghi group only (ve-chu.js veDong). */
.dkv-tam-tinh-ngay { margin-top: calc(-1 * var(--vs-k1)); color: var(--vs-muted); }
.dkv-tong { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vs-k3); padding-top: var(--vs-k4); border-top: 1px solid var(--vs-line); font-size: var(--vs-co-nho); color: var(--vs-muted); }
.dkv-tong .dkv-tt-nhan, .dkv-tt-tong .dkv-tt-nhan { color: var(--vs-ink); }

/* Hóa đơn (Q68, always shown), đồng ý, nút gửi */
.dkv-hoa-don { margin: 0 0 var(--vs-k4); padding: var(--vs-k4); border-radius: var(--vs-bo-nho); background: var(--vs-ice); }
.dkv-hoa-don .vs-o:last-child { margin-bottom: 0; }
.dkv-hoa-don .vs-o-nhap { text-overflow: ellipsis; } /* verbatim hints can be longer than a phone-width box */
.dkv-hoa-don .vs-o-nhap::placeholder { color: var(--vs-muted); opacity: 1; } /* same hint contrast on every browser */
@media (max-width: 479px) { .dkv-hoa-don .vs-o-nhap { padding-inline: var(--vs-k3); } .dkv-hoa-don .vs-o-nhap::placeholder { font-size: var(--vs-co-nhan); } } /* long verbatim hints must fit a phone-width box */
.dkv-hd { margin-bottom: var(--vs-k5); }
.dkv-hd-huong-dan { margin: var(--vs-k2) 0 0; }
.dkv-hd-luu-y { margin: 0; }
/* consent row holds a link: the transparent checkbox only covers a 44px square around the drawn box (label still toggles it) */
.dkv-dong-y > input { inset: auto; left: -12px; top: -3px; width: 44px; height: 44px; }
.dkv-dong-y-chu { cursor: default; }
.dkv-dong-y-chu label { cursor: pointer; }
.dkv-lien-ket-dieu-khoan { position: relative; z-index: 2; color: var(--vs-action); }
.dkv-loi-dong-y.vs-o-loi--hien { margin: 0 0 var(--vs-k2); padding-left: calc(20px + var(--vs-k3)); }
.dkv-canh-bao { margin: var(--vs-k5) 0 0; }
.dkv-nut-gui { width: 100%; margin-top: var(--vs-k5); }
.dkv-ghi-chu-gui { margin-top: var(--vs-k3); font-size: var(--vs-co-chu-thich); line-height: 1.5; color: var(--vs-muted); text-align: center; text-wrap: balance; }

/* Tra cứu đơn */
.dkv-tra-cuu { margin-top: var(--vs-k8); padding-top: var(--vs-k7); border-top: 1px solid var(--vs-line); scroll-margin-top: calc(var(--vs-cao-header) + var(--vs-k4)); }
.dkv-tra-cuu-h3 { font-size: var(--vs-co-h3); color: var(--vs-ink); margin-bottom: var(--vs-k2); }
.dkv-tra-cuu-mo-ta { color: var(--vs-muted); font-size: var(--vs-co-nho); margin-bottom: var(--vs-k5); text-wrap: balance; }
.dkv-tra-cuu-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--vs-k4); }
.dkv-tra-cuu-form .vs-o { flex: 1 1 220px; margin-bottom: 0; }
.dkv-tra-cuu-form button { flex-shrink: 0; margin-top: calc(var(--vs-co-chu-thich) * 1.5 + var(--vs-k2)); }
.dkv-tra-cuu-form .vs-canh-bao { flex-basis: 100%; margin-bottom: 0; }

@media (max-width: 767px) {
  .dkv-tra-cuu-form button { width: 100%; margin-top: 0; }
}

/* Màn đơn (thay chỗ biểu mẫu) */
.dkv-tt { max-width: 720px; }
.dkv-tt-tom-tat p { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vs-k2) var(--vs-k4); padding-block: var(--vs-k2); border-bottom: 1px solid var(--vs-line); font-size: var(--vs-co-nho); }
.dkv-tt-nhan { color: var(--vs-muted); }
.dkv-tt-ma-don { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dkv-tt-chip { padding-inline: var(--vs-k4); }
.dkv-tt-chip[data-trang-thai="da_thanh_toan"] { color: var(--vs-success); }
.dkv-tt-thong-bao { margin: var(--vs-k5) 0 0; }
.dkv-tt-h3 { font-size: var(--vs-co-h3); color: var(--vs-ink); margin: var(--vs-k6) 0 var(--vs-k4); }

/* Q65: registrant / VAT invoice blocks (order, lookup, review screens) - a bordered label/value list */
.dkv-tt-khoi-phu:not([hidden]) { margin-bottom: var(--vs-k2); }
.dkv-tt-ct { margin: 0; padding: var(--vs-k3) var(--vs-k4); display: flex; flex-direction: column; font-size: var(--vs-co-chu-thich); border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho); }
.dkv-tt-ct:empty { display: none; }
.dkv-tt-ct-dt { margin-top: var(--vs-k3); color: var(--vs-muted); }
.dkv-tt-ct-dt:first-child { margin-top: 0; }
.dkv-tt-ct-dd { margin: var(--vs-k1) 0 0; font-weight: 600; color: var(--vs-ink); overflow-wrap: anywhere; text-wrap: balance; }
.dkv-tt-ct-dd.dkv-so-tien { color: var(--vs-blue); } /* Q56: amount row (unit price); outranks the --vs-ink above */
.dkv-tt-goi-y { margin: 0 0 var(--vs-k3); color: var(--vs-muted); font-size: var(--vs-co-chu-thich); text-wrap: balance; }

/* Q65: 1 delegate = 1 <details> (open by default when there is only 1); its own chi-tiet list loses the border
   the standalone .dkv-tt-ct has, since the <details> border already frames it. */
.dkv-tt-db-ds { padding: 0; margin: 0 0 var(--vs-k4); display: flex; flex-direction: column; gap: var(--vs-k3); }
.dkv-tt-db-ds > details { border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho); }
.dkv-tt-db-ds > details[open] > summary { border-bottom: 1px solid var(--vs-line); }
.dkv-tt-db-ds summary { padding: var(--vs-k3) var(--vs-k4); font-size: var(--vs-co-nho); font-weight: 600; color: var(--vs-ink); cursor: pointer; overflow-wrap: anywhere; text-wrap: pretty; }
.dkv-tt-db-ds summary:focus-visible { outline: 2px solid var(--vs-action); outline-offset: -2px; }
.dkv-tt-db-ds .dkv-tt-ct { border: 0; border-radius: 0; padding-top: 0; }
.dkv-tt-db-ds .dkv-xl-anh, .dkv-tt-db-ds .dkv-anh-xem.dkv-xl-anh { margin: var(--vs-k3) var(--vs-k4) 0; }
/* Q58: date subline, hoi_nghi group tickets only (ve-hien-don.js) */
.dkv-tt-db-ngay { display: block; margin-top: var(--vs-k1); font-size: var(--vs-co-chu-thich); color: var(--vs-muted); }

.dkv-tt-tong, .dkv-tong { flex-wrap: wrap; }
.dkv-tt-tong { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vs-k3); padding-top: var(--vs-k4); border-top: 1px solid var(--vs-line); margin-bottom: var(--vs-k5); font-size: var(--vs-co-nho); color: var(--vs-muted); }
.dkv-tt-tong-so { font-family: var(--vs-font-tieu-de); font-size: var(--vs-co-h3); font-weight: 700; color: var(--vs-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dkv-tt-qr-khoi { display: flex; flex-direction: column; gap: var(--vs-k5); align-items: stretch; }
.dkv-tt-qr-khung { align-self: center; }
.dkv-tt-qr-anh { display: block; width: 240px; max-width: 100%; height: auto; border-radius: var(--vs-bo-nho); border: 1px solid var(--vs-line); background: var(--vs-trang); }
.dkv-tt-ck-ds { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vs-k3); }
.dkv-tt-ck-ds > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nhan nut" "gia-tri nut";
  column-gap: var(--vs-k3); row-gap: var(--vs-k1); align-items: center;
  padding: var(--vs-k3) var(--vs-k4); border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho);
}
.dkv-tt-ck-dt { grid-area: nhan; color: var(--vs-muted); font-size: var(--vs-co-chu-thich); line-height: 1.4; }
.dkv-tt-ck-dd { grid-area: gia-tri; margin: 0; font-size: var(--vs-co-nho); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; text-wrap: balance; }
.dkv-tt-ck-chep { grid-area: nut; min-width: 6.5rem; }
.dkv-tt-ghi-chu { margin-top: var(--vs-k5); color: var(--vs-muted); font-size: var(--vs-co-chu-thich); text-wrap: balance; }
.dkv-tt-nut-khac { margin-top: var(--vs-k6); }

@media (min-width: 768px) {
  .dkv-tt-qr-khoi { flex-direction: row; align-items: flex-start; gap: var(--vs-k6); }
  .dkv-tt-qr-khung { align-self: flex-start; flex-shrink: 0; }
  .dkv-tt-qr-anh { width: 260px; }
  .dkv-tt-ck-ds { flex: 1 1 0; }
}

/* Popup "Uu dai dang ky" (anh bang phi): cung khuon voi popup Chinh sach tai tro (tai-tro-chinh-sach.css) */
.dkv-popup {
  border: 0; padding: 0; width: min(720px, calc(100% - 32px));
  max-height: calc(100dvh - 48px); border-radius: var(--vs-bo-lon);
  box-shadow: var(--vs-bong-nhe); background: var(--vs-trang); color: var(--vs-ink);
  position: fixed; inset: 0; margin: auto; overflow: clip;
}
.dkv-popup[open] { display: flex; flex-direction: column; }
.dkv--js .dkv-popup:not([open]) { display: none; }
.dkv-popup::backdrop { background: var(--vs-man-che); }
.dkv-popup-dau {
  display: flex; justify-content: space-between; align-items: center; gap: var(--vs-k4);
  padding: var(--vs-k4) var(--vs-k5); border-bottom: 1px solid var(--vs-line);
  position: sticky; top: 0; z-index: 2; background: var(--vs-trang); flex-shrink: 0;
}
.dkv-popup-tieu-de { min-width: 0; overflow-wrap: anywhere; }
.dkv-popup-dong-icon { width: 16px; height: 16px; }
.dkv-popup-than { padding: var(--vs-k4); overflow: auto; min-height: 0; overscroll-behavior: contain; }
.dkv:not(.dkv--js) .dkv-popup {
  display: block; position: static; width: auto; max-height: none; box-shadow: none; margin: var(--vs-k6) 0 0;
}
html:has(.dkv-popup[open]) { overflow: clip; }
.dkv-uu-dai-anh-khung { max-width: 560px; margin-inline: auto; }
.dkv-uu-dai-lien-ket { display: block; cursor: zoom-in; text-decoration: none; }
.dkv-uu-dai-anh {
  width: 100%; display: block; border: 1px solid var(--vs-line); border-radius: var(--vs-bo-vua);
  transition: border-color var(--vs-t-nhanh), box-shadow var(--vs-t-nhanh), filter var(--vs-t-nhanh);
}
.dkv-uu-dai-lien-ket:hover .dkv-uu-dai-anh,
.dkv-uu-dai-lien-ket:focus-visible .dkv-uu-dai-anh {
  border-color: var(--vs-vien-hover); box-shadow: var(--vs-bong-nhe); filter: brightness(1.02);
}
.dkv-uu-dai-mo {
  display: flex; align-items: center; justify-content: center; min-height: var(--vs-cham-toi-thieu);
  padding-block: var(--vs-k2); font: 600 var(--vs-co-chu-thich)/var(--vs-dong-nhan) var(--vs-font-nhan);
  color: var(--vs-action); text-align: center; text-decoration: underline;
}
@media (min-width: 768px) {
  .dkv-popup-than { padding: var(--vs-k5); }
}
@media (prefers-reduced-motion: reduce) {
  .dkv-uu-dai-anh { transition: none; }
}

/* Man xem lai (Q65): dung lai .dkv-tt-h3 / .dkv-tt-ct / .dkv-tt-db-ds / .dkv-tt-goi-y / .dkv-tt-tong ben tren.
   tieu de nhan focus bang script (a11y) - giu vong focus ro thay vi vien mac dinh trinh duyet. */
.dkv-xl-tieu-de:focus { outline: 2px solid var(--vs-action); outline-offset: 4px; border-radius: var(--vs-bo-nho); }
.dkv-xl-nut-hang { display: flex; flex-wrap: wrap; gap: var(--vs-k3); margin-top: var(--vs-k5); }
.dkv-xl-nut-sua { flex: 1 1 auto; }
.dkv-xl-nut-xac-nhan { flex: 2 1 auto; }
@media (max-width: 480px) {
  .dkv-xl-nut-hang { flex-direction: column; }
  .dkv-xl-nut-sua, .dkv-xl-nut-xac-nhan { width: 100%; }
}