/* Khu vự trước đăng nhập */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
  font-size: 20px;
}

#CaNhanButton {
  display: inline-block; /* Giữ nó giống như một nút */
  position: fixed;
  line-height: 40px; /* Căn giữa chữ theo chiều dọc */
  width: 170px;
  height: 40px;
  border: 1px solid #fffcfc; /* Thêm đường viền màu đen */
  border-radius: 5px;
  background: rgba(78, 128, 204, 0.8); /* Màu nền với độ mờ 80% */
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5); /* Đổ bóng */
  cursor: pointer;
  font-size: 1em;
  color: #fcf8f8; /* Màu chữ sáng */
  text-align: center; /* Căn giữa chữ theo chiều ngang */
  text-decoration: none; /* Bỏ gạch dưới nếu là đường link */
  z-index: 2;
  right: 20%; /* Cách lề phải 200px */
  top: 20px; /* Cách lề trên 20px */
}

#CaNhanButton:hover {
  background-color: #9dc5f0;
  color: #1b1b1b;
}

#CaNhanButton .regiter-link {
  font-size: 0.9em;
  color: #fff;
  text-align: left;
  margin: 30px 0;
  margin-top: 100px;
}

.home {
  position: relative;
  /* max-height: 950px; */
  width: 100%;
  height: 100vh;
  background: url(../image/Background.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.home::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(184, 184, 185, 0.2); /* Lớp phủ đen với độ mờ 50% */
  z-index: 0; /* Đảm bảo lớp phủ chỉ ảnh hưởng đến background */
}
/* Các phần tử con không bị ảnh hưởng bởi lớp phủ */
.home > * {
  z-index: 1;
}

.home .wrapper-login {
  position: relative;
  width: 440px;
  max-width: 85%;
  min-width: 25%;
  margin: 0 auto; /* Căn giữa theo chiều ngang */
  background: rgba(255, 255, 255, 0.1);
  padding: 40px 35px 55px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(50px);
  border-radius: 10px;
  color: #fff;
}
.logo img {
  position: absolute;
  padding: 20px 40px;
  width: 180px;
  z-index: 10;
}


.wrapper-login h2 {
  font-size: 2em;
  color: #fff;
  text-align: center;
}

.wrapper-login .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 40px 0;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 1px solid #fff;
  outline: none;
  border-radius: 40px;
  font-size: 1em;
  color: #fff;
  padding: 0 25px 0 45px;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 45px;
  transform: translateY(-50%);
  font-size: 1em;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label {
  font-size: 0.8em;
  top: -14px;
  left: 17px;
}
.input-box .icon {
  position: absolute;
  top: 14px;
  left: 15px;
  font-size: 1.2em;
  color: #fff;
}

/* Hiệu ứng khi input có giá trị (valid) */
.input-box input:valid {
  background-color: rgba(212, 221, 230, 0.5); /* Màu nền trắng với độ mờ 50% */
  color: #000; /* Màu chữ đen khi có giá trị */
}

/* Icon trong input */
.input-box .icon {
  position: absolute;
  top: 14px;
  left: 15px;
  font-size: 1.2em;
  color: #fff;
}
.wrapper-login .rememberMe {
  font-size: 0.9em;
  color: #fff;
  font-weight: 500;
  margin: -25px 0 15px;
  display: flex;
  justify-content: space-between;
}
/* Tăng kích thước của checkbox */
.rememberMe input[type="checkbox"] {
  transform: scale(1.8); /* Tăng kích thước checkbox lên 1.5 lần */
  margin-right: 10px; /* Thêm khoảng cách giữa checkbox và label */
}
/* Cập nhật lại font-size của label để đồng nhất */
.rememberMe label {
  font-size: 1em; /* Tăng kích thước chữ cho label */
}

.wrapper-login .btn {
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 40px;
  background: linear-gradient(90deg, #7e7e81, #051c9e);
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 1em;
  color: #fff;
  font-weight: 500;
}

.wrapper-login .btn:hover {
  background: linear-gradient(90deg, #7e817e, #277c05);
  color: #f2f3f8;
}

.wrapper-login .regiter-link {
  font-size: 0.9em;
  color: #fff;
  text-align: left;
  margin: 30px 0;
  margin-top: 100px;
}

#TaiKhoanDungThu {
  padding-left: 20%;
  line-height: 1.5;
}
@media (max-width: 680px) {
  .home .wrapper-login {
    margin-top: 60px;
  }
  .logo img {
    position: absolute;
    padding: 10px 20px;
    width: 100px;
  }
}
@media (max-width: 1280px) {
  #KhuVucSauDangNhap {
    transform: scale(1); /* Thu nhỏ phần tử khi màn hình nhỏ */
    transform-origin: center; /* Đảm bảo tỷ lệ vẫn được giữ nguyên từ trung tâm */
  }
}

@media (max-width: 1080px) {
  #KhuVucSauDangNhap {
    transform: scale(1); /* Thu nhỏ phần tử khi màn hình nhỏ */
    transform-origin: center; /* Đảm bảo tỷ lệ vẫn được giữ nguyên từ trung tâm */
  }
}


