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

body {
	padding-bottom:100px;	
}

ul{
	padding:0;
	margin:0;
	list-style:none;
}

#top {
	background:#003399;
	color:white;
	padding-top:10px;	
}

#top h2 {
	line-height:25px;
	font-size:20px;
	margin:0 10px 0 10px !important;
}

main {
	margin-top:87px !important;
}


/** không áp dụng được style bottom nay
#bottom {
	background: #007bff;
	color: white;
	margin-top:10px;
	padding:15px;
	z-index:1029 !important;
	height:70px;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;	
}

#bottom p {
	font-size:1rem;
	text-align:center;
	line-height:20px;
	margin:0;
}
*/

/*box dang 1 bên chú ý*/
.box1{
	margin-bottom:10px;
}

.box1 .title {
	background:#ff0000;
	margin:0 !important;
	padding:10px;
	font-size:16px;
	color:white;
}

.box1 .titlecontent{
	background:#ebebeb;
	border-radius: 0px 0px 7px 7px;
	color:black;
	padding:10px;
	border-bottom:2px solid #ff0000;
	box-shadow: 0 8px 6px -6px black
}

.box1 .titlecontent a{
	color:#6c757d;
	text-decoration:none;
	display:inline-block;
	padding:5px 0px;
}
.box1 .titlecontent a:hover{
	color:#007bff;
}

.box1 .titlecontent ul li:not(:last-child) {
	border-bottom:1px solid #ff0000;
}

/*box dang 2 bên nội dung*/
.box2{
	margin-bottom:20px;
}


.box2 .title {
	background:#29aae3;
	margin:0 !important;
	padding:10px;
	font-size:16px;
	color:white;
}

.box2 .nar {
	background:red;
} 

.box2 .titlecontent{
	background:#f8f9fa;
	border-radius: 0px 0px 7px 7px;
	color:black;
	padding:10px;
	border-bottom:2px solid #29aae3;
	box-shadow: 0 8px 6px -6px black
}



.box2 .titlecontent a{
	color:#ffc107;
	text-decoration:none;
	display:inline-block;
}
.box2 .titlecontent a:hover{
	color:#eeb549;
}

.box2 .titlecontent ul li:not(:last-child) {
	border-bottom:1px solid #8382ff;
}






/* Edit bootstrap 4*/
.modal-backdrop {
	z-index:1020;
}

.carousel-inner img {
    width: 100%;
    height: auto;
  }
 
@media (max-width: 767px) {/*show scroll right in tablet, mobil*/
	.navbar-collapse {
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}	
} 

/* public */
.p-y-5 {
	padding-top:5px;
	padding-bottom:5px;
}

.hide-tag-input {
	border:0;
	background-color:#f8f9fa;
	color:black;
	pointer-events:none;
}

.nau-shadow-bottom-min{
	box-shadow: 0 8px 6px -6px black;
}

.nau-shadow-bottom-hr{
	box-shadow: 0px -20px 10px 20px black;
}

.nau-color-secondary{
	color:#cfc9c9;	
}

.nau-locker {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	z-index: 9999; 
}

.nau-is-center {
    position: relative;
    top: 50%;
	left: 50%;
    transform: translateY(-50%);
	transform: translateX(-50%);
	display: inline-block;
}


.nau-block-fix{
	display: inline-block;
	position: relative;
}




/*
thead {
   /* to take the same width as tr 
  width: calc(100% - 17px) !important; 
}

/* duoc nhung cot bi co lai
tbody {
	
	display: block !important;
	max-height: 500px !important; 
	overflow-y: scroll !important; /* keeps the scrollbar even if it doesn't need it; display purpose 
}
*/

/*
tr {
  display: table; /* display purpose; th's border 
  width: 100%;
  box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) 
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}
*/

/*
.fixed tbody {
    display:block;
    height:200px;
    overflow:auto;
}
.fixed thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.fixed thead {
    width: calc( 100% - 1em )
}


.table-fixed tbody {
  height: 200px;
  overflow-y: scroll;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
*/


/*test scroll
.nau-fixed-header-table {
	overflow-y: scroll; 
	height: 100px;
	position: fixed;
	table-layout: fixed;
}*/

/*
table.responsive-table thead {
  position: fixed;  
  table-layout: fixed;
  display: table;
}
table.responsive-table {
  display: table;
  //required for table-layout to be used (not normally necessary; included for completeness)
  table-layout: fixed;
  //this keeps your columns with fixed with exactly the right width
  width: 100%;
  //table must have width set for fixed layout to work as expected
  height: 100px;
}*/

/*
.tableFixHead { overflow-y: scroll; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }*/

/* Just common table stuff. Really. 
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }*/

/* test table scroll javascrip chưa được
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}

/* test table scroll chưa được
.my-custom-scrollbar {
position: relative;
height: 200px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
*/