/* ============================================================
   FILE: trang-chu-co-ban.css
   MỤC ĐÍCH: Chứa toàn bộ phần cấu hình cơ bản, màu sắc, bố cục nền.
   Áp dụng cho toàn trang web SUB22 v1.0 (giao diện PC và mobile)
   ============================================================ */

/* ----------- MÀU CHỦ ĐẠO & BIẾN DÙNG LẠI ------------ */
:root {
  --blue-1:#004085;   /* Xanh đậm dùng cho header và tiêu đề */
  --blue-2:#007bff;   /* Xanh sáng hơn cho viền và điểm nhấn */
  --blue-3:#0d6efd;   /* Xanh tiêu chuẩn cho nút khi kích hoạt */
  --green:#198754;    /* Xanh lá cho nút LOG IN */
  --red:#dc3545;      /* Đỏ cho nút HƯỚNG DẪN */
  --bg:#f5f7fa;       /* Nền xám nhạt của toàn trang */
  --gray:#6c757d;     /* Màu xám dùng cho nút bị khóa */
}

/* ----------- CẤU HÌNH CHUNG TOÀN TRANG ------------ */
* {
  box-sizing: border-box;  /* Tính kích thước phần tử theo border-box (chuẩn modern web) */
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;  /* Font chữ hiện đại, dễ đọc */
  background: var(--bg);                       /* Nền xám nhạt */
  color: #222;                                 /* Màu chữ đen nhẹ */
  display: flex;
  flex-direction: column;
  min-height: 100vh;                           /* Chiều cao tối thiểu = chiều cao màn hình */
}

/* ----------- KHUNG NỘI DUNG CHÍNH ------------ */
.content {
  flex: 1;                    /* Chiếm hết khoảng trống giữa header và footer */
  margin: 25px auto;          /* Căn giữa khung trắng */
  width: 95%;                 /* Gần full màn hình */
  max-width: 1600px;          /* Giới hạn tối đa trên màn lớn */
  background: white;
  border-radius: 10px;
  padding: 30px 40px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Tiêu đề cấp 2 (I. Sổ ghi...) */
h2 {
  color: var(--blue-1);
  border-left: 5px solid var(--blue-2);
  padding-left: 10px;
  margin-top: 0;
}

/* Tiêu đề các mục (1. Tổ điều độ, 2. Tổ trạm điện...) */
.section {
  margin-top: 25px;
}
.section h3 {
  background: #e9f1ff;
  padding: 8px 10px;
  border-left: 4px solid var(--blue-2);
  border-radius: 6px;
  color: var(--blue-1);
}

/* Danh sách các nút link (ẩn gạch đầu dòng) */
ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
li {
  margin: 6px 0;
}

/* Nút dẫn tới từng trang HTML */
.link-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--gray);      /* Nút xám khi bị khóa */
  color: white;
  text-decoration: none;
  opacity: 0.55;                /* Làm mờ */
  pointer-events: none;         /* Không bấm được */
  font-weight: bold;
  transition: all 0.25s;
}
.link-btn.active {
  opacity: 1;                   /* Khi login thành công: sáng lên và bấm được */
  pointer-events: auto;
  background: var(--blue-3);
}
.link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ----------- PHẦN CHÂN TRANG ------------ */
footer {
  text-align: center;
  padding: 12px 10px;
  font-size: 13px;
  color: #555;
  background: transparent;
}