/* =============== CƠ BẢN CHUNG =============== */
body {                         /* đặt font & khoảng cách chung cho toàn trang */
  font-family: Arial, sans-serif;
  margin: 20px;
}
/* =============== CĂN LỀ TOÀN TRANG =============== */
body {
  font-family: Arial, sans-serif;
  margin: 40px auto;        /* căn giữa, cách mép trên/dưới 40px, hai bên tự căn giữa */
  max-width: 1250px;        /* giới hạn bề rộng tối đa, giúp không bị giàn ra quá rộng */
  padding: 0 25px;          /* thêm khoảng đệm trong, tránh dính mép khi màn nhỏ */
  background: #fff;         /* nền trắng sạch sẽ */
}

.page-title {                  /* style tiêu đề trang thay cho inline-style cũ */
  margin-top: 35px;
  margin-bottom: 22px;
  margin-left: 25px;
}

/* =============== BẢNG DỮ LIỆU =============== */
.table-wrap {                  /* khung bọc bảng để có scrollbar ngang khi tràn */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* cuộn mượt trên iOS */
}
.excel-table {                 /* bảng chính (giữ id/class cũ) */
  border-collapse: collapse;
  width: max(980px, 100%);     /* rộng tối thiểu để cột vừa; có thể giãn theo màn hình */
  table-layout: auto;          /* cho phép cột tự dãn theo nội dung */
  margin: 0 auto;              /* căn giữa thay margin-left cố định */
}
.excel-table th,
.excel-table td {              /* viền và căn giữa ô */
  border: 1px solid #ccc;
  text-align: center;
  padding: 4px;
  vertical-align: middle;
  white-space: nowrap;         /* giữ nội dung 1 dòng, giúp scrollbar ngang hoạt động */
}
.header {                      /* dòng tiêu đề lớn nền xám nhạt */
  background: #f0f0f0;
  font-weight: bold;
}
.sub-header {                  /* dòng tiêu đề con nền nhạt hơn */
  background: #fafafa;
  font-weight: bold;
}

/* =============== INPUT TRONG Ô =============== */
.excel-table input {           /* input full-ô, căn giữa, biên mềm */
  width: 100%;
  border: none;
  text-align: center;
  min-width: 6ch;              /* độ rộng tối thiểu 6 ký tự; sẽ tăng khi nhập dài */
  font-size: 14px;             /* cỡ chữ dễ nhìn */
  padding: 2px 0;              /* đệm nhỏ để ô gọn gàng */
  background: #fff;            /* nền trắng cho dễ nhìn */
}
.excel-table input:focus {     /* khi focus có viền xanh để thấy đang nhập ô nào */
  outline: 1px solid #2196f3;
}

/* =============== DÒNG “MAX” =============== */
.row-max td {                  /* nền hơi vàng để người dùng nhận ra dòng tổng hợp */
  background: #fff8d6;
}
.is-max {                      /* ô max vẫn nhập được (copy-paste) */
  font-weight: 600;
}

/* =============== PHẦN TIÊU ĐỀ/NGĂN CÁCH/Ô THỜI GIAN =============== */
.divider-line {                /* dòng sao đỏ phân tách khu vực như ảnh 2 */
  color: red;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  margin: 25px 0 15px 0;
}
.section-title {               /* tiêu đề “Dữ liệu biểu đồ…” */
  color: red;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  margin-bottom: 10px;
}
.time-range-box {              /* khung chọn giờ/ngày */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px 20px;
  width: fit-content;          /* khung gọn theo nội dung */
  background: #fafafa;
  margin-left: 20px;
}
.time-range-box label {        /* nhãn đậm cho dễ đọc */
  font-weight: bold;
  margin-right: 4px;
}
.time-range-box input[type="text"],
.time-range-box input[type="number"] { /* ô nhập nhỏ gọn */
  width: 90px;
  padding: 3px 6px;
  text-align: center;
  border: 1px solid #aaa;
  border-radius: 3px;
  margin-right: 10px;
}
.time-range-box button {       /* nút “Áp dụng” */
  margin-top: 10px;
  padding: 4px 12px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #f2f2f2;
  cursor: pointer;
}
.time-range-box button:hover {
  background: #e4e4e4;
}
.to-label {                    /* chữ “đến” màu đỏ nằm giữa */
  color: red;
  font-weight: bold;
  margin: 8px 0 8px 5px;
}

