/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */
body {

  background: rgb(230, 230, 230);

}

body.sidebar-mini.sidebar-collapse #sidebar-wrapper {
  overflow: hidden !important;
  scrollbar-width: none;
  /* Firefox */
}

body.sidebar-mini.sidebar-collapse #sidebar-wrapper::-webkit-scrollbar {
  display: none;
  /* Chrome */
}

.navbar {
  background: linear-gradient(to bottom, #dddddd, #ffffff) !important;
  min-height: 65px !important;
  padding-top: 4px;
  padding-bottom: 10px;
  position: fixed;
  top: 0;
  color: #000000 !important;
  right: 0;
  z-index: 999;

}

.navbar * {
  color: #000 !important;
  fill: #000 !important;
}


.navbar-bg {
  background: linear-gradient(to bottom, #dddddd, #ffffff) !important;
  height: 65px !important;
  min-height: 65x !important;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.20);
  top: 0;
  position: fixed;
  right: 0;
  /* đảm bảo navbar hiển thị trên các thành phần khác */
  /* ví dụ: màu cam */
}

.navbar .navbar-nav>li>a {
  color: #fff !important;
}

/* Nền menu trái */
.main-sidebar {
  background: linear-gradient(to bottom, #0e1a27, #213761, #3a416d) !important;
  /* Màu bạn muốn */
}



.sidebar a,
.sidebar .nav-link {
  color: #dce3f2;
}




.sidebar a.dropdown-item:hover {
  background-color: #65befe !important;
  transform: translateY(-5px) !important;
}

.sidebar a.active .nav-link {
  background-color: rgba(68, 191, 244, 0.736) !important;
  color: #ffffff;
}

.sidebar .active .nav-link {
  background-color: rgba(68, 191, 244, 0.736) !important;
  color: #ffffff;
}

/* Màu chữ menu */
.sidebar-menu li a,
.sidebar-menu li .nav-link {
  color: #ecf0f1 !important;
}

/* Màu hover hoặc active */
.sidebar-menu li.active a,
.sidebar-menu li a:hover {
  background-color: #0c92d6d6 !important;
  color: #000000 !important;
}

.main-sidebar {
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1031;
}

.sidebar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  /* hoặc chiều cao logo */

  margin-bottom: 20px;

  /* ➤ tạo khoảng cách dưới logo */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* tuỳ chọn */
}

.sidebar-brand img {
  margin-top: 10px;
  height: 60px;
  /* chiều cao thực tế của logo */
  width: auto;
  object-fit: contain;
}

.dropdown-menu {
  right: 0;
  left: auto;
  background-color: #f4f9ff !important;
  /* Màu nền của menu dropdown */
}

.section-header {
  margin-top: 5px !important;
  /* đẩy xuống */
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}



/* Mobile fix */
@media (max-width: 576px) {

  .navbar,
  .navbar *,
  .navbar-bg {}

  .sidebar .dropdown-menu {
    background-color: #e7eef5 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow:
      0 3px 5px rgba(0, 0, 0, 0.2),
      0 6px 10px rgba(0, 0, 0, 0.15),
      0 9px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    /* Màu nền của menu dropdown */
  }

  .navbar {

    height: 15px !important;

  }

}