/* Khu vực sau khi đăng nhập, bảng và các nút quan trọng */
table {
  width: 100%; /* Đảm bảo bảng có chiều rộng đầy đủ */
  border-collapse: collapse;
  margin: 20px auto;
}

#KhuVucTongHop {
  display: none;
}
tr {
  height: 10pt; /* Đặt chiều cao của các dòng cố định là 10pt */
}

th,
td {
  padding: 10px;
  text-align: center;
  word-wrap: break-word;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
  height: 10pt;
  min-height: 10pt;
  width: auto;
  min-width: 100px; /*Thiết lập chiều rộng tối thiểu */
  max-width: 200px; /* Giới hạn chiều rộng tối đa cho tất cả các cột */
  overflow: hidden; /* Ẩn dữ liệu dài ra ngoài cột */
  text-overflow: ellipsis; /* Hiển thị "..." nếu dữ liệu quá dài */
  font-size: 15px; /* Kích thước chữ trong bảng là 10px */
}

th {
  background-color: #234fa0;
  color: #ddd;
  top: 0;
  height: 40px;
  z-index: 2;
}

/* Màu nền cho các hàng trong bảng */
#resultTable tbody tr:nth-child(odd) {
  background-color: #f2faff; /* Màu lam nhạt cho các hàng lẻ */
}

#resultTable tbody tr:nth-child(even) {
  background-color: #e0f7ff; /* Màu lam nhạt hơn cho các hàng chẵn */
}

/* Chỉnh sửa khi hover chuột vào một hàng */
#resultTable tbody tr:hover {
  background-color: #a7d8ff; /* Màu lam đậm hơn khi hover */
}

/* Cải thiện độ canh lề và padding của các ô trong bảng */
#resultTable td,
#resultTable th {
  padding: 10px;
  text-align: center;
  border: 2px solid #ddd;
}

/* Tạo hiệu ứng khi hover vào các ô trong bảng */
#resultTable td:hover {
  background-color: #ffeb3b; /* Màu vàng nhạt khi hover */
  cursor: pointer; /* Thay đổi con trỏ khi hover */
}

b {
  font-size: 24px;
  display: block;
  text-align: center;
  margin-top: 20px;
}

.select-chapter {
  display: none;
}

#searchForm {
  text-align: center;
  margin-top: 20px;
}

#updateLocation {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
  color: #007bff;
}

#tableContainer {
  width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: 0;
}

.page-button {
  margin: 0 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 15px;
}

.active-page {
  background-color: #007bff;
  color: white;
}

#paginationAndJumpToPage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  flex-wrap: wrap; /* Cho phép các phần tử trong flex container xuống dòng khi cần */
}

#pagination {
  text-align: center;
  margin-top: 10px;
  width: 60%; /* Chiếm 70% chiều rộng của phần chứa */
  min-width: 810px;
}

#jumpToPageSection {
  text-align: center;
  display: none; /* Ẩn phần nhập trang mặc định */
  margin-top: 10px;
  width: 30%; /* Chiếm 30% chiều rộng */
  min-width: 310px;
}
#jumpToPage {
  width: 100px;
  text-align: center;
}

