/* ============================================================
STYLE-RESPONSIVE.CSS — Multi-Industry 2026
============================================================ */
/* Responsive rules moved from style.css */
@media(max-width:991px){
.grid-row__col-4,.grid-row__col-3{flex:0 0 33.333%;max-width:33.333%}
}
@media(max-width:767px){
.grid-row__col-4,.grid-row__col-3,.grid-row__col-2{flex:0 0 50%;max-width:50%}
.grid-row__col-6{flex:0 0 100%;max-width:100%}
}
@media(max-width:991px){
.site-header__nav{display:none}
.site-header__inner{height:64px;gap:16px}
}
@media(max-width:767px){
.about-cards{grid-template-columns:1fr}
}
@media(max-width:767px){
.cat-showcase__item{flex-direction:column;gap:24px}
}
@media(max-width:767px){
.cat-showcase__item--reverse{flex-direction:column}
}
@media(max-width:991px){
.criteria-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
.criteria-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
.criteria-card:not(:last-child)::after{display:none}
.criteria-card:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.1)}
}
@media(max-width:991px){
.product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
.product-grid{grid-template-columns:1fr}
}
@media(max-width:991px){
.review-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
.review-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
.consult-form{flex-direction:column}
}
@media(max-width:767px){
.site-footer__grid{gap:24px}
.site-footer__col,.site-footer__col--wide{flex:0 0 100%}
.site-footer__bottom{flex-direction:column;text-align:center}
}
@media(max-width:991px){
.hmi-hero__inner{flex-direction:column;text-align:center;gap:40px;min-height:auto}
.hmi-hero__content{max-width:100%}
.hmi-hero__desc{margin-left:auto;margin-right:auto}
.hmi-hero__grid{max-width:300px}
}
@media(max-width:991px){
.hmi-process{flex-direction:column;gap:40px}
}
@media(max-width:991px){
.about-section{flex-direction:column;gap:40px}
.about-left{flex:auto;max-width:100%}
.about-right{display:flex;flex-direction:column;gap:16px}
.about-card-right--0{margin-top:0}
}
@media(max-width:991px){
.hmi-hero__inner{flex-direction:column;text-align:center;gap:40px;min-height:auto}
.hmi-hero__content{max-width:100%}
.hmi-hero__desc{margin-left:auto;margin-right:auto}
.hmi-hero__grid{max-width:300px}
}
@media(max-width:991px){
.hmi-process{flex-direction:column;gap:40px}
}
@media(max-width:767px){
.x-services__row,.x-services__row--reverse{flex-direction:column;gap:24px;text-align:center;padding:32px 0}
.x-services__row-text{animation-name:slideUp}
.x-services__row-desc{max-width:100%}
.x-services__row-line{margin:20px auto 0}
.x-services__row-visual{flex:none}
}
@media(max-width:991px){
.x-projects__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
.x-projects__grid{grid-template-columns:1fr}
.x-projects__hero-card{aspect-ratio:16/9}
}
@media(max-width:767px){
.x-stats__row{flex-wrap:wrap;gap:16px}
.x-stats__col{flex:0 0 calc(50% - 8px)}
.x-stats__line{display:none}
.x-stats__col-dot{display:none}
}
@media(max-width:767px){
.x-criteria__masonry{grid-template-columns:1fr}
}
@media(max-width:767px){
.x-news__zone{grid-template-columns:1fr}
}
@media(max-width:480px){
.x-cta__form{flex-direction:column}
}
@media(max-width:1100px){
.nb-grid--6{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:991px){
.nb-burger{display:block;order:-1;margin-left:10px;}
.nb-header__main-in{flex-wrap:wrap;gap:14px;justify-content:space-between;padding:0;gap:10px;}
.nb-logo{flex:1;max-width:170px}
.nb-search{order:3;flex:1 0 100%;max-width:none;}
.nb-nav{display:none}
.nb-header.nb-open .nb-nav{display:block}
.nb-nav__in{flex-direction:column}
.nb-header.nb-open .nb-catalog__panel{display:block}
.nb-menu{flex-direction:column;width:100%}
.nb-menu li a{height:auto;padding:13px 18px;border-top:1px solid rgba(255,255,255,.15)}
.nb-grid--6,.nb-grid--4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
.nb-grid--6,.nb-grid--4{grid-template-columns:repeat(2,1fr)}
.nb-cart span{display:none}
.nb-head__title span{font-size:15.5px}
.nb-footer__grid{gap:26px}
.nb-footer__col,.nb-footer__col--brand{flex:0 0 100%}
.nb-footer__bottom-in{justify-content:center;text-align:center}
}
@media(max-width:991px){
.nb-header.is-scrolled .nb-header__main{padding:10px;}
.nb-header.is-scrolled .nb-search{display:none;}
.nb-header__main{padding:10px;}
}
@media(max-width:600px){
.nb-map__frame iframe{height:280px}
}
@media(max-width:991px){
}
@media(max-width:600px){
}
@media(max-width:991px){
}
@media(max-width:991px){
.container_product .item_product{width:calc(33.333% - 10px)}
}
@media(max-width:600px){
.container_product .item_product{width:calc(50% - 10px)}
}
@media(max-width:600px){
}
@media(max-width:991px){
.nb-featured.container_product .item_product,.container_product .item_product{width:calc(33.333% - 10px)!important}
.nb-featured.container_product{padding:0!important;}
}
@media(max-width:600px){
.nb-featured.container_product .item_product,.container_product .item_product{width:calc(50% - 10px)!important}
}
@media(max-width:991px){
}
@media(max-width:600px){
}
@media(max-width:767px){
.btn-frame{width:48px;height:48px}
.btn-frame i img{width:28px;height:28px}
.btn-zalo{left:12px;bottom:12px}
.btn-phone{left:12px;bottom:68px}
.item_news{width:100%!important;margin:10px 0!important;}
.css_flex_baiviet{margin:-10px 0!important;}
}
@media(max-width:360px){
.btn-frame{width:42px;height:42px}
.btn-frame i img{width:24px;height:24px}
.btn-zalo{left:10px;bottom:10px}
.btn-phone{left:10px;bottom:60px}
}
@media (max-width:1195px){
}
@media (max-width:1024px){
.wrap-content{padding-left:10px;padding-right:10px}
.header-nav a{padding:8px 12px;font-size:13px}
}
@media (max-width:870px){
.logo-mb{padding:0 20px;display:block;text-align:center;margin:10px 0 20px 0}
.logo-mb img{max-width:100px}
.hidden_mobi,#arcontactus,#messages-facebook,.quick_contact{display:none}
.hidden_destop{display:block}
}
@media(max-width:991px){
.menu_mobi_add{display:block;position:fixed;z-index:1001;top:0;bottom:0;left:0;width:min(320px,85vw);padding:18px 20px;background:#fff;box-shadow:4px 0 18px rgba(0,0,0,.18);overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease}
.menu_mobi_add.menu_mobi_active{transform:translateX(0)}
.menu_mobi_add .mmenu-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--nb-line)}
.menu_mobi_add .logo-mb{padding:0;margin:0;text-align:left}
.menu_mobi_add .logo-mb img{max-width:155px}
.menu_mobi_add .mmenu-close{border:0;background:none;color:var(--nb-main);font-size:20px;cursor:pointer;padding:5px}
.menu_mobi_add .load-menu{position:relative}
.menu_mobi_add ul{list-style:none;margin:0;padding:0}
.menu_mobi_add .load-menu > ul{margin-top:12px}
.menu_mobi_add .load-menu li{border-bottom:1px solid #e5e5e5}
.menu_mobi_add .load-menu a{display:block;padding:13px 28px 13px 4px;color:var(--nb-ink);font-size:15px;position:relative}
.menu_mobi_add .load-menu a > i:first-child{width:24px;color:var(--nb-main);margin-right:7px;text-align:center}
.menu_mobi_add .load-menu a i.fa-chevron-right{position:absolute;right:0;top:13px;cursor:pointer}
.menu_mobi_add .load-menu ul ul{display:none;padding-left:15px}
.menu_mobi_add .thongtin-mb{margin-top:22px;padding-top:14px;border-top:1px solid var(--nb-line)}
.menu_mobi_add .thongtin-mb ul li{padding:7px 0;color:var(--nb-muted);font-size:13px}
.menu_mobi_add .thongtin-mb i{width:22px;color:var(--nb-main)}
.menu_mobi_add .thongtin-mb a{color:var(--nb-muted)}
}
@media(max-width:767px){
.footer-bottom{flex-direction:column;text-align:center}
.footer-statistic{text-align:center}
.footer-statistic span{padding:0 8px}
.wrap-main{padding:0 10px}
.header-inner{height:54px}
.header-logo img{height:28px}
.header-actions .header-search-btn{display:none}
}
@media (max-width:480px){
.header-cart{font-size:12px;padding:6px 12px}
.header-cart span{display:none}
}
/* Product detail and contact responsive layout */
@media(max-width:991px){
.grid-pro-detail{margin:16px auto 32px;padding:16px}
.grid-pro-detail .left-pro-detail,.grid-pro-detail .right-pro-detail{width:100%}
.grid-pro-detail .right-pro-detail{padding:0;width:100%!important;}
.contact-article{padding:18px}
}
@media(max-width:600px){
.grid-pro-detail{border-radius:10px;padding:10px}
.title-pro-detail{font-size:20px!important}
.attr-pro-detail{padding:10px}
.attr-pro-detail li{display:block}
.attr-label-pro-detail{display:inline-block;margin-bottom:3px}
.tabs-pro-detail{padding:14px 10px;border-radius:10px}
.tabs-pro-detail .nav-tabs{flex-wrap:nowrap;overflow-x:auto}
.tabs-pro-detail .nav-tabs .nav-link{white-space:nowrap;padding:10px 12px;font-size:13px}
.contact-article{padding:12px;border-radius:10px}
.contact-form{padding:12px}
.contact-form .form-row{margin:0}
.contact-form .contact-input{padding:0;margin-bottom:12px}
.contact-map iframe{min-height:260px}
}
/* Homepage responsive layout */
@media (max-width:1199px){
.nb-slider-row{grid-template-columns:repeat(4,1fr);margin:-5px;}
.nb-blog{grid-template-columns:repeat(3,1fr)}
.nb-partners__row{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:991px){
.pro-sidebar{display:none!important;}
.nb-blog-slick{margin:-5px;}
.nb-blog__item{margin:5px;}
.nb-categories__grid{grid-template-columns:100%;}
.nb-categories__promo{display:none}
.nb-newest__grid{grid-template-columns:100%;}
.nb-slider-row{grid-template-columns:repeat(3,1fr)}
.nb-blog{grid-template-columns:repeat(2,1fr)}
.nb-newest__row{grid-template-columns:repeat(2,1fr);margin:-5px;}
.nb-card{margin:5px;}
.nb-categories__row.nb-categories__slider{margin:-5px;}
.nb-categories__slider .nb-catcard{margin:5px;}
section.nb-categories{padding:30px 0 0 0;}
.nb-products{padding:30px 0 0 0;}
section.nb-news{padding:0 0 30px 0;}
}
/* From featured section downwards: minimum 2 items per row, 10px spacing (news/blog excluded) */
@media (max-width:767px){
.nb-slider-row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-categories__row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-newest__row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-partners__row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-newest__grid{gap:10px}
.is-slider .slick-slide > div{padding:8px 5px 5px 5px;}
}
@media (max-width:479px){
.nb-slider-row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-categories__row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-newest__row{grid-template-columns:repeat(2,1fr);gap:10px}
.nb-partners__row{grid-template-columns:repeat(2,1fr);gap:10px}
}