/* ═══════════════════════════════════════════════════════════════════════════
   Form mở tài khoản giao dịch hàng hoá — Gia Cát Lợi

   Ý tưởng: đây là ĐƠN ĐĂNG KÝ đang được điền, nên trình bày như MỘT tài liệu
   liền mạch — các phần ngăn nhau bằng đường kẻ mảnh — chứ không phải một đống
   thẻ bo góc đổ bóng rời rạc (bản trước đúng kiểu đó, nhìn như form chưa có CSS).

   Ba quyết định bám vào chính nghiệp vụ, không phải trang trí:
    · Ô tải ảnh mang ĐÚNG TỈ LỆ của giấy tờ: 1.585:1 cho CCCD (85.6×54mm thật),
      3:4 cho ảnh chân dung. Nhìn cái ô là biết bỏ cái gì vào.
    · Số CCCD / SĐT / mã tài khoản dùng chữ số ĐỀU BỀ NGANG (tabular-nums) để
      xếp thẳng cột và dễ dò từng chữ số — đây là dữ liệu tài chính, không phải chữ.
    · Vàng thương hiệu CHỈ dùng cho hành động và bước đang làm. Vàng trên nền
      trắng không đạt độ tương phản để làm chữ, và dùng tràn lan thì rẻ tiền.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ Các hộp thoại (OTP, hỏi tiếp tục hồ sơ, chụp ảnh) được append vào <body>, tức
   NẰM NGOÀI .gcl-ao. Biến CSS ăn theo cây DOM, nên nếu chỉ khai trên .gcl-ao thì mọi
   var(--ao-*) bên trong hộp thoại đều RỖNG: nền trắng biến mất, bo góc về 0, chữ về
   màu mặc định. Đo được: cùng một class, ngoài .gcl-ao ra rgba(0,0,0,0) + 0px, trong
   thì #ffffff + 10px. Khai cho cả các gốc hộp thoại để không dính lại. */
.gcl-ao,
#gcl-ao-resume,
.gcl-ao-otp,
.gcl-cam-overlay {
  --ao-paper: #ffffff;
  --ao-ground: #eef2f6;
  --ao-ink: #0f2233;
  --ao-ink-2: #3d5266;
  --ao-muted: #6b7f91;
  --ao-rule: #d8e2ea;
  --ao-rule-soft: #e8eef3;
  --ao-gold: #f5a800;
  --ao-gold-deep: #d18f00;
  --ao-gold-tint: #fff6e2;
  --ao-verified: #0f7a4d;
  --ao-danger: #b3261e;
  --ao-radius: 10px;      /* bo góc chung — Holland yêu cầu mềm hơn 3px cũ */
  --ao-radius-sm: 8px;

  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Không bó 760px: form nằm trong cột do page builder quy định bề ngang rồi;
     tự bó thêm chỉ tạo khoảng trống thừa. Cột hẹp thì form hẹp theo. */
  width: 100%;
  margin: 0 auto;
  color: var(--ao-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gcl-ao *, .gcl-ao *::before, .gcl-ao *::after { box-sizing: border-box; }

/* ⚠ [hidden] PHẢI thắng mọi display khai báo sau nó. Ví dụ thật: nút ✕ xoá ảnh
   khai `display:grid`, thế là nó đè luôn thuộc tính `hidden` -> dấu ✕ hiện trên
   cả 3 ô CHƯA có ảnh. Bắt được khi chụp màn hình bản mới. */
.gcl-ao [hidden] { display: none !important; }

/* Theme của site đặt margin cho p/h4/ol… với độ ưu tiên cao hơn, làm thừa ra
   khoảng trắng lớn ở đầu form (đo được 80px trước dòng hướng dẫn). Reset trong
   phạm vi form để bố cục là do file này quyết định. */
.gcl-ao p, .gcl-ao h3, .gcl-ao h4, .gcl-ao ol, .gcl-ao ul { margin: 0; padding: 0; }
.gcl-ao li { list-style: none; }
/* Theme đặt padding cho thẻ <section> trần (đo được padding-top: 80px) — thừa hẳn
   một khoảng trắng lớn ở đầu mỗi bước. Phải reset cả section/fieldset, không chỉ p/h4. */
.gcl-ao section, .gcl-ao .gcl-ao-step { margin: 0; padding: 0; }

/* ── tiến trình: vòng tròn TRÊN, nhãn DƯỚI, dây nối giữa hai vòng ────────
   Holland chọn kiểu này (ảnh mẫu 2026-09-08). Dây nối vẽ bằng ::before của
   MỖI item, chạy từ tâm vòng tròn của nó sang tâm vòng kế tiếp — hai item
   rộng bằng nhau nên left:50% + width:100% là khớp tâm-sang-tâm, không cần
   canh tay. Vòng tròn nằm ĐÈ lên dây (z-index), nên dây không cắt ngang số. */
/* Một cột mỗi bước, bao nhiêu bước cũng được (24/09/2026 thêm bước 3 "Hợp đồng"). Trước đây ghi
   cứng 2 cột nên bước 3 rớt xuống hàng thứ hai. */
.gcl-ao-steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  list-style: none; margin: 0 0 26px; padding: 0;
}
.gcl-ao-steps__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ao-ink-2); font-size: 14px; font-weight: 600; text-align: center;
  transition: color .2s ease;
}
.gcl-ao-steps__item::before {
  content: ''; position: absolute; z-index: 0;
  top: 15px; left: 50%; width: 100%; height: 2px;
  background: var(--ao-rule);
  transition: background .2s ease;
}
.gcl-ao-steps__item:last-child::before { display: none; }
.gcl-ao-steps__item.is-active { color: var(--ao-gold-deep); }
.gcl-ao-steps__item.is-done::before { background: var(--ao-verified); }
.gcl-ao-steps__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%; background: var(--ao-rule); color: #fff;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.gcl-ao-steps__item.is-active .gcl-ao-steps__num { background: var(--ao-gold); color: #241a00; }
/* Bước đã xong: giấu SỐ, hiện dấu tick.
   ⚠ Không dùng font-size:0 để giấu số — nó làm sập luôn line-height của ô, dấu tick
   ở ::after bị đẩy lệch xuống đáy vòng tròn (Holland chụp lại đúng lỗi này).
   Dùng color:transparent (số vẫn chiếm chỗ, không đổi hộp) + ::after phủ kín và tự
   căn giữa bằng grid. */
