/* Reset mặc định */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Căn chỉnh chung */
body {
  font-family: Arial, sans-serif;
  padding-top: 90px; /* Đẩy nội dung xuống dưới navbar */
}

/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 15px 30px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10000; /* Giữ navbar luôn trên cùng */
  height: 80px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
  height: 65px;
}

/* Menu */
.menu {
  list-style: none;
  display: flex;
  gap: 30px;
}

.menu li {
  position: relative;
}

.menu li a {
  text-decoration: none;
  color: black;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  transition: color 0.3s ease-in-out;
}

/* Hiệu ứng khi hover vào menu cha */
.menu li a:hover {
  color: blue;
}

/* Menu con */
.submenu {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 100%;
  background: white;
  display: none;
  min-width: 250px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  overflow: hidden;
  z-index: 10001; /* Đảm bảo menu con hiển thị trên cùng */
}

/* Các mục trong menu con */
.submenu li {
  border-bottom: 1px solid #eee;
}

.submenu li:last-child {
  border-bottom: none;
}

.submenu a {
  padding: 12px 20px;
  display: block;
  color: #333;
  font-size: 16px;
  transition: background 0.3s ease-in-out;
}

/* Hiệu ứng hover menu con */
.submenu a:hover {
  background: #f5f5f5;
}

/* Hiển thị menu con khi hover */
.menu li:hover .submenu {
  display: block;
}

/* Nút menu cho mobile */
#menu-toggle {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  color: black;
  cursor: pointer;
}

/* Icons */
.icons {
  display: flex;
  gap: 15px;
}

/* Component chính */
.component {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #007bff, #00c6ff);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

/* Container */
.container {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  z-index: 1; /* Giữ nguyên không làm ảnh hưởng menu */
}

/* Ảnh điện thoại */
.phone img {
  height: 500px; /* Giữ nguyên kích thước ảnh như yêu cầu */
  max-width: 100%;
}

/* QR Code Section */
.qr-section {
  margin-left: 50px;
  color: black;
}

.qr-section img {
  width: 200px;
  margin-bottom: 20px;
}

/* Store links */
.store-links img {
  width: 250px;
  margin: 10px;
}
 /* Video Section */
 .video-section {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

.video-section h1 {
  margin-bottom: 15px;
  font-size: 28px;
}

.video-section p {
  margin-bottom: 10px;
  font-size: 18px;
  color: #555;
  
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  padding: 15px;
  background: #f9f9f9;
}

video {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.features {
  text-align: center;
  padding: 50px;
  background: white;
}

.features-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  margin: 50px auto;
  max-width: 1200px;
}

.features-desc {
  margin: 10px auto;
  max-width: 800px;
  font-size: 16px;
  color: #555;
}

.features-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 50px;
}

.features-left, .features-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 300px;
}

