/* PVA Event Check-in — Lead CloudPage only.
   Load after pva-tokens.css and evt-app.css. Breakpoints use iframe width,
   not the viewport of the corporate page containing the iframe. */

html.evt-embed,
body.evt-embed {
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
}
html.evt-embed { scrollbar-width: thin; }
html.evt-embed::-webkit-scrollbar { width: 8px; }

.evt-embed #evtDone {
  text-align: center;
  padding: var(--sp-24) 0;
}

/* Thông báo không đăng ký được (đóng / chưa mở / chưa cấu hình): căn giữa như màn hình thành công */
.evt-embed #evtClosed {
  text-align: center;
  padding: var(--sp-24) 0;
}
.evt-embed #evtClosed .pva-card__title { justify-content: center; }

.evt-embed .evt-success-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  display: block;
  color: var(--color-success-deep);
}

.evt-embed .evt-form {
  /* Corp web là container fixed-width căn giữa, nên form cũng phải bám đúng bề rộng
     của từng breakpoint rồi căn giữa — KHÔNG tràn hết viewport. Dưới 768px mới fluid. */
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 16px;
}

.evt-embed .evt-legend {
  margin: 0 16px 15px;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 24px;
}

.evt-embed .evt-form-grid,
.evt-embed .evt-companion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.evt-embed .evt-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.evt-embed .pva-label {
  display: block;
  margin: 0;
  padding-bottom: 8px;
  color: var(--color-text-tertiary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.evt-embed .evt-req { color: var(--color-text-secondary); }

.evt-embed .pva-input {
  height: 48px;
  min-height: 48px;
  padding: 1px 12px 1px 16px;
  border: 1px solid var(--color-input-border);
  border-radius: 8px;
  background: var(--color-text-primary);
  color: var(--color-text-tertiary);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.evt-embed .pva-input::placeholder { color: var(--color-input-border); opacity: 1; }
.evt-embed .evt-error:empty { display: none; }
.evt-embed .evt-error:not(:empty) { margin-top: 4px; }

.evt-embed .evt-radio-group { margin-bottom: 24px; }
.evt-embed .evt-radio-group .pva-checkbox,
.evt-embed #chanBox .pva-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 16px;
}

.evt-embed input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-text-secondary);
}

.evt-embed .evt-extra-row { margin-top: 32px; }
.evt-embed .evt-companion {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.evt-embed .evt-companion + .evt-companion { margin-top: 24px; }
.evt-embed .evt-companion__no { display: none; }
.evt-embed .evt-companion:not(:first-child) .evt-companion__no {
  display: block;
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
}
.evt-embed .evt-companion .compDel { width: auto; justify-self: start; }
.evt-embed #btnAddComp { width: auto; margin-top: 12px; font-size: 14px; }
.evt-embed #compHint { font-size: 12px; }

.evt-embed .evt-otp-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
.evt-embed .evt-otp-contact { display: contents; }
.evt-embed .evt-phone-row {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
/* Hai nút gửi OTP (nhánh khách mới và nhánh khách hiện hữu) dùng CHUNG một style.
   Trước đây chỉ #btnSendOtp có style, #exBtnSendOtp rơi về .pva-btn gốc nên cao 32px
   và co theo chữ — nhìn bé hơn hẳn nút cùng vai trò ở nhánh kia. */
.evt-embed #btnSendOtp,
.evt-embed #exBtnSendOtp {
  width: 100%;
  min-height: 40px;
  padding: 11px 24px;
  border: 0;
  border-radius: 96px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.evt-embed #btnSendOtp:disabled,
.evt-embed #exBtnSendOtp:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-input-border);
  opacity: 1;
}
.evt-embed .evt-otp-banner { font-size: 12px; color: var(--color-text-hint); line-height: 18px; }
.evt-embed .evt-otp-banner.warn { color: var(--color-text-secondary); font-weight: 600; }

.evt-embed .evt-consent {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.evt-embed .evt-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--color-text-secondary);
}
.evt-embed .evt-consent > span { flex: 1; min-width: 0; }
.evt-embed .evt-consent p { margin: 0; }
.evt-embed .evt-consent a { color: var(--color-text-secondary); text-decoration: underline; }

/* min-width chứ KHÔNG phải width cố định: nhãn nút đổi theo luồng
   ("Gửi thông tin" / "Đăng ký tham gia sự kiện"), đặt cứng bề rộng thì nhãn
   dài hơn bị cắt mất chữ. Giữ 146px làm bề rộng tối thiểu theo thiết kế. */
