/* ============================================================
   FILE: trang-chu-header.css
   MỤC ĐÍCH: Chứa toàn bộ phần giao diện Header (LOG IN, Tiêu đề,
   Server Online, Giờ hệ thống, Nút HƯỚNG DẪN, khung đăng nhập)
   ============================================================ */

/* ----------- THANH HEADER ------------ */
.header {
  position: relative;                       /* Để đặt tiêu đề chính giữa bằng absolute */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  color: white;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Cụm bên trái: nút LOG IN */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tiêu đề nằm giữa header */
.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}

/* Cụm bên phải: Server + đồng hồ + nút HƯỚNG DẪN */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ----------- CÁC NÚT BẤM ------------ */
.btn {
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  transition: 0.2s;
  text-decoration: none;
}
.btn-login { background: var(--green); }
.btn-login:hover { background: #157347; }
.btn-help { background: var(--red); }
.btn-help:hover { background: #b02a37; }

/* ----------- ĐỒNG HỒ & TRẠNG THÁI SERVER ------------ */
.clock {
  background: rgba(255,255,255,0.15);
  padding: 6px 10px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.server-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  padding: 6px 10px;
  border-radius: 5px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
}
.dot.online { background: #31c24d; }
.dot.offline { background: #ff4d4f; }

/* ----------- KHUNG LOGIN xổ xuống ------------ */
.login-panel {
  display: none;
  background: #fff;
  border-bottom: 2px solid var(--blue-2);
  padding: 14px 20px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.form-control { margin-bottom: 10px; }
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 220px;
}
.btn-submit {
  background: var(--blue-3);
  color: white;
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}
.btn-submit:hover { background: #0b5ed7; }
.error { color: red; font-size: 14px; display: none; }