/* Modal đăng ký khóa học — .reg-modal* + .rf-* tách từ sales-b2b-webmaster.css
   để trang khác dùng lại popup mà KHÔNG phải nạp cả design system của LDP đó
   (nạp cả file làm .btn/.wrap/.hero/:root của trang bị ghi đè). */

/* Biến modal cần — khai báo tại chỗ (scope .reg-modal-overlay) để file tự đủ,
   không phụ thuộc :root của LDP nào. Giá trị lấy nguyên từ sales-b2b-webmaster.css
   để popup trông y hệt trên mọi trang dùng lại. */
.reg-modal-overlay {
  --dgreen: #006633;
  --ink-2: #3C4F45;
  --lime-50: #F1F8E6;
  --lime-100: #E3F1CE;
  --muted: #6B7E73;
  --orange: #F37021;
  --orange-600: #DD5F14;
  --radius-lg: 24px;
  --shadow-lg: 0 10px 24px rgba(0,102,51,.1), 0 28px 64px rgba(0,102,51,.13);
}

/* register modal — native Livewire sales-b2b-register-form, pattern matches recruitment-masterclass */
  .reg-modal-overlay {display:none;position:fixed;inset:0;z-index:9999;background:rgba(4,55,30,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;}
.reg-modal-overlay.open {display:flex;}
.reg-modal {position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;}
.reg-modal-head {position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:20px 26px;display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:1;}
.reg-modal-head h3 {font-size:18px;font-weight:900;color:var(--ink);}
.reg-modal-close {width:34px;height:34px;flex:0 0 auto;border-radius:999px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:background .16s ease;}
.reg-modal-close:hover {background:var(--lime-50);}
.reg-modal-body {padding:26px;}
@media(max-width:600px) {
  .reg-modal-overlay {align-items:flex-end;padding:0;}
  .reg-modal {max-width:100%;max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
}
/* register form fields (rendered inside the modal) */
  .rf-field {margin-bottom:16px;}
.rf-row {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rf-label {display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:4px;}
.rf-label .req {color:#EF4444;}
.rf-input,.rf-select,.rf-textarea {width:100%;font-family:inherit;font-size:14px;color:var(--ink);
    border:1px solid #D1D5DB;border-radius:12px;padding:10px 16px;
    transition:border-color .16s ease, box-shadow .16s ease;background:#fff;}
.rf-input:focus,.rf-select:focus,.rf-textarea:focus {outline:none;border-color:var(--dgreen);box-shadow:0 0 0 2px rgba(0,102,51,.22);}
.rf-textarea {resize:vertical;min-height:88px;}
.rf-error {margin-top:4px;font-size:12px;color:#EF4444;}
.rf-success {display:flex;gap:10px;align-items:flex-start;background:var(--lime-50);border:1px solid var(--lime-100);
    color:var(--dgreen);border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:20px;}
.rf-submit {width:100%;justify-content:center;padding:12px 28px;font-size:14px;}
.rf-submit:disabled {opacity:.5;cursor:not-allowed;transform:none;}
/* step wizard indicator */
  .rf-steps {display:flex;align-items:flex-start;justify-content:space-between;gap:4px;margin-bottom:22px;}
.rf-step {display:flex;align-items:center;flex:1;min-width:0;}
.rf-step-inner {display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;}
.rf-step-circle {width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;background:#F3F4F6;color:#9CA3AF;flex:0 0 auto;}
.rf-step-circle.done {background:var(--dgreen);color:#fff;}
.rf-step-circle.active {background:var(--orange);color:#fff;}
.rf-step-label {font-size:10.5px;font-weight:600;color:#9CA3AF;text-align:center;line-height:1.3;}
.rf-step-label.active {color:var(--ink);}
.rf-step-line {flex:1;height:2px;background:#E5E7EB;margin-top:-19px;}
.rf-step-line.done {background:var(--dgreen);}
/* back link */
  .rf-back {display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:#6B7280;font-size:13.5px;font-family:inherit;cursor:pointer;padding:0;margin-bottom:16px;}
.rf-back:hover {color:var(--ink);}
.rf-back svg {width:15px;height:15px;flex:0 0 auto;}
/* radio / checkbox choice list */
  .rf-legend {display:block;width:100%;padding:0;font-size:14px;font-weight:600;color:#374151;margin-bottom:2px;}
.rf-legend-note {font-size:12.5px;color:#6B7280;margin-bottom:6px;}
.rf-choice-list {display:flex;flex-direction:column;gap:2px;margin-top:4px;}
.rf-choice {display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#374151;cursor:pointer;border-radius:10px;padding:7px 8px;transition:background .14s ease;}
.rf-choice:hover {background:var(--lime-50);}
.rf-choice input {margin-top:3px;accent-color:var(--dgreen);flex:0 0 auto;}
.rf-fieldset {border:none;padding:0;margin:0 0 16px;min-width:0;}
/* payment — QR SePay */
  .rf-qr-wrap {text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;}
.rf-qr-img {width:220px;height:220px;max-width:100%;margin:0 auto;border-radius:10px;}
.rf-qr-hint {margin-top:10px;text-align:center;font-size:12.5px;color:var(--muted);}
.rf-bank-box {margin-top:18px;background:#F9FAFB;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:11px;}
.rf-bank-row {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;}
.rf-bank-row span {color:var(--muted);}
.rf-bank-row strong {color:var(--ink);font-weight:700;}
.rf-bank-row-top {padding-top:11px;border-top:1px solid var(--line);}
.rf-amount {color:var(--orange) !important;}
.rf-waiting {margin-top:14px;display:flex;align-items:center;gap:10px;background:#FEF3EB;border:1px solid #FBD9C2;border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--orange-600);}
.rf-waiting-dot {width:8px;height:8px;border-radius:50%;background:var(--orange);flex:0 0 auto;animation:rf-pulse 1.4s ease-in-out infinite;}
.rf-qr-notes {margin-top:14px;font-size:12px;color:var(--muted);line-height:1.7;}
/* success screen */
  .rf-success-wrap {text-align:center;padding:8px 0;}
.rf-success-icon {width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--lime-50);display:flex;align-items:center;justify-content:center;color:var(--dgreen);}
.rf-success-wrap h4 {font-size:18px;font-weight:800;color:var(--ink);}
.rf-success-wrap p {margin-top:10px;font-size:14px;color:var(--ink-2);line-height:1.6;}
@media(max-width:600px) {
  .rf-row {grid-template-columns:1fr;}
}
@media(max-width:600px) {
  .reg-modal-body {padding:20px;}
}