/* --- File: style.css --- */
/* --- Variables (Bảng màu tinh tế hơn) --- */
:root {
  --primary: #f6821f; /* Cam Cloudflare */
  --primary-hover: #fa9d52;
  --primary-shadow: rgba(246, 130, 31, 0.4);
  
  --bg-page: #f0f2f5; /* Xám xanh rất nhạt làm nền */
  --bg-card: #ffffff;
  
  --text-main: #1a202c;
  --text-muted: #718096;
  --border: #e2e8f0;
  --focus-ring: rgba(246, 130, 31, 0.2);
  
  --radius: 12px; /* Bo góc mềm mại hơn */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Global Reset & Base --- */
* { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background-color: var(--bg-page);
  /* Thêm họa tiết nền mờ ảo (Optional) */
  background-image: radial-gradient(#cbd5e0 1px, transparent 1px);
  background-size: 20px 20px;
  
  color: var(--text-main);
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  line-height: 1.6;
}

/* --- Container (Card chính) --- */
.container {
  background: var(--bg-card);
  padding: 2.5rem; /* Tăng khoảng cách */
  border-radius: 16px; /* Bo góc lớn hơn */
  /* Bóng đổ xịn (Soft Shadow) */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 650px;
  position: relative;
  overflow: hidden; /* Để chứa dải màu trang trí nếu cần */
  border: 1px solid #fff;
}

/* Thanh màu trang trí trên đầu card */
.container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #f6821f, #fab916);
}

/* --- Header --- */
.header { text-align: center; margin-bottom: 2rem; }

.header-logo {
    height: 4rem; /* Chiều cao logo (khoảng 64px), có thể chỉnh to nhỏ tùy ý */
    width: auto;  /* Tự động chỉnh chiều rộng theo tỉ lệ */
    margin-bottom: 0.5rem; /* Tạo khoảng cách với dòng chữ bên dưới */
    display: inline-block;
    transition: transform 0.3s ease; /* Hiệu ứng mượt khi rê chuột */
}

.header-logo:hover {
    transform: scale(1.05); /* Phóng to nhẹ khi rê chuột vào logo */
}

.header h1 {
  margin: 0.5rem 0 0;
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  color: #2d3748;
}

.brand-text {
    background: linear-gradient(90deg, #f6821f, #fab916); /* Cam Cloudflare sang cam đậm */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900; /* Đậm nhất có thể */
}

.eye-text {
    background: linear-gradient(90deg, #fab916, #f6821f); /* Cam Cloudflare sang cam đậm */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900; /* Đậm nhất có thể */
}

.header p { color: var(--text-muted); font-size: 0.95rem; margin-top: 5px;}

.badge {
  background: #ebf8ff; color: #2b6cb0;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600;
  display: inline-block; margin-top: 8px;
  border: 1px solid #bee3f8;
}

/* --- Alerts (Làm dịu mắt hơn) --- */
.alert-info, .alert-warning {
  padding: 1rem; margin-bottom: 1.5rem;
  font-size: 0.9rem; border-radius: var(--radius);
  border: 1px solid transparent;
}
.alert-info { background-color: #ebf8ff; border-color: #bee3f8; color: #2c5282; }
.alert-info a { color: #2b6cb0; text-decoration: underline; }

.alert-warning { background-color: #fffaf0; border-color: #fbd38d; color: #9c4221; border-left: 4px solid #dd6b20; }

.inline-images { vertical-align: middle; }

/* --- Forms & Inputs --- */
.form-group { margin-bottom: 1.5rem; position: relative; }

label {
  display: block; margin-bottom: 0.5rem;
  font-weight: 600; font-size: 0.9rem; color: #4a5568;
}

/* Input Styles */
input {
  width: 100%;
  padding: 0.85rem 1rem; /* Input cao hơn cho dễ bấm */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: #fcfcfc;
}

input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus-ring); /* Hiệu ứng focus ring lan tỏa */
}

.help-input-rtd { font-size: 0.75rem; color: #718096; margin-top: 5px; }

#help-captcha { font-size: 0.75rem; color: #718096; margin-bottom: 8px; text-align: center; }

/* Phần wrapper cho icon con mắt & input token */
.password-wrapper { position: relative; width: 100%; }
#token { padding-right: 45px; }

.eye-icon {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    cursor: pointer; color: #a0aec0;
    display: flex; align-items: center; justify-content: center;
    padding: 5px; border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}
.eye-icon:hover { background-color: #edf2f7; color: #4a5568; }

.help-link { font-size: 0.8rem; color: var(--primary); text-decoration: none; float: right; font-weight: 500;}
.help-link:hover { text-decoration: underline; }

.cf-turnstile {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.cf-turnstile iframe {
    max-width: 100%;
}

/* --- Button (Juicy Button) --- */
button {
  width: 100%; padding: 1rem;
  background: linear-gradient(135deg, var(--primary), #e67615);
  color: white; border: none;
  border-radius: var(--radius);
  font-size: 1.05rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px 0 var(--primary-shadow);
  transition: all 0.2s ease;
  display: flex; justify-content: center; align-items: center; gap: 8px;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-shadow);
  filter: brightness(1.05);
}

button:active { transform: translateY(0); box-shadow: 0 2px 5px var(--primary-shadow); }

button:disabled {
  background: #cbd5e0; cursor: not-allowed;
  transform: none; box-shadow: none;
}

/* --- Status & Animations --- */
#status {
  margin-top: 1.5rem; border-radius: var(--radius);
  padding: 1.25rem; display: none;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.success { background-color: #f0fff4; color: #276749; border: 1px solid #c6f6d5; }
/* --- Thay thế class .error cũ --- */

.error {
  background-color: #fff5f5; /* Nền vẫn giữ đỏ nhạt để dễ đọc chữ */
  color: #9b2c2c; /* Chữ đỏ đậm hơn, tăng độ tương phản */
  
  /* Border trái dày, màu đỏ tươi cảnh báo */
  border: 1px solid #feb2b2;
  border-left: 6px solid #e53e3e;
  border-right: 9px solid #e53e3e;
  
  /* Đổ bóng lan tỏa màu đỏ */
  box-shadow: 0 4px 15px rgba(229, 62, 62, 0.25);
  
  font-weight: 500; /* Chữ đậm hơn một chút */
}

.loading {
  background-color: #ebf8ff; color: #3182ce;
  text-align: center; border: 1px solid #bee3f8;
}

/* Footer */
.footer { text-align: center; margin-top: 2.5rem; font-size: 0.85rem; color: #a0aec0; border-top: 1px solid #edf2f7; padding-top: 1.5rem;}
.footer a { color: #718096; text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--primary); }

@media (max-width: 480px) {
  .container {
    padding: 1.5rem; /* Giảm khoảng cách đệm trên mobile */
  }
  
  .header h1 {
    font-size: 1.5rem; /* Giảm cỡ chữ tiêu đề một chút */
  }
}