@charset "utf-8";
/* CSS Document */

/* 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-Black';
  src: url('../fonts/Lato-Black.eot');
  src: url('../fonts/Lato-Black.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../fonts/Lato-Black.woff2') format('woff2'), 
  url('../fonts/Lato-Black.woff') format('woff'), 
  url('../fonts/Lato-Black.ttf') format('truetype'), 
  url('../fonts/Lato-Black.svg#Lato-Black') 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;
}
/*end font */
/* CSS Document */
html{ font-size:16px}
.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}
ol, ul {list-style: none; padding:0px; margin:0px;}
img{max-width: 100%;}
.inner,.container-page { margin: 0 auto; width:100%; padding: 0 5%; float:left; position:relative}
.relative {	position: relative;}
.right {	float: right;}
.left {	float: left;}

/* end CSS Document */
    /*menu*/
.fixtop {position: fixed !important; top: 0;right: 0; width: 100%; background:#ffffff; z-index:99 }
.menu-size{ float: left;font: 1rem 'Lato-Black'; color: rgba(0,0,0,1.00) !important; text-transform: uppercase; padding: .5rem 1rem !important;}
.navbar-light .navbar-nav .active>.nav-link.menu-size{color: #3c86d8 !important;}
.dropdown:hover>.dropdown-menu {display: block;}
.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
.dropdown-menu{margin: 0;}
.dropdown-toggle::after{ display: none;}
.bor-sub{ border-bottom: 1px solid #c1c1c1;}
    /*end menu*/
.items {
    background: url(../images/items.png) no-repeat;
    background-position: 0px 0px;
    float: left;
}
    /*banner*/
.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
    /*end banner*/
    /*search*/
.search_box{ float:left; width:100%; background:#fff; padding:15px 0 25px}
.searchbox{background: transparent; border: 1px solid #fff; background:rgba(255,242,226,.9);  width: 100%;  padding: 9px ;font-size:1.6rem; font-family:'Lato'; margin-bottom:20px; border-radius: 0px;}
.searchbutton { background:url(../images/items.png) no-repeat;background-position: -0px -0px; width: 35px; height:35px;display: block;  position:relative;cursor: pointer;  z-index:5;background-color:transparent !important; border:0 !important}
.searchbutton.active{background-position: -35px 0px}
.search-form {  display:none;position: absolute;  top:85px;right: 0;background: #d8d8d8;padding: 15px 15%;  width:100%;z-index: 9999; color:white}
.search-form.active{display:block}
.searchbar {background: transparent;border: 0;width: 80%;padding: 10px;font-size:1rem; font-family:'Lato-Black';color: #fff;  margin-left:10px;}
.searchsubmit {background: #1b396d;order: none;utline: none;  cursor:pointer;color: #fff;padding: 10px 20px 5px;text-transform: uppercase;border:0;font-size:1.2rem; font-family:'Lato-Black'}
.search-form input::placeholder{  color: #fff;}
.search-close{ float:right; font-size:1.8rem; font-family:"Gill Sans", Arial, sans-serif; color:black !important}.search-close:hover{color:red !important}

    /*end search*/
    /*tab*/
.product{ float:left; width:100%; position:relative}
ul.tabs{margin: 0px;padding: 0px;list-style: none; padding-bottom:30px}
ul.tabs li{
    background:#fff;
    color:black;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer; 
    width:100%;
    /*border: 1px solid #bebebe;*/
    border-bottom: none;
    z-index: 100;
    border-radius: 0px;}
ul.tabs li.current,ul.tabs li:hover,ul.tabs li:hover a{
    background: #ffffff; 
    color: #1a3b66;
    border: 1px solid #47a3da;
    box-shadow: inset 0 2px #47a3da;
    border-bottom: none;
    z-index: 100;}
.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; }
ul.tabs li.current:after {
    right: auto;
    left: 100%;
    width: 500px;
}
ul.tabs li.current:before, ul.tabs li.current:after {
    content: '';
    position: absolute;
    z-index: 1;
    height: 1px;
    right: 100%;
    bottom: 0;
    width: 949px;
    background: #47a3da;
}

@media (max-width: 767px){ul.tabs{ padding:0 25px 30px 25px}ul.tabs li{ padding:10px 5px;font-size: 0.8rem;}}

    /* end tab*/
    /* noidung*/
.items.angle-left,.items.angle-right{ width:35px; height:35px; background-position:-70px 0px}
.items.angle-left{ transform:rotate(-180deg)}
    /* end noi dung*/
    /* footer*/
.title-foot{ float: left; width: 100%; font: 1rem 'Lato-Black'; color: #fff; text-transform: uppercase;}
.footer{ float: left; width: 100%; color: #fff;}
.footer .bor{float: left; width: 100%; border: 1.5px dotted #a09f9f; height: 10px; border-left: none; border-right: none;}
.footer img{max-width: 100%;}
.bg-blue{ float: left; width: 100%;}
.bg-blue p{ float: left; width: 100%; text-align: left;}
.bg-grey{ float: left; width: 100%; background: #7e7e7e; padding: 0 15px 3px 15px;display: flex; align-items: center; flex-direction: column;font-size: 0.75rem}
#return-to-top {
    bottom: 20px;
    right: 20px;
    background: #fff;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/*#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}*/
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 2px;
}
.top-scroll { 
    background:url(../images/items.png) no-repeat;
    background-position: -133px 8px; 
    width: 50px; height:50px;display: block;  position:relative;cursor: pointer;  
    z-index:5;
    background-color:#fff !important; 
    border:0 !important;    
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}
.icon-face{float: left;background:url(../images/items.png) no-repeat; background-position: -0px -35px;  width: 44px; height:44px;display: block; }
.icon-face:hover{background-position: -0px -77px}
.icon-google{float: left;background:url(../images/items.png) no-repeat; background-position: -44px -35px;  width: 44px; height:44px;display: block; }
.icon-google:hover{background-position: -44px -77px}
.icon-twitter{float: left;background:url(../images/items.png) no-repeat; background-position: -88px -35px;  width: 44px; height:44px;display: block; }
.icon-twitter:hover{background-position: -88px -77px}
    /* end footer*/
.content img{ max-width: 100%;}
    /*about*/
.title-main{float: left; font: 2.1rem 'Lato-Black'; color: #1b396b;} .title-main span{ font-family: 'Lato-Light';}
.bold-textb{ float: left; width: 100%; font: 1.9rem 'Lato-Black'; color: #000;}
    /* end about*/
    /*contact*/
.fontsmall{ font-size: 0.8rem; max-width: calc(100% - 45px);}
.icon-location{float: left;background:url(../images/items.png) no-repeat; background-position: -133px -35px;  width: 45px; height:45px;display: block; }
.icon-mail{float: left;background:url(../images/items.png) no-repeat; background-position: -175px -35px;  width: 45px; height:45px;display: block; }
.box-contact{
    float: left; width: 100%;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.42);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.42);
    padding: 5% 15%;
}
.box-contact .form-control, .box-contact .btn {border-radius: 0;}
    /*end contact*/
    /* new*/
.box-news img{ max-width: 100%;}
.box-news{ float: left; width: 100%; border-bottom: 1px dotted #797979; padding: 20px 0;}
.title-news{float: left; width: 100%; font: 1.2rem 'Lato-Bold'; color: #000;position: relative; margin-bottom: 25px;}
.title-news:after{
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    margin: 5px auto;
    width: 15%;
    height: 2px;
    background: #cacaca;
}
.b-more{ float: left; background: #1b396b; color: #fff; padding: 10px 15px;} .b-more:hover{background: #3c86d8; color: #fff;}
.ly-page .page-link{ color: #a5a5a5; border: 1px solid #dee2e6; margin-left: 3px; padding: 0.5rem 1rem;}
.ly-page .page-item.active .page-link { color: #000; background-color: #ffffff; border-color: #000000;}
.title-other{ float: left; width: 100%; font: 1.5rem 'Lato-Black';}
.play-othernews{float: left; width: 100%;}
.play-othernews .card{ border: 0; border-radius: 0;}
.play-othernews .card-body{padding: 1.25rem 0;}
    /*end new*/
    /*mat*/
.name-mat{ float: left; width: 100%; font: 1rem 'Lato'; color: #24254e; margin-bottom: 15px; text-transform: uppercase; font-weight: bold;}
/*slider-pro*/
.slick-slider .slick-prev, .slick-slider .slick-next {
  z-index: 100;
  font-size: 2.5em;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  color: #B7B7B7;
  position: absolute;
  top: 50%;
  text-align: center;
  color: #000;
  opacity: .3;
  transition: opacity .25s;
  cursor: pointer;
}
.slick-slider .slick-prev:hover, .slick-slider .slick-next:hover {
  opacity: .65;
}
.slick-slider .slick-prev {
  left: 0;
}
.slick-slider .slick-next {
  right: 0;
}

.product-images {
  width: 100%;
  margin: 0 auto;
  border:1px solid #eee;
}
.product-images li, .product-images figure, .product-images a, .product-images img {
  display: block;
  outline: none;
  border: none;
}
.product-images .main-img-slider figure {
  margin: 0 auto;
  padding: 0 2em;
}
.product-images .main-img-slider figure a {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.product-images .main-img-slider figure a img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.product-images .thumb-nav {
  margin: 0 auto;
  padding:20px 10px;
  max-width: 600px;
}
.product-images .thumb-nav.slick-slider .slick-prev, .product-images .thumb-nav.slick-slider .slick-next {
  font-size: 1.2em;
  height: 20px;
  width: 26px;
  margin-top: -10px;
}
.product-images .thumb-nav.slick-slider .slick-prev {
  margin-left: -30px;
}
.product-images .thumb-nav.slick-slider .slick-next {
  margin-right: -30px;
}
.product-images .thumb-nav li {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
.product-images .thumb-nav li img {
  display: block;
  width: 100%;
  max-width: 75px;
  margin: 0 auto;
  border: 2px solid transparent;
  -webkit-transition: border-color .25s;
  -ms-transition: border-color .25s;
  -moz-transition: border-color .25s;
  transition: border-color .25s;
}
.product-images .thumb-nav li:hover, .product-images .thumb-nav li:focus {
  border-color: #999;
}
.product-images .thumb-nav li.slick-current img {
  border-color: #d12f81;
}
.slick-dots{ display: flex; align-items: center; justify-content: center; margin-top: 10px;}
.slick-dots li{float: left; display: flex; margin: 3px;}
.slick-dots li button{width: 22px; height: 4px;overflow: hidden; background: #6f5948;border: none;  border-radius: 2px;}
.slick-dots .slick-active button{background: #b7aca4;}
.code{float: left; width: 100%; font: 1rem 'Lato-Bold'; text-transform: uppercase;}
.code span{color: #e9c076;}
.tab-content-detail{display: unset;}
.product-detail{ float: left; width: 100%;}
.product-detail .nav-pills .nav-link.active, .product-detail .nav-pills .show>.nav-link {
    color: #fab200;
    background-color: #fff;
    border-bottom: 2px solid #fab200;
}
.product-detail .nav-pills .nav-link {border-radius: 0; color: #fab200;}
.box-product{ float: left; width: 100%;}
.title-otherproduct{float: left; font: 1.6rem 'Lato-Black'; color: #fab200;} .title-otherproduct span{ font-family: 'Lato-Light';}
.b-detail {
  display: inline-block;
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.1rem;
    padding: 6px 9px;
    width: 100px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.b-detail span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.b-detail span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.b-detail:hover span {
  padding-right: 25px;
  color: #fff;
}

.b-detail:hover span:after {
  opacity: 1;
  right: 0;
}
.box-product{ float: left; width: 100%; background: #1d366c; padding: 10px 20px; color: #fff;}
.title-product{ float: left; width: 100%; font-size: 1.3rem; color: #fff;}
.play-product img{ width: 100%;}
.videoWrapper {position: relative;padding-bottom: 44.7%;height: 0;width: 100%;margin: 0 auto;
}
.videoWrapper video, .videoWrapper iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#advisoryModal.modal.in .modal-dialog {
    -webkit-transform: translate(0, 20%);
    -ms-transform: translate(0, 20%);
    -o-transform: translate(0, 20%);
    transform: translate(0, 20%);
}
#advisoryModal .modal-content {
    background: rgba(255,255,255,0.9);
    border-radius: 0px;
    font-size: 16px;
    border: none;
}
#advisoryModal .close {
    position: absolute;
    right: -25px;
    top: -25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    opacity: 1;
    color: #03aee2;
    font-size: 35px;
    font-family: 'Arial';
    font-weight: normal;
    -webkit-box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.15);
    box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.15);
}
#advisoryModal .modal-content {
    background: rgba(255,255,255,0.9);
    border-radius: 0px;
    font-size: 16px;
}
.modal-body { padding: 0px;}
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
    .search-form {position: fixed !important; bottom: 0; top: 0; padding: 30px 15px !important;}
    .searchbar{width: 100%;float: left;margin-top: 15px; margin-left:0; background: #cdcdcd}
    .searchsubmit{float: left; width: 100%; margin-top: 30px;}
    .searchbutton.active{background-position: 0px 0px}
    .product_tab .d-flex, .box-news .d-flex{display: block !important;}
    .box-contact .text-right{ text-align: left !important;}
    .title-news{ margin-top: 25px;}
    /*menu*/
    .nav-item {background: #e6e6e6; border-bottom: 1px solid #ffffff; width: 100%;}
    .dropdown-menu{display: block;border: 0;  border-radius: 0;}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {  }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {  }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {  }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }
.videoWrapper { 
     position: relative;
     padding-bottom: 56.25%;  
     height: 0;
     width: 100%; /* You can set this width to whatever suits your needs */     
     margin: 0 auto;
}
.videoWrapper video, .videoWrapper iframe{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;  
     height: 100%;
}
/*menu*/
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 
.nav-link{padding:0;}.navbar-light .navbar-nav .nav-link{color:unset}.dropdown-item.active, .dropdown-item:hover,.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}.dropdown-item{font-family: 'Lato';color:black}

/**/
:focus{outline:none}button:focus{outline:none}
banner.owl-carousel .owl-nav button.owl-next,.banner.owl-carousel .owl-nav button.owl-prev, .banner.owl-carousel .owl-dots{position: absolute; z-index: 1}
.banner.owl-carousel .owl-nav button.owl-next,.banner.owl-carousel .owl-nav button.owl-prev
{top: calc(50% - 25px); width: 52px; height: 52px; background: url("../images/nav_banner.png") no-repeat; background-position:3px -0px; color: transparent;position: absolute}
.banner.owl-carousel .owl-nav button.owl-next{background-position:-50px -0px; right: 15px}
.banner.owl-carousel .owl-nav button.owl-prev{left:15px}
.banner.owl-carousel button.owl-dot{border-radius:0;width:30px; height:3px; background: white; margin:3px; float: left}.banner.owl-carousel button.owl-dot.active{padding: 5px;background-color: #002661}
.owl-dots{bottom:15px; left: calc(50% - 60px)}