html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(135deg, #7ee8fa 0%, #80ff72 100%);
  color: #333;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header .logo {
  display: flex;
  align-items: center; /* Canh giữa logo và tiêu đề theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa logo và tiêu đề */
}

.header .logo img.logo-image {
  width: 50px; /* Điều chỉnh kích thước logo */
  height: auto; /* Giữ tỷ lệ logo */
  border-radius: 5px; /* Làm tròn góc logo nếu cần */
}

.header .logo h3 {
  margin: 0;
  font-size: clamp(
    12px,
    4vw,
    25px
  ); /* Kích thước phông chữ thay đổi theo kích thước khung nhìn */
  color: green;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons a {
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}

.social-icons a:hover .icon {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.my-container {
  max-width: 900px;
  width: 100%;
  margin: 10px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

h2 {
  color: #4a4e69;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.step-container {
  background-color: #f7f7f9;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  border: 2px solid #e2e8f0;
}

/* Styling for left and right boxes */
.split-container .box {
  flex: 1;
  padding: 20px;
  text-align: center;
  font-size: 1.1rem;
}

.split-container .box h4 {
  font-weight: 500;
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}

/* Special styled paragraph */
.special-paragraph {
  font-family: "Merriweather", serif;
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.8;
  font-weight: 400;
  background-color: #f7f7f9;
  padding: 15px;
  border-left: 4px solid #0070f3;
  border-radius: 8px;
}

/* Step container */
.step-container {
  background-color: #f7f7f9;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  border: 2px solid #e2e8f0;
}

/* Styling for images */
.image {
  margin: 20px 0;
  text-align: center; /* Canh giữa hình ảnh */
}

.image img {
  max-width: 100%; /* Hình ảnh sẽ không vượt quá khung chứa */
  height: auto; /* Giữ nguyên tỷ lệ của hình ảnh */
  border-radius: 15px; /* Bo góc cho hình ảnh */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bóng đổ nhẹ */
  transition: transform 0.3s ease; /* Hiệu ứng khi hover */
}

/* Hiệu ứng khi hover vào ảnh */
.image img:hover {
  transform: scale(1.05); /* Phóng to ảnh nhẹ khi hover */
}

/* Styling for the special block for step 3 */
.step-3-container {
  background-color: #f0f4f8;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  border: 2px solid #d1d9e6;
}

.step-3-container h4 {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.step-3-container ul {
  margin: 10px 0;
  padding-left: 20px;
}

.step-3-container ul li {
  margin-bottom: 10px;
}

/* Image styling */
.step-3-container .image {
  text-align: center;
  margin: 20px 0;
}

.step-3-container .image img {
  max-width: 100%; /* Hình ảnh sẽ không vượt quá khung chứa */
  height: auto; /* Giữ nguyên tỷ lệ của hình ảnh */
  border-radius: 15px; /* Bo góc cho hình ảnh */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bóng đổ nhẹ */
  transition: transform 0.3s ease; /* Hiệu ứng khi hover */
}

/* Hiệu ứng khi hover vào ảnh */
.step-3-container .image img:hover {
  transform: scale(1.05); /* Phóng to ảnh nhẹ khi hover */
}

/* Styling for step headings */
.step-container h4,
.step-3-container h4 {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem; /* Tăng kích thước cho tiêu đề */
  font-weight: 500; /* Làm cho tiêu đề đậm hơn nhưng không quá nặng */
  color: #2c3e50; /* Màu đậm nhưng vẫn dễ đọc */
  margin-bottom: 15px; /* Tạo khoảng cách giữa các tiêu đề và nội dung */
  line-height: 1.6; /* Khoảng cách giữa các dòng */
}

/* Highlight for bold text */
.step-container h4 strong,
.step-3-container h4 strong {
  color: #0070f3; /* Màu xanh lam nhạt để tạo sự nổi bật */
  font-weight: 700; /* Đậm hơn cho các từ khóa quan trọng */
}

/* List items (Step 3) */
.step-3-container ul li {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 10px;
}

/* Hyperlink styles */
.step-3-container a {
  color: #0070f3;
  text-decoration: none;
  font-weight: 600; /* Làm đậm các liên kết để dễ nhìn */
  transition: color 0.3s ease; /* Hiệu ứng chuyển màu khi hover */
}

.step-3-container a:hover {
  color: #0056b3; /* Tạo hiệu ứng hover với màu đậm hơn */
}

/* Styling for responsiveness */
@media (max-width: 768px) {
  .my-container {
    max-width: 95%; /* Adjust container width */
    padding: 15px; /* Reduce padding */
  }

  .step-container h4,
  .step-3-container h4 {
    font-size: 1.2rem; /* Giảm kích thước chữ trên màn hình nhỏ hơn */
  }

  h2 {
    font-size: 2rem;
  }

  .image img {
    margin-top: 10px;
  }
}

@media (max-width: 576px) {
  .my-container {
    max-width: 90%;
    padding: 15px;
  }

  h2 {
    font-size: 1.8rem; /* Smaller font size */
  }

  .image img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
  }

  .step-container h4,
  .step-3-container h4 {
    font-size: 1.1rem; /* Tiếp tục giảm kích thước chữ cho màn hình nhỏ hơn nữa */
  }

  .step-3-container .image img {
    max-width: 100%;
    height: auto;
  }
}

.footer {
  background-color: #2c3e50;
  color: white;
  padding: 10px 0;
  text-align: center;
}

.footer-bottom {
  color: #d1d1d1;
  font-size: 14px;
}

.note {
  background-color: #fef3c7;
  padding: 15px;
  border-left: 6px solid #fbbf24;
  margin-top: 30px;
  border-radius: 4px;
}

.note h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #92400e;
  font-weight: 700;
}

.note p {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #92400e;
}