.navbar-nav .nav-item {
          margin-right: 20px;
      }

      .navbar-nav .nav-link {
          position: relative;
          transition: all 0.3s ease;
          padding: 10px 15px;
          font-size: 1.1rem;

      }

      .navbar-nav .nav-link:hover {
          background-color: rgba(255, 0, 0, 0.1);
          border-radius: 5px;
      }

      .navbar-nav .nav-link::after {
          content: "";
          display: block;
          width: 0;
          height: 2px;
          background-color: red;
          transition: width 0.3s;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
      }

      .navbar-nav .nav-link:hover::after,
      .navbar-nav {
          width: 100%;
      }

      .btn-group-login {
          font-weight: bold;
          background-color: #2f2f2f;
          display: flex;
          align-items: center;
          height: 70px;
          padding: 0 20px;
          cursor: pointer;
          color: #fff;
          font-size: 15px;
          font-family: 'Open Sans', sans-serif !important;
          line-height: 60px;
          border-bottom: 3px solid transparent;
          letter-spacing: 1.05px;
          font-feature-settings: kern;
          border-radius: 0;
          text-decoration: none;
          user-select: none;
          transition: background-color 0.3s ease;
          margin-top: 0;
          white-space: nowrap;
      }

      .btn-group-login:hover {
          background-color: #444444;
          text-decoration: none;
          color: #fff;
      }

      .btn-download {
          font-weight: bold;
          background-color: #b32d2d !important;
          color: #fff;
          border: none;
          height: 70px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          font-size: 15px;
          font-family: 'Open Sans', sans-serif !important;
          line-height: 60px;
          border-bottom: 3px solid transparent;
          letter-spacing: 1.05px;
          font-feature-settings: kern;
          border-radius: 0;
          text-decoration: none;
          transition: background-color 0.3s ease;
          margin-left: 0;
          white-space: nowrap;
      }

      .btn-download:hover {
          color: #fff;
          text-decoration: none;
      }

      .btn-download i {
          margin-right: 8px;
          font-size: 1.3rem;
      }

      .navbar-nav {
          list-style: none;
          padding-left: 0;
          margin: 0;
          display: flex;
          align-items: center;
      }

      .nav-item {
          position: relative;
          margin-right: 20px;
      }

      .nav-link {
          cursor: pointer;
          padding: 10px 15px;
          color: white;
          text-decoration: none;
          font-size: 1.1rem;
          display: block;
          user-select: none;
      }

      .nav-link:hover {
          background-color: rgba(255, 0, 0, 0.1);
          border-radius: 5px;
      }

      .dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          background-color: #111111;
          border-radius: 0;
          min-width: 150px;
          padding: 0;
          margin: 0;
          list-style: none;
          display: none;
          z-index: 1000;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      }

      .dropdown-menu.show {
          display: block;
      }

      .dropdown-menu li a {
          display: block;
          padding: 10px 15px;
          color: white;
          text-decoration: none;
          white-space: nowrap;

      }

      .dropdown-menu li a:hover {
          color: white;
          background-color: #444444;
      }

      .custom-dropdown-menu {
          position: absolute;
          top: calc(90% + 2px);

          left: 50%;
          transform: translateX(-50%);
          background-color: #111111;
          border-radius: 6px;
          padding: 8px 12px;
          display: none;
          z-index: 1000;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
          font-size: 14px;
          color: #fff;
          white-space: nowrap;
          text-align: center;
          min-width: auto;
          max-width: 250px;
      }

      .custom-dropdown-menu::before {
          content: "";
          position: absolute;
          top: -6px;
          left: 50%;
          transform: translateX(-50%);
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent #111111 transparent;
      }

      .custom-dropdown-menu.show {
          display: block;
      }

      .custom-dropdown-menu li {
          padding: 0;
          margin: 0;
      }

      .custom-dropdown-menu li::marker {
          content: none;
      }

      .custom-dropdown-menu li a {
          color: #fff;
          text-decoration: none;
          display: flex;
          align-items: center;
          padding: 6px 8px;
          background: none;
          pointer-events: auto;
          /* ให้คลิกได้ */
      }

      .dropdown-item-icon {
          display: inline-flex;
          width: 16px;
          height: 16px;
          fill: currentColor;
          flex-shrink: 0;
          margin-right: 8px;
          /* เว้นระยะห่างระหว่างไอคอนกับข้อความ */
      }

      .MuiSvgIcon-root {
          width: 20px;
          height: 20px;
          fill: currentColor;
          /* เพื่อให้ใช้สีจาก parent */
          display: inline-block;
          vertical-align: middle;
      }