/* "Kiểm tra thông tin" là hành động CHÍNH của nhánh khách hiện hữu, ngang vai với
   nút gửi form — nên dùng chung style, không để rơi về .pva-btn gốc (32px, co theo chữ). */
.evt-embed #btnSubmit,
.evt-embed #btnLookup {
  min-width: 146px;
  width: auto;
  min-height: 48px;
  margin-top: 40px;
  padding: 12px 24px;
  border: 0;
  border-radius: 96px;
  background: var(--color-text-secondary);
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* Nút tra nằm ngay dưới ô SĐT nên không cần cách xa như nút submit cuối form. */
.evt-embed #btnLookup { margin-top: var(--sp-12); }

/* ============================================================
   NHỊP DỌC CỦA NHÁNH KHÁCH HIỆN HỮU
   ============================================================
   Khối này hiện/ẩn từng mảnh theo bước: tra SĐT -> thẻ danh tính -> OTP -> đồng ý.
   Đặt margin lẻ trên từng phần tử là sai ngay: mảnh nào đang ẩn thì khoảng cách của
   nó biến mất theo, các mảnh còn lại dính vào nhau. Một flex column + gap cho khoảng
   cách luôn đúng vì [hidden] là display:none nên gap tự co lại.
   ============================================================ */
.evt-embed #branchExisting {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
/* Bỏ margin cũ của từng mảnh để không cộng dồn với gap */
.evt-embed #branchExisting > * { margin-top: 0; margin-bottom: 0; }
.evt-embed #branchExisting .evt-identity { margin-bottom: 0; }
.evt-embed #branchExisting .evt-notice { margin-top: 0; }
/* Khối OTP cũng xếp dọc có nhịp thay vì dựa vào margin rời rạc */
.evt-embed #exOtpBlock {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.evt-embed #exOtpBlock > * { margin-top: 0; }

@media (min-width: 768px) {
  .evt-embed .evt-form { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 24px; }
  .evt-embed .evt-legend { margin-left: 0; margin-right: 0; }
  .evt-embed .evt-form-grid,
  .evt-embed .evt-companion,
  .evt-embed .evt-otp-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .evt-embed .evt-form-full { grid-column: 1 / -1; }
  .evt-embed .evt-otp-layout { column-gap: 32px; row-gap: 8px; }
  .evt-embed #btnSendOtp { grid-column: 1; }
}

@media (min-width: 1024px) {
  .evt-embed .evt-form { width: 100%; max-width: 1024px; margin: 0 auto; }
}

@media (min-width: 1286px) {
  .evt-embed .evt-form { width: 100%; max-width: 1286px; margin: 0 auto; }
  .evt-embed .evt-otp-contact {
    display: grid;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 8px;
    align-items: start;
  }
  .evt-embed .evt-phone-row { grid-template-columns: 175px minmax(0, 1fr); }
  .evt-embed #btnSendOtp {
    grid-column: 2;
    width: 120px;
    height: 48px;
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .evt-embed .evt-legend { font-size: 14px; line-height: 21px; }
  .evt-embed .evt-radio-group { margin-bottom: 18px; }
  .evt-embed .evt-otp-layout { margin-top: 64px; }
  .evt-embed .pva-label { padding-bottom: 4px; font-size: 14px; line-height: 21px; }
  .evt-embed .pva-input {
    height: 40px;
    min-height: 40px;
    padding: 1px 8px 1px 12px;
    font-size: 14px;
    line-height: 21px;
  }
  .evt-embed .evt-radio-group .pva-checkbox,
  .evt-embed #chanBox .pva-checkbox { font-size: 14px; }
  .evt-embed input[type="radio"] { width: 16px; height: 16px; }
  .evt-embed .evt-consent { font-size: 14px; line-height: 21.8px; letter-spacing: -0.45px; }
  .evt-embed #btnSubmit,
  .evt-embed #btnLookup { min-width: 121px; width: auto; min-height: 42px; font-size: 12px; line-height: 18px; }
  .evt-embed #btnSubmit { margin-top: 32px; }
}

/* ============================================================
   KHỐI GẬP — người đi cùng và tư vấn viên giới thiệu
   ============================================================
   Hai khối này mặc định đóng để form trông ngắn. Mở ra mới hiện field,
   nhờ vậy khách không bị choáng bởi một trang dài toàn ô trống. */