.gcl-ao-steps__item.is-done .gcl-ao-steps__num {
  background: var(--ao-verified); color: transparent;
}
.gcl-ao-steps__item.is-done .gcl-ao-steps__num::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 15px; line-height: 1;
}
@media (max-width: 460px) { .gcl-ao-steps__label { font-size: 13px; } }

/* ── thân đơn ────────────────────────────────────────────────────────────
   KHÔNG tự vẽ khung. Shortcode này được đặt trong một container Elementor vốn
   ĐÃ có khung vàng bo 20px (đo được: .elementor-element-69cb92c, 1px #fdb924).
   Tự vẽ thêm khung nữa thành khung-trong-khung, nhìn rất luộm thuộm — đó chính
   là chỗ "vẫn xấu". Để container chủ làm cái thẻ, form chỉ lo nội dung bên trong. */
.gcl-ao-form { background: transparent; border: 0; padding: 6px 0 0; }

.gcl-ao-section-title {
  margin: 30px 0 16px !important;
  font-size: 14px; font-weight: 700; letter-spacing: .005em;
  color: var(--ao-ink);
  padding-top: 18px; border-top: 1px solid var(--ao-rule-soft);
}
.gcl-ao-step > .gcl-ao-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gcl-ao-hint { color: var(--ao-ink-2); margin: 0 0 24px !important; font-size: 14px; max-width: 62ch; }
.gcl-ao-hint--sm { font-size: 13px; color: var(--ao-muted); }
/* Yêu cầu "đủ 4 góc" là thứ khách hay bỏ qua nhất và cũng là lý do bị chặn ở bước 1
   nhiều nhất — đo 09/09/2026: 11% số mặt ảnh gửi lên là thẻ chụp cụt. Cho nó đậm và
   tối màu hơn phần còn lại của đoạn hướng dẫn để mắt dừng lại đúng chỗ đó. */
.gcl-ao-hint strong { color: var(--ao-ink); font-weight: 600; }
.gcl-ao-hint__warn { color: var(--ao-danger); font-weight: 500; }

/* ── field ──────────────────────────────────────────────────────────────── */
.gcl-ao-grid { display: grid; gap: 18px; }
@media (min-width: 620px) {
  .gcl-ao-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .gcl-ao-grid--3 { grid-template-columns: repeat(3, 1fr); }
  /* Hai ô chọn ở đầu bước 1 chỉ có vài chữ, kéo dài nửa form nhìn trống trải.
     Bó lại theo nội dung, dồn về trái. */
  .gcl-ao-grid--compact { grid-template-columns: repeat(2, minmax(0, 236px)); justify-content: start; }
}
.gcl-ao-field { margin-bottom: 18px; }
/* Ô địa chỉ nằm NGAY dưới một hàng grid nên bị dính sát; grid có gap riêng, hàng
   đứng một mình thì không, phải tự chừa khoảng. */
.gcl-ao-grid + .gcl-ao-field { margin-top: 18px; }
.gcl-ao-grid .gcl-ao-field { margin-bottom: 0; }
.gcl-ao-label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ao-ink-2);
}
.gcl-ao-req { color: var(--ao-danger); margin-left: 2px; }

.gcl-ao-input {
  width: 100%;
  padding: 11px 13px;
  font-size: 16px;                    /* < 16px là iOS tự phóng to trang khi focus */
  font-family: inherit; color: var(--ao-ink);
  background: var(--ao-paper);
  border: 1px solid var(--ao-rule);
  border-radius: var(--ao-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
}
/* Dữ liệu tài chính: chữ số đều bề ngang để xếp cột và dò từng số */
#gcl-ao-phone, #gcl-ao-cardNumber, #gcl-ao-bank-number,
#gcl-ao-dob, #gcl-ao-issueDate, .gcl-ao-otp__input {
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.gcl-ao-input::placeholder { color: #a4b3c0; }
.gcl-ao-input:hover:not(:disabled):not([readonly]) { border-color: #b9c8d4; }
.gcl-ao-input:focus {
  outline: none; border-color: var(--ao-gold);
  box-shadow: inset 0 0 0 1px var(--ao-gold);
}
select.gcl-ao-input {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%236b7f91' d='M1.2 0 5.5 4.2 9.8 0 11 1.2 5.5 6.6 0 1.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}
/* Ô KHÔNG cho sửa phải NHÌN RA NGAY là không sửa được. #f6f9fb cũ gần như trắng,
   khách vẫn bấm vào rồi tưởng hỏng. Nền xám rõ hơn + chữ nhạt + con trỏ không phải
   con trỏ nhập liệu = ba tín hiệu cùng nói một điều. */
.gcl-ao-input--readonly, .gcl-ao-input:disabled {
  /* !important: có luật khác (theme/plugin) nhắm input[type=...] kèm !important nên
     thắng class của mình. Bằng chứng: cùng MỘT luật này, <select> bị disabled thì ăn
     màu xám đúng, còn <input readonly> vẫn trắng — khác nhau đúng ở chỗ selector kia
     chỉ chạm <input>. Không đọc được tên luật vì mọi stylesheet ở local đều khác
     origin (127.0.0.1 vs localhost) nên cssRules bị chặn. */
  background: #eef2f6 !important;
  color: var(--ao-muted) !important;
  border-color: var(--ao-rule-soft);
  cursor: default;
}
/* Bỏ luôn hiệu ứng focus vàng: ô không sửa được mà sáng lên như đang nhập thì sai tín hiệu. */
.gcl-ao-input--readonly:focus {
  border-color: var(--ao-rule-soft); box-shadow: none;
}
.gcl-ao-error { color: var(--ao-danger); font-size: 13px; margin: 6px 0 0; }
.gcl-ao-email-suggest { margin: 6px 0 0 !important; }
.gcl-ao-email-suggest .gcl-ao-link { padding: 0 0 0 4px; }
/* Ô lỗi phải đổi sang nét LIỀN: nét đứt là ngôn ngữ của "ô trống, thả ảnh vào đây",
   giữ nét đứt mà đổi màu đỏ thì đọc như ô rỗng chứ không ra lỗi. */
.gcl-ao-input.is-invalid, .gcl-ao-upload.is-invalid {
  border-color: var(--ao-danger); border-style: solid;
}
.gcl-ao-input.is-invalid:focus { box-shadow: inset 0 0 0 1px var(--ao-danger); }

.gcl-ao-field--check { margin-top: 18px; }
.gcl-ao-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; cursor: pointer; color: var(--ao-ink-2);
  padding: 13px 14px; border: 1px solid var(--ao-rule); border-radius: var(--ao-radius);
  transition: border-color .15s ease, background .15s ease;
}
.gcl-ao-check:hover { border-color: var(--ao-gold); background: var(--ao-gold-tint); }
.gcl-ao-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--ao-gold-deep); flex: 0 0 auto; }