.hidden-column {
  display: none !important;
  /* width: 1px; Làm cho cột rất nhỏ
  overflow: hidden;  Ẩn bất kỳ nội dung nào tràn ra ngoài 
  white-space: nowrap;  Ngăn ngừa nội dung bị chia thành nhiều dòng */
}

/* Khu vự sau đăng nhập, các ô và các nút cho đẹp */
#KhuVucSauDangNhap {
  position: relative;
  width: 100%;
  min-width: 1080px;
  min-height: 768px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Đảm bảo không có cuộn không cần thiết */
}

#KhuVucSauDangNhap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: url(/image/Background.jpg) no-repeat center center; */
  background-size: cover;
  opacity: 0.2; /* Mờ nền với độ trong suốt */
  z-index: -1; /* Đảm bảo lớp phủ nền không ảnh hưởng đến phần tử con */
}

#KhuVucSauDangNhap > * {
  z-index: 1; /* Các phần tử bên trong sẽ được hiển thị trên lớp phủ */
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1530ac;
  color: white;
  position: -webkit-sticky; /* Đảm bảo hỗ trợ trên các trình duyệt WebKit */
  top: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Thêm đổ bóng đen mờ phía ngoài */
  top: 0;
  z-index: 1000; /* Đảm bảo header luôn nằm trên các phần tử khác */
  height: 60px;
}
/* Logo */
/* Logo */
header .logo2 {
  flex: 0 0 auto;
  margin-right: auto; /* Đảm bảo logo nằm ở bên trái */
}

header .logo2 img {
  width: 50px; /* Kích thước logo */
  height: auto;
  margin-top: 0; /* Loại bỏ khoảng cách trên của logo */
  margin-left: 40px; /* Loại bỏ khoảng cách trên của logo */
}

/* Căn giữa chữ "PHẦN MỀM KSK" */
header .PhanMemKSK {
  padding-left: 20%;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  flex: 1; /* Căn giữa phần tử này trong nav */
  display: flex;
  justify-content: center; /* Căn giữa nội dung */
  align-items: center; /* Căn giữa theo chiều dọc */
  color: white;
}
/* Thiết lập cho nav */
nav.nav {
  display: flex;
  align-items: center; /* Căn giữa các phần tử con theo chiều dọc */
  justify-content: flex-start; /* Các phần tử trong nav sẽ căn trái */
  gap: 10px; /* Khoảng cách giữa các phần tử trong nav */
}

#IconTaiKhoan {
  display: flex;
  justify-content: center; /* Căn giữa phần tử theo chiều ngang */
  align-items: center; /* Căn giữa phần tử theo chiều dọc */
  width: 50px; /* Chiều rộng 50px */
  height: 50px; /* Chiều cao 50px */
  /* background-color: rgb(252, 3, 3);  */
}
#IconTaiKhoan .icon {
  font-size: 30px; /* Kích thước của biểu tượng */
}

/* Tài khoản */
#TaiKhoan {
  font-size: 16px;
  border-radius: 5px;
  padding: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 20px; /* Đảm bảo chiều cao dòng bằng với chiều cao của phần tử */
}

/* Tên tài khoản */
/* #TaiKhoanDangNhap {
  font-size: 16px;
  border-radius: 5px;
  padding: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 20px;
} */

/* Nút đăng xuất */
/* #logoutButton,
#BTDoiMatKhau {
  font-size: 16px;
  padding: 5px 15px;
  background-color: #129e05;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 50px;
  line-height: 20px; 
} */

#logoutButton, 
#BTDoiMatKhau {
  font-size: 16px;
  padding: 5px 15px;
  background-color: #129e05;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  /* margin-right: 50px; */
  line-height: 20px; /* Đảm bảo chiều cao dòng bằng với chiều cao của phần tử */
}

#logoutButton:hover {
  background-color: #af1010;
  color: rgb(231, 231, 25);
}
#BTDoiMatKhau:hover {
  background-color: #af1010;
  color: rgb(231, 231, 25);
}

