body {
  background : #46278a;
  font-family: Arial, sans-serif;
}

.custom-login-wrapper {
  display        : flex;
  justify-content: center;
  align-items    : center;
  min-height     : 100vh;
}

.custom-login-card {
  background   : #fff;
  padding      : 2rem;
  border-radius: 12px;
  max-width    : 50vw;
  width        : 100%;
  box-shadow   : 0 4px 20px rgba(0, 0, 0, 0.1);
}

.custom-login-card h1 {
  color        : #5a2c90;
  font-size    : 32px;
  margin-bottom: 1.5rem;
  font-weight  : bold;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display      : block;
  font-weight  : bold;
  margin-bottom: .3rem;
  color        : #333;
}

.form-group input {
  width           : 95%;
  border          : transparent;
  background-color: transparent;
  line-height     : .1rem;
}

.form-options {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin         : 1rem 0;
  font-size      : .9rem;
}

/* Ẩn checkbox mặc định */
.form-options .custom-checkbox input {
  position: absolute;
  opacity : 0;
  cursor  : pointer;
}

.form-options .custom-checkbox {
  display    : inline-flex;
  align-items: center;
  cursor     : pointer;
  font-size  : 14px;
  color      : #333;
  gap        : 20px;
  position   : relative;
}

.form-options .custom-checkbox .checkmark {
  width        : 18px;
  height       : 18px;
  border       : 2px solid #000;
  border-radius: 4px;
  display      : inline-block;
  position     : relative;
  transition   : all 0.2s ease;
}

.form-options .custom-checkbox input:checked~.checkmark {
  background-color: #f7941e;
  border-color    : #f7941e;
  border          : 2px solid #f7941e;
}

.form-options .custom-checkbox .checkmark::after {
  content     : "";
  position    : absolute;
  display     : none;
  left        : 4px;
  top         : 0px;
  width       : 5px;
  height      : 10px;
  border      : solid #fff;
  border-width: 0 2px 2px 0;
  transform   : rotate(45deg);
}

.form-options .custom-checkbox input:checked~.checkmark::after {
  display: block;
}


.form-options a {
  color          : red;
  text-decoration: none;
  font-weight    : bold;
}

.btn-login {
  background    : #f7941e;
  color         : #fff;
  padding       : .8rem;
  border        : none;
  border-radius : 20px;
  width         : 100%;
  font-weight   : bold;
  cursor        : pointer;
  text-transform: uppercase;

  display        : flex;
  justify-content: center;
  align-items    : center;
  gap            : 8px;
}

.btn-login:hover {
  background: #e68310;
}

.register-link {
  margin-top: 1rem;
}

.register-link a {
  color          : #5a2c90;
  font-weight    : bold;
  text-decoration: none;
}

.login-disclaimer {
  margin-top: 1.5rem;
  font-size : .8rem;
  color     : var(--blackColor);
}

.login-disclaimer a {
  color          : var(--orangeColor);
  font-weight    : bold;
  text-decoration: none !important;
}

@media (max-width: 576px) {
  .custom-login-card {
    max-width: 100vw;
    padding  : 1rem;
  }

  .form-group input {
    width: 88%;
  }
}