/* Base class */
.nav-dcg {
  --prefix-nav-link-padding-x-dcg: 1rem;
  --prefix-nav-link-padding-y-dcg: 0.5rem;
  --prefix-nav-link-font-weight-dcg: 400;
  --prefix-nav-link-color-dcg: #000;
  --prefix-nav-link-hover-color-dcg: #2e3191;
  --prefix-nav-link-disabled-color-dcg: #6c757d;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}



.nav-link-dcg {
  display: block;
  padding: var(--prefix-nav-link-padding-y-dcg) var(--prefix-nav-link-padding-x-dcg);
  font-size: 1rem;
  font-weight: var(--prefix-nav-link-font-weight-dcg);
  color: var(--prefix-nav-link-color-dcg);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nav-link-dcg:hover,
.nav-link-dcg:focus {
  color: var(--prefix-nav-link-hover-color-dcg);
  text-decoration: none;
}

.nav-link-dcg.focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.nav-link-dcg.disabled,
.nav-link-dcg:disabled {
  color: var(--prefix-nav-link-disabled-color-dcg);
  pointer-events: none;
  cursor: default;
}

/* Tabs */
.nav-tabs-dcg {
  --prefix-nav-tabs-border-width-dcg: 1px;
  --prefix-nav-tabs-border-color-dcg: #dee2e6;
  --prefix-nav-tabs-border-radius-dcg: 0.25rem;
  --prefix-nav-tabs-link-hover-border-color-dcg: #e9ecef;
  --prefix-nav-tabs-link-active-color-dcg: #495057;
  --prefix-nav-tabs-link-active-bg-dcg: #fff;
  --prefix-nav-tabs-link-active-border-color-dcg: #dee2e6;
  border-bottom: var(--prefix-nav-tabs-border-width-dcg) solid var(--prefix-nav-tabs-border-color-dcg);
}

.nav-tabs-dcg .nav-link-dcg {
  margin-bottom: -1px;
  border: var(--prefix-nav-tabs-border-width-dcg) solid transparent;
  border-top-right-radius: var(--prefix-nav-tabs-border-radius-dcg);
  border-top-left-radius: var(--prefix-nav-tabs-border-radius-dcg);
}

.nav-tabs-dcg .nav-link-dcg:hover,
.nav-tabs-dcg .nav-link-dcg:focus {
  isolation: isolate;
  border-color: var(--prefix-nav-tabs-link-hover-border-color-dcg);
}

.nav-tabs-dcg .nav-link-dcg.active,
.nav-tabs-dcg .nav-item.show .nav-link-dcg {
  color: var(--prefix-nav-tabs-link-active-color-dcg);
  background-color: var(--prefix-nav-tabs-link-active-bg-dcg);
  border-color: var(--prefix-nav-tabs-link-active-border-color-dcg);
}

.nav-tabs-dcg .dropdown-menu-dcg {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

/* Pills */
.nav-pills-dcg {
  --prefix-nav-pills-border-radius-dcg: 0.25rem;
  --prefix-nav-pills-link-active-color-dcg: #fff;
  --prefix-nav-pills-link-active-bg-dcg: #2e3191;
}

.nav-pills-dcg .nav-link-dcg {
  border-radius: var(--prefix-nav-pills-border-radius-dcg);
}

.nav-pills-dcg .nav-link-dcg.active,
.show > .nav-pills-dcg .nav-link-dcg {
  color: var(--prefix-nav-pills-link-active-color-dcg);
  background-color: var(--prefix-nav-pills-link-active-bg-dcg);
}

/* Underline */
.nav-underline-dcg {
  --prefix-nav-underline-gap-dcg: 1rem;
  --prefix-nav-underline-border-width-dcg: 2px;
  --prefix-nav-underline-link-active-color-dcg: #000;
  gap: var(--prefix-nav-underline-gap-dcg);
}

.nav-underline-dcg .nav-link-dcg {
  padding-right: 0;
  padding-left: 0;
  border-bottom: var(--prefix-nav-underline-border-width-dcg) solid transparent;
}

.nav-underline-dcg .nav-link-dcg:hover,
.nav-underline-dcg .nav-link-dcg:focus {
  border-bottom-color: currentColor;
}

.nav-underline-dcg .nav-link-dcg.active,
.show > .nav-underline-dcg .nav-link-dcg {
  font-weight: 700;
  color: var(--prefix-nav-underline-link-active-color-dcg);
  border-bottom-color: currentColor;
}

/* Justified variants */
.nav-fill-dcg > .nav-link-dcg,
.nav-fill-dcg .nav-item-dcg {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified-dcg > .nav-link-dcg,
.nav-justified-dcg .nav-item-dcg {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.nav-fill-dcg .nav-item-dcg .nav-link-dcg,
.nav-justified-dcg .nav-item-dcg .nav-link-dcg {
  width: 100%;
}

/* Tabbable tabs */
.tab-content-dcg > .tab-pane-dcg {
  display: none;
}

.tab-content-dcg > .active {
  display: block;
}

.justify-content-end {
  justify-content: flex-end !important;
}

* {
  box-sizing: border-box;
}

ul.nav-dcg {
  margin: 0;
}

.nav-dcg .nav-item-dcg {
  margin: 1px;
}

/******************/
/* Reset lại margin chỉ cho các phần tử trong navbar */
.navbar-dcg,
.navbar-toggler-dcg, 
.navbar-collapse-dcg {
  margin: 0; /* Bỏ override của margin: 0 auto; */
}

.navbar-dcg {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.5rem;
  margin-right: 3%;
}

.navbar-expand-lg-dcg {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.navbar-light-dcg .navbar-brand-dcg,
.navbar-light-dcg .navbar-nav-dcg .nav-link-dcg {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light-dcg .navbar-brand-dcg:hover,
.navbar-light-dcg .navbar-nav-dcg .nav-link-dcg:hover {
  color: rgba(0, 0, 0, 1);
}

.bg-light-dcg {
  background-color: #f8f9fa !important;
}

/* Nút bấm navbar trong mobile */
.navbar-toggler-dcg {
  background-color: #f8f9fa; /* Màu nền của nút bấm */
  border: 1px solid #ddd;    /* Viền của nút bấm */
  padding: 5px 10px;         /* Khoảng cách nội dung */
  border-radius: 5px;        /* Bo góc */
  margin-left: auto;         /* Đẩy icon button sang bên phải */
  display: flex;             /* Sử dụng flex để căn chỉnh icon */
  align-items: center;
  justify-content: center;
}

/* Icon của nút bấm */
.navbar-toggler-icon-dcg {
  background-color: transparent; /* Màu nền của icon */
  color: #000;                  /* Màu của icon */
  opacity: 1;                   /* Đảm bảo icon không bị trong suốt */
  font-size: 1.5rem;            /* Kích thước icon */
}

/* Đảm bảo icon có kích thước và vị trí đúng */
.navbar-toggler-icon-dcg::before {
  font-size: 1.5rem; /* Điều chỉnh kích thước icon */
}

/* Style cho nav ở mobile để ẩn các nút bấm ban đầu và chỉ hiện icon */
.navbar-collapse-dcg {
  display: none; /* Ẩn các button trong mobile cho đến khi người dùng click */
}

/* Khi người dùng click vào, hiển thị menu */
.navbar-collapse-dcg.show {
  display: block; /* Hiển thị menu khi được kích hoạt */
  background-color: #f8f9fa; /* Màu nền của menu */
  padding: 10px;
  border-radius: 5px;
}

/* Responsive adjustments */

/* Hiding navbar items by default on small screens */
@media (max-width: 991.98px) {
  .navbar-collapse-dcg {
      display: none !important;
  }

  .navbar-toggler-dcg {
      display: block;
  }

  .navbar-toggler-icon-dcg {
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      background-size: 100% 100%;
      background-image: url("data:image/svg+xml;base64,..."); /* default hamburger icon */
  }
  .navbar-dcg{
    margin-right: 0;
  }
  /* Menu toggle (show when collapsed) */
  .navbar-toggler-dcg[aria-expanded="true"] + .navbar-collapse-dcg {
      display: block !important;
      width: 100%;
  }
}

/* Larger screens - showing full navbar */
@media (min-width: 992px) {
    .navbar-toggler-dcg {
        display: none;
    }

    .navbar-collapse-dcg {
        display: flex !important;
    }
}