*{margin:0;padding:0;font-family:'Roboto', sans-serif;box-sizing:border-box;-webkit-appearance:none}
a{text-decoration:none}
img{max-width:100%}
section{background-image: url("../img/xe.png"), url("../img/dau.png"), url("../img/bg.jpg");background-repeat: no-repeat; background-size: calc((100% - 550px) / 3), calc((100% - 550px) / 3), cover; width:100%;height:100%;max-width:1920px;margin:auto;padding-top:40px;background-position: left 2vw center, right 2vw center, center}
.thongtin_wrap{display:flex;align-items:center;justify-content:center}
.thongtin{color:#fff;background-color:#cc3333;font-weight:bold;font-size:1.1vw;position:relative;padding: 8px 15px;margin-bottom:30px;-ms-transform: skewX(-20deg);-webkit-transform: skewX(-20deg);transform: skewX(-20deg);box-shadow: 0px 0px 40px -7px #000;width:40vw;text-align:center;max-width: 220px;}
.thongtin:first-child{margin-right:5px}
.thongtin a{color:#fff}
.thongtin a:hover, .thongtin_wrap  a.active{color:#ffcc66}
.thongtin2{-ms-transform: skewX(20deg);-webkit-transform: skewX(20deg);transform: skewX(20deg);}
.tieude{color: #fff;font-size: 3.3vw;font-style: italic;text-shadow: 2px 2px #fff;text-shadow: 0 0 10px #fff;font-weight: bold;text-align: center;position: relative;padding-bottom: 25px;}
.tieude:after{content:"";position:absolute;background-image:url("../img/tieude-vien.png");width:80%;height:30px;bottom:0;left:0;right:0;margin:auto;background-repeat: no-repeat;background-position: center;}
.form{background-color:#fff;padding:40px;width:35%;margin:30px auto;border-radius:5px}
.form_tieude{color:#333333;font-size:1.5vw;border-bottom:1px solid #990000;padding:10px 0 30px 0;font-weight:bold;text-align:center;text-transform:uppercase}
.form_group{margin:30px 0}
label{font-weight:bold;color:#7a9196}
input.text{padding: 10px;background-color: #ebebeb;border: none;outline: none;width: 100%;margin: 10px 0;border-radius:3px}
.dongy{font-size: 1vw;font-weight: normal;}
.button{background-color:#850c0d;color:#ecd375;padding:20px;text-transform:uppercase;border-radius:5px;border:none;font-weight: bold;width: 100%;cursor: pointer;font-size:1.4vw}
.form_group:last-child{margin-bottom:0px}
.warning{color:red;font-style:italic;font-size:0.8vw;position:relative;padding-left: 25px;}
.warning:before{content:"";width:20px;height:20px;position:absolute;left:0;top:0;bottom:0;margin:auto;background-image:url(../img/warning.png);background-size:100%;background-repeat: no-repeat;}

.quay{margin:30px auto;text-align:center;position:relative}
#spin_button{position: absolute;top: -7%;bottom: 0px;margin: auto;left: 0;right: 0;width: 100px;}
.overlay{background-color:rgba(0,0,0,0.4);position: fixed;width: 100%;height: 100%;z-index: 10;top: 0;display:none}
.pop_wrapper{background-image:url("../img/bgpop.jpg");background-repeat:no-repeat;width:80%;max-width:1893px;position:absolute;z-index:11;top:0;bottom:0;left:0;right:0;margin:auto;height: 45vw;background-position: center;display: flex;align-items: center;justify-content: center;flex-direction: column;background-size:100% 100%}
.pop_wrapper .title, .pop_wrapper .hinh{text-align:center;width: 100%;}
.pop_wrapper .title {font-size: 3vw;padding: 20px 0;color: red;text-shadow: 0 0 6px #fbf4a5, 0 0 4px #fff,0 0 6px #fbf4a5, 0 0 4px #fff;outline: 0 0 10px #fff;font-weight: bold;}
.pop_wrapper .hinh img {width: 20vw;max-width:300px}
.pop_wrapper .choitiep{padding: 1vw 2vw;text-align: center;color: #fff;background-color: #c23532;border-radius: 5px;margin: 10px 0;cursor: pointer;font-size: 2vw;}
footer{background-color:rgba(0,0,0,0.2);clear:both;display:flex;align-items:center;justify-content:center}



/* check box */
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /*! font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 15px 0;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #810400;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* select 2 */
.select2-container{margin-top:10px!important}
.select2-container .select2-selection--single{height:35px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 35px!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:32px!important}


/* input group */
.input-group{
  display: table;
  border-collapse: collapse;
  width:100%;
  margin:10px 0;
}
.input-group > div{
  display: table-cell;
  border: 1px solid #ddd;
  vertical-align: middle;  /* needed for Safari */
}
.input-group-icon{
  background:#eee;
  color: #777;
  padding: 0 12px
}
.input-group-area{
  width:70%;
}
.input-group input{
  border: 0;
  display: block;
  width: 100%;
  padding: 8px;
}

/* media */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px)  {
	section{background-size: calc((100% - 550px) / 2.2), calc((100% - 550px) / 2.2), cover;}  
	.form{width:55vw}
	.form_tieude{font-size:2vw}
	.thongtin a{font-size: 1.8vw;}
	.dongy{font-size: 1.5vw;}
	.pop_wrapper{height: 65vw}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px) {
	section{background-size: 24%, 35%, cover;background-position: bottom 15vw left 25%, bottom 15vw right 25%, center;}  
	.form{padding: 6vw;width: 90vw;}
	.form_tieude{font-size:5.5vw}
	.thongtin a{font-size: 3vw;}
	.tieude{font-size: 5.3vw;}
	.button{font-size: 3.4vw;}
	.dongy{font-size: 3.1vw;}
	.warning{font-size:3vw}
	#spin_button{width:15vw}
	.pop_wrapper{height: 80vw}
	.pop_wrapper .title {font-size: 4vw}
	.pop_wrapper .choitiep{padding: 2vw 3vw;font-size: 4vw;}
	footer{margin-top: 31%;}
}