#home2 {
  display: flex;
  justify-content: center; /* Phân chia các phần tử đều trên một hàng */
  align-items: center; /* Căn giữa các phần tử theo chiều dọc */
  gap: 20px; /* Khoảng cách giữa các phần tử */
  padding: 10px; /* Khoảng cách trong cùng */
  height: auto;
  flex-wrap: wrap; /* Cho phép các phần tử xuống dòng khi không đủ không gian */
}

#idButton {
  flex-wrap: nowrap; /* Cho phép các phần tử xuống dòng khi không đủ không gian */
}
#KhuVucCongTy,
#KhuVucThoiGian {
  padding: 10px;
  background-color: #f4f4f4; /* Màu nền nhẹ để dễ nhìn */
  border-radius: 8px; /* Bo góc nhẹ */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Thêm đổ bóng nhẹ */
  width: 350px;
}
#KhuVucCongTy {
  width: 550px;
}
#KhuVucCongTy div,
#KhuVucThoiGian div {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  width: 200px;
}
#KhuVucCongTy div {
  width: 100px;
}
#KhuVucCongTy,
#KhuVucThoiGian {
  display: flex; /* Đảm bảo các phần tử nằm trên cùng một hàng */
  align-items: center; /* Căn giữa các phần tử theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa các phần tử */
}

#KhuVucCongTy select,
#KhuVucThoiGian select {
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc; /* Đặt viền cho select */
}

.labelCongTy {
  padding-top: 10px;
  width: 130px;
}
.select-chapter {
  width: 300px;
}
#KhuVucCongTy .select-chapter {
  width: 500px;
}
#TraCuuButton {
  padding: 10px 20px;
  background-color: #0056b3; /* Màu xanh */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#TraCuuButton:hover {
  background-color: #057005; /* Màu xanh đậm khi hover */
}

.ThongTinAn {
  /* Ẩn phần thông tin */
  display: none;
}

#KhungTimKiem {
  display: flex;
  align-items: center;
  min-height: 50px;
  justify-content: flex-start; /* Phân phối khoảng cách giữa các phần tử */
  flex-wrap: wrap; /* Cho phép các phần tử trong flex container xuống dòng khi cần */
  gap: 10px; /* Khoảng cách giữa các phần tử */
  margin-right: 20px;
}
#KhungTimKiem > * {
  flex: 1 1 auto; /* Các phần tử có thể co lại và mở rộng */
  min-width: 100px; /* Đảm bảo mỗi phần tử có ít nhất chiều rộng này */
  box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước */
}
#message {
  padding: 0 15px 0 15px; /* Tạo padding tương tự như input với không gian cho icon */
  margin-left: 20px; /* Lề trái */
  margin-right: 30px; /* Lề phải */
  width: 60%; /* Đặt chiều rộng tương tự .input-TimKiem */
  min-width: 600px;
  height: auto; /* Để chiều cao tự động thay đổi theo nội dung */
  min-height: 40px; /* Chiều cao tối thiểu của khung */
  max-height: 200px; /* Đặt chiều cao tối đa cho khung (sẽ có thanh cuộn nếu vượt quá) */
  overflow-y: auto; /* Hiển thị thanh cuộn khi nội dung vượt quá chiều cao khung */
  border: 1px solid #ccc; /* Viền giống input */
  border-radius: 40px; /* Bo góc giống input */
  background-color: transparent; /* Đặt nền trong suốt giống input */
  font-size: 1em; /* Cỡ chữ mặc định */
  color: #000; /* Màu chữ giống input */
  line-height: 1.5; /* Khoảng cách dòng để văn bản dễ đọc */
  word-wrap: break-word; /* Đảm bảo từ dài không bị tràn */
  display: flex;
  align-items: center; /* Căn giữa văn bản theo chiều dọc */
  justify-content: flex-start; /* Căn trái văn bản */
  text-align: left; /* Căn trái văn bản */
  white-space: normal; /* Đảm bảo văn bản có thể xuống dòng */
}

/* Để hiển thị thanh cuộn nếu nội dung quá dài */
#message::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#message::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

#message::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Hiệu ứng cho label khi input có giá trị */
#message:focus {
  border-color: #ccc;
}

