/*

RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
  https://gist.github.com/jordyvanraaij/9069194

*/

body{
    font-family: Times New Roman, Arial;
    background-color: #e6e6e6;
    line-height: 1;
}
#page{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-top:5px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    vertical-align: baseline;
    background-color:white;
    min-height: 700px;
    margin-bottom: 20px;
}
/*#main 
{
    margin-top: 30px;
    margin-bottom: 30px;
    padding-left: 40px;
    padding-right:40px;
    margin: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;

}*/

#header-title {
    width:100%;
    padding-top:5px;
    text-align:center;
    font-size:35px;
}

/*#gioi-thieu{
    width:98.5%;
    border: 2px solid #999; 
    padding: 10px ;
    line-height: 20px;
    font-size:17px;
}*/

label {
    font-weight: normal;
}
.col-sm-2-1{
    float:left;
    width:14%;
    position:relative;min-height:1px;
}
.col-sm-2-2{
    float:left;
    width:19%;
    position:relative;min-height:1px;
}

.input-area>input {width: 100%;-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow: 1;flex-grow: 1;-webkit-flex-shrink: 1;flex-shrink: 1;background-color: transparent;border: none;outline: none;z-index: 0;}
.input-area>input:focus ~ .boder-bottom {transform-origin: 229.5px center 0px;background-color: rgb(103, 58, 183);-webkit-animation: InputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);animation: InputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);-webkit-transform:scaleX(1);transform:scaleX(1);}

.col-sm-4.control-label,.col-sm-12.control-label{text-align:left;}
.col-sm-12.control-label{margin-bottom:5px;}
.col-sm-3>input[type=radio],.col-sm-4>input[type=radio],.col-sm-12>input[type=radio],{margin-left: 32px;}  /*! .col-sm-12>input[type=text]  */
.col-sm-10>input[type=radio]{margin-top: 15px; margin-left: 32px;}
.col-sm-10.control-label{text-align:left; width:92%; float:right; }
.choosebook{display:none;}
._display{display:block;}


.bold {font-size:16px; }
.italic {font-style:italic;}
.mar-bot {margin-bottom:2px;}
form {padding:5px 0px 5px 0px}
.txt-group {margin-bottom:5px; margin-top: 5px;}
.boder-bottom {background-color: rgba(0,0,0,0.12);height: 1px;}
.group-rg {padding-left:15px; padding-right:0;}
.txt-group>.bold,.input-area {float:left;width: 100%;}
.input-area>input {width: 100%;-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow: 1;flex-grow: 1;-webkit-flex-shrink: 1;flex-shrink: 1;background-color: transparent;border: none;outline: none;z-index: 0; text-align: center}
.input-area>input:focus ~ .boder-bottom {transform-origin: 229.5px center 0px;background-color: rgb(103, 58, 183);-webkit-animation: InputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);animation: InputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);-webkit-transform:scaleX(1);transform:scaleX(1);}
.txt-group>.italic {display:block;clear:both}
form p.bold {font-size:18px;padding-right: 15px;padding-left: 15px; margin-bottom:10px;}
form p.italic {color:#185596;font-size:15px}
.rad-group {padding-left:0;margin: 8px 0;}
.pad-rig{padding-right:25px}
.rad-group>label>.italic {display:inline-block;font-weight:normal;}
.rad-group>label>input[type=radio] {opacity:0;position:absolute;}
.rad-group>label>span.btn {float:left;margin:4px 10px 4px 0;padding:4px 8px;}
.rad-group>label>span>i {opacity: 0;}
.rad-group>label>input:checked ~ span.btn {background-color: #e6e6e6;background-image: none;outline: 0;-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);box-shadow: inset 0 3px 5px rgba(0,0,0,.125);}
.rad-group>label>input:checked ~ span>i.glyphicon {opacity: 1;}
button .italic {display:block;}
footer img {width:100%;}
@keyframes InputAddUnderline{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
@-webkit-keyframes InputAddUnderline{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
@media (max-width:991px){
    .group-rg { /*padding-left:0px;*/
        margin-bottom: 15px;
        margin-top: 15px;
        min-height: 20px;
    }
.txt-group{clear:both; padding-top:5px;}
}

@media (max-width: 768px) {
    .wrap {width:auto;}
    header img {width: 100%;}
    
 }


.form-control {
    text-align: center;
}



.control-group {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  padding: 30px;
  width: 200px;
  height: 210px;
  margin: 10px;
}
.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 18px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  left: 15px;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #0e647d;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}
.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select select::-ms-expand {
  display: none;
}
.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc;
}
.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
  border-top-color: #000;
}
.select select:disabled ~ .select__arrow {
  border-top-color: #ccc;
}

table tr td label{
    margin-top:0px;
}
.control input:checked:disabled ~ .control__indicator {background: #0e647d;}
.control input:checked ~ .control__indicator::after {background: #fff;}





.responstable {
  margin: 1em 0;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  color: #024457;
  border-radius: 10px;
  border: 1px solid #167F92;
}
.responstable tr {
  border: 1px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
  background-color: #EAF3F3;
}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #167F92;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #D9E4E6;
  }
}
.responstable th, .responstable td {

}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}


h1 {
  font-family: Verdana;
  font-weight: normal;
  color: #024457;
}
h1 span {
  color: #167F92;
}

.cot1{
    width:20px;
   text-align:center;
   font-weight: bold;

}
.cot2{
    width:300px;
   font-weight: bold;
}
.cot3{
    width:50px;
    text-align:center;
    font-weight: bold;
}

.row 
{
    margin-bottom : 5px;
}
.row label.col-sm-10.control-label input.form-control  {
    display: inline-block;
    width: 5%;
}

.row label.col-sm-5.control-label input.form-control  {
    display: inline-block;
    width: 10%;
}

.row label.col-sm-12.control-label input.form-control  {
    display: inline-block;
    width: 10%;
}

input.col-sm-4.form-control {
    display: inline-block;
    width: 31.5%;
}
label.col-sm-6.control-label input.form-control {
    display: inline-block;
    width: 50%;
    margin-left: 20%;
}

.row .col-sm-4 .form-control {
    display: inline-block;
    width: 100%;
}
.row .col-sm-6 .form-control {
    display: inline-block;
    width: 100%;
}
.row .col-sm-8 .form-control {
    display: inline-block;
    width: 100%;
}
.row .col-sm-12 .form-control {
    display: inline-block;
    width: 100%;
}
.row .col-sm-12 .form-control {
    display: inline-block;
    width: 100%;
}

.row .col-sm-2 .form-control {
    display: inline-block;
    width: 100%;
}





.clear {
	content: "";
}