.evt-embed .evt-collapse {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  padding: var(--sp-12) var(--sp-16);
  margin-top: var(--sp-16);
  transition: border-color var(--motion);
}
.evt-embed .evt-collapse[data-open="true"] { border-color: var(--color-text-secondary); }
.evt-embed .evt-collapse__head {
  display: flex; align-items: center; gap: var(--sp-12);
  cursor: pointer; min-height: var(--touch-target);
  margin: 0;
}
/* Checkbox của khối gập nằm trong <label class="evt-collapse__head">, KHÔNG nằm
   trong .pva-checkbox, nên không ăn accent-color của bộ token — trước đó nó hiện
   màu xanh mặc định của trình duyệt trong khi mọi radio khác đều đỏ. */
.evt-embed .evt-collapse__head input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-text-secondary);
  cursor: pointer;
}
.evt-embed .evt-collapse__body { margin-top: var(--sp-12); }

/* ============================================================
   NHÁNH KHÁCH HIỆN HỮU
   ============================================================ */
.evt-embed .evt-branch { margin-top: var(--sp-16); }

/* Thẻ xác nhận danh tính — chỉ hiện dữ liệu ĐÃ CHE, không bao giờ hiện PII đầy đủ */
.evt-embed .evt-identity {
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
  padding: var(--sp-16);
  margin-bottom: var(--sp-16);
}
.evt-embed .evt-identity__row {
  display: flex; justify-content: space-between; gap: var(--sp-12);
  padding: var(--sp-4) 0; font-size: var(--fs-14);
}
.evt-embed .evt-identity__label { color: var(--color-text-hint); }
.evt-embed .evt-identity__value { font-weight: 600; text-align: right; }

/* Thông báo chặn — dùng cho SĐT đã đăng ký và cho trường hợp tra không thấy */
.evt-embed .evt-notice {
  border-radius: var(--radius-xs);
  padding: var(--sp-12) var(--sp-16);
  font-size: var(--fs-14);
  margin-top: var(--sp-12);
  border-left: 4px solid var(--color-text-secondary);
  background: var(--color-surface-muted);
}
.evt-embed .evt-notice--info {
  border-left-color: var(--color-warn-ink);
  background: var(--color-warn-bg);
}
.evt-embed .evt-notice strong { display: block; margin-bottom: var(--sp-4); }

/* Trạng thái xác thực OTP — consent chỉ mở khoá sau khi verify xong */
.evt-embed .evt-otp-state { font-size: var(--fs-12); margin-top: var(--sp-8); min-height: 18px; }
.evt-embed .evt-otp-state--ok { color: var(--color-success-ink); font-weight: 600; }
.evt-embed .evt-otp-state--err { color: var(--color-text-secondary); font-weight: 600; }

/* Consent bị khoá cho tới khi đủ điều kiện */
.evt-embed .evt-consent--locked { opacity: .55; }
.evt-embed .evt-consent--locked input { cursor: not-allowed; }

/* ============================================================
   COMBO BOX — copy nguyên khối từ admin/css/pva-admin.css
   ============================================================
   Lead form không nạp pva-admin.css (nặng và đầy style riêng của trang
   quản trị), nên chép sang đây và scope dưới .evt-embed. Sửa combo thì
   phải sửa cả hai nơi. */
.evt-embed .pva-combo { position: relative; }
.evt-embed .pva-combo__input { width: 100%; padding-right: var(--sp-32); }
.evt-embed .pva-combo::after {
  content: "";
  position: absolute;
  right: var(--sp-14);
  top: 50%;
  margin-top: -5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-text-tertiary);
  border-bottom: 2px solid var(--color-text-tertiary);
  transform: rotate(45deg);
  pointer-events: none;
}
.evt-embed .pva-combo__list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + var(--sp-4));
  z-index: 70;
  background: var(--color-text-primary);
  border: 1px solid var(--color-text-tertiary);
  border-radius: var(--radius-xs);
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.evt-embed .pva-combo__list[hidden] { display: none; }
.evt-embed .pva-combo__opt {
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--fs-14);
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.evt-embed .pva-combo__opt:hover, .evt-embed .pva-combo__opt.is-active { background: var(--color-surface-muted); }
.evt-embed .pva-combo__empty {
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--fs-12);
  color: var(--color-text-inverse);
}
/* Danh sách combo trong iframe: giới hạn chiều cao thấp hơn admin vì khung
   nhúng thường ngắn, thả xuống quá dài sẽ tràn khỏi vùng nhìn thấy. */
.evt-embed .pva-combo__list { max-height: 220px; }

/* Ô ngày sinh dùng date picker sẵn có của trình duyệt.
   Safari iOS không cho chỉnh giao diện picker; chỉ cần bảo đảm ô cao bằng
   các input khác và không bị co lại. */
