@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,500i,700,700i&subset=latin-ext,vietnamese");
.toolbar{
  font-size:0.8125rem;
  tap-highlight-color:rgba(0, 0, 0, 0);
  touch-callout:none;
}

.toolbar .toolbar-item{
  cursor:pointer;
  padding:1.5em 1.3333em;
  line-height:1em;
  text-decoration:none;
}

.toolbar .toolbar-item.toolbar-logo{
  width:230px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.5s;
}

.toolbar .toolbar-item.toolbar-logo img{
  height:35px;
  transition:all 0.5s;
}

.toggle-sidebar .toolbar .toolbar-item.toolbar-logo{
  width:60px;
  padding:0;
}

.toggle-sidebar .toolbar .toolbar-item.toolbar-logo img{
  height:auto;
}

.toolbar .toolbar-item:hover,
.toolbar .toolbar-item:focus{
  text-decoration:none;
}
.toolbar .toolbar-bar{
  background-color:#163e7b;
  color:#ffffff;
}

.toolbar .toolbar-bar .toolbar-item{
  color:#fff;
}
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus{
  background:#163e7b;
}
.toolbar .toolbar-tray{
  background-color:#1f262d;
}

.toolbar .toolbar-tray-horizontal > .toolbar-lining{
  padding-right:5em;
}

[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining{
  padding-right:0;
  padding-left:5em;
}

.toolbar-tray a{
  color:white;
  cursor:pointer;
  padding:1em 1.3333em;
  text-decoration:none;
}

.toolbar .toolbar-tray-horizontal .menu-item{
  background:#1f262d;
}

.toolbar .toolbar-tray-horizontal .menu-item.level-1{
  border:0;
}

.toolbar .toolbar-tray-vertical .menu-item{
  background:#1f262d;
}

.toolbar .toolbar-tray-vertical .menu-item.level-1{
  border-bottom:1px solid #fff;
}

.toolbar .toolbar-tray a:hover,
.toolbar .toolbar-tray a:active,
.toolbar .toolbar-tray a:focus,
.toolbar .toolbar-tray a.is-active{
  color:#009fe3;
  text-decoration:none;
}

.toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu{
  margin-left:0.25em;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu{
  margin-left:0;
  margin-right:0.25em;
}
.toolbar .toolbar-toggle-orientation{
  padding:0;
  height:100%;
}

.toolbar .toolbar-toggle-orientation > .toolbar-lining{
  float:right;
}

[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining{
  float:left;
}

.toolbar .toolbar-toggle-orientation button{
  cursor:pointer;
  display:inline-block;
}

.toolbar .vov-toolbar-orientation-fallback {
  display: none !important;
}

.toolbar .level-2 > ul{
  background-color:#1f262d;
  border-bottom-color:#ccc;
  border-top-color:#e5e5e5;
}

.toolbar .level-3 > ul{
  background-color:#1f262d;
  border-bottom-color:#c5c5c5;
  border-top-color:#ddd;
}

.toolbar .level-4 > ul{
  background-color:#1f262d;
  border-bottom-color:#bbb;
  border-top-color:#d5d5d5;
}

.toolbar .level-5 > ul{
  background-color:#1f262d;
  border-bottom-color:#b5b5b5;
  border-top-color:#ccc;
}

.toolbar .level-6 > ul{
  background-color:#1f262d;
  border-bottom-color:#aaa;
  border-top-color:#c5c5c5;
}

.toolbar .level-7 > ul{
  background-color:#1f262d;
  border-bottom-color:#b5b5b5;
  border-top-color:#ccc;
}

.toolbar .level-8 > ul{
  background-color:#1f262d;
  border-bottom-color:#ccc;
  border-top-color:#ddd;
}

/* VOV admin top toolbar */
.toolbar .toolbar-bar,
#toolbar-bar.toolbar-bar,
#gin-toolbar-bar.toolbar-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 38.5px !important;
  height: 38.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 0 12px !important;
  background: #162132 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  z-index: 1200 !important;
}

.toolbar .toolbar-bar .toolbar-tab,
#toolbar-bar .toolbar-tab,
#gin-toolbar-bar .toolbar-tab {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.toolbar .toolbar-bar .toolbar-item,
#toolbar-bar .toolbar-item,
#gin-toolbar-bar .toolbar-item {
  min-height: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 9px !important;
  color: #dce5f1 !important;
  background: transparent !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.toolbar .toolbar-bar .toolbar-item:hover,
.toolbar .toolbar-bar .toolbar-item:focus,
#toolbar-bar .toolbar-item:hover,
#toolbar-bar .toolbar-item:focus,
#gin-toolbar-bar .toolbar-item:hover,
#gin-toolbar-bar .toolbar-item:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.toolbar .toolbar-bar .toolbar-item.toolbar-icon,
#toolbar-bar .toolbar-item.toolbar-icon,
#gin-toolbar-bar .toolbar-item.toolbar-icon {
  padding-left: 36px !important; 
  justify-content: flex-start !important;
}

#toolbar-tab-pass-change > .toolbar-item,
#toolbar-tab-pass-change .toolbar-item {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  color: #fca5a5 !important;
  background: #c8001e33 !important;
  border: 1px solid #c8001e4d !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 16.5px !important;
}

