@charset "utf-8";
/* font */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.eot');
  src: url('../fonts/Lato-Regular.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../fonts/Lato-Regular.woff2') format('woff2'), 
  url('../fonts/Lato-Regular.woff') format('woff'), 
  url('../fonts/Lato-Regular.ttf') format('truetype'), 
  url('../fonts/Lato-Regular.svg#Latoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato-Bold';
  src: url('../fonts/Lato-Bold.eot');
  src: url('../fonts/Lato-Bold.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../fonts/Lato-Bold.woff2') format('woff2'), 
  url('../fonts/Lato-Bold.woff') format('woff'), 
  url('../fonts/Lato-Bold.ttf') format('truetype'), 
  url('../fonts/Lato-Bold.svg#Lato-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato-Light';
  src: url('../fonts/Lato-Light.eot');
  src: url('../fonts/Lato-Light.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../fonts/Lato-Light.woff2') format('woff2'), 
  url('../fonts/Lato-Light.woff') format('woff'), 
  url('../fonts/Lato-Light.ttf') format('truetype'), 
  url('../fonts/Lato-Light.svg#Lato-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
.bold{ font-family: 'Lato-Bold';}.text-black{color:black !important}
/* CSS Document */
html{ font-size:16px;font-family: 'Lato';}
.body-page{ float:left; position:relative; overflow:hidden; width:100%; }
a {color:#000 ;	text-decoration: none; -moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out;}
a:hover {	color: #c4261d; text-decoration:none}
p{ text-align:justify}
h1,h2,h3,h4,h5,h6{ font-size:unset; margin:0}
.inner,.container-page { margin: 0 auto; width:100%; padding: 0 5%; float:left; position:relative}
.relative {	position: relative;}
.right {	float: right;}
.left {	float: left;}

.flex{display: flex;vertical-align: middle;align-items: center;}
.flex-center{display: flex;vertical-align: middle;align-items: center; justify-content: center;}
.flex-right{display: flex;vertical-align: middle;align-items: center; justify-content:right;}
.flex-table{display: flex; flex-direction: column}
 img{ max-width:100%}img.img-responsive{ display:unset} 
/*index*/
.fixtop {position: fixed !important; top: 0 !important ; width: 100%; background: rgba(255,255,255,.95) !important;  z-index: 99; color:white}
.fixtop #cssmenu .pull-right > ul > li > a{color:black}
.fixtop #cssmenu .pull-right > ul > li:hover > a,.fixtop #cssmenu .pull-right>ul>li.active>a{color:#f7941d}
.icon-top{ display:block !important; position:fixed; right:15px; bottom:15px; z-index:99}
/* top */
.banner img{ width:100%}
/*content*/
.pro-new-hot{ float:left; width:100%; background: url(../images/pattent-blue-one.jpg); padding:60px 0 30px;}
.pro_hot_tab,.pro_new_tab{ float:left; width:100%; position:relative; margin:15px 0}
.zoom-img{ position:relative; overflow:hidden; float:left; width:100%}.zoom-img img{ transform:scale(1);-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out;}.zoom-img:hover img{ transform:scale(1.1);-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out;}
.caption-pro{font:1rem/1.2rem "Lato-Bold"; text-transform:uppercase; float:left; width:100%; margin:10px 0; padding:10px 0}
.pro-new-hot .owl-carousel .owl-controls .owl-nav .owl-prev, .pro-new-hot .owl-carousel .owl-controls .owl-nav .owl-next{ position:unset}
.pro-new-hot .owl-nav{display: flex;lign-items: center;justify-content: center;}
.pro-color-cam,.pro-color-xanh,.pro-color-xanhla{ float:left; width:100%; position:relative; }
.pad-pro-list-left-home{ padding:60px 60px 60px 5%}.pad-pro-list-right-home{ padding:60px 5% 60px 60px}
.pro-color-cam{ background:url(../images/cam-bg.jpg);}
.pro-color-xanh{ background:url(../images/xanh-bg.jpg);}
.pro-color-xanhla{ background:url(../images/xanhla-bg.jpg);}
.caption_pro_color{ padding:5%;min-height:555px; color:white}.caption_pro_color h3{font:2rem/2.2rem "Lato-Bold"; text-transform:uppercase; margin-bottom:15px}.caption_pro_color p{ text-align:unset; font-size:1.2rem}
.price{ float:left; width:100%; left:0; bottom:0; padding:7px 5px 5px; background:#d4a10a;font:1.6rem/1.6rem "Lato-Bold"; color:white; position:relative; z-index:2; overflow:hidden;}
.price:after { border-bottom: 50px solid white; border-left: 50px solid transparent; height: 0; width: 65px; position:absolute; z-index:1; right:0; bottom:0;content:''; position:absolute; z-index:2;-moz-transition:0.3s ease-in-out; -webkit-transition:0.3s ease-in-out;	-ms-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
.price:before{width: 0; height: 0;  border-top: 10px solid transparent; border-left: 12px solid #d4a10a; border-bottom: 10px solid transparent; content:''; position:absolute; z-index:3; top:10px; right:12px;-moz-transition:0.3s ease-in-out; -webkit-transition:0.3s ease-in-out;	-ms-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
a:hover .price:after {-moz-transition:0.3s ease-in-out; -webkit-transition:0.3s ease-in-out;	-ms-transition:0.3s ease-in-out; transition:0.3s ease-in-out; transform:translateX(100px)}a:hover .price:before{border-left: 12px solid #ffffff; right:5px;-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out;}

/* Menu*/
.menu{width:100%; height:108px; background:rgba(0,0,0,.3); position:absolute; top:30px; left:0; z-index:9999;}
.logo{position:relative;z-index:123;float:left;}
nav{position:relative;width:100%;margin:0 auto;}
.pull-right{ float:right;	right: 0;  left: auto; padding-right:3%}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; margin:0; padding:0}
#cssmenu:after,#cssmenu .pull-right > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:'Lato';}
#cssmenu .pull-right > ul > li{float:left}
#cssmenu .pull-right > ul > li > a{padding:46px 15px;font-size:1rem;text-decoration:none;color:#fff; text-transform:uppercase}
#cssmenu .pull-right > ul > li:hover > a,#cssmenu ul li.active a{color:#f7941d}
#cssmenu .pull-right > ul > li:hover,#cssmenu .pull-right ul li.active:hover,#cssmenu .pull-right ul li.active,#cssmenu .pull-right ul li.has-sub.active:hover {color:#F03 !important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu .pull-right > ul > li.has-sub > a{padding-right:30px;}
#cssmenu .pull-right > ul > li.has-sub > a:after{position:absolute;top:56px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu .pull-right > ul > li.has-sub > a:before{position:absolute;top:53px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu .pull-right > ul > li.has-sub:hover > a:before{top:35px;height:0}
#cssmenu .pull-right ul ul{position:absolute;left:-9999px}
#cssmenu .pull-right ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#fff;transition:all .25s ease}
#cssmenu .pull-right ul ul li:hover{}
#cssmenu .pull-right li:hover > ul{left:auto}
#cssmenu .pull-right li:hover > ul > li{height:auto}
#cssmenu .pull-right ul ul ul{margin-left:100%;top:0}
#cssmenu .pull-right ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:16px 15px 16px ;min-width:220px;font-size:14px;text-decoration:none;color:#333; font-family:'Lato';}
#cssmenu .pull-right ul ul li:last-child > a,#cssmenu .pull-right ul ul li.last-item > a{border-bottom:0}
#cssmenu .pull-right ul ul li:hover > a,#cssmenu .pull-right ul ul li a:hover{color:#fff}
#cssmenu .pull-right ul ul li.has-sub > a:after{position:absolute;top:21px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu .pull-right ul ul li.has-sub > a:before{position:absolute;top:18px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu .pull-right ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu .pull-right ul ul li.has-sub:hover,#cssmenu .pull-right ul li.has-sub ul li.has-sub ul li:hover{background:#111242;}
#cssmenu .pull-right ul ul li:hover,#cssmenu .pull-right ul li ul li ul li:hover{background:#f7941d;}
#cssmenu .pull-right ul ul ul li.active a{border-left:1px solid #333}
#cssmenu .pull-right > ul > li.has-sub > ul > li.active > a,#cssmenu .pull-right > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:991.98px){
.banner .owl-nav button{position: absolute;top: calc(50% - 17px)}
.banner .owl-nav button.owl-prev{left: 15px}  
.banner .owl-nav button.owl-next{right: 15px}  
.pro_item_right .owl-nav button{position: absolute; left: 50%}
.pro_item_right .owl-nav button.owl-next{margin-left: 0px}
.pro_item_right .owl-nav button.owl-prev{margin-left: -50px}
.pro_item_left .owl-nav button{position: absolute; right: 50%}
.pro_item_left .owl-nav button.owl-prev{margin-right: 0px}
.pro_item_left .owl-nav button.owl-next{margin-right: -50px}
.logo{position:absolute;top:0;left: 0;width:100%;height:70px;text-align:center;padding:0 ;float:none; background:#fff !important }.logo img{ height:70px}
.logo2{display:none}
.menu{ position:relative; top:0; height:70px}
nav{width:100%;}
.pull-right{ padding-right:0; width:100%; max-height:560px; overflow-x:scroll}
#cssmenu .pull-right > ul > li > a{color:#333}
#cssmenu{width:100%}
#cssmenu .pull-right ul{width:100%;display:none; margin-top:65px}
#cssmenu .pull-right ul li{width:100%;border-top:1px solid #cdcdcd; background:#f8f8f8}
#cssmenu .pull-right ul li:hover{background:#c4d3eb;}
#cssmenu .pull-right ul ul li,#cssmenu .pull-right li:hover > ul > li{height:auto}
#cssmenu .pull-right ul li a,#cssmenu .pull-right ul ul li a{width:100%;border-bottom:0; padding:10px}
#cssmenu .pull-right > ul > li{float:none}
#cssmenu .pull-right ul ul li a{padding-left:20px}
#cssmenu .pull-right ul ul li{background:#c4d3eb!important;}
#cssmenu .pull-right ul ul li:hover{background:#c4d3eb!important}
#cssmenu .pull-right ul ul ul li a{padding-left:30px; color:#111141; background:#f2f2f2}
#cssmenu .pull-right ul ul li a{color:#111141;background:none; background:#fff}
#cssmenu .pull-right ul ul li:hover > a,#cssmenu .pull-right ul ul li.active > a{color:red}
#cssmenu .pull-right ul ul,
#cssmenu .pull-right ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu .pull-right > ul > li.has-sub > a:after,
#cssmenu .pull-right > ul > li.has-sub > a:before,
#cssmenu .pull-right ul ul > li.has-sub > a:after,
#cssmenu .pull-right ul ul > li.has-sub > a:before{display:none}
#cssmenu .pull-right #head-mobile{display:block;padding:0 23px;color:#c4d3eb;font-size:12px; height:68px}

.button{width:55px;height:46px;position:absolute;right:0;top:15px;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:10px;right:20px;display:block;height:20px;width:30px;border-top:2px solid #d4a10a;border-bottom:2px solid #d4a10a;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:19px;right:20px;display:block;height:2px;width:30px;background:#d4a10a;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:30px;background:#000;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#000;width:30px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

#cssmenu .pull-right .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;height:33px;width:34px;cursor:pointer}
#cssmenu .pull-right .submenu-button.submenu-opened{background:#c4d3eb}
#cssmenu .pull-right ul ul .submenu-button{height:34px;width:34px}
#cssmenu .pull-right .submenu-button:after{position:absolute;top:16px;right:13px;width:8px;height:2px;display:block;background:#111141;content:''}
#cssmenu .pull-right ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .pull-right .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .pull-right .submenu-button:before{position:absolute;top:13px;right:16px;display:block;width:2px;height:8px;background:#111141;content:''}
#cssmenu .pull-right ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .pull-right .submenu-button.submenu-opened:before{display:none}
#cssmenu .pull-right ul ul ul li.active a{border-left:none}
#cssmenu .pull-right > ul > li.has-sub > ul > li.active > a,#cssmenu .pull-right > ul ul > li.has-sub > ul > li.active > a{border-top:none}
#cssmenu .pull-right > ul > li > a{ padding:10px}
#cssmenu .pull-right > ul > li.ngonngu{ margin-top:0}
#cssmenu .pull-right > ul > li.ngonngu a{ width:auto;}
#cssmenu .pull-right > ul > li.ngonngu:hover > a{ color:#111141 !important}#cssmenu .pull-right > ul > li.ngonngu:hover > a:hover{ color:red !important}
}
.banner_mini{ float:left; width:100%; position:relative}.banner_mini img{ width:100%}
.caption_cap{ float:left; width:100%; position:relative; background:#fff; padding:30px 5% 15px}
.titte_h{color:#ff9600; font-size:1.6rem; font-family:'Lato'; text-transform:uppercase}
.breadcrumb{ background:transparent; padding:0; }.breadcrumb a{color:#555; padding-right:10px}.breadcrumb a:hover{color:#ff9600}
.breadcrumb-item + .breadcrumb-item:before{ content:">"}
.gioithieu{ float:left; width:100%; background:url(../images/pattent-blue-one.jpg); padding:30px 3%}
.bg-xanh-gt{ background:#0063b4; float:left; width:70%; margin-left:15%; margin-right:15%; margin-top:30px}.nd_bg-xanh{  width:50%; position:relative; z-index:1; background:#fff; margin-left:25%; margin-right:25%; margin-top:-60px; padding:60px; float:left}
.pro-new-tab{ position:relative; float:left; width:100%; padding:60px 0}
.pro-new-tab .owl-carousel .owl-controls .owl-nav .owl-prev, .pro-new-tab .owl-carousel .owl-controls .owl-nav .owl-next{ position:unset}
.pro-new-tab .owl-nav{display: flex;lign-items: center;justify-content: center;}
/*footer*/
footer{ float:left; width:100%; position:relative; background:url(../images/left_footer_bg.jpg); color:white}
.left-f{ float:left; width:37%; padding:70px 40px}.right-f{ position:absolute; z-index:1; top:0; right:0;width:63%; background:url(../images/right_footer_bg.jpg); padding:70px 5% 0 5%; height:100%}
.left-f .caption_f{ font-size:1.4rem; text-transform:uppercase}
.left-f .add_f{ padding:15px 15%; margin:0}.add_f i{ margin-right:5px}.add_f li{ list-style-type:none; float:left; width:100%; margin:5px 0}
.right-f-link{ margin:0; padding:0; float:left; width:100%; padding-bottom:15px; border-bottom:1px solid rgba(100%,100%,100%,.2)}.right-f-link li{ float:left; width:33.3333%; list-style-type:none; padding:8px 15px 8px 20px; position:relative}
.right-f-link li:before{ content:''; position:absolute; z-index:1; top:19px; left:0; width:5px; height:9px; background:url(../images/items.png) no-repeat; background-position:-119px -186px}
.right-f-link li a{color:white; font:1.3rem/2rem "Lato-Light"}.right-f-link li a:hover{color:yellow}
.coppyright{font:1rem/1.1rem "Lato-Light"; padding:15px 0; float:left; width:100%}.coppyright a{color:yellow}.coppyright a:hover{color:red}

.number-page{ float:left; width:100%; margin:15px 0; position:relative;}.number-page a{ float:left; margin-right:10px; background:#fff; font-size:1rem;  width:35px; height:35px; display:flex;vertical-align: middle;align-items: center; justify-content: center; border:2px solid #d4a00a}.number-page a:hover,.number-page a.active{ background:#d4a00a; color:white}
.pro_view .owl-dots{display: flex;align-content: center;justify-content: center;}
.demo-gallery{display:none;}
/*jquery.picEyes*/

.picshade {
  position: fixed;
  left: 0;
  top: 0;
  width:100%;
  height: 100%;
  background:rgba(0,0,0,.9);
  z-index: 9999;
  display: none;
}

.pictures_eyes_close {
  position: absolute;
  top: -30px;
  right: -30px;
  display: inline-block;
  width: 57px;
  height: 57px;
  background: url(../images/close.png) no-repeat;
  z-index: 10099;
  display: none;
}

.pictures_eyes {
	position: fixed;
	width:100%;
	left: 0 !important;
	top: 0 !important;
	z-index: 19999;
	display: none;
	
}

.pictures_eyes_in {
	position: relative;
	text-align: center;
	margin: 0px auto;
	background: #fff;
	width:60%;
	margin: 30px auto;
	padding:20px 20px 95px 20px
}
.titte_eyes{ position:absolute; bottom:95px; padding:10px 15px; text-align:left; width:calc(100% - 40px); background:rgba(0,0,0,.5); color:#fff;z-index:39999; text-transform:uppercase;; font-size:16px; font-family:'Roboto-Bold'}

.pictures_eyes_in img { width:100% }

.pictures_eyes_in .prev, .pictures_eyes_in .next {
  position: absolute;
  top: 50%;
  width: 51px;
  height: 51px;
  cursor: pointer;
}

.pictures_eyes_in .prev {
  left: -58px;
  background: url(../images/Tleft.png) no-repeat;
}

.pictures_eyes_in .next {
  right: -59px;
  background: url(../images/Tright.png) no-repeat;
}

.pictures_eyes_indicators {
	position: absolute;
	left: 0;
	bottom:20px;
	width: 100%;
	text-align: center;
	z-index: 29999;
	margin: 20px auto;
}

.pictures_eyes_indicators a {
  display: inline-block;
  width: 97px;
  height: 64px;
  margin: 6px 3px;
  filter: alpha(opacity=70);
  opacity: .7;
  overflow: hidden; 
}

.pictures_eyes_indicators img { height:64px;}

.pictures_eyes_indicators .current {
  filter: alpha(opacity=100);
  opacity: 1;
}
@media screen and (max-width: 599px) {
	.titte_eyes{width:100%;}
.pictures_eyes_indicators{ display:none !important}
.pictures_eyes_in .prev {
  left:15px; 
  background: url(../images/Tleft2.png) no-repeat;
}

.pictures_eyes_in .next {
  right: 15px;
  background: url(../images/Tright2.png) no-repeat;
}
.pictures_eyes_in { padding:5px; width:100%}
.pictures_eyes_in .prev, .pictures_eyes_in .next {
  top: 40%;
  width: 28px;
  height:32px;
}
.pictures_eyes_close { background-size:80%; top:110%; right:39%}
.zoom-pic{ bottom:10px}
}
.zoom-pic{ position:absolute; z-index:2; text-align:center;left:30px; bottom:30px;}.zoom-pic a{width:32px; height:32px; background:url(../images/items.png) no-repeat; background-position:-245px -29px; float:left}

.name-pro{ font-size:1.6rem; font-family:"Lato"; text-transform:uppercase}.price-big{ color:red; font-size:1.4rem; font-family:'Lato-Bold'}
.share{ float:left; padding:15px; border:2px solid #d6b352; background:#fff; margin:15px 0}.items.facebook{background-position:-110px -89px; width:45px; height:45px;}.items.google{background-position:-170px -89px; width:45px; height:45px;}.items.twiter{background-position:-230px -89px; width:45px; height:45px;}.items.youtube{background-position:-290px -89px; width:45px; height:45px;}.share a{ margin:0 5px}

.tab-thongso .nav-tabs .nav-item.show .nav-link,.tab-thongso .nav-tabs .nav-link.active{background: rgba(255,217,0,1);
background: -moz-linear-gradient(left, rgba(255,217,0,1) 0%, rgba(238,144,44,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,217,0,1)), color-stop(100%, rgba(238,144,44,1)));
background: -webkit-linear-gradient(left, rgba(255,217,0,1) 0%, rgba(238,144,44,1) 100%);
background: -o-linear-gradient(left, rgba(255,217,0,1) 0%, rgba(238,144,44,1) 100%);
background: -ms-linear-gradient(left, rgba(255,217,0,1) 0%, rgba(238,144,44,1) 100%);
background: linear-gradient(to right, rgba(255,217,0,1) 0%, rgba(238,144,44,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd900', endColorstr='#ee902c', GradientType=1 ); border:1px solid #fff; border-radius:0; color:white;-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out}
.tab-thongso .nav-link{ padding:10px 35px; font-size:1.2rem; text-transform:uppercase; color:black; background:white; font-family:'Lato-Bold'}
.tab-thongso .nav-tabs{ border-bottom:0}.tab-content{ padding:15px 0}
.tab-thongso table{ margin:15px 0; border:1px solid #fff}
.google-map{ float:left; width:100%; margin-bottom:74px}
.htpp_tab{ float:left; width:100% ;position: relative; z-index:1; margin-top:-74px}
ul.tabs-ht{margin: 0px;padding: 0px;list-style: none; padding-bottom:30px;width: calc(100% - 94px);margin: 0 47px}
ul.tabs-ht li{background: rgba(237,161,82,.2); height:74px; display: flex; flex-direction: column;vertical-align: middle;align-items: center; justify-content: center; color: #000;  width: 100%; border-radius:0; border-right: 1px solid rgba(255,255,255,.5); font-size:1rem}ul.tabs-ht li span{text-transform: uppercase; font:1.1rem/1.1rem 'Lato-Bold'}
ul.tabs-ht li.current,ul.tabs-ht li:hover,ul.tabs-ht li:hover a{background: #ffb66b;color: #000; position:relative}
ul.tabs-ht li.current:before{ content:''; position:absolute; z-index:1; top:100%; left:calc(50% - 5px);      width: 0;      height: 0;      border-left: 10px solid transparent;      border-right: 10px solid transparent; border-top: 8px solid #ffb66b;}
.htpp .owl-carousel .owl-stage-outer{overflow-x: hidden;padding-bottom: 10px;}
.tab-content{display:none;}
.tab-content.current{display: inherit;}
.tab-link{ text-align:center; padding:5px 15px; border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px; }
.product_pic,.lienquan{ float:left; width:100%}
.product_pic{ padding-bottom:64px; border-bottom:1px solid #8dbfe1}
.pro_ct i{ width:28px; height:28px; border:1px solid #e5e5e5; color:#555; margin:0 10px;display: flex;vertical-align: middle;align-items: center; justify-content: center;}
.locator-tile h3{font-size:1.1rem; font-family:Lato-Bold; text-transform: uppercase}.locator-tile p{color:#848484; margin-bottom:10px}.locator-tile hr{ width:15%; margin-right:85%; margin-top:5px; margin-bottom:5px;border-top: 1px solid #ffb66b;}.locator-tel{color:#ffb66b; margin-bottom:30px}.locator-tel span{ font-family:'Lato-Bold'}
@media (max-width: 767px){ul.tabs-ht{ padding:0 25px 30px 25px}ul.tabs-ht li{ padding:10px 5px}}

.dong_tintuc_white{ background:white; padding-top:15px; padding-bottom:15px;display: flex;vertical-align: middle;align-items: center; margin-bottom:40px}
.tintuc_h h2{ font-size:1.6rem; margin-bottom:15px;}
.button_cttin{margin-top:30px; color:#F93; text-transform:uppercase; display: flex;vertical-align: middle;align-items: center;}.button_cttin i{ margin-right:5px; background:url(../images/items.png) no-repeat; background-position:-138px -180px; width:26px; height:20px; float:left;-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out}.button_cttin:hover i{ margin-right:10px; }
.day_tin{ position:absolute; z-index:1; right:40px; bottom:-30px; background:#ff4612; color:white;padding: 10px 5px;line-height: 1.1; height:57px; text-align:center}.day_tin span{color:yellow; font-family:'Lato-Bold';letter-spacing: 1px;}
.dong_tintuc_white .order-lg-2 .day_tin{ right:unset; left:40px}
.tin-chitiet .day_tin{ right:unset; left:55px; top:78px}.tin-chitiet{ padding:30px 50px}
.trungbai_r{ background:#ebf2f8}.trungbai_r h3{color:#ff4612; font-size:1.2rem; margin:30px 0 15px; font-family:'Lato-Bold'}
.tintuc_khac .tintuc_h h2{ font-size:1rem; margin-bottom:5px; font-family:Lato-Bold}.tintuc_khac .button_cttin { font-size:1rem; margin-top:10px; font-weight:300}.tintuc_khac p{ padding:5px 0 !important}
.hotro{ padding:30px}.hotro h2{ margin-bottom:15px; font-size:1.2rem; font-family:'Lato-Bold'}
.hotro_a{ padding:5px 55px 5px 15px; border:1px solid transparent; position:relative;-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out}
.hotro_a:hover{border:1px solid #fc9400;}.hotro_a:before{-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out}.hotro_a:hover:before{ content:''; position:absolute; z-index:1; right:-18px; top:-8px; width:53px; height:47px; background:url(../images/items.png) no-repeat; background-position: -348px -86px;}

.linkdown{ float:left; width:100%; position:relative; border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);display: flex;vertical-align: middle;align-items: center; background:#fff; padding:10px 70px 10px 15px; overflow:hidden; margin-bottom:25px; font-size:1rem; line-height:1}.linkdown:before{ content:''; position:absolute; z-index:1; top:0; right:0; width:60px; height:100%; background: url(../images/items.png) no-repeat #d4a00a; background-position:-170px -160px;-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out}.linkdown:hover:before{background-position:-170px -218px}.linkdown i{ margin-right:5px}
.lienhe h2{ font-size:1.4rem; color:#555; text-align:center}.lienhe .add{ font-size:.8rem; color:#555}.lienhe h3{ font-size:1.4rem; color:#21c2f8; text-transform:uppercase; font-family:Lato-Bold}.lienhe h4{ font-size:1rem; text-transform:uppercase; font-family:Lato-Bold}
/*items*/
.items{ float:left; background:url(../images/items.png) no-repeat; background-position:0px 0px; }
.banner .items.angle-left{ background-position:-15px -10px; width:70px; height:70px; opacity:.5}
.banner .items.angle-right{ background-position:-100px -10px; width:70px; height:70px; opacity:.5}
.banner .items.angle-left:hover,.banner .items.angle-right:hover{ opacity:1}

.pro_item_right .items.angle-left{ background-position:-0px -207px; width:49px; height:38px}
.pro_item_right .items.angle-right{ background-position:-54px -207px; width:49px; height:38px}
.pro_item_right .items.angle-left:hover{ background-position:-0px -237px}
.pro_item_right .items.angle-right:hover{background-position:-54px -237px}
.pro_item_left .items.angle-left{ background-position:-0px -237px; width:49px; height:38px}
.pro_item_left .items.angle-right{background-position:-54px -237px; width:49px; height:38px}

.pro-new-hot .items.angle-left,.pro-new-tab .items.angle-left{ background-position:-0px -90px; width:49px; height:38px}
.pro-new-hot .items.angle-right,.pro-new-tab .items.angle-right{ background-position:-49px -90px; width:49px; height:38px}
.pro-new-hot .items.angle-left:hover,.pro-new-tab .items.angle-left:hover{ background-position:-0px -128px; }
.pro-new-hot .items.angle-right:hover,.pro-new-tab .items.angle-right:hover{ background-position:-49px -128px; }

.street{ background-position:-0px -177px; width:25px; height:25px}
.phone_add{ background-position:-29px -177px; width:25px; height:25px}
.mail_add{ background-position:-57px -177px; width:25px; height:25px}
.face_add{ background-position:-84px -177px; width:25px; height:25px}
.fa-angle-up{background-position:-182px -23px; width:45px; height:45px}
.htpp .items.angle-left{ background-position:-292px -7px; width:47px; height:74px}
.htpp .items.angle-right{ background-position:-338px -7px; width:47px; height:74px}
.video-icon{background-position:-272px -172px; width:35px; height:36px}
.pdf-icon{background-position:-230px -172px; width:35px; height:36px}
.tab-thongso .tab-content{ display:block}

.price-old{ text-decoration:line-through; color:#000; font-size:1.1rem; position: absolute;z-index: 1;left: 0;padding-left: 10px;bottom: 35px;background:rgba(0,0,0,.1);width: 100%;}

.hot,.sale{ position:absolute; z-index:1; top:0; left:0; background:red; color:white; font:1.2rem; font-family:Lato-Bold; padding:0 7px}
/* spinner-3 styles */
.spinner {	position: fixed;width: 80px;height: 80px;right: -8px;bottom:55px;display: block !important;z-index: 100;}
.spinner:before, .spinner:after {
  content: "";
  display: block;
  position: absolute;
  border-width: 4px;
  border-style: solid;
  border-radius: 50%;
}
.spinner.spinner-3:before {
  width: 70px;
  height: 70px;
  border-color: #d0ee16;
  top: 0px;
  left: 0px;
  -webkit-animation: scale-2 1s linear 0s infinite;
          animation: scale-2 1s linear 0s infinite;
}
.spinner.spinner-3:after {
  width: 70px;
  height: 70px;
  border-color: #fffa01;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-animation: scale-2 1s linear 0.5s infinite;
          animation: scale-2 1s linear 0.5s infinite;
}
/* spinner-3 styles */
.icon-tel{ display: block;background: #ff0;border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;
		position: absolute; z-index:99;
		right: -5px; top:35px;
		-webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
		-moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
		-ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
		-o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
		animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
		-webkit-transform-origin: 0% 0%;
		-moz-transform-origin: 0% 0%;
		-ms-transform-origin: 0% 0%;
		-o-transform-origin: 0% 0%;
		transform-origin: 0% 0%;

}
.number-tel{ display:block; position:absolute; right:0px; top:17px; border-radius:50px; background:#fff; padding:5px 15px; width:155px; opacity:0; transform:translateX(-20px);-moz-transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out; transition:0.2s ease-in-out}.spinner:hover .number-tel{opacity:1; transform:translateX(-35px)}
	@-moz-keyframes quick-alo-circle-img-anim {
		0% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		10% {
			-moz-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		20% {
			-moz-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		30% {
			-moz-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		40% {
			-moz-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		50% {
			-moz-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		100% {
			-moz-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
	}

	@-webkit-keyframes quick-alo-circle-img-anim {
		0% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		10% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		20% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		30% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		40% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		50% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		100% {
			-webkit-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
	}

	@-o-keyframes quick-alo-circle-img-anim {
		0% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		10% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		20% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		30% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		40% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		50% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		100% {
			-o-transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
	}
	@keyframes quick-alo-circle-img-anim {
		0% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		10% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		20% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		30% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		40% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		50% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
		100% {
			transform: rotate(0deg) skew(1deg) translate(-50%,-50%)
		}
	}
/* spinner-3 styles */	
@-webkit-keyframes scale-2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
@keyframes scale-2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}	
/* spinner-3 styles */
/*
/*mobi */
@media (max-width: 320.98px){}
@media (max-width: 767.98px){.pull-right{ padding-right:0; width:100%; max-height:100vh; overflow-x:scroll}
.left-f,.right-f{ width:100%; padding:30px 15px}.right-f{position: unset;float: left;padding: 7px 15px;}.right-f-link{ display:none}
.left-f .add_f{padding: 15px 5%; float:left}.left-f .caption_f{ font-size:1.2rem}
.pad-pro-list-right-home,.pad-pro-list-left-home{ padding:20px 30px 60px 30px}
.caption_pro_color{ min-height:300px}.caption_pro_color br{ display:none}
.dong_tintuc_white .order-lg-2 .day_tin,.day_tin{ right:unset; left:40px; top:-30px}
.col-form-label.text-right{ text-align:left !important}
.bg-xanh-gt{ width:100%; margin-left:0; margin-right:0}
.nd_bg-xanh {width: 90%; margin-left: 5%;margin-right: 5%;padding: 30px;}
.coppyright{font: .8rem/1rem "Lato-Light";}
.tab-thongso td{ padding-left:15px; padding-top:10px; padding-bottom:10px}
.tin-chitiet{padding: 15px;}.tin-chitiet .day_tin{right: unset;left: 34px;top: 12px;height: 50px;padding: 5px;}
.pro-new-tab{ padding:30px 0}.dong_tintuc_white .order-lg-2 .day_tin, .day_tin{top:0; left:30px}.content-wrap section.content-current{ padding:0}
.banner .items.angle-right{background-position: -67px -209px;width: 39px;height: 35px;opacity: 1;}
.banner .items.angle-left{background-position: 0px -238px;width: 39px;height: 35px;opacity: 1;}
.banner .owl-carousel .owl-controls .owl-nav .owl-prev{ left:15px}.banner .owl-carousel .owl-controls .owl-nav .owl-next{right:15px}
.trungbai_r{border-top: 15px solid #ebf2f8;margin-top: 15px; background:none}
} 
/*menu mobi & ipad dung*/
@media (min-width: 768px) and (max-width: 991.98px){
	.caption_pro_color{min-height: 230px;}.caption_pro_color br{ display:none}.caption_pro_color.text-right{ text-align:left !important}.price{font: 1.2rem/1.4rem "Lato-Bold";}.price:before{top:8px}.pull-right{ padding-right:0; width:100%; max-height:100vh; overflow-x:scroll}
.left-f,.right-f{ width:100%; padding:30px 15px}.right-f{position: unset;float: left;padding: 7px 15px;}.right-f-link{ display:none}
.left-f .add_f{padding: 15px 5%; float:left}.left-f .caption_f{ font-size:1.2rem}
.pad-pro-list-right-home,.pad-pro-list-left-home{ padding:20px 30px 60px 30px}
.caption_pro_color{ min-height:300px}.caption_pro_color br{ display:none}
.dong_tintuc_white .order-lg-2 .day_tin,.day_tin{ right:unset; left:40px; top:-30px}
	}
/*máy Dung*/
@media (min-width: 992px) and (max-width: 1199.98px){
	#cssmenu .pull-right > ul > li > a{padding: 30px 7px;}
	.logo{width: 140px;}.menu{height: 74px;}
	#cssmenu .pull-right > ul > li.has-sub > a:before{top: 34px;}
	#cssmenu .pull-right > ul > li.has-sub > a:after{top: 37px;}
	.caption_pro_color{padding: 3%; min-height: 400px;}.caption_pro_color p{font-size: 1rem;}.caption_pro_color h3{font: 1.6rem/2rem "Lato-Bold";}
	.price{font: 1.2rem/1.4rem "Lato-Bold";}.price:before{top:8px}
	.right-f-link li a{font: 1rem/1.8rem "Lato-Light";}.left-f{ width:30%;padding: 40px 15px;}.right-f{ width:70%}.left-f .caption_f{ font-size:1rem; line-height:1.1}.left-f .add_f{ padding:15px 0; font-size:.9rem}
	.bg-xanh-gt{width: 90%;margin-left: 5%;margin-right: 5%;}
	ul.tabs-ht li span{font: 1rem/1rem 'Lato-Bold';}
	.tin-chitiet .day_tin{ left:27px}
	}
@media (min-width:1200px) and (max-width: 1599.98px){
	.caption_pro_color{padding: 3% 2%; min-height: 450px;}.caption_pro_color p{font-size: 1rem;}.left-f .add_f{padding: 15px 10%;}
	}
@media only screen and (min-width:1600px){}

/*Table*/
td, th {
    position: relative;
    padding: 15px;
}
th {
    background: #e6e6e6;
    line-height: 1;
    font-weight: normal
}
    th span {
        color: #3aa2f5;
        font: 14px/10px 'Lato'
    }
.table-tdn{margin-top:30px; width:100%}.table-tdn td{ padding:6px 10px 5px}.table-tdn tr:nth-child(1) { background: #cdcdcd; font-family:'Lato-Bold'} 
.table tr:nth-child(1) { background: #cdcdcd; font-family:'Lato-Bold'}.table tr:nth-child(2n + 0) { background: #f4f4f4; }
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 991.98px) {
    table, thead, tbody, th, td, tr {display: block}        /* Hide table headers (but not display: none;, for accessibility) */        
	thead tr { position: absolute; top: -9999px; left: -9999px; }    
	tr {margin: 0 0 1rem 0; }        
	/*tr:nth-child(odd) { background: #f4f4f4;  }    */
	td {border: none; border-bottom: 1px solid #eee;position: relative;padding-left: 50%;    }        
	td:before {position: absolute;top: 10px; left: 6px;width: 45%;padding-right: 5%;white-space: nowrap; }

    .table_tour td:nth-of-type(1):before,
    .table_tour td:nth-of-type(2):before,
    .table_tour td:nth-of-type(3):before,
    .table_tour td:nth-of-type(4):before,
    .table_tour td:nth-of-type(5):before,
    .table_tour td:nth-of-type(6):before {
        content: attr(data_content)
    }
}
.tabs-ht .owl-nav button{
  background:#eda152 !important;
  position: absolute;
  top: 0;
}
.tabs-ht .owl-nav button.owl-prev{left: -47px}
.tabs-ht .owl-nav button.owl-next{right: -47px}
@media (min-width: 992px){
  .banner .owl-nav button{position: absolute;bottom: 30px;left: 50%}
  .banner .owl-nav button.owl-prev{margin-left: -70px}
  .pro_item_right .owl-nav button{position: absolute; left: 100%}
  .pro_item_right .owl-nav button.owl-next{margin-left: 60px}
  .pro_item_left .owl-nav button{position: absolute; right: 100%}
  .pro_item_left .owl-nav button.owl-prev{margin-right: 60px}
}
.zalo{position:fixed; right:10px; bottom:140px; z-index:9;}.zalo .number-tel{top:10px}.zalo:hover .number-tel{opacity:1; transform:translateX(-35px);color: #000 !important}.zalo .icon-zalo{ z-index:99; position:relative}
.button-search{ width:35px; height:35px; background-position:-315px -172px; padding:0;}
.item_search{ width:35px;}
.search_box{position:absolute; z-index:99; right:0; top:30px}
.search-wrapper .input-holder {
overflow: hidden;
height: 40px;
background: rgba(255,255,255,0);
border-radius:4px;
position: relative;
width:40px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
border-radius: 50px;
width:270px;
background: rgba(0,0,0,1);
-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
width:100%;
height: 22px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color:#FFF;
-webkit-transform: translate(0, 60px);
-moz-transform: translate(0, 60px);
transform: translate(0, 60px);
-webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
transform: translate(0, 10px);
}

.search-wrapper .input-holder .search-icon {
width:40px;
height:40px;
border:none;
border-radius:8px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 36px;
height:36px;
margin: 2px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
-moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}
.search-wrapper.active .input-holder .search-icon span {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.search-wrapper .input-holder .search-icon span::before {
width: 2px;
height: 12px;
left: 10px;
top: 17px;
border-radius: 1px;
background: #e4b233;
}
.search-wrapper .input-holder .search-icon span::after {
width: 16px;
height: 16px;
left: 3px;
top: 3px;
border-radius: 100%;
border:2px solid #e4b233;
}

.search-wrapper .close {
position: absolute;
z-index: 1;
top:10px;
right:0px;
width:25px;
height:25px;
cursor: pointer;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right:-30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background:#f7941d;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
.search-wrapper .result-container {
width: 100%;
position: absolute;
top:80px;
left:0px;
text-align: center;
font-family: "Open Sans", Arial, Verdana;
font-size: 14px;
display:none;
color:#B7B7B7;
}


@media screen and (max-width: 560px) {
.search-wrapper.active .input-holder {width:200px;}
}

@media (max-width: 991.98px){.search_box{position: relative;top:7px; height:60px; right:10px}.search-wrapper.active .input-holder {width:80%;}.search-wrapper .input-holder{ float:right; margin-right:30px}.search-wrapper.active .close{right:0}.search-wrapper .close{right:40px}}
@media (min-width: 992px) and (max-width: 1199.98px){.search_box{top:16px}.search-wrapper .input-holder .search-icon{ height:30px; width:30px; top:6px}.search-wrapper.active .input-holder .search-icon{top:0}.search-wrapper.active .close{right:-25px}}