/* CSS Document */
body {font-family: arial; background:url(../img/Background2.png) #16316b; }
#content {margin: 0 auto;max-width: 700px;padding: 30px;border: 1px solid #e5e4e4;border-radius: 5px;background: #f5f5f5f7;  min-height: 50vh;display: flex;flex-direction: column;justify-content: space-between;}
.hide{display: none;}
#thongtin{ background: #2d7b00; color: #fff; text-align: center; padding: 10px; border-radius: 5px; margin: 20px 0;}
.title{text-align: center;}
form {max-width: 500px; margin: 0 auto; }
form div {margin-bottom: 10px;text-align: center;}
form#taomakm div {text-align: left;}
form.frm lable {margin-right: 5px;width: 120px;display: inline-block;text-align: left;}
input {height: 23px;width: 49%;border: 1px solid #a4a4a4;border-radius: 3px;padding: 2px}
form span {text-align: left;}
.btnsubmit {background: #1a0202;color: #fff;padding: 7px;width: 100px !important;border: 0;border-radius: 5px; height: unset; cursor: pointer;}
input#capnhatcty {padding: 2px;height: unset;width: 50px;font-size: 16px;cursor: pointer;}
button.mk {padding: 6px 5px;background: #000;color: #fff;border: unset;border-radius: 3px;}
div#linkfile a,span#return,button#link  {font-style: italic;color: #000db6;text-decoration: unset;font-size: 13px; cursor: pointer;border: unset;}
#thongbao b{color: #D80003;}
#thongtin b{color: #ff9e31;}
.ghichu {display: flex;justify-content: space-between;align-items: flex-end;}
.ghichu2 {display: flex;justify-content: space-between;flex-direction: row-reverse;align-items: flex-end;}
#thongbao p {font-size: 18px;}
.star {color: #8E0000;}
.right{text-align: right;}
.center{text-align: center !important;}
img.qrcode {width: 60px;float: right;}
span.refesh {cursor: pointer;background: #000;color: #fff;width: 50px;margin: 0 auto;border-radius: 5px;font-size: 15px;padding: 10px;margin-top: 15px;}

/*input#birthday {
    position: relative;
}

#birthday:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

#birthday::-webkit-datetime-edit, #birthday::-webkit-inner-spin-button, #birthday::-webkit-clear-button {
    display: none;
}

#birthday::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 6px;
    right: 0;
    color: black;
    opacity: 1;
}*/
/*Popup*/

.modal {
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 1vh; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
.modal-content {background: #ffffff;color: #000000;margin: auto;display: flex;width: 80%;max-width: 700px;text-align: center;min-height: 60vh;flex-direction: column;border-radius: 5px;padding: 10px;justify-content: center;font-size: 24px;}
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}	
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* CSS Load ajax */

.loader {border: 5px solid #f3f3f3;border-radius: 50%;border-top: 5px solid #bebebe !important;border-bottom: 5px solid #bebebe !important;min-width: unset !important;width: 30px !important;height: 30px !important;color: #fff; background: #fff !important;padding: 0;  -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;pointer-events: none;}
.loader:hover{background: #fff;}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media all and (max-width:769px){
    body {background-position: center top;}
    .title {font-size: 24px;}
    #content {padding: 10px;min-height: 92vh;margin: 5px 0 5px 5px;}
    form {max-width:unset;}
    form.frm lable {width: 65px;font-size: 15px;margin: 0;}
    form#frmnhapmakm div {text-align: center;display: flex;flex-direction: column;align-items: center;}
    form#frmnhapmakm lable {width: unset;}
    form#frmnhapttkh div {text-align: left;}
    form#frmnhapttkh lable { width: 90px;text-align: left; font-size: 14px;}
    .ghichu {flex-wrap: wrap;}
}

@media all and (max-width:550px){
input#btnsubmit {display: block;margin: 10px auto;}
form#frmnhapmakm input[type="text"] {width: 100%;margin: 5px 0;}   
lable + input, .select2 {width: 100%  !important; margin: 5px 0 !important; padding-right: 0px;}    
.inputcty {display: flex;flex-direction: column;align-items: flex-start;}    
}