nav {
    background-color:  transparent; /* Nền menu tối */
    width:max-content;
    height:min-content;

    border-radius: 60px;
    margin: 0 auto; /* Căn giữa theo chiều ngang */
  }
  
  .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Sử dụng flexbox để căn chỉnh mục menu */
    justify-content: center; /* Căn giữa các mục menu */
    color:#00bcd4;
    
  }
  
  .menu > li {
    position: relative;
    margin: 0 15px; /* Khoảng cách giữa các mục menu chính */
  }
  
  .menu > li > a {
    display: block;
    padding: 5px 0; /* Tăng padding để khu vực click rộng hơn */
    text-decoration: none;
    color: #000000; /* Màu chữ trắng */
    font-weight: bold;
    transition: color 0.3s ease; /* Hiệu ứng chuyển đổi màu chữ mượt mà */
  }
  
  .menu > li > a:hover {
    color: #00bcd4; /* Màu chữ khi rê chuột */
  }
  
  .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    top: 100%; /* Đặt submenu ngay dưới mục menu cha */
    left: 0;
    border-radius: 5%;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    min-width: 180px; /* Chiều rộng tối thiểu cho submenu */
    z-index: 1000; /* Đảm bảo submenu hiển thị trên cùng */
    opacity: 0; /* Ban đầu ẩn hoàn toàn */
    transform: translateY(10px); /* Dịch chuyển xuống dưới một chút */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Hiệu ứng mờ dần và trượt xuống */
  }
  
  .submenu li {
    border-bottom: 1px solid #eee; /* Đường kẻ nhẹ giữa các mục submenu */
  }
  
  .submenu li:last-child {
    border-bottom: none; /* Bỏ đường kẻ ở mục cuối cùng */
  }
  
  .submenu li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #000000;
    text-align: left;
    transition: background-color 0.3s ease, color 0.3s ease; /* Hiệu ứng chuyển đổi màu nền và màu chữ */
  }
  
  .submenu li a:hover {
    background-color: #f1f1f1; /* Màu nền khi rê chuột vào mục submenu */
    color: #00bcd4; /* Màu chữ khi rê chuột vào mục submenu */
  }
  
  /* Hiển thị submenu khi rê chuột vào mục menu cha */
  .menu > li:hover .submenu {
    display: block;
    opacity: 1; /* Hiển thị rõ dần */
    transform: translateY(0); /* Trở về vị trí ban đầu */
  }