#toolbar-tab-pass-change > .toolbar-item:hover,
#toolbar-tab-pass-change .toolbar-item:hover {
  color: #ffffff !important;
  background: #84203b !important;
}

/* User Button Overrides */
.toolbar-bar .toolbar-item.toolbar-icon-user,
.toolbar .toolbar-item.toolbar-icon-user,
#toolbar-bar .toolbar-item.toolbar-icon-user,
#gin-toolbar-bar .toolbar-item.toolbar-icon-user {
  gap: 6px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  justify-content: center !important;
  align-items: center !important;
  display: inline-flex !important;
  width: auto !important; /* Ensure dynamic width based on content */
  min-width: auto !important;
}

.toolbar-bar .toolbar-item.toolbar-icon-user::before,
.toolbar-bar .toolbar-item.toolbar-icon-user::after,
.toolbar .toolbar-item.toolbar-icon-user::before,
.toolbar .toolbar-item.toolbar-icon-user::after,
#toolbar-bar .toolbar-item.toolbar-icon-user::before,
#toolbar-bar .toolbar-item.toolbar-icon-user::after,
#gin-toolbar-bar .toolbar-item.toolbar-icon-user::before,
#gin-toolbar-bar .toolbar-item.toolbar-icon-user::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.toolbar .toolbar-item.toolbar-icon-user img {
  position: static !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important; /* Reset margin since we are using gap */
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Logout Button Overrides */
.toolbar-bar .toolbar-item.toolbar-icon-logout,
#toolbar-bar .toolbar-item.toolbar-icon-logout,
#gin-toolbar-bar .toolbar-item.toolbar-icon-logout {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important; 
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  box-sizing: border-box !important;
}

.toolbar-bar .toolbar-item.toolbar-icon-logout::before,
#toolbar-bar .toolbar-item.toolbar-icon-logout::before,
#gin-toolbar-bar .toolbar-item.toolbar-icon-logout::before {
  content: "\f2f5" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 14px !important; 
  color: #a9b5c5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.toolbar-bar .toolbar-icon-logout:hover::before {
  color: #ffffff !important;
}

.toolbar-tab-responsive-preview .responsive-preview-trigger {
  height: 42px;
}

.toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {
  top: 10px;
}

.toolbar .toolbar-bar .toolbar-tab,
#toolbar-bar .toolbar-tab,
#gin-toolbar-bar .toolbar-tab {
  order: 0;
}

#toolbar-tab-pass-change {
  order: 1 !important;
}

.toolbar-bar .toolbar-tab:has(.toolbar-icon-user),
#toolbar-bar .toolbar-tab:has(.toolbar-icon-user),
#gin-toolbar-bar .toolbar-tab:has(.toolbar-icon-user) {
  order: 2 !important;
}

.toolbar-bar .toolbar-tab:has(.toolbar-icon-logout),
#toolbar-bar .toolbar-tab:has(.toolbar-icon-logout),
#gin-toolbar-bar .toolbar-tab:has(.toolbar-icon-logout) {
  order: 3 !important;
}

@media screen and (max-width: 767px) {
  .responsive-preview-toolbar-tab {
    display: none;
  }
  
  .toolbar .toolbar-tray-vertical {
    max-height: calc(100vh - 42px);
    height: auto !important;
    width: 100%;
  }

  #toolbar-administration .logo {
    display: none !important;
  }

  #toggle-sidebar-button {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1300 !important;
  }

  #toolbar-bar.toolbar-bar,
  #gin-toolbar-bar.toolbar-bar {
    padding-left: 45px !important;
    padding-right: 6px !important;
    gap: 4px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 44px !important;
  }

  #toolbar-tab-pass-change {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #toolbar-tab-pass-change .toolbar-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded:hover > a,
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded:focus > a,
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded:active > a,
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded.active > a,
  html body.toggle-sidebar .menu--staff ul.menu li.menu-item--expanded:hover > a {
    background: #7d0b34 !important;
    color: #ffffff !important;
  }

  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded:hover > a svg,
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded:hover > a span,
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded.active > a svg,
  html body .toggle-sidebar .menu--staff ul.menu li.menu-item--expanded.active > a span {
    fill: #ffffff !important;
    color: #ffffff !important;
  }

  html body #toolbar-bar .toolbar-tab,
  html body #gin-toolbar-bar .toolbar-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-user,
  html body #toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-logout,
  html body #gin-toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-user,
  html body #gin-toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-logout {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: transparent !important;
    background: transparent !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  html body #toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-user::before,
  html body #toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-logout::before,
  html body #gin-toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-user::before,
  html body #gin-toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-logout::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    visibility: visible !important;
    width: 18px !important;
    height: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    mask: none !important;
    -webkit-mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-user::before,
  html body #gin-toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-user::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z'/%3E%3C/svg%3E") !important;
  }

  html body #toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-logout::before,
  html body #gin-toolbar-bar .toolbar-tab .toolbar-item.toolbar-icon-logout::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L128 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l192 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/svg%3E") !important;
  }

  .gin-table-scroll-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.gin-table-scroll-wrapper table,
table.views-table {
  display: table !important;
  min-width: 100% !important;
  width: max-content !important;
}

.layout-container,
.layout-main, 
.region-content {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
}
.etm-toolbar .taxonomy-search{
  width: auto !important;
}