/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* fack link----------------*/
.fake-link {
   color: #007bff;
   cursor: pointer;
   text-decoration: underline;
}

.fake-link:hover {
   color: #0056b3;
}


/* Bootstrap 5 
   ------------------------------------------------*/

.modal-fullscreen {
   width: 100vw;
   max-width: none;
   height: 100%;
   margin: 0;
}

.modal-fullscreen .modal-content {
   height: 100%;
   border: 0;
   border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
   border-radius: 0;
}

.modal-fullscreen .modal-body {
   overflow-y: auto;
}

.max-vh-20 { max-height: 20vh; }
.max-vh-25 { max-height: 25vh; }
.max-vh-30 { max-height: 30vh; }
.max-vh-50 { max-height: 50vh; }
.max-vh-75 { max-height: 75vh; }
.max-vh-90 { max-height: 90vh; }

.min-vh-20 { min-height: 20vh; }
.min-vh-25 { min-height: 25vh; }
.min-vh-30 { min-height: 30vh; }
.min-vh-50 { min-height: 50vh; }
.min-vh-75 { min-height: 75vh; }
.min-vh-90 { min-height: 90vh; }

.w-min-10 { min-width: 10%; }
.w-min-20 { min-width: 20%; }
.w-min-25 { min-width: 25%; }
.w-min-40 { min-width: 40%; }
.w-min-50 { min-width: 50%; }
.w-min-75 { min-width: 75%; }
 /*bootstrap append*/
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }

@media (min-width: 576px) { /*-sm-*/
   .modal-fullscreen-sm-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
   }

   .modal-fullscreen-sm-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
   }

   .modal-fullscreen-sm-down .modal-header,
   .modal-fullscreen-sm-down .modal-footer {
      border-radius: 0;
   }

   .modal-fullscreen-sm-down .modal-body {
      overflow-y: auto;
   }

   .w-min-sm-10 { min-width: 10%; }
   .w-min-sm-20 { min-width: 20%; }
   .w-min-sm-25 { min-width: 25%; }
   .w-min-sm-40 { min-width: 40%; }
   .w-min-sm-50 { min-width: 50%; }
   .w-min-sm-75 { min-width: 75%; }
}

@media (min-width: 768px) { /*-md-*/

   .border-md-top {
      border-top: 1px solid #dee2e6;
   }
   .border-md-right {
      border-right: 1px solid #dee2e6;
   }
   .border-md-bottom {
      border-bottom: 1px solid #dee2e6;
   }
   .border-md-left {
      border-left: 1px solid #dee2e6;
   }

   .modal-fullscreen-md-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
   }

   .modal-fullscreen-md-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
   }

   .modal-fullscreen-md-down .modal-header,
   .modal-fullscreen-md-down .modal-footer {
      border-radius: 0;
   }

   .modal-fullscreen-md-down .modal-body {
      overflow-y: auto;
   }

   .w-min-md-10 { min-width: 10%; }
   .w-min-md-20 { min-width: 20%; }
   .w-min-md-25 { min-width: 25%; }
   .w-min-md-40 { min-width: 40%; }
   .w-min-md-50 { min-width: 50%; }
   .w-min-md-75 { min-width: 75%; }
}

@media (min-width: 992px) { /*-lg-*/
   .modal-fullscreen-lg-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
   }

   .modal-fullscreen-lg-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
   }

   .modal-fullscreen-lg-down .modal-header,
   .modal-fullscreen-lg-down .modal-footer {
      border-radius: 0;
   }

   .modal-fullscreen-lg-down .modal-body {
      overflow-y: auto;
   }

   .w-min-lg-10 { min-width: 10%; }
   .w-min-lg-20 { min-width: 20%; }
   .w-min-lg-25 { min-width: 25%; }
   .w-min-lg-40 { min-width: 40%; }
   .w-min-lg-50 { min-width: 50%; }
   .w-min-lg-75 { min-width: 75%; }
}

@media (min-width: 1200px) { /*-xl-*/
   .modal-fullscreen-xl-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
   }

   .modal-fullscreen-xl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
   }

   .modal-fullscreen-xl-down .modal-header,
   .modal-fullscreen-xl-down .modal-footer {
      border-radius: 0;
   }

   .modal-fullscreen-xl-down .modal-body {
      overflow-y: auto;
   }

   .w-min-xl-10 { min-width: 10%; }
   .w-min-xl-20 { min-width: 20%; }
   .w-min-xl-25 { min-width: 25%; }
   .w-min-xl-40 { min-width: 40%; }
   .w-min-xl-50 { min-width: 50%; }
   .w-min-xl-75 { min-width: 75%; }
}

@media (min-width: 1400px) { /*-xxl-*/
   .modal-fullscreen-xxl-down {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;
   }

   .modal-fullscreen-xxl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
   }

   .modal-fullscreen-xxl-down .modal-header,
   .modal-fullscreen-xxl-down .modal-footer {
      border-radius: 0;
   }

   .modal-fullscreen-xxl-down .modal-body {
      overflow-y: auto;
   }
   .w-min-xxl-10 { min-width: 10%; }
   .w-min-xxl-20 { min-width: 20%; }
   .w-min-xxl-25 { min-width: 25%; }
   .w-min-xxl-40 { min-width: 40%; }
   .w-min-xxl-50 { min-width: 50%; }
   .w-min-xxl-75 { min-width: 75%; }
}

