.info > h3 {color: #ae4983; margin: 0 auto 10px; text-transform: uppercase; text-align: center;  font-size: 15px;}

.info > h2 {margin: 0 auto 30px; font-weight: bold; font-size: 24px; text-transform: uppercase; font-style: italic; font-weight: bold; line-height: 1.5; text-align: center;}

.info > h2 > span {display: block;}

.info > p {margin: 0 0 30px 0; text-align: center; font-size: 16px;}

.info > .tag {margin: 0 auto 25px; text-align: center; font-size: 17px; text-transform: lowercase;}

.info > .tag span {display: inline-block; padding: 0 10px 0 0;}



#topVideo .txt {bottom: 12em;}

#topVideo .txt h2 {margin: 0 auto 30px;}



#about {position: relative;}

#about > img {opacity: 0.6;}

#about .info {position: absolute; left: 18%; top: 12%; width: 33%; z-index: 99;}

#about .info h2 {margin: 0 0 30px 0;}

#about .info p {margin: 0 0 50px 0; line-height: 2;}

#about .info .btnTransparent {text-align: left;}





#product {text-align: center;}

#product > .info {padding: 0 10px 200px; max-width: 980px; margin: 0 auto;}

#product > .info .lineBg {width: 32%;}

#product #label {max-width: 62%; margin: 0 auto 30px;}

#product #label.lineBg:before {border-top: 2px solid #cccccc;}



#product .video-image-gallery .slick-slide .inner {padding: 40px 15px 50px;}

#product .video-image-gallery .slick-slide .inner .caption {font-size: 16px; font-weight: bold; text-transform: uppercase;}

#product .video-image-gallery .slick-slide .inner .lineBg {width: 65%;}

#product .video-image-gallery .slick-slide .inner > div {position: relative; text-align: right;}

#product .video-image-gallery .slick-slide .inner > div > img {display: inline-block; width: 50%;}

#product .video-image-gallery .slick-slide .inner > div > .info {display: inline-block; width: 45%; display: none; transition: all 1s; padding: 0;}



#product .video-image-gallery .slick-slide .inner > div > .info > h2 {margin: 0 auto 10px; font-size: 14px; word-spacing: 0.2em;}

#product .video-image-gallery .slick-slide .inner > div > .info > h2 > span {display: block;}

#product .video-image-gallery .slick-slide .inner > div > .info > h3 {margin: 0 auto 5px; font-size: 10px;}

#product .video-image-gallery .slick-slide .inner > div > .info > p {text-align: justify; margin: 0 auto 15px; font-size: 10px;}

#product .video-image-gallery .slick-slide .inner > div > .info > .tag {margin: 0 auto 20px; font-size: 11px; text-transform: lowercase;}

#product .video-image-gallery .slick-slide .inner > div > .info > .btnTransparent a {padding: 6.5px 20px; font-size: 10px; transition: ease-in-out 0.2s;}

#product .video-image-gallery .slick-slide .inner > div > .info > .btnTransparent a:hover {background: #ae4983; color: #fff;}

#product .video-image-gallery .slick-slide .inner > div > .info .txt {text-align: center;}



#product .video-image-gallery .slick-slide.slick-active  .inner > div {text-align: center;}

#product .video-image-gallery .slick-slide.slick-current .inner {background: #fff; -webkit-box-shadow: 0px 0px 31px 0px rgba(173,173,173,1); -moz-box-shadow: 0px 0px 31px 0px rgba(173,173,173,1); box-shadow: 0px 0px 31px 0px rgba(173,173,173,1);}

#product .video-image-gallery .slick-slide.slick-current .inner .caption {display: none;}

#product .video-image-gallery .slick-slide.slick-current .inner .lineBg {width: 65%;}

#product .video-image-gallery .slick-slide.slick-current .inner > div {text-align: right !important;}

#product .video-image-gallery .slick-slide.slick-current .inner > div > img {position: absolute; left: 0; top: 0; z-index: -1; width: 52%;}

#product .video-image-gallery .slick-slide.slick-current .inner > div > .info {display: inline-block; font-size: 10px;}

#product .video-image-gallery .slick-slide.slick-current .inner > div > .info .txt {text-align: center;}





#speciality {background: #efeeec; padding: 200px 0 50px;}

#speciality .col_l {float: left; width: 49%; text-align: center;}

#speciality .col_l .label {margin: 0 auto 30px; max-width: 125px;}

#speciality .col_l .info .lineBg {max-width: 65%}

#speciality .col_l .info .lineBg span {background: #efeeec;}

#speciality .col_l .info p {text-align: center;}

#speciality .col_r {float: right; width: 49%; padding: 14% 0 0;}







#media {padding: 85px 0;}

#media .inner {max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 10px;}

#media .inner .info > p {text-align: center;}

#media .inner .info .lineBg {width: 32%;}



#media .listNews {max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 10px;}

#media .listNews ul {margin: 0 auto 30px;}

#media .listNews ul li {float: left; width: 31.7%; margin: 0 2.45% 0 0;}

#media .listNews ul li:nth-of-type(3n) {margin: 0 0 0 0;}

#media .listNews .card h4 {font-weight: bold; font-size: 18px; margin: 0 auto 10px;}

#media .listNews .card a {display: block; overflow: hidden;}

#media .listNews .card a img {transition: transform 3s; transition: -webkit-transform 3s;}

#media .listNews .card a:hover img {transform:scale(1.3); -webkit-transform:scale(1.3); -moz-transform:scale(1.3); -ms-transform:scale(1.3);}

#media .listNews .card a:hover {color: #ae4983;}

#media .listNews .card .cardBlock {margin: 20px auto 0;}

#media .listNews .card .cardBlock .date {font-size: 12px; margin: 0 auto 10px;}

#media .listNews .card .cardBlock .desc {margin: 0 auto 10px;}

#media .listNews .card .cardBlock .viewMore a {display: inline-block; color: #fff; background: url(../images/common/readmore.jpg) no-repeat; padding: 2px 30px 2px 15px; background-size: 100% 100%; background-position: center;}

#media .listNews .card .cardBlock .viewMore a:hover {opacity: 0.8;}





#social {position: relative;}

#social::after {content: ""; position: absolute; background: url(../images/top/intro_bg.jpg) repeat; top: 9%; left: 0; right: 0; bottom: 0; width: 100%; z-index: 1;}



#social .inner {max-width: 1240px; width: 100%; margin:0 auto 0; padding: 0 10px;}



#social #instagram {position: relative; z-index: 2;}

#social #instagram .col_l {float: left; width: 31%; background: #fff;}

#social #instagram .col_l .info {color: #808080; padding: 20px; text-align: center;}

#social #instagram .col_l .info h4 span {font-size: 14px;  text-transform: uppercase; display: inline-block; border-top: 1px solid #ccc; padding: 15px 0 0;}

#social #instagram .col_l .info .social {padding: 0; margin: 0;}

#social #instagram .col_l .info .social:before {display: none;}

#social #instagram .col_l .info .social a {display: inline-block; font-size: 30px; margin: 0 20px 0 0; line-height: 1.7;}

#social #instagram .col_l .info p {color: #000; margin: 50px auto 40px; font-style: italic;}

#social #instagram .col_r {float: right; width: 66%;}





#social #instagram .col_r #instafeed a {float: left; width: 48%; margin: 0 4% 4% 0;}

#social #instagram .col_r #instafeed a:nth-of-type(2n) {margin: 0 0 4% 0;}





#social #instagram .col_r ul li {float: left; width: 48%; margin: 0 4% 4% 0;}

#social #instagram .col_r ul li:nth-of-type(2n) {margin: 0 0 4% 0;}

#social #instagram .col_r ul li a {display: block; position: relative;}

#social #instagram .col_r ul li a:hover .mask {opacity: 0.5;}

#social #instagram .col_r ul li a:hover .txt {display: block;}

#social #instagram .col_r ul li .mask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: all 1s;}

#social #instagram .col_r ul li .txt {position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); padding: 50px; text-align: center; color: #fff; display: none;}

#social #instagram .col_r ul li .txt p > span {padding: 0 20px 0 0; font-size: 25px; }

#social #instagram .col_r ul li .txt p > span >i {padding: 0 5px 0 0;}



#social #phuquoc {background: url(../images/top/intro_img.jpg) no-repeat; background-position: center bottom; padding: 100px 0 400px; position: relative; z-index: 2;}

#social #phuquoc .col_l {float: left; width: 50%;}

#social #phuquoc .col_r {float: right; width: 50%;}

#social #phuquoc .col_r .lineBg {width: 70%;}

#social #phuquoc .col_r .lineBg span {background: url(../images/top/intro_bg.jpg);}

#social #phuquoc .col_r .info .btnTransparent > a {padding: 8px 60px;}

#social #phuquoc .col_r ul {margin: 0 0 35px 0;}

#social #phuquoc .col_r ul li {float: left; width: 25%; padding: 20px; background: #fff; margin: 0 12.5% 0 0; text-align: center;}

#social #phuquoc .col_r ul li:nth-of-type(3){margin: 0 0 0 0;}

#social #phuquoc .col_r ul li:nth-of-type(1) i {color: #d17600;}

#social #phuquoc .col_r ul li:nth-of-type(2) i {color: #006198;}

#social #phuquoc .col_r ul li:nth-of-type(3) i {color: #008369;}

#social #phuquoc .col_r ul li span {display: block;}

#social #phuquoc .col_r ul li span:nth-of-type(2) {font-weight: bold;}

#social #phuquoc .col_r ul li span i {font-size: 24px;}



#sight {padding: 80px 0 0; overflow: hidden;}

#sight .info .lineBg {max-width: 20%;}

#sight .img {position: relative;}



#sight .img .shape {position: absolute; right: -17%; top: 0; width: 65%; height: 100%; background: rgba(111,111,111,0.5); transform-origin: bottom left; transform: skew(25deg, 0deg); -webkit-transform: skew(25deg, 0deg); -moz-transform: skew(25deg, 0deg); -o-transform: skew(25deg, 0deg); z-index: 10;}

#sight .img .txt {position: absolute; right: 20%; top: 20%; width: 29%; color: #fff; z-index: 11;}

#sight .img .txt h2 {text-align: left;}

#sight .img .txt .btnTransparent {text-align: left;}

#sight .img .txt .btnTransparent a {border: 1px solid #fff; color: #fff; padding: 8px 85px;}



/*pop-up*/

.popup {

    width:100%;

    height:100%;

    display:none;

    position:fixed;

    top:0px;

    left:0px;

    background:rgba(0,0,0,0.75);

    z-index: 9999;

}

 

/* Inner */

.popup-inner {

    position:absolute;

    top:50%;

    left:50%;

    -webkit-transform:translate(-50%, -50%);

    transform:translate(-50%, -50%);

    box-shadow:0px 2px 6px rgba(0,0,0,1);

    border-radius:3px;

    background:#fff;    

    

}

 

/* Close Button */

.popup-close {

    width:30px;

    height:30px;

    padding-top:4px;

    display:inline-block;

    position:absolute;

    top:0px;

    right:0px;

    transition:ease 0.25s all;

    -webkit-transform:translate(50%, -50%);

    transform:translate(50%, -50%);

    border-radius:1000px;

    background:rgba(0,0,0,0.8);

    font-family:Arial, Sans-Serif;

    font-size:20px;

    text-align:center;

    line-height:100%;

    color:#fff;

}

 

.popup-close:hover {

    -webkit-transform:translate(50%, -50%) rotate(180deg);

    transform:translate(50%, -50%) rotate(180deg);

    background:rgba(0,0,0,1);

    text-decoration:none;

}



/*=====================

		MEDIA

======================*/



@media only screen and (max-width: 1366px){



	#topVideo .txt {bottom: 7em;}

	

	#about {margin: 0 auto 100px;}	

	#about .info h2 {margin: 0 auto 20px;}

	#about .info {left: 5%; width: 50%; top: 3%;}

	#about .info p {margin: 0 auto 20px;}

	

	#product .video-image-gallery .slick-slide .inner {padding: 10px 10px 30px;}

	#product .video-image-gallery .slick-slide .inner .caption {margin: 20px 0 0 0;}

	#product .video-image-gallery .slick-slide .inner > div > img {width: 50%;}

	#product .video-image-gallery .slick-slide .inner > div > .info {top: 0;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .lineBg span img {width: 15px;}

	#product .video-image-gallery .slick-slide .inner > div > .info > h2 > span {display: inline;}

	#product .video-image-gallery .slick-slide .inner > div > .info {width: 50%;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .tag {margin: 0 0 20px 0;}

	

	#product .video-image-gallery .slick-slide.slick-current .inner > div > img {width: 50%; top: 10%;}



	#sight .img .txt {right: 10%; top: 15%; width: 35%;}

	#sight .img .txt h2 {font-size: 1.7vw;}

	

	#social #phuquoc .col_r ul li {width: 30%; margin: 0 5% 0 0;}

}





@media only screen and (max-width: 1024px){

	#about {padding: 80px 0 0; margin: 0 auto 80px;}

	#about .info {position: static; width: 100%; padding: 0 10px;}

	#about .info > h2 > img {width: 60%;}

	#about .info > .btnTransparent {text-align: center;}





	#product {padding: 0 100px;}

	#product > .info {padding: 0 10px 70px;}

	

	#product #label.lineBg span img {width: 25%;}

	

	

	#product .video-image-gallery .slick-slide .inner {padding: 50px 20px;}

	#product .video-image-gallery .slick-slide .inner .caption {display: none;}

	#product .video-image-gallery .slick-slide .inner > div > img {position: absolute; top: 10%; left: 0; width: 35%;}

	#product .video-image-gallery .slick-slide .inner > div > .info {width: 60%; display: inline-block;}

	#product .video-image-gallery .slick-slide .inner > div > .info > h3 {font-size: 15px;}

	#product .video-image-gallery .slick-slide .inner > div > .info > h2 {font-size: 24px;}

	#product .video-image-gallery .slick-slide .inner > div > .info > h2 > span {display: block;}

	#product .video-image-gallery .slick-slide .inner > div > .info > p {font-size: 14px;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .lineBg span {display: inline-block;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .lineBg span img {width: 35px;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .tag {font-size: 17px;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .btnTransparent a {font-size: 16px;}



	#product .video-image-gallery .slick-slide.slick-current .inner > div > img {width: 35%;}

	#product .video-image-gallery .slick-slide.slick-current .inner > div > .info {width: 60%;}



	.video-buttons {display: none;}



	#speciality {padding: 50px 0;}



	#social #phuquoc .col_l {width: 45%;}

	#social #phuquoc .col_r {width: 55%;}





	#sight .img .txt {right: 3%; top: 5%; width: 45%;}

	#sight .img .txt h2 {font-size: 18px; margin: 0 0 15px;}

	#sight .img .txt h2 span {display: block;}

	#sight .img .txt p {margin: 0 0 15px;}



}



@media only screen and (max-width: 860px){



	#product {padding: 0 30px;}

	#product .video-image-gallery .inner {padding: 10px 10px 20px;}

	#product .video-image-gallery .inner > div > .info {width: 100%;}

	#product .video-image-gallery .slick-slide .inner > div {text-align: center !important;}

	#product .video-image-gallery .slick-slide .inner > div > img {position: static; width: 50%;}

	#product .video-image-gallery .slick-slide .inner > div > .info {width: 100%; margin: 20px auto 0;}

	#product .video-image-gallery .slick-slide.slick-current .inner > div {text-align: center !important;}

	#product .video-image-gallery .slick-slide.slick-current .inner > div > img {position: static; width: 50%;}

	#product .video-image-gallery .slick-slide.slick-current .inner > div > .info {width: 100%; margin: 20px auto 0;}

	

	



	#speciality .col_l {float: none; width: 100%;}

	#speciality .col_r {float: none; width: 100%; padding: 2% 0 0; text-align: center;}



	#social #instagram .col_l {float: none; width: 100%; margin: 0 auto 20px;}

	#social #instagram .col_l .info {padding: 20px 20px 40px;}

	#social #instagram .col_r {float: none; width: 100%;}

	#social #phuquoc .col_r ul li {padding: 10px;}

	#social #phuquoc .col_r ul li span {font-size: 12px;}





	#sight .img .txt {position: static; color: #000; width: 100%; text-align: center; padding: 20px 10px;}

	#sight .img .txt h2 {text-align: center;}

	#sight .img .txt p {text-align: center;}

	



	#sight .img .txt .btnTransparent {text-align: center;}

	#sight .img .txt .btnTransparent > a {border: 2px solid #ae4983; color: #000; }

	#sight .img .txt .btnTransparent > a:hover {color: #fff; background: #ae4983;}

	#sight .img .shape {display: none;}

}



@media only screen and (max-width: 736px){	

	

	.info > h2 {font-size: 16px;}

	.info > p {font-size: 14px;}

	.info > .tag {font-size: 14px;}

		

	#about {padding: 50px 0 0; margin: 0 auto;}

	#about .info p {line-height: 1.7;}



	#product {padding: 50px 0 0;}

	#product > .info {padding: 0 10px 25px}

	#product #label.lineBg:before {width: 60%;}





	#social::after {top: 0;}

	#social #instagram {padding: 10px 0;}

	#social #phuquoc {padding: 30px 0 400px;}

	#social #phuquoc .col_l {float: none; width: 100%; text-align: center; display: none;}

	#social #phuquoc .col_r {float: none; width: 100%; margin: 0 auto 40px;}

	

	#product .video-image-gallery .slick-slide.slick-current .inner {padding: 0;}

	#product .video-image-gallery .slick-slide .inner {padding: 0;}

	#product .video-image-gallery .slick-slide.slick-current .inner > div > .info {display: none;}

	#product .video-image-gallery .slick-slide .inner > div > .info {display: none;}





	#product .video-image-gallery .slick-slide .inner > div > img {width: auto;}

	#product .video-image-gallery .slick-slide.slick-current .inner > div > img {width: auto;}

	#product .video-image-gallery .slick-slide .inner {box-shadow: none;}

	#product .video-image-gallery .slick-slide.slick-current .inner	{box-shadow: none;}

	

	#media {padding: 50px 0;}

	#media .inner .info > p {text-align: justify;}

	

	#media .listNews {padding: 0;}

	#media .listNews ul li {float: none; width: 100%; padding: 20px 10px;}

	#media .listNews ul li:nth-of-type(2n+1) {background: #ededed;}

	#media .listNews .card .cardBlock .viewMore {text-align: right;}

	#media .listNews .card h4 {font-size: 14px;}

	

	#sight {padding: 50px 0 0;}

	#sight .img .txt .btnTransparent {margin: 25px 0;}

	#sight .img .txt {padding: 0 10px;}

	#sight .img .txt h2 {display: none;}

	#sight .img .txt p {text-align: justify;}

	

	#speciality {margin: 30px auto 0;}

	#speciality .col_l .info p {text-align: justify;}



	.popup-inner {position:absolute; left:20%; top:50%; -webkit-transform:translate(50%, -50%); transform:translate(-12%, -50%);}

}





@media only screen and (max-width: 480px){

	#topVideo .txt {bottom: 2em;}

	.info > h2 {font-size: 3.7vw; margin: 0 auto 15px !important;}

	.lineBg {max-width: 100% !important; width: 50% !important;}

	.lineBg span > img {width: 25px !important;}



	

	#product #label.lineBg {width: 98% !important;}

	#product #label.lineBg span img {width: 21% !important;}

	#product .video-image-gallery .inner > div > .info > h2 {font-size: 18px;}

	

	#product .video-image-gallery .slick-slide .inner > div > .info > h2 {font-size: 18px;}

	

	

	#about .info > h2 > img {width: 100%;}



		

	#social #instagram .col_r ul li .txt {padding: 20px;}

	#social #instagram .col_r ul li .txt p:nth-of-type(1) {display: none;}

	#social #instagram .col_r ul li .txt p span {font-size: 14px;}

	#social #phuquoc .col_r ul li {padding: 20px 5px;}

	



	#media .inner ul li {float: none; width: 100%; margin: 0 0 20px 0 !important;}

	



	

	footer ul .parent a {font-size: 14px;}

	footer ul li {width: 48%; margin: 0 4% 4% 0;}

	footer ul li:nth-of-type(2n) {margin: 0 0 4% 0 !important;}

	footer ul li:nth-of-type(2n+1) {clear: both;}

	footer ul li a {font-size: 14px;}

}



@media only screen and (max-width: 380px){

	#sight .img .txt h2 span {display: inline;}

	#product .video-image-gallery .slick-slide .inner > div > .info > .btnTransparent a {font-size: 12px;}

    #product .video-image-gallery .slick-slide.slick-current .inner > div > .info > .btnTransparent a {font-size: 12px;}

}



@media only screen and (max-width: 320px){

	#social #instagram .col_r ul li {float: none; width: 100%; margin: 0 0 20px 0 !important;}	

	#social #phuquoc .col_r ul li {float: none; width: 100%; margin: 0 0 20px 0 !important; padding: 5px;}

}