/* để xóa bỏ các khoảng cách trống mặc định của trình duyệt. giúp giành quyền kiểm soát 
khoảng cách chuẩn xác theo ý mình*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Be Vietnam Pro", sans-serif;
  background-color: #f5f7fb; /* Nền xám nhạt dịu mắt đồng bộ */
  color: #2c3e50;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Giữ footer luôn ở dưới cùng màn hình nếu nội dung ngắn */
}

/*start thanh menu*/
.thanh-nav {
  background-color: #ffffff;
  padding: 15px 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex; /* trục chính sẽ nằm ngang (chạy từ trái sang phải)*/
  justify-content: space-between; /* Đẩy khối con đầu tiên ra sát rìa mép trái, đẩy khối 
  con cuối cùng ra sát rìa mép phải, toàn bộ khoảng trống còn lại tự động chia đều ở giữa 
  các khối.*/
  align-items: center; /* Lấy đường trục dọc chính giữa của Hộp cha làm tâm, sau đó gom 
  tất cả các khối con (dù khối to, khối nhỏ, chữ dài, chữ ngắn) xếp thẳng hàng vào chính 
  giữa tâm theo chiều dọc.*/
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo a {
  font-family: "Be Vietnam Pro", sans-serif;
  color: #2c3e50;
  font-size: 26px;
  font-weight: 900;
  text-decoration: none; /* xóa gạch chân*/
  letter-spacing: -1px;
  transition: all 0.3s ease;
  display: inline-flex; /*Giống hệt như flex, các con vẫn xếp hàng ngang và chịu sự điều 
  khiển của Flexbox tuyệt đối.*/
  align-items: center;
}
.logo a .highlight {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -1px;
  text-decoration: none;
  color: #2c3e50;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}
.logo a .highlight {
  color: #e74c3c;
  margin-left: 6px;
  position: relative;
}
.logo a .highlight::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 2px;
  width: 5px;
  height: 5px;
  background-color: #f1c40f;
  border-radius: 50%;
}
.logo a:hover {
  transform: scale(1.03);
}
/* Các nút Menu dạng viên thuốc */
.nut-menu a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: inline-block; /* inline (cho phép các phần tử xếp chung một hàng ngang), 
  vừa giữ được quyền lực của block (cho phép bạn cài đặt kích thước width, height 
  theo ý muốn).*/
}
/* Các nút Menu dạng viên thuốc */
.nut-menu a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: inline-block;
}

.nut-menu a.trangchu {
  color: #ffffff;
  background-color: #e74c3c; /* Nút active sáng lên màu đỏ */
  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.25);
}

.nut-menu a.luyendich {
  color: #555;
  background-color: transparent;
  margin-right: 10px;
}

.nut-menu a.luyendich:hover {
  background-color: #f0f2f5;
  color: #e74c3c;
}
/*end thanh menu*/

/*Start Main */
.hero-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap; /* Tự động bẻ hàng khi hẹp màn hình */
}

