*{
	margin: 0;
	padding: 0;
}

@font-face {
  font-family: 'Glyphicons Halflings';
}

@font-face {
	font-family:"Flamenco";
	src:url("../fonts/flamenco/UTM-Niagara.ttf") format("truetype");
	font-weight:normal;
	font-style:normal;
}

html, body{
	background: #FFF6F4;
}

.wrapper{
	padding-left: 10px;
	padding-right: 10px;
}

.logo{
	text-align: center;
	padding: 46px 0px;
	position: relative;
}

.logo img{
	display: inline-block;
	margin: 0 auto;
	width: 30%;
}

.logo .line-logo{
	height: 15px;
	border-top:4px solid #C7C7C7;
	border-bottom:4px solid #C7C7C7;
	width: 33%;
	position: absolute;
	top: 63%;
}

.logo .line-logo:first-child{
	left: 0;
}

.logo .line-logo:last-child{
	right: 0;
}

.title-site{
	margin-top: 100px;
	font-size: 70px;
	display: block;
	text-align: center;
	font-weight: bold;
	color: #30114A;
}

p{
	font-size: 20px;
	font-weight: bold;
	color: #050505;
	text-align: justify;
	font-family: 'Alegreya', serif;
}

.header{
	text-align: center;
}

.sapo{
	display: block;
	width: 70%;
	text-align: center;
	margin: 0 auto;
}

.sapo h1{
	font-family: 'Flamenco', serif;
	font-size: 120px;
	color: #17447A;
	text-align: center;
}

.sapo p{
	font-family: 'Alegreya SC', serif;
	font-style: italic;
}

/*=========================================Slider=========================================*/
	.carousel-fade .carousel-inner .item {
	  opacity: 0;
	  transition-property: opacity;
	}

	.carousel-fade .carousel-inner .active {
	  opacity: 1;
	}

	.carousel-fade .carousel-inner .active.left,
	.carousel-fade .carousel-inner .active.right {
	  left: 0;
	  opacity: 0;
	  z-index: 1;
	}

	.carousel-fade .carousel-inner .next.left,
	.carousel-fade .carousel-inner .prev.right {
	  opacity: 1;
	}

	.carousel-fade .carousel-control {
	  z-index: 2;
	} 
	@media all and (transform-3d), (-webkit-transform-3d) {
		.carousel-fade .carousel-inner > .item.next,
		.carousel-fade .carousel-inner > .item.active.right {
		  opacity: 0;
		  -webkit-transform: translate3d(0, 0, 0);
				  transform: translate3d(0, 0, 0);
		}
		.carousel-fade .carousel-inner > .item.prev,
		.carousel-fade .carousel-inner > .item.active.left {
		  opacity: 0;
		  -webkit-transform: translate3d(0, 0, 0);
				  transform: translate3d(0, 0, 0);
		}
		.carousel-fade .carousel-inner > .item.next.left,
		.carousel-fade .carousel-inner > .item.prev.right,
		.carousel-fade .carousel-inner > .item.active {
		  opacity: 1;
		  -webkit-transform: translate3d(0, 0, 0);
				  transform: translate3d(0, 0, 0);
		}
	} 
	
	.carousel-inner>.item>a>img, .carousel-inner>.item>img {
		width: 100%;
	}
	
	/* .carousel-fade .carousel-inner .item{ */
		/* opacity: 1; */
	/* } */
	
	/* .carousel-inner>.item{ */
		/* display: block; */
	/* } */
	
	.carousel-caption{
		text-shadow: 0 1px 4px rgba(0,0,0,.9);
		font-size:17px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		text-align: center;
	}
	
	.carousel-caption{
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.3);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}
	
	.carousel-caption p{
		color: #fff;
		text-align: justify;
		padding: 10px;
	}
	
	.carousel-caption p{
		text-align: center;
		color: #fff;
	}
	
	.carousel-caption h3 {
		color: #fff;
		font-size: 30px;
	}
	
	
	#myCarousel, #myCarousel1, #myCarousel2{
		margin-bottom: 10px;
	}
	
	#myCarousel .carousel-indicators, #myCarousel1 .carousel-indicators, #myCarousel2 .carousel-indicators{
		bottom: 0;
	}
/*=========================================End slider=========================================*/


/*=========================================Chart=========================================*/
@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}
/*=========================================End Chart=========================================*/

.row-content{
	margin: 5px 146px 0;
}

.row-content-full{
	margin: 0;
}

.row-content-full{
	
}

.row-content-full .text-content{
	margin: 0px 146px;
}

.title-block{
	text-align: center;
}


.title-block, .su-title-block{
	color: #30114A;
	font-size: 35px;
}

.su-title-block{
	text-align: center;
	display: inline-block;
	width: 100%;
	font-size: 25px;
}

.text-content p{
	font-size: 20px;
	font-weight: normal;
	color: #050505;
	text-align: justify;
}

.media-content{
	text-align: center;
}

.media-chart{
	width: 100%;
}

.media-content p, .media-img p, .media-img-info p, .media-img-full p{
	color: #30114A;
	font-style: italic;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	padding: 5px;
}

.media-img, .media-img-info, .media-img-full{
	width: 60%;
	margin: 0 auto;
	margin-bottom: 12px;
}


.media-img-full, .full-side{
	width: 100%;
}

.media-img img, .media-img-info img, .media-img-full img{
	width: 100%;
}

.media-img p{
	width: 100%;
}


/*=================Blockquote=====================*/

