/* Kế thừa các style chung từ style.css (Không cần copy toàn bộ, chỉ cần viết lại các phần cần thay đổi) */

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  /* Dùng ảnh nền đa dạng */
  background-image: url('../../images/HinhNen.jpg');
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed; 
}
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.login-card {
  border-radius: 20px;
  overflow: hidden; 
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 100%;
  animation: fadeIn 1s ease-out;
  position: relative;
  min-height: 600px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(30px) scale(0.98);}
  to {opacity: 1; transform: translateY(0) scale(1);}
}

/* THAY ĐỔI LỚN: Màu nền Admin (Xanh đậm/Xám đen) */
.login-left {
  background: linear-gradient(135deg, #2c3e50, #1a252f); /* Tông màu tối, chuyên nghiệp */
  color: #fff;
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.login-left::after {
  /* Hiệu ứng ánh sáng tinh tế hơn */
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 60%);
  animation: floatLight 10s ease-in-out infinite alternate;
  top: -25%;
  left: -25%;
  z-index: -1;
}
@keyframes floatLight {
  from { transform: translate(0,0) rotate(0deg); }
  to { transform: translate(-20px, -20px) rotate(5deg); }
}

.login-left .logo {
  font-weight: 700;
  font-size: 28px;
  color: #3498db !important; /* Màu xanh nổi bật */
}

.login-left .logo i {
  font-size: 30px;
}

.login-left h2 {
  font-size: 32px;
  font-weight: 600;
}

.login-left p {
  opacity: 0.85;
}

.login-left img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  align-self: center;
  opacity: 0.7; /* Làm mờ ảnh để tập trung vào nội dung */
}

.login-left .shopping-icon-art {
    font-size: 24px;
    opacity: 0.2;
    display: flex;
    gap: 20px;
    width: 100%;
}

/* Cột Phải - Form */
.login-right {
  flex: 1;
  padding: 50px;
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95); 
  backdrop-filter: blur(10px); 
}

/* Input với Icon (Màu focus Admin: Xanh biển) */
.input-icon {
    color: #95a5a6; /* Xám nhạt */
}
.form-control:focus {
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
  border-color: #3498db; /* Xanh biển */
  background-color: #fff; 
}
.form-control:focus + .input-icon {
    color: #3498db;
}

/* Nút Đăng nhập (Màu mới: Xanh biển) */
.btn-login {
  background: linear-gradient(90deg, #3498db, #2980b9); /* Gradient Xanh biển */
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
  margin-top: 10px;
}
.btn-login:hover {
  background: linear-gradient(90deg, #2980b9, #3498db);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.5);
  transform: translateY(-2px);
  color: #fff;
}

/* Loại bỏ hoàn toàn Social Login và Or-line (Không cần thiết cho Admin) */
.or-line, .d-flex.gap-3 {
    display: none !important; 
}

/* Link */
.signup-text { text-align: center; margin-top: 20px; font-size: 15px; }
.signup-text a, #forgot-password, .d-flex a {
  color: #3498db; /* Màu link Admin */
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.signup-text a:hover, #forgot-password:hover, .d-flex a:hover { text-decoration: underline; }

/* Responsive (Kế thừa từ style.css để đảm bảo hiển thị đúng trên mobile) */
@media (max-width: 768px) {
  .login-left {
    display: none;
  }
  .login-right {
    flex: 1 1 100%;
    padding: 40px 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  }
  .form-wrapper {
      position: static;
      padding: 0 25px;
      top: 0;
      opacity: 1; 
      transform: none;
  }
  .login-card {
      box-shadow: none;
      border-radius: 0;
  }
}

/* Các style chung khác cho Form wrapper */
.form-wrapper {
    width: 100%;
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 50px; 
    opacity: 1; 
    transform: none; 
}
.form-control {
  border-radius: 10px;
  padding: 12px 12px 12px 45px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  background-color: rgba(255,255,255,0.7); 
}