.TimKiemRiêng {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Căn chỉnh các phần tử */
  flex-wrap: nowrap; /* Không cho phép các phần tử xuống dòng */
  gap: 10px; /* Khoảng cách giữa các phần tử */
}
.input-TimKiem {
  position: relative; /* Thiết lập vị trí cho container */
  display: flex;
  align-items: center; /* Căn giữa theo chiều dọc */
  width: 30%; /* Đặt chiều rộng của .input-TimKiem là 25% */
  max-width: 400px;
  min-width: 200px;
  margin: 0;
  margin-left: 20px;
  flex-grow: 1; /* Cho phép input chiếm hết không gian còn lại */
}
.input-TimKiem .icon {
  position: absolute; /* Đặt icon bên trong input */
  top: 50%;
  left: 15px; /* Khoảng cách từ bên trái */
  transform: translateY(-50%); /* Căn giữa theo chiều dọc */
  font-size: 1.5em;
  color: #ccc;
}

.input-TimKiem input {
  flex-grow: 1; /* Cho phép input chiếm toàn bộ không gian còn lại */
  height: 40px;
  background: transparent;
  border: 1px solid #ccc; /* Viền nhẹ */
  outline: none;
  border-radius: 40px; /* Bo góc ô input */
  font-size: 1em;
  color: #000; /* Màu chữ */
  padding: 0 25px 0 45px; /* Padding để tạo không gian cho biểu tượng */
  margin-right: 10px; /* Khoảng cách giữa input và button */
}

.input-TimKiem label {
  position: absolute;
  top: 50%;
  left: 45px;
  transform: translateY(-50%);
  font-size: 1em;
  color: #ccc; /* Màu chữ nhạt cho label */
  pointer-events: none;
}

/* Khi người dùng bắt đầu nhập */
.input-TimKiem input:focus ~ label,
.input-TimKiem input:valid ~ label {
  color: #ccc; /* Màu chữ nhạt cho label */
  display: none;
}

/* Khi input trống, label vẫn giữ vị trí */
.input-TimKiem input:placeholder-shown ~ label {
  top: 50%;
  left: 45px;
  font-size: 1em;
  color: #ccc;
}

.input-TimKiem .btn {
  width: auto; /* Đặt chiều rộng nút tự động phù hợp với nội dung */
  padding: 10px 0;
  background-color: #0056b3; /* Màu nền nút */
  color: white;
  border: none;
  border-radius: 40px; /* Bo góc cho nút */
  cursor: pointer;
  font-size: 0.9em;
}

.input-TimKiem .btn:hover {
  background-color: #0056b3; /* Màu khi hover */
}

#TimKiemButton {
  min-width: 120px; /* Đặt chiều rộng tối thiểu cho nút */
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

#TimKiemButton:hover {
  background-color: #057005; /* Màu xanh đậm khi hover */
}

#ChonBaoCao {
  min-width: 120px; /* Đặt chiều rộng tối thiểu cho nút */
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

#ChonBaoCao:hover {
  background-color: #057005; /* Màu xanh đậm khi hover */
}

#ChonTongHop {
  min-width: 120px; /* Đặt chiều rộng tối thiểu cho nút */
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

#ChonTongHop:hover {
  background-color: #057005; /* Màu xanh đậm khi hover */
}

#NutDownload {
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  align-items: center; /* Căn giữa theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa các nút */
}
#downloadBtnPDF {
  min-width: 120px; /* Đặt chiều rộng tối thiểu cho nút */
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

#downloadBtnPDF:hover {
  background-color: #057005; /* Màu xanh đậm khi hover */
}
#downloadBtnExcel {
  min-width: 120px; /* Đặt chiều rộng tối thiểu cho nút */
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

#downloadBtnExcel:hover {
  background-color: #057005; /* Màu xanh đậm khi hover */
}

#divSoLuongNhanVien {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-right: 10px; /* Nếu bạn muốn khoảng cách giữa các phần tử */
  margin-top: 10px;
  margin-bottom: 0;
}

#divSoLuongNhanVien div {
  display: inline-block; /* Hiển thị các div con trong cùng một dòng */
  margin-right: 5px; /* Khoảng cách giữa các phần tử con */
}
.sticky-table {
  overflow: auto;
  max-width: 100%; /* Đảm bảo bảng có thể cuộn ngang */
  margin: 0;
  border-collapse: collapse; /* Loại bỏ khoảng trống giữa các cột */
}

