/*!
Theme Name: vpw_theme
Theme URI: http://mythuat247.net
Author: mythuat247 - 0933001129
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vpw_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

vpw_theme is based on Underscores http://mythuat247.net/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


ul.pagination2 .page-numbers{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d232a;
    font-size: 13px;
    border: 1px solid #ccc;
        display: inline-block;

    margin-top: 20px
}
ul.pagination2 .page-numbers:hover {
    background: #ea8025;
    color: #fff;
}


.container:before, .container:after{display: table; content: " ";}
*, *:before, *:after{
	box-sizing: border-box; 
	outline: none !important;
}
*, ::after, ::before {box-sizing: border-box;}
@charset "utf-8";
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sup, sub, tt, var, u, i, center, ul, ol, li, dl, dt, dd, tfoot, caption, form, fieldset, legend, input, button, textarea, select, label, applet, object, audio, video, canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{font-family: inherit;font-size: 100%; font-weight: inherit; font-style: inherit; line-height: inherit; vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0;}
body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif; background:#fff; font-size:14px; color:#484338; min-height:700px;} 
html {-webkit-text-size-adjust: none; height: 100%} 
.container{width:99%;max-width:1366px;margin:0 auto; position:relative}
a{ text-decoration:none; color: #333} a:hover{ color:#5e5e5e} .fl{float:left} .fr{float:right}
.clear{ clear:both} .clear10{ clear:both; height:10px} .clear20{ clear:both; height:20px} p{ margin:0; padding:0} li,ul,nav{ list-style:none} .pad10{ padding:10px}
.mt10{ margin-top:10px} .hide{display:none} .hideim{display: none !important} .blue{color:#aa0f15}
.row-sp{margin-right: -10px; margin-left: -10px; overflow:hidden}
.row{margin-right: -15px; margin-left: -15px; overflow:hidden}
.center{text-align: center;} .relative{position: relative;}
.price{color:#e60f1e}
.discount{position:absolute; top:8px; right:11px; background:#da1600; color:#fff; padding:3px 6px; border-radius:5px; z-index: 999; display: none;}
img{max-width: 100%}
h1.in{font-size: 22px; font-weight: bold; color:#264c5d; text-transform: none; margin:10px 0 10px;}
nav.subnav{overflow: hidden; background: #fff; position: absolute; top: 122px; left: 0; right: 0; padding-right: 5px; z-index: 10001; height: calc(100vh - 45px); display: none;}
.owl-carousel{display: none;}

/* Header */
.header{position:relative; padding:0px 0; z-index: 999;} 
.header::after{content:' '; display:block; clear:both}
.header .logo{float: left; width: 15%; margin-top: 25px;}
.header .search{float: left; width: 20%; position: relative; margin: 22px 0 0 2%;}
.header .search input{padding: 5px 10px; border-radius: 5px; border: .5px solid #a8a8a8; line-height: 30px;width: 100%; position: relative;}
.header .search button{background: #264c5d url(images/search-white.svg) no-repeat center; background-size: 20px; position: absolute; width: 38px; height: 37px; right: 2px; top: 2px; border-radius: 5px; cursor: pointer;}
.header .search button:hover{background-color: #0a2b3a}
.header .category{float: right; width: 60%; border-radius: 5px; margin-top: 10px;}
.header .category::after{content:' '; display:block; clear:both}
.header .category ul.linemenu{float: left; width: 65%}
.header .category ul.linemenu li{display: inline-block; text-align: center; padding: 2px 5px; line-height: 18px; width: 16.6666%}
.header .category ul.linemenu li.mb{display: none;}
.header .category ul.linemenu li:hover{background: #eee}
.header .category ul.linemenu li a{display: block;}
.header .category ul.linemenu li img{height: 34px; margin:5px 0 0;}
.header .category ul.linemenu li p{text-transform: uppercase; font-size: 10px; font-weight: bold; color: #333}

.header .category .infomation{float: right; width: 35%}
.header .category .infomation a{display: inline-block; padding: 0 10px; border-left: 1px solid #333; color: #333; text-align: center; font-weight: bold; width: 33.333%; height: 65px;text-align: center; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: 12px; float: left;}
.header .category .infomation a:hover{background: #eee}

#menumb_div{padding-left:4px;}
#menumb_div a{color: #333; text-align: center; font-size: 11px;padding: 2px 0px; line-height: 18px; display: block;}
#menumb_div a img{height: 34px; margin: 5px 0 5px;}
#menumb_div a p{text-transform: uppercase; font-size: 9px; font-weight: bold; color: #264c5d}
#menumb_div a.mb{height: 65px; white-space: pre-wrap;  display: flex; align-items: center; justify-content: center; font-weight: bold; border-left: 1px solid #fff;}
#menumb_div a.mb p{font-weight: bold; font-size: 10px}

.menutop{margin-top: 5px;}
.menutop::after{content:' '; display:block; clear:both}
.menutop li{float:left;position:relative}
.menutop li a{display: block; padding: 10px 10px; font-weight: bold;font-size:14px; text-transform: capitalize; position: relative; color: #264c5d; border-right: 1px solid #264c5d;}
.menutop li.active{background: #264c5d; color: #fff; border-radius: 5px 5px 0 0}
.menutop li.active a{color: #fff; border-right: 0;}

.menutop li.icondown{padding-right: 0px;}
.menutop li.icondown a{padding-right: 25px;}
.menutop li.icondown:after{content:""; position: absolute;background: url(images/down-white.svg) no-repeat right; background-size: 8px; right: 8px; top: 16px; height: 8px; width: 8px}

.menutop li.black img{height: 8px; padding-left:5px}

.menutop ul ul,.menutop ul ul>li:hover{background:#264c5d}

.menutop ul ul{display:none;position:absolute;top:100%;left:0;border-radius:0 0 5px 5px;z-index:9999;padding:5px 0px 5px; border:0px solid #0a2b3a;}
.menutop ul li:hover>ul{display:block}
.menutop ul ul li:hover>ul{display:none}
.menutop ul ul li{text-align:left; float: none; width: 250px; border-bottom: 0px solid #fff;} .menutop ul ul li:last-child{border-bottom: 0;}
.menutop ul ul li a{color:#fff;padding:8px 12px;font-weight:400;font-size:14px; text-transform: none; font-weight: bold;}
.menutop ul ul li:hover>a{color:orange}

.menutop ul li.active ul{min-width: 1000px; border: 0; padding: 10px}
.menutop ul li.active ul li{width:33.33%;height:auto;float:left;text-align:left;border:0; height: 38px}
.menutop ul li.active ul li span{background: #f4af3e; color: #11374c; padding: 3px 5px; margin-right: 5px; border-radius: 3px; font-size: 12px; text-transform: uppercase;}

.service{margin-right: -5px; margin-left: -5px; overflow: hidden;}
.service li{float: left; width: 33.333%; padding: 0 5px; padding-top: 10px}
.service li .grid{height: 245px; overflow: hidden; position: relative; border-radius: 5px; border:1px solid #e9ecef; background: #fff; box-shadow: 0px 0px 3px 1px rgba(0,0,0,.16); padding: 5px 10px}
.service li h1{color: #264c5d; font-weight: bold; font-size: 24px; line-height: 30px; margin-bottom: 10px}
.service li p{line-height: 24px;}
.service li strong a{background: #f8931e; border-radius: 5px; text-align: center; color: #fff; text-transform: uppercase; margin: auto; position: absolute; bottom: 10px; left: 0; right: 0; width: 161px; height: 37px; line-height: 37px; font-weight: bold;}

.service li:nth-child(1) img{width: 100%; height: 100%}
.service li:nth-child(1) .grid{border-radius: 0; padding: 0; border: 0; box-shadow: none}

.titlehome{padding: 20px 0; font-size: 18px; font-weight: 700; text-transform: none; color: #264c5d; text-align: center; position: relative; margin-top: 25px;}
.titlehome a{display: inline-block; background: #fff; z-index: 100; color: #264c5d; font-size: 24px; padding: 0px 30px 0}
.titlehome:after{content: ''; width: 70%; border: 1px solid #264c5d; top: 50%; left: 0; position: absolute; z-index: -1; height: 1px; box-sizing: border-box; right: 0; margin: auto}

.listdesign_child{margin:0 -5px 10px}
.listdesign_child::after{content:' ';display:block;clear:both}
.listdesign_child li{width:33.333%;float:left;margin:10px 0 10px}
.listdesign_child.home li{width: 100%}
.listdesign_child li .pad{padding:5px;margin:5px;background: #f1f1f2}
.listdesign_child li .images{height: 260px; overflow: hidden;}
.listdesign_child li .images img{width: 100%; height: 100%}
.listdesign_child li .info{padding: 10px; height: 105px}
.listdesign_child li h3{text-transform: none; color: #264c5d; font-weight: bold; font-size: 18px; line-height: 24px; margin-bottom: 15px;}
.listdesign_child li h3 a{color: #264c5d}
.listdesign_child li p a{font-size: 15px; color: #888; text-transform: uppercase; font-weight: 400;}

.listdesign{margin:0 -5px 10px}
.listdesign::after{content:' ';display:block;clear:both}
.listdesign li{width:33.333%;float:left;margin:10px 0 10px}
.listdesign.home li{width: 100%}
.listdesign li .pad{padding:5px;margin:5px;background: #f1f1f2}
.listdesign li .images{height: 260px; overflow: hidden;}
.listdesign li .images img{width: 100%; height: 100%}
.listdesign li .info{padding: 10px; height: 105px}
.listdesign li h3{text-transform: none; color: #264c5d; font-weight: bold; font-size: 18px; line-height: 24px; margin-bottom: 15px;}
.listdesign li h3 a{color: #264c5d}
.listdesign li p a{font-size: 15px; color: #888; text-transform: none; font-weight: 400;}

.listnews{margin:0 -5px 10px}
.listnews::after{content:' ';display:block;clear:both}
.listnews li{float:left;margin:0px 0 0px; }
.listnews li .pad{padding:10px;margin:5px;background: #f1f1f2}
.listnews li .images{height: 210px; overflow: hidden; height: 100%}
.listnews li .images img{width: 100%; height: 100%}
.listnews li h3{text-transform: none; color: #264c5d; font-weight: normal; font-size: 16px; line-height: 24px; margin:10px 0 10px; height: 48px; overflow: hidden;}
.listnews li h3 a{color: #264c5d}
.listnews li p{line-height: 24px; color: #888; height: 72px; overflow: hidden;}

.listvideo{margin:0 -5px 10px}
.listvideo::after{content:' ';display:block;clear:both}
.listvideo li{width:25%;float:left;margin:10px 0 0px}
.listvideo li .pad{padding:5px;margin:5px;background: #f1f1f2; position: relative; box-shadow: 0 1px 3px -2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)}
.listvideo li img{display: block; max-width: 100%; height: 170px; width: 100%; margin: 0% auto; vertical-align: middle;}
.listvideo li h2{text-align: left; padding: 10px; color: #264c5d; height: 50px; font-weight: bold; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.listvideo li span{background: url(images/icon-play.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 40%; left: 0; right:0; height: 50px; width: 60px; margin:auto;}
.listvideo.home li{width: 100%}
.listvideo.home li img{height: 240px}

hr.bar{width: 100%; display: block; height: 1px; background: #eee; margin: 30px 0; border: 0; border-top: 1px dashed #ccc;}

.breadandfilter{display:block;background:#f7f7f7;border:1px solid #ececec;margin:10px 0 15px; border-radius: 5px}
.breadandfilter::after{content:' ';display:block;clear:both}
ul.breadcrumb{float:left;margin:0;padding:6px 0 0;position:relative;z-index:9}
.breadcrumb li{float:left;font-size:14px;font-weight:400}
.breadcrumb li:first-child a{padding-left:10px}
.breadcrumb li a{float:left;font-size:14px;padding:5px 5px 10px}
.rowbr{padding-top:5px}
.breadcrumb span{float:left;line-height:1}
a.togglemenu{display: none;}

.header-top{background: #f9f9f9; line-height: 35px; display:none;}
.header-top h1{color:#ccc;}

.menuhot{overflow:hidden;margin:0px 0 5px;display:none;background:#fff}
.menuhot a{width:24%;float:left;height:40px;margin:0 0 5px 1%;border:1px solid #264c5d;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#fff;text-align: center; display: flex; align-items: center; justify-content: center;}
.menuhot a span{display:block;font-size:11px;padding:9px 2px;color:#264c5d;text-align:center;font-weight:400;text-transform:none; width: 52px;line-height: 15px;}

.grid-layout .item{width: 24.2%; filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3)); transition: filter .25s ease-in-out; display: flex; justify-content: center; align-items: center; border-radius: 8px; }
.grid-layout .item img{width: 100%; border-radius: 4px}
.grid-layout .item h3{visibility: hidden; border-radius: 50px; width: 90%; background: rgba(0,0,0,.6); position: absolute; color: #fff; left: 10px; bottom: 15px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 40px; line-height: 40px; padding: 0 10px; text-overflow: ellipsis;}
.grid-layout .item:hover h3{visibility: visible;}
@media screen and (max-width: 840px) {
.grid-layout .item{width: 31.5%}
}
@media screen and (max-width: 640px) {
.grid-layout .item{width: 47%}
}
@media screen and (max-width: 320px) {
.grid-layout .item{width: 97%}
}
#loading-ico{display: none; position: fixed; z-index:9999999999; top: 0; left: 0; height: 100%; width:100%; background: rgba( 255, 255, 255, .8 ) url('images/loading-ico.gif') 50% 50% no-repeat}


@media screen and (max-width: 840px) {
.container{width: 99%}
.header{padding-top: 8px; z-index: 9999}
.header .logo{display: block; position: absolute; height: 40px; top: 20px; left: 5px; margin-right: 0; width: 115px; margin-top: 0;}
.header .search{width: auto; float: none; margin: auto 55px auto 125px; padding-top: 0;}
a.togglemenu{display: block;width:50px;background:url(images/menumb.svg) top center no-repeat;color:#264c5d;padding-top:18px;cursor:pointer;right:0;top:10px;background-size:19px;position:absolute;font-weight:400;font-size:12px;text-transform:uppercase; font-weight: bold; text-align: center;}
a.togglechange{background:url(images/closemobi.svg) top center no-repeat;background-size:16px}
.header .category{width: auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden; float: none; margin: 8px 0;}
.header .category ul.linemenu{width: auto; height: 65px}
.header .category ul.linemenu li{width: 80px; float: left;}
.header .category ul.linemenu li img{margin: 5px 0 0;}
.header .category ul.linemenu li.mb{width:80px; display: inline-block; border-left: 1px solid #fff; position: relative; height: 65px; text-align: center; display: flex; align-items: center; justify-content: center;}
.header .category ul.linemenu li.mb a{}
.header .category ul.linemenu li.mb p{white-space: pre-wrap; font-weight: bold;}
.header .category .infomation{display: none;}

.menutop{display: none;}
.fb_dialog{display:none!important;}
}
@media screen and (max-width: 768px) {

}

@media screen and (max-width: 640px) {
.hidemb{display: none;}
.header .category ul.linemenu{width:auto; float:none; padding: 0 3px;}
.header .category ul.linemenu li{width: 15.5%; padding:2px 0;}
.header .category ul.linemenu li:nth-child(1){width:20%;}
.header .category ul.linemenu li:nth-child(2){width:18%;}
.header .category ul.linemenu li p{font-size:8px;}
.menuhot{display:block;}
}
@media screen and (max-width: 480px) {
.listnews,.listproject,.listdesign,.listvideo,.service{margin: 0}
.container{width: 99%}
.titlehome a{font-size: 20px; line-height: 30px}
.titlehome:after{width: 95%}
.header-top{line-height: 22px; font-size: 11px}
}
@media screen and (max-width: 320px) {
.header .category ul.linemenu{display:none;}
#menumb_div a p{font-size:8px;}

}
/* #264c5d; */
/* 30: tintuc; 32: tuvan*/
/* 9: thietke; 10: thicong; */



nav.subnav ul.listmenu li ul li a {
    line-height: 1;
    height: 30px;
    display: block;
    font-size: 11px;
    color: #264c5d;
    font-weight: bold;
}
nav.subnav ul.listmenu li ul {
    overflow: hidden;
    margin: 10px 5px;
}
nav.subnav ul.listmenu li ul li {
    width: calc(100%);
    text-align: left;
    list-style: initial;
    margin-left: 25px;
    margin-bottom: 0;
}




nav.subnav ul.listmenu li ul li{
    border:0px;
    margin-left: 0px;
    height: auto;
}



.header .category ul.linemenu{
    display: flex;
}
.subnav .listmenu .sub-menu {
    left: 110px;
    width:calc(100% - 110px);
    position: absolute;
    top: 0px;
    display: none;
    background: #fff;
    height: 100%
}
nav.subnav ul.listmenu li.open .sub-menu{
    display: block;
}

nav.subnav ul.listmenu li.category-mb ul li{
    float: left;
    width: calc(100%/3);
    text-align: center;
    position: relative;
    margin-bottom: 10px;
    overflow: auto;
    height: 80px;
    margin:0px;
}

nav.subnav ul.listmenu li.category-mb ul li img {
    display: block;
    margin: 0 auto 8px;
    height: 50px;
    border-radius: 4px;
}
nav.subnav ul.listmenu li.category-mb ul li a {
    line-height: 1;
    height: 30px;
    display: block;
    font-size: 11px;
    color: #264c5d;
    font-weight: bold;
}
nav.subnav ul.listmenu li.open{
    background: #fff
}
.breadandfilter{
    padding: 10px
}
.breadandfilter a{
    margin:0px 5px
}

.menutop > ul > li.menu-item-has-children:not(.icondown):after {
    content: "";
    position: absolute;
    background: url(images/down-black.svg) no-repeat right;
    background-size: 8px;
    right: 8px;
    top: 16px;
    height: 8px;
    width: 8px;
}
.menutop > ul > li.menu-item-has-children:not(.icondown) > a{
    padding-right: 25px
}
.wpcf7-form-control{
    border:1px solid #ccc;
}
img { height:auto}
@media(min-width:768px){
.listnews li{width:25%;}
	
}
.divdetail figure{
	max-width:100%
}