@charset "utf-8";
/*======================================== config =================================*
/*,*:before,*:after {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html {
     font-size: calc(10em / 16);
    /* for IE adjust. it's equal 62.5%*/
}
p {
     margin: 0px;
}
a {
     text-decoration: none;
     color: #333333;
}
a:hover,a:focus {
     text-decoration: none;
}
a,button,input {
     -webkit-transition: all 0.3s ease-in-out 0s;
     -o-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
}
* {
     margin: 0px;
     padding: 0px;
}
ul, ol {
     padding: 0;
     margin: 0;
}
li {
     list-style: none;
}
body {
     background: #fff;
     font-family: Roboto_Regular;
     color: #000;
     width: 100%;
     height: 100%;
     font-size: 1.4rem;
     line-height: 1.8;
}
del {
     font-size: 12px;
     color: #999;
}
h1, h2, h3, h4, h5, h6 {
     margin: 0;
     font-weight: 700;
}
.w_100 {
     width: 100%;
}
.row-flex{
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     flex-wrap: wrap;
}
.flex-reverse{
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     flex-wrap: wrap-reverse;
}
@keyframes animatedown {
     0%{
        -webkit-transform:translateY(-100%);
        transform:translateY(-100%)
    }
     100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
.fixed {
     position: fixed !important;
     top: 0px;
     z-index: 99;
     width: 100%;
     transition: top 0.3s;
     animation: animatedown 0.6s;
}
[class^='clearfix'] {
     clear: both;
     display: block;
}
.clearfix-130{
     height: 130px;
}
.clearfix-100{
     height: 100px;
}
.clearfix-80{
     height: 80px;
}
.clearfix-60{
     height: 60px;
}
.clearfix-55{
     height: 55px;
}
.clearfix-50{
     height: 50px;
}
.clearfix-45{
     height: 45px;
}
.clearfix-40{
     height: 40px;
}
.clearfix-35{
     height: 35px;
}
.clearfix-30{
     height: 30px;
}
.clearfix-32{
     height: 32px;
}
.clearfix-25{
     height: 25px;
}
.clearfix-20{
     height: 20px;
}
.clearfix-15{
     height: 15px;
}
.clearfix-12{
     height: 12px;
}
.clearfix-10{
     height: 10px;
}
.clearfix-5{
     height: 5px;
}
/*======================================== end config =================================*/
/*=========================================== begin menu =======================================*/
.menu_main {
     background: #fff;
    /* float: left;
     */
     float: right;
}
.nav.is-fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99;
}
.nav-container {
     position: fixed;
     top: 63px;
     left: 0;
     z-index: 9999;
    /*  overflow-y: auto; */
     visibility: hidden;
     width: 300px;
     max-width: 70%;
    /*  height: 100%;
     min-height: 100%; */
     margin: 0;
     padding: 0;
     -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
     transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     transform: translateX(-100%);
     -webkit-overflow-scrolling: touch;
}
.nav-container.is-visible {
     visibility: visible;
     -webkit-transform: translateX(0) !important;
     -ms-transform: translateX(0)!important;
     -moz-transform:translateX(0) !important;
     -o-transform:translateX(0) !important;
     transform: translateX(0) !important;
}
.nav-toggle {
     line-height: 1;
     display: inline-block;
     padding: 2px;
     border: 0;
     background-color: transparent;
     right: 0;
     width: 45px;
     height: 60px;
     position: fixed;
     z-index: 99;
     outline: none;
}
.nav-toggle span {
     position: relative;
     margin: auto;
     display: block;
     width: 25px;
     height: 2px;
     -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
     background-color: #0d7cd6;
    /*color btn menu mobile*/
}
.nav-toggle.is-active span{
     background: transparent;
}
.nav-toggle span:before, .nav-toggle span:after {
     content: '';
     top: -7px;
     width: 100%;
     height: 2px;
     position: absolute;
     left: 0;
     right: 0;
     margin: auto;
     background-color: #00afef;
     -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.nav-toggle.is-active span:before{
     -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
     -ms-transform: translateY(7px) translateX(0) rotate(45deg);
     transform: translateY(7px) translateX(0) rotate(45deg);
}
.nav-toggle span:after{
     top: inherit;
     bottom: -7px;
}
.nav-toggle.is-active span:after{
     -webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
     -ms-transform: translateY(-7px) translateX(0) rotate(-45deg);
     transform: translateY(-7px) translateX(0) rotate(-45deg);
}
.menu {
     list-style: none;
     margin: 0;
     padding: 0;
}
.nav-menu {
    /* background-color: #0d7cd6;
    /* background menu mobile */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
.nav-menu .menu-item {
     border-top: 1px solid #ebebeb;
    /*border menu cấp 1 menu mobile */
}
 .nav-menu > .menu-item.is-active {
     background: #00afef;
}
 .nav-menu > .menu-item.is-active > .menu-link{
     color: #fff
}
.nav-menu > .menu-item:hover {
     background: #00afef;
}
 .nav-menu > .menu-item:hover > .menu-link{
     color: #fff
}
.nav-menu > .menu-item.is-active.has-dropdown:after,.nav-menu > .menu-item:hover.has-dropdown:after {
     color: #ffffff;
}
.nav-dropdown > .menu-item {
     padding-left: 10px;
}
.nav-menu .menu-link {
     color: #00afef;
     font-size: 14px;
     display: block;
     text-decoration: none;
     padding: 3px 15px;
}
.has-dropdown {
     position: relative;
     cursor: pointer;
}
.has-dropdown > .menu-link {
     display: inline-block;
}
.has-dropdown:after {
     padding-top: 0px;
     font-size: 24px;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     content: "\f105";
     font: normal normal normal 20px/1 FontAwesome;
     color: #000;
     line-height: 39px;
     width: 40px;
     height: 40px;
     text-align: center;
     -webkit-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}
.has-dropdown.is-active:after {
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}
.nav-dropdown {
     display: none;
     background: #f3f3f3;
}
.nav-dropdown .nav-dropdown {
     background-color: #aaa;
}
.nav-dropdown .nav-dropdown .menu-item {
     background-color: rgb(15, 155, 163) !important;
}
.nav-menu > .menu-item > .menu-link {
     padding: 8px 15px;
}
@media (max-width: 991px){
     .nav-container {
/*          overflow-x: hidden;
 */         background: #fff;
        /* background menu mobile */
         padding-bottom: 100px;
    }
}
/*============= menu_desktop ==============*/
@media (min-width: 992px) {
     .fixed {
         box-shadow: 0 0 3px 2px #ccc;
    }
     .nav, .nav-container, .nav-container.is-visible {
         position: static;
         top: auto;
         left: auto;
         z-index: auto;
         -webkit-transform: translateX(0);
         -ms-transform: translateX(0);
         transform: translateX(0);
    }
     .nav-container, .nav-container.is-visible {
         visibility: visible;
         height: auto;
         min-height: 0;
         overflow-y: visible;
         width: 100%;
         max-width: 100%;
    }
     .nav-toggle {
         display: none;
    }
     .nav-menu > .menu-item:hover, .nav-menu > .menu-item.is-active {
         background-color: transparent;
        /* background khi hover và active menu-item */
    }
     .nav-menu .menu-item {
         -webkit-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
         transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }
     .nav-menu .menu-link{
         padding: 8px 15px;
    }
     .has-dropdown:after {
         content: "\f0d7";
        /*icon dropdown menu pc */
         font: normal normal normal 14px/1 FontAwesome;
         color: #000;
    }
     .nav-menu > .has-dropdown:after {
         position: absolute;
         top: 50%;
         bottom: inherit;
         right: 16px;
         width: 10px;
         height: 10px;
         transform: translateY(-50%);
         line-height: 10px;
    }
     .nav-menu > .menu-item.is-active.has-dropdown:after, .nav-menu > .menu-item:hover.has-dropdown:after {
         color: #0098da;
        /*color khi hover icon dropdown menu pc */
    }
     .nav-dropdown {
         left: 0px;
         display: block;
         opacity: 0;
         position: absolute;
         top: 100%;
         width: 215px;
         margin: 0;
         background-color: transparent;
         border-radius: 0px;
         box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.15);
         visibility: hidden;
         -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s linear;
         transition: visibility 0s linear 0.25s, opacity 0.25s linear;
    }
     .has-dropdown:hover > .nav-dropdown {
         visibility: visible;
         opacity: 1;
         -webkit-transition-delay: 0s;
         transition-delay: 0s;
    }
     .nav-dropdown .menu-item {
         border: 0;
         margin-top: 1px;
    }
     .nav-dropdown .menu-item:last-child {
         border: 0;
         border-bottom: none;
    }
     .nav-dropdown .menu-item:hover, .nav-dropdown .nav-dropdown .menu-item:hover {
         background-color: #2196f3;
        /* background khi hover menu cấp 2 pc */
    }
     .nav-dropdown .nav-dropdown .menu-item:hover {
         color: #333;
    }
     .nav-dropdown .menu-item:hover .menu-link, .nav-dropdown .menu-item:hover .menu-link {
         color: #ffffff;
    }
     .nav-dropdown .nav-dropdown, .nav-dropdown .nav-dropdown .menu-item {
         background-color: #dedede;
    }
     .nav-dropdown .nav-dropdown {
         z-index: 998;
         top: 0;
         left: 100%;
    }
    /*padding, color, font-size menu pc*/
     .nav-menu > .menu-item > .menu-link {
         display: block;
         line-height: 20px;
         padding: 35px 28px 30px 0px;
         font-size: 15px;
         color: #0d0d0d;
         /* text-transform: uppercase; */
         -webkit-transition: all 0.15s linear;
         -moz-transition: all 0.15s linear;
         -o-transition: all 0.15s linear;
         transition: all 0.15s linear;
    }
    /* /padding menu pc*/
     .nav-menu > .menu-item {
         position: relative;
         float: left;
         padding: 0px;
         border-top: 0px;
    }
     .nav-menu, .nav {
         background: none;
    }
     .nav-menu > .menu-item.is-active > .menu-link, .nav-menu > .menu-item:hover > .menu-link {
         color: #0098da;
        /*color khi hover và active menu pc*/
    }
     .nav-dropdown > .menu-item {
         padding: 0;
         background: #ffffff;
    }
     .nav-dropdown>.menu-item>.menu-link {
         color: #0d0d0d;
    }
     .nav-dropdown>.menu-item:hover>.menu-link {
         color: #ffffff ;
    }
     .nav-menu > .menu-item {
         position: relative;
    }
}
.menu_mb{
     position: fixed;
     width: 100%;
     background: #ffffff;
     z-index: 9;
     padding: 1px 5px;
     height: 62px;
     box-shadow: 0 0 3px 2px #ccc
}
.logo_mb{
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     height: 60px;
     align-items: center;
     justify-content: center;
     max-width: 70%;
     width: 100%;
     margin: auto;
}
.img_logo_mb{
     max-height: 100%;
     max-width: 100%
}
.menu_main .nav.is-fixed{
     position: relative;
     z-index: 105;
}
.logo_pc img{
     max-width: 100%;
     width: 193px;
     height: 56px;
     margin-top: 5px;
}
.menu_header{
     background: #fff;
}
.header .qts_head_bot{
     height: 42px;
}
/*============= end menu_desktop ==============*/
/*=========================================== end menu =======================================*/
/*=========================================== btn search **=======================================*/
.form_search {
     width: 210px;
     max-width: 100%;
     float: left;
     margin-top: 14px;
     margin-bottom: 5px;
}
.form_search input.form-control {
     border: 1px solid #cccccc;
     border-right: 0px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
}
.form_search input.form-control {
     border: 1px solid #cccccc;
     border-right: 0px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
}
.form_search button.btn.btn-default {
     border: 1px solid #cccccc;
     color: #cccccc;
     border-left: 0px;
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
}
.menu_mb .search_drop {
     position: fixed;
     top: 0px;
     bottom: auto;
     height: 62px;
     left: 250px;
     z-index: 999;
     margin: auto;
     border: 0;
     padding-left: 0 !important;
     cursor: pointer;
}
.menu_mb .search_drop .btn_search{
     line-height: 40px;
     width: 40px;
     height: 40px;
     text-align: center;
     display: block;
     margin: 11px 0;
     font-size: 25px;
}
.menu_mb .search_drop .form_search:before{
     right: 13px;
}
.menu_mb .search_drop .form_search {
     position: fixed;
     right: 0px;
     width: 100%;
     top: 0;
     visibility: hidden;
     transform: translateY(0px)
}
.menu_mb .search_drop .form_search.open {
     visibility: visible;
     z-index: 11;
}
/*=========================================== end btn search **=======================================*/
/*=========================================== tìm kiếm theo danh mục **=======================================*/
.search_box{
     margin: 10px auto;
     max-width: 500px;
}
.search_box .input-group{
     display: flex;
}
.btn-select{
     height: 40px;
     border: 2px solid #0098da;
}
.btn-select option{
     padding: 5px;
}
.input_search{
     border: 2px solid #0098da;
     height: 40px;
     font-size: 12px;
     border-left: 1px solid #ccc;
}
.input_search[type="text"]:focus{
     outline: 0;
}
.but_search_top{
     background: #0098da;
     border: 2px solid #0098da;
     height: 40px;
     width: 114px;
     color: #ffffff;
     font-size: 13px;
     text-transform: uppercase;
     font-weight: bold;
     border-radius: 0px;
}
.but_search_top:hover, .but_search_top:focus, .but_search_top.focus, .but_search_top:active, .but_search_top.active, .open>.but_search_top.btn-default {
     color: #ff0000;
     background: #0098da;
     border: 2px solid #0098da;
}
/*=========================================== end tìm kiếm theo danh mục **=======================================*/
.arrow-slider{
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #fff;
     color: #a0a0a0;
     text-align: center;
     font-size: 23px;
     line-height: 40px;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
}
#go_top {
     position: fixed;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     background: #000;
     color: #fff;
     text-align: center;
     line-height: 25px;
     font-size: 18px;
     font-weight: bold;
     background-size: 100% 100%;
     display: inline-block;
     z-index: 100;
     bottom: 25px;
     right: 25px;
     display: none;
}
@media (max-width: 991px) {
     .overlay{
         position: fixed;
         z-index: 9;
         display: none;
         background: rgba(0, 0, 0, 0.6);
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         cursor: pointer;
    }
     .arrow-slider {
         width: 25px;
         height: 25px;
         font-size: 21px;
         line-height: 24px;
    }
}
/* ================================== menu dọc ** =================================*/
.sidebar .title_sidebar {
     background: #0098da;
     color: #fff;
     font-size: 16px;
     font-family: Roboto_Bold;
     position: relative;
     padding: 15px 14px;
     text-transform: uppercase;
     cursor: pointer
}
.sidebar .menu-aside {
     border: 1px solid #ccc;
     padding: 5px 0
}
.sidebar .menu-aside li {
     font-family: Roboto_Regular;
     font-size: 14px;
     border-bottom: 1px dashed #ccc
}
.sidebar .menu-aside li a {
     display: block;
     color: #333;
     padding: 7.5px 13px;
}
.sidebar .menu-aside li:last-child {
     border-bottom: 0
}
.sidebar .menu-aside li:hover>a,.sidebar .menu-aside li.is-active>a {
     color: #0098da;
}
.menu-aside .has-dropdown:after{
     content: "\f105";
     font: normal normal normal 14px/1 FontAwesome;
     line-height: 40px;
     color: #000;
}
.nav-aside {
     left: 100%;
     top: -1px;
     border: 1px solid #ccc;
     z-index: 999;
     background: #fff
}
@media (max-width: 991px) {
     .nav-aside{
         border: 0;
         border-top: 1px solid #ccc;
    }
     .sidebar .menu-aside li.has-dropdown.is-active{
         border-bottom: 1px solid #ccc;
    }
     .sidebar .menu-aside .nav-aside li a{
         padding-left: 20px;
    }
     .sidebar .menu-aside > li.has-dropdown > a{
         display: inline-block;
    }
}
/* ================================== end menu dọc **=================================*/
.qts_head_bot {
     background: #009feb;
}
.gng {
     font-family: 'Roboto_Bold';
    /*width: 15%;
    */
     float: right;
     text-align: right;
     padding: 0px 27px 0px 23px;
     text-transform: uppercase;
     font-size: 17px;
}
.ul_cty > li {
     display: inline-table;
     padding: 10px 10px;
     font-size: 17px;
     line-height: 18px;
}
.ul_cty > li > a {
     color: #ffffff;
}
/*----------*/
.gc-icon.gc-icon-download{
     display: none !important;
}
.gc-thumbs-area-next .gc-icon.gc-icon-next:before{
     content: "\f105" !important;
     font: normal normal normal 24px/1 fontawesome !important;
     width: 24px;
     height: 24px;
     text-align: center;
}
.gc-thumbs-area-prev .gc-icon.gc-icon-prev:before{
     content: "\f104" !important;
     font: normal normal normal 24px/1 fontawesome !important;
     width: 24px;
     height: 24px;
     text-align: center;
}
.gc-display-area .gc-icon.gc-icon-next{
     width: 36px !important;
     height: 50px !important;
     right: 10px;
}
.gc-display-area .gc-icon.gc-icon-next:before{
     content: "\f105" !important;
     font: normal normal normal 48px/1 fontawesome !important;
     width: 36px;
     color: #fff;
     height: 50px;
     text-align: center;
}
.gc-display-area .gc-icon.gc-icon-prev{
     width: 36px !important;
     height: 50px !important;
     left: 10px;
}
.gc-display-area .gc-icon.gc-icon-prev:before{
     content: "\f104" !important;
     font: normal normal normal 48px/1 fontawesome !important;
     width: 36px;
     color: #fff;
     height: 50px;
     text-align: center;
}
.gc-overlay-right-icons .gc-icon.gc-icon-next{
     width: 36px !important;
     height: 50px !important;
     text-align: center;
}
.gc-overlay-right-icons .gc-icon.gc-icon-next:before{
     content: "\f105" !important;
     font: normal normal normal 48px/1 fontawesome !important;
     width: 36px !important;
     height: 50px !important;
     color: #fff;
}
.gc-overlay-left-icons .gc-icon.gc-icon-prev{
     width: 36px !important;
     height: 50px !important;
     text-align: center;
}
.gc-overlay-left-icons .gc-icon.gc-icon-prev:before{
     content: "\f104" !important;
     font: normal normal normal 48px/1 fontawesome !important;
     width: 36px !important;
     height: 50px !important;
     color: #fff;
}
.gc-icon.gc-icon-enlarge{
     display: none !important;
}
.gc-overlay-top-icons .gc-icon.gc-icon-close:before{
     content: "\f00d" !important;
     font: normal normal normal 25px/1 fontawesome !important;
     color: #fff;
     width: 24px;
     text-align: center;
}
.glass-case{
     margin: auto;
}