/*!
 * Theme Name: HTML5 Blank
 * Theme URI: http://html5blank.com
 * Description: HTML5 Blank WordPress Theme
 * Version: 1.5.0
 * Author: Todd Motto (@toddmotto)
 * Author URI: http://toddmotto.com
 * Tags: Blank, HTML5, CSS3
 *
 * License: MIT
 * License URI: http://opensource.org/licenses/mit-license.php
 */
/**
 * styles.scss
 * ---
 * Main `sass` file. Import here `sass` files
 */

@font-face {
  font-family: "Segoe_UI";
  src: url("../fonts/Segoe_UI.eot");
  src: url("../fonts/Segoe_UI.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Segoe_UI.woff") format("woff"),
    url("../fonts/Segoe_UI.ttf") format("truetype"),
    url("../fonts/Segoe_UI.svg#font-name") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "segoeui_0";
  src: url("../fonts/segoeui_0.eot");
  src: url("../fonts/segoeui_0.eot?#iefix") format("embedded-opentype"),
    url("../fonts/segoeui_0.woff") format("woff"),
    url("../fonts/segoeui_0.ttf") format("truetype"),
    url("../fonts/segoeui_0.svg#font-name") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "segoeuisl";
  src: url("../fonts/segoeuisl.eot");
  src: url("../fonts/segoeuisl.eot?#iefix") format("embedded-opentype"),
    url("../fonts/segoeuisl.woff") format("woff"),
    url("../fonts/segoeuisl.ttf") format("truetype"),
    url("../fonts/segoeuisl.svg#font-name") format("svg");
  font-weight: normal;
  font-style: normal;
}
/**
 * partials/reset
 * ---
 * Reset file
 * NOTE: also `normalize.css` is used
 */
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*{margin: 0;padding: 0;}
html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "segoeui_0","segoeuisl", Helvetica, Arial, "Open Sans", sans-serif;
  font-size: 140%;
  line-height: 1.5;
  color: #fff;
  background-color: white;
  background: url(../images/bg-wp2.jpg) center no-repeat;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
