body {
    font-family: 'Comic Sans MS', sans-serif; /* Sử dụng font chữ thân thiện */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(241 218 189); /* Màu xanh da trời nhạt */
    color: #333; /* Màu xám đậm */
}

.container {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    text-align: center;
    margin-bottom: 30px;
}

.settings {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 40px;
	padding: 20px;
}

.settings label {
    margin-right: 10px;
    flex: 0 0 auto;
	    margin-left: 10px;
}

.settings input, .settings select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px 0;
   width: 15%;
}

.settings button {
    padding: 12px 25px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    margin: 25px;
}

.settings button:hover {
    background-color: #0056b3;
}
.settings {
    /* ... (Các định dạng khác vẫn giữ nguyên) ... */
    opacity: 0.4; /* Giảm độ mờ của toàn bộ phần cấu hình */
}

.settings:hover {
    opacity: 1; /* Khi di chuột qua, tăng độ mờ về 1 để dễ nhìn hơn */
}

.game {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.problem {
    font-size: xxx-large;
    margin-bottom: 20px;
}

.timer {
    font-size: 20px;
    margin-bottom: 15px;
}

.result {
    font-size: 18px;
    margin-bottom: 20px;
}

.answer {
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 18px;
    margin-bottom: 15px;
    width: 200px;
    text-align: center;
}

.game button {

}



.start-stop-buttons {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    margin-bottom: 40px; /* Add margin to separate from the game section */
}

.start-stop-buttons button {
    margin: 0 10px; /* Add some space between the buttons */
}

.stats {
    text-align: center;
    margin-bottom: 40px;
}

#history {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

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

#history th {
    background-color: #f0f0f0;
    font-weight: bold;
}

#history tr:nth-child(even) {
    background-color: #f9f9f9;
}
/* CSS cho 3 nút */
.start-stop-buttons button {
    background-color: #4CAF50; /* Màu xanh lá cây */
    color: white;
    border: none;
    border-radius: 10px;
    padding: 15px 30px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease; /* Thêm hiệu ứng chuyển tiếp */
    margin: 0 10px; /* Khoảng cách giữa các nút */
}


#check {
    background-color: #008CBA; /* Màu xanh dương */
}

.start-stop-buttons button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
#check {
  background-color: #008CBA; /* Màu xanh dương */
  color: white;
  border: none;
  border-radius: 20px; /* Bo tròn góc nhiều hơn */
  padding: 15px 30px;
  font-family: 'Comic Sans MS', sans-serif; /* Sử dụng font chữ vui nhộn */
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ */
}

#check:hover {
  background-color: #00689b; /* Màu xanh đậm hơn khi hover */
  transform: scale(1.05); /* Phóng to nhẹ khi hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Đổ bóng đậm hơn khi hover */
}
.start-stop-buttons button:disabled {
  background-color: #ccc; /* Màu xám khi không hoạt động */
  color: #666; /* Màu chữ xám nhạt */
  cursor: default; /* Thay đổi con trỏ chuột */
  box-shadow: none; /* Loại bỏ hiệu ứng đổ bóng */
}
#check:disabled {
  background-color: #ccc; /* Màu xám khi bị khóa */
  color: #666; /* Màu chữ xám nhạt khi bị khóa */
  cursor: default; /* Con trỏ chuột mặc định khi bị khóa */
  box-shadow: none; /* Loại bỏ hiệu ứng đổ bóng khi bị khóa */
}
#clearHistory {
  background-color: #f44336; /* Màu đỏ, thể hiện tính chất xóa bỏ */
  color: white;
  border: none;
  border-radius: 20px; /* Bo tròn góc */
  padding: 12px 24px;
  font-family: 'Comic Sans MS', sans-serif; /* Font chữ thân thiện */
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ */
  margin: 20px;
}

#clearHistory:hover {
  background-color: #d32f2f; /* Màu đỏ đậm hơn khi hover */
  transform: scale(1.05); /* Phóng to nhẹ khi hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Đổ bóng đậm hơn khi hover */
}
#answer {
  padding: 15px; /* Tăng padding để ô nhập rộng hơn */
  border: 2px solid #ccc;
  border-radius: 10px; /* Bo tròn góc nhiều hơn */
  font-size: 24px; /* Tăng kích thước font chữ */
  width: 200px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
  font-family: 'Comic Sans MS', sans-serif; /* Sử dụng font chữ thân thiện */
}

#answer:focus {
  outline: none; /* Loại bỏ viền mặc định khi focus */
  border-color: #008CBA; /* Đổi màu viền khi focus */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Đổ bóng đậm hơn khi focus */
}
#problem {
    font-size: 48px; /* Kích thước chữ lớn */
    font-family: 'Comic Sans MS', sans-serif; /* Font chữ thân thiện */
    color: #007bff; /* Màu xanh dương nổi bật */
    margin-bottom: 20px; /* Khoảng cách với các phần tử khác */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng nhẹ */
}

/* CSS cho màn hình loading */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(241 218 189); /* Màu nền trắng */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Đảm bảo màn hình loading nằm trên cùng */
  
}

#loading-screen img {
  max-width: 60%; /* Điều chỉnh kích thước hình ảnh loading */
  max-height: 60%;
  border-radius: 15px; /* Bo tròn góc 15px */
  object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh khi co giãn */
 
}

/* Ẩn nội dung trang web ban đầu */
.container {
  visibility: hidden; /* Ẩn nội dung */
}
#loading-screen h2 {
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 36px;
  color: #007bff; /* Màu xanh dương */
  margin-bottom: 20px; /* Khoảng cách với hình ảnh loading */
}
#loading-screen {
  /* ... Các thuộc tính CSS khác ... */
  flex-direction: column; /* 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 */
  
}

#loading-screen h2 {
  /* ... Các thuộc tính CSS khác ... */
  margin-bottom: 20px; /* Khoảng cách giữa tiêu đề và hình ảnh */
}
#loading-screen {
  /* ... Các thuộc tính CSS khác ... */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



@media (max-width: 768px) {
  #loading-screen h2 {
    font-size: 24px;
  }
}
.game-container {
    max-width: 90vw;
    max-height: 90vh;
	margin: 100px;
}
.container {
    /* ... Các thuộc tính CSS khác ... */
    max-width: 90vw;
  
}
.game-container {
    border: 3px dashed #ff5733; /* Viền nét đứt màu cam */
    padding: 100px; /* Tạo khoảng cách bên trong */
    border-radius: 8px; /* Bo góc nhẹ cho đẹp */
    background-color: rgba(255, 235, 205, 0.3); /* Màu nền nhạt để nổi bật */
}
.hidden {
    display: none;
}

#guide {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin-top: 10px;   
    line-height: 1.6;
}

#toggleGuide {
    position: absolute;
    top: 20px; /* Điều chỉnh khoảng cách từ trên xuống */
    right: 20px; /* Căn lề phải */
    background-color: #f39c12;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
}

#toggleGuide:hover {
    background-color: #e67e22;
    transform: scale(1.05);
}