/* ── hình thức ký hợp đồng (24/09/2026): hai thẻ, ghi chú NGAY DƯỚI tên từng cách ──
   Tô thẻ đang chọn bằng class .is-selected do form.js gắn, không dùng :has() — webview
   Android cũ của khách chưa hỗ trợ. Viền đỏ đặt trên cả khối khi chưa chọn gì. */
.gcl-ao-sign-types { display: grid; gap: 10px; }
@media (min-width: 640px) {
  .gcl-ao-sign-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcl-ao-sign-types > .gcl-ao-error { grid-column: 1 / -1; }
}
.gcl-ao-sign-type__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gcl-ao-sign-type__title { font-weight: 700; color: var(--ao-ink); }
.gcl-ao-sign-type__note { font-size: 13px; line-height: 1.5; color: var(--ao-muted); }
.gcl-ao-sign-type__note b { color: var(--ao-ink-2); font-weight: 600; }
.gcl-ao-sign-type.is-selected { border-color: var(--ao-gold-deep); background: var(--ao-gold-tint); box-shadow: inset 0 0 0 1px var(--ao-gold-deep); }
.gcl-ao-sign-types.is-invalid .gcl-ao-sign-type { border-color: var(--ao-danger); }

/* ── ô tải ảnh: mang ĐÚNG tỉ lệ của giấy tờ thật ────────────────────────── */
.gcl-ao-upload {
  position: relative;
  border: 1px dashed #b9c8d4;
  border-radius: var(--ao-radius);
  background: #fbfdfe;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
/* Ba ô CÙNG bề ngang, CÙNG tỉ lệ ngang — Holland chọn phương án C (2026-09-08).
   Đánh đổi đã biết: ô chân dung không còn mang hình dáng ảnh đứng. Bù lại preview
   ảnh chân dung để CONTAIN chứ không cover — cover sẽ cắt ngang mặt khi khách bỏ
   ảnh selfie dọc vào ô ngang, đúng lỗi đã gặp với ảnh mẫu lần trước. */
.gcl-ao-upload__body { aspect-ratio: 1.585 / 1; }
.gcl-ao-uploads { display: grid; gap: 14px; margin-top: 4px; }
.gcl-ao-grid--compact { margin-bottom: 22px; }
@media (min-width: 620px) {
  .gcl-ao-uploads { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
/* Mobile: một cột nên ô chiếm trọn bề ngang -> cao hơn 220px, quá to (Holland).
   Bỏ tỉ lệ, khoá chiều cao cho gọn; ảnh mẫu vẫn contain nên thấy trọn. */
@media (max-width: 619px) {
  .gcl-ao-upload__body { aspect-ratio: auto; height: 124px; }
}
.gcl-ao-upload:hover { border-color: var(--ao-gold); background: var(--ao-gold-tint); }
.gcl-ao-upload.has-file { border-style: solid; border-color: var(--ao-verified); background: var(--ao-paper); }
.gcl-ao-upload.is-loading { opacity: .6; pointer-events: none; }
.gcl-ao-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.gcl-ao-upload__body {
  position: relative; display: grid; place-items: center; padding: 12px;
  /* Ảnh mẫu giấy tờ nằm dưới, làm mờ để chữ đè lên vẫn đọc được — form cũ in chữ
     đen thẳng lên ảnh nên câu "Maximum upload size" gần như không đọc nổi. */
  /* contain, KHÔNG cover: ảnh mẫu chân dung là ảnh đứng, cover cắt mất mặt người
     (thấy rõ trên ảnh chụp — cằm và đỉnh đầu bị xén). Mục đích của ảnh này là cho
     khách NHÌN RA giấy tờ, nên phải thấy trọn vẹn. */
  background-image: var(--ao-illus);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.gcl-ao-upload__body::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.38);
  transition: background .18s ease;
}
.gcl-ao-upload:hover .gcl-ao-upload__body::before { background: rgba(255,255,255,.26); }
.gcl-ao-upload.has-file .gcl-ao-upload__body::before { display: none; }
.gcl-ao-upload.has-file .gcl-ao-upload__body { background-image: none; }
.gcl-ao-upload__placeholder { position: relative; text-align: center; color: #33475b; text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.gcl-ao-upload__icon {
  /* Ẩn: ảnh mẫu đã cho biết bỏ GÌ vào, dòng chữ đã cho biết LÀM GÌ. Thêm dấu cộng
     là tín hiệu thứ ba, lại nằm đè lên ảnh mẫu (thấy rõ khi chụp màn hình). */
  display: none;
}
.gcl-ao-upload:hover .gcl-ao-upload__icon { color: var(--ao-gold-deep); }
.gcl-ao-upload__text {
  font-size: 13px;
  /* Chữ nằm trên ảnh mẫu -> kẻ một dải nền mờ phía sau cho dễ đọc. Form CŨ in chữ
     đen thẳng lên ảnh nên dòng "Maximum upload size" gần như không đọc nổi. */
  background: rgba(255,255,255,.92); padding: 5px 12px; border-radius: 20px;
}
/* CONTAIN, không cover: ô trên mobile cao 124px (tỉ lệ ~2.7) còn ảnh giấy tờ ~1.5,
   cover sẽ xén mất hai đầu — Holland chụp lại đúng ca này, thẻ bị cắt cụt. Khách phải
   NHÌN ĐƯỢC TRỌN ảnh vừa chụp mới biết có phải chụp lại không. */
.gcl-ao-upload__preview {
  /* ĐỊNH VỊ TUYỆT ĐỐI, không để ảnh tự quyết chiều cao. __body là grid + place-items:
     center nên <img> thành grid item CĂN GIỮA, không kéo giãn -> height:100% không
     ăn, ảnh lấy chiều cao theo tỉ lệ gốc. Đo được: ô 343x126 nhưng thẻ <img> 317x423,
     tràn ra ngoài rồi bị overflow:hidden xén — nhìn y như bị crop sai, dù object-fit
     đã là contain (contain chỉ có tác dụng TRONG khung của chính thẻ img).
     inset:0 ép thẻ img đúng bằng khung, contain mới thật sự hiện trọn ảnh. */
  position: absolute; inset: 0;
  /* !important vì THEME ép img { height: auto } toàn site. Không có nó thì thẻ img
     lấy chiều cao theo tỉ lệ ảnh gốc (đo: 454.66px = 341 x 2560/1920) trong ô chỉ
     cao 124px -> tràn ra và bị overflow:hidden xén ngang. Đã đo tận tay: gắn
     !important là về đúng 124px. Chỉ ép đúng thẻ ảnh xem trước này, không đụng img
     nào khác. */
  width: 100% !important; height: 100% !important;
  object-fit: contain; display: block;
  background: #f2f6f9;
}
/* Ô chân dung vốn đã contain sẵn ở trên — gộp về một luật, khỏi hai chỗ đá nhau. */
.gcl-ao-upload__clear {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 28px; height: 28px; border-radius: var(--ao-radius); border: 0;
  background: rgba(15,34,51,.78); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.gcl-ao-upload__clear:hover { background: var(--ao-danger); }
/* ĐANG TẢI ẢNH — phải NHÌN LÀ BIẾT, không phải một sợi chỉ 2px dưới đáy ô.
   Khách trong webview 4G gửi ảnh ~400KB mất 6-8 giây; không thấy gì nhúc nhích thì
   tưởng treo và bấm lại. Phủ mờ cả ô + số phần trăm ở giữa + thanh dày dưới đáy. */
.gcl-ao-upload__progress {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .74);
  border-radius: inherit;
}
.gcl-ao-upload__pct {
  font-size: 13px; font-weight: 600; color: var(--ao-ink);
  background: #fff; padding: 6px 14px; border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  font-variant-numeric: tabular-nums;   /* số nhảy không làm viên pill giật */
}
.gcl-ao-upload__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--ao-rule-soft); overflow: hidden;
}
.gcl-ao-upload__bar > span {
  display: block; height: 100%; width: 30%; background: var(--ao-gold);
  animation: ao-scan 1.1s infinite ease-in-out;
}
/* Khi đã có phần trăm THẬT từ XHR: bỏ vệt chạy, để bề rộng nói đúng tiến độ.
   Vệt chạy chỉ dành cho lúc chưa đo được (trình duyệt không báo tiến độ gửi lên). */
