* {
    margin: 0px;
    padding: 0px;

}
body {
    /* min-height: 100vh; */
}
ul,p{
    margin: 0px;
    font-size: 16px;
}
ul li {
    list-style: none;
}
a:hover {
    text-decoration: none;
}

h5 {font-size: 17px;}
th {text-align: center;}
section {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
section h2 {
    /* font-family: "DM  Sans"; */
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    
}
section h2 span {
    padding-bottom: 3px;
    margin-bottom: 3px;
    /* box-shadow: 10px 10px 10px orange; */
    border-bottom:2px solid gray ;
}
img {
    object-fit: cover;
}
.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
  }
.custom-file-input::before {
    content: 'Tải ảnh lên';
    display: inline-block;
    background: linear-gradient(top, #f9f9f9, #e3e3e3);
    border: 1px solid orangered;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}
.custom-file-input:hover::before {
    border-color: black;
}
.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
.table {
    width: 100%;
    overflow-x: auto;
}
.tdcheckbox input[type=checkbox] {
    width: 10mm;
    height: 10mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightskyblue;
}

input[type=checkbox]:checked:after {
   
}
.btn-violet {
    color: #fff;
    background-color: purple;
    border-color: purple;
}
.select2-selection {
    /* line-height: 33px !important; */
    min-height: 38px !important;
}

.line { border-bottom: 1px solid gray; }
.title {font-weight: bold;}
.btn-square {border-radius: 0px;}
.hidden {display: none;} .clear{ clear: both;}
.ovf {overflow: auto;}

.maga { margin:auto;} .center {text-align: center; align-items: center;}
.mag {margin:10px} .pad{padding: 10px;}
.magt { margin-top: 10px;} .magb {margin-bottom: 10px;}
.magl {margin-left: 10px;} .magr {margin-right: 10px;}

/* Border */
.bod {border: 1px solid gray;}
.bodl{border-left: 1px solid gray; padding-left: 10px;} 
.bodr{border-right: 1px solid gray; padding-right: 10px;}
.bodt{border-top: 1px solid gray; padding-top: 10px;} 
.bodb{border-bottom: 1px solid gray; padding-bottom: 10px;}

/* Width pixel */
.wpx12 {width: 120px;}
/* Width fixed */
.w10f {width: 9%;} .w20f {width: 19%;} .w30f {width: 29%;} .w40f{width: 39%;} .w50f{width: 49%;}
.w60f {width: 59%;} .w70f {width: 69%;} .w80f {width: 79%;} .w90f{width: 89%;} 

.w10 {width: 9%;} .w20 {width: 19%;} .w30 {width: 29%;} .w40{width: 38%;} .w50{width: 48%;}
.w60 {width: 58%;} .w70 {width: 68%;} .w80 {width: 78%;} .w90{width: 88%;} .w100{width: 100%;}

.w48 { width: 47.5%;} .w23 {width: 23.5%;} .w32 {width: 32%;} .w25 {width: 24.5%;}

.mh1 {min-height: 1px;} .mh50 {min-height: 50px;}
.mh300 {max-height: 300px;} .mh350 {max-height: 350px;}
#sidebar {position: fixed !important; z-index: 9999; top: 0px !important;}
    #content {width: 100% !important;}
.w99 {
    width: 99%;
}
.area-lg { width: 1256px;} .area-md {width: 765px;} .area-sm {width: 480px;}
@media only screen and (max-width: 1749px) {
   .area-lg { width: 1256px;} .area-md {width: 765px;} .area-sm {width: 480px;}

}
@media only screen and (max-width: 1200px) {
    .area-lg { width: 100%;} .area-md {width: 100%;} .area-sm {width: 100%;}
}
@media only screen and (max-width: 1000px) {
    .first-menu-item span:first-child {
        font-size: 14px;
        max-width: 60%;
        overflow: hidden;
    }
    #sidebar {position: fixed !important; z-index: 9999; top: 0px !important;}
    #content {width: 100% !important;}
    .magr{margin-right: 0px;} .magl{margin-left: 0px;}
    .area-lg { width: 100% ;} 
    .area-md {width: 100% ; } 
    .area-sm {width: 100%;}
    
    .w10 {width: 32%;} .w20 {width: 100%;} .w30 {width: 100%;} .w40{width: 100%;} .w50{width: 100%;}
    .w60 {width: 100%;} .w70 {width: 100%;} .w80 {width: 100%;} .w90{width: 100%;} .w100{width: 100%;}
    .w48 { width: 100%;} .w23 {width: 47.5%; margin-right: 3px !important; margin-left: 3px !important;} .w32 {width: 100%;}
   .w25 {width: 100%;}
   .mmagb {margin-bottom: 10px;}
    
}
/* Toggle Switch Checkbox */
/* 
HTML 
<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
*/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* Carousel multi item */
.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }


/* scrollbar */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}