@charset "utf-8"; /*==========  Mobile First Method  ==========*/
/* Medium Devices, Desktops */
*,body{margin: 0;padding: 0;box-sizing: border-box;font-family: var(--fontstrong);
}
::-webkit-scrollbar {
    background: #aaa;
    width: 10px;
    height: 8px;
}::-webkit-scrollbar-thumb {
    height: 50px;
    background: #878787;
    border-radius: 3px;
}
:root {
    --transform:uppercase;
    --margin15: 15px;
    --margin5: 5px;
    --margin_bottom_5: 0 0 5px 0;
    --fontbold: bold;
    --erro-color:#f00;
    --success-color:#019f1e;
    --bg-mobi:#033;
    --bg-facebook:#3b5998;
    --bg-gmail:#d34836;
    --color0: #fff;
    --color1: #01008ff7;
    --color2: #c51111;
    --color3: #1c1717;
    --color4:#f4f4f4;
    --color-opa1: #f5f1ef;
    --color-gray: #ddd;
    --color-black: #000;
    --color-white: #fff;
    --bg_linear-gradient1: linear-gradient(180deg, #ffffff00 0, #6b010196 100%);
    --bg_linear-gradient-hover:
    linear-gradient(0deg,#ab5a1f,#ffa100);
    --radius-l: 10px;
    --radius-s: 5px;
    --lagtitle_small4s: 10px;
    --lagtitle_small3s: 12px;
    --lagtitle_smallss: 14px;
    --lagtitle_smalls: 16px;
    --lagtitle_small: 18px;
    --lagtitle_2small:24px;
    --lagtitle_sizes: 28px;
    --lagtitle_sizem: 36px;
    --lagtile_sizel: 80px;
    --fontstrong:
    'Roboto';
    --fontstrong2:
    'Roboto';
}
.color-red{color: var(--color2);}
.paging{text-align: center;display: flex;margin: 20px 0 0;justify-content: center;}
.paging ul{
    display: flex;
    padding-left: 0;
    list-style: none;
}
.paging ul li{position: relative;list-style-type: none;}
.paging ul li a {min-width: 2.6em;text-align: center;width: auto;margin: 5px;height: 2.8em;background: var(--color1);color: var(--color0);border: none;position: relative;display: flex;align-items: center;line-height: 2.8em;font-size: 15px;padding: 0 1em;text-transform: uppercase;justify-content: center;}
.paging ul li a i{height: 2.8em;line-height: 2.8em;font-size: 25px;}
.paging ul li a.current {background: var(--color3);color: var(--color0);}
.text-right{text-align: right;}
.readmore{display: inline-flex;text-decoration: none;align-items: center;color: var(--color0);background: var(--color1);padding: 0px 3px 0px 0px;border-radius: 5px;font-weight: 300;text-transform: uppercase;justify-content: flex-end;}
.readmore span{margin-right: 5px;transform: scale(.8);}  
.readmore i{transform: scale(.8);height: 30px;width: 30px;line-height: 30px;text-align: center;font-size: 20px;background: var(--color2);border-radius: 50%;}

.section-50{padding-top: 50px;padding-bottom: 50px;}
.section-30{padding-top: 30px;padding-bottom: 30px;}
.section-15{padding-top: 15px;padding-bottom: 15px;}
.section-top50{padding-top: 50px;}
.section-top30{padding-top: 30px;}
.section-bottom50{padding-bottom: 50px;}
.section-bottom30{padding-bottom: 30px;}
.pad-bottom-15{padding-bottom: 15px;}
.border-bottom-1{border-bottom: 1px solid var(--color-opa1);}
.pad-top-15{padding-top: 15px;}
.pad-left-10{padding-left: 10px;}
.pad-right-10{padding-right: 10px;}
.pad-left-15{padding-left: 8px;}
.pad-right-15{ padding-right: 15px; }
.pad-left-20{padding-left: 20px;}
.pad-right-20{padding-right: 20px;}
.pad-left-30{padding-left: 30px;}
.pad-right-30{padding-right: 30px;}
.pad-left-50{padding-left: 50px;}
.pad-right-50{padding-right: 50px;}
.pad-left-default{padding-left: 83px;}
.pad-right-default{padding-right: 83px;}
.border-left{border-left: 1px solid #f1f1f1;}
.border-right{border-right: 1px solid #f1f1f1;}

.container-fluid{    padding-left: 15px;padding-right: 15px;}
.flex-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.flex-item{margin-bottom: 15px;width: 100%;}
.justify-content-space-between{justify-content:space-between;}
.space-around{justify-content: space-around;}
.justify-content-center{justify-content:center;}
.align-items-center{align-items:center;}
.flex-wrap{flex-wrap: wrap;}
.flex1col{width: calc(100% - 20px);}
.flex2col{width: calc(100%/2 - 20px);}
.flex3col{width: calc(100%/3 - 20px);}
.flex4col{width: calc(100%/4 - 20px);}
.flex5col{width: calc(100%/5 - 20px);}

.flex-item-1{width: 10%;}
.flex-item-2{width: 20%;}
.flex-item-3{width: 30%;}
.flex-item-4{width: 40%;}
.flex-item-5{width: 50%;}
.flex-item-6{width: 60%;}
.flex-item-7{width: 70%;}
.flex-item-8{;width: 80%;}
.flex-item-9{width: 90%;}
.flex-item-10{width: 100%;}
.grid{display: grid;gap: 30px;}
.gridItem{width: 100%;}
.grid6col{grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid5col{grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid4col{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid3col{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid2col{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid1col{grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-item-title{margin-bottom: 30px;font-family: var(--fontstrong);font-weight: var(--fontbold);}

.text-uppercase{text-transform: uppercase;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-justify{text-align: justify;}
.text-line-through{text-decoration: line-through;}
.margintop{margin-top: 85px;}
#to-top {
    cursor: pointer;
    position: fixed;
    right: 15px;
    background-image: linear-gradient(0deg,#0e6541,#177f54);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#0e6541),to(#177f54));
    color: var(--color0);
    text-align: center;
    padding: 20px 20px;
    line-height: normal;
    bottom: 46px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius:50%;
    -o-border-radius: 50%;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s;
}
#to-top span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
#to-top span:before, #to-top span:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 2px;
    background: var(--color0);
}
#to-top span:before {
    transform: rotate(45deg);
    left: -2px;
    top: 0px;
}
#to-top span:after {
    transform: rotate(-45deg);
    right: -2px;
    top: 0px;
}
#to-top span:before, #to-top span:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 2px;
    background: var(--color0);
}

.fix{position: fixed;width: 100%;z-index: 105;transition: all 0.5s;}

.footer-title{
    font-weight: var(--fontbold);
    font-family: var(--fontstrong);
    color: var(--color0);
    }
.footer-item{margin-top: 10px;} 
.footer-item p{font-size: var(--lagtitle_smallss);font-family: var(--fontstrong);}

.baiviet-item-large {
    position: relative;
    display: block;
        cursor: pointer;
        padding: 0px 0px 30px 0px;
    margin: 0px 0px 50px 0px;
}
.baiviet-item {
    position: relative;
    display: block;
        cursor: pointer;
    margin: 0px 0px 15px 0px;
}
.thumb-box{
    width: 240px; float: left;margin: 0 20px 0 0;
}
.baiviet-thumb {
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    display: block;
    border: 1px solid #f1f1f1;
    background: var(--color-gray);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all 0.5s;
}
.baiviet-thumb img {
    max-width: 100%;
    margin: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all 0.5s;
}
.baiviet-tieude{
    margin-bottom: 15px;
    font-weight: 500;
}
.baiviet-tieude a {
    color: var(--color3);
    font-size: var(--lagtitle_smalls);
    /* transform: scale(.95); */
    display: block;
    position: relative;
    text-decoration: none;
}
.baiviet-text{
    margin-bottom: 15px;
    font-size: var(--lagtitle_smallss);
    color: var(--color2);
    font-weight: 300;
}
.news-left-title a{font-size: var(--lagtitle_smallss);text-transform: none;font-weight: var(--fontbold);}
.baiviet-mota {
    margin: 10px 0px;
    font-size: var(--lagtitle_smallss);
    font-weight: 400;
    color: var(--color-black);
    opacity: 0.9;
    line-height: 1.5;
}
.main-title{
    margin: 10px 0px;
}
.noidung{padding: 15px 0px;}
.post-date {
    font-size: var(--lagtitle_smallss);
    opacity: 1;
    display: flex;
    align-items: center;
    font-weight: 300;
}
.post-date span{
    margin-right: 5px;
}
.post-date i{
    height: 35px;
    line-height: 35px;
    font-size: 18px;
    margin-right: 5px;
}
.hagtag{
    font-family: var(--fontstrong);
    font-size: var(--lagtitle_small3s);
    color: var(--color3);
    opacity: 1;
    padding-top: 5px;
}
.swiperPro .swiper-button-next,.swiperPro .swiper-button-prev{
    top: 30%;
    transform: translateY(-30%);
}
header{padding: 10px 0 10px 0;border-bottom: 1px solid #d1d1d1;position: fixed;top: 0;left: 0;width: 100%;z-index: 30;background: #fff;}

.header
{
    transition: all .3s ease;
    display: grid;
    grid-template-columns: calc(50% - 80px) auto calc(50% - 80px);
    gap: 10px; align-items: center;  justify-items: center;
}
.header .logout{
    grid-area: 1 / 3;
}
.header .logo a img{
    max-width: 60px;
    display: inline-block;
    transition: .3s;
}
.header nav{width: 100%;}

.header nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    /* border-top: 1px solid #9d9b9b; */
    transition: .3s;
}
.header nav ul li{
    list-style: none;
    padding: 15px 0px;
}
.header nav ul li a{
    color: #313131;
    text-decoration: none;
    text-transform: uppercase;
    font:500 14px/16px 'Roboto';
    padding: 15px 0px;
}
.media-social{
    display: flex;
    align-items: center;
    transition: .3s;
    margin-bottom: 10px; 
}
body.scroll-page header .media-social{display: none;transition: .3s;}
body.scroll-page header nav ul{border-top:1px solid #9d9b9b00;transition: .3s;}
body.scroll-page header .logo a img{max-width:60px;transition: .3s;}
nav.left-nav .media-social
{
    justify-content: flex-start;
}
nav.right-nav .media-social
{
    justify-content: flex-end;
}
.media-social a{padding: 0 0 0 10px;}
.media-social a i{
    height: 30px;line-height: 30px;
    font-size: 22px;    
}
.bg_footer{
    background: rgb(143 0 0);
}
.banquyen{background: #000d33;padding: 15px 0px;text-align: center;
    color: #fff;
/*    margin-bottom: 48px;*/
}
.luachon-grid,.grid-album
{
    transition: all .3s ease;
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 50px;
    align-items: center;
    justify-items: left;
    margin-top: 50px;    
}
.swiperAlbum{
    margin-top: -40px;
}
.grid-album,.grid-showroom
{
    transition: all .3s ease;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    align-items: center;
    justify-items: left;
    margin-top: 50px;    
}
.grid-showroom{gap: 30px;}
.grid-showroom .showroom-item{border-bottom: 1px solid #af5252;padding-bottom: 25px;width: 100%;}
.grid-ab-1{
    grid-column: span 3;width: 100%;
/*    grid-row: 1 / 4;*/
}
.grid-ab-item img{max-width: 100%;width: 100%}
.luachon-tit i{
    height: 42px;
    line-height: 42px;
    font-size: 56px;
    color: var(--color2);
}
.luachon-tit h3{
    padding: 24px 0px;
    font: 500 22px/22px 'Roboto';
    color: #2b2b2b;
}
.luachon-grid-item p{
    font-weight: 400;
    color: #4b4b4b;
    line-height: 1.5rem;
    text-align: justify;
}
.lich-trinh-grid
{
    transition: all .3s ease;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 50px;
    align-items: start;
    justify-items: left;
}
.lich-trinh-item{
    padding: 15px 0px;
    border-bottom: 1px solid #cdcdcd;
}
.lich-trinh-item:last-child{border-bottom: 1px solid transparent;}
.lich-trinh-item h3{font-size: 16px;}
.lich-trinh-item h3 a{
    display: flex;
    align-items: center;
    justify-content: space-between; 
    text-decoration: none;
    color: var(--color1);   
}
.chuyenxe{
    position: relative;
    display: block;
}
.chuyenxe:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, #ffa31a00 0, #000929 100%);
    left: 0;
    bottom: 0;
    z-index: 10;
}
.chuyenxe-tit
{
    padding: 15px;
    display: flex;
    position: absolute;
    bottom: 0%;
    left: 0px;
    z-index: 11;
    align-items: center;
}
.chuyenxe-tit h2{font-size: 18px;}
.big-tit{font-size: 32px;line-height: 32px;}
.chuyenxe-tit a{text-decoration: none;line-height: 35px;color: var(--color0);transform: scale(.8);}
.footer-grid
{
    transition: all .3s ease;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;
    align-items: start;
    justify-items: left;
}
.f-nav li{
    padding: 15px 0 0 0;
    display: inline-block;
    width: 49%;
    max-width: 100%;
    list-style-type: none;
}
.f-nav li a{text-decoration: none;color: var(--color1);display: flex; align-items: center;}
.f-nav li a i{height: 25px;line-height: 25px;margin-right: 5px;}
.f-title{
    margin-bottom: 10px;
    color: var(--color4);
    font-size: 16px;
    font-weight: bold;
}
.f-text{
    margin-bottom: 5px;
    font: 500 14px/16px 'Roboto';
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-opa1);
}
.f-text i{
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    font-size: 18px;
}
.f-text.phone-box
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cskh-big-title{
    color: var(--color0);
    font: 500 16px/30px 'Roboto';
    letter-spacing: 1.5px;
}
.cskh-big a{
    display: flex;
    align-items: center;
    font-size: 28px;
    text-decoration: none;
    color: var(--color0);
    font-weight: bold;
}
.cskh-big a i{height: 30px;line-height: 30px; margin-right: 5px;}
.sl-img{
    min-height: 90vh;
}
.fix.bot{left: 0;bottom: 0;background: #002451;text-align: center;}
.fix.bot span.number{color: var(--color0);font: bold 18px/18px'Roboto';margin-left: 5px;}
.fix.bot div div div.cskh{
    position: relative;
    border-right: 1px solid rgb(243 243 243 / 66%);
    padding: 15px 5px;
}
.fix.bot div div div.cskh a{
    text-decoration: none;
    color: var(--color4);
}
.fix.bot div div div.cskh:last-child{border-right: transparent;}
.container{max-width: 1149px;margin: auto;padding-left: 15px;padding-right: 15px;}
.main-tit{
    margin-bottom: 30px;
}
.main-tit h2{
        display: flex;
        align-items: center;
        color: var(--color2);
}
.main-tit i{height: 35px;line-height: 35px;font-size: 35px; margin-right: 10px;}
.content{
    text-align: justify;
    font: 300 16px/32px 'Roboto';
}
.content .text{
}
.section-about{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 50vh;
    background-attachment: fixed;
    background-position: center;
    padding-left: 183px;
    padding-right: 183px;
    position: relative;
}
.section-about .main-tit{
color: var(--color0);
    z-index: 11;
    display: block;
    position: relative;    
}
.section-about:after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--bg_linear-gradient1);
    z-index: 10;
}
.about-thumb{width: 600px;max-width: 100%;
    float: right;
    padding: 0 0px 15px 15px;}
.about-thumb img{max-width: 100%;}
.datve{
    background: #db9d00;
    padding: 0px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.datve i{height: 30px;line-height: 30px;font-size: 16px;margin-right: 5px;}
.min-h{height: 280px;overflow-y: hidden;position: relative;}

.bg-luachon{margin: 15px 0;}
.bg-luachon img{max-width: 100%;}
.hotline-nav
{
    text-decoration: none;
    position: fixed;
    cursor: pointer;
    right: 40px;
    bottom: 130px;
    color: var(--color0);
    transition: all .4s ease;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 5;
    transform: rotate(346deg);
}
.hotline-nav::before
{
    content: "";
    position: fixed;
    display: block;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    text-align: center;
    background: var(--color2);
    opacity: .3;
    color: var(--color0);
    transition: all .4s ease;
    z-index: 3;
}
.hotline-nav::after
{
     content: "";
     position: fixed;
     display: block;
     height: 54px;
     width: 54px;
     border-radius: 50%;
     text-align: center;
     background: var(--color2);
     opacity: .5;
     color: var(--color0);
     transition: all .4s ease;
     z-index: 1;
}
.hotline-nav:hover span,.hotline-nav:hover::after,.hotline-nav:hover::before{
    background: var(--color3);transition: all .4s ease;
}
.hotline-nav span{
    position: relative;
    z-index: 5;
    height: 36px;
    width: 36px;
    display: flex;
    border-radius: 50%;
    text-align: center;
    background: var(--color2);
    align-items: center;
    justify-content: center;
    transition: all .4s ease;
}
.hotline-nav i{
    height: 40px;line-height: 40px;font-size: 26px;
}
@media only screen and (min-width : 1200px) {

}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1100px) {
  
}
@media only screen and (max-width: 1024px) {

 .container{width: 100%;overflow: hidden;}
  .grid{display: grid;gap: 15px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}  
    .flex-sm-1{width: 10%;}
    .flex-sm-2{width: 20%;}
    .flex-sm-3{width: 30%;}
    .flex-sm-4{width: 40%;}
    .flex-sm-5{width: 50%;}
    .flex-sm-6{width: 60%;}
    .flex-sm-7{width: 70%;}
    .flex-sm-8{;width: 80%;}
    .flex-sm-9{width: 90%;}
    .flex-sm-10{width: 100%;}
.luachon-grid{
          grid-template-columns: auto auto;
        gap: 30px;  
}

    .lich-trinh-grid{
        grid-template-columns: 100%;
        gap: 10px;
    }
}
@media only screen and (max-width: 912px) {
    .grid{display: grid;gap: 15px;align-items: center;}
.grid-showroom{grid-template-columns: auto auto;gap: 30px;}

    .non-pad{padding: 0px;}
    .flex-sm-1{width: 10%;}
    .flex-sm-2{width: 20%;}
    .flex-sm-3{width: 30%;}
    .flex-sm-4{width: 40%;}
    .flex-sm-5{width: 50%;}
    .flex-sm-6{width: 60%;}
    .flex-sm-7{width: 70%;}
    .flex-sm-8{;width: 80%;}
    .flex-sm-9{width: 90%;}
    .flex-sm-10{width: 100%;}
    
    .flex-sm-order-1{order: 1;}
    .flex-sm-order-2{order: 2;}  
    body.reponsive header{display: none;}
    body.reponsive footer section div .footer-grid{grid-template-columns: 50% 50%;}
    .margintop{margin-top: 65px;}
    .fix.bot label{font:400 12px/12px 'Roboto';width: 100%;display: block; line-height: 30px;}
     
}
@media only screen and (max-width: 844px) {
  .container{width: 100%;}
  .grid-showroom{grid-template-columns: auto;gap: 30px;}
  .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));} 
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .flex-sm-2col{width: calc(100%/2 - 20px);}
  .sl-img{min-height: 28vh;}
  body.reponsive footer section div .footer-grid{grid-template-columns: 100%;gap: 20px;}
  .fix.bot span.number{margin: auto;font: bold 12px/12px'Roboto';}
}
@media only screen and (max-width: 820px) {
    .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .flex-sm-2col{width: calc(100%/2 - 20px);}
}
@media only screen and (max-width: 812px) {
    .non-pad{padding: 0px;}
    .flex-sm-2col{width: calc(100%/2 - 20px);}  
}
@media only screen and (max-width: 768px) {
    .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}  
  .flex-sm-2col{width: calc(100%/2 - 20px);}
}

@media only screen and (max-width: 767px) {
    .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));} 
  .flex-sm-2col{width: calc(100%/2 - 20px);}  
}

@media only screen and (max-width: 670px) {
    .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .flex-sm-2col{width: calc(100%/2 - 20px);} 

}

@media only screen and (max-width : 667px) {
    .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));} 
  .flex-sm-2col{width: calc(100%/2 - 20px);}
}

@media only screen and (max-width: 500px) {
    .non-pad{padding: 0px;}
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}  
  .flex-sm-2col{width: calc(100%/2 - 20px);}  
}
@media only screen and (max-width : 479px) {
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .flex-sm-2col{width: calc(100%/2 - 20px);}  
}
@media only screen and (max-width : 390px) {
  .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .flex-sm-2col{width: calc(100%/2 - 20px);}
}
@media only screen and (max-width : 370px) {
   .grid3col-mb {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .grid1col-mb {grid-template-columns: repeat(1, minmax(0, 1fr));}  
  .grid2col-mb {grid-template-columns: repeat(2, minmax(0, 1fr));} 
  .flex-sm-2col{width: calc(100%/2 - 20px);}

}