.gcl-ao-upload__progress.is-measured .gcl-ao-upload__bar > span { animation: none; width: 0; transition: width .15s linear; }
@keyframes ao-scan { 0% { transform: translateX(-110%) } 100% { transform: translateX(440%) } }

/* ── nút ────────────────────────────────────────────────────────────────── */
.gcl-ao-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px;
  padding: 13px 24px; font-size: 15px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; border-radius: var(--ao-radius); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gcl-ao-btn--primary { background: var(--ao-gold); color: #241a00; }
.gcl-ao-btn--primary:hover:not(:disabled) { background: var(--ao-gold-deep); }
.gcl-ao-btn--ghost { background: var(--ao-paper); color: var(--ao-ink-2); border-color: var(--ao-rule); }
.gcl-ao-btn--ghost:hover:not(:disabled) { border-color: var(--ao-ink-2); color: var(--ao-ink); }
.gcl-ao-btn:disabled { opacity: .5; cursor: not-allowed; }

/* CỘT CHỨA FORM PHẢI LÀ FLEX COLUMN — GỐC RỄ CỦA "KHOẢNG TRỐNG BÊN PHẢI".
 * Elementor lưu flex_direction=column cho cột #box-form và có in ra biến
 * --flex-direction: column, NHƯNG trên trang này không rule nào đọc biến đó cho phần
 * tử ấy, nên nó rơi về mặc định `row`. Trong hàng flex, widget là flex item với
 * flex: 0 1 auto ⇒ rộng bằng NỘI DUNG, không giãn ra hết cột.
 *
 * Đo trên stage, mạng Slow 3G (400kbps/400ms):
 *     1.5s  CSS này chưa tải   form 782 / cột 819   (chữ dài nên trông như đầy)
 *     2.5s  CSS đã tải         form 548 / cột 819   ← hụt 251px, đúng ảnh khách chụp
 *     6.0s  JS VẪN chưa chạy   form 548             ← nên không thể trông cậy vào JS
 *
 * Trước đây chỗ này vá bằng JS (fillHostWidth ép width:100%), nghĩa là khoảng trống
 * nằm đó tới khi script chạy xong — trên máy yếu/mạng chậm là vài giây. Sửa bằng CSS
 * thì đúng ngay từ lần vẽ đầu tiên và không phụ thuộc script nào. */
#box-form {
    display: flex;
    flex-direction: column;
}

/* KHOÁ NÚT HÀNH ĐỘNG CHO TỚI KHI JS GẮN XONG HANDLER (fail-closed).
 * Cùng lối với `#file43_dropzone:not(.gcl-cam-ready)` bên form prod: CSS nằm ở <head>
 * còn JS ở footer, nên luôn có một khoảng hở mà nút đã hiện ra nhưng chưa ai lắng nghe
 * — khách bấm thì KHÔNG CÓ GÌ XẢY RA, đọc y như site hỏng. Trên stage khoảng hở đó đo
 * được 1633ms (HTML) -> 1665ms (form.js), và tệ hơn nhiều trên webview/máy yếu.
 * JS init xong gắn .is-ready để mở khoá; JS chết thì nút khoá NHÌN THẤY ĐƯỢC (mờ + vòng
 * xoay) thay vì im lặng nuốt cú bấm.
 * Hiệu ứng lấy đúng của prod (.gcl-btn-loading): làm mờ + vòng xoay 14px sau nhãn,
 * KHÔNG thay chữ — mất nhãn thì khách không còn biết nút đó là nút gì. */
