/*==============================================================*/
body *{
    font-family: Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.mainNav{
    background-color: #2c3e50 !important;
    font-size: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-weight: 700;
}
.mainNav .navbar-nav>li>a:hover, 
.mainNav .navbar-nav>li>a:active, 
.mainNav .navbar-nav>li>a:focus,
.mainNav .navbar-nav>.active>a {
    background: #357ca5 !important;
    color: #fff !important;
}
.mainNav .navbar-nav>li{
    padding-left: .25rem;
    padding-right:.25rem;
}
.mainNav .navbar-nav>li>a{
    border-radius: 0.5rem  !important;
}

.main-content {
   margin-top: 60px;
}
#gioithieu{
    
}
#gioithieu .img-avatar{
    width: 100%;    
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#gioithieu .title{
   font-size: 7rem;
   line-height: 6rem;   
   font-weight: 700;
}
#gioithieu .subtitle{
   font-size: 4rem;   
}

.divider-custom {
      margin: 1.25rem 0 1.5rem;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
}

.divider-custom .divider-custom-line {
  width: 100%;
  max-width: 7rem;
  height: 0.25rem;
  background-color:#2c95e2;
  border-radius: 1rem;
  border-color: #2c95e2 !important;
}

.divider-custom .divider-custom-line:first-child {
  margin-right: 1rem;
}

.divider-custom .divider-custom-line:last-child {
  margin-left: 1rem;
}

.divider-custom .divider-custom-icon {
  color: #2c95e2 !important;
  font-size: 2rem;
}

.divider-custom.divider-light .divider-custom-line {
  background-color: #fff;
}

.divider-custom.divider-light .divider-custom-icon {
  color: #fff !important;
}

/* ======================== MY -FORM ============================ */
.myForm .form-group{
  position:relative; 
  margin-bottom:2.5rem;  
  font-size:2.5rem;
}

.myForm .form-input , .myForm .form-select {
  font-size:2rem;
  padding:4px 4px 4px 0px;
  display:block;
  width:100%;
  height: calc(1.5em + .75rem + .25rem);
  background-color: transparent !important;
  border:none;
  border-bottom:1px solid #757575;  
}

.myForm .form-input:focus , .myForm .form-select:focus {
     outline:none;
     border-bottom:2px solid #5264AE; 
}

.myForm label {
  color:#999; 
  font-size:2rem;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:0px;
  top:0px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.myForm .form-input:focus ~ label, 
.myForm .form-input:not(:placeholder-shown) ~ label, 
.myForm .form-select:focus ~ label , 
.myForm .form-select:not([value=""]):valid ~ label {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  color:#5264AE; 
}

/* active state */
.myForm .form-input:focus ~ .bar:before, 
.myForm .form-input:focus ~ .bar:after,
.myForm .form-select:focus ~ .bar:before, 
.myForm .form-select:focus ~ .bar:after {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* highlighter */
.myForm .highlight {
  position:absolute;
  height:50%; 
  width:100%; 
  top:15%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.myForm .form-input:focus ~ .highlight ,
.myForm .form-select:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* animation */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
  to    { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
  to    { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
  to    { width:0; background:transparent; }
}

.myForm .form-label {
    color:#5264AE; 
    padding-left: 2rem;
}
.myForm input[type=checkbox] + .form-label {
    color:#5264AE; 
    padding-left: 2rem;
    padding-top: 5px;
}
.myForm .form-group a{
    font-size: 2rem;
    padding-top: 5px;
}

.myForm .form-group button{
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 2rem;
}

#login {
    padding-top: 6rem;
    padding-bottom: 6rem;
    margin-bottom: 7rem;
}

#login .title,
#register .title,
#xephang .title{
    font-size: 30px;
    line-height: 4rem;
}
#register {
    padding-top: 5px;
    padding-bottom: 5px;  
    display: block;  
}
#register .myForm label{color:#fff; }
#register .myForm .form-input:focus ~ label, 
#register .myForm .form-input:not(:placeholder-shown) ~ label, 
#register .myForm .form-select:focus ~ label , 
#register .myForm .form-select:not([value=""]):valid ~ label {
  color:#fff; 
  font-size: 50%;
}
#register .myForm .form-input:focus,
#register .myForm .form-input:not(:placeholder-shown),
#register .myForm .form-select:focus,
#register .myForm .form-select:not([value=""]):valid {
   color:#000; 
   background-color: #fff !important;
}

#xephang{
    min-height: 300px !important;
    padding-top: 20px;
    padding-bottom: 20px;
}
#xephang .title{
   color: #337ab7;
}

.footer {
    background-color: #2c3e50;
    color: #fff;
}

.footer h4{
    font-size: 3rem;
}
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.form-group.has-error .help-block {
    font-size: 1.5rem;
}
.myForm .form-group.has-error input ~ label{   
    color:red !important;
}
@media (max-width: 400px) {
  .navbar-brand{font-size: 14px;}
}
.navbar-toggle{
   background-color:#fff;
}
.navbar-toggle .icon-bar {
   background-color:#337ab7;
}
.pagination {
    margin-top: 0px;
    margin-bottom: 5px;
}
.box-header {
	padding:20px;	
}
.box-title{font-size:20px !important;}
.total {
	text-align:center;
	margin-bottom:10px;
	border-bottom:0px;
}
.total span{
	font-size:36px;
	font-weight:bold;	
}
.box-top ul li:first-child{
	margin-top:12px;
}