body {
    font-family: 'Arial', sans-serif;  /* Chọn font chữ dễ đọc */
    background: linear-gradient(to right, #f2f2f2, #ffffff); /* Sử dụng gradient */
    color: #333;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px; /* Giới hạn độ rộng tối đa */
    margin: auto;
    background-color: white;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
}
h1 {
    text-align: center;
    color: #0056b3;
    font-size: 2.5rem;
    margin-bottom: 20px;
}
h2, h3 {
    text-align: center;
    font-weight: 600; /* Làm đậm tiêu đề */
}

/* Style cho input file và button */
input[type="file"],
button {
    display: block; /* Hiển thị button trên một dòng riêng biệt */
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc; /* Thêm viền cho input */
    border-radius: 5px; /* Bo tròn góc input */
}

button {
    background-color: #007bff; /* Màu xanh dương */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu mượt mà */
}

button:hover {
    background-color: #0069d9; /* Màu xanh dương đậm hơn khi hover */
}

/* Style cho phần mapping */
.mappingRow {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Căn giữa các phần tử theo chiều dọc */
    margin: 10px 0;
}

.mappingRow select {
    width: 45%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Style cho biểu đồ */
canvas {
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
}

/* Style cho bảng thống kê */
.statistics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
}

.statistics-table th, .statistics-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.statistics-table th {
    background-color: #f0f0f5; /* Màu nền nhạt cho tiêu đề */
    font-weight: bold;
}

.statistics-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.statistics-table tr:hover {
    background-color: #f1f1f1;
}

/* Thêm style cho các phần tử khác */
ul {
    list-style: none; /* Ẩn dấu chấm của danh sách */
    padding: 0;
}

li {
    padding: 5px 0;
    border-bottom: 1px solid #eee; /* Thêm đường kẻ giữa các mục */
}
/* Style cho cây dữ liệu */
#importedStructure,
#originalStructure {
  font-family: monospace; /* Sử dụng font monospace để căn chỉnh các ký tự */
  white-space: pre;       /* Giữ nguyên khoảng trắng và xuống dòng */
}

.field-item {
  list-style-type: none; /* Loại bỏ dấu chấm đầu dòng */
  margin: 5px 0;         /* Khoảng cách giữa các mục */
  position: relative;     /* Định vị tương đối cho các mục */
}

.field-item.imported {
  padding-left: 20px;   /* Thụt lề cho cây dữ liệu imported */
}

.field-item.original {
  padding-left: 40px;   /* Thụt lề cho cây dữ liệu original */
}

.field-item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;    /* Khoảng cách giữa nút và văn bản */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.field-item ul {
  padding-left: 20px;   /* Thụt lề cho các cấp con */
  list-style-type: none; /* Loại bỏ dấu chấm đầu dòng cho các cấp con */
}

.field-item ul li {
  margin-top: 5px;      /* Khoảng cách giữa các mục con */
}

.field-item select {
  margin-left: 10px;   /* Khoảng cách giữa văn bản và select */
}
#importedStructure,
#originalStructure {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f8f9fa;
       margin-bottom: 20px;
}
/* Style cho phần chọn danh mục */
#categorySelection {
  width: 100%;           /* Chiều rộng của select */
  padding: 15px;         /* Khoảng cách bên trong select */
  font-size: 18px;       /* Kích thước chữ */
  border: 2px solid #dd0e0e; /* Viền của select */
  border-radius: 5px;    /* Bo tròn góc */
  appearance: none;       /* Loại bỏ mũi tên mặc định */
  background-color: #ffe8e8; /* Màu nền */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* Thêm mũi tên custom */
  background-repeat: no-repeat;
  background-position: right 15px center; /* Vị trí của mũi tên */
  margin-bottom: 20px;   /* Khoảng cách với phần tử bên dưới */
}

/* Hover effect */
#categorySelection:hover {
  border-color: #fb0303; /* Thay đổi màu viền khi hover */
}

/* Focus effect */
#categorySelection:focus {
  outline: none;          /* Loại bỏ outline mặc định */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Thêm shadow khi focus */
}
/* Style cho biểu đồ radar */
#radarChart .radarChartLabel { /* Chọn label của biểu đồ radar */
  font-size: 14px; /* Điều chỉnh kích thước chữ ở đây */
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}

table th, table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
}

table th {
    background-color: #f2f2f2;
    color: #333;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

table td {
    vertical-align: top;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f0f0f5;
}
/* Cải tiến giao diện cho bảng thống kê */
.statistics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Bo tròn bảng */
    overflow: hidden;
}

.statistics-table th, .statistics-table td {
    border: 1px solid #ddd;
    padding: 12px 10px;
    text-align: left;
}

.statistics-table th {
    background-color: #0056b3;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

.statistics-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.statistics-table tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
}

/* Dòng kẻ đỏ cho các mục có tỷ lệ dưới 75% */
.statistics-table tr.low-performance {
    background-color: rgba(255, 0, 0, 0.1); /* Nền nhạt màu đỏ */
    border-left: 4px solid red; /* Đường viền đỏ nổi bật bên trái */
}

/* Style cho nút bấm */
button {
    display: inline-block;
    width: auto;
    padding: 12px 20px;
    margin: 10px 0;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ */
}

/* Cải tiến input file */
input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 2px dashed #ccc; /* Viền nét đứt */
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    color: #666;
    background-color: #fafafa;
    transition: border-color 0.3s ease;
}

input[type="file"]:hover {
    border-color: #007bff; /* Viền màu xanh khi hover */
}