.gcl-ao:not(.is-ready) .gcl-ao-btn--primary {
    pointer-events: none;
    opacity: .6;
    position: relative;
}
.gcl-ao:not(.is-ready) .gcl-ao-btn--primary::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(0, 0, 0, .25);
    border-top-color: rgba(0, 0, 0, .75);
    border-radius: 50%;
    animation: gcl-ao-spin .7s linear infinite;
}
@keyframes gcl-ao-spin { to { transform: rotate(360deg); } }

/* Ô TẢI ẢNH cũng khoá trong khoảng hở đó, và NÓI RA là đang tải.
 * Form prod làm đúng việc này (ba ô hiện chữ "Đang tải…") — chỉ là ở đó ô trống trơn
 * màu xám nên nhìn như hỏng. Giữ nguyên ảnh mẫu giấy tờ, chỉ làm mờ thêm và đổi chữ
 * trong viên pill sẵn có: khách vẫn thấy ô nào là ô gì, và biết vì sao chưa bấm được.
 * font-size:0 để giấu chữ cũ rồi in lại bằng ::before — không cần JS, không cần :has(),
 * nên có tác dụng NGAY TỪ LÚC VẼ TRANG, trước khi mọi script chạy. */
.gcl-ao:not(.is-ready) .gcl-ao-upload { pointer-events: none; }
.gcl-ao:not(.is-ready) .gcl-ao-upload__body::before { background: rgba(255, 255, 255, .62); }
.gcl-ao:not(.is-ready) .gcl-ao-upload__text { font-size: 0; color: var(--ao-ink-2); }
.gcl-ao:not(.is-ready) .gcl-ao-upload__text::before {
    content: 'Đang tải…';
    font-size: 13px;
}
.gcl-ao:not(.is-ready) .gcl-ao-upload__text::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 7px;
    vertical-align: -1px;
    border: 2px solid rgba(0, 0, 0, .18);
    border-top-color: rgba(0, 0, 0, .55);
    border-radius: 50%;
    animation: gcl-ao-spin .7s linear infinite;
}
.gcl-ao-btn:focus-visible { outline: 2px solid var(--ao-ink); outline-offset: 2px; }

