/* CSS Document */
body{
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	color: #555555;
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

section{
	background-image: url(../images/backgroundMain.jpg);
	background-repeat: all;
	padding:35px
}

figure{
	margin: 0;
}

figure img{
	max-width: 100%;
}

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

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* Dành cho điện thoại */
@media all and (min-width: 320px) {
	section .containerWhite{
		max-width: 814px;
		background: #fff;
		margin:auto;
		padding:30px;
		border: 4px solid #e5e5e5;
		border-radius: 15px;
	}

	section .logo{
		text-align: center;
	}

	section .logo img{
		width: 131px;
	}

	section .titleMain{
		font-weight: 200;
		font-size: 14pt;
		text-align: center;
		font-family: 'Fahkwang', sans-serif;
		text-transform: uppercase;
	}

	section .titleMain strong{
		font-weight: bold;
	}

	section .titleMain span{
		font-weight: 400;
	}

	section .description{
		text-align: center;
	}

	section .ratingStart ul{
		display: flex;
		border-radius: 10px;
		border:1px solid #fff;
		max-width: 505px;
		margin: auto;
	}

	section .ratingStart ul li{
		margin:8px;
	}

	section .ratingStart ul li img{
		max-width: 100%;
	}

	section .titleGroup{
		font-size: 14pt;
	}

	section h4.titleGroup{
		font-size: 13pt;
		margin: 10px 0;
	}

	section .groupAnswer select, section .groupAnswer textarea{
		box-sizing: border-box;
		width: 100%;
		color:#555555;
		border: 1px solid #ebebeb;
		background: #ebebeb;
		padding: 10px;
		font-family: 'Fahkwang', sans-serif;
		font-size: 12pt;
		border-radius: 10px;
	}

	section .groupAnswer select{
		-webkit-appearance: none;
	    -moz-appearance: none;
	    text-indent: 1px;
	    text-overflow: '';
	}	

	section .groupAnswer textarea{
		height: 150px;
		resize: none;
		padding:15px 18px;
	}

	section .ratingStart{
		margin:15px 0;

	}

	section .btnSubmit{
		background: #555555;
		color: #fff;
		margin:25px auto;
		text-align: center;
		max-width: 200px;
		padding:20px;
		cursor: pointer;
		border-radius: 5px;
	}

	section .inputMaKh{
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #e5e5e5;
		height: 50px;
		text-indent: 5px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
		font-size: 13pt;
		border-radius: 5px;
	}

	section .groupBox{
		border: 2px solid #555555;
		border-radius: 5px;
		padding: 20px 15px 0 15px;
		position: relative;
	}

	section .groupBox .titleBox{
		background: #fff;
		position: absolute;
		top: -13px;
		padding: 0 12px;
		font-weight: 600;
	}
}
 
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 600px) {
	
}
 
/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {

	section{
		padding:50px;
	}


	section .description{
		font-size: 15pt;
	}

	section .containerWhite{
		padding:50px 100px;
	}

	section h1.titleMain{
		font-size: 30pt;
	}

	section .titleMain{
		font-size: 25pt;
	}

	section .titleGroup{
		font-size: 20pt;
	}

	section h4.titleGroup{
		font-size: 16pt;
		margin: 10px 0;
	}

}
 
/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {
	section h1.titleMain{
		font-size: 35pt;
	}

	section .description{
		font-size: 18pt;
	}
}