.evt-embed input[type="date"].pva-input {
  min-height: var(--touch-target);
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
   COMBO BOX + DATE PICKER — chuẩn CEP Admin Hub
   ============================================================
   Port từ "CEP Admin Hub/v2/css/cep-hub.css" (hub-combo, hub-dp, hub-datebtn,
   hub-icon), scope dưới .evt-embed.

   Không nạp thẳng cep-hub.css vì nó mang cả bộ shell của trang quản trị
   (rail, card, table…) và sẽ đè lên thương hiệu Prudential trên trang khách.

   ⚠️ GIÁ TRỊ TOKEN LẤY ĐÚNG NHƯ HUB, không tự chế. Bản trước tự đoán màu
   (line #e3e3e3, muted #6b6b6b, scrim đen thuần, bóng đậm hơn) nên component
   trông thô hơn bản gốc. Giữ nguyên số của hub thì mới giống hub.
   ============================================================ */
.evt-embed {
  /* Bảng màu shell — copy nguyên giá trị từ :root của cep-hub.css */
  --hub-brand:       #da291c;
  --hub-soft:        #fbeae8;
  --hub-ink:         #1c1d1b;
  --hub-muted:       #6b7280;                      /* 4.83:1 trên nền trắng */
  --hub-line:        #eceded;
  --hub-line-strong: #dfdfdf;
  --hub-paper:       #ffffff;
  --hub-canvas:      #f6f6f7;
  --hub-canvas-soft: #f6f6f7;
  --hub-scrim:       rgba(28, 29, 27, 0.44);
  --hub-shadow:      0 1px 3px rgba(28, 29, 27, 0.08);
  --hub-shadow-lg:   0 16px 40px rgba(28, 29, 27, 0.18);

  /* Thang chữ của hub. pva-tokens.css không có 11/13/19/21 — thiếu thì các
     khai báo font-size trở thành KHÔNG HỢP LỆ và chữ rơi về cỡ thừa hưởng,
     đó là lý do caret, nhãn "CHỌN NGÀY" và hàng T2..CN trông sai cỡ. */
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-19: 19px;
  --fs-21: 21px;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Dùng cho .evt-collapse của riêng form này */
  --color-line: #eceded;

  /* Vài sắc độ form cần mà bộ token Prudential chưa có. Khai ở ĐÚNG MỘT CHỖ
     thay vì rải hex thô khắp file — quy tắc trong CLAUDE.md: ngoài khối token
     ra thì mọi chỗ phải dùng var(). */
  --color-input-border:   #696b68;   /* viền input + chữ placeholder */
  --color-text-hint:      #555555;   /* chú thích phụ */
  --color-disabled-bg:    #f6c9c6;   /* nút đang khoá */
  --color-success-ink:    #16a34a;
  --color-success-deep:   #4a6f4f;
  --color-warn-ink:       #f59e0b;
  --color-warn-bg:        #fef3e2;
  --color-success-bg:     #e8f1e9;   /* nền nhãn "Đã đăng ký" — chữ success-deep đạt 5.3:1 */
}

.evt-embed .hub-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.evt-embed .hub-icon--sm { width: 16px; height: 16px; stroke-width: 2; }
.evt-embed .hub-icon--18 { width: 18px; height: 18px; }
.evt-embed .hub-icon--22 { width: 22px; height: 22px; }
.evt-embed .hub-icon--40 { width: 40px; height: 40px; stroke-width: 1.5; }
.evt-embed .hub-icon--44 { width: 44px; height: 44px; stroke-width: 1.5; }
.evt-embed .hub-combo { position: relative; }
.evt-embed .hub-combo__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--hub-line); border-radius: var(--radius-xs);
  background: var(--hub-paper); cursor: pointer; font-size: var(--fs-14); text-align: left; }
.evt-embed .hub-combo__btn:hover { border-color: var(--hub-line-strong); }
.evt-embed .hub-combo.is-open .hub-combo__btn { border-color: var(--hub-brand); }
.evt-embed .hub-combo__btn--44 { height: 44px; font-size: 13.5px; }
.evt-embed .hub-combo__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-embed .hub-combo__caret { margin-left: auto; color: var(--hub-muted); font-size: var(--fs-11); }
.evt-embed .hub-combo__list {
  position: absolute; top: 52px; left: 0; right: 0; z-index: 90;
  background: var(--hub-paper); border: 1px solid var(--hub-line); border-radius: var(--radius-xs);
  box-shadow: var(--hub-shadow-lg); overflow: hidden; max-height: 420px; overflow-y: auto; }
