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;
}