/*================ 2. BỐ CỤC KHU VỰC HERO CHÍNH (2 CỘT) ================= */
.hero-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap; /* Tự động bẻ hàng khi hẹp màn hình */
}
/* Khối chữ bên trái */
.hero-content {
  flex: 1.2;
  min-width: 320px;
}
.hero-content h1 {
  font-size: 38px;
  font-weight: 900;
  color: #2c3e50;
  line-height: 1.3;
  margin-bottom: 15px;
}
.sub-title {
  font-size: 18px;
  color: #7f8c8d;
  font-weight: 500;
  margin-bottom: 30px;
}
/* Hộp chào mừng nổi bật */
.welcome-box {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  border-left: 5px solid #e74c3c; /* Vạch đỏ điểm nhấn */
  margin-bottom: 30px;
}
.welcome-box h2 {
  font-size: 20px;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 8px;
}
.welcome-box p {
  color: #555555;
  font-size: 15px;
  line-height: 1.7;
}
/* Nút dẫn tới trang Luyện dịch cực to nổi bật */
.btn-bat-dau {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background-color: #e74c3c;
  color: #ffffff;
  font-weight: 700;
  padding: 15px 32px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
}
.btn-bat-dau:hover {
  background-color: #c0392b;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(231, 76, 60, 0.45);
}
/* Khối ảnh đồ họa bên phải */
.hero-image {
  flex: 1;
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08));
  animation: floatAnimation 6s ease-in-out infinite; /* Tạo hiệu ứng trôi lơ lửng */
}
@keyframes floatAnimation {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* ================= 3. CỤM THỐNG KÊ SỐ LIỆU SANG TRỌNG ================= */
.thong-ke-container {
  max-width: 1200px;
  margin: 40px auto 50px auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* Từng chiếc thẻ Card thông số */
.the-thong-ke {
  flex: 1;
  min-width: 250px;
  background-color: #ffffff;
  padding: 30px 24px;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.the-thong-ke h3 {
  font-size: 36px;
  font-weight: 900;
  color: #e74c3c;
  margin-bottom: 6px;
}

.the-thong-ke p {
  font-size: 15px;
  color: #7f8c8d;
  font-weight: 600;
}
/* Hiệu ứng nhấc lên và phát quang bóng đỏ */
.the-thong-ke:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(231, 76, 60, 0.15);
}
/* End Main */
/* ================= 4. PHẦN CHÂN TRANG (FOOTER NÂNG CAO) ================= */
.site-footer {
  background-color: #1a252f; /* Màu xanh đen thẫm cực kỳ sang trọng */
  color: #ecf0f1;
  padding: 60px 0 20px 0;
  margin-top: auto; /* Tự động bám sát đáy trang khi nội dung rỗng */
  font-size: 14px;
}
.footer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-col {
  flex: 1;
  min-width: 250px;
}

/* Cột thương hiệu rộng hơn một chút */
.footer-col.brand-col {
  flex: 1.5;
}

.footer-col h4 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 8px;
}

/* Đường gạch ngang nhỏ dưới tiêu đề cột */
.footer-col h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 3px;
  background-color: #e74c3c;
  border-radius: 2px;
}

.footer-col p {
  color: #a6b8c7;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* Logo chữ trong footer */
.footer-logo {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -1px;
  text-decoration: none;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  margin-bottom: 15px;
}

.footer-logo .highlight {
  color: #e74c3c;
  margin-left: 5px;
}

/* Danh sách liên kết nhanh */
.footer-links-list {
  list-style: none;
}

.footer-links-list li {
  margin-bottom: 12px;
}

.footer-links-list a {
  color: #a6b8c7;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Hiệu ứng trượt nhẹ sang phải và đổi màu khi hover */
.footer-links-list a:hover {
  color: #e74c3c;
  padding-left: 5px;
}

/* Biểu tượng mạng xã hội */
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-btn:hover {
  background-color: #e74c3c;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* Thanh bản quyền cuối chân trang */
.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0 auto;
  padding: 25px 20px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  color: #7f8c8d;
  font-size: 13px;
}

.footer-bottom span {
  color: #e74c3c;
  font-weight: 700;
}
/* end footer */
/* Start Responsive cho điện thoại màn hình nhỏ */
@media (max-width: 768px) {
  .thanh-nav {
    padding: 15px 20px;
    flex-direction: column;
    gap: 15px;
  }

  .hero-section {
    flex-direction: column-reverse; /* Đưa ảnh lên trên, chữ xuống dưới khi ở điện thoại */
    margin: 30px auto;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 30px;
  }

  .welcome-box {
    text-align: left; /* Giữ chữ chào mừng căn lề trái để dễ đọc */
  }

  .thong-ke-container {
    flex-direction: column;
    margin-bottom: 40px;
  }

  .the-thong-ke {
    width: 100%;
  }

  /* Responsive cho Footer */
  .footer-wrap {
    flex-direction: column;
    gap: 35px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding-top: 20px;
  }
}
/* End Responsive cho điện thoại màn hình nhỏ */