html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Container Select2 */
.select2-container .select2-selection {
  border-radius: 0 !important; /* loại bỏ bo tròn */
  border: 1px solid #ced4da;   /* viền giống bootstrap */
  height: 38px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Dropdown khi click */
.select2-dropdown {
  border-radius: 0 !important;  /* loại bỏ bo tròn */
  border: 1px solid #ced4da;
  font-size: 0.875rem;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075); /* shadow nhẹ */
}

/* Option hover */
.select2-results__option--highlighted {
  background-color: #e9ecef !important; /* màu hover giống bootstrap */
  color: #495057 !important;
}

/* Option bình thường */
.select2-results__option {
  padding: 0.5rem 0.75rem;
}
/* Input search trong dropdown */
.select2-container .select2-search--dropdown .select2-search__field {
  border-radius: 0 !important;      /* loại bỏ bo tròn */
  border: 1px solid #ced4da;        /* viền giống bootstrap */
  height: 34px;                      /* cao hơn tùy ý */
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Xóa margin/padding thừa của container search */
.select2-container .select2-search--dropdown {
  padding: 0.25rem 0.5rem;
}

/* 🎨 ================================
   TẤT CẢ CÁC BIẾN MÀU - TEAL HEADER & ASIDE THEME
   ================================ */
:root {
  /* 🌞 LIGHT THEME — Sáng, sạch, hiện đại */
  --admin-light-bg: #f7f8fa;
  --admin-light-surface: #ffffff;
  --admin-light-shadow-color: rgba(0, 0, 0, 0.05);
  --admin-light-border: #e3e6ea;
  --admin-light-scrollbar: #cbd3da;
  --admin-light-scrollbar-hover: #b1bac2;

  /* 🌚 DARK THEME — Dịu, dễ nhìn */
  --admin-dark-bg: #1c1e22;
  --admin-dark-surface: #24272b;
  --admin-dark-shadow-color: rgba(0, 0, 0, 0.3);
  --admin-dark-scrollbar: #444c53;
  --admin-dark-scrollbar-hover: #5a646d;
  --admin-dark-footer-shadow-color: #30363c;

  /* 🧭 HEADER - Teal Theme */
  --admin-header-bg: #054e58;
  --admin-header-text: #ffffff;
  --admin-header-icon: #7bdcb5;
  --admin-header-bullet: #00d084;
  --admin-header-arrow: #7bdcb5;
  --admin-header-text-active: #fcb900;
  --admin-header-icon-active: #fcb900;

  /* 📱 HEADER MOBILE */
  --admin-header-mobile-bg: #054e58;

  /* 🧱 ASIDE (SIDEBAR) - Teal Theme */
  --admin-aside-bg: #054e58;
  --admin-aside-logo-bg: #033c43;
  --admin-aside-icon: #ffffff;
  --admin-aside-separator: rgba(255, 255, 255, 0.15);
  --admin-aside-btn-text: #ffffff;
  --admin-aside-btn-bg: rgba(255, 255, 255, 0.1);
  --admin-aside-hover-shadow-color: rgba(0, 0, 0, 0.15);

  /* 📋 ASIDE MENU */
  --admin-menu-text: #e0f4ef;
  --admin-menu-icon: #7bdcb5;
  --admin-menu-hover-bg: rgba(255, 255, 255, 0.1);
  --admin-menu-hover-text: #ffffff;
  --admin-menu-active-bg: rgba(0, 208, 132, 0.25);
  --admin-menu-section-text: #a8e3d3;
  --admin-menu-badge-text: #ff6900;
  --admin-menu-badge-bg: rgba(255, 105, 0, 0.25);

  /* 🎯 ACCENT COLORS */
  --admin-accent-primary: #00d084; /* xanh ngọc chính */
  --admin-accent-secondary: #7bdcb5; /* xanh mint nhạt */
  --admin-accent-tertiary: #fcb900; /* vàng nhấn */
  --admin-accent-light: #d3f5e9;
  --admin-accent-alert: #ff6900; /* cảnh báo cam */

  /* 🧩 SHADOWS */
  --admin-shadow-aside-hover: 5px 0 10px var(--admin-aside-hover-shadow-color);
  --admin-shadow-aside-box: 0 28px 0 var(--admin-light-shadow-color);
  --admin-shadow-header: 0px 10px 30px 0px var(--admin-light-shadow-color);
}


/* 🎨 ================================
   BỘ CHUYỂN ĐỔI THEME (THEME SWITCHER)
   ================================ */

/* 🌞 LIGHT THEME VALUES */
[data-bs-theme="light"] {
  --page-bg: var(--admin-light-bg);
  --app-blank-bg: var(--admin-light-surface);
  --toolbar-bg: var(--admin-light-surface);
  --toolbar-border-top: 1px solid var(--admin-light-border);
  --footer-shadow-color: var(--admin-light-surface);
  --header-shadow: var(--admin-shadow-header);
  --aside-shadow: var(--admin-shadow-aside-box);
  --scrollbar-color: var(--admin-light-scrollbar);
  --scrollbar-hover-color: var(--admin-light-scrollbar-hover);
}

/* 🌚 DARK THEME VALUES */
[data-bs-theme="dark"] {
  --page-bg: var(--admin-dark-bg);
  --app-blank-bg: var(--admin-dark-bg);
  --toolbar-bg: var(--admin-dark-surface);
  --toolbar-border-top: 0;
  --footer-shadow-color: var(--admin-dark-footer-shadow-color);
  --header-shadow: none;
  --aside-shadow: none;
  --scrollbar-color: var(--admin-dark-scrollbar);
  --scrollbar-hover-color: var(--admin-dark-scrollbar-hover);
}


/* 🧭 ================================
   HEADER (DESKTOP)
   ================================ */
@media (min-width: 1400px) {
  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
    max-width:none
  }
}