.gcl-ao-actions { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ao-rule-soft); }
.gcl-ao-actions--split { display: grid; gap: 12px; }
@media (min-width: 620px) { .gcl-ao-actions--split { grid-template-columns: minmax(120px, 1fr) 2fr; } }
.gcl-ao-link { background: none; border: 0; color: var(--ao-ink-2); cursor: pointer; font-size: 13px; font-family: inherit; padding: 6px 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.gcl-ao-link:hover { color: var(--ao-ink); }

/* ── thông báo ──────────────────────────────────────────────────────────── */
.gcl-ao-notice {
  padding: 12px 14px; border-radius: var(--ao-radius); margin-bottom: 20px;
  font-size: 14px; border-left: 3px solid; background: #f6f9fb; color: var(--ao-ink-2);
}
.gcl-ao-notice.is-info    { border-color: #3f7fb3; }
.gcl-ao-notice.is-warn    { border-color: var(--ao-gold); background: var(--ao-gold-tint); color: #6b4a00; }
.gcl-ao-notice.is-error   { border-color: var(--ao-danger); background: #fdf3f2; color: #7d1c15; }
.gcl-ao-notice.is-success { border-color: var(--ao-verified); background: #f1f9f5; color: #0c5c3a; }

/* Ô thông báo của từng bước — nằm NGAY TRÊN nút bấm của bước đó (xem chú thích trong
   form-account-opening.php). Sát nút chứ không phải đầu form, nên margin dồn xuống dưới. */
.gcl-ao-step-notice { margin-top: 24px; margin-bottom: 0; }
/* Cỡ chữ đặt THẲNG lên <p>/<li>: theme đè `p`/`li` lên 22.4px (desktop) / 19.6px (mobile), nên
   14px của .gcl-ao-notice không bao giờ tới được chữ — ô lỗi to gấp rưỡi thiết kế (đo 24/09/2026).
   Lỗi vẫn nổi bật nhờ nền đỏ + chữ đậm, không cần chữ to. */
/* Ô lỗi: 15/14px -> 16/15px (24/09/2026, Holland: "to lên xíu"). */
.gcl-ao-step-notice__msg { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.45; }
/* Thông báo TIẾN TRÌNH (is-info: "Đang đọc thông tin trên giấy tờ…", "Đang đối chiếu khuôn mặt…")
   là lời nhắn đang chờ, không phải lỗi — gọn lại: vừa khít chữ thay vì kéo hết bề ngang, chữ 15px
   thường. Phải ghi cỡ chữ lên CHÍNH thẻ <p>: theme đè `p` lên 22.4px (desktop) / 19.6px (mobile),
   nên cỡ chữ đặt ở khung ngoài không ăn (đo 24/09/2026). Lỗi (is-error) giữ nguyên cỡ to — nó phải
   nổi bật. */
.gcl-ao-step-notice.is-info { width: fit-content; max-width: 100%; padding: 9px 14px; }
/* 13px -> 15px (24/09/2026, Holland: "hơi nhỏ") — bằng dòng lỗi và chữ ô thành công. */
.gcl-ao-step-notice.is-info .gcl-ao-step-notice__msg { font-size: 15px; font-weight: 500; line-height: 1.45; }
/* 3 class (0,3,0) để thắng `[data-elementor-type="wp-page"] .elementor-widget-container ul
   { margin-left: 25px }` (0,2,1) của flatsome/renew/css/styles.css — nó đẩy danh sách thụt vào 25px. */
.gcl-ao .gcl-ao-step-notice .gcl-ao-step-notice__list { margin: 8px 0 0; padding: 0; list-style: none; }
.gcl-ao-step-notice__list li {
  font-size: 15px; line-height: 1.45; margin: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, .07); font-weight: 400;
}
/* Vùng bấm đủ rộng cho ngón tay (≥44px theo chiều ngang + padding dọc), và không bao giờ
   bị xuống dòng thành hai chữ rời nhau. */
.gcl-ao-step-notice__jump {
  flex: none; background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; min-width: 44px; text-align: right;
}

/* ── lớp phủ: bóng đổ CHỈ xuất hiện ở đây, nơi độ cao là thật ───────────── */
#gcl-ao-resume, .gcl-ao-otp {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15, 34, 51, .55);
  display: grid; place-items: center; padding: 18px;
}
.gcl-ao-otp { display: none; }
.gcl-ao-otp.is-open { display: grid; }
.gcl-ao-resume__box, .gcl-ao-otp__box {
  position: relative; background: var(--ao-paper);
  border-radius: var(--ao-radius); padding: 26px 24px;
  width: 100%; max-width: 400px;
  box-shadow: 0 20px 48px rgba(15,34,51,.28);
}
.gcl-ao-resume__title, .gcl-ao-otp__title { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--ao-ink); }
.gcl-ao-resume__desc { margin: 0 0 20px; color: var(--ao-ink-2); font-size: 14px; }
.gcl-ao-resume__actions { display: grid; gap: 10px; }

/* ── modal OTP ──────────────────────────────────────────────────────────── */
.gcl-ao-otp__close { position: absolute; top: 14px; right: 14px; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ao-muted); line-height: 1; padding: 4px; }
.gcl-ao-otp__close:hover { color: var(--ao-ink); }
.gcl-ao-otp__desc { font-size: 14px; margin: 0 0 14px; color: var(--ao-ink-2); }
.gcl-ao-otp__desc b { color: var(--ao-ink); font-variant-numeric: tabular-nums; }
.gcl-ao-otp__method { margin-bottom: 10px; }
.gcl-ao-otp__code-actions, .gcl-ao-otp [data-verify] { margin-top: 14px; }
.gcl-ao-otp__input {
  width: 100%; text-align: center;
  font-size: 24px; letter-spacing: .38em; font-weight: 600; font-family: inherit;
  padding: 14px 12px 14px 22px; color: var(--ao-ink);
  border: 1px solid var(--ao-rule); border-radius: var(--ao-radius); margin-bottom: 12px;
}
.gcl-ao-otp__input:focus { outline: none; border-color: var(--ao-gold); box-shadow: inset 0 0 0 1px var(--ao-gold); }
.gcl-ao-otp__expiry { font-size: 13px; color: var(--ao-muted); margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.gcl-ao-otp__expiry.is-soon { color: var(--ao-gold-deep); font-weight: 600; }
.gcl-ao-otp__expiry.is-expired { color: var(--ao-danger); font-weight: 600; }
.gcl-ao-otp__msg { font-size: 13px; padding: 10px 12px; margin: 0 0 14px; border-left: 3px solid; background: #f6f9fb; color: var(--ao-ink-2); line-height: 1.5; }
.gcl-ao-otp__msg.is-info  { border-color: #3f7fb3; }
.gcl-ao-otp__msg.is-warn  { border-color: var(--ao-gold); background: var(--ao-gold-tint); color: #6b4a00; }
.gcl-ao-otp__msg.is-error { border-color: var(--ao-danger); background: #fdf3f2; color: #7d1c15; }
.gcl-ao-otp__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; margin-top: 6px; }
.gcl-ao-otp__msg.is-success { border-color: var(--ao-verified); background: #eef8f3; color: #0b5a39; }
.gcl-ao-otp__msg.is-pending { border-color: var(--ao-gold); background: var(--ao-gold-tint); color: #6b4a00; }

/* (16/09) Loading THẤY ĐƯỢC trong modal OTP. "Gửi lại mã" là link chữ 13px — chỉ đổi chữ
 * thì trên điện thoại vẫn dễ lọt mắt, nên: vòng xoay ngay cạnh chữ + dòng "Đang gửi lại
 * mã…" có vòng xoay trong ô thông báo ở đầu modal. Vòng xoay dùng currentColor để đứng
 * được trên cả nút Zalo (chữ trắng) lẫn nút SMS (chữ tối). */
.gcl-ao-otp .is-busy { pointer-events: none; }
.gcl-ao-otp .is-busy::after,
.gcl-ao-otp__msg.is-pending::before {
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: gcl-ao-spin .7s linear infinite;
}
.gcl-ao-otp .is-busy::after { margin-left: 8px; }
.gcl-ao-otp__msg.is-pending::before { margin-right: 8px; }
.gcl-ao-link.is-busy { color: var(--ao-ink); text-decoration: none; font-weight: 600; }
.gcl-ao-link:disabled:not(.is-busy) { color: var(--ao-muted); cursor: default; text-decoration: none; }
/* Nút đổi kênh nằm NGAY TRONG ô báo lỗi — chỗ khách đang đọc. */
.gcl-ao-otp__msg-action {
  display: block; width: 100%; margin-top: 10px; padding: 10px 14px;
  border: 1px solid transparent; border-radius: var(--ao-radius-sm);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.gcl-ao-otp__msg-action--zalo { background: #0068FF; border-color: #0068FF; color: #fff; }
.gcl-ao-otp__msg-action--sms  { background: var(--ao-gold); border-color: var(--ao-gold); color: #241a00; }

@media (prefers-reduced-motion: reduce) {
  .gcl-ao *, .gcl-ao *::before, .gcl-ao *::after { transition: none !important; animation: none !important; }
}

/* ── ép chụp chân dung bằng camera ────────────────────────────────────────
   FAIL-CLOSED: ô chân dung khoá sẵn, camera.js chạy được mới gắn .gcl-cam-ready
   để mở. Nếu file đó lỗi/không nạp được thì ô KHÔNG mở thư viện ảnh — thà khách
   không nộp được còn hơn nộp được ảnh người khác. */
.gcl-ao-upload[data-upload="portrait"]:not(.gcl-cam-ready) .gcl-ao-upload__input {
  pointer-events: none;
}

.gcl-cam-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: none; place-items: center;
  background: rgba(9, 20, 30, .82); padding: 16px;
}
.gcl-cam-overlay.gcl-cam-show { display: grid; }
.gcl-cam-card {
  width: 100%; max-width: 420px;
  background: var(--ao-paper, #fff); border-radius: 14px; padding: 16px;
  font-family: inherit; text-align: center;
}
.gcl-cam-banner {
  font-size: 13px; line-height: 1.45; color: #3d5266;
  margin-bottom: 12px; min-height: 38px;
}
.gcl-cam-banner.gcl-cam-good { color: #0f7a4d; }
.gcl-cam-banner.gcl-cam-bad { color: #b3261e; }
.gcl-cam-stage {
  position: relative; aspect-ratio: 3 / 4; margin-bottom: 14px;
  background: #0d1b26; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
}
.gcl-cam-stage canvas, .gcl-cam-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.gcl-cam-stage.gcl-cam-live canvas { display: block; }
.gcl-cam-stage.gcl-cam-shot canvas { display: none; }
.gcl-cam-stage.gcl-cam-shot img { display: block; }
.gcl-cam-msg { position: relative; color: #8fa3b3; font-size: 13px; padding: 0 18px; }
.gcl-cam-stage.gcl-cam-live .gcl-cam-msg,
.gcl-cam-stage.gcl-cam-shot .gcl-cam-msg { display: none; }
/* khung ngắm khuôn mặt — chỉ là gợi ý căn hình, không chặn gì */
.gcl-cam-guide {
  position: absolute; left: 50%; top: 46%;
  width: 58%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,255,255,.5); border-radius: 50%;
  pointer-events: none; display: none;
}
.gcl-cam-stage.gcl-cam-live .gcl-cam-guide { display: block; }
.gcl-cam-row { display: flex; gap: 10px; justify-content: center; }
.gcl-cam-btn {
  flex: 1; padding: 12px 16px; border: 1px solid transparent;
  border-radius: var(--ao-radius, 10px); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  background: var(--ao-gold, #f5a800); color: #241a00;
}
.gcl-cam-btn:disabled { opacity: .5; cursor: default; }
.gcl-cam-btn.gcl-cam-ghost { background: transparent; border-color: #d8e2ea; color: #3d5266; }
.gcl-cam-close {
  margin-top: 12px; background: none; border: 0; cursor: pointer;
  color: #6b7f91; font-family: inherit; font-size: 14px; text-decoration: underline;
}
.gcl-cam-hidden { display: none !important; }

/* Nút phụ nhỏ (thêm tài khoản ngân hàng…) — không tranh chú ý với nút hành động chính. */
.gcl-ao-btn--sm {
  padding: 9px 14px; font-size: 14px; width: auto; margin-top: 4px;
}
.gcl-ao-bank-extra { margin-top: 4px; }


/* Nhóm ngân hàng phụ: cho XOÁ được, không thì mở nhầm là kẹt luôn ô trống. */
.gcl-ao-bank-extra { position: relative; }
.gcl-ao-bank-remove {
  position: absolute; top: -4px; right: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--ao-muted); font-family: inherit; font-size: 13px;
  text-decoration: underline; padding: 2px 4px;
}
.gcl-ao-bank-remove:hover { color: var(--ao-danger); }

/* Mã gợi ý: 3 ô một hàng (6 mã = 2 hàng) cho gọn, thay vì 6 hàng dọc. */
.gcl-ao-codes__grid { display: grid; gap: 10px; }
@media (min-width: 620px) {
  .gcl-ao-codes__grid { grid-template-columns: repeat(3, 1fr); }
}
.gcl-ao-code-modes { display: grid; gap: 8px; margin-bottom: 12px; }
@media (min-width: 620px) {
  .gcl-ao-code-modes { grid-template-columns: repeat(2, minmax(0, 240px)); }
}

/* Ô tự nhập mã: tiền tố dính liền bên trái, nhìn ra ngay đây là một mã liền mạch. */
.gcl-ao-code-input { display: flex; align-items: stretch; }
.gcl-ao-code-input__prefix {
  display: inline-grid; place-items: center;
  padding: 0 12px;
  border: 1px solid var(--ao-rule); border-right: 0;
  border-radius: var(--ao-radius) 0 0 var(--ao-radius);
  background: #eef2f6; color: var(--ao-ink-2);
  font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gcl-ao-code-input__prefix:empty { display: none; }
.gcl-ao-code-input__prefix:empty + .gcl-ao-input { border-radius: var(--ao-radius); }
.gcl-ao-code-input .gcl-ao-input { border-radius: 0 var(--ao-radius) var(--ao-radius) 0; }

/* ── màn hình sau khi gửi hồ sơ thành công ───────────────────────────────── */
.gcl-ao-done {
  padding: 20px 22px;
  border: 1px solid var(--ao-gold);
  border-radius: var(--ao-radius);
  background: #fffdf7;
}
.gcl-ao-done__title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--ao-ink); }
.gcl-ao-done p { margin: 0 0 12px; color: var(--ao-ink-2); font-size: 15px; line-height: 1.6; }
.gcl-ao-done p:last-child { margin-bottom: 0; }
.gcl-ao-done b { color: var(--ao-ink); }
/* Danh sách 2 email + dòng pháp lý (24/09/2026). 3 class để thắng rule ul/ol 25px của theme. */
/* Số 1./2. tự vẽ bằng counter: theme đặt list-style:none thẳng lên <li> nên `list-style: decimal` ở <ol>
   không hiện được số nào (Holland chụp 24/09). "1." = thư ký — thứ tự là mức ưu tiên. */
.gcl-ao .gcl-ao-done .gcl-ao-done__mails { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: gcl-ao-mail; }
.gcl-ao .gcl-ao-done .gcl-ao-done__mails li {
  position: relative; margin: 0 0 6px; padding-left: 24px; list-style: none; counter-increment: gcl-ao-mail;
  font-size: 15px; line-height: 1.55; color: var(--ao-ink-2);
}
.gcl-ao .gcl-ao-done .gcl-ao-done__mails li::before {
  content: counter(gcl-ao-mail) "."; position: absolute; left: 2px; top: 0;
  font-weight: 700; color: var(--ao-gold-deep);
}
.gcl-ao-done .gcl-ao-done__mails-lead { margin-bottom: 6px; }
.gcl-ao-done .gcl-ao-done__legal { font-size: 13px; color: var(--ao-muted); }
.gcl-ao-done__code {
  display: inline-block; padding: 8px 16px; margin-bottom: 14px !important;
  background: var(--ao-gold-tint); border: 1px solid var(--ao-gold);
  border-radius: var(--ao-radius); font-variant-numeric: tabular-nums;
}

/* ── ký ngay tại màn hình (25/09/2026) ───────────────────────────────────── */
/* A: vòng xoay cạnh "Đang khởi tạo hợp đồng…". Cùng keyframes với nút đang bận. */
.gcl-ao-done__spinner {
  display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px;
  border: 2px solid var(--ao-gold); border-right-color: transparent; border-radius: 50%;
  animation: gcl-ao-spin .7s linear infinite;
}
.gcl-ao-done .gcl-ao-done__wait-video { font-size: 14px; color: var(--ao-muted); }
/* B: nút là thẻ <a> — theme tô gạch chân + màu link cho mọi <a> trong bài viết, 3 class để thắng. */
.gcl-ao .gcl-ao-done .gcl-ao-signnow__btn {
  margin: 4px 0 8px; font-size: 16px; font-weight: 700; text-decoration: none; color: #241a00;
}
.gcl-ao .gcl-ao-done .gcl-ao-signnow__btn:hover { color: #241a00; text-decoration: none; }
.gcl-ao-done .gcl-ao-signnow__how { font-size: 14px; text-align: center; }
/* C: câu báo trễ đứng ngay dưới tiêu đề. */
.gcl-ao-done .gcl-ao-done__late { color: var(--ao-ink); font-weight: 600; }
/* Ô trạng thái màn chờ ký (25/09): y hệt ô tiến trình bước 1 (.gcl-ao-step-notice.is-info) — vừa khít
   chữ, 15px thường. Cỡ chữ đặt lên CHÍNH thẻ <p> vì theme đè `p` lên 19.6–22.4px. */
/* Ngay dưới tiêu đề (25/09): viền xanh cả 4 cạnh + chữ 16px đậm — Holland: "to thêm xíu, vô viền xanh". */
.gcl-ao .gcl-ao-done .gcl-ao-done__wait {
  width: fit-content; max-width: 100%; padding: 9px 14px; margin: 0 0 14px;
  border: 1.5px solid #3f7fb3; border-left-width: 4px; background: #f3f8fc;
}
.gcl-ao .gcl-ao-done .gcl-ao-done__wait .gcl-ao-step-notice__msg { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: #1f4e79; }
.gcl-ao-done__wait.is-fresh { animation: gcl-ao-fade-in .5s ease; }
@keyframes gcl-ao-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
/* Nút đang mở trang ký: vòng xoay nhỏ cạnh chữ, vẫn bấm được. */
.gcl-ao .gcl-ao-done .gcl-ao-signnow__btn.is-loading { opacity: .85; }
.gcl-ao-signnow__spin {
  display: inline-block; width: 16px; height: 16px; margin-right: 10px;
  border: 2px solid #241a00; border-right-color: transparent; border-radius: 50%;
  animation: gcl-ao-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gcl-ao-done__spinner, .gcl-ao-signnow__spin { animation: none; }
  .gcl-ao-done__wait.is-fresh { animation: none; }
}

/* Trong Zalo (25/09): hộp hướng dẫn khi chưa mở được trình duyệt. */
.gcl-ao .gcl-ao-done .gcl-ao-signnow__help { margin: 4px 0 14px; }
.gcl-ao .gcl-ao-done .gcl-ao-signnow__help p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; color: inherit; }
.gcl-ao .gcl-ao-done .gcl-ao-signnow__help .gcl-ao-btn { margin-bottom: 8px; }
.gcl-ao .gcl-ao-done .gcl-ao-signnow__help .gcl-ao-signnow__copied { font-size: 14px; color: #0c5c3a; }
.gcl-ao .gcl-ao-done .gcl-ao-signnow__help .gcl-ao-signnow__stay { font-size: 13px; color: var(--ao-muted); text-align: center; margin: 4px 0 0; }
.gcl-ao .gcl-ao-done .gcl-ao-signnow__stay a { color: var(--ao-muted); text-decoration: underline; }

/* ── hướng dẫn ký VNeID ở màn thành công ─────────────────────────────────── */
/* Khung 16:9 dù nguồn là YouTube Shorts: player nhúng (/embed/<id>) LUÔN dựng khung
   16:9 của nó rồi thu video dọc vào giữa — cho khung 9:16 thì phần dưới là một mảng
   đen cao bằng nửa màn hình (đã chụp thấy trên stage 16/09). Hẹp lại để không chiếm
   cả bề ngang. */
.gcl-ao-guide {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--ao-gold);
}
.gcl-ao-guide__title { margin: 0 0 10px; font-weight: 700; color: var(--ao-ink); font-size: 15px; }
.gcl-ao-guide__video {
  position: relative; width: 100%; max-width: 360px;
  aspect-ratio: 16 / 9; border-radius: var(--ao-radius); overflow: hidden;
  background: #000;
}
.gcl-ao-guide__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gcl-ao-guide__hint { margin: 10px 0 0 !important; font-size: 14px; }
.gcl-ao-guide__link { color: #b45309; font-weight: 700; text-decoration: underline; }

/* ── popup OTP: bám theo bản đang chạy trên prod ─────────────────────────── */
.gcl-ao-otp__lead { margin: 0 0 4px; text-align: center; color: var(--ao-ink-2); font-size: 15px; }
.gcl-ao-otp__phone {
  margin: 0 0 18px; text-align: center;
  font-size: 18px; font-weight: 700; color: var(--ao-ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gcl-ao-otp__zalo-ico { display: block; width: 20px; height: 20px; }
/* display:block ở trên thắng luật [hidden] của trình duyệt -> phải nói rõ. */
.gcl-ao-otp__zalo-ico[hidden] { display: none; }
.gcl-ao-otp__note {
  margin: 12px 0; text-align: center;
  color: var(--ao-muted); font-size: 13px; line-height: 1.5;
}
.gcl-ao-otp__method {
  display: block; width: 100%;
  padding: 13px 16px; border: 1px solid transparent;
  border-radius: var(--ao-radius); cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600;
}
.gcl-ao-otp__method:disabled { opacity: .55; cursor: default; }
/* Xanh thương hiệu Zalo — cùng mã màu với popup trên prod. */
.gcl-ao-otp__method--zalo { background: #0068FF; border-color: #0068FF; color: #fff; }
.gcl-ao-otp__method--sms  { background: var(--ao-gold); border-color: var(--ao-gold); color: #241a00; }
.gcl-ao-otp__dismiss { margin: 16px 0 0; text-align: center; }
.gcl-ao-otp__dismiss button {
  background: none; border: 0; cursor: pointer;
  color: var(--ao-muted); font-family: inherit; font-size: 15px;
}
.gcl-ao-otp__dismiss button:hover { color: var(--ao-ink-2); }