:root {
  --lightblue:#def3ff;
   --darkblue: #252e41;
    --blue:#0579b6 ;
    --blue2: #01c6db;
    --black: #1e283c;
    --boxshadow:0 0 10px 10px rgba(0,0,0,.1);
    --gradient:  linear-gradient(to right, var(--blue), var(--blue2));
}


@font-face {
  font-family:'montserrat';
  src:url(../fonts/Montserrat-Regular.ttf) format('truetype'); 
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family:'montserrat';
  src:url(../fonts/Montserrat-Medium.ttf) format('truetype'); 
  font-weight:500;
  font-style: normal;
}


@font-face {
  font-family:'montserrat';
  src:url(../fonts/Montserrat-Medium.ttf) format('truetype'); 
  font-weight:bold;
  font-style: normal;
}

.error {color:crimson;
}
 
.width100 {float:left; width:100%}

.width50 {float:left;width: 50%;}
div {transition: width .3s, height .3s}
ul {list-style: none;padding:0;margin:0}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

html, body {float:left; width: 100%; overflow-x:hidden}
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--black);  
  font-family: montserrat;
}

/*--------Wrapper---------*/
 
#bootstrap-touch-slider  {min-height: auto; height: 0; padding-bottom: 50%}

/*---Header---*/
.header-filler {float:left; width:100%; height: 130px;}
header {float:left; width:100%; height:130px; position: fixed; background:  #ec1d1d ; z-index:99;}
header .current {color:#0da0f4 !important;}
header .main {position: relative;}

.menu { list-style:none;float:left; width: 100%; margin-bottom:0;  position: absolute; border-top: 1px solid rgba(7,117,176,.8);padding-top:13px}
.menu>li {float:left}
.menu>li:first-child a {padding:0 15px 0 0}
.menu>li>a { padding:0 15px; font-size: 14px; font-weight: bold; display:block; color:white; text-transform:uppercase; width: 100%; text-decoration: none;}
.menu .active,.menu>li>a:hover {color:var(--blue2);}
.menu>li:hover > .menucon {display:block; transition:all .3s}

.menu .menucon {box-shadow:0 10px 10px rgba(0,0,0,.1); position:absolute; padding-bottom:10px; z-index:999999;padding:0; display:none; background:white; margin-top:0px;}
.menu .menucon>li {position:relative; width:100%; text-align:left; line-height: 25px;}
.menu .menucon>li>a {display: inline-block; padding:10px 15px; text-decoration:none; text-transform: uppercase; width: 100%}
.menu .menucon>li>a:hover {color: var(--blue2); background: #eee}
.menu .menucon>li:hover .menulv3 {display:block}

.search-box {float:right;width:300px; margin-right: 200px; margin-top: 23px; position: relative; box-shadow: none;  border-radius: 15px; overflow: hidden;}
.search-box .text-box {height: 35px; width: 100%;border:none; padding:5px 10px}
.search-box button {position: absolute; top:-1px; right: 0; height: 36px; background: #281706; padding:5px 10px; border:none; color:white}
.search-box button:hover {background: var(--blue2)}
  
.logo {float:left;}
.logo img {height:80px;transition:all .3s;   position:relative; }

.toggle-menu-desktop {position:absolute; left:10px; top:76px; font-size: 35px; color: white; cursor:pointer; display:none }
.toggle-menu-desktop:hover {color:var(--blue);}
 

.list-mobile {width:300px; top:130px; bottom:50px; transition:all .5s; background:white; float:right; position:fixed; z-index:999999;  overflow:auto; box-shadow: var(--boxshadow) }

.list-mobile a {color:var(--darkblue)}
.list-mobile>ul {width:100%; float:left; font-size:14px; text-transform: uppercase; padding:15px; list-style: none}
.list-mobile>ul li {  position: relative; float:left; width: 100%}
.list-mobile>ul li>a {display:block; margin-bottom:-1px; border-bottom:1px solid #ccc; width:100%; padding:8px 12px; }
.list-mobile>ul li>a:hover, .list-mobile .active  {background:var(--lightblue);border-bottom:1px solid white;text-decoration:none; width:100%;  }

.list-mobile>ul li:last-child a {border:none}


.list-mobile .list-mobile-sub {float:left; width: 100%; display: none; padding-left:20px; display: none}
 
.list-mobile .expand, .list-mobile .collapse {position: absolute; right: 10px; top:0; padding:10px 15px; cursor: pointer;}
.list-mobile .collapse {display: none;} 

/* width */
.list-mobile::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.list-mobile::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.list-mobile::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--blue), var(--blue2));
}

/* Handle on hover */
.list-mobile::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.list-menu-left {left:-100%}
.list-menu-left .close-menu {float:right; font-size: 30px; padding:5px 12px; cursor: pointer;}
.list-menu-left .close-menu:hover {color:var(--blue)}

.list-menu-left-show {left:0; transition:all .5s; }


.list-product {right:-100%; transition: all .5s; left:auto;}
.list-product a i {width: 25px}
.list-product-show {right: 0; left:auto; transition: all .5s}

/*---Content---*/
.content { float:left; width:100%;  }
.content>.width100 {padding:50px 0}
.content>.width100:nth-child(odd ) {background: #f1faff}
.main {max-width:1200px; position: relative; margin:auto; height:auto}
.readmore {width: 100%;float: left; margin: 20px 0; text-align: center;}
.readmore a {padding:15px 25px; border-radius: 30px; font-size: 15px; text-transform: uppercase; font-weight: bold; background:linear-gradient(to right, #271606, #b35507); color: white; text-decoration: none; }
.readmore a:hover {background:#0da0f4; color:white;  }
.home_ctn .readmore, .design_ctn .readmore, .service_ctn .readmore {width:100%; margin:30px 0; text-align:center}
/*---Logo---*/


.breadcrumb {margin-bottom: 20px; float:left; width: 100%}

 

/*---Trang chủ---*/
 

#form-contact { margin-top: -120px}
#form-contact h2 {border-top-left-radius: 10px; border-top-right-radius: 10px;height: 70px; padding: 20px; margin-bottom: 0; font-size: 25px;background: linear-gradient(to right, var(--blue), var(--blue2)); color: white;  font-weight: bold;text-align: center;}
#form-contact>.width100 {padding: 30px; background: #f2f5fa; }

#form-contact input.form-control {padding: 20px; height: 50px; border: none; background: #e6ebf4}
#form-contact textarea.form-control {padding: 20px;   border: none; background: #e6ebf4}

#map-canvas {width:100%; height: 460px;margin-bottom:20px;}
.home, .design, .software, .service, .project, .news, .domain-hosting, .contact {}

#news .news_col {height:200px}
#news .newspic {width:100%}
#news .news_col .title {border:none}
#news .news_col .des {padding-top:10px; border-bottom:none; border-top:2px dotted #ccc;}
/*---Service---*/

.news {float:left; width:100%; position: relative;  margin-bottom:10px; /* height: 420px;*/}
.news .img {float: left; width: 100%; height: 0; padding-bottom: 56%; overflow: hidden; position: relative; border-radius: 10px;}
.news .img img {position: absolute; left: 0; top: 0; width:100%; height: 100%; object-fit: cover}
.news .info {float:left; width:90%; margin-top:25px; background: #f2f5fa; margin-top: -40px; position: relative; padding: 20px; margin-left: 5%; margin-right: 5%; border-radius: 10px;}

.news .info .cat_name {float: left; width: 100%; text-align: center; font-weight: bold; text-transform: uppercase; margin-top: 10px; margin-bottom: 20px;text-transform: uppercase; color: var(--blue2)}
.news .info .title {float:left; width:100%; font-size:18px; line-height: 25px; height: 50px; overflow: hidden; font-weight:500; margin: 0;color:var(--black);}
.news .info .title a {color: var(--black)}
.news .info .des {float: left;color: #50668f; line-height: 20px; height: 60px; overflow: hidden}
.news .date {float:left; width:100%; font-size:14px;  }
.news .date i {color:var(blue); width:20px;}

.news1 {float:left; width:100%; height:0; margin-bottom:20px;  padding-bottom:60%; position:relative; overflow:hidden }
.news1 img {position:absolute; left:0; top:0; z-index:9;width:100%; height: 100%; object-fit: cover; transition:all .3s}
.news1 .title {padding:10px;   font-size:16px !important;position:absolute;right:10px; left:10px; bottom:10px; background:rgba(0,0,0,.5); color:white; border-radius:10px; color:white; z-index:99}
.news1:hover .title {background: var(--blue)}

.news2 {width:100%;position:relative; padding-left:130px; float:left; margin-bottom: 15px; overflow: hidden; height:auto}
.news2pic { float:left; height:100px; overflow: hidden; position: absolute; left:0; top:0; width:120px}
.news2pic img {width:100%; float:left; min-height:100px; object-fit: cover}
.news2pic img:hover {opacity:.5; transition:all .3s}
.news2 .news2info {float:left; width:100%}
.news2 h2 {margin:0}
.news2 a:hover {text-decoration:none; color:var(--blue)}
.news2 .title {width:100%;font-size:14px; font-weight:bold; color:white;float:left; margin: 0; line-height: 20px}
.news2 .des {float:left; text-align: justify; padding-bottom:10px; line-height: 20px; height:60px; overflow: hidden; color:var(--blue2)}
.news2 .des p {color:#3b5998}
.news2 .title:hover {color:var(--blue2)}

 

.other_ctn {}
.otherfixed {position:fixed; width:20%; float:left; margin-top:-50px; margin-bottom:10px}
.other {width:100%; padding-bottom:10px; }
.other ul {padding: 0}
.other li {list-style:none}
.other .service_col {height:80px; border:none}
.other .title {border:none; font-size:14px; text-transform:none}
.other .service_pic {height:50px;}
 
/*---Project---*/
 

.simplePagerNav {float:left !important; width:100%; text-align:center}
.simplePagerNav li {margin:10px; padding:10px 15px; background: #ccc; border-radius:50%; display:inline-block}
.simplePagerNav li:hover {background:#0da0f4}
.simplePagerNav li:hover a {color:white}
.simplePagerNav a {color:white;}
.simplePagerNav a:focus {color:white}
.currentPage {background:#0da0f4 !important;}
/*---News---*/
.news_other {float:left; transition:none !important; }
.width {width:100%}
.news_other ul {margin-left:30px; font-size:17px; font-weight:none; border-radius: 10px; overflow: hidden}
.news_other li { height: 45px; margin-bottom: 10px;  width: 100%;}
.news_other li:last-child {border:none}
.news_other .active {background:linear-gradient(to right, var(--blue), var(--blue2)); color: White}
.news_other a {display: inline-block; width: 100%; text-decoration:none; color:#777; padding: 15px; background: #f1f1f1;}
.news_other a:hover {background:linear-gradient(to right, var(--blue), var(--blue2)); color: White;text-decoration:none}
.news_col { width:100%; float:left;  margin-bottom: 15px; overflow: hidden; height: 400px;}
.news_pic {width:100%;float:left; height:180px; overflow: hidden; position: relative; text-align:center}
.news_pic img {max-width:100%; height:100%}
.news_col .title {font-size:14px; line-height:20px; font-weight:500; float:left; font-family:montserrat; width:100%; height:45px; 
              text-transform:uppercase; margin-top:5px; padding-bottom:10px; border-bottom: 2px dotted #ccc}
.news_col .des {float:left; text-align: justify; padding-bottom:10px; border-bottom: 2px dotted #ccc; height:100px}
.post_content {text-align:justify !important; padding: 10px}
/*---Domain---*/
#domain_table {box-shadow:0 0 20px rgba(0,0,0,.1)}
#domain_table thead {background:linear-gradient(to right, var(--darkblue), var(--blue)); }
#domain_table {text-align:center}
#domain_table th {color:white; font-weight:normal !important;  text-transform:uppercase; border:none; text-align:center}
#domain_table tbody tr:hover {background:#eeeeee}

#dh a {font-size:20px; padding: 30px; font-family:montserrat; text-transform: uppercase}
#dh .active a {background:linear-gradient(to right, var(--darkblue), var(--blue)); color:white; border:1px solid linear-gradient(to right, var(--darkblue), var(--blue)); }
#dh li a {border:none; }
/*---Hosting---*/
#hosting_table {text-align:center; box-shadow:0 0 20px rgba(0,0,0,.1)}
#hosting_table .active {background:green; border-right:1px solid #ccc; border-left:1px solid #ccc}
#hosting_table th {border-top:none;}
#hosting_table tr:first-child {background:linear-gradient(to right, var(--darkblue), var(--blue)); color:white; text-transform: uppercase;   font-weight:normal}

/*---Design---*/
.project_col { width:100%; float:left;  margin-bottom: 15px; overflow: hidden; height: 400px;}
.project_pic {width:100%;float:left; height:180px; overflow: hidden; position: relative; text-align:center}
.project_pic img {max-width:100%; height:100%}
.project_col .title {text-align:center;font-size:14px; line-height:20px; font-weight:500; float:left; font-family:montserrat; width:100%; height:45px; 
              text-transform:uppercase; margin-top:5px; padding-bottom:10px; border-bottom: 2px dotted #ccc}
.project_col .des {float:left; text-align: justify; padding-bottom:10px; border-bottom: 2px dotted #ccc; height:100px}

/*---Heading---*/

.heading-home  {font-size:35px; color:var(--black);  font-weight: 500; width:100%; text-align:center; }

.heading {float:left; width: 100%;min-height:40px; margin-bottom: 20px; margin-top:0; font-size: 18px; border-bottom:1px solid var(--blue2) }
.heading> span, .heading>a {color:white; padding:10px 20px; font-size:18px; display:inline-block; background:linear-gradient(to right, #271606, #b35507);  }
.heading a:hover {color:white}


.heading-home:after {
display: block;
    margin: 1.875rem auto 0;
    height: 3px;
    width: 73px;
    content: ""; background: var(--blue);

}

.none {display: none;}
.des-home {float: left; width: 100%; text-align: center; color: #50668f; font-size: 16px; margin-bottom: 50px;}
 
.nav .nav-tabs .nav-justified .active {background:linear-gradient(to right, var(--darkblue), var(--blue))}


/*---Pagination---*/
.pagination{text-align: center; margin: 20px 0; width:100%}
.pagination>strong{padding: 10px 15px; background:#0da0f4; border-radius:25px; color: #fff }
.pagination>a{background: #ccc; padding: 10px 15px; border-radius:25px; color: #fff}
.pagination>a:hover{text-decoration: none; color:white; font-weight: bold }
 
 
footer ul a {font-size:14px; color:#ccc}   
footer ul a:hover {color:white}
/*---Footer---*/
footer {min-height:150px; width:100%; padding: 20px 0; float:left; background:var(--darkblue); line-height: 30px; color:white; position:relative; z-index:9; }
footer h2 {font-size:20px;}

footer .heading-footer {text-transform: uppercase ; margin-bottom: 30px}
footer .counter {margin-top:20px}
footer span, footer .about div {font-size:12px !important; background:none!important; color:#ccc;}
footer .about strong {color:white}
footer .about {float:left; height:140px; overflow:hidden}
footer .about div {float:left}

footer .facebook {float:left; font-size:30px; margin-top:10px}
footer .facebook i {background:#ccc; padding:10px 17px; border-radius:50%; color:white; text-decoration:none; transition:all .3s}
footer .facebook i:hover {background:#285c79; transform: rotate(360deg); transition:all .3s}

footer .google {float:left; font-size:30px; margin:10px 0 0 10px}
footer .google i {background:#ccc; padding:10px 12px; border-radius:50%; color:white; text-decoration:none; transition:all .3s}
footer .google i:hover {background:crimson; transform: rotate(360deg); transition:all .3s}
footer .gov {float:left; width:100%; padding:10px 0 }

.read {width:100%; float:left; text-align:right; margin:30px 0;}
.read a {padding:10px 20px; border:1px solid white; color:white}
.read a:hover {background:white; color:#31353e; transition:all .3s}


.social_footer {position: fixed; bottom:40px; right: 10px; width: 60px;}
.social_footer img {margin-top:10px;  transition: all .5s;; border-radius: 50%;  border:2px solid white;}
.social_footer img:hover {box-shadow: 0 0 10px 10px white; transition: all .5s; border-radius: 50%}
.social_footer span {display: none;}



.customer-bar{position: absolute; top:30px; right: 10px;height: 30px; }
.customer-bar .fullname {color:white}
.customer-bar .fullname span {color:white}

.customer-bar>ul {float:left; width: 100%}
.customer-bar>ul>li {float:left; position: relative;}
.customer-bar>ul>li>a {color:white; font-size:14px; text-decoration: none; margin-left:15px}
.customer-bar>ul>li>a:hover {color:var(--blue)}

.customer-bar .customer-info {position: absolute; top:20px; right:0; display: none; width: 280px; background: white; box-shadow: 0 10px 10px rgba(0,0,0,.1); z-index: 9999999}
.customer-bar>ul>li:hover .customer-info {display: block}


.customer-bar .customer-info .avatar {float:left; width: 100px; height: 100px; padding:10px}
.customer-bar .customer-info .list-menu {float:left; width: 180px; padding:10px; font-size: 14px}
.customer-bar .customer-info a {display: inline-block; padding:5px 10px; text-decoration: none; color:black}
.customer-bar .customer-info a:hover {color:var(--blue);}

 



.service {float: left; width: 100%; position: relative; padding: 0 0 0 100px; height: 100px; margin-bottom: 30px;}
.service .img {position: absolute; left: 0; top: 0; width: 90px; height: 90px;}
.service .img img {width: 90px; height: 90px;}
.service .info {float: left; position: relative; }
.service a {color: var(--black)}
.service a:hover {text-decoration: none; color: var(--blue)}
.service .title {float: left; width: 100%;color: var(--black); font-weight: bold; height: 40px; text-transform: uppercase; font-size: 15px; line-height: 20px; margin: 0 0 10px 0 }
.service .des {float: left; width: 100%; color: #50668f; line-height: 20px; height: 40px; overflow: hidden;}


.dev_img {max-width: 100%; }

.main .heading-home a {color: #271606 !important;}


.video {float:left; width:100%;  margin-bottom:20px;}
.video .embed {float:left; width: 100%; height: 0; padding-bottom: 60%; position: relative;}
.video .embed iframe {position: absolute; left:0; top:0; right:0; bottom:0; height: 100%; width:100%; }
.video .info {float:left; width: 100%;}
.video .info .title {float:left; width: 100%; text-transform: uppercase; font-weight: bold; color: #422207;}


.album {float:left; width: 100%; margin-bottom: 20px}
.album .img {float:left; width: 100%; height: 0; padding-bottom: 60%; position: relative; overflow: hidden}
.album .img img {position: absolute; width: 100%; height: 100%; left:0; top:0; object-fit: cover;}
.album .info {float:left; width:100%; }
.album .info .title {float:left; width: 100%; font-weight: bold; text-transform: uppercase; color:#422207; margin-top:10px; height: 40px; overflow: hidden}

.album:hover .title {color:var(--blue)}

.gallery {float:left; width:100%; height: 0; padding-bottom: 60%; position: relative; margin-bottom: 20px}
.gallery img {position: absolute; transition: all .5s; left:0; top:0; right:0; bottom:0; height: 100%; width:100%; object-fit: cover }
.gallery:hover img {transform: scale(1.1,1.1); transition: all .5s}

.heading-home {float:left; width: 100%; font-size:25px; text-transform: uppercase; color: var(--blue); margin: 20px 0 20px 0}
.heading-center {text-align: center}

.chihoi {float:left; width: 100%; height: 0; padding-bottom: 100%; position: relative; overflow: hidden; border:1px solid #ccc; margin-bottom: 20px; background: white}
.chihoi img {position: absolute; left:0; top:0; right: 0; border: 0; width: 100%; height: 100%; object-fit: contain; padding:10px}

.slogan {float:left; width: 100%; text-align: center; font-size:25px; color:#666; letter-spacing: 1px; padding:10px; margin-bottom: 30px}

.home-block {float:left; width: 100%; padding:40px 10px}
 
.home-gray {background: #eee}



.news-block {background:#434343;}
.news-block .des-home, .news-block .heading-home {color:white} 

.module {float:left; width: 100%; margin-bottom: 20px}

.module-header {float:left; width: 100%; background: linear-gradient(to right, var(--blue), var(--blue2)); color:white; text-decoration: none;text-align: center; font-size: 16px; text-transform: uppercase; line-height: 40px; margin:0;}

.category {float:left; text-transform: uppercase; width:100%; background:white; font-size:15px; box-shadow: var(--boxshadow)}
.category>ul {float:left; width: 100%; margin:0; padding:0}
.category>ul>li {float:left; width: 100%}
.category>ul>li>a {float:left; width: 100%; display: inline-block;height: 40px; padding:10px 15px}
.category>ul>li>a:hover {background: #eee}
.category .open {margin-top:-38px; margin-right:0 !important; display:none; color:#333}
.category .exit {margin-top:-46px !important; margin-right:0 !important; display:block; color:#333}

.subcate {list-style:none}

.subcate a {color:#666;margin-left:22px }
.category a.active {color:var(--yellow)}
.category a:hover {color:var(--yellow); text-decoration:none}

.box {float:left; width:100%;border-radius: 0  !important; box-shadow: var(--boxshadow) !important}
.box-solid {border:none !important; }
.box h1 {margin:0; font-size:18px}
.box .box-header {background:  linear-gradient(to right, #271606, #b35507) !important; padding:10px 15px}

.padding-0 {padding:0}

.hoivien {float:left; width: 100%; text-align: center; margin-bottom: 20px;  box-shadow: var(--boxshadow);  transition:all .5s}
.hoivien .img {width: 100%;height: 0; padding-bottom: 100%;  position: relative; overflow: hidden; text-align: center; }
.hoivien .img img {width: 100%; height: 100%; position: absolute;left: 0; top:0; object-fit: contain; padding:10px;}
.hoivien .info {float:left; width: 100%; padding:15px 10px;}
.hoivien .info .title {float: left; width: 100%;  font-size: 16px; text-align: center; text-transform: uppercase;  color:black; line-height: 20px; height: 40px; overflow: hidden}
.hoivien .info .xemthem {float:left; width: 100%; text-align: center; color:var(--blue); font-weight: bold; margin-top:10px}

.hoivien:hover {box-shadow: 0 0 15px 15px rgba(9,111,166,.3); transition:all .5s}

#nganhnghe .item {float: left;font-size: 14px; height: 30px; color: var(--darkblue); position: relative;}
#nganhnghe .item i {color:var(--blue); margin-right: 5px}
#nganhnghe .item span {color:black; font-weight: bold}
#nganhnghe .item a {color:black}
#nganhnghe .item a:hover {color:var(--blue2)}

.nganhnghe {float:left; width: 100%;}
.nganhnghe li {float:left; width: 100%;  position: relative; border-bottom: 1px solid #eee}
.nganhnghe li a {color:black; display: inline-block; padding:10px 15px; width: 100%}
.nganhnghe li a:hover {color:var(--blue)}
.nganhnghe li a i {width: 25px}
.nganhnghe .active {background: var(--blue2); color:white}


.nganhnghe .nganhnghe_con {display: none; float: left; width: 100%;background: #f9f9f9}
.nganhnghe .nganhnghe_con .nganhnghe_con {background: #eee}

a.show-all {display: inline-block; float: right; margin-top:-50px; font-size: 15px; font-weight: bold}

.chihoi-info {float:left; width: 100%; position: }


.product {position:relative; border: 1px solid #eee; width:100%; float:left; background:white;  overflow: hidden; margin-bottom: 20px; box-shadow: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 10%);}
.product .img {float:left; width: 100%; height:0; padding-bottom:70%; position: relative; transition: all .3s; overflow: hidden;}

.product .img .second_img {transition:all .5s;object-fit: cover; height:100%; left:0; right:0; width: 100%; position:absolute; top:0; z-index: 1;}
.product .img img {transition:all .5s;object-fit: cover; height:100%; left:0; right:0; width: 100%; position:absolute; top:0; z-index: 2;}
.product .info {float:left; width: 100%; padding:10px; line-height: 17px; height: 120px; font-size: 13px}
.product .info img {height: 10px;float: right;}
.product .info .sanpham {float:left; width: 100%; color:#bbb; padding:10px 0; text-transform: uppercase; display: none}
.product .info .view {float:left; width: 100%; border-top:1px solid #ccc;}
.product .title {font-size:13px; font-weight: bold; margin-top:0; float:left; width: 100%; color:black;  line-height:20px; height:40px; overflow: hidden; }
.product a {text-decoration:none; color: black}

.product:hover {border: 1px solid var(--blue)}
.product:hover .first_img {transition: all .3s; opacity: 0;}
.product .daban {float: left; font-size: 11px; width: 100%; text-align: right;}
.product .daban i {font-size: 10px; color: #ffce3d}
.product .daban span {margin-left: 5px}
.product .city {float: left ; width: 100%; text-align: right; color: #333; font-weight: 500;
}
.product .shop {float:left; width: 100%; font-size: 13px; margin-top: 5px; color:var(--blue2);
}
 
.product .deal {position: absolute; top: 0; right: 0; width: 50px; padding: 5px; background: var(--blue); color: white; z-index: 99;} 
 .product .old_price {font-size: 13px; color: #999}
.product .lienhe {float:left; width: 100%;   font-size: 15px;  font-weight: bold; color: red}

.product .them {

    position: absolute;
    text-align: center;
    transform: scale(.1,.1);
    transition: all .5s;
    bottom: 60%;
    left: 0;
    width: 100%;
    opacity: 0;
}
.product .viewed {position: absolute; right: 10px; bottom: 43px; font-size: 11px; color:#666}

.moidangky {float:left; width: 100%; background: linear-gradient(to right, var(--blue), var(--blue2)); margin-top:-5px; color:white; font-size: 20px; padding:20px 10px}

.moidangky a {display: inline-block; padding:10px 50px; float: right; background:#281706; color: #ffffff !important; margin-top:15px; text-transform: uppercase;  transition: all .5s}
.moidangky a:hover {transform: scale(1.1); transition: all .5s}

.alert {background: white;}
#popup_ok {background:var(--blue); text-decoration: none; padding:5px 10px; color:white; display: inline-block; margon-top:20px; cursor: pointer;}

.cart-info {position: fixed; bottom:0; right: 0; z-index: 999; background: var(--blue); color:white; padding:15px}



.menu-mobile {position: fixed; bottom:0; left:0; width: 100%; background: white; box-shadow: var(--boxshadow); display: none;justify-content: space-around; z-index: 99999}
.menu-mobile li {display: inline-block; text-align: center; position:relative;  width: 100%}
.menu-mobile li a {color: black; display: inline-block; height: 45px; padding:5px; text-align: center; width: 100%}
.menu-mobile li a i {font-size: 25px;position: absolute; top:7px; left:0; width: 100%; color:#281606}
.menu-mobile li a span {font-size: 10px; display: inline-block; position: absolute; bottom:3px; left:0; width: 100%; text-align: center}


.pcat {float:left; width: 100%; }
.pcat .img {float:  left; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden}
.pact .img img {position: absolute; left:0; top:0; width: 100%; object-fit: cover}
.pcat .title {float:left; margin-top:10px; color:black; text-transform: uppercase; height: 40px; line-height: 20px; overflow: hidden; font-size:14px}

.slide-quangcao {float:left; width: 100%; }
.slide-quangcao img {width: 100%}
#quangcao {margin-bottom: 20px}

.modal-open .modal  {z-index: 99999}
.col-md-3 .job {padding-left:10px}
.col-md-3 .job .img {display: none}

.job {float: left; width: 100%; padding-left:110px; background: #eee; border-radius: 5px; overflow: hidden; border:1px solid #eee; position: relative; margin-bottom: 20px}
.job .img {float: left; width: 100%; position: absolute; left:0; top: 0; width: 100px; height: 100px; }
.job .img img {position: absolute; height: 100%; width: 100%; left: 0; top:0; object-fit: contain;}
.job .info {float: left; width: 100%;  height: 100px}
.job .info .title {float: left; width: 100%; font-size: 16px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 30px; padding:5px 0}
.job .info .company-name {float: left; width: 100%; height: 40px; line-height: 20px; overflow: hidden; }
.job .info .item {float: left; width: 50%}
.job .info .item i {color: var(--blue)}
.job a {color:black}

.box-job {border-radius: 5px !important; border-top: none !important}

.box-company {float: left; width: 100%; padding-left:150px; overflow: hidden; position: relative; }
.box-company .img {float: left; width: 100%; position: absolute; left:0; top: 0; width: 130px; height: 130px; }
.box-company .img img {position: absolute; height: 100%; width: 100%; left: 0; top:0; object-fit: contain;}
.box-company .info {float: left; width: 100%;  min-height: 130px; line-height: 35px}
.box-company .info .title {float: left; width: 100%; font-size: 20px;  color:var(--blue); font-weight: bold;  }
.box-company .info .company-name {float: left; width: 100%; font-size: 20px; color:#FE7B05; font-weight: bold}
.box-company .info .item {float: left; width: 100%; font-size: 15px; }
.box-company .info .item i {color: var(--blue); width: 20px}

.box-info {float:left; width: 100%;line-height: 35px; font-size: 16px; padding:20px}
.box-info i {width: 20px; color:var(--blue)}
.box-info p {margin:0}

.box-info .box-header {background: none !important; border-bottom: 1px solid #ddd; color:var(--blue); padding-left:0}


#login {background: white; border-radius: 15px; padding:8px 10px; color:var(--blue)}
 
 @media screen and (min-width:1360px) {
    .col-20 {width: 20%; padding-left:10px; padding-right: 10px}
 
}

/*-----Media 991px-----*/
@media screen and (max-width:991px){
  .menu {display: none;}
  .open_btn {display:block}
  .toggle-menu-desktop {display: block}
  .search-box {width: calc(100% - 80px); margin:0; position: absolute; top:83px; right:10px}
  .search-box .text-box {width: 100%}
  .other .service_col .img {height:70px; float:right}
  .news_ctn, .news_other {width:100%}
 
}


/*-----Media 767px-----*/
@media screen and (max-width:767px) {
  #cat-left {display: none;}
  .post_content img {width: 95% !important; height: auto !important;}
  #bootstrap-touch-slider, .carousel-inner, .fade .item.active {padding-bottom: 60%}
  .menu-mobile {display: flex}
  
  .customer-bar {display: none}
  .cart-info {display: none}
}

/*-----Media 616px-----*/
@media screen and (max-width:616px) {
   #bootstrap-touch-slider, .carousel-inner, .fade .item.active {padding-bottom: 70%}
   .bs-slider > .carousel-inner > .item > img, .bs-slider > .carousel-inner > .item > a > img {height: 100%; position: absolute;}
.bs-slider .bs-slider-overlay {background-color: rgba(37,46,65,.5) !important} 

   .content>.width100 {padding:20px 0}
    header {height: 130px;}
   .header-filler {height: 130px}
    .open_btn {top:80px}
    .customer-bar {left:10px; top:90px }
    .customer-info {left:10px; right: auto}
    .logo {width: 100%; text-align: center}
    .logo img {max-width: 90%; height: auto; max-height: 100px}
}

/*-----Media 459px-----*/
@media screen and (max-width:459px) {
  .social_footer {width: 100%; height:60px; text-align: center; right: 0; bottom: 0; background: var(--darkblue)}
  .social_footer img {width: 40px; margin-top: -10px}
  .social_footer a{float: left; display: inline-block; width:33.3%; text-align: center; color:white; font-weight: bold;}
  .social_footer img {clear: both}
  .social_footer span {display: inline-block; width: 100%; color: var(--black) margin-top: -5px}

  #bootstrap-touch-slider, .carousel-inner, .fade .item.active {min-height: auto; height: 0; padding-bottom: 100%; object-fit: cover;}
  #slide {display: none}
  .box-info {padding: 0 10px}
  .box-company {padding-left:10px; padding-right: 10px}
  .box-company .img {position: relative; width: 100%; text-align: center;}
  .box-company .img img {position: relative; height: 100px}
 
}
/*-----Media 355px-----*/
@media screen and (max-width:355px){
 
 .logo { height:50px;}
 
}