.evt-embed .hub-modal .hub-combo__list { z-index: 110; }
.evt-embed .hub-combo__list.is-portal { position: fixed; right: auto; z-index: 190; }
.evt-embed .hub-combo--wide .hub-combo__list { right: auto; width: 470px; max-width: 70vw; }
.evt-embed .hub-combo__opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  min-height: 42px; padding: 9px 14px;
  border: 0; border-bottom: 1px solid var(--hub-line);
  background: transparent; cursor: pointer; font-size: 13.5px; text-align: left; }
.evt-embed .hub-combo__opt:last-child { border-bottom: 0; }
.evt-embed .hub-combo__opt:hover { background: var(--hub-canvas-soft); }
.evt-embed .hub-combo__opt.is-picked { background: var(--hub-soft); color: var(--hub-brand); }
.evt-embed .hub-combo__mark { width: 14px; flex: none; font-weight: 700; line-height: 20px; }
.evt-embed .hub-combo__body { min-width: 0; flex: 1; }
.evt-embed .hub-combo__pre {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--hub-muted);
  line-height: 16px; margin-bottom: 2px; }
.evt-embed .hub-combo__opt.is-picked .hub-combo__pre { color: var(--hub-brand); }
.evt-embed .hub-combo__label {
  display: block; font-size: var(--fs-14); font-weight: 600; line-height: 19px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-embed .hub-combo__sub {
  display: block; font-size: var(--fs-12); color: var(--hub-muted); line-height: 17px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-embed .hub-combo__opt.is-picked .hub-combo__sub { color: var(--hub-brand); opacity: 0.75; }
.evt-embed .hub-combo__empty { padding: 14px; font-size: var(--fs-13); color: var(--hub-muted); }
.evt-embed .hub-combo__search { padding: 10px 12px; border-bottom: 1px solid var(--hub-line); }
.evt-embed .hub-datebtn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--hub-line); border-radius: var(--radius-xs);
  background: var(--hub-paper); cursor: pointer; font-size: var(--fs-14); text-align: left; }
.evt-embed .hub-datebtn.is-active { border-color: var(--hub-brand); }
.evt-embed .hub-datebtn__ph { color: var(--hub-muted); }
.evt-embed .hub-dp {
  position: fixed; inset: 0; z-index: 140; background: var(--hub-scrim);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
/* Biến thể NEO: panel đặt cạnh ô kích hoạt thay vì căn giữa. Toạ độ do JS tính,
   ở đây chỉ gỡ flex-center đi để top/left có tác dụng. */
.evt-embed .hub-dp.is-anchored { display: block; padding: 0; }
.evt-embed .hub-dp.is-anchored .hub-dp__panel { position: absolute; }
.evt-embed .hub-dp__panel {
  background: var(--hub-paper); border-radius: var(--radius-xs); box-shadow: var(--hub-shadow-lg);
  padding: 20px; width: 660px; max-width: 100%; }
.evt-embed .hub-dp__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.evt-embed .hub-dp__phase { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hub-brand); }
.evt-embed .hub-dp__range { font-size: var(--fs-13); color: var(--hub-muted); }
.evt-embed .hub-dp__months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.evt-embed .hub-dp__mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.evt-embed .hub-dp__mlabel { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; }
.evt-embed .hub-dp__nav { width: 32px; height: 32px; border: 1px solid var(--hub-line); border-radius: 50%; background: var(--hub-paper); cursor: pointer; }
.evt-embed .hub-dp__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; justify-content: center; }
.evt-embed .hub-dp__dow { height: 24px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-11); color: var(--hub-muted); }
.evt-embed .hub-dp__day {
  width: 34px; height: 34px; border: 0; border-radius: var(--radius-xs);
  background: transparent; cursor: pointer; font-size: 12.5px; }
.evt-embed .hub-dp__day:hover { background: var(--hub-canvas-soft); }
.evt-embed .hub-dp__day.is-out { opacity: 0.3; cursor: default; }
.evt-embed .hub-dp__day.is-in { background: var(--hub-soft); }
.evt-embed .hub-dp__day.is-edge { background: var(--hub-brand); color: var(--color-text-primary); font-weight: 700; }
.evt-embed .hub-dp__day.is-today { box-shadow: inset 0 0 0 1.5px var(--hub-brand); }
.evt-embed .hub-dp__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hub-line); }
.evt-embed .hub-dp__preset { height: 36px; padding: 0 14px; border: 1px solid var(--hub-line); border-radius: var(--radius-md); background: var(--hub-paper); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.evt-embed .hub-dp__preset:hover { border-color: var(--hub-brand); color: var(--hub-brand); }

/* Trong iframe hẹp: danh sách và lịch không được tràn khỏi vùng nhìn thấy */
.evt-embed .hub-combo__list { max-height: 240px; }
.evt-embed .hub-dp__panel   { max-width: calc(100vw - 32px); }
.evt-embed .hub-combo__btn,
.evt-embed .hub-datebtn     { width: 100%; min-height: var(--touch-target); }


/* [THÊM SO VỚI HUB] Chọn nhanh tháng/năm trong lịch — chỉ dùng cho ô ngày sinh.
   Hub gốc chỉ có mũi tên chuyển tháng, không đủ khi ngày cần chọn cách hôm nay
   vài chục năm. */
.evt-embed .hub-dp__mnav { display: flex; gap: var(--sp-8); align-items: center; }
.evt-embed .hub-dp__sel {
  font-family: var(--font-base);
  font-size: var(--fs-14);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--hub-line-strong);
  border-radius: var(--radius-xs);
  background: var(--hub-paper);
  color: var(--color-text-tertiary);
  min-height: 36px;
}
.evt-embed .hub-dp__day.is-disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

