/*@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic);*/
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic&subset=latin,vietnamese);
html{font-family: 'Roboto', sans-serif; font-weight:400; font-size:11pt; line-height:150%; color:#000;}
body{margin: 0; padding: 0;}
a{text-decoration: none;}
#topBar{height: 30px; padding: 5px; background-image: linear-gradient(#2a79bc, #2459a5); color: #fff;}
#topBar span{line-height: 30px; padding: 0 10px; text-transform: uppercase; font-weight: 500;}
#topBar ul{float: right; height: 30px; margin-right: 10px;}
#topBar ul li{display: inline-block; margin-left: 15px; padding-left: 21px; line-height: 30px; color: #fff; position: relative;}
#topBar ul li:first-child{background: url(../images/icons/icon-mail.png) left no-repeat;}
#topBar ul li:last-child{background: url(../images/icons/icon-phone.png) left no-repeat; padding-left: 15px;}
#topBar ul li a{color: #fff !important; text-decoration: none;}
#pageLogo{height: 70px; padding: 10px; float: left; margin-right: 20px;}
ul{margin: 0; padding: 0; list-style: none;}
div.intro{display: inline-block; margin-left: 20px; vertical-align: top;}
div.intro h1{color: #1950b5; text-transform: uppercase; font-size: 25px; margin-bottom: 10px;}
div.intro span{display: block; color: #1950b5; font-size: 14px; line-height: 150%;}
#mainMenu{background-color: #fff; height: 90px;}
#mainMenu ul{margin: 0; padding: 0; list-style: none; margin-left: 20px;}
#mainMenu ul li{display: block; float: left; height: 90px; color: #000; position: relative; margin-right: 25px;}
#mainMenu ul li:after{content: ''; width: 100%; height: 3px; background-color: #f70309; position: absolute; left: 0; bottom: 0; display: none;}
#mainMenu ul li:hover:after{display: block;}
#mainMenu ul li a{display: inline-block; color: #1950b5; text-decoration: none; font-size: 17px; font-weight: 500; line-height: 30px; line-height: 90px; text-transform: uppercase;}
#mainMenu ul li a:hover{color: #f70309;}
#mainMenu ul li div{display: none; width: 995px; position: absolute; left: -420px; top: 100%; z-index: 1; background-color: #dfe5f1; border-radius: 0 0 5px 5px; box-shadow: 0px 5px 5px #000;}

/*
#mainMenu ul:first-child li{padding-left: 0px;}
#mainMenu ul li.mhome{background: url(../images/icons/icon-home.png) left center no-repeat;}
#mainMenu ul li.mintro{background: url(../images/icons/icon-intro.png) left center no-repeat;}
#mainMenu ul li.mproduct{background: url(../images/icons/icon-product.png) left center no-repeat;}
#mainMenu ul li.mbaogia{background: url(../images/icons/icon-baogia.png) left center no-repeat;}
#mainMenu ul li.mnews{background: url(../images/icons/icon-news.png) left center no-repeat;}
#mainMenu ul li.mcontact{background: url(../images/icons/icon-contact.png) left center no-repeat;}
*/

/*
#mainMenu ul li div:before{content:''; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #dfe5f1; position: absolute; top:-10px; left: 245px; z-index: 2;}*/
#mainMenu ul li div ul{width: 210px; margin:15px; margin-right: 10px; display: inline-block; vertical-align: top;}
#mainMenu ul li div ul.child01{width: 160px;}
#mainMenu ul li div ul.child02{width: 250px;}
#mainMenu ul li div ul:last-child{width: 250px;}
#mainMenu ul li div ul li{ color: #000; border-bottom: solid 0.5px #c4cfe5; width: 100%; height: 30px; display: block; padding: 5px 0; padding-left: 0px !important; margin-right: 0;}
#mainMenu ul li div ul li:before{content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #3d3d3d; position: absolute; left: 0; top: 17px;}
#mainMenu ul li div ul li:after{display: none !important;}
#mainMenu ul li div ul li:first-child{text-transform: uppercase; color: #ef0c22; font-weight: bold; padding-left: 0px !important; border-bottom: solid 2px #ef0c22;}
#mainMenu ul li div ul li:first-child:before{display: none;}
#mainMenu ul li div ul li:last-child{border-bottom: none;}
#mainMenu ul li div ul li a, #mainMenu ul li div ul a{color: #3d3d3d; font-size: 16px; height: 30px; line-height: 30px; text-transform: none; font-weight: 400;}
#mainMenu ul li div ul li a:hover{color: #f70309;}
#mainMenu ul li div ul li a{padding-left: 13px;}
#mainMenu ul li:hover div{display: block;}

#mainMenu ul li div ul.xulynuocthai li{margin-bottom: 20px;}
#mainMenu ul li div ul.xulynuocthai li:before{display: none;}
#mainMenu ul li div ul.xulynuocthai li a{padding-left: 0; line-height: 120%; margin-top: 15px;}
#mainMenu ul li div ul.xulynuocthai li img{width: 100%; height: 150px;}

#comingsoon{position: fixed; bottom: 0; width: 100%; text-align: center; padding: 10px 0; background-color: #000; color: #fff; opacity: 0.8;}

div.topIntro{width: 100%; height: 500px; background: url(../images/intro-bg.jpg) center; background-size: fixed;}

div.modIntro{padding: 30px 0; background: url(../images/about-bg.jpg); background-attachment: fixed;}
div.modIntro div.content{text-align: center; padding: 0 20px; margin: 0 auto; width: 80%; text-align: justify; font-size: 17px; line-height: 170%;}

div.modProduct{background: #edf2f5; text-align: center; padding: 30px;}
div.modProduct div.proItem{width: 22.75%; height: 380px; margin-right: 3%; background-color: #fff; float: left; vertical-align: top; border-radius: 8px; box-shadow: 0px 0px 10px #d1d1d1;}
div.modProduct div.proItem div{padding: 10px;}
div.modProduct div.proItem div h3{padding: 15px 0; padding-top: 5px; margin: 0; text-transform: uppercase; font-weight: 500; color: #1950b5;}
div.modProduct div.proItem img{max-width: 100%; border-radius: 5px;}
div.modProduct div.endItem{margin-right: 0;}
div.modProduct div.proItem a.more{display: inline-block; padding: 5px 15px; border-radius: 5px; background-color: #1950b5; color: #fff;}
div.modProduct div.proItem a.more:hover{background-color: #f70309; cursor: pointer;}
div.modProduct div.proItem p{height: 70px;text-align: justify;}

h1.general{text-transform: uppercase; text-align: center; color: #f70309; font-weight: 500; font-size: 25px; margin: 30px 0; margin-top: 0px; background: url(../images/h1-bg.png) bottom center no-repeat; padding-bottom: 25px;}
.clr{clear:both; display:block; width:0; height:0;}

div.whychoice{width: 100%; margin: 0 auto; padding: 30px 0; padding-bottom: 50px; text-align: center;}
div.whychoice div{display: inline-block; width: 300px; padding: 10px; height: 200px; margin: 20px; margin-bottom: 0; overflow: hidden;}
div.whychoice div img{display: block; margin: 10px auto;}
div.whychoice div span{display: block; color: #1950b5; margin-top: 15px; font-weight: bold; text-transform: uppercase;}
div.whychoice h1{margin-bottom: 0;}
div.whychoice ul{margin: 0; padding: 0; list-style: none; margin-top: 20px;}
div.whychoice ul li{display: inline-block; width: 220px; padding: 10px; margin:0 30px; overflow: hidden; border-radius: 5px; background: url(../images/icons/icon-cost-40x40.png) 15px 10px no-repeat #086ea9; color: #fff; text-align: left; padding-left: 80px; position: relative;}
div.whychoice ul li span{display: block; font-weight: 500; text-transform: uppercase;}
div.whychoice ul li:first-child{background: url(../images/icons/icon-pro-50x50.png) 15px 10px no-repeat #f2781e;}
div.whychoice ul li:last-child{background: url(../images/icons/icon-customcare-40x40.png) 15px 10px no-repeat #08860e; }
div.whychoice ul li:before{content: ''; display: block; width: 1px; height: 80%; position: absolute; left: 65px; top: 10%; background-color: #fff;}

div.customer{width: 100%; margin: 0 auto; padding: 30px 0; padding-bottom: 50px; text-align: center; background-color: #edf2f5;}
div.customer ul{margin: 0; padding: 0; list-style: none;}
div.customer ul li{width: 150px; height: 150px; padding: 10px; display: inline-block; margin: 20px; border-radius: 10px; background-color: #fff; box-shadow: 0px 0px 5px #666; vertical-align: top;}
div.customer ul li img{max-width: 100%; display: block; margin: auto;}
div.customer ul.towColum li{width: 364px;}


div#footer{padding:40px 30px; background: url(../images/footer-main-bg.jpg); background-size: cover; color: #fff; position: relative;}
div#footer .info{color: #fff; margin-bottom: 20px; width: 50%; float: left;}
div#footer .info h1{margin-top: 0px;}
div#footer .info span{display: block; padding-left: 25px; margin-bottom: 5px;}
div#footer .info span.address{background: url(../images/icons/icon-maps.png) left no-repeat;}
div#footer .info span.phone{background: url(../images/icons/icon-phone.png) left no-repeat; }
div#footer .info span a{color: #fff; text-decoration: none;}
div#footer .info span.email{background: url(../images/icons/icon-mail.png) left no-repeat;}
div#footer .maps{width: 100%; margin-top: 20px; border-radius: 5px; overflow: hidden;}
div#footer .contact{width: 35%; min-width: 400px; height: 140px; padding: 10px; float: right; text-align: left; background: #fff; color: #000; border-radius: 5px; opacity: 0.6;}
div#footer .contact h4{margin: 0; text-decoration: underline; margin-bottom: 5px; font-size: 110%;}
div#footer .contact div{height: 100%; float: left; vertical-align: top;}
div#footer .contact div:first-child{width: 30%; padding-right: 2%; margin-right: 2%; border-right: solid 1px #c7ccd9;}
div#footer .contact div:last-child{}
div#footer .contact div ul{margin: 0; padding: 0; list-style: none;}
div#footer .contact div ul li{font-size: 95%; line-height: 160%; padding-left: 10px; position: relative;}
div#footer .contact div ul li:before{content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #000; position: absolute; left: 0; top: 8px;}

div#articleWrapper, div#categoryWapper{padding: 20px; margin-top: 20px;}

div#categoryWapper{padding: 20px;}
div#leftContent{width: 65%; float: left;}
div#leftContent h1{margin-top: 0; font-size: 22px; font-weight: 500; color: #2459a5; text-transform: uppercase;}
div.articleItem{width: 150px; height: 210px; display: inline-block; padding: 10px; margin: 20px; margin-left: 0; margin-bottom: 0; box-shadow: 0px 0px 5px #ccc; border-radius: 5px;}
div.articleItem img{width: 150px; height: 150px;}
div.articleItem a.text{color: #364bc9; text-decoration: none; display: block; margin-top: 10px; text-align: center; font-size: 15px;}
div.articleItem a.text:hover{color: #f70309;}
div.article{width: 65%; float: left;}
div.moreArticle{width: 30%; float: right;}
div.moreArticle div.categoryMenu{width: 100%; margin-bottom: 20px; background-color: #ebedef; border-radius: 5px; overflow: hidden;}
div.moreArticle div.categoryMenu h3{padding: 10px; margin: 0; height: 20px; line-height: 20px; background-image: linear-gradient(#225b95, #3b6b9d); color: #fff; font-weight: 400; font-size: 16px; text-transform: uppercase;}
div.moreArticle div.categoryMenu ul{margin: 10px;}
div.moreArticle div.categoryMenu ul li{list-style: none; padding: 10px; border-bottom: solid 1px #f7fafd;}
div.moreArticle div.categoryMenu ul li:last-child{border-bottom: none;}
div.moreArticle div.categoryMenu ul li a{text-decoration: none; color: #3d3d3d; position: relative; padding-left: 10px;}
div.moreArticle div.categoryMenu ul li a:before{content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #3d3d3d; position: absolute; left: 0; top: 7px;}
div.moreArticle div.categoryMenu ul li a:hover{color: #f70309;}
div.article h1{margin-top: 0; text-transform: uppercase; color: #2459a5; font-weight: 500;}
div.article img{width: 100% !important; height: auto !important;}

#pathWay{height: 30px; line-height: 30px; padding: 5px; padding-left: 20px; background-image: linear-gradient(#f1f1f1, #dededd); color: #333333; white-space: nowrap; overflow: hidden;}
#pathWay a{text-decoration: none; color: #7180ce;}
#pathWay a:hover{color: #f70309;}