@media only screen
  and (min-device-width: 640px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
 
}

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

body { padding:0; margin:0;font-family: 'Roboto', sans-serif; font-size:15px; color:#333}
.cover { margin:auto; padding:6px 0; width:90%;}
.cover1 { width:100%; padding:6px 0;}
.cover2 { width:90%; margin:auto}
.clear { clear:both;}
.content { margin:0 -1%;}

.banner { display:none;}

h1 { font-size:26px;}
.boxview img {max-width: 100%;}
.pc { display:none;}
.mobile { display:block;}

#header {    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%), 0 -1px 5px 0 rgb(0 0 0 / 15%);  position:relative;}

.tophead { background:#6d481e; color:#fff; text-align:center}
.logo { width:80%;  text-align: left; float: left}
	.logo img { width:36%;}
.menu { width:100%; padding-top:3px;}
	.navbar { display:none}
#service { padding:20px 0;}
#service h1 { text-align:center; color:#333}

.xemthem { border-radius:15px; width:123px; padding:10px; text-align:center; background:#1f3888; }
.xemthem a { color:#fff; text-decoration:none;}
.xemthem a:hover { text-decoration:underline}

.box1 { width:100%; }
.box2 { width:100%;}

	.newdv { width:48%; float:left; margin:1%;}
	.newdv .image {overflow: hidden;}
	.newdv .image img { width:100%; -webkit-transition: all .4s linear; transition: all .4s linear;}
	.newdv .image:hover img{-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);}
	.newdv h3 { color:#ff0000;  padding-bottom: .4em;   position: relative;}
	.newdv p { line-height:23px; color:#333;}
	.newdv a { text-decoration:none; color:#1f3888}
	.newdv a:hover { text-decoration:underline;}

	.prohot {position: relative; margin:1% 0;}
	.prohot .img { position: relative; overflow: hidden; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease;    transition: all .25s ease; }
	.prohot .img img {width:100%; -webkit-transition: all .4s linear; transition: all .4s linear;  }
	.prohot:hover img {-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);} 
	.prohot .name { bottom: 0% !important; background-color: rgba(255,255,255,0.6);  position: absolute;  width: 100%;  text-align: center;  padding: 10px 0; transition: background .3s;}
	.prohot:hover .name { background:#1f3888; color:#fff;}
	.prohot a { color:#000; font-weight:bold; font-size:18px; }
	
	.prohot2 {position: relative; width:49%; float:left; margin:1%; margin-right:0; margin-bottom:0.3%}
	.prohot2 .img { position: relative; overflow: hidden; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease;    transition: all .25s ease; }
	.prohot2 .img img {width:100%; -webkit-transition: all .4s linear; transition: all .4s linear;  }
	.prohot2:hover img {-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);} 
	.prohot2 .name {bottom: 0% !important; background-color: rgba(255,255,255,0.6);  position: absolute;  width: 100%;  text-align: center;  padding: 10px 0; transition: background .3s;}
	.prohot2:hover .name { background:#1f3888; color:#fff;}
	.prohot2 a { color:#000; font-weight:bold;}

.boxproduct { padding:0; width:100%; margin:auto;}
.boxproduct .title {  font-weight:bold; text-transform:uppercase; margin-bottom:10px;}
.boxproduct .title h3 { position: relative;     padding-bottom: 0.4em;}
.boxproduct .title h3:after {background-color: #ff0000;  content: ""; width: 68px; height: 4px; border-radius: 5px; position: absolute; left: 0;bottom: 0;}
.boxproduct .content { margin:0 -1%;}

	.product { width:48%; float:left; margin:1%;  position: relative; overflow: hidden; margin-bottom:15px; }
	.product .image {-webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease;    transition: all .25s ease; position:relative; }
	.product .image img { width:100%; -webkit-transition: all .4s linear; transition: all .4s linear; height:450px; object-fit: cover;     object-position: center;}
	.product .image:hover img{-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);}
	.product .infoproo { position:absolute; bottom:0; 	width: 100%;}
	.product h3 {  padding:0; line-height:23px; text-transform:uppercase}
	.product p { color:#00; padding:0 20px;}
	

	
#slogan { background:#e1e1e1 url(images/banner-h.jpg) no-repeat; background-size:cover; padding:30px 0; text-align:center}
#slogan h2 { margin-bottom:30px;}
#slogan h3 { margin-top:30px;}
	#slogan input[type=text] { height:40px; border:none; width:100%;  border-radius:15px; margin-bottom:10px;}
	#slogan select { height:42px; border:none; width:100%;  border-radius:15px;  margin-bottom:10px;}
	#slogan input[type=submit] {height:42px; border:none; background:#1f3888; color:#fff; padding:0 15px; width:100%; border-radius:15px;}
	.loiich { width:100%; margin:auto; margin-top:30px; margin-left:4%;}
	.loiich .items { width:43%; float:left; text-align:left; margin:2% 1%; padding-left:5%; font-size:18px;}
	.loiich .items i { font-size:23px; padding-right:10px;}

	
#features { padding:30px 0;}
#features h2 { text-align:center;}
	.features { width:100%; text-align:center}
	
#aboutus { background:#e1e1e1; padding:20px 0;}
#aboutus h2 { text-align:center;}
	.about1 { width:49%; float:left;}
	.about2 { width:49%; float:right; padding:0;}
	.about2 img { width:100%;}
	
#newhome h2 { text-align:center;}
	.newhome { width:31.33%; margin: auto; float:left; margin:1%;}
	.newhome .image {overflow: hidden;}
	.newhome .image img { width:100%; -webkit-transition: all .4s linear; transition: all .4s linear; height:150px}
	.newhome .image:hover img{-ms-transform:scale(1.2);-webkit-transform:scale(1.2);transform:scale(1.2);}
	.newhome h3 { color:#ff0000;  padding-bottom: .4em;   position: relative;}
	.newhome p { line-height:23px; color:#333;}
	
#footer { background:#194375; color:#fff; font-size:13px;}
	.footer { width:100%; margin:auto}
	.footer h3 { color:#fff;  padding-bottom: .4em;   position: relative;}
	.footer h3:after {background-color: #fdd415;  content: ""; width: 28px; height: 4px; border-radius: 5px; position: absolute; left: 0;bottom: 0;}
	.footer a { color:#fff; text-decoration:none;}
	.footer a:hover { color:#fff;}
	
	.thumbnail { text-align:center; border:1px solid #b58e63; margin:15px; padding:15px; background:#fff;}
	.thumbnail p { font-size:12px; line-height:23px;}
	.thumbnail .img { width:100px; height:100px; border-radius:50%;     object-fit: cover;    object-position: center;}
	.flex-text { height:158px;}
	.thumbnail .brand { height:58px;}
	
	.contactms {position: fixed; bottom: 0px;left: 0px; z-index: 9999;}
	.contactms ul {list-style: none;padding: 0; margin: 0;}
	.contactms ul li {position: relative; margin:10px;}
	.contactms ul li a { border-radius: 50%; height: 40px; width: 40px; display:block; }
	.contactms ul li.zaloms a {background: #0065F7 url(images/zalo_icon.png) no-repeat center;}
	.contactms ul li.facebookms a {background: #125C9E url(images/facebook_icon.png) no-repeat center;}
	.contactms ul li.phonems a {background: #E80000 url(images/phone_icon.png) no-repeat center;}
	
	#toc_post{
    display: block;
    text-align: center;
}
#toc_post .ctn_toc{
    display: inline-block;
    margin:20px auto;
    width: 100%;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    -webkit-transition: all 2s; /* Safari */
    transition: all 2s;
}
#toc_post .tit_toc{
    padding: 10px;
    background: #194375;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
}
#toc_post .tit_toc span{
    font-weight: 400;
    padding-left: 10px;
    cursor: pointer;
    -webkit-transition: all 2s; /* Safari */
    transition: all 2s;
}
#toc_post .ct_toc{
    padding: 10px;
    text-align: left;
}
#toc_post .ct_toc #l_toc{
    -webkit-transition: all 2s; /* Safari */
    transition: all 2s;
    margin:10px; padding:0;
}
#toc_post .ct_toc ul, #toc_post .ct_toc ul li{
    list-style: upper-roman;
}
#toc_post .ct_toc ul a{
    display: block;
    padding: 5px 0;
    font-weight: 600;
	color:#000;
}
#toc_post .ct_toc ul ul{
    padding-left: 30px;
    list-style: decimal;
}
#toc_post .ct_toc ul ul li{
    list-style: decimal;
}
#toc_post .ct_toc ul ul a{
    font-weight: 400;
}
	
	}