/* General Styles */

body {
  font-family: 'Arial', sans-serif; /* Sử dụng font chữ hiện đại */
  background-color: #f8f9fa; /* Màu nền nhạt, dễ nhìn */
  color: #333; 
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Đảm bảo nội dung luôn đủ chiều cao màn hình */
}

.container {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  width: 100%;
}

h1 {
  text-align: center;
  font-size: 2.5em;
  color: #007bff; /* Màu xanh dương nổi bật */
  margin-bottom: 20px;
}

h3 {
  margin-top: 30px;
  font-size: 1.6em;
  color: #333;
}

/* Word Display */

.word-display {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
}

.word-container {
  display: flex;
  justify-content: center;
  gap: 10px; /* Khoảng cách giữa các chữ cái */
  margin-bottom: 15px;
}

.word-container div {
  background-color: #007bff;
  color: white;
  font-size: 2em;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Thêm hiệu ứng chuyển động */
}

.word-container div:hover {
  transform: translateY(-2px); /* Di chuyển lên khi hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Thêm đổ bóng khi hover */
}

.hint {
  font-size: 1.2em;
  color: #555;
}

/* Result */

.result {
  text-align: center;
  font-size: 1.5em;
  margin-top: 20px;
}

.result.correct {
  color: #28a745; /* Màu xanh lá cây cho kết quả đúng */
}

.result.incorrect {
  color: #dc3545; /* Màu đỏ cho kết quả sai */
}

/* Check Button */

.check-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.check-button {
  background-color: #28a745;
  color: white;
  font-size: 1.2em;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.check-button:hover {
  background-color: #218838;
}

/* Stats Section */

.stats-section {
  margin-bottom: 20px;
}

.stats-box {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stats-box p {
  font-size: 1.1em;
  margin: 5px 0;
}

/* Progress Bar */

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px; /* Khoảng cách với chữ phía trên */
}

.progress-bar-fill {
  height: 100%;
  background-color: #007bff;
  width: 0%;
  transition: width 0.5s ease;
}

/* History Section */

.history-section {
  margin-top: 30px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

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

table th {
  background-color: #007bff;
  color: white;
}

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

table tr:hover {
  background-color: #eaeaea;
}
.input-check-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.input-check-container input {
  font-size: 1.2em;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 50%;
}

.input-check-container button {
  background-color: #ffc107;
  color: white;
  font-size: 1.2em;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.input-check-container button:hover {
  background-color: #e0a800;
}