body {
  font-family: sans-serif;
  display: flex; /* Sử dụng flexbox để căn giữa */
  flex-direction: column; /* Sắp xếp các phần tử theo chiều dọc */
  justify-content: center; /* Căn giữa theo chiều dọc */
  align-items: center; /* Căn giữa theo chiều ngang */
  min-height: 100vh; /* Đảm bảo body chiếm toàn bộ chiều cao màn hình */
}

#sentence-container,
#answer-areas {
  text-align: center;
}
button {
    padding: 6px 12px;
    background-color: #3d3c384f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    margin: 10px;
}
.word {
  display: inline-block;
  padding: 8px 12px; /* Tăng padding cho dễ kéo thả */
  margin: 5px;
  border: 2px solid #ccc; /* Viền dày hơn */
  border-radius: 20px; /* Bo tròn góc */
  cursor: move;
  background-color: #f0f0f0; /* Màu nền nhạt */
  font-weight: bold; /* Chữ đậm */
}

.drop-area {
	margin-top: 20px;
  border: 3px dashed #007bff; /* Viền đứt nét, màu xanh */
  padding: 15px;
  margin-bottom: 15px;
  min-height: 40px;
  text-align: left;
  font-size: 1.2em; /* Chữ to hơn */
}

.selected-area {
  /* Kiểu dáng khi vùng đáp án được chọn */
  background-color: lightblue; /* Màu nền nổi bật */
  border-color: #007bff; /* Viền màu xanh */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
}
.word-placeholder { /* Nếu bạn vẫn sử dụng placeholder */
  display: inline-block;
  width: 80px;
  height: 20px;
  border: 1px dashed #ccc;
  margin: 5px;
}

#check-button, #reset-button {
  padding: 12px 24px; /* Tăng padding cho nút */
  background-color: #007bff; /* Màu xanh */
  color: white;
  border: none;
  border-radius: 5px; /* Bo tròn góc */
  cursor: pointer;
  font-size: 1.1em; /* Chữ to hơn */
  margin: 10px; /* Khoảng cách giữa các nút */
}

#check-button:hover, #reset-button:hover {
  background-color: #0056b3; /* Màu xanh đậm hơn khi hover */
}

#debug-output {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  white-space: pre-wrap;
}