/* Giữ nguyên các phần hiện có và chỉ chỉnh sửa liên quan đến feature-item */
.features-container .features-left .feature-item,
.features-container .features-right .feature-item {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.features-container .features-left .feature-item{
  margin-bottom: 20px;
}

.feature-item img.icon {
  width: 70px; /* Làm icon nhỏ hơn */
  height: 70px; /* Đảm bảo icon có kích thước đồng đều */
  object-fit: contain;
  margin-bottom: 10px;
}

.feature-item h3 {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
}

.feature-item p {
  font-size: 14px;
  color: #333;
  text-align: justify;
 padding: 10px;
 height: 7.5rem;
 width: 100%;
 text-decoration: none; /* Thêm dòng này để xóa dấu gạch ngang */
}


.icon {
  font-size: 30px;
}

.features-center img {
  max-width: 280px;
  border-radius: 20px;
}
.enetviet-container {
  text-align: center;
  width: 100%; /* Mở rộng toàn bộ màn hình */
  max-width: 1200px; /* Giới hạn chiều rộng tối đa */
  margin: 0 auto;
  padding: 30px 20px;
}

.enetviet-title {
  color: #333;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.enetviet-roles {
  display: flex;
  justify-content: space-around; /* Căn cách đều */
  align-items: center;
  flex-wrap: wrap; /* Đảm bảo hiển thị đẹp trên mobile */
  gap: 50px;
  width: 100%;
}

.enetviet-role {
  text-align: center;
  flex: 1;
  min-width: 200px; /* Kích thước tối thiểu để không quá nhỏ */
  
}

.enetviet-role img {
  width: 120px;  /* Tăng kích thước icon */
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ccc;
  transition: transform 0.3s ease-in-out; /* Hiệu ứng khi hover */
}

.enetviet-role img:hover {
  transform: scale(1.1); /* Phóng to nhẹ khi rê chuột */
}

.enetviet-role p {
  margin-top: 12px;
  font-weight: bold;
  font-size: 18px; /* Tăng kích thước chữ */
  text-decoration: none; /* Thêm dòng này để xóa dấu gạch ngang */
}

/* Màu sắc riêng cho từng nhóm */
.enetviet-role:nth-child(1) img { border-color: #1E57A0; }
.enetviet-role:nth-child(2) img { border-color: #1E57A0; }
.enetviet-role:nth-child(3) img { border-color: #774C2D; }
.enetviet-role:nth-child(4) img { border-color: #774C2D; }

/* Responsive cho màn hình nhỏ hơn */
@media (max-width: 768px) {
  .enetviet-roles {
      flex-direction: column;
  }

  .enetviet-role img {
      width: 100px;
      height: 100px;
  }

  .enetviet-role p {
      font-size: 16px;
  }
}
  /* Định dạng footer */
.footer {
  background-color: #2c4878;
  color: white;
  padding: 30px 10%;
  font-family: Arial, sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-column {
  width: 30%;
}

.footer-column h3 {
  border-bottom: 2px solid white;
  padding-bottom: 5px;
  margin-bottom: 15px;
  font-size: 18px;
}

/* Danh sách liên kết */
.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin: 8px 0;
}

.footer-column ul li i {
  margin-right: 8px;
}

.footer-column ul li a {
  color: white;
  text-decoration: none;
}
.footer-column0{
  display: flex;
  gap: 20px;
}
.footer-column1 a img {
  width: 200px; /* Tăng kích thước ảnh CH Play & App Store */
  height: auto;
}

/* Icon mạng xã hội */
.social-icons a {
  color: white;
  margin-right: 10px;
  font-size: 20px;
}

/* QR Code và App Links */
.qr-code {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
}

.footer-column img {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}

/* Nút cuộn lên đầu */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: red;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.scroll-to-top:hover {
  background-color: darkred;
}
/* ✅ Ẩn menu mặc định trên Mobile */
@media (max-width: 1024px) {
  .menu {
      display: none;
      flex-direction: column;
      width: 100%;
      background: white;
      position: absolute;
      top: 80px;
      left: 0;
      padding: 10px 0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 10001;
  }

  /* ✅ Khi bấm nút ☰ thì hiện menu */
  .menu.active {
      display: flex;
  }

  .menu li {
      text-align: center;
      padding: 10px 0;
      width: 100%;
  }

  .menu li a {
      display: block;
      padding: 12px 20px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
  }

  /* ✅ Nút menu trên Mobile */
  #menu-toggle {
      display: block;
      font-size: 24px;
      background: none;
      border: none;
      color: black;
      cursor: pointer;
  }

  /* ✅ Điều chỉnh icon */
  .icons {
      margin-top: 10px;
  }
}
/* ✅ Responsive cho Tablet (768px) */
@media (max-width: 768px) {
  .phone img {
      width: 250px;
  }

  .qr-section img {
      width: 100px;
  }

  .qr-section h2 {
      font-size: 18px;
  }

  .store-links img {
      width: 120px;
  }
}

/* ✅ Responsive cho Mobile (480px) */
@media (max-width: 480px) {
  .phone img {
      width: 220px;
  }

  .qr-section img {
      width: 90px;
  }

  .qr-section h2 {
      font-size: 16px;
  }

  .store-links {
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }

  .store-links img {
      width: 110px;
  }
}
/* ✅ Responsive Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .features-container {
      flex-direction: column;
      align-items: center;
  }

  .features-left, .features-right {
      width: 100%;
      text-align: center;
  }

  .features-center img {
      width: 200px;
  }

  .feature-item {
      flex-direction: column;
      text-align: center;
  }

  .icon {
      width: 40px;
      height: 40px;
  }
}
/* ✅ Desktop - Giữ nguyên bố cục ngang (Không thay đổi) */
@media (min-width: 1025px) {
  .features-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
  }

  .features-left, .features-right {
      display: flex;
      flex-direction: column;
      gap: 30px;
      width: 30%;
  }

  .features-center img {
      width: 280px;
  }

  .feature-item {
      display: flex;
      align-items: center;
      gap: 20px;
  }

  .feature-item img.icon {
      width: 50px;
      height: 50px;
  }
}

/* ✅ Tablet & Mobile (≤ 1024px) - Chuyển layout thành dọc */
@media (max-width: 1024px) {
  .features-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 30px;
  }

  .features-left, .features-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 20px;
  }

  .features-center img {
      width: 220px;
      max-width: 80%;
  }

  .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 90%;
      gap: 12px;
      padding: 10px;
  }

  .feature-item img.icon {
      width: 60px;
      height: 60px;
      margin-bottom: 10px;
  }

  .feature-item h3 {
      font-size: 18px;
  }

  .feature-item p {
      font-size: 14px;
      max-width: 85%;
  }
}

