body {
  background: linear-gradient(
    180deg,
    #ffffff 13.56%,
    rgba(205, 205, 205, 0.05) 66.31%
  );
  min-height: 100vh;
  overflow-x: hidden;
  background-image: url("../img/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
}

body.dark-mode {
  background-image: url("../img/bg-dark.png");
  background-size: cover;
}

.blue-gradient-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(
    circle at 113.6% -0.004%,
    #003ae8 0%,
    #709eff 100%
  );
  filter: blur(150px);
  z-index: -2;
}

.circle-gradient-bg {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(
    circle at 50% 47.36%,
    #9aafff 47.02%,
    rgba(211, 225, 255, 0) 100%
  );
  z-index: -1;
}

.form-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
}

.theme-toggle {
  box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06),
    0px 4px 8px -2px rgba(16, 24, 40, 0.1);
}

body.dark-mode .theme-toggle {
  box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06),
    0px 4px 8px -2px rgba(16, 24, 40, 0.1);
}

/* Dark Mode Styles */
body.dark-mode {
}

body.dark-mode .form-container {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

body.dark-mode h1,
body.dark-mode .text-dark {
  color: #ffffff !important;
}

body.dark-mode .text-secondary,
body.dark-mode p {
  color: #d0d5dd !important;
}

body.dark-mode .text-text-secondary,
body.dark-mode label {
  color: #ffffff !important;
}

body.dark-mode input {
  background: #29292f !important;
  border-color: #29292f !important;
  color: #d4d4da !important;
}

body.dark-mode input::placeholder {
  color: #d4d4da !important;
}

body.dark-mode input:focus {
  border-color: #3575fc !important;
}

.language-switch {
  background: #f8f9ff;
  border: 1px solid #ebeffc;
}

.language-switch .btn-language-active {
  color: #fff;
  background-color: #152056;
}

.language-switch .btn-language-inactive {
  color: #152056;
  background-color: color-mix(in oklab, #dbe4ff80 50%, transparent);
}

body.dark-mode .language-switch {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  background: #575865;
  border: none;
  box-shadow: inset 1px 1px 4px rgba(219, 228, 255, 0.5);
}

body.dark-mode .btn-language-active {
  background: #29292F;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

body.dark-mode .btn-language-inactive {
  border: none;
  background: transparent;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: inherit;
}

body.dark-mode .social-login button {
  background: #29292f !important;
  border-color: #29292f !important;
}

body.dark-mode .social-login button span {
  color: #eaeaed !important;
}

body.dark-mode .footer-bg {
}

body.dark-mode footer .text-black {
  color: #ffffff !important;
}

body.dark-mode .register-link span {
  color: #d4d4da !important;
}

body.dark-mode .divider-text {
  color: #d4d4da !important;
}

body.dark-mode .checkbox-label {
  color: #f8f9ff !important;
}

body .white {
  display: none;
}

body .dark {
  display: block;
}

body.dark-mode .white {
  display: block;
}

body.dark-mode .dark {
  display: none;
}

/* Logo switching for dark mode */
.logo-light,
.icon-light {
  display: block;
}

.logo-dark,
.icon-dark {
  display: none;
}

body.dark-mode .logo-light {
  display: none;
}

body.dark-mode .logo-dark {
  display: block;
}

.theme-toggle {
  background-color: #fff;
}

body.dark-mode .theme-toggle {
  background-color: #000;
}

body.dark-mode .theme-toggle .icon-light {
  display: none;
}

body.dark-mode .theme-toggle .icon-dark {
  display: block;
}

body.dark-mode .bg-form-100\/80 {
  background-color: color-mix(in oklab, #000 60%, transparent);
}

.bg-form-100\/80 {
  background-color: color-mix(in oklab, #fff 50%, transparent);
}

.bg-gradient {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.light-gradient {
  background: radial-gradient(circle, #9aafff 30%, rgba(211, 225, 255, 0) 72%);
}

body.dark-mode .dark-gradient {
  background: radial-gradient(circle, #0021a3 30%, rgba(42, 42, 42, 0) 72%);
}

.bg-form {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.social-btn {
  background-color: #fff;
  border: 1px solid #d0d5dd;
  color: #000;
  border-radius: 8px;
  transition: background-color 0.3s, border-color 0.3s;
}

.social-btn:hover {
  background-color: rgba(53, 117, 252, 0.05);
}

.input-field {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  transition: border-color 0.3s, background-color 0.3s;
}

body.dark-mode .input-field {
  background-color: #29292f;
  border: 1px solid #29292f;
  border-radius: 8px;
  transition: border-color 0.3s, background-color 0.3s;
}

.text-or {
  color: #000;
}

body.dark-mode .text-or {
  color: #d4d4da;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: white; /* hoặc #ffffff */
  font-size: 14px;
  padding: 8px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed #ccc; /* Gạch đứt */
  margin: 0 10px;
}

.btn-link {
  color: #3575fc;
}

.social-logo-light {
  display: block;
}

.social-logo-dark {
  display: none;
}

body.dark-mode .social-btn {
  background-color: #29292F;
  border: 1px solid #29292F;
  color: #fff;
  border-radius: 8px;
}

body.dark-mode .social-btn:hover {
  background-color: rgba(53, 117, 252, 0.05);
}

body.dark-mode .social-logo-light {
  display: none;
}

body.dark-mode .social-logo-dark {
  display: block;
}

.input-field input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important; /* nền trắng */
  -webkit-text-fill-color: #000 !important;         /* màu chữ */
  transition: background-color 5000s ease-in-out 0s; /* chặn nền vàng */
}

body.dark-mode .input-field input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #29292f inset !important; /* nền trắng */
  -webkit-text-fill-color: #fff !important;         /* màu chữ */
  transition: background-color 5000s ease-in-out 0s; /* chặn nền vàng */
}

.text-footer {
  color: #0A0A0A
}

body.dark-mode .text-footer {
  color: #fff;
}

/* Ẩn icon Reveal Password mặc định của Microsoft Edge */
input[type="password"]::-ms-reveal {
    display: none !important;
}

/* Tùy chọn: Ẩn nút clear mặc định nếu cần */
input[type="password"]::-ms-clear {
    display: none !important;
}