body {
   margin: 0;
   font-family: Arial, sans-serif;
}
.thenshi-menu-link.text-blue-500 {
   color: #3b82f6 !important; /* Màu xanh đậm */
}
.thenshi-header {
   height: 60px; /* hoặc min-height */
}
.thenshi-header .header-color {
   color: white;
   transition: color 0.3s ease-in-out;
}

.thenshi-header.scrolled .header-color {
   color: black !important; /* Hoặc màu khác bạn muốn */
}

/* Header */
.thenshi-header {
   position: sticky;

   left: 0;
   right: 0;
   z-index: 50;
   transition: all 0.5s ease-in-out;
   margin: auto auto auto auto;
   border-radius: 8px;
   background: transparent;
   margin-top: -60px; /* Đẩy navbar lên trên ngoài tầm nhìn */
}
.thenshi-header.scrolled {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(8px);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   top: 15px;
   width: 80%;
   border-radius: 8px;
}

.thenshi-header:not(.scrolled) {
   background: transparent;
   top: 0;
   width: 100%;
}

/* Overlay che phủ toàn màn hình */
.mobile-menu-overlay {
   display: none; /* Ẩn mặc định */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Hiệu ứng mờ */
   z-index: 99; /* Z-index cao hơn cả navbar và mobile menu */
   opacity: 0; /* Hiệu ứng mờ dần */
   transition: opacity 0.3s ease-in-out;
}

/* Khi lớp overlay được hiển thị */
.mobile-menu-overlay.show {
   display: block; /* Hiển thị lớp overlay */
   opacity: 1; /* Đảm bảo overlay có độ mờ dần */
}

/* ///////////////////////// */

.size-6 {
   color: white; /* Đảm bảo currentColor là trắng */
}

/* Mobile Menu */
.thenshi-mobile-menu {
   display: none;
   position: fixed;
   top: 5vh; /* Khoảng cách từ trên */
   bottom: 5vh; /* Khoảng cách từ dưới */
   right: 2rem;
   transform: translateX(100%); /* Đẩy menu ra ngoài bên phải */
   width: 18rem;
   height: auto; /* Điều chỉnh chiều cao tự động */
   background: white;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   z-index: 200;
   overflow-y: auto;
   padding: 1rem;
   transition: transform 0.5s ease-in-out;
}

/* Khi mobile menu mở */
.thenshi-mobile-menu.open {
   display: block;
   z-index: 200; /* Đảm bảo mobile menu trên cùng */
   animation: mobile-menu-slideIn 0.5s forwards; /* Thêm animation slideIn khi mở */
}

/* Khi mobile menu đóng */
.thenshi-mobile-menu.close {
   display: block;
   animation: mobile-menu-slideOut 0.5s forwards; /* Thêm animation slideOut khi đóng */
}

/* Slide-in and Slide-out Animations */
@keyframes mobile-menu-slideIn {
   from {
      transform: translateX(100%); /* Di chuyển từ bên ngoài vào */
   }
   to {
      transform: translateX(0);
   }
}

@keyframes mobile-menu-slideOut {
   from {
      transform: translateX(0); /* Bắt đầu từ vị trí đang mở */
   }
   to {
      transform: translateX(100%); /* Di chuyển menu ra ngoài khi đóng */
   }
}

/* Mobile Menu Links */
.thenshi-mobile-menu-link {
   position: relative;
   padding-left: 1.5rem;
   color: black;
   transition: all 0.4s ease-in-out;
}

.thenshi-mobile-menu-link.active {
   color: #3b82f6;
}

.thenshi-mobile-menu-link::before {
   content: "";
   position: absolute;
   left: -25px;
   top: 50%;
   transform: translateY(-50%);
   height: 80%;
   width: 3px;
   background-color: #3b82f6;
   transition: all 0.4s ease-in-out;
   opacity: 0;
   border-radius: 1px;
}

.thenshi-mobile-menu-link.active::before {
   opacity: 1;
}

/* Overlay */
.mobile-menu-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 99;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
}

/* Khi lớp overlay được hiển thị */
.mobile-menu-overlay.show {
   display: block;
   opacity: 1;
   z-index: 150; /* Đảm bảo overlay dưới mobile menu */
}

/* Mặc định: Sidebar mở (trừ khi ở mobile) */
.main-content {
   margin-left: 250px; /* Dịch sang phải */
   transition: margin-left 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Khi sidebar đóng */
.main-content.closed {
   margin-left: 0;
}

/* Ẩn nút "Genres" khi mở sidebar */
.hidden-rank {
   display: none;
}
#sidebar-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5); /* Làm mờ nền */
   z-index: 998; /* Đảm bảo nó nằm dưới sidebar */
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
}

#sidebar-overlay.show {
   display: block;
   opacity: 1;
}
@media (max-width: 767px) {
   #application-sidebar-brand {
      transform: translateX(-100%);
   }
   #application-sidebar-brand.override-media {
      transform: translateX(0) !important;
   }
   .main-content {
      margin-left: 0 !important;
   }
}

.sidebar-open {
   /* Ví dụ mở sidebar */
   margin-left: 250px !important;
   /* hoặc */
   transform: translateX(0) !important;
   transition: margin-left 0.2s ease-in-out, transform 0.2s ease-in-out;
}
#application-sidebar-brand {
   position: fixed; /* hoặc absolute, tùy mục đích */
   left: 0;
   top: 0;
   width: 250px; /* hoặc giá trị phù hợp */
   height: 100vh;
   transition: margin-left 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.icon-nav li a:hover.icon-hover {
   color: #5d87ff;
}
.icon-hover:hover::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   height: 40px;
   width: 40px;
   border-radius: 50%;
   transition: all 0.3s ease-in-out;
   background-color: #3b82f6;
}