.hvb-callback { padding: 20px 0 48px; scroll-margin-top: 100px; }
.hvb-callback-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 30px; border: 1px solid #e6dfc6; border-radius: 16px; background: #fffbec; }
.hvb-callback-eyebrow { display: block; margin-bottom: 8px; font-size: 12px; line-height: 18px; letter-spacing: .04em; font-weight: 800; color: #806000; }
.hvb-callback-copy h2 { margin: 0 0 10px; color: #2e2f31; font-size: 25px; line-height: 1.3; font-weight: 900; }
.hvb-callback-copy p { margin: 0; color: #58595b; font-size: 15px; line-height: 1.6; }
.hvb-callback-form { margin: 0; min-width: 0; }
.hvb-callback-form label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 800; color: #2e2f31; }
.hvb-callback-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.hvb-callback-field { min-width: 0; }
.hvb-callback-controls { display: grid; grid-template-columns: minmax(0,1fr); margin-top: 16px; }
.hvb-callback-field input, .hvb-callback-field select { min-width: 0; width: 100%; height: 52px; margin: 0; padding: 0 12px; border: 1px solid #a5a6aa; border-radius: 10px; background-color: white; color: #2e2f31; font-size: 16px; font-weight: 700; box-shadow: none; }
.hvb-callback-field input::placeholder { color: #73757a; font-weight: 400; opacity: 1; }
.hvb-callback-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.hvb-callback-controls .hvr-button { height: 52px; min-height: 52px; margin: 0; padding: 0 20px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.hvb-callback-field input:focus-visible, .hvb-callback-field select:focus-visible, .hvb-callback-controls button:focus-visible { outline: 3px solid #806000; outline-offset: 3px; }
.hvb-callback-field [aria-invalid="true"] { border-color: #b42318; }
.hvb-callback-note, .hvb-callback-preview-note { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: #58595b; }
.hvb-callback-preview-note { text-align: center; }
.hvb-callback-status { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #155d38; background: #edf7f0; }
.hvb-callback-status.is-error { color: #8f2018; background: #fff0ed; }
@media(max-width:1000px) { .hvb-callback-card { grid-template-columns: minmax(0,1fr); gap: 22px; } }
@media(max-width:560px) {
 .hvb-callback { padding: 14px 0 32px; }
 .hvb-callback-card { padding: 22px 18px; gap: 20px; border-radius: 14px; }
 .hvb-callback-copy h2 { font-size: 22px; }
 .hvb-callback-fields { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .hvb-callback-controls .hvr-button { width: 100%; }
}
.hvb-callback-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hvb-callback-controls button:disabled { opacity: .65; cursor: wait; }
.hvb-callback-status[hidden] { display: none; }
.hvb-callback-field { scroll-margin-top: 110px; }

/* Hộp thoại thu thông tin bật từ nút gọi: đủ rộng để điền nhanh trên điện thoại,
   không che mất nút đóng. */
.hvb-callback-dialog {
  width: min(520px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
}

.hvb-callback-dialog::backdrop { background: rgba(17, 18, 20, 0.55); }

/* Hộp thoại rộng 520px nên luôn xếp một cột, bất kể màn hình rộng bao nhiêu:
   quy tắc hai cột của khối trên trang đo theo cửa sổ, không theo bề rộng hộp. */
.hvb-callback-card--dialog {
  position: relative;
  display: block;
  padding: 22px 20px 20px;
  border-radius: 18px;
  background: #fff;
}

.hvb-callback-card--dialog .hvb-callback-fields { grid-template-columns: minmax(0, 1fr); }
.hvb-callback-card--dialog .hvb-callback-copy { margin-bottom: 18px; }

/* Trình duyệt không hỗ trợ <dialog> vẫn phải giấu form đi, nếu không nó nằm
   trần giữa trang. */
.hvb-callback-dialog:not([open]) { display: none; }

.hvb-callback-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #5b5f66;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.hvb-callback-skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 12px;
  color: #5b5f66;
  font-size: 14px;
  text-decoration: underline;
}

.hvb-callback-done { text-align: center; padding: 8px 4px 4px; }
.hvb-callback-done h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.hvb-callback-done p { margin: 0 0 16px; color: #5b5f66; font-size: 15px; line-height: 1.5; }