/******** Default Behaviour Tags ********/
/****************************************/
/* RESET STYLE */

*				{margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color:#555; outline:none;}
body			{font-size:11px; background:#fff}
a				{color:#CC6600; text-decoration:none}
a:hover			{text-decoration:underline}
select, input, textarea	{font-family: Arial, Helvetica, sans-serif; color:#555; border:#ccc solid 1px; font-size:11px; }
input, textarea {padding:2px 1px 2px 2px;}
h1{color:#000; font-size:20px; line-height:normal; margin:0 0 10px}
h2{font-size:15px; color:#333; margin:0 0 10px;}
h3{font-size:13px; color:#333; margin:0 0 10px;}
h4{font-size:12px; color:#333; margin:0 0 10px;}
h5, h6{font-size:11px; color:#333; margin:0 0 10px}
img, fieldset{border:0}
option{padding:1px}
.hidden{display:none;}
/***********/
ol, ul{list-style-type:none;}
dt{font-weight:bold; text-transform:uppercase;} 
/***********/
th, td{text-align:left; padding:5px;}
	thead{font-weight:bold;}
p{line-height:16px;}
/********** Common Classes ********/
.clear{height:0; clear:both; padding:0; margin:0; line-height:0;}



/********** Common Structure (for all templates) ********/
	/************header
	****************************/
	#header{ background:url(../images/bgd_header.jpg) 100% 0 no-repeat #FFCC00; height:64px; border-bottom:#fff solid 1px; position:relative }
	#header h1 { position:absolute; left:15px; top:10px; }
	.topnav { margin-left:290px; background:url(../images/whiteleftcurve.gif) 0 0 no-repeat #fff; height:17px; padding:1px 15px 0 15px }
	.topnav li{ display:block; float:left; background:url(../images/ico_arrow_01.gif) 0 5px no-repeat; padding:0 0 0 7px; margin-right:10px; font-weight:bold }
	.topnav li a { color:#333; }
	.topnav li a:hover { text-decoration:none; color:#cc6600 }
	
	/************nav
	****************************/	
	#nav{background:#555; height:32px; margin-bottom:1px}
	#nav li{display:block; float:left; border-right:#828282 solid 1px;}
	#nav li a{display:block; float:left; padding:7px 15px; line-height:18px; font-weight:bold; color:#fff;}
	#nav li a:hover, #nav .current a{background:#8b827d; text-decoration:none}
				
		/* Just sub menu links */
		#subMenusContainer a, #nav li li a{text-align:left;}
		
		/* All menu links on hover or focus */
		#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
			color:#fff; text-decoration:none
		}
		
		/* sub menu links on hover or focus */
		#nav a.mainMenuParentBtnFocused, 
		#nav li a:hover,
		#nav li a:focus{color:#fff; text-decoration:none; background:#8b827d }
		#subMenusContainer a:hover, 
		#subMenusContainer a:focus, #subMenusContainer a.subMenuParentBtnFocused{color:#fff; text-decoration:none;}
		
	
		/* Parent Sub Menu Links ---[javascript users only]*/
		.subMenuParentBtn{ }
		
		/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
		.subMenuParentBtnFocused{ }
		
		/* Parent Main Menu Links ---[javascript users only]*/
		.mainMenuParentBtn{}
		
		/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
		.mainMenuParentBtnFocused{text-decoration:none;}
		
		/* ----[ OLs ULs, LIs, and DIVs ]----*/
		
		/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
		.smOW{ display:none; position: absolute; overflow:hidden;}
		
		/* All ULs and OLs */
		#nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none;	line-height: 1em;}
		
		#subMenusContainer ul {padding:5px 0}
		
		/* All submenu OLs and ULs */
		#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {background:#8b827d; left:0; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;}
		
		/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
		#nav li {position:relative;}
		#nav .first{background:none; padding-left:0}
		/* main menu ul or ol elment */
		#nav{display:block; z-index:5;}
		
		#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:9999; font-size:11px;}
		#subMenusContainer li a{padding:5px 15px; width:200px; color:#ddd; display:block}
		/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
		#nav li li{	float:none; }
		
		#nav li li a{ /* Just submenu links*/	position:relative;	float:none;}
		
		#nav li ul { /* second-level lists */
			position: absolute;	width: 10em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
			margin-top:2.2em;
		}
		
		/* third-and-above-level lists */
		#nav li ul ul {margin: -1em 0 0 -1000em;}
		#nav li:hover ul ul {margin-left: -1000em; }
		
		 /* lists nested under hovered list items */
		#nav li:hover ul{margin-left: 0; }
		#nav li li:hover ul {margin-left: 10em; margin-top:-2.5em;}
		
		/* extra positioning rules for limited noscript keyboard accessibility */
		#nav li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
		#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
		#nav li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
		#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
		#nav li:hover a:focus{ margin-left: 0; }
		#nav li li:hover a:focus + ul { margin-left: 10em; }
		

	/************main
	****************************/
	#main {width:100%; overflow:hidden; padding-bottom:10px}
	
	/************lev
	****************************/
	#lev{width:200px; float:left;}
	#lev li{display:block; background:url(../images/ico_arrow_01.gif) 10px 12px no-repeat; padding:7px 0 7px 20px; font-weight:bold; border-bottom:#ccc dotted 1px;}
	#lev li a { color:#333; display:block; padding-right:10px }
	#lev li a:hover { text-decoration:none; color:#CC6600 }
	#lev li ul{ padding-top:5px }
	#lev li li { font-weight:normal; border-bottom:none; background-position: 5px 8px; padding:3px 0 3px 15px; }
	#lev .current { background:url(../images/ico_arrow_02.gif) 10px 12px no-repeat;}
	#lev .current .current { background-position:5px 8px }
	#lev .current>a, #lev .current2>a {color:#CC6600}
	#lev .currentsub { background-color:#fff; border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px }
	#lev p{padding: 0 0 0 10px;}
	.levInner {background: none repeat scroll 0 0 #EBEBEB;border-radius: 0 10px 10px 0;padding: 10px 0;width: 100%;margin: 0 0 10px 0;}
	
	/************content
	****************************/
	#content{ margin:0 15px 0 215px;}
	#content p{ margin-bottom:10px }
	.left-content-right .innerContent, .content-right .innerContent{ margin-right:215px; }
	.content-right #content { margin-left:15px; }
	.content #content { margin:0 15px; }

	.contType { border:#555 solid 1px; padding:10px; margin-bottom:15px }
	.tableContent table{margin:0 0 15px 0; border-bottom:#c8cfd9 solid 3px;}
		.tableContent td input{width:30px; height:14px; float:left; margin:0 3px 0 0; text-align:right}
		.tableContent td .position{width:30px; height:14px; float:left; margin:0 3px 0 0; text-align:right}
		.tableContent td .price{width:70px; height:14px; float:left; margin:0 3px 0 0; text-align:right}
		.tableContent th{padding:7px 5px; background:#c8cfd9; color:#000;}
		.tableContent th a{color:#000; text-decoration:underline}
		.tableContent th a:hover{color:#000; text-decoration:none}		
		.tableContent td{padding:4px 4px; border-bottom:#dedede  solid 1px; color:#666}
		.tableContent td img{margin:0 1px;}
		.tableContent td a{color:#666}
		.tableContent td a:hover{color:#DC4B1C}
		.tableContent .bgType td{background:#ebe9e9}
		.tableContent .box3{width:13px; height:13px; border:none; padding:0; margin:0}
		.tableContent td .btnOK{width:40px; height:20px; background:#ef8710; margin:0; padding:0; font-size:0.912em; font-weight:bold; cursor:pointer; color:#fff; border:#e07a04 solid 1px;}
		.tableContent td p{width:100px; display:block; overflow:hidden}
	
			
	/* error box ------------*/
	.errorBox { border:#cc0000 solid 1px; padding:10px 10px 10px 40px; background:url(../images/error_icon.gif) 10px 10px no-repeat #FFCCCC; margin-bottom:15px; }

	/* info box ------------*/
	.infoBox { border: #33CC00 solid 1px; padding:10px 10px 10px 40px; background:url(../images/success_icon.png) 10px 10px no-repeat #ebf8a4; margin-bottom:15px; }
	
	/* bradcrumb --------*/
	.breadcrumb { width:100%; overflow:hidden; margin:0 0 20px; padding:15px 0 0 0 }
	.breadcrumb li{display:block; float:left; background:url(../images/ico_arrow_01.gif) 100% 5px no-repeat; font-weight:bold; padding:0 15px 0 0; margin-right:10px}
	.breadcrumb .last { background:none }
	
	/*********************/
	.latestUpdate { float:right; margin:0 0 5px 10px }
	.latestUpdate table { background:#333; }
	.latestUpdate td{ background:#fff; text-align:left; vertical-align:top }
	
	.formContent fieldset p { width:100%; overflow:hidden }
	.formContent fieldset .left {width: 50%; float:left; }
	.formContent fieldset .right {width: 50%; float:right; }
	.formContent fieldset label { width: 200px; float:left; margin-right:10px; text-align:right }
	.formContent fieldset input { width:350px; float:left; margin-right:5px }
	.formContent fieldset .seller{width: 0px !important}
	.formContent fieldset p #dynamicInput { width:500px; float:left; margin-right:5px }
	.formContent fieldset .long{ width:470px; float:left; margin-right:5px }
	.formContent fieldset select { width:200px; float:left; }
	.formContent fieldset .small { width:120px; float:left; }
	.formContent fieldset .verysmall { width:50px; float:left; }
	.formContent fieldset .medium { width:200px; float:left; }
	.formContent fieldset textarea {width:350px; float:left; height:100px;}
	.formContent fieldset .large {width:470px; float:left; height:200px;}
	.formContent fieldset .box {width:13px; height:13px; border:none; margin-top:2px;}
	.formContent fieldset .lbl { width:auto; margin-right:10px; }
	.formContent fieldset .btn { padding-left:210px; width:80%; }
	.formContent fieldset .btn input { width: auto; float:none; padding:4px 10px; background:#555; color:#fff; font-weight:bold; border:none; cursor:pointer }
	.helpIcon{ float:left; position:relative; }
	.helpIcon:hover .alertPopup {display:block;}
	.alertPopup {display:none; position:absolute; left:10px; top:12px; width:200px; background:#fafafa; border:#999 solid 1px; padding:0 10px 10px 10px}
	.alertPopup h4{ padding:3px 10px; color:#fff; margin:0 -10px 5px -10px; display:block; background:#F27F1A;}
	.boxTyle { width:100%; margin-bottom:10px; min-height:20px; }
	#dynamicInput { padding-left:210px; overflow:hidden }
	#listPhoto { padding-left:210px; overflow:hidden }
	.listPhoto img{
	   height: 100%;
       width: auto;
	}
	.errormsg label { color:#F00 }
	.errormsg input, .errormsg select, .errormsg textarea { border:#F00 solid 1px }
	
	.message {border-bottom:3px solid #84A7DB; border-top:3px solid #84A7DB; padding:10px 10px 10px 45px; margin-bottom:15px;  background: url(../images/notice-info.png) no-repeat 4px center #C3D2E5; font-weight:bold; color:#0055BB}
	
	.message2 {border-bottom:3px solid #DE7A7B; border-top:3px solid #DE7A7B; padding:10px 10px 10px 45px; margin-bottom:15px;  background: url(../images/notice-alert.png) no-repeat 4px center #E6C0C0; font-weight:bold; color:#CC0000}
	
	.paging {width:100%; overflow:hidden; }
	.paging li {display: block;float: left;margin-bottom: 5px;margin-right: 5px;}
	.paging li a {border: 1px solid #CCCCCC;color: #555555;display: block;float: left;height: 15px;padding: 1px 5px;}
	.paging li a:hover {background: none repeat scroll 0 0 #CCCCCC;color: #FFFFFF;text-decoration: none;}
	.paging li .paging {color:#cc6600; text-decoration:none}
	.paging .current {font-weight: bold;padding: 2px 4px}
	.first{padding-top: 5px}
	.listBtn{float:right;}
	.listBtn a{display:block; float:left; background:#555; color:#fff; font-weight:bold; padding:3px 7px; margin-left:10px}
	.listBtn a:hover {text-decoration:none}
	
	/*********************/
	.tabContent{width:100%; position:relative}
	.tabs{width:100%; overflow:hidden; margin-bottom:48px; border-bottom:#EF8710 solid 2px;}
	.tabs li{display:block; float:left; margin-right:2px;}
	.tabs li a{display:block; float:left; background:#555; color:#ccc; padding:5px 10px; font-weight:bold; border-radius: 5px 5px 0 0}
	.tabs li a:hover{color:#fff; text-decoration:none}
	.tabs .current a{background:#EF8710; color:#fff}
	
	.search{position:absolute; right:0; top:35px}
	.search input{float:left; margin-right:5px; width:100px; height:15px}
	.search select{float:left; margin-right:5px; min-width:100px; height:20px; padding:2px}
	.search .btnSearch{width:70px; border:none; margin:0; background:#EF8710; color:#fff; cursor:pointer; height:21px; font-weight:bold}
	
	/*********************/
	.contType2{width:100%; overflow:hidden; margin-bottom:15px;}
	.contType2 h3{border-bottom:#ccc solid 2px; padding-bottom:5px;}
	.contType2 h3 a{float:right; font-weight:normal; font-size:0.912em}
	.infoType{width:47%; float:left; margin-right:5%}
	.infoType.last{margin-right:0}
	.infoType fieldset{width:100%; overflow:hidden; margin-bottom:10px;}
	.infoType fieldset input{width:200px; float:left; margin-right:5px; height:15px;}
	.infoType fieldset .btnSubmit{width:70px; border:none; margin:0; background:#555; color:#fff; cursor:pointer; height:21px}
	
	.tblType th{background:#C8CFD9; padding:7px 5px; border-bottom:#dedede solid 1px;}
	.tblType td{border-bottom:#dedede solid 1px;}
	.tblType .bgType td{background:#EBE9E9}
	
	/************context
	****************************/
	#contextual{width:200px; float:right; margin:0;}
	.contextInfo { border:#ebebeb solid 1px; border-top:none; padding:10px }
	#contextual h2 { font-size:13px; background:#ebebeb; padding:3px 10px; margin:0; border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0}
	.listStyle li {background:url(../images/ico_li.gif) 0 6px no-repeat; padding:0 0 0 10px; margin:0 0 7px 0}
	
	/************footer
	****************************/
	#footer{width:100%; padding:15px 0; text-align:center; background:#555}
	#footer ul{width:100%; overflow:hidden; margin-bottom:8px; text-align:center;}
	#footer li{display:inline; padding:0 7px; border-left:#828282 solid 1px}
	#footer li:first-child {border:none}
	#footer li a{color:#ccc}
	#footer li a:hover{color:#fff; text-decoration:none}
	#footer p{color:#ccc}
	
	/*------ User type */
	.statusStaff{}
	.statusAdmin{color:#009933}
	.statusFounder{color:#FF0000}
	.statusSiteStaff{font-weight:bold}
	.statusSiteAdmin{font-weight:bold; color:#009933}
	.statusSiteFounder{font-weight:bold; color: #FF0000}
	.statusEnabled{}
	.statusDisabled{color:#FF0000}
	.statusDeleted{font-weight:bold; color:#FF0000;}
	.statusDestroyed{font-weight:bold; color:#380606}
	.statusCompleted{font-weight:bold; color:#009900}
	.statusNotpayment{}
	.statusPayment{ color:#009900}
	.statusDelivery{color:#0023fb}
	.statusDelived{font-weight:bold; color:#0023fb}
	/* items per page -----*/
	.infoType2{width:100%; overflow:hidden; margin-bottom:10px;}
	.item-pages{float:left; overflow:hidden}
	.item-pages label{display:block; float:left; margin-right:10px; padding-top:3px}
	.item-pages select{float:left; margin-right:10px; width:60px; height:20px; padding:2px}
	.listCategory{float:right; overflow:hidden}
	.listCategory select{float:left; margin-right:5px; min-width:150px; height:20px; padding:2px}	
	.listCategory .btnSubmit2{width:70px; border:none; margin:0; background:#555; color:#fff; cursor:pointer; height:21px; font-weight:bold}
	
	.btn input {background: none repeat scroll 0 0 #555555; border: medium none;color: #FFFFFF; cursor: pointer; font-weight: bold; height: 21px; margin: 0 5px 0 0; width: 70px;}
	.datetime{color:#fff; float:right; padding: 8px 10px 0 10px}
	.datetime strong{color:#fff;}
	.datetime a{color:#fff; text-decoration:underline}
	.underline{text-decoration:underline}
	
	/***** Form View Order ***********/
	.formView { width:100%; overflow:hidden }
	.formView p{ font-size:12px; margin-left:10px;}
	.formView strong{ color:#0330fd; text-transform:none}
	.formView label { width: 120px; float:left; margin-right:10px; text-align:left }
	.formView .infoCustomer{width:49%; float:left; border: 1px solid #CCCCCC}
	.formView .infoCustomer h3{margin:5px 0 10px 10px; }
	.formView .infoOrder{width:49%; float:right; border: 1px solid #CCCCCC}
	.formView .infoOrder h3{margin:5px 0 10px 10px}
	.formView .infoOrder table{ width:96%; margin:5px 0 10px 10px}
	.infoOrder td .last{ float:right}
	
	/* popup2 -------------*/
	.popup2{width:480px; position:absolute; left:0; top:-10000px; background:#fff; padding:10px; border:#EF8710 solid 2px;}
	.btnClose2{text-align:right; margin-bottom:10px; }
	.btnClose2 a{text-decoration:underline}
	.btnClose2 a:hover {text-decoration:none} 
	.popupInne2r{width:100%;}
	.popupInner2 ul{background:url(../images/bgd_line_04.gif) 0 100% repeat-x #fff; width:100%; overflow:hidden; border-bottom:#ddd solid 1px; border-top:#ddd solid 1px; height:23px; margin-bottom:15px;}
	.popupInner2 fieldset p{width:100%; display:block; overflow:hidden; margin-bottom:10px;}
	.popupInner2 fieldset label{display:block; float:left; width:100px; margin-right:5px;}
	.popupInner2 fieldset input{float:left; width:370px; border:#b5b5b5 solid 1px; border-top:#dbdadb solid 1px;}


	/******************/
	.contType3{width:100%; overflow:hidden;}
	.listFile{width:35%; float:left; margin-left:210px;}
	.listFile li{ border-bottom: 1px dotted #ccc; padding:10px 0}
	.listFile li a{color:#555}
	.listFile li a:hover{color:#CC6600}
	.listFile .btnDelete{float:right; margin-left:10px; text-decoration:underline}
	.listFile .btnDelete:hover{text-decoration:none;}
	
	.listPhoto{width:75%; float:left; margin-left:210px;}
	.listPhoto li{display:block; float:left; margin:0 10px 10px 0; position:relative; height:100px}
	.listPhoto .btnDelete{background:#000; position:absolute; right:0; bottom:0; padding:2px 8px; color:#fff;}
	
/* Multi upload*/	
	div.multiupload{
	border:1px outset gray;
	float:left;
	padding:3px;
	background:#eee;
	}
	div.multiupload div.list{
		border:1px inset gray;
		background: #fff;
	}
	div.multiupload div.list div.item{
		margin:1px;
		background: #eee;
	}
	div.multiupload div.list div.item:hover{
		background: #ccc;
	}
	div.multiupload div.list img{
		float:left;
		margin: 3px;
		cursor:pointer;
	}

/* icons */
.icons { width: 100%; overflow:hidden;  } 
.icons ul {width:100%; overflow: hidden; margin-bottom: 20px;}
.icons li { width: 80px; overflow:hidden; display:block; float:left; margin-right: 68px; }
.icons li a { color:#555; }
.icons li a:hover { color:#CC6600; text-decoration:none; }
.icons li.last { margin-right: 0; }
#content .icons li p { margin-bottom: 25px; }

.center { text-align:center; padding-left:21px; padding-bottom:5px}
.right {text-align:right}



.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

.formContent fieldset .cc {
    width: auto;
}
.pull-left{
	float: left !important;
}
.pull-right{
	float: right !important;
}
section{
	font-family: Arial;
	font-size: 3px;
	font-weight: 200;
	line-height: 20px;
}
.d-none {
	display: none!important;
}
.number-x label {
    margin-top: 6px;
}
.category{
	  position: absolute;
    z-index: 666;
    top: -49px;
    left: 55px;
}
#khoahoc{
	  width: 116px;
    height: 26px;
}
.nsk-10 {
	margin-top: 70px;
  padding: 15px 15px 40px;
  border: 1px solid #ccc;
  overflow: hidden;
  margin-bottom: 45px;
	width: 900px;
	
	font-size: 16px;
	background: url('https://thuviennuskin.com/templates/admin/images/5007080413_5123c9425e_b.png') no-repeat;
	background-position: center 60%;
}
.col-md-3.col-sm-3.col-xs-12.left.number-x {
	padding-left:25px;
}
.row.center.row-1 {
    /*justify-content: space-between;
    display: flex;*/
}
.row.center.row-1 .col-sm-5 p {
	float: left;
}
.row.center.row-1 .col-sm-4 p {
	float: right;
}
.nsk-10 p {
    line-height: 21px;
}
.left{
	float: left!important;
}
.right{
	float: right!important;
}
.center {
	text-align: center;
}
.w-50 {
    width: 50%;
    float: left;
}
.rel {
	position: relative;
}
.row-1 .col-md-5 strong,.row-1 .col-md-4 span {
	text-transform: uppercase;
}
.row-2 {
	display: flex;
	position: relative;
	clear: both;
}
.row-2 .col-md-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
 }
.title-12 h4 {
	font-size: 33px;
	color: rgb(0, 138, 176);
	text-transform: uppercase;
	line-height: 1.333;
	font-weight: 700;
}
.title-12 h4 span {
	font-weight: 400;
	display: block;
	color: rgb(0, 138, 176);
}
.d-opacity {
	opacity: 0;
}
.col-sm-4.col-md-4.col-xs-4 {
    font-weight: bold;
    padding-right: 240px;
}
.center.title-12, .row.center.row-1 {
    padding-left: 0;
}
.row.center.row-1 {
	padding: 0 33px;
}

.picture-3x4 {
	margin-left:22px;
	display: flex;
  justify-content: center;
  align-items: center;
	width: 100px;
  height: 180px;
	padding: 0 20px;
	text-align: center;
	background: #7fc4d7;
	position: relative;
	z-index: 2;
}

.view {
	margin-left: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 180px;
    padding: 0 20px;
    text-align: center;
    /* background: #7fc4d7; */
    position: relative;
    z-index: 2;
}
.row-1 .col-sm-4.col-md-4.col-xs-4 {
    padding-right: 0;
}
.ava-3x4 {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 130px;
	height: 172px;
	z-index: 1;
	margin-top: -3px;
	margin-left: 11px;
}
.form-ccdtcb {
	padding: 0 30px;
}
.form-ccdtcb input {
	background: transparent;
	width:74%;
	border: none;
}
.form-ccdtcb .rel,.form-ccdtcb .rel .w-50 {
	display: flex;
	justify-content: space-between;
	position: relative;
}
.form-ccdtcb label {
	color: rgb(51, 51, 51);
	margin-bottom: 0;
	font-weight: 400;
	margin-top: 5px;
}
.form-ccdtcb input {
	background: transparent;
	width: 77%;
	border: none;
	border-bottom: 1px solid rgb(170, 170, 170);
	outline: none;
	/*height: 28px;*/
	height: 18px;
	padding: 0;
	font-size:16px;
	padding-top: 3px;

}
.form-ccdtcb .rel-st input {
	width: 90%;
}
.pl-30 {
	padding-left: 30px;
}
.rel-addi {
	flex-wrap: wrap;
}
.rel-addi p {
	width: 100%;
	text-transform: uppercase;
}
.triggle-after:after {
	content: "\f0d7";
	font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
}
.after-clear {
	clear: both;
}
.row-3 .col-md-3.signature {
	padding: 40px 100px;
}
.row-3 .col-md-3.number-x .rel {
	display: flex;
	justify-content: space-between;
	position: relative;
}
.signature h5 {
	text-transform: uppercase;
	font-size: 16px;
    font-weight: 400;
}
.row-3 .col-md-3.number-x input {
	width: 60%;
	border: none;
	border-bottom: 1px solid rgb(170, 170, 170);
	outline: none;
	/*height: 22px;*/
	height: 18px;
	padding: 0;
	background: transparent;
	padding-top: 3px;

}
.row-3 .col-md-3.number-x .rel-st input {
	width: 83%;
}
.card-member .col-md-6 {
	margin: 0 auto;
	padding: 0;
	border-width: 2px;
	border-color: #ccc;
	border-style: solid;
	border-radius: 5px;
	/*margin-bottom: 100px;*/
	/* height: 100vh; */
}
.card-member .col-md-6 h5 {
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	color: rgb(0, 138, 176);
	line-height: 1.5;
	text-align: center;
	width: 70%;
    margin: 0 auto;
   /* padding: 40px 0;*/
       padding-bottom: 40px;
    padding-top: 5px;
}
.card-member .row {
	display: flex;
	justify-content: center;
	align-items: center;
}
.div-head {
	background: #108bb1;
	display: flex;
	justify-content: space-around;
	color: #fff;
	padding: 10px;
}
.div-head .p {
	text-align: center;
}
.p p {
	margin-bottom: 0;
}
.div-head .p strong {
	text-transform: uppercase;
}
.pic-3x42 {
	display: flex;
	justify-content: center;
	align-items: center;
	/*background: url('https://thuviennuskin.com/templates/admin/images/5007080413_5123c9425e_b_copy.png') no-repeat;*/
	background-position: center;
}
.pic-3x42 .col-md-3 {
	text-align: center;
	width: 100px;
  	height: 130px;	
	/*background-color: rgba(0, 138, 176,0.5);*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
.pic-3x42 .col-md-3:hover {
	cursor: pointer;
}
.pic-3x4 {
	display: flex;
	justify-content: center;
	align-items: center;
	background: url('https://thuviennuskin.com/templates/admin/images/5007080413_5123c9425e_b_copy.png') no-repeat;
	background-position: center;
}
.pic-3x4 .col-md-3 {
	text-align: center;
	width: 196px;
  	height: 271px;	
	background-color: rgba(0, 138, 176,.502);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4;
}
/*.ava-3x4-form-2{
	text-align: center;
	width: 120px ;
  	height: 160px;	
	
}*/
.pic-3x4 .col-md-3:hover {
	cursor: pointer;
}
.ava-3x4-form-2 {
	text-align: center;
	/*width: 196px;
  	height: 271px;	*/
  	width: 120px ;
  	height: 160px;	
	background-color: rgba(0, 138, 176,.502);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
}

.dddn {
	float: right;
	display: inline-block;
	padding: 10px 25px;
	/*border-top:  1px solid #ccc;*/
	text-align: center;
	margin-top: 10%;
	margin-right: 15px;
}
.group {
	display: inline-flex;
    flex-direction: column;
    text-align: center;
    -webkit-border-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px;
    background-color: #9262ff66;
    padding: 5px;
    width: 75px;
    height: 91px;
}
.separator {
    font-weight: 300;
    font-size: 3em;
    margin-right: 5px;
    font-family: "proxima-nova",sans-serif;
    margin-left: 5px;
}
.number {
	font-size: 24px;
    color: #fff;
    padding: 15px 0;
}
.label {
	width: 100%;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 5px 0 15px;
    text-transform: uppercase;
    -webkit-border-bottom-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}
button.luu_CP {
    z-index: 777;
    bottom: -38px;
    left: 50px;
    width: 136px;
    height: 30px;
    background: #7fc4d7;
    border: solid 1px #ccc;
    font-size: 15px;
}
.luu {
	position:absolute;
  z-index: 777;
  bottom: -38px;
  left: 50px;
  width: 75px;
  height: 30px;
  background: #7fc4d7;
  border: solid 1px #ccc;
  font-size: 15px;
}
.luu_NP {
  z-index: 777;
  bottom: -38px;
  left: 50px;
  width: 75px;
  height: 30px;
  background: #7fc4d7;
  border: solid 1px #ccc;
  font-size: 15px;
}
.card-member .p{
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}
.card-member .p p{
	    color: #fff;
    /*line-height: 30px;*/
    line-height: 20px;
}
.card-member .p strong{
	    color: #fff;
    /*line-height: 30px;*/
    line-height: 20px;
}
.pic-3x4 .ab{
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}
.pic-3x4 p
{
	color: #333;
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}
.pic-3x42 .ab{
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}
.pic-3x42 p
{
	color: #333;
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}
.labnc{
	float: right;
	margin-right:30px;
}
.footermamecard{

	font-size: 12px;
	/*color: #333;
	font-family: Arial;
    font-size: 12px;
    font-weight: 400;
    line-height: 10px;*/
}
.footermamecard p{
	margin-bottom: 3px!important;
}
/*.footermamecard{
	position: absolute;
	bottom:0;
	margin-top: 10px;
	
}*/
.footermamecard .firstcf{
	margin-top: 15px;
}
.card12{
	width: 50%;
}
.dddn p
{
	color: #333;
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}
.infomemcard{
	/*padding: 10px;*/
	padding: 30px;
	padding-top: 0px;
}
.infomemcard p 
{
	color: #333;
	font-family: Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.infomemcard .ndob 
{
	text-transform: uppercase;
}
/*.infomemcard .ndnc{
	float: right;
}*/
.ndms, .ndob{
	font-weight: bold;
}
.ndob{
	text-transform: uppercase;
}
/* input#fullname {  text-transform: uppercase; font-weight: bold;} */
input.datebirth {font-weight: bold;}
input.CMND {font-weight: bold;}
input.ngaycap {font-weight: bold;}
input.noicap {font-weight: bold;}
input.hokhau {font-weight: bold;}

.pic-3x42{
	/*position: absolute;
	bottom:0;*/
	margin-bottom: 30px;
	
}
.cropHolder {width: 100%; height: 100vh; display: none;}
#cropWrapper {position: fixed; top:0; left:0; right: 0; bottom: 0;  width: 75%; height: 100vh;z-index: 3;}
#bgCanvas {position: absolute; top:0; left:0; right: 0; bottom: 0; margin: auto;}
#getCropped {position: absolute; top:0; left:0; right: 0; bottom: 0; margin: auto;}
#blacksheet {position: absolute; top:0; left:0; background-color: rgba(0,0,0,0.7); right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;}
.inputLabel {
    width: 710px;
    height: 80px;
    margin: 2rem auto 0;
    border: 12px solid rgb(210, 213, 218);
    text-align: center;
    line-height: 61px;
    background-color: #eeeef1;
}
.cropInputs {
 position: fixed;
 top:0;
 left: auto; 
 right:0; 
 width: 25%;
 height: 100vh;
 background-color: #e7e8e8;
 text-align: center;
 z-index: 5;
}
.inputtools p {text-indent: 1rem;}
.inputtools p span {display: block; min-width: 40px; height: 40px; float: left;}
.inputtools p span img {width: 25px;height: auto; line-height: 40px;}
.cropButtons {
    border: 0px solid #000;
    width: 40px;
    height: 40px; 
    
    border-radius: 40px;
   
    text-align: center;
    cursor: pointer;
    background: linear-gradient(to right, #4ebadb 0%, #00ffff 100%);
    box-shadow: 1px 2px 3px #ccc;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9166', endColorstr='#157050',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.cropButtons img {width: 25px;}
/* input styles */


.cropRange {
	width: calc(100% - 20px);
	height: 5px;
	background: #333;
	position: relative;
	top: -4px;
    left: 4px;
    margin: 0.7rem;	
	
	background: #68b390;
	background: -moz-linear-gradient(to left, #4ebadb 0%, #00ccff 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#68b390), color-stop(50%,#33afb5), color-stop(100%,#23dce6));
    
    background: -webkit-linear-gradient(to left, #4ebadb 0%, #00ccff 100%);
    
	background: -o-linear-gradient(to left, #4ebadb 0%, #00ccff 100%);
	background: -ms-linear-gradient(to left, #4ebadb 0%, #00ccff 100%);
	background: linear-gradient(to left, #4ebadb 0%, #00ccff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68b390', endColorstr='#23dce6',GradientType=1 );	
	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

input[type="range"] {
	-webkit-appearance: none;
	background-color: black;
	height: 5px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	position: relative;
	top: 0px;
	z-index: 1;
	width: 20px;
	height: 20px;
	cursor: pointer;
	border: 2px solid rgb(56, 59, 59);
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
    /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); */
    background-color: rgb(176, 196, 195);
}

input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	top: -75px;
}

input[type="range"]:focus{
  outline:none;
}

#cropSubmit {
    margin-top: 1rem;
    border-radius: 4px;
    cursor: pointer;
    border: 0px solid #000;
    
    /* background: -moz-linear-gradient(-45deg, #1d9166 0%, #06ad8c 46%, #157050 90%, #157050 90%); */ /* FF3.6-15 */
    /* background: -webkit-linear-gradient(-45deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); */ /* Chrome10-25,Safari5.1-6 */
    /* background: linear-gradient(135deg, #1d9166 0%,#06ad8c 46%,#157050 90%,#157050 90%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: #4ebadb;
    box-shadow: 1px 2px 3px #ccc;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9166', endColorstr='#157050',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    padding:0.5rem 1rem; 
}

#closeCrop {
    margin-top: 1rem;
    border-radius: 4px;
    cursor: pointer;
    border: 0px solid #000;
    background: #4ebadb;
    box-shadow: 1px 2px 3px #ccc;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d9166', endColorstr='#157050',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    padding:0.5rem 1rem; 
}
body.overflow {
	height: 100vh;
	overflow: hidden;
}
#capture{
	position: absolute;
    bottom: 0;
    z-index: 777;
    /* left: 150px; */
    /* bottom: -38px; */
    left: 214px;
    width: 83px;
    height: 30px;
    background: #7fc4d7;
    border: solid 1px #ccc;
    font-size: 15px;
}
.condau{
	width:  142px;
    position:  absolute;
    z-index:  4;
    /*top: 193px;
    left: 73px;*/
    top: 200px;
    left: 85px;
}
.condau5{
	    width: 142px;
    position: absolute;
    right: 300px;
     top: 450px;
    z-index: 4;
    display: none;
}
.condau2{
	    width: 195px;
    position: absolute;
    right: 245px;
    top: 425px;
    z-index: 4;
}
.condau3{
	    width: 240px;
    position: absolute;
   /*top: 600px;*/
   top: 500px;
    left: 535px;
    z-index: 4;
}
.namesign{
	position: absolute;
    bottom: 80px;
    right: 240px;
}
.namesign2{
	    border-bottom: 1px solid #ccc;
    padding: 0 9px;
    margin-bottom: 0;
    padding-top: 10px;
	position: absolute;
        /*top: 725px;*/
        top: 600px;
    left: 610px;
}
.condau4{
	    width: 200px;
    position: absolute;
    top: 360px;
    z-index: 4;
    left: 365px;
}
.answer-q{
	    padding: 5px 8px 5px;
    border-radius: 50%;
    border: 2px solid #000fbf;
    color: #000fbf;
}
.true-q{
	color: black;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}
/* css ket qua bai thi*/
.info-result{
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
	padding-bottom: 5%;
}
.logoresult{
	
}
.header-text{
	font-size: 14px;
	color: rgb(170,170,170);
}
.btn-inbaithi{
	background-color: rgb(16, 139, 177);
	 font-size: 16px;
    padding: 15px 30px 15px;
    color: #fff;
    border-radius: 30px;
    
    margin: 0;
   /*  position: absolute;
    margin-top: 2%;
    margin-bottom: 28px;
    margin-left: 30%; */
    float: right;
}
.btn-inbaithi:hover {
    background: #02627c;
    cursor: pointer;
        text-decoration: none;
}
.btn-inbaithi-footer:hover {
    background: #02627c;
    cursor: pointer;
        text-decoration: none;
}
.btn-inbaithi-footer
{
	padding: 15px 30px 15px;
	background-color: rgb(16, 139, 177);
    font-size: 16px;
    color: #fff;
    border-radius: 30px;
    box-shadow: 1px 2px 2px #ddd;
    margin: 0;
   /*  position: absolute;
    margin-top: 2%;
    margin-bottom: 28px;
    margin-left: 30%; */

}
.top-result{
	margin-bottom: 50px;
}
.tit-result{
	font-size: 24px!important;
	font-weight: bold;
	color: rgb(16,139,177);
	margin-bottom: 25px!important;
	    line-height: 35px!important;
	    text-transform: uppercase;
}
.tit-result span{
	font-size: 24px;
	font-weight: bold;
	color: rgb(16,139,177);

}
.nor-text{
	font-size: 16px;
	width: 400px;
	float: left;
}
.nor-text1{
	font-size: 16px;
	width: 400px;
	float: left;
}
.bol-text{
 font-size: 16px;
 font-weight: bold;
}
.name-text{
	font-size: 20px;
	text-transform: uppercase;
}
.info-cus p{
	line-height: 20px;
}
.info-cus{
	padding-bottom: 30px;
}
.tit-result-detail{
	position: relative;
	padding: 15px;
    background-color: #30223223;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px!important;
}
.question-as{
	font-size: 18px;
	font-weight: bold;
	color: rgb(16,139,177);
	text-transform: uppercase;
}
.info-result p{
	line-height: 24px;
	font-size: 16px;
}
.result-print{
	color: #fff;
}
.fa-check-circle{
	color: rgb(76,175,80);
	font-size: 18px!important;
}
.fa-times-circle {
	color: rgb(244,67,54);
	font-size: 18px!important;
}
.radio {
    padding-left: 20px; }
.radio label {
	width: 97%;
    display: inline-block;
    position: relative;
    padding-left: 5px; 
font-size: 16px;
line-height: 33px;}
.radio1 label {
   width: 20%!important;}
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    top: 7px;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; }
.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 13px;
    height: 13px;
    left: 3px;
    top: 10px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
    opacity: 0; }
.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }

.radio-primary input[type="radio"] + label::after {
    background-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; }
.footer-text{
	float: right;
    margin-top: 50px;
}
.questions1{
	padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #ececec;
        border-top: 0;
}
.pos-right{
	position: absolute;
    width: 10%;
    right: 0;
    top: 30%;
}
.pos-right p{
	outline: none;
	font-weight: normal;
	color: rgb(16, 139, 177);
	font-size: 11px!important;
	line-height: 5px!important;
}
/*end css ket qua bai thi*/
.formContent .tag .co {
    width: auto;
}
.formContent .tag .co input {
    width: auto;
}
.exportcl p{
	    font-size: 14px;
    line-height: 17px;
}