/* Style cho tiêu đề chính */
h1 {
    text-align: center;
    color: #0056b3;
    font-size: 3rem;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

/* Style chung cho toàn bộ trang */
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #f2f2f2, #ffffff);
    color: #333;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
/* Container tổng cho SavedStudyStatistics */
#savedStudyStatisticsContainer {
    margin-top: 30px;
    background-color: #f9f9f9; /* Màu nền nhạt */
    padding: 20px;
    border-radius: 10px; /* Bo tròn */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Đổ bóng */
}

/* Tiêu đề cho mỗi bảng đã lưu */
#savedStudyStatisticsContainer h3 {
    font-size: 0.7rem;
    color: #0056b3; /* Màu xanh đồng bộ */
    margin-bottom: 10px;
    text-align: left; /* Căn lề trái */
}

/* Style cho bảng đã lưu */
.saved-statistics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 8px; /* Bo tròn bảng */
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Đổ bóng */
}

.saved-statistics-table th, .saved-statistics-table td {
    border: 1px solid #ddd;
    padding: 10px 8px;
    text-align: center;
}

.saved-statistics-table th {
    background-color: #0056b3; /* Màu xanh tiêu đề */
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

.saved-statistics-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Màu nền cho hàng chẵn */
}

.saved-statistics-table tr:hover {
    background-color: #e6e6e6; /* Hiệu ứng hover */
}

/* Style cho đoạn thông tin tổng số câu */
#savedStudyStatisticsContainer p {
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
    font-weight: bold;
    text-align: left;
}

/* Style khi không có bảng nào được lưu */
#savedStatisticsList p {
    font-size: 0.5rem;    
    text-align: center;
}


/* Hiệu ứng hover đổ bóng cho nút */
button:hover {
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* Đường viền động khi chọn mục */
select:focus {
    border: 2px solid #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* Tổng quan container */
#statisticsTableContainer, #statisticsrenderComparisonTable {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9; /* Nền màu nhạt */
    border-radius: 10px; /* Bo tròn góc */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
}

/* Tiêu đề bảng so sánh */
#statisticsTableContainer h2, #statisticsrenderComparisonTable h2 {
    text-align: center;
    font-size: 1.8rem;
    color: #0056b3; /* Màu xanh dương nổi bật */
    margin-bottom: 20px;
}

/* Bảng so sánh */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng cho bảng */
    border-radius: 10px; /* Bo tròn bảng */
    overflow: hidden; /* Đảm bảo không tràn góc */
}

/* Tiêu đề bảng */
.comparison-table th {
    background-color: #0056b3; /* Màu xanh đồng bộ */
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 12px;
    border: 1px solid #ddd;
}

/* Nội dung bảng */
.comparison-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center; /* Căn giữa nội dung */
}

/* Hàng chẵn */
.comparison-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Màu nền nhạt */
}

/* Hiệu ứng hover */
.comparison-table tr:hover {
    background-color: #f1f1f1; /* Đổi màu khi hover */
    transition: background-color 0.3s ease;
}

/* Dòng dữ liệu chênh lệch tích cực */
.comparison-table td.positive {
    color: green; /* Màu xanh lá */
    font-weight: bold;
}

/* Dòng dữ liệu chênh lệch tiêu cực */
.comparison-table td.negative {
    color: red; /* Màu đỏ */
    font-weight: bold;
}

/* Trung bình tổng */
.comparison-table tr:last-child td {
    font-weight: bold;

}
/* Bảng thống kê % trung bình tổng */
.average-statistics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-top: 20px;
    border-radius: 8px; /* Bo tròn bảng */
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Đổ bóng */
}

.average-statistics-table th, .average-statistics-table td {
    border: 1px solid #ddd;
    padding: 10px 8px;
    text-align: center;
}

.average-statistics-table th {
    background-color: #0056b3; /* Màu xanh tiêu đề */
    color: white;
    font-weight: bold;
    
}

.average-statistics-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Màu nền cho hàng chẵn */
}

.average-statistics-table tr:hover {
    background-color: #f1f1f1; /* Hiệu ứng hover */
    transition: background-color 0.3s ease;
}
.radar-chart-data-table {
    width: 100%; /* Chiều rộng bảng bằng chiều rộng container */
    border-collapse: collapse; /* Gom các border của cell lại */
    margin-top: 20px; /* Khoảng cách với biểu đồ */
}

.radar-chart-data-table th,
.radar-chart-data-table td {
    border: 1px solid #ddd; /* Border mỏng màu xám nhạt */
    padding: 8px; /* Khoảng cách giữa nội dung và border */
    text-align: left; /* Căn trái văn bản */
}

.radar-chart-data-table th {
    background-color: #f5f5f5; /* Nền màu xám nhạt cho tiêu đề */
    font-weight: bold; /* In đậm tiêu đề */
}
/* ... (CSS cho bảng dữ liệu) */

/* ... (CSS cho bảng dữ liệu) */

.progress {
    width: 100%; /* Chiều rộng của progress bar */
    background-color: #e9ecef; /* Màu nền của progress bar */
    border-radius: 5px; /* Bo tròn góc */
    overflow: hidden; /* Ẩn phần thừa của progress-bar */
}

.progress-bar {
    height: 20px; /* Chiều cao của progress bar */
    color: white; /* Màu chữ trắng */
    text-align: center; /* Căn giữa chữ */
    line-height: 20px; /* Canh giữa chữ theo chiều dọc */
    border-radius: 5px; /* Bo tròn góc */
}