.stated-content blockquote{
	background: #fff;
	padding: 30px;
	border-radius: 5px;
	box-shadow: 
		inset 0 2px 0 rgba(188, 147, 200, 0.7), 
		-5px -4px 25px rgba(0, 0, 0, 0.3);
	display: inline-block;
}

.stated-content blockquote:after, 
.stated-content blockquote:before  {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.stated-content blockquote:after  {
	border-top-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
}

.stated-content blockquote:before {
	border-top-color: rgba(0,0,0,0.01);
	border-width: 11px;
	margin-left: -11px;
}

.stated-content blockquote p {
	font-family: 'Alegreya', serif;
	font-size: 24px;
	color: #000;
	font-weight: 400;
	line-height: 40px;
	font-style: italic;
	position: relative;
}

.stated-content .mb-attribution {
	position: relative;
}

.mb-attribution{
	padding-top: 10%;
}

.stated-content .mb-thumb {
	display: block;
	width: 200px;
	height: 200px;
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 
		inset 1px 1px 4px rgba(0,0,0,0.5),
		0 2px 3px rgba(0,0,0,0.6);
	margin: 0 auto;
}

#stated-content-1 .mb-thumb{
	background: url(../images/tranquanghoai.jpg) no-repeat center center;
	background-size: cover;
}


.stated-content .mb-author{
	font-family: 'Alegreya SC', serif;
	font-weight: 700;
	font-size: 18px;
	color: #206FB7;
	text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

.stated-content cite a{
	font-family: 'Alegreya', serif;
	font-weight: 700;
	font-style: italic;
	color: #206FB7;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.stated-content cite a:hover{
	color: #206FB7;
	text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
/*=================End blockquote=====================*/


.footerbox {
  background: #17447A;
  color: white;
  padding-left: 10%; padding-right: 10%; padding-top: 20px; padding-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
}

.back-to-top{
    cursor: pointer;
    position: fixed;
    bottom: 70px;
    right: 20px;
	z-index: 20;
	background-image: url('../images/home.png');
	background-position: center;
	background-size: cover;
	height: 4%;
    width: 2%;
}

/*only Pc*/
@media only screen 
and (min-device-width : 1024px) {
	
}


/*iPhone 6 in ngang*/
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
	.carousel-caption{
		padding-bottom: 0;
		padding-top: 0;
	}
	
	.carousel-caption p{
		padding: 3px;
	}
	
	.media-img, .media-img-info{
		width: 100%;
	}
	
	.title-block{
		font-size: 20px;
		margin-top: 0;
	}
	
	.logo{
		padding: 25px 0px;
		border-bottom: 4px solid #634A74;
	}

	.logo .line-logo{
		top: 53%;
		height: 6px;
		border-top:2px solid #C7C7C7;
		border-bottom:2px solid #C7C7C7;
	}
	
	.sapo{
		width: 100%;
	}
	
	.row-content{
		margin: 32px 0 0;
	}
	
	.date {
		left: 0;
		right: unset;
	}
}

/*iPhone 6 in doc*/
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
	.carousel-caption{
		padding-bottom: 0;
		padding-top: 0;
	}
	
	.carousel-caption p{
		padding: 3px;
	}
	
	.media-img, .media-img-info{
		width: 100%;
	}
	
	.title-block{
		font-size: 20px;
		margin-top: 0;
	}
	
	.logo{
		padding: 25px 0px;
		border-bottom: 4px solid #634A74;
	}

	.logo .line-logo{
		top: 53%;
		height: 6px;
		border-top:2px solid #C7C7C7;
		border-bottom:2px solid #C7C7C7;
	}
	
	.sapo{
		width: 100%;
	}
	
	.row-content{
		margin: 32px 0 0;
	}
	
	.date {
		left: 0;
		right: unset;
	}
}

/*iPhone 5 & 5S in ngang*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
	.carousel-caption{
		padding-bottom: 0;
		padding-top: 0;
	}
	
	.carousel-caption p{
		padding: 3px;
	}
	
	.media-img, .media-img-info{
		width: 100%;
	}
	
	.title-block{
		font-size: 20px;
		margin-top: 0;
	}
	
	.logo{
		padding: 25px 0px;
		border-bottom: 4px solid #634A74;
	}

	.logo .line-logo{
		top: 53%;
		height: 6px;
		border-top:2px solid #C7C7C7;
		border-bottom:2px solid #C7C7C7;
	}
	
	.sapo{
		width: 100%;
	}
	
	.row-content{
		margin: 32px 0 0;
	}
	
	.date {
		left: 0;
		right: unset;
	}
}

/*iPhone 5 & 5S in doc*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
	.carousel-caption{
		padding-bottom: 0;
		padding-top: 0;
	}
	
	.carousel-caption p{
		padding: 3px;
	}
	
	.media-img, .media-img-info{
		width: 100%;
	}
	
	.title-block{
		font-size: 20px;
		margin-top: 0;
	}
	
	.logo{
		padding: 25px 0px;
		border-bottom: 4px solid #634A74;
	}

	.logo .line-logo{
		top: 53%;
		height: 6px;
		border-top:2px solid #C7C7C7;
		border-bottom:2px solid #C7C7C7;
	}
	
	.sapo{
		width: 100%;
	}
	
	.row-content{
		margin: 32px 0 0;
	}
	
	.date {
		left: 0;
		right: unset;
	}
}

/*iPad in ngang*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
}


/*iPad in doc*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
}

/*iPad 3,4 in portrait & landscape ngang*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
	
}


/*iPad 3,4 in portrait & landscape doc*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
	
}