:root {
      --primary-color: #ffcc00;
      --secondary-color: #ff9966;
      --tertiary-color: #ff6699;
      --gradient-color: linear-gradient(270deg, #ff9966, #ffcc00, #66ccff, #33cccc, #ff6699);
      --white: rgba(255, 255, 255, 0.15);
      --input-bg: rgba(0, 0, 0, 0.4);
      --button-bg: #fff;
      --button-text: #000;
      --shadow-light: 0 4px 15px rgba(0,0,0,0.2);
      --shadow-dark: 0 8px 30px rgba(0,0,0,0.4);
    }
    
.background-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  overflow: hidden;
}

/* Mỗi slide phủ toàn màn hình */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0; /* Mặc định ẩn */
  animation: slideAnimation 25s infinite;
}

/* Slide 1: không có animation-delay => hiển thị từ đầu */
.slide1 {
  background-image: url('https://i.ibb.co/ZpybZqd5/photo-2025-04-11-19-00-36.jpg');
  /* Slide 1 sẽ chạy từ 0s đến 25s */
}

/* Slide 2: bắt đầu sau 5s => hiển thị từ 5s đến 10s */
.slide2 {
  background-image: url('https://i.ibb.co/PZWL16Mf/photo-2025-03-12-21-04-18.jpg');
  animation-delay: 5s;
}

/* Slide 3: bắt đầu sau 10s => hiển thị từ 10s đến 15s */
.slide3 {
  background-image: url('https://i.ibb.co/ZRbLP0kZ/photo-2025-04-02-05-00-03.jpg');
  animation-delay: 10s;
}

/* Slide 4: bắt đầu sau 15s => hiển thị từ 15s đến 20s */
.slide4 {
  background-image: url('https://i.ibb.co/5gQshq52/photo-2025-03-10-11-09-20.jpg');
  animation-delay: 15s;
}

/* Slide 5: bắt đầu sau 20s => hiển thị từ 20s đến 25s */
.slide5 {
  background-image: url('https://i.ibb.co/mWnTZj2/photo-2025-04-11-19-00-39.jpg');
  animation-delay: 20s;
}





@keyframes slideAnimation {

  0%, 20% {
    opacity: 1;
  }
  
  25%, 100% {
    opacity: 0;
  }
}

    
   
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
 
      height: 100%;
      background: rgba(0, 0, 0, 0.0);
      backdrop-filter: blur(2px);
      z-index: -2;
    }
    
 
    body {
      font-family: 'Poppins', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    max-width: 420px; /* Giới hạn chiều rộng trang giống điện thoại */ 
  margin: 0 auto;
      color: #fff;
     
      position: relative;
    }

.form-container {

  padding: 0px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  max-width: 420px;
margin-bottom: 0px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-container:hover {
  transform: scale(1.02);

}

h2 {
  font-size: 2rem;
  margin-bottom: 5px;
    text-shadow: -1px -1px 2px #000, 1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000;

}

@keyframes colorChange {
  0% { color: var(--primary-color); }
  25% { color: var(--secondary-color); }
  50% { color: var(--tertiary-color); }
  75% { color: #ffccff; }
  100% { color: var(--primary-color); }
}

.logo-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem; /* Tuỳ chỉnh kích thước */
  font-weight: 600;  /* Tuỳ thuộc vào font-weight hỗ trợ */
  color: #fff;       /* Màu chữ */

  background: var(--gradient-color);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textColorChange 3s infinite linear;
}

@keyframes textColorChange {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

input[type="text"],
input[type="tel"],
input[type="password"] {
  width: 80%;
  padding: 12px 15px;
  margin: 10px 0;
  border: none;
  border-radius: 8px;
 font-weight: 700;
 color: #000000; 
  font-size: 1rem;
  outline: none;
  transition: background 0.3s;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus {
  background: ffffff;
}

button {
  width: 80%;
   font-weight: 700;
  padding: 12px;

  color: var(--button-text);
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 15px;
  transition: background 0.3s ease, transform 0.2s;
}

button:hover {
background: linear-gradient(135deg, #2d94ec, #ff9a8b, #fad0c4);

  transform: scale(1.02);
}

.logo-top1 {
  position: relative;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -10px;
    margin-bottom: 10px;
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 10px;
  filter: brightness(1.2);
}

.logo-img {
  max-width: 50%;
  border-radius: 8px;
  transition: transform 0.3s;
  filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.8));
}

.logo-img:hover {
  transform: scale(1.05);
}

.form-links a {
  color: #fff;
  margin: 10px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s;
      text-shadow: -1px -1px 2px #000, 1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000;
}

.form-links a:hover {
  color: var(--primary-color);
}

.hidden {
  display: none;
}

.notification {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #ffffff;
    margin-top: 15px;
          text-shadow: -1px -1px 2px #000, 1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000;
}

.content-footer {
    
  text-align: center;
  padding: 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid #444;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #10b905, #efefef, #7a00ff);
  -webkit-background-clip: text;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.footer-container p {
     text-shadow: -1px -1px 2px #000, 1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000;
  margin: 0.5rem;
}

.footer-container a {
     text-shadow: -1px -1px 2px #000, 1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000;
  color: #ffc107;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-container a:hover {
  color: #ffdd57;
}

@keyframes rotateIcon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-dynamic {
  display: inline-block;
  animation: rotateIcon 4s linear infinite;
}


@media (max-width: 420px) {
  .form-container:hover {
    transform: none;
  }
  input[type="text"],
  input[type="tel"],
  input[type="password"],
  button {
    width: 90%;
  }
}

.input-group {
  margin-bottom: 10px;
}

/* Căn nút "Gửi yêu cầu" và "Kết nối" trên cùng 1 dòng */
.button-row {
  display: flex;
  justify-content: center; /* Căn giữa hàng nút */
  gap: 10px;              /* Khoảng cách giữa 2 nút */
  width: 80%;             /* Canh theo chiều form */
  margin: 0 auto;         /* Giữa form-container */
}
/* Tăng kích thước và spacing cho ô nhập số điện thoại */
#forgot-phone {
    font-size: 1.0rem;
    padding: 10px 11px;
    margin: 15px 0;
    width: 80%;
     font-weight: 700;
    	border: 1px solid #fff;
      border-radius: 10px;
}
/* Nếu muốn tách biệt phone với username hẳn */
.input-group {
  margin-bottom: 10px;   /* Khoảng cách chung */
}

/* Hoặc anh có thể thêm .input-phone thay vì #forgot-phone nếu muốn tách hẳn */

/* Tinh chỉnh chiều cao/nội dung nút "Kết nối" nếu muốn */
.btn.btn-primary {
  padding: 6px 12px;
  font-weight: 700;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 10px;
  background: linear-gradient(312deg, #ffffff, #28a745);
  color: #000;
    margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s;
}
.btn.btn-primary:hover {
  background: linear-gradient(45deg, #fd7e14, #ff16a2);
  transform: scale(1.02);
}