/* Cố định các cột từ 1 đến 6 */
.sticky-table thead th:nth-child(-n + 4),
.sticky-table tbody td:nth-child(-n + 4) {
  position: sticky;
  left: 0;
  background-color: rgb(82, 4, 4);
  z-index: 4;
  box-shadow: 2px 0 5px rgba(20, 20, 20, 0.1); /* Thêm bóng để phân biệt các cột cố định */
  background-clip: padding-box; /* Đảm bảo nền không bị cắt ngoài */
}

/* Điều chỉnh vị trí và chiều rộng cho từng cột */
.sticky-table thead th:nth-child(1),
.sticky-table tbody td:nth-child(1) {
  left: 2px;
  min-width: 99px;
  max-width: 99px;
  width: 99px; /* Thêm điều chỉnh chiều rộng */
}

.sticky-table thead th:nth-child(2),
.sticky-table tbody td:nth-child(2) {
  left: 101px;
  min-width: 121px;
  max-width: 121px;
  width: 121px; /* Điều chỉnh chiều rộng */
}

.sticky-table thead th:nth-child(3),
.sticky-table tbody td:nth-child(3) {
  left: 222px;
  min-width: 210px;
  max-width: 210px;
  width: 210px; /* Điều chỉnh chiều rộng */
}

.sticky-table thead th:nth-child(4),
.sticky-table tbody td:nth-child(4) {
  left: 432px;
  min-width: 112px;
  max-width: 112px;
  width: 112px; /* Điều chỉnh chiều rộng */
}

/* Lớp nền che kín các dòng trên (thường là các dòng tiêu đề) */
.sticky-table thead {
  position: sticky;
  top: 0; /* Đảm bảo phần đầu của bảng luôn dính ở trên */
  background-color: rgba(16, 65, 226, 0.7); /* Màu nền, có thể điều chỉnh */
  z-index: 3; /* Nền sẽ che phủ các cột cố định */
}

/* Đảm bảo rằng nền không bị đè bởi các cột cố định */
.sticky-table thead th {
  position: relative;
  z-index: 2; /* Lớp nền của các tiêu đề bảng */
}

.sticky-table thead th:nth-child(-n + 4) {
  background-color: #234fa0;
  color: #ffffff;
}

/* Màu nền xen kẽ cho cột đầu tiên */
.sticky-table tbody tr:nth-child(odd) td:nth-child(1) {
  background-color: #f2faff; /* Màu lam nhạt cho cột đầu tiên ở hàng lẻ */
}

.sticky-table tbody tr:nth-child(even) td:nth-child(1) {
  background-color: #e0f7ff; /* Màu lam nhạt hơn cho cột đầu tiên ở hàng chẵn */
}

/* Màu nền xen kẽ cho cột thứ 2 */
.sticky-table tbody tr:nth-child(odd) td:nth-child(2) {
  background-color: #f2faff; /* Màu lam nhạt cho cột thứ 2 ở hàng lẻ */
}

.sticky-table tbody tr:nth-child(even) td:nth-child(2) {
  background-color: #e0f7ff; /* Màu lam nhạt hơn cho cột thứ 2 ở hàng chẵn */
}

/* Màu nền xen kẽ cho cột thứ 3 */
.sticky-table tbody tr:nth-child(odd) td:nth-child(3) {
  background-color: #f2faff; /* Màu lam nhạt cho cột thứ 3 ở hàng lẻ */
}

.sticky-table tbody tr:nth-child(even) td:nth-child(3) {
  background-color: #e0f7ff; /* Màu lam nhạt hơn cho cột thứ 3 ở hàng chẵn */
}

/* Màu nền xen kẽ cho cột thứ 4 */
.sticky-table tbody tr:nth-child(odd) td:nth-child(4) {
  background-color: #f2faff; /* Màu lam nhạt cho cột thứ 4 ở hàng lẻ */
}

