/* DKP-01 · Popup dang ky tham du - kieu dang, tien to lop .dkp- rieng, khong dung cho khoi khac */
.dkp-goc {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vs-k4);
}

.dkp-goc[hidden] {
  display: none;
}

.dkp-nen {
  position: absolute;
  inset: 0;
  background: var(--vs-man-che);
}

.dkp-hop {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 820px);
  overflow-y: auto;
  background: var(--vs-trang);
  border-radius: var(--vs-bo-the);
  box-shadow: var(--vs-bong-nhe);
  padding: var(--vs-k5);
}

.dkp-dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vs-k3);
}

.dkp-tieu-de {
  font-size: var(--vs-co-h3);
}

.dkp-nut-dong {
  flex-shrink: 0;
  width: var(--vs-cham-toi-thieu);
  height: var(--vs-cham-toi-thieu);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-bo-nut);
  background: var(--vs-trang);
  color: var(--vs-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dkp-nut-dong:hover {
  background: var(--vs-ice);
  color: var(--vs-ink);
}

.dkp-tien-do {
  display: flex;
  gap: var(--vs-k2);
  margin-top: var(--vs-k4);
}

.dkp-cham {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--vs-line);
}

.dkp-cham--xong {
  background: var(--vs-teal);
}

.dkp-cham--hien-tai {
  background: var(--vs-blue);
}

.dkp-canh-bao {
  margin-top: var(--vs-k4);
  padding: var(--vs-k3) var(--vs-k4);
  border: 1px solid var(--vs-ember);
  border-radius: var(--vs-bo-nut);
  background: var(--vs-trang);
  color: var(--vs-ember);
  font-size: var(--vs-co-nho);
}

.dkp-buoc-tieu-de {
  margin-top: var(--vs-k5);
  margin-bottom: var(--vs-k4);
  font-size: var(--vs-co-h3);
}

.dkp-o {
  margin-bottom: var(--vs-k4);
}

.dkp-o label, .dkp-o legend, .dkp-nhan-nhom {
  display: block;
  margin-bottom: var(--vs-k2);
  font-family: var(--vs-font-nhan);
  font-size: var(--vs-co-nhan);
  font-weight: 600;
  color: var(--vs-ink);
}

.dkp-o fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.dkp-o input[type="text"], .dkp-o input[type="email"], .dkp-o input[type="tel"],
.dkp-o input[type="number"], .dkp-o input[type="file"], .dkp-o select, .dkp-o textarea {
  width: 100%;
  min-height: var(--vs-cham-toi-thieu);
  padding: 10px var(--vs-k3);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-bo-nut);
  background: var(--vs-trang);
  color: var(--vs-ink);
  font-family: var(--vs-font-noi-dung);
  font-size: var(--vs-co-nho);
}

.dkp-o textarea {
  min-height: 72px;
  resize: vertical;
}

.dkp-o input:focus-visible, .dkp-o select:focus-visible, .dkp-o textarea:focus-visible {
  border-color: var(--vs-action);
}

.dkp-o--loi input, .dkp-o--loi select, .dkp-o--loi textarea {
  border-color: var(--vs-ember);
}

.dkp-loi {
  display: none;
  margin-top: var(--vs-k1);
  color: var(--vs-ember);
  font-size: var(--vs-co-nhan);
}

.dkp-loi--hien {
  display: block;
}

.dkp-ghi-chu {
  margin-top: var(--vs-k1);
  margin-bottom: var(--vs-k2);
  color: var(--vs-muted);
  font-size: var(--vs-co-nhan);
  line-height: var(--vs-dong-nhan);
}

.dkp-chon {
  display: flex;
  align-items: flex-start;
  gap: var(--vs-k2);
  min-height: var(--vs-cham-toi-thieu);
  padding-block: var(--vs-k1);
  font-family: var(--vs-font-noi-dung);
  font-size: var(--vs-co-nho);
  font-weight: 400;
  color: var(--vs-ink);
  cursor: pointer;
}

.dkp-chon input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--vs-blue);
}

.dkp-hang-ba {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vs-k2);
}

.dkp-ten-tep {
  display: block;
  margin-top: var(--vs-k2);
  color: var(--vs-teal-chu);
  font-size: var(--vs-co-nhan);
  overflow-wrap: anywhere;
}

.dkp-xem-lai {
  margin: 0;
  border-top: 1px solid var(--vs-line);
}

.dkp-xem-lai div {
  display: flex;
  justify-content: space-between;
  gap: var(--vs-k4);
  padding-block: var(--vs-k2);
  border-bottom: 1px solid var(--vs-line);
}

.dkp-xem-lai dt {
  flex-shrink: 0;
  color: var(--vs-muted);
  font-family: var(--vs-font-nhan);
  font-size: var(--vs-co-nhan);
}

.dkp-xem-lai dd {
  margin: 0;
  text-align: right;
  font-size: var(--vs-co-nho);
  overflow-wrap: anywhere;
}

.dkp-ma-dang-ky {
  padding: var(--vs-k3);
  border-radius: var(--vs-bo-nut);
  background: var(--vs-ice);
  color: var(--vs-blue);
  font-family: var(--vs-font-tieu-de);
  font-size: var(--vs-co-h3);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}

.dkp-hoan-tat-ghi-chu { margin-block: var(--vs-k5); }
.dkp-hoan-tat-ghi-chu p { margin: 0; font-size: var(--vs-co-nho); line-height: var(--vs-dong-noi-dung); }
.dkp-hoan-tat-ghi-chu p + p { margin-top: var(--vs-k3); }
.dkp-hoan-tat-hotline { color: var(--vs-action); font-weight: 700; }
.dkp-hoan-tat-dong { width: 100%; }

.dkp-dieu-huong {
  display: flex;
  gap: var(--vs-k3);
  margin-top: var(--vs-k6);
}

/* .dkp-dieu-huong va .vs-nut dat display:flex/inline-flex nen tu dinh nghia lai cho trang thai hidden, khong thi thuoc tinh hidden bi de (dung specificity, thua author rule) */
.dkp-dieu-huong[hidden], .dkp-dieu-huong [hidden] { display: none; }

.dkp-xac-nhan {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vs-k4);
  background: var(--vs-man-che);
}

.dkp-xac-nhan[hidden] {
  display: none;
}

.dkp-xac-nhan-hop {
  width: 100%;
  max-width: 380px;
  padding: var(--vs-k5);
  border-radius: var(--vs-bo-the);
  background: var(--vs-trang);
  box-shadow: var(--vs-bong-nhe);
  text-align: center;
}

.dkp-xac-nhan-hop p {
  margin-bottom: var(--vs-k4);
  font-size: var(--vs-co-nho);
  color: var(--vs-ink);
}

.dkp-xac-nhan-nut {
  display: flex;
  gap: var(--vs-k3);
}

.dkp-dieu-huong .vs-nut, .dkp-xac-nhan-nut .vs-nut {
  flex: 1;
}

@media (min-width: 768px) {
  .dkp-hop { padding: var(--vs-k6); }
  .dkp-tieu-de { font-size: var(--vs-co-h2); }
}

@media (prefers-reduced-motion: reduce) {
  .dkp-goc *, .dkp-goc *::before, .dkp-goc *::after { animation: none; transition: none; }
}