* {
  font-family: "Averta Std CY";
}

/* Split layout: brand panel left (pseudo-element), form right */
body.login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  min-height: 100vh;
  height: auto;
  padding: 32px 24px 32px calc(50% + 24px);
  background: #fff;
  color: #1f2a37;
}

body.login::before {
  content: "";
  position: fixed;
  inset: 0 50% 0 0;
  background: #1f3864 url(../images/logo-white.png) center / 46% auto no-repeat;
}

body.login::after {
  content: "Hệ thống quản trị website";
  position: fixed;
  left: 48px;
  bottom: 40px;
  padding-top: 14px;
  border-top: 2px solid #c8a22c;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

#login {
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Logo lives in the left panel on desktop */
.login h1 a {
  display: none;
  width: 100%;
  height: 56px;
  margin: 0 0 24px;
  background-image: url(../images/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.login h1::after {
  content: "Đăng nhập";
  display: block;
  margin-bottom: 28px;
  text-align: left;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f3864;
}

/* Messages */
.login .message,
.login .notice,
.login .success {
  margin: 0 0 24px;
  padding: 10px 14px;
  border: none;
  border-left: 3px solid #1f3864;
  border-radius: 0;
  background: #f3f5f8;
  color: #1f2a37;
  box-shadow: none;
}

.login .notice-error,
.login #login_error {
  border-left-color: #d63638;
  background: #fcf0f0;
}

/* Form */
.login form {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* WP floats "Remember me" left and the button right; stack them instead */
.login form .forgetmenot,
.wp-core-ui.login .button-primary {
  float: none;
}

.login .submit {
  clear: both;
  padding: 0;
}

.login label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2a37;
}

.login input[type="text"],
.login input[type="password"] {
  min-height: 44px;
  margin-bottom: 20px;
  padding: 8px 12px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  background: #fff;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
  border-color: #1f3864;
  box-shadow: 0 0 0 1px #1f3864;
  outline: none;
}

.login .wp-pwd .button.wp-hide-pw {
  min-height: 44px;
  color: #6b7a8c;
}

.login .forgetmenot {
  margin: 0;
}

.login .forgetmenot label {
  font-weight: 400;
  color: #4a5868;
}

.wp-core-ui.login .button-primary {
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
  border: none;
  border-radius: 4px;
  background: #1f3864;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  text-shadow: none;
}

.wp-core-ui.login .button-primary:hover,
.wp-core-ui.login .button-primary:focus {
  background: #152848;
}

.wp-core-ui.login .button-primary:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c8a22c;
}

/* Links */
.login #nav,
.login #backtoblog {
  width: auto;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
  font-size: 14px;
}

.login #nav a,
.login #backtoblog a {
  color: #1f3864;
  text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  text-decoration: underline;
}

.login #backtoblog a {
  color: #6b7a8c;
}

/* Language switcher */
.login .privacy-policy-page-link,
.login .language-switcher {
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 0;
}

.login .language-switcher form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login .language-switcher label {
  color: #6b7a8c;
}

.login .language-switcher select,
.wp-core-ui.login .language-switcher .button {
  min-height: 34px;
  border-radius: 4px;
}

.wp-core-ui.login .language-switcher .button {
  border: 1px solid #cfd6df;
  background: #fff;
  color: #1f3864;
  box-shadow: none;
}

/* Mobile: drop the brand panel, show the logo above the form */
@media screen and (max-width: 782px) {
  body.login {
    padding: 32px 20px;
  }

  body.login::before,
  body.login::after {
    display: none;
  }

  .login h1 a {
    display: block;
  }
}