img {vertical-align: middle;}
a {color: #fff;text-decoration: none;}
a:focus, a:hover {text-decoration: none;}
li{list-style: none; text-decoration: none;}
input[type="text"],input[type="search"] {font-size: inherit;line-height: inherit;}
::-moz-selection {
  background-color: #04a4cc;
  color: white;
  text-shadow: none;
}
::selection {
  background-color: #04a4cc;
  color: white;
  text-shadow: none;
}
.wrapper{width: 100%;height: 100%;}
.container{height: 100%;}
/* header */
header{width: 100%; padding-top: 9px;}
.wrap_header{padding: 0;  margin-bottom: 9px;}
.box-logo{background: #006a6e; height: 100%;margin-right:9px; text-align: center;padding: 8px;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.bg_logo{float: left;  width: 20%;height: 116px;}
.wrap_navlogo{width: 100%;height: 116px;}

.box-logo:hover{background: #4b9f39;color: #fff;}
.box-logo:hover:hover>img{
  transition-duration: 0.9s; -webkit-transition-duration:0.9s; -o-transition-duration: 0.9s; -moz-transition-duration: 0.9s;
  transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}

.box-nav{height: 100%; width: 60%; margin-right:9px;   float: left;}
.box-nav ul.ul-nav{margin: 0px -4.5px; padding: 0px;height: 100%;}
.box-nav ul li{width: 25%;height: 116px; float: left;padding: 0 4.5px;}
.box-nav ul li .box1{width: 100%;height: 116px;text-align: center;background: #ffae0c;padding-top: 20%;position: relative;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-nav ul li .box2{width: 100%;height: 100%;text-align: center;background: #ff6a22;padding-top: 20%;position: relative;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-nav ul li .box3{width: 100%;height: 100%;text-align: center;background: #6cbf1b;padding-top: 20%;position: relative;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-nav ul li .box4{width: 100%;height: 100%;text-align: center;background: #0f81a5;padding-top: 20%;position: relative;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-nav ul li .box1:hover{background: #6cbf1b; color: #fff;}
.box-nav ul li .box2:hover{background: #0f81a5; color: #fff;}
.box-nav ul li .box3:hover{background: #ffae0c; color: #fff;}
.box-nav ul li .box4:hover{background: #ff6a22; color: #fff;}
.box-nav ul li .box1:hover>img{
  transition-duration: 0.9s; -webkit-transition-duration:0.9s; -o-transition-duration: 0.9s; -moz-transition-duration: 0.9s;
  transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}
.box-nav ul li .box2:hover>img{
  transition-duration: 0.9s; -webkit-transition-duration:0.9s; -o-transition-duration: 0.9s; -moz-transition-duration: 0.9s;
  transform: rotateY( 360deg );
    -webkit-transform: rotateY(360deg);
}
.box-nav ul li .box3:hover>img{
  transition-duration: 0.9s; -webkit-transition-duration:0.9s; -o-transition-duration: 0.9s; -moz-transition-duration: 0.9s;
  transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}
.box-nav ul li .box4:hover>img{
  transition-duration: 0.9s; -webkit-transition-duration:0.9s; -o-transition-duration: 0.9s; -moz-transition-duration: 0.9s;
  transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}

.box-language{height: 116px; width: 17%;float: left;}
.wrap_search{height: 116px;padding: 0;  margin-bottom: 9px;}
.box-nav ul a:hover li{}
.box-language .box-top{width: 100%;background: #a00096;margin-bottom: 4px;text-align: center;padding: 5px;}
.box-language ul{float: left; margin: 0 -4.5px;padding: 0;height: 37px;}
.box-language ul li{width: 50%;padding: 2px 4.5px; float: left; overflow: hidden;}
.box-language ul li .language-vn, .box-language ul li .language-en{width: 100%;height: 100%;}
.box-language ul li img{width: 100%;}
.box-language ul li:hover img{border: 1px solid #ffae0c;}
.box-language .language-bottom .box-right{padding-left: 4.5px;padding-right: 0}
.box-language .language-top:hover, .box-language .language-bottom .box-left:hover img, .box-language .language-bottom .box-right:hover img{border: 2px solid #00696d; transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.box-search{background: #5435ae;height: 100%; text-align: center; padding: 15px;}
.box-search input.form-control{width: 100%; height: 30px; border: 1px solid #1777e6; border-radius: 0; margin-top: 20px;}
.box-search:hover>img{
  transition-duration: 0.9s; -webkit-transition-duration:0.9s; -o-transition-duration: 0.9s; -moz-transition-duration: 0.9s;
  transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}
.btn_icon_search{
    position: absolute;
  bottom: 18px;
  right: 16px;
  border: none;
  background: none;
  padding: 3px 12px;
  color: #B3B3B3;
}
.btn_icon_search:hover{
      background: rgb(244, 244, 244);
  padding: 3px 12px;
}

/* box-one */
.box-one{width: 100%;}
.box-one .box-left{height: 330px;position: relative; padding-left: 0; padding-right: 14px;overflow: hidden;}
.box-one .box-left img{width: 100%; height: 100%;}
.box-one .box-left .box-slogan{ position: absolute; bottom: 9px; left: 9px; width: 58%;}
.box-one .box-left .box-slogan h4.title1{width: 100%; padding: 15px; text-align: justify; background: #006a6e; text-transform: uppercase; font-size: 16px; margin-bottom: 9px; float: left; font-family: "Segoe_UI";transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-one .box-left .box-slogan h4.title1:hover{background: #4b9f39; color: #fff;}
.box-one .box-left .box-slogan h4.title2{width: 100%; padding: 15px; text-align: justify; background: #33c67c; font-size: 16px; margin: 0;float: left;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-one .box-left .box-slogan h4.title2:hover{background: #00a5df; color: #fff;}
.box-one .box-right{height: 330px;padding: 0; margin: 0;}
.box-one .box-right ul.ul-right{height: 102.8%;margin: -4.5px;padding: 0;overflow: hidden;}
.box-one .box-right ul.ul-right li{width: 50%;height: 50%;padding: 4.5px;float: left;}
.box-one .box-right ul.ul-right .box1{width: 100%;height: 100%;background: #ff6a22; overflow: hidden; text-align: center;padding-top: 20%;position: relative; transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-one .box-right ul.ul-right .box2{width: 100%;height: 100%;background: #0f81a5; overflow: hidden; text-align: center;padding-top: 20%;position: relative; transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-one .box-right ul.ul-right .box3{width: 100%;height: 100%;background: #4b9f39; overflow: hidden; text-align: center;padding-top: 20%;position: relative; transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-one .box-right ul.ul-right .box4{width: 100%;height: 100%;background: #ffae0c; overflow: hidden; text-align: center;padding-top: 20%;position: relative; transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-one .box-right ul.ul-right .box1:hover{background: #ffae0c;color: #fff;}
.box-one .box-right ul.ul-right .box2:hover{background: #4b9f39;color: #fff;}
.box-one .box-right ul.ul-right .box3:hover{background: #0f81a5;color: #fff;}
.box-one .box-right ul.ul-right .box4:hover{background: #ff6a22;color: #fff;}

.box-one .box-right ul.ul-right .box1:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
.box-one .box-right ul.ul-right .box2:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
.box-one .box-right ul.ul-right .box3:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
.box-one .box-right ul.ul-right .box4:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}

/* box-two */
.wrap_collection{padding: 0;}
.box-two{width: 100%;margin-top: 15px;overflow: hidden; margin-top: 9px;}
.box-two .box-left{width: 100%; height: 100%; overflow: hidden;}
.box-two .box-left ul.ul-left{margin: 0 -4.5px;padding: 0;}
.box-two .box-left ul.ul-left li{width: 33.333333%;height: 150px;padding: 0 4.5px; float: left;}
.box-two .box-left ul.ul-left li .box1{width: 100%;height: 100%;background: #5333b6; overflow: hidden; position: relative; padding-top: 15%; text-align: center;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
ul.ul-left li .box1 h5, ul.ul-left li .box2 h5, ul.ul-left li .box3 h5{position: absolute; bottom: 20px;left: 20px; margin: 0;}
.box-two .box-left ul.ul-left li .box2{width: 100%;height: 100%;background: #ffae0c;overflow: hidden; position: relative; padding-top: 15%; text-align: center;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-two .box-left ul.ul-left li .box3{width: 100%;height: 100%;background: #c51b47;overflow: hidden; position: relative; padding-top: 15%; text-align: center;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-two .box-left ul.ul-left li .box1:hover{background: #008dcf;color: #fff;}
.box-two .box-left ul.ul-left li .box2:hover{background: #e36938;color: #fff;}
.box-two .box-left ul.ul-left li .box3:hover{background: #00b362; color: #fff;}
.box-two .box-left ul.ul-left li .box1:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
.box-two .box-left ul.ul-left li .box2:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
.box-two .box-left ul.ul-left li .box3:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}

.seemore{position: absolute;bottom: 15px;right: 15px;}
.wrap_login{padding: 0;}
.box-two .box-right{width: 100%;height: 150px;overflow: hidden;margin-left: 9px;}
.box-two .box-right .hello-login{width: 100%;height: 38px;margin-bottom: 9px;padding: 2px 15px;background: #0f81a5;}
.box-two .box-right ul{height: 68%;margin: 0 -4.5px;overflow: hidden;padding: 0;}
.box-two .box-right ul li{width: 50%;height: 100%;float: left;padding: 0 4.5px;overflow: hidden;}
.box-two .box-right ul li .login{width: 100%;height: 100%;overflow: hidden; background: #ff6a22;text-align: center;position: relative;padding-top: 15%;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-two .box-right ul li .login:hover{background: #ffae0c; color: #fff;}
.box-two .box-right ul li .register{width: 100%;height: 100%;overflow: hidden; background: #4b9f39;text-align: center;position: relative;padding-top: 15%;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-two .box-right ul li .register:hover{background: #83c957; color: #fff;}
.box-two .box-right ul li .login:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
.box-two .box-right ul li .register:hover>img{
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}
/* three */
.wrap_three_new{padding: 0;}
.wrap_three_add{padding: 0 0 0 10px;}
.box-three{width:100%;margin-top: 9px;}
.box-three ul.ul-three{height: 100%;overflow: hidden;margin: 0 -4.5px; padding: 0;}
.box-three ul.ul-three li{width: 50%; height: 100%;float: left;padding: 0 4.5px;}
.wrap_three_add .ul-three li{width: 100% !important;}
.box-three ul.ul-three li .box1{width: 100%;height: 200px; overflow: hidden; background: #008edf;padding-top: 15px;position: relative;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-three ul.ul-three li .box1 h4{text-align: center;color: #fff;}
.box-three ul.ul-three li .box2{width: 100%;height: 200px; overflow: hidden; background: #009500;padding-top: 15px;position: relative;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-three ul.ul-three li .box2 h4{text-align: center;color: #fff;}
.box-three ul.ul-three li ol{font-size: 14px; margin-left: 20px;padding-top:10px;overflow: hidden; float: left;list-style-type: decimal;}
.box-three ul.ul-three li ol li{width: 100%; float: left;display: list-item;text-align: -webkit-match-parent;list-style: decimal;}
.box-three ul.ul-three li .box3{width: 100%;height: 200px;overflow: hidden; background: #0758cc;transition-duration: 0.5s; -webkit-transition-duration:0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.box-three ul.ul-three li .box3 ul{width: 100%;height: auto;padding: 15px 25px;}
.box-three ul.ul-three li .box3 ul li{width: 100%;float: left;}
.name-home{list-style-image: url(../images/name-home.png);}
.adre{list-style-image: url(../images/addre.png);}
.phone{list-style-image: url(../images/phone.png); width: 47%; float: left;}
.fax{list-style-image: url(../images/fax.png); width: 47%; float: left;}
.email{list-style-image: url(../images/email.png);}
.admin{list-style-image: url(../images/admin.png);}
footer{width: 100%;height: auto;margin-top: 9px;clear: both; background: #222;}
footer .box-coppyright{width: 50%; margin: 10px 0;float: left; text-align: left;}
footer .box-sitemap{width: 50%; margin: 10px 0;float: right; text-align: right;}



/**
 * partials/wordpress
 * ---
 * Wordpess core classes
 */
/**
 * Alignment
 */
.alignnone {
  margin: 5px 15px 15px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
  margin: 5px 0 15px 15px;
}

.alignleft {
  float: left;
  margin: 5px 15px 15px 0;
}

/**
 * Gallery & images
 */
.wp-caption {
  background: white;
  border: thin solid #F0F0F0;
  max-width: 95%;
  padding: 5px 5px;
  text-align: center;
}
.wp-caption img {
  width: auto;
  max-width: 98.5%;
  height: auto;
  border: 0 none;
  padding: 0;
  margin: 0;
}

.wp-caption .wp-caption-text,
.gallery-caption {
  margin: 0;
  padding: 0 5px 5px;
  font-size: 140%;
  line-height: 1.5;
}

/**
 * partials/utils
 * ---
 * Utils classes
 */
.clear:before, .clear:after {
  content: " ";
  display: table;
}
.clear:after {
  clear: both;
}

.reset-box {
  padding: 0;
  margin: 0;
}

/**
 * partials/wrapper
 * ---
 */
.wrapper {
/*   max-width: 1280px; */
  padding: 0;
  margin: 0 auto;
  position: relative;
}

/**
 * partial/header
 * ---
 */
/**
 * partials/nav
 * ---
 * Menus
 */
/**
 * partials/sidebar
 * ---
 */
/**
 * partials/footer
 * ---
 */
/**
 * partials/print
 * ---
 * Print version
 * (from https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css)
 */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}