/* [SỬA SO VỚI HUB] Chọn MỘT ngày thì chỉ vẽ một tháng — popup hẹp lại, vừa khung
   iframe trên điện thoại. Hai tháng cạnh nhau chỉ có nghĩa khi chọn khoảng ngày. */
.evt-embed .hub-dp__months--one { grid-template-columns: 1fr; }
.evt-embed .hub-dp__months--one .hub-dp__grid { min-width: 0; }
/* Panel của hub được tính bề rộng cho HAI tháng. Chế độ một ngày thì thu lại,
   nếu không popup rộng gần gấp đôi phần lịch thật sự bên trong. */
.evt-embed .hub-dp__panel--one { width: auto; min-width: 0; max-width: 360px; }

/* Icon SVG của hub. BẮT BUỘC phải có: hàm icon() chỉ gắn class chứ không đặt
   kích thước, thiếu khối này thì SVG nở ra hết cỡ và biến thành một mảng đen
   to tướng che cả form. */
.evt-embed .hub-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.evt-embed .hub-icon--sm { width: 16px; height: 16px; stroke-width: 2; }
.evt-embed .hub-icon--18 { width: 18px; height: 18px; }
.evt-embed .hub-icon--22 { width: 22px; height: 22px; }
.evt-embed .hub-icon--40 { width: 40px; height: 40px; stroke-width: 1.5; }
.evt-embed .hub-icon--44 { width: 44px; height: 44px; stroke-width: 1.5; }
/* Dấu tích của mục đang chọn nằm BÊN PHẢI, theo đúng thiết kế đã duyệt.
   Hub gốc đặt nó ở đầu hàng (trước nhãn); ở đây đẩy sang cuối bằng order +
   margin-left:auto, không phải sửa JS nên vẫn giữ nguyên cấu trúc của hub. */
.evt-embed .hub-combo__mark {
  order: 2;
  margin-left: auto;
  text-align: right;
}
.evt-embed .hub-combo__body { order: 1; }

/* ============================================================
   ĐỒNG BỘ COMBO + NÚT NGÀY VỚI Ô NHẬP THƯỜNG
   ============================================================
   Ba loại trường đứng cạnh nhau trong cùng một lưới nên phải trông như MỘT
   họ. Component của hub mang sẵn hình thức riêng của trang quản trị, lệch với
   .pva-input ở năm chỗ — sửa hết tại đây thay vì đụng vào khối port ở trên:

     viền     #eceded  ->  var(--color-input-border), đậm như ô nhập
     cao      48px cố định -> 48px desktop / 40px mobile, bám .pva-input
     padding  0 14px  ->  1px 12px 1px 16px, thẳng hàng chữ với ô nhập
     font     Arial   ->  Open Sans  (thẻ <button> KHÔNG kế thừa font-family,
                          đây là lý do chữ trong combo và nút ngày trông khác hẳn)
     cỡ chữ   14px    ->  16px desktop / 14px mobile
   ============================================================ */
