html, body { height: 100%; }body {margin: 0;background:radial-gradient(900px 500px at 12% 10%, rgba(255,179,0,.30), transparent 60%),radial-gradient(800px 520px at 92% 88%, rgba(221,110,39,.26), transparent 60%),linear-gradient(135deg, #FDF6EA 0%, #F8E7CE 48%, #F4D9B6 100%);font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 24px 16px;}body::before {content: "";position: fixed;inset: 0;background:radial-gradient(circle at 15% 20%, rgba(255,255,255,0.12) 0, transparent 35%),radial-gradient(circle at 85% 80%, rgba(221,110,39,0.15) 0, transparent 40%);pointer-events: none;}.auth-shell {width: 100%;max-width: 960px;background: #fff;border-radius: 24px;box-shadow: 0 30px 70px rgba(120, 70, 18, 0.22), 0 4px 14px rgba(120, 70, 18, 0.10);overflow: hidden;position: relative;z-index: 1;display: grid;grid-template-columns: 5fr 6fr;}.auth-hero {position: relative;background: linear-gradient(150deg, #FFB42E 0%, #DD6E27 55%, #C2551F 100%);color: #fff;padding: 40px 34px;overflow: hidden;}.auth-hero::before {content: "";position: absolute;width: 260px; height: 260px;border-radius: 50%;background: rgba(255,255,255,0.08);top: -90px; right: -90px;}.auth-hero::after {content: "";position: absolute;width: 180px; height: 180px;border-radius: 50%;background: rgba(0,0,0,0.06);bottom: -60px; left: -50px;}.auth-hero-inner { position: relative; z-index: 1; }.auth-brand-row {display: flex;align-items: center;gap: 14px;margin-bottom: 28px;}.auth-brand-icon {width: 52px; height: 52px;border-radius: 12px;background: rgba(255,255,255,0.15);display: flex;align-items: center;justify-content: center;font-size: 22px;color: #fff;backdrop-filter: blur(6px);}.auth-brand-text small {display: block;font-size: 12px;color: rgba(255,255,255,0.85);letter-spacing: 0.3px;}.auth-brand-text h4 {color: #fff;font-size: 20px;font-weight: 700;margin: 2px 0 0;}.auth-logo-box {background: rgba(255,255,255,0.95);border-radius: 12px;padding: 14px 18px;display: inline-block;max-width: 220px;margin-bottom: 24px;box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);}.auth-logo-box img { max-width: 100%; height: auto; display: block; }.auth-hero h2 {color: #fff;font-size: 26px;font-weight: 700;letter-spacing: 0.2px;margin: 0 0 10px;}.auth-hero p {color: rgba(255,255,255,0.88);font-size: 13.5px;line-height: 1.6;margin: 0 0 22px;}.auth-features { list-style: none; padding: 0; margin: 0; }.auth-features li {display: flex;align-items: center;gap: 10px;padding: 6px 0;font-size: 13px;color: rgba(255,255,255,0.92);}.auth-features li i {width: 24px; height: 24px;border-radius: 8px;background: rgba(255,255,255,0.2);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 10px;flex-shrink: 0;}.auth-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }.auth-steps li {position: relative;display: flex;align-items: flex-start;gap: 12px;padding: 8px 0;font-size: 13px;color: rgba(255,255,255,0.92);line-height: 1.5;}.auth-steps li .step-num {counter-increment: step;flex-shrink: 0;width: 26px; height: 26px;border-radius: 50%;background: #E5A634;color: #3F2C0C;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 700;}.auth-steps li .step-num::before { content: counter(step); }.auth-steps li strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }.auth-steps li span { color: rgba(255,255,255,0.82); font-size: 12.5px; }.auth-rules { list-style: none; padding: 0; margin: 0; }.auth-rules li {display: flex;align-items: flex-start;gap: 10px;padding: 6px 0;font-size: 12.5px;color: rgba(255,255,255,0.92);line-height: 1.5;}.auth-rules li i.chk {flex-shrink: 0;width: 22px; height: 22px;border-radius: 8px;background: rgba(255,255,255,0.2);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 10px;margin-top: 1px;}.auth-rules li strong { color: #fff; font-weight: 600; }.auth-rules li span { color: rgba(255,255,255,0.82); display: block; font-size: 12px; margin-top: 1px; }.auth-form-panel {padding: 44px 42px;display: flex;flex-direction: column;justify-content: center;}.auth-form-head { margin-bottom: 24px; }.auth-form-head h3 {color: #27221B;font-size: 22px;font-weight: 700;margin: 0 0 6px;display: inline-flex;align-items: center;gap: 10px;}.auth-form-head h3 i { color: #DD6E27; font-size: 18px; }.auth-form-head p { color: #6E6657; font-size: 13px; margin: 0; }.auth-alert {display: flex;align-items: center;gap: 10px;background: #fef2f2;border: 1px solid #fecaca;color: #b42318;padding: 10px 14px;border-radius: 10px;font-size: 13px;margin-bottom: 18px;}.auth-alert i { color: #dc2626; }.auth-info {display: flex;align-items: flex-start;gap: 10px;background: #F8E6D4;border: 1px solid #F4CFA8;color: #8A4A12;padding: 12px 14px;border-radius: 10px;font-size: 12.5px;line-height: 1.55;margin-bottom: 18px;}.auth-info i { color: #C2551F; margin-top: 2px; }.auth-field { margin-bottom: 16px; }.auth-field label {display: block;font-size: 13px;font-weight: 600;color: #3A342B;margin-bottom: 6px;}.auth-input-wrap { position: relative; }.auth-input-wrap > .leading {position: absolute;left: 14px;top: 50%;transform: translateY(-50%);color: #9C9486;font-size: 14px;width: 16px;height: 16px;line-height: 1;pointer-events: none;z-index: 2;}.auth-input-wrap > svg.leading { display: block; }.auth-input-wrap input {width: 100%;height: 46px;border: 1px solid #ECE5D9;background: #FBF4E8;border-radius: 10px;padding: 10px 44px 10px 40px;font-size: 14px;color: #27221B;transition: all .2s ease;}.auth-input-wrap input::placeholder { color: #9C9486; }.auth-input-wrap input:focus {outline: none;border-color: #DD6E27;background: #fff;box-shadow: 0 0 0 3px rgba(221,110,39,0.15);}.toggle-pwd {position: absolute;right: 6px;top: 50%;transform: translateY(-50%);margin: 0;padding: 0;background: transparent;border: 0;color: #9C9486;width: 34px; height: 34px;line-height: 1;border-radius: 8px;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;transition: all .2s ease;z-index: 2;}.toggle-pwd > i,.toggle-pwd > svg {display: block;font-size: 14px;width: 14px;height: 14px;line-height: 1;}.toggle-pwd:hover { color: #27221B; background: #FBF4E8; }.auth-meta-row {display: flex;justify-content: flex-end;margin-bottom: 18px;}.auth-meta-row a {font-size: 13px;color: #DD6E27;text-decoration: none;font-weight: 500;display: inline-flex;align-items: center;gap: 6px;}.auth-meta-row a:hover { color: #27221B; text-decoration: underline; }.auth-submit {width: 100%;height: 52px;border: none;border-radius: 13px;background: linear-gradient(100deg, #EFBC55, #DD6E27);color: #3F2C0C;font-size: 15px;font-weight: 800;letter-spacing: 0.3px;display: inline-flex;align-items: center;justify-content: center;gap: 10px;box-shadow: 0 10px 22px rgba(221,110,39,0.36);transition: all .15s ease;cursor: pointer;}.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(221,110,39,0.45); }.auth-submit.accent { background: linear-gradient(100deg, #EFBC55, #DD6E27); color: #3F2C0C; }.auth-submit.accent:hover { box-shadow: 0 14px 28px rgba(221,110,39,0.45); }.auth-back { text-align: center; margin-top: 18px; }.auth-back a {font-size: 13px;color: #DD6E27;text-decoration: none;font-weight: 500;display: inline-flex;align-items: center;gap: 6px;}.auth-back a:hover { color: #27221B; text-decoration: underline; }.auth-footer {text-align: center;font-size: 12px;color: #9C9486;margin-top: 22px;}.auth-footer i { color: #E5A634; }@media (max-width: 767.98px) {.auth-shell { grid-template-columns: 1fr; max-width: 440px; }.auth-hero { padding: 28px 24px; }.auth-hero h2 { font-size: 20px; }.auth-features li { justify-content: center; }.auth-form-panel { padding: 28px 24px; }}.router-card {width: 100%;max-width: 520px;background: #fff;border-radius: 22px;box-shadow: 0 30px 70px rgba(120, 70, 18, 0.22), 0 4px 14px rgba(120, 70, 18, 0.10);overflow: hidden;position: relative;z-index: 1;}.router-top {position: relative;background: linear-gradient(150deg, #FFB42E 0%, #DD6E27 58%, #C2551F 100%);color: #fff;padding: 34px 28px 28px;text-align: center;overflow: hidden;}.router-top::before {content: "";position: absolute;width: 220px; height: 220px;border-radius: 50%;background: rgba(255,255,255,0.08);top: -80px; right: -80px;}.router-top::after {content: "";position: absolute;width: 160px; height: 160px;border-radius: 50%;background: rgba(0,0,0,0.06);bottom: -70px; left: -50px;}.router-top-inner { position: relative; z-index: 1; }.router-brand {display: inline-flex;align-items: center;gap: 10px;margin-bottom: 16px;padding: 6px 14px;border-radius: 20px;background: rgba(255,255,255,0.15);backdrop-filter: blur(6px);}.router-brand i { color: #E5A634; font-size: 14px; }.router-brand span { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: #fff; }.router-logo-box {background: rgba(255,255,255,0.95);border-radius: 12px;padding: 12px 18px;display: inline-block;max-width: 200px;box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);margin-bottom: 14px;}.router-logo-box img { max-width: 100%; height: auto; display: block; }.router-avatar {width: 68px; height: 68px;border-radius: 50%;background: #E5A634;color: #27221B;display: inline-flex;align-items: center;justify-content: center;font-size: 26px;font-weight: 700;margin: 4px auto 12px;border: 3px solid rgba(255,255,255,0.55);box-shadow: 0 8px 20px rgba(0,0,0,0.18);text-transform: uppercase;}.router-top h2 { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 6px; }.router-top h2 .username { color: #E5A634; font-weight: 700; }.router-top .success-line {display: inline-flex;align-items: center;gap: 8px;color: rgba(255,255,255,0.95);font-size: 13px;margin: 0;}.router-top .success-line i {color: #86efac;font-size: 12px;background: rgba(134,239,172,0.15);width: 18px; height: 18px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;}.router-body { padding: 30px 32px 28px; }.router-tag {text-align: center;font-size: 13px;color: #6E6657;margin: 0 0 20px;font-style: italic;}.router-tag i { color: #E5A634; margin: 0 4px; }.router-section-title {display: flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 600;color: #27221B;text-transform: uppercase;letter-spacing: 0.4px;margin: 0 0 10px;}.router-section-title i { color: #DD6E27; }.router-select-wrap { position: relative; margin-bottom: 18px; }.router-select-wrap > .leading {position: absolute;left: 14px; top: 50%;transform: translateY(-50%);color: #9C9486;font-size: 14px;width: 16px;height: 16px;line-height: 1;pointer-events: none;z-index: 2;}.router-select-wrap > svg.leading { display: block; }.router-select-wrap select.form-control,.router-select-wrap select {width: 100%;height: 48px;border: 1px solid #ECE5D9;background: #FBF4E8;border-radius: 10px;padding: 10px 40px 10px 40px;font-size: 14px;color: #27221B;appearance: none;-webkit-appearance: none;transition: all .2s ease;cursor: pointer;}.router-select-wrap select:focus {outline: none;border-color: #DD6E27;background: #fff;box-shadow: 0 0 0 3px rgba(221,110,39,0.15);}.router-select-wrap > .chevron {position: absolute;right: 14px; top: 50%;transform: translateY(-50%);color: #9C9486;pointer-events: none;font-size: 12px;width: 14px;height: 14px;line-height: 1;z-index: 2;}.router-select-wrap > svg.chevron { display: block; }.branch-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-bottom: 18px;max-height: 320px;overflow-y: auto;padding: 2px;}.branch-grid.single { grid-template-columns: 1fr; }@media (max-width: 480px) { .branch-grid { grid-template-columns: 1fr; } }.branch-card {position: relative;display: flex;align-items: flex-start;gap: 10px;border: 1.5px solid #ECE5D9;background: #FBF4E8;border-radius: 13px;padding: 13px 13px;cursor: pointer;margin: 0;transition: all .15s ease;}.branch-card:hover { border-color: #F0C99A; background: #fff; }.branch-card input[type="radio"] {position: absolute;opacity: 0;pointer-events: none;}.branch-card .bc-ic {width: 36px; height: 36px;border-radius: 10px;background: #fff;border: 1px solid #ECE5D9;color: #C2551F;display: grid;place-items: center;font-size: 15px;flex: none;transition: all .15s ease;}.branch-card .bc-body { min-width: 0; }.branch-card .bc-name { display: block; font-size: 13.5px; font-weight: 800; color: #27221B; line-height: 1.3; }.branch-card .bc-addr {display: block;margin-top: 3px;font-size: 11px;color: #9C9486;line-height: 1.35;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.branch-card .bc-addr i { font-size: 9px; margin-right: 2px; }.branch-card .bc-check {position: absolute;right: 9px; top: 9px;width: 20px; height: 20px;border-radius: 50%;background: #DD6E27;color: #fff;font-size: 10px;display: grid;place-items: center;opacity: 0;transform: scale(.6);transition: all .15s ease;}.branch-card:has(input:checked) {border-color: #DD6E27;background: #fff;box-shadow: 0 0 0 3px rgba(221,110,39,0.15), 0 8px 18px rgba(221,110,39,0.12);}.branch-card:has(input:checked) .bc-ic {background: linear-gradient(135deg, #EFBC55, #DD6E27);border-color: transparent;color: #3F2C0C;}.branch-card:has(input:checked) .bc-check { opacity: 1; transform: scale(1); }.router-submit[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }.router-submit[disabled]:hover { transform: none; }.router-submit {width: 100%;height: 52px;border: none;border-radius: 13px;background: linear-gradient(100deg, #EFBC55, #DD6E27);color: #3F2C0C;font-size: 15px;font-weight: 800;letter-spacing: 0.3px;display: inline-flex;align-items: center;justify-content: center;gap: 10px;box-shadow: 0 10px 22px rgba(221,110,39,0.36);transition: all .15s ease;cursor: pointer;}.router-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(221,110,39,0.45); }.router-submit.accent { background: linear-gradient(100deg, #EFBC55, #DD6E27); color: #3F2C0C; }.router-submit.accent:hover { box-shadow: 0 14px 28px rgba(221,110,39,0.45); }.router-warning {display: flex;align-items: flex-start;gap: 12px;background: #fffbeb;border: 1px solid #fde68a;color: #92400e;padding: 14px 16px;border-radius: 12px;font-size: 13.5px;line-height: 1.55;margin-bottom: 16px;}.router-warning i { color: #E5A634; font-size: 18px; margin-top: 1px; }.router-logout {display: inline-flex;align-items: center;justify-content: center;gap: 8px;width: 100%;height: 44px;border: 1px solid #ECE5D9;background: #fff;color: #6E6657;border-radius: 10px;font-size: 13.5px;font-weight: 500;text-decoration: none;transition: all .2s ease;}.router-logout:hover { background: #FBF4E8; color: #27221B; border-color: #DCD5C8; }.router-footer {text-align: center;font-size: 12px;color: #9C9486;margin-top: 20px;}.router-footer i { color: #E5A634; }@media (max-width: 480px) {.router-top { padding: 28px 20px 22px; }.router-body { padding: 24px 20px 22px; }.router-top h2 { font-size: 18px; }.router-avatar { width: 58px; height: 58px; font-size: 22px; }}