body{ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); min-height: 100vh; }
.register-wrapper .container{ max-width: 1100px; }
.text-wrapper{ padding: 40px 0 10px; }
.text-wrapper .title-register{ color: #0f172a; font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.text-wrapper .desc-register{ font-weight: 600; color: #1e3a5f; font-size: 18px; margin-bottom: 4px; }
.text-wrapper .desc-sub-register{ color: #64748b; font-size: 14px; }

.step-wizard{}
.step-wizard .nav{ width: 100%; max-width: 400px;}
.step-wizard .nav li{ position: relative; text-align: right; }
.step-wizard .nav li:first-child{ max-width: 60px; }
.step-wizard .nav li+li:after{ position: absolute; z-index: 1; top: calc(50% - 1px); width: 100%; height: 3px; left: 0; background-color: #e2e8f0; content: ""; border-radius: 2px; }
.step-wizard .nav .nav-link{ transition: all 0.3s ease; color: #94a3b8; position: relative; z-index: 3; background-color: #ffffff; width: 56px; height: 56px; display: inline-flex; justify-content: center; align-items: center; font-size: 1.5em; font-weight: 700; border: 3px solid #e2e8f0; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.step-wizard .nav .nav-link:hover,
.step-wizard .nav .nav-link:focus,
.step-wizard .nav li.active .nav-link{ background-color: #1e3a5f; color: #ffffff; border-color: #1e3a5f; box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3); transform: scale(1.05); }
.step-wizard .nav li.actived .nav-link{ color: #ffffff; background-color: #2d5282; border-color: #2d5282; }
.step-wizard .nav li.actived:after,
.step-wizard .nav li.active:after{ background-color: #1e3a5f;}

.tab-content{ width: 100%; padding: 35px; max-width: 990px; margin: 0 auto; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); }
.form-wrapper{ border-radius: 12px; border: 1px solid #e2e8f0; width: 100%; padding: 24px; background: #fafbfc; transition: border-color 0.2s ease; }
.form-wrapper:hover{ border-color: #cbd5e1; }
.form-wrapper h5{ color: #1e3a5f; font-weight: 700; font-size: 16px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid rgba(30, 58, 95, 0.15); }
.form-wrapper-main .wrapper-title h4{ color: #0f172a; font-weight: 700; margin-bottom: 20px; }

.btn-save{ font-weight: 600; padding: 14px 30px; border-radius: 10px; font-size: 15px; transition: all 0.3s ease; }
.btn-save:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3); }
.text-center>.btn i{ position: relative; top: 3px; font-size: 20px; }
.btn-skip{ border-color: #e2e8f0; background-color: #ffffff; padding: 14px 30px; font-weight: 600; color: #64748b; border-radius: 10px; font-size: 15px; }
.btn-skip:hover,
.btn-skip:active,
.btn-skip:first-child:active,
.btn-skip:focus,
.btn-skip.active{ background-color: #0f2744; border-color: #0f2744; color: #1e3a5f }

.form-control,
.form-check,
.form-select{ font-size: var(--base-font-size-14) }
.form-control, .form-select{ border-radius: 8px; border-color: #e2e8f0; padding: 10px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-control:focus, .form-select:focus{ border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1); }

@media screen and (max-width: 460px) {
    .text-wrapper .title-register{ font-size: var(--base-font-size-20); }
    .text-wrapper .desc-register{font-size: var(--base-font-size-16); }
    .step-wizard{ max-width: 260px; margin: 10px auto 30px!important}
    .step-wizard .nav .nav-link{ width: 40px; height: 40px; font-size: var(--base-font-size-20); }
    .form-wrapper-main .wrapper-title h4{ font-size: var(--base-font-size-18); margin-bottom: 10px; }
    .form-check-label{ white-space: nowrap;  }
    .btn-save, .btn-skip{ padding: 7px 15px; font-size: var(--base-font-size-14) }
    .btn-skip{ margin-bottom: 10px;}
    .form-wrapper h5{ font-size: var(--base-font-size-16); }
    .form-control, .form-select{ margin-bottom: 1rem!important }
    .input-group .form-select,
    .input-group .form-control{ margin-bottom: 0!important;}
    .form-wrapper .col-lg-6.mb-3,
    .form-wrapper .col-lg-3.mb-3,
    .form-wrapper .col-lg-4.mb-3,
    .form-wrapper .col-lg-12.mb-3{ margin-bottom: 0!important;}
    .tab-content{ padding: 20px 15px; }
}