.evt-embed .hub-combo__btn,
.evt-embed .hub-datebtn {
  height: 48px;
  min-height: 48px;
  padding: 1px 12px 1px 16px;
  border: 1px solid var(--color-input-border);
  border-radius: 8px;
  background: var(--color-text-primary);
  color: var(--color-text-tertiary);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* Chữ chỗ trống dùng chung màu với ::placeholder của ô nhập */
.evt-embed .hub-combo__val[data-empty="true"],
.evt-embed .hub-datebtn__ph { color: var(--color-input-border); }

/* Mở ra thì viền đỏ như trạng thái focus của ô nhập */
.evt-embed .hub-combo.is-open .hub-combo__btn { border-color: var(--color-text-secondary); }

@media (max-width: 767px) {
  .evt-embed .hub-combo__btn,
  .evt-embed .hub-datebtn {
    height: 40px;
    min-height: 40px;
    padding: 1px 8px 1px 12px;
    font-size: 14px;
    line-height: 21px;
  }
}

/* ============================================================
   NÚT ĐÓNG CỦA LỊCH
   ============================================================
   .hub-modal__x không nằm trong nhóm class mình port (hub-combo / hub-dp /
   hub-datebtn / hub-icon) nên nó rơi về style mặc định của <button>: có viền,
   có nền xám, trông như một ô vuông đặt cạnh tiêu đề.

   Lấy lại đúng dáng của hub (tròn, không viền, nền trong suốt, hiện nền nhạt
   khi rê chuột) và neo vào GÓC PHẢI TRÊN của panel thay vì nằm trong dòng
   tiêu đề — dòng tiêu đề còn phải chứa nhãn "CHỌN NGÀY" và ngày đang chọn.
   ============================================================ */
.evt-embed .hub-dp__panel { position: relative; }
.evt-embed .hub-modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hub-muted);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
}
.evt-embed .hub-modal__x:hover,
.evt-embed .hub-modal__x:focus-visible {
  background: var(--hub-canvas-soft);
  color: var(--color-text-tertiary);
}
/* Chừa chỗ cho nút ở góc để tiêu đề không chạy xuống dưới nó */
.evt-embed .hub-dp__head { padding-right: 40px; }

/* ============================================================
   NỘI DUNG DO ADMIN CẤU HÌNH (hero / title / mô tả / chân trang)
   ============================================================
   Chỉ hiện khi link có ?cuid= — lúc đó trang mở thẳng, không nằm trong khung web
   công ty, nên phải tự dựng phần đầu và phần chân. Nhúng iframe thì server không
   gửi các khối này về, nên chúng không bao giờ render. */

.evt-hero { margin: 0 0 var(--sp-16); }
/* Ảnh banner tỉ lệ 3:1 (1200x400) như Dynamic Survey v4 — KHÔNG phải background,
   để ảnh tự co theo bề ngang iframe. max-height chặn ảnh quá cao đẩy form xuống
   dưới màn hình đầu tiên. */
.evt-hero img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.evt-title {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-base);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-tertiary);
}

/* Khối nội dung soạn bằng rich text. Chỉ định kiểu cho các thẻ Quill thật sự sinh ra
   (p, strong, em, u, a, ul/ol, h3/h4) — không đặt reset rộng để khỏi đè lên phần còn
   lại của form. */
.evt-richtext {
  font-family: var(--font-base);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}
.evt-richtext p          { margin: 0 0 var(--sp-8); }
.evt-richtext p:last-child { margin-bottom: 0; }
.evt-richtext h3,
.evt-richtext h4         { margin: var(--sp-16) 0 var(--sp-8); color: var(--color-text-tertiary); }
.evt-richtext ul,
.evt-richtext ol         { margin: 0 0 var(--sp-8); padding-left: var(--sp-24); }
.evt-richtext li         { margin-bottom: var(--sp-4); }
.evt-richtext a          { color: var(--color-text-secondary); }   /* --color-text-secondary LA do brand #da291c */
.evt-richtext img        { max-width: 100%; height: auto; }

.evt-footer {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-12);
  color: var(--color-text-hint);
}

/* ============================================================
   QR TRÊN MÀN HÌNH ĐĂNG KÝ THÀNH CÔNG
   ============================================================
   Đi kèm mã chữ, không thay thế nó: QR để nhân viên quét cho nhanh, mã chữ để khách đọc
   khi camera không bắt được. Nền trắng và viền rõ là bắt buộc — máy quét bắt kém hẳn khi
   QR nằm trên nền màu. */
.evt-done-qr {
  margin: var(--sp-16) auto 0;
  padding: var(--sp-12);
  max-width: 260px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
}
/* Chặn trên 200px: khách thường chìa điện thoại sát máy quét, QR to quá lại phải lùi xa. */
.evt-done-qr svg,
.evt-done-qr img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto; }
.evt-done-qr__hint {
  margin-top: var(--sp-8);
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--color-text-hint);
}

/* ============================================================
   FORM TỔNG — chọn nhiều sự kiện, người đi cùng theo sự kiện, màn hình thành công
   ============================================================
   Chỉ hiện khi bootstrap trả campaignType = master. Thẻ sự kiện là <label> bọc checkbox
   nên bấm vào đâu trên thẻ cũng chọn được. Sự kiện khoá (đã đăng ký / đã đóng) xám đi
   và có nhãn nói lý do, không kèm dòng giải thích dài. */
