@charset "UTF-8";
h2,
h3,
h4,
h5,
h6 {
  color: #764d2a;
  font-family: "MontserratBold";
}
h2 > *,
h3 > *,
h4 > *,
h5 > *,
h6 > * {
  color: #764d2a;
}

p,
span {
  color: #090909;
}
p > *,
span > * {
  color: #090909;
}

.gia-tri-cot-loi {
  --duration: 3s;
  --shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
  /* Khung bảng */
  /* Cột timeline giữa */
  /* Vòng tròn ở ô trái của hàng lẻ */
  /* Vòng tròn ở ô phải của hàng chẵn */
  /* Số thứ tự và nội dung */
  /* Responsive (tuỳ chọn) */
}
.gia-tri-cot-loi .table > :not(caption) > * > * {
  border-bottom: unset;
}
.gia-tri-cot-loi figure.table {
  margin: 60px auto;
}
.gia-tri-cot-loi figure.table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
}
.gia-tri-cot-loi figure.table td {
  vertical-align: middle;
  border-radius: 50%;
  flex: 1 1 300px;
  max-width: 100%;
  box-sizing: border-box;
}
.gia-tri-cot-loi figure.table td:nth-child(2) {
  width: 10%;
}
.gia-tri-cot-loi figure.table td:first-child,
.gia-tri-cot-loi figure.table td:last-child {
  width: 45%;
  max-width: 514px;
  border-radius: 0;
}
.gia-tri-cot-loi figure.table td:first-child {
  margin-right: 20px;
}
.gia-tri-cot-loi figure.table td:nth-child(2) {
  position: relative;
  max-width: 168px;
  height: 191px;
  top: 70px;
}
.gia-tri-cot-loi figure.table tr {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:nth-child(3) {
  padding: 26px 40px;
  box-shadow: var(--shadow);
  border-radius: 10px;
}
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:nth-child(2) {
  left: 20px;
}
.gia-tri-cot-loi figure.table tr:nth-child(even) td:nth-child(2) {
  right: 20px;
}
.gia-tri-cot-loi figure.table tr:nth-child(even) td:nth-child(1) {
  padding: 26px 40px;
  box-shadow: var(--shadow);
  border-radius: 10px;
}
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: -webkit-fill-available;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='144' height='191' viewBox='0 0 144 191' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46 56.5C46 55.3954 46.8954 54.5 48 54.5V54.5C49.1046 54.5 50 55.3954 50 56.5V188.5C50 189.605 49.1046 190.5 48 190.5V190.5C46.8954 190.5 46 189.605 46 188.5V56.5Z' fill='%23FBF5E3'/%3E%3Crect y='5' width='2' height='28' fill='%23764D2A'/%3E%3Crect x='2' y='18' width='142' height='2' fill='%23764D2A'/%3E%3Crect x='27' width='40' height='40' rx='20' fill='%23F5E8C4'/%3E%3Ccircle cx='47' cy='20' r='12' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  max-width: 144px;
}
.gia-tri-cot-loi figure.table tr:nth-child(even) td:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='144' height='191' viewBox='0 0 144 191' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M89.5 56.5C89.5 55.3954 90.3954 54.5 91.5 54.5V54.5C92.6046 54.5 93.5 55.3954 93.5 56.5V188.5C93.5 189.605 92.6046 190.5 91.5 190.5V190.5C90.3954 190.5 89.5 189.605 89.5 188.5V56.5Z' fill='%23FBF5E3'/%3E%3Crect y='20' width='142' height='2' fill='%23764D2A'/%3E%3Crect x='71' width='40' height='40' rx='20' fill='%23F5E8C4'/%3E%3Ccircle cx='91' cy='20' r='12' fill='white'/%3E%3Crect x='142' y='8' width='2' height='28' fill='%23764D2A'/%3E%3C/svg%3E");
  width: -webkit-fill-available;
  z-index: 1;
  background-repeat: no-repeat;
  max-width: 144px;
}
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:first-child strong,
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:first-child p {
  display: inline-block;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at center, #eacd75 0%, #e5c36a 38%, #ddb359 100%);
  font-family: "MontserratBold";
  animation: movecloudsright var(--duration) linear infinite;
  animation: movecloudsright calc(var(--duration) + 5s) linear infinite;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  line-height: 140px;
  margin: auto;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:first-child strong::before,
.gia-tri-cot-loi figure.table tr:nth-child(odd) td:first-child p::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 85%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gia-tri-cot-loi figure.table tr:nth-child(even) td:last-child strong,
.gia-tri-cot-loi figure.table tr:nth-child(even) td:last-child p {
  display: inline-block;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at center, #eacd75 0%, #e5c36a 38%, #ddb359 100%);
  animation: movecloudsleft var(--duration) linear infinite;
  animation: movecloudsleft calc(var(--duration) + 5s) linear infinite;
  font-family: "MontserratBold";
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  line-height: 140px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.gia-tri-cot-loi figure.table tr:nth-child(even) td:last-child strong::before,
.gia-tri-cot-loi figure.table tr:nth-child(even) td:last-child p::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 85%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gia-tri-cot-loi figure.table tr:last-child td:nth-child(2)::before {
  max-height: 70%;
}
.gia-tri-cot-loi figure.table td span strong {
  font-size: 18px;
  color: #d5a750;
  display: block;
  margin-bottom: 5px;
}
.gia-tri-cot-loi figure.table td span {
  font-size: 16px;
  color: #444;
}
@media screen and (max-width: 768px) {
  .gia-tri-cot-loi figure.table table,
  .gia-tri-cot-loi figure.table tbody,
  .gia-tri-cot-loi figure.table tr,
  .gia-tri-cot-loi figure.table td {
    display: block;
    width: 100%;
  }
  .gia-tri-cot-loi figure.table td:nth-child(2)::before {
    left: 20px;
  }
  .gia-tri-cot-loi figure.table td {
    padding: 20px 10px;
    text-align: left;
  }
}

@keyframes movecloudsleft {
  0% {
    transform: translateX(200%);
  }
  70% {
    transform: translateX(-20%); /* kết thúc tại 80% */
  }
  100% {
    transform: translateX(-20%);
  }
}
@keyframes movecloudsright {
  0% {
    transform: translateX(100%);
  }
  70% {
    transform: translateX(280%); /* kết thúc tại 80% */
  }
  100% {
    transform: translateX(280%);
  }
}
@media (max-width: 768px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 2rem !important;
  }
  figure.table table,
  figure.table tbody,
  figure.table tr,
  figure.table td {
    display: block !important;
    width: 100%;
  }
  figure.table td:nth-child(2)::before {
    left: 20px;
  }
  figure.table td {
    padding: 20px 10px;
    line-height: 150%;
    text-align: left;
  }
  .gia-tri-cot-loi figure.table td:nth-child(2) {
    height: auto;
    top: 0;
    display: none !important;
  }
  .gia-tri-cot-loi figure.table tr:nth-child(odd) td:nth-child(3) {
    width: 100%;
    max-width: 100%;
  }
  .gia-tri-cot-loi figure.table tr:nth-child(even) td:nth-child(1) {
    width: 100%;
    max-width: 100%;
  }
  .gia-tri-cot-loi figure.table table tbody tr:nth-child(odd) {
    display: flex !important;
    flex-direction: column-reverse;
  }
  .gia-tri-cot-loi figure.table td span {
    font-size: 1rem;
  }
  .gia-tri-cot-loi figure.table tr:nth-child(even) td:last-child strong,
  .gia-tri-cot-loi figure.table tr:nth-child(even) td:last-child p {
    font-size: 1.2rem;
    width: 90px !important;
    height: 90px !important;
    line-height: 90px;
  }
  .gia-tri-cot-loi figure.table tr:nth-child(odd) td:first-child strong,
  .gia-tri-cot-loi figure.table tr:nth-child(odd) td:first-child p {
    font-size: 1.75rem;
    width: 90px !important;
    height: 90px !important;
    line-height: 90px;
  }
  .gia-tri-cot-loi figure.table td:first-child,
  .gia-tri-cot-loi figure.table td:last-child {
    width: 100%;
    flex: 1 1 100%;
  }
  .gia-tri-cot-loi figure.table {
    margin: 1rem auto;
  }
  @keyframes movecloudsleft {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes movecloudsright {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
}