body {
  padding-top: 20px;
  font-family: "Noto Sans", Arial, sans-serif;
}

text {
  font-size: 11px;
  pointer-events: none;
}
#chart {
  /* position: absolute; */
  width: 400px;
  /* height: 500px; */
  top: 0;
  left: 0;
  z-index: 999;
}
#question {
  position: absolute;
  width: 400px;
  height: 500px;
  top: 0;
  left: 520px;
}
#question h1 {
  font-size: 50px;
  font-weight: bold;
  /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
  position: absolute;
  padding: 0;
  margin: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.text-chart {
  width: 500px;
  height: 100px;
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  align-items: center; /* Căn giữa theo chiều dọc */
  text-align: center; /* Căn giữa văn bản bên trong */
  font-size: 18px; /* Kích thước font */
  font-weight: bold; /* Đậm chữ */
  color: #333; /* Màu chữ */
  /* background-color: #f7f7f7; */
  border-radius: 10px; /* Bo góc */
  padding: 20px; /* Thêm khoảng cách trong */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease; /* Hiệu ứng chuyển động */
}

.text-chart span {
  font-size: 20px; /* Kích thước chữ trong span */
  color: #2c3e50; /* Màu chữ đẹp hơn */
}

.text-chart:hover {
  /* background-color: #3498db; */
  color: white; /* Màu chữ khi hover */
  transform: scale(1.05); /* Phóng to nhẹ khi hover */
}

#content {
  display: flex;
  flex-direction: column;
  /* justify-content: center;  */
  align-items: center;
  text-align: center; /* Căn giữa văn bản bên trong */
}

.input-container {
  display: flex;
  flex-direction: column; /* Sắp xếp theo chiều dọc */
  align-items: center; /* Căn giữa theo chiều ngang */
  gap: 10px; /* Khoảng cách giữa các phần tử */
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto; /* Căn giữa khối theo trang */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.input-box {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-box:focus {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.input-box::placeholder {
  color: #aaa;
  font-style: italic;
}

.container {
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  /* align-items: center; */
  /* flex-wrap: wrap;  */
  /* height: 100vh; */
  gap: 20px;
  /* background-color: #f0f0f0; */
}

.container-child {
  width: 600px;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  /* Khi màn hình nhỏ hơn hoặc bằng 768px */
  .container-child {
    width: 0px;
    display: none; /* Ẩn phần tử */
  }
}
/* Container */
#gift {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Tạo 2 cột đều nhau */
  gap: 20px;
  padding: 20px;
}

/* Gift item */
.gift-item {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  background: linear-gradient(145deg, #f9f9f9, #e3e3e3);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Hover effect */
.gift-item:hover {
  transform: scale(1.05);
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
}

/* Name (Heading) */
.gift-item h3 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}

/* Value (Paragraph) */
.gift-item p {
  font-size: 1rem;
  color: #555;
}

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

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

table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

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

table tr:hover {
  background-color: #f1f1f1;
}
.centered-container {
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  align-items: center; /* Căn giữa theo chiều dọc */
  /* height: 100vh;  */
  text-align: center; /* Căn giữa văn bản bên trong */
}

h2 {
  margin: 0; /* Bỏ margin mặc định của h2 */
  font-size: 24px; /* Cỡ chữ cho h2 */
  font-weight: bold; /* Đậm chữ */
}