@media (min-width: 992px) {
  .header-fixed .wrapper {
    padding-top: 65px
  }
  .header-fixed.toolbar-fixed .wrapper {
    padding-top: calc(65px + 65px)
  }
  .aside-enabled.aside-fixed.header-fixed .header {
    left: 0;
    transition: left .3s ease
  }
}
@media (max-width: 991.98px) {
  /*.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {*/
  /*  padding: 24px 5px*/
  /*}*/
  /*.header-tablet-and-mobile-fixed.toolbar-tablet-and-mobile-fixed .wrapper {*/
  /*  padding-top: calc(55px + 0px)*/
  /*}*/
}
@media (min-width: 992px) {
  .header {
    background-color: var(--admin-header-bg);
  }

  .header-fixed .header {
    background-color: var(--admin-header-bg);
    box-shadow: var(--header-shadow);
  }

  .header .header-menu .menu>.menu-item>.menu-link,
  .header .header-menu .menu>.menu-item>.menu-link .menu-title {
    color: var(--admin-header-text);
  }

  .header .header-menu .menu>.menu-item>.menu-link .menu-icon,
  .header .header-menu .menu>.menu-item>.menu-link .menu-icon .svg-icon,
  .header .header-menu .menu>.menu-item>.menu-link .menu-icon i {
    color: var(--admin-header-icon);
  }

  .header .header-menu .menu>.menu-item>.menu-link .menu-bullet .bullet {
    background-color: var(--admin-header-bullet);
  }

  .header .header-menu .menu>.menu-item>.menu-link .menu-arrow:after {
    background-color: var(--admin-header-arrow);
  }

  /* Hover, Here, Show States */
  .header .header-menu .menu>.menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
  .header .header-menu .menu>.menu-item:not(.here)>.menu-link:hover:not(.disabled):not(.active):not(.here),
  .header .header-menu .menu>.menu-item.here>.menu-link,
  .header .header-menu .menu>.menu-item.show>.menu-link {
    background-color: var(--admin-header-bg); /* Assuming same bg for hover/active */
    color: var(--admin-header-text-active);
  }

  .header .header-menu .menu>.menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title,
  .header .header-menu .menu>.menu-item:not(.here)>.menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title,
  .header .header-menu .menu>.menu-item.here>.menu-link .menu-title,
  .header .header-menu .menu>.menu-item.show>.menu-link .menu-title {
    color: var(--admin-header-text-active);
  }

  .header .header-menu .menu>.menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
  .header .header-menu .menu>.menu-item:not(.here)>.menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon,
  .header .header-menu .menu>.menu-item.here>.menu-link .menu-icon,
  .header .header-menu .menu>.menu-item.show>.menu-link .menu-icon {
    color: var(--admin-header-text-active);
  }

  .header .header-menu .menu>.menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
  .header .header-menu .menu>.menu-item:not(.here)>.menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
  .header .header-menu .menu>.menu-item.here>.menu-link .menu-bullet .bullet,
  .header .header-menu .menu>.menu-item.show>.menu-link .menu-bullet .bullet {
    background-color: var(--admin-header-text-active);
  }

  .header .header-menu .menu>.menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after,
  .header .header-menu .menu>.menu-item:not(.here)>.menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after,
  .header .header-menu .menu>.menu-item.here>.menu-link .menu-arrow:after,
  .header .header-menu .menu>.menu-item.show>.menu-link .menu-arrow:after {
    background-color: var(--admin-header-text-active);
  }

  /* Active State */
  .header .header-menu .menu>.menu-item>.menu-link.active {
    background-color: var(--admin-header-bg);
    color: var(--admin-header-text-active);
  }

  .header .header-menu .menu>.menu-item>.menu-link.active .menu-title {
    color: var(--admin-header-text-active);
  }

  .header .header-menu .menu>.menu-item>.menu-link.active .menu-icon {
    color: var(--admin-header-icon-active);
  }

  .header .header-menu .menu>.menu-item>.menu-link.active .menu-bullet .bullet {
    background-color: var(--admin-header-icon-active);
  }
}

/* 📱 ================================
   HEADER (MOBILE/TABLET)
   ================================ */