/* ---- Khối chọn sự kiện ---- */
.evt-embed .evt-events { margin: 0 0 var(--sp-24); }
.evt-embed .evt-events__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-12); flex-wrap: wrap;
}
.evt-embed .evt-events__count { font-size: var(--fs-14); color: var(--color-text-hint); white-space: nowrap; }
.evt-embed .evt-events__count b { color: var(--color-text-secondary); }
.evt-embed .evt-events__hint { margin: 0 0 var(--sp-12); font-size: var(--fs-14); }
.evt-embed .evt-events__list { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }

.evt-embed .evt-event {
  display: flex; align-items: flex-start; gap: var(--sp-12);
  padding: var(--sp-16);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-xs);
  background: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--motion), background var(--motion), box-shadow var(--motion);
}
.evt-embed .evt-event:hover { border-color: var(--color-text-secondary); }
.evt-embed .evt-event input {
  flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--color-text-secondary); cursor: pointer;
}
.evt-embed .evt-event.is-checked {
  border-color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--color-text-secondary);
}
.evt-embed .evt-event.is-off { cursor: not-allowed; background: var(--color-surface-soft); border-color: var(--color-line); }
.evt-embed .evt-event.is-off:hover { border-color: var(--color-line); }
.evt-embed .evt-event.is-off input { cursor: not-allowed; }
.evt-embed .evt-event.is-off .evt-event__name,
.evt-embed .evt-event.is-off .evt-event__meta { color: var(--color-text-hint); }
.evt-embed .evt-event__body { flex: 1; min-width: 0; }
.evt-embed .evt-event__name { display: block; font-size: var(--fs-16); font-weight: 600; line-height: 24px; color: var(--color-text-tertiary); }
.evt-embed .evt-event__meta {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: var(--sp-4); font-size: var(--fs-14); line-height: 21px; color: var(--color-text-hint);
}
.evt-embed .evt-event__meta svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.evt-embed .evt-tag {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-8); padding: 2px var(--sp-8);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12); font-weight: 600; line-height: 18px;
}
.evt-embed .evt-tag--done   { background: var(--color-success-bg); color: var(--color-success-deep); }
.evt-embed .evt-tag--closed { background: var(--color-text-primary); color: var(--color-text-hint); border: 1px solid var(--color-line); }

/* ---- Người đi cùng: chọn sự kiện theo từng người ---- */
.evt-embed .evt-comp-events {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
}
.evt-embed .evt-comp-events[hidden] { display: none; }
.evt-embed .evt-comp-events__label { width: 100%; font-size: var(--fs-14); font-weight: 600; color: var(--color-text-tertiary); }
.evt-embed .evt-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 36px; padding: 6px var(--sp-12);
  border: 1px solid var(--color-input-border); border-radius: var(--radius-sm);
  background: var(--color-text-primary);
  font-size: var(--fs-14); line-height: 21px; cursor: pointer;
  transition: border-color var(--motion), background var(--motion);
}
.evt-embed .evt-chip input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--color-text-secondary); cursor: pointer; }
.evt-embed .evt-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-embed .evt-chip.is-on { border-color: var(--color-text-secondary); background: var(--color-surface-muted); }

/* ---- Khối TVV dùng chung hai nhánh: ở nhánh hiện hữu nó nằm trong flex column có gap ---- */
.evt-embed #branchExisting .evt-collapse { margin-top: 0; }

/* ---- Màn hình thành công: danh sách sự kiện dùng chung một mã ---- */
.evt-embed .evt-done-events {
  display: grid; gap: var(--sp-8);
  max-width: 560px; margin: var(--sp-24) auto 0; text-align: left;
}
.evt-embed .evt-done-events__title { font-size: var(--fs-14); font-weight: 600; color: var(--color-text-tertiary); }
.evt-embed .evt-done-event {
  display: flex; gap: var(--sp-12); align-items: flex-start;
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--color-line); border-radius: var(--radius-xs);
  background: var(--color-text-primary);
}
.evt-embed .evt-done-event > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--color-success-deep); }
.evt-embed .evt-done-event__comp { font-size: var(--fs-12); color: var(--color-text-hint); margin-top: var(--sp-4); }

@media (min-width: 768px) {
  .evt-embed .evt-events__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .evt-embed .evt-event { padding: var(--sp-12); }
  .evt-embed .evt-event__name { font-size: var(--fs-14); line-height: 21px; }
  .evt-embed .evt-event__meta { font-size: var(--fs-12); line-height: 18px; }
  .evt-embed .evt-events__hint { font-size: var(--fs-12); }
}