/* Colors
   ------------------------------------------------*/
.bg-highline-blue {
   background-color: #0cbfe9 !important;
}
.bg-highline-green {
   background-color: #99ff99 !important;
}
.bg-highline-pink {
   background-color: #ffb6c1 !important;
}
.bg-highline-purple {
   background-color: #f984ef !important;
}
.bg-highline-yellow {
   background-color: #ffe670 !important;
}
.bg-lightcyan {
   background-color: lightcyan !important;
}
.bg-lightgray {
   background-color: #e7e7e7 !important;
}
.bg-yellow {
   background-color: yellow !important;
}

.cbRed{accent-color: red}
.cbBlue {accent-color: #0094ff}
.cbGold {accent-color: gold}
.cbGreen {accent-color: green}


/* Hover--------------------------------------*/

.bg-hover-gold:hover{
   background-color: gold;
}
.hover-move:hover {
   cursor: move;
}
.hover-pointer:hover {
   cursor: pointer;
}
.hover-zoom-in:hover {
   cursor: zoom-in;
}

/* -------------------------------------------*/

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

html {
   position: relative;
   min-height: 100%;
   font-size: 14px;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 90px;
}
.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   white-space: nowrap;
}

/*Dropdown submenu
   -----------------------------------------------*/
.dropdown-submenu {
   position: relative;
}

.dropdown-submenu a::after {
   transform: rotate(-90deg);
   position: absolute;
   right: 6px;
   top: .8em;
}

.dropdown-submenu .dropdown-menu {
   top: 0;
   left: 100%;
   margin-left: .1rem;
   margin-right: .1rem;
}

.dropdown-menu {
   margin: 0;
}

.nav-item .dropdown-toggle:hover + .dropdown-menu {
   display: block;
}

.dropdown-menu:hover {
   display: block;
}

/*-----img-text--------------------------*/
/* Container holding the image and the text */
.img-container {
   position: relative;
   text-align: center;
}

/* Bottom left text */
.img-text-bl {
   position: absolute;
   bottom: 8px;
   left: 16px;
}

/* Top left text */
.img-text-tl {
   position: absolute;
   top: 8px;
   left: 16px;
}

/* Top right text */
.img-text-tr {
   position: absolute;
   top: 8px;
   right: 16px;
}

/* Bottom right text */
.img-text-br {
   position: absolute;
   bottom: 8px;
   right: 16px;
}

/* Centered text */
.img-text-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/*mirror*/
.mirror {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   transform: scaleX(-1);
}

/*sidebar--------------------------------*/
.sidebar {
   position: relative;
   top: 46px;
   height: calc(100vh - 48px);
   overflow-x: hidden;
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.bar-item, .sidebar a{
   color: #222 !important;
}

.bar-item.active, .sidebar a.active {
   color: white !important;
   background-color: #0cbfe9 !important;
}

.bar-item:hover, .sidebar a:hover {
   color: darkorange !important;/*#f69f13;*/
   cursor: pointer;
   background-color:#eee !important;
}


/*Table--------------------------------------------*/
/* Áp dụng cho bất kỳ ô nào nằm trong phần tử có class .cell-center */
.cell-center th,
.cell-center td {
   text-align: center !important;
   vertical-align: middle !important;
}

.sticky-t1 { /*tr.sticky-t1 .*/
   top: 45px !important;
}
.sticky-t15 {
   top: 67px !important;
}
.sticky-t2 {
   top: 90px !important;
}

.sticky-blue, .sticky-gold, .sticky-green, .sticky-red, .sticky-whitesmoke, .sticky-only {
   position: -webkit-sticky;
   position: sticky;
   top: 0; /* Don't forget this, required for the stickiness */
   z-index: 10;
   box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

.sticky-blue, .sticky-md-blue {
   background-color: lightblue;
}

.sticky-gold, .sticky-md-gold {
   background-color: gold;
}

.sticky-green, .sticky-md-green {
   background-color: green;
   color: white;
}

.sticky-red, .sticky-md-red {
   background-color: red;
   color: white;
}

.sticky-whitesmoke, .sticky-md-whitesmoke {
   background-color: whitesmoke;
   color: black;
}

/*-----------media-------*/

@media (max-width: 767px) {
   .sidebar {
      min-height: 24px;
      height: auto;
      max-height: 50vh;
      position: static;
      margin-bottom: 1rem;
   }
}

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

   @supports ((position: -webkit-sticky) or (position: sticky)) {
      .sidebar {
         position: -webkit-sticky;
         position: sticky;
      }
   }

   .sticky-md-blue, .sticky-md-gold, .sticky-md-green, .sticky-md-red, .sticky-md-whitesmoke {
      position: -webkit-sticky;
      position: sticky;
      top: 0; /* Don't forget this, required for the stickiness */
      z-index: 10;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
   }



}

/*-----------supports-------*/
.overFlowX {
   overflow-x: auto; /* Cho phép cuộn ngang */
   -webkit-overflow-scrolling: touch; /* Mượt mà trên iOS */
}
.overFlowY {
   overflow-y: auto; 
   -webkit-overflow-scrolling: touch; 
}

.readonly {
   pointer-events: none;
   background-color: #eee;
   color: #555;
}