*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Be Vietnam Pro',sans-serif;min-height:100vh;display:flex;background:#f5f5f5}
.auth-page{display:flex;width:100%;min-height:100vh}

/* ---- LEFT ---- */
.auth-left{
    flex:1;background:#fff;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:50px 60px;
    border-right:1px solid #eee;
}
.left-logos{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.logo-ps{display:flex;align-items:center;gap:9px;background:none;padding:0}
.logo-ps .logo-mark{
    width:34px;height:34px;border-radius:9px;background:#f5233a;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 9px rgba(245,35,58,.3);transition:transform .2s;
}
.logo-ps:hover .logo-mark{transform:translateY(-1px) rotate(-4deg)}
.logo-ps .logo-mark svg{display:block}
.logo-ps .logo-word{font-size:21px;font-weight:500;color:#1a1a1a;letter-spacing:-.3px;line-height:1}
.logo-ps .logo-word b{font-weight:800;color:#f5233a}
.logo-sm{
    background:#1a1a1a;color:white;padding:8px 14px;
    border-radius:6px;font-size:14px;font-weight:700;letter-spacing:.3px;
}
.left-title{font-size:22px;font-weight:700;color:#1a1a1a;text-align:center;margin-bottom:6px;line-height:1.4}
.left-title em{color:#f5233a;font-style:normal;font-weight:800}
.left-sub{font-size:14px;color:#666;text-align:center;margin-bottom:28px;line-height:1.6}

/* Corner bracket box */
.benefit-box{
    width:100%;max-width:460px;
    padding:22px 26px;margin-bottom:20px;
    position:relative;
}
.benefit-box::before{content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-top:3px solid #f5233a;border-left:3px solid #f5233a;border-radius:4px 0 0 0}
.benefit-box::after{content:'';position:absolute;top:0;right:0;width:22px;height:22px;border-top:3px solid #f5233a;border-right:3px solid #f5233a;border-radius:0 4px 0 0}
.benefit-box-bot{position:relative}
.benefit-box-bot::before{content:'';position:absolute;bottom:0;left:0;width:22px;height:22px;border-bottom:3px solid #f5233a;border-left:3px solid #f5233a;border-radius:0 0 0 4px}
.benefit-box-bot::after{content:'';position:absolute;bottom:0;right:0;width:22px;height:22px;border-bottom:3px solid #f5233a;border-right:3px solid #f5233a;border-radius:0 0 4px 0}

.benefit-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:13.5px;color:#333;line-height:1.5;border-bottom:1px solid #f5f5f5}
.benefit-item:last-child{border-bottom:none;padding-bottom:4px}
.benefit-item .bi{font-size:17px;flex-shrink:0;margin-top:1px}
.benefit-item strong{color:#f5233a}
.benefit-more{text-align:center;margin-top:16px;font-size:13px;color:#f5233a;font-weight:600;cursor:pointer}
.benefit-more:hover{text-decoration:underline}
.left-mascot{font-size:90px;text-align:center;margin-top:12px;animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- RIGHT ---- */
.auth-right{
    width:460px;flex-shrink:0;
    background:white;border-left:1px solid #eee;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:52px 52px;
}
.right-title{font-size:27px;font-weight:800;color:#f5233a;margin-bottom:32px;letter-spacing:-.3px;text-align:center}

.f-group{width:100%;margin-bottom:18px}
.f-label{font-size:14px;font-weight:600;color:#333;margin-bottom:7px;display:block}
.f-wrap{position:relative}
.f-input{
    width:100%;padding:13px 16px;
    border:1.5px solid #e0e0e0;border-radius:8px;
    font-size:14px;font-family:inherit;outline:none;
    background:#fafafa;color:#1a1a1a;
    transition:border-color .2s,box-shadow .2s,background .2s;
}
.f-input:focus{border-color:#f5233a;box-shadow:0 0 0 3px rgba(245,35,58,.08);background:white}
.f-input::placeholder{color:#c0c0c0}
.f-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#bbb;font-size:18px;line-height:1;padding:2px}
.f-eye:hover{color:#555}

.err-box{width:100%;background:#fff0f1;border:1.5px solid #ffccd1;border-radius:8px;padding:11px 14px;font-size:13px;color:#c53030;margin-bottom:18px;display:flex;align-items:center;gap:8px}

/* Hop thong bao thanh cong */
.ok-box{width:100%;background:#ecfdf5;border:1.5px solid #6ee7b7;border-radius:8px;padding:11px 14px;font-size:13px;color:#047857;margin-bottom:18px;line-height:1.5}
.ok-box strong{color:#047857}

/* Hop hien thi link dat lai (moi truong demo) */
.reset-link-box{width:100%;background:#fafafa;border:1px dashed #cbd5e1;border-radius:8px;padding:14px 16px;margin-bottom:18px}
.rlb-label{font-size:12px;font-weight:700;color:#f5233a;margin-bottom:8px}
.rlb-link{display:block;font-size:12px;color:#cc1226;word-break:break-all;line-height:1.5;font-weight:600}
.rlb-link:hover{text-decoration:underline}
.rlb-note{font-size:11px;color:#999;margin-top:8px;line-height:1.5}

.btn-login{
    width:100%;background:#f5233a;color:white;border:none;
    border-radius:8px;padding:15px;font-size:15px;font-weight:700;
    cursor:pointer;transition:background .2s;font-family:inherit;margin-bottom:14px;
    letter-spacing:.2px;
}
.btn-login:hover{background:#cc1226}

.forgot{display:block;text-align:center;font-size:13px;color:#f5233a;font-weight:600;margin-bottom:22px;cursor:pointer}
.forgot:hover{text-decoration:underline}

.or-divider{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:#e8e8e8}
.or-divider span{font-size:13px;color:#bbb;white-space:nowrap;padding:0 4px}

.social-row{display:flex;gap:10px;width:100%;margin-bottom:26px}
.s-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:12px;border:1.5px solid #e0e0e0;border-radius:8px;
    font-size:14px;font-weight:600;color:#333;cursor:pointer;
    background:white;transition:border-color .2s,background .2s;
}
.s-btn:hover{border-color:#f5233a;background:#fff8f8}

.reg-line{font-size:14px;color:#888;text-align:center;margin-bottom:20px}
.reg-line a{color:#f5233a;font-weight:700}
.reg-line a:hover{text-decoration:underline}

.site-note{font-size:12px;color:#bbb;text-align:center;line-height:1.8}
.site-note a{color:#f5233a;font-weight:600}

.back-btn{
    position:fixed;top:18px;left:18px;
    display:flex;align-items:center;gap:6px;
    background:rgba(0,0,0,.06);padding:8px 14px;border-radius:50px;
    font-size:13px;color:#555;font-weight:600;cursor:pointer;
    transition:all .2s;z-index:10;
}
.back-btn:hover{background:#f5233a;color:white}