.sticky-table tbody tr:nth-child(even) td:nth-child(4) {
  background-color: #e0f7ff; /* Màu lam nhạt hơn cho cột thứ 4 ở hàng chẵn */
}

/* Khi hover vào một hàng, các cột cố định sẽ đổi màu */
.sticky-table tbody tr:hover td:nth-child(-n + 4) {
  background-color: #a7d8ff; /* Đảm bảo màu nền của các cột cố định khớp với màu nền hàng */
}

/* Tổng hợp */
#pdfIframe {
  display: block; /* Đảm bảo iframe là block-level element */
  margin: 10px auto 0; /* Căn giữa theo chiều ngang, margin-top 10px */
  width: 960px; /* Chiều rộng của iframe */
  height: 720px; /* Chiều cao của iframe */
}

/* phần thông tin của công ty, phòng khám */
/* Định dạng cho container chính */

.ThongTinCongTy4 {
    margin: 0;            /* Tự căn giữa theo chiều ngang */
    margin-top: 10px;            /* Tự căn giữa theo chiều ngang */
    /* margin-left: -30px; */
    width: 100%;                  /* Chiếm toàn bộ chiều ngang */
    box-sizing: border-box;       /* Tính cả padding vào width */
    height: 100px; /* Chiều cao của container bằng chiều cao của viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif; /* Sử dụng font Arial cho toàn bộ văn bản trong container */
  }
.ThongTinCongTy4 div {
    margin-bottom: 5px; /*Thêm khoảng cách dưới mỗi phần tử con */
    font-size: 18px; /*Thiết lập kích thước font là 16px */
  }
  #IDPKCongTy4,
  #IDPhongKham4 {
    font-size: 18px;
    font-weight: bold; /* In đậm văn bản */
  }
  #IDDiaChi4,
  #IDSDT4 {
    font-size: 14px;
  }

.ThongTinCongTy {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 7px;
  display: flex; /* Sử dụng Flexbox để bố trí các phần tử con */
  height: 60px; /* Chiều cao của container bằng chiều cao của viewport */
  font-family: Arial, sans-serif; /* Sử dụng font Arial cho toàn bộ văn bản trong container */
  
}

#IDLogo {
  display: flex;
  width: 15%;
}
.ThongTinCongTy .IDLogo a {
    display: none;
}
.ThongTinCongTy2 {
  width: 100%;
  display: flex;/* Sử dụng Flexbox để bố trí các phần tử con */
  flex-direction: column; /* Sắp xếp các phần tử con theo chiều dọc */
  align-items: center; /* Căn giữa các phần tử con theo chiều ngang */
  justify-content: center; /* Căn giữa các phần tử con theo chiều dọc */
  height: 50px; /* Chiều cao của container bằng chiều cao của viewport */
  font-family: Arial, sans-serif; /* Sử dụng font Arial cho toàn bộ văn bản trong container */
}

/* Định dạng cho các phần tử con */
.ThongTinCongTy2 div {
  margin-bottom: 5px; /*Thêm khoảng cách dưới mỗi phần tử con */
  font-size: 16px; /*Thiết lập kích thước font là 16px */
}

/* Định dạng cho các phần tử có id cụ thể */
#IDPKCongTy,
#IDPhongKham,
#IDLoaiBaoCao,
#IDCongTy {
  font-weight: bold; /* In đậm văn bản */
}
#IDPKCongTy,
#IDPhongKham,
#IDDiaChi,
#IDSDT {
  font-size: 18px;
  display: none;
}
#IDCongTy {
  font-size: 20px;
  color: #033faf;
}
#IDLoaiBaoCao {
  text-align: center; /* Căn giữa văn bản */
  font-weight: bold; /* In đậm văn bản */
  font-size: 25px; /* Thiết lập kích thước font là 18px */
  margin-top: 5px; /* Thêm khoảng cách trên 20px */
  color: #e20606;
}


/* Footer */
footer {
  background-color: #223366;
  color: #fff;
  text-align: center;
  display: flex;           /* dùng flexbox */
  justify-content: center; /* căn giữa ngang */
  padding: 20px 0;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer p {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
}

footer p a {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  text-align: center;
}

footer p a:hover {
  opacity: 1;
  text-decoration: underline;
}