/* =============== LƯỚI BIỂU ĐỒ =============== */
.charts-grid {                 /* lưới 2 cột cho toàn bộ biểu đồ như ảnh 2-3 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.chart-box {                   /* khung biểu đồ lớn 300px chiều cao */
  height: 300px;
}
.mini-grid {                   /* lưới 2 cột cho 2 biểu đồ nhỏ (tần số, cosφ) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chart-mini {                  /* khung biểu đồ nhỏ 200px chiều cao */
  height: 200px;
}

/* PDF styles removed (project now uses DOCX export). */

/* =============== RESPONSIVE MOBILE =============== */
@media (max-width: 992px) {    /* tablet/mobile: thu gọn lưới biểu đồ thành 1 cột */
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== TỔNG THỂ ========== */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f9fbff;
  margin: 40px auto;
  max-width: 1250px;
  padding: 20px 30px;
  color: #222;
}

/* ========== TIÊU ĐỀ TRANG ========== */
.page-title {
  font-weight: 700;
  color: #0059b3;
  font-size: 24px;
  text-transform: uppercase;
  margin: 30px 0 20px 0;
  letter-spacing: 0.5px;
  text-align: left;
  border-left: 6px solid #007bff;
  padding-left: 12px;
}

/* ========== BẢNG DỮ LIỆU ========== */
.excel-table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.excel-table th {
  background: linear-gradient(to bottom, #e8f0ff, #d0e2ff);
  color: #003d80;
  font-weight: 600;
  font-size: 14px;
  padding: 6px;
  border: 1px solid #ccc;
}
.excel-table td {
  border: 1px solid #ddd;
  padding: 4px;
  background: #fff;
}
.row-max td {
  background: #fff8d6;
  font-weight: bold;
  border-top: 2px solid #999;
}

/* ========== NÚT CHỨC NĂNG ========== */
button, input[type="button"], .btn-export {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover, .btn-export:hover {
  filter: brightness(0.92);
}

/* Màu riêng cho các nhóm nút */
#btnApplyRange {
  background: #007bff;
  color: #fff;
}
#btnApplyRange:hover {
  background: #0062d6;
}
.btn-export {
  background: #198754;
  color: #fff;
  font-size: 13px;
  padding: 4px 10px;
}
.btn-export:hover {
  background: #146c43;
}

/* ========== KHUNG NGĂN CÁCH / TIÊU ĐỀ PHỤ ========== */
.divider-line {
  border-bottom: 2px dashed #007bff;
  color: transparent;
  margin: 25px 0;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #0059b3;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ========== KHUNG CHỌN GIỜ / NGÀY ========== */
.time-range-box {
  border: 1px solid #ccd8f2;
  border-radius: 8px;
  background: #f0f6ff;
  padding: 15px 20px;
  width: fit-content;
  margin-bottom: 15px;
}
.time-range-box label {
  color: #003d80;
  font-weight: 600;
}
.time-range-box input {
  border: 1px solid #aac4f2;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
}

/* ========== ĐỒNG BỘ VỚI TRANG CHỦ (SUB22) ========== */
header, .navbar {
  background: #0059b3;
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
}
/* Note: PDF-specific labels removed. */

/* =============== THANH XUẤT DOC (mỗi ngày 1 trang) =============== */
.doc-export-bar {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #0059b3;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
}
.doc-export-title {
  font-weight: 600;
  margin-right: 6px;
}
#btnExportDoc {
  padding: 6px 12px;
  border: 1px solid #004a93;
  background: #0b63b3;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
#btnExportDoc:hover { filter: brightness(0.95); }