/* ===== SP: Bảo mật tài khoản + quên mật khẩu ===== */
.routePage[data-route-page="securityAccount"],
.routePage[data-route-page="forgotPassword"]{
  padding-top:18px;
}

.securityAccountPage .accountSettingsCard,
.forgotPasswordCard{
  max-width:560px;
  margin:0 auto;
}

.securityInfoBox{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fafafa;
  margin:0 0 14px;
}

.securityInfoLine{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  color:#000;
  font-size:16px; /* SP có thể sửa cỡ chữ thông tin bảo mật tại đây */
  line-height:1.35;
  font-weight:400;
}

.securityInfoLine strong{
  text-align:right;
  font-size:16px;
  font-weight:588;
  word-break:break-word;
}

.securityInfoLine strong.is-ok{ color:#0a8f3c; }
.securityInfoLine strong.is-warn{ color:#ff2f86; }

.accountSettingsSubmit--small{
  min-height:42px; /* SP có thể sửa chiều cao nút nhỏ trang bảo mật tại đây */
  border-radius:12px;
  font-size:16px; /* SP có thể sửa cỡ chữ nút nhỏ trang bảo mật tại đây */
}

.accountSettingsSubmit--ghost{
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.12);
}

@media (min-width: 900px){
  .routePage[data-route-page="securityAccount"],
  .routePage[data-route-page="forgotPassword"]{
    padding-top:22px;
  }
  .securityAccountPage .accountSettingsCard,
  .forgotPasswordCard{
    max-width:620px;
  }
}

/* SP: Mobile trang bảo mật không dùng logo bar; PC vẫn giữ top bar PC bình thường */
@media (max-width: 1023px){
  body.is-security-account-route .appHeader{
    display:none;
  }
  body.is-security-account-route .pageShell{
    min-height:100dvh;
    padding-top:0;
  }
}

.authSubmit--secondary{
  background:#fff;
  color:#000;
  border-color:rgba(0,0,0,.14);
}

/* SP v504: trang bảo mật rộng hơn và form đổi email chỉ mở khi bấm nút */
.securityAccountPage{
  padding-left:6px;
  padding-right:6px;
}

.securityInfoLine--stack{
  display:block;
}

.securityInfoLine--stack span{
  display:block;
  margin:0 0 6px;
}

.securityInfoLine--stack strong{
  display:block;
  text-align:left;
}

.securityEmailForm.is-collapsed .securityEmailForm__fields{
  display:none;
}

.securityEmailForm__fields{
  display:flex;
  flex-direction:column;
  gap:14px;
}