/* ✅ Mobile Nhỏ (≤ 480px) - Giữ layout gọn gàng */
@media (max-width: 480px) {
  .features-title {
      font-size: 20px;
      text-align: center;
  }

  .features-desc {
      font-size: 14px;
      text-align: center;
      max-width: 95%;
      margin: auto;
  }

  .features-center img {
      width: 180px;
  }

  .feature-item img.icon {
      width: 50px;
      height: 50px;
  }

  .feature-item h3 {
      font-size: 16px;
  }

  .feature-item p {
      font-size: 13px;
      max-width: 90%;
  }
}


/* ✅ Tablet (≤768px) - Chia 2 hàng, mỗi hàng 2 mục */
@media (max-width: 768px) {
  .enetviet-roles {
      gap: 20px;
  }
  .enetviet-role {
      width: 120px;
  }
  .enetviet-role img {
      width: 80px;
      height: 80px;
  }
  .enetviet-role p {
      font-size: 14px;
  }
}

/* ✅ Mobile nhỏ (≤480px) - 1 hàng 2 mục (tự động xuống hàng) */
@media (max-width: 480px) {
  .enetviet-roles {
      gap: 15px;
      flex-wrap: wrap;
  }
  .enetviet-role {
      width: 100px;
  }
  .enetviet-role img {
      width: 70px;
      height: 70px;
  }
  .enetviet-role p {
      font-size: 13px;
  }
}
/* ✅ Responsive Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .footer-container {
      flex-wrap: wrap;
      justify-content: space-around;
  }

  .footer-column {
      width: 45%; /* Hiển thị 2 cột */
  }
}

/* ✅ Responsive Mobile (≤767px) */
@media (max-width: 767px) {
  .footer-container {
      flex-direction: column;
      text-align: center;
  }

  .footer-column {
      width: 100%; /* Chuyển thành 1 cột */
      margin-bottom: 20px;
  }

  .footer-column ul {
      padding-left: 0;
  }

  .social-icons {
      justify-content: center;
  }

  .footer-column img {
      width: 120px; /* Giảm kích thước ảnh */
  }

  .qr-code {
      width: 100px; /* Giảm kích thước QR Code */
  }
}