/* CSS cho logo */
    .logo {
      display: block;
      margin: 0 auto;
    }

    /* Media queries cho các kích thước màn hình khác nhau */
    @media (min-width: 768px) {

      /* Màn hình lớn hơn hoặc bằng 768px (PC) */
      .logo {
        width: 350px;
        height: 150px;
      }
    }

    @media (max-width: 767px) {

      /* Màn hình nhỏ hơn 768px (điện thoại) */
      .logo {
        width: 280px;
        height: 140px;
      }
    }

    /* Navbar toggle button style */
    .navbar-toggle {
      display: none;
      cursor: pointer;
    }

    .bar {
      width: 25px;
      height: 3px;
      background-color: #FFFFFF;
      margin: 4px 0;
      transition: 0.4s;
    }

    /* Navbar */
    .navbar {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .navbar a {
      text-decoration: none;
    }

    .navbar button {
      background-color: #333;
      color: #fff;
      border: none;
      padding: 10px 20px;
      margin: 0 10px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .navbar button:hover {
      background-color: #555;
    }

    .custom-button {
      font-size: 16px;
      font-weight: bold;
    }

    .logo {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .logo:hover {
      transform: scale(1.1) rotate(15deg);
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    }

.navbar-list-mobile {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  border: 2px solid #0d1117; /* Màu đen tối */
  border-radius: 15px;
  padding: 10px;
  background-color: #0d1117; /* Màu nền tối */
  color: #ffffff; /* Màu văn bản sáng */
  font-family: 'VRTFont', Arial, sans-serif;
}

.navbar-list-mobile li {
  padding: 8px 16px;
  transition: background-color 0.3s;
  text-decoration: none; /* Loại bỏ gạch dưới */
}

.navbar-list-mobile li:hover {
  background-color: #333333; /* Màu nền tối khi di chuột qua */
}
.navbar-list-mobile li a {
  color: white; /* Màu văn bản sáng */
  text-decoration: none; /* Loại bỏ gạch dưới */
}



    /* Media query for mobile */
    @media only screen and (max-width: 800px) {
      .navbar-toggle {
        display: block;
      }

      .navbar {
        display: none;
      }

      .navbar-list-mobile {
        display: block;
        text-align: center;
      }
    }


    /* Hiệu ứng cho logo */
    .logo {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      /* Thêm hiệu ứng cho transform và box-shadow */
    }

    .logo:hover {
      transform: scale(1.1) rotate(15deg);
      /* Phóng to và xoay khi hover */
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
      /* Đổ bóng */
    }

    /* Hiệu ứng cho biểu tượng ba gạch khi chuyển sang x */
    .bar:nth-child(1) {
      transform-origin: top left;
    }

    .bar:nth-child(2) {
      opacity: 0;
    }

    .bar:nth-child(3) {
      transform-origin: bottom left;
    }

    .navbar-toggle.active .bar:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .navbar-toggle.active .bar:nth-child(2) {
      opacity: 0;
    }

    .navbar-toggle.active .bar:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }