/* S4U OTP Login v1.2.0 */
.s4u-login-wrap{max-width:400px}
.s4u-login-wrap h3.s4u-title{margin:0 0 18px;text-transform:uppercase}

.s4u-step{display:none}
.s4u-step.is-active{display:block;animation:s4uFade .16s ease}
@keyframes s4uFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.s4u-h{margin:0 0 4px;font-size:20px;font-weight:600;color:#1f2328;line-height:1.35}
.s4u-sub{font-size:13.5px;color:#6b7280;margin:0 0 22px;line-height:1.6}
.s4u-sub strong{color:#1f2328;font-weight:600;word-break:break-all}

/* Chip email - gọn kiểu Microsoft */
.s4u-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid #e5e7eb;border-radius:999px;
  padding:3px 4px 3px 12px;font-size:12.5px;color:#4b5563;margin:0 0 20px;max-width:100%;background:#fff}
.s4u-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.9}
.s4u-chip button{background:none;border:none;cursor:pointer;color:#9ca3af;font-size:15px;
  line-height:1;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:0 0 22px;padding:0;transition:.15s}
.s4u-chip button:hover{background:#f3f4f6;color:#374151}

.s4u-cap{margin:0 0 18px}
.s4u-cap>div{transform-origin:0 0}

/* Nút */
.s4u-login-wrap .s4u-btn{width:100%;height:44px;line-height:44px;padding:0 16px;margin:0;
  border-radius:3px;font-size:14.5px;font-weight:600;letter-spacing:.2px;
  display:flex;align-items:center;justify-content:center;text-transform:none}
.s4u-login-wrap .s4u-btn[disabled]{opacity:.5;cursor:not-allowed}

.s4u-code{letter-spacing:.55em;text-align:center;font-size:24px !important;font-weight:600;
  padding:11px 0 11px .55em !important;height:52px}
.s4u-code::placeholder{letter-spacing:.25em;font-size:16px;font-weight:400;color:#d1d5db}

.s4u-msg{font-size:13px;padding:10px 12px;border-radius:3px;margin:0 0 18px;line-height:1.5;display:none}
.s4u-msg.ok{display:block;background:#ecfdf3;color:#0a7141;border:1px solid #c6ecd6}
.s4u-msg.err{display:block;background:#fef3f2;color:#a3251c;border:1px solid #f7ccc8}

.s4u-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.s4u-link{background:none;border:none;padding:0;color:#1e6fd9;cursor:pointer;
  font-size:13px;text-decoration:none;text-align:left;font-family:inherit}
.s4u-link:hover{text-decoration:underline}
.s4u-link[disabled]{color:#9ca3af;cursor:default;text-decoration:none}
.s4u-link-a{color:#1e6fd9;font-size:13px;text-decoration:none}
.s4u-link-a:hover{text-decoration:underline}

.s4u-alt{margin-top:18px;text-align:center}

.s4u-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:s4uSpin .6s linear infinite;margin-right:8px;flex:0 0 14px}
@keyframes s4uSpin{to{transform:rotate(360deg)}}

.s4u-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#4b5563;margin:0 0 18px}
.s4u-remember input{margin:0}

.s4u-login-wrap .form-row{margin-bottom:18px}
.s4u-login-wrap .form-row label{font-size:13px;color:#374151;margin-bottom:6px;display:block}

@media(max-width:420px){
  .s4u-cap>div{transform:scale(.88)}
  .s4u-cap{height:70px;overflow:hidden}
}