@media (max-width: 991.98px) {
  .header {
    background-color: var(--admin-header-mobile-bg);
  }

  .header-tablet-and-mobile-fixed .header {
    background-color: var(--admin-header-mobile-bg);
    box-shadow: var(--header-shadow);
  }
}


/* 🧱 ================================
   ASIDE (SIDEBAR)
   ================================ */

@media (min-width: 992px) {
  .aside-fixed .aside {
    top: 65px;
  }
}
.aside {
  display: flex;
  flex-direction: column;
  box-shadow: var(--aside-shadow);
  padding: 0;
  background-color: var(--admin-aside-bg);
}

.aside .aside-logo {
  background-color: var(--admin-aside-logo-bg);
}

.aside .aside-toggle .svg-icon, .aside .aside-toggle i {
  color: var(--admin-aside-icon);
}

.aside .separator {
  border-bottom-color: var(--admin-aside-separator);
}

.aside .hover-scroll-overlay-y {
  --scrollbar-space: 0.4rem;
  scrollbar-color: var(--scrollbar-color) transparent;
}

.aside .hover-scroll-overlay-y::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
}

.aside .hover-scroll-overlay-y:hover {
  scrollbar-color: var(--scrollbar-hover-color) transparent;
}

.aside .btn-custom {
  color: var(--admin-aside-btn-text);
  background-color: var(--admin-aside-btn-bg);
}

.aside .btn-custom.active,
.aside .btn-custom.show,
.aside .btn-custom:active:not(.btn-active),
.aside .btn-custom:focus:not(.btn-active),
.aside .btn-custom:hover:not(.btn-active) {
  color: var(--admin-aside-btn-text);
  background-color: var(--admin-aside-btn-bg) !important;
}

@media (min-width: 992px) {
  [data-kt-aside-minimize=on] .aside.aside-hoverable:hover:not(.animating) {
    box-shadow: var(--admin-shadow-aside-hover);
  }
}

/* 📋 ================================
   ASIDE MENU
   ================================ */
.aside-menu .menu-item .menu-link,
.aside-menu .menu-item .menu-link .menu-title {
  color: var(--admin-menu-text);
}

.aside-menu .menu-item .menu-link .menu-icon,
.aside-menu .menu-item .menu-link .menu-icon .svg-icon,
.aside-menu .menu-item .menu-link .menu-icon i {
  color: var(--admin-menu-icon);
}

.aside-menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: var(--admin-menu-icon);
}

.aside-menu .menu-item .menu-link .menu-arrow:after {
  background-color: var(--admin-menu-icon);
}

/* Hover, Here, Show States */
.aside-menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
.aside-menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here),
.aside-menu .menu-item.here>.menu-link,
.aside-menu .menu-item.show>.menu-link {
  background-color: var(--admin-menu-hover-bg);
  color: var(--admin-menu-hover-text);
}

.aside-menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title,
.aside-menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title,
.aside-menu .menu-item.here>.menu-link .menu-title,
.aside-menu .menu-item.show>.menu-link .menu-title {
  color: var(--admin-menu-hover-text);
}

.aside-menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
.aside-menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon,
.aside-menu .menu-item.here>.menu-link .menu-icon,
.aside-menu .menu-item.show>.menu-link .menu-icon {
  color: var(--admin-menu-hover-text);
}

.aside-menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
.aside-menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
.aside-menu .menu-item.here>.menu-link .menu-bullet .bullet,
.aside-menu .menu-item.show>.menu-link .menu-bullet .bullet {
  background-color: var(--admin-menu-hover-text);
}

.aside-menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after,
.aside-menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after,
.aside-menu .menu-item.here>.menu-link .menu-arrow:after,
.aside-menu .menu-item.show>.menu-link .menu-arrow:after {
  background-color: var(--admin-menu-hover-text);
}

/* Active State */
.aside-menu .menu-item .menu-link.active {
  background-color: var(--admin-menu-active-bg);
  color: var(--admin-menu-hover-text);
}

.aside-menu .menu-item .menu-link.active .menu-title{
  color: var(--admin-menu-hover-text);
}
.aside-menu .menu-item .menu-link.active .menu-icon{
  color: var(--admin-menu-hover-text);
  background-color: var(--admin-menu-hover-text); /* for bullet and arrow */
}
.aside-menu .menu-item .menu-link.active .menu-bullet .bullet{
  color: var(--admin-menu-hover-text);
  background-color: var(--admin-menu-hover-text); /* for bullet and arrow */

}
.aside-menu .menu-item .menu-link.active .menu-arrow:after {
  color: var(--admin-menu-hover-text);
  background-color: var(--admin-menu-hover-text); /* for bullet and arrow */

}
/* Ensure icon color is also white */
.aside-menu .menu-item .menu-link.active .menu-icon {
  color: var(--admin-menu-hover-text);
  background-color: var(--admin-menu-hover-text); /* for bullet and arrow */
}


.aside-menu .menu-item .badge-exclusive {
  background-color: var(--admin-menu-badge-bg);
  color: var(--admin-menu-badge-text);
}

.aside-menu .menu-section {
  color: var(--admin-menu-section-text) !important;
}