@media (max-width:1170px) {
    .wrp { width: calc(100% - 40px)} 
    body {min-width: 0}

    #product .group .item,#product .group .item ~.item { width: calc((100% - 60px) / 4); margin-right: 20px}
    #product .group .item:nth-child(4n) {margin-right: 0}
    #news .parent .group .left {width: 370px}
    #news .parent .group .right {padding-left: 10px}

    #product.list .colright {width: 73%}
    #product.list .colright .group .item,#product.list .colright .group .item ~.item { width: calc((100% - 60px) / 3); margin-right: 30px} 
    #product.list .colright .group .item:nth-child(3n) {margin-right: 0}
    #product.list.detail .other .item {width: 100%}
    #product.detail .left {width: 300px}
    #news.list #lstNews.active .item .wImage {width: 25%}
    #news.list .group .item { width: calc((100% - 45px) / 4); margin-right: 15px}
    #news.detail .right {width: 270px}
    #gallery .parent .group .item:first-child, #gallery .parent .group .item ~.item,#mvideo .parent .group .item, #mvideo .parent .group .item ~.item { width: calc((100% - 40px) / 3); margin-right: 20px; clear: none}
    #gallery .parent .group .item:nth-child(3n),#mvideo .parent .group .item:nth-child(3n) {margin-right: 0}
    #gallery .parent .group .item:nth-child(3n + 1),#mvideo .parent .group .item:nth-child(3n + 1) {clear: both}
    #DacSan .colright,#DacSan .colleft { float: none; margin: 0}
    #DacSan .colleft {margin-bottom: 15px}
    #news .commonTitle span {margin: auto}
}
@media (max-width:1023px){
   
    #overlay { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9; display: none; top: 0; left: 0}
    .openList { width: 55px; height: 40px; float: right; display: block}
    .openList hr { border: 2px solid #fff; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; z-index: 98; background: #fff; margin: 7px 0; margin-left: 15px} 
    .openList.ac { position: relative;z-index: 21}
    .openList.ac hr:nth-child(2) {opacity: 0}
    .openList.ac hr:nth-child(1) { transform: rotate(135deg) translateX(10px) translateY(-9px); -moz-transform: rotate(135deg) translateX(10px) translateY(-9px); border-color: #fff; background: #fff}
    .openList.ac hr:nth-child(3) { transform: rotate(-135deg) translateX(6px) translateY(6px);-moz-transform: rotate(-135deg) translateX(6px) translateY(6px); border-color: #fff; background: #fff} 


    #Search { flex: 1; margin-top: 5px}
    .menu { position: relative; z-index: 31}
    .menu.ac { background: transparent}
    .menu.ac .wrp {display: block}
    .menu.ac #Search,.menu.commonMenuMain.ac #Search { visibility: hidden; opacity: 0}
    .menu ul { position: fixed; left: -100%; top: 0; width: 80%; height: 100%; overflow-y: auto; background: #407ebc; z-index: 22; transform: none; -moz-transform: none; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; box-sizing: border-box; padding: 10px 0;display: block}
    .menu ul.ac {left: 0}
    .menu ul li { width: 100%; float: none; padding: 0; display: table;}
    .menu ul li:hover >a {color: #fff}
    .menu ul li.ac { background: #00478d; }
    .menu ul li a {white-space: normal!important}
    .menu ul li.ac ul {background: #e9db89; }
    .menu ul li.ac ul a {color: #00478d}
    .menu ul li a,.menu ul:last-child li a { padding: 10px; box-sizing: border-box; color: #fff; text-align: left}
    .menu ul:before,.menu ul:after { display: none}
    .menu ul li ul {padding: 0; transition: none; -moz-transition: none; transform: none; -moz-transform: none;background: transparent; width: 100%; background: #00478d; margin: 0; position: static} 
    .menu ul li ul li a {padding: 5px 10px!important}
    .menu ul .menuSub { float: left; font-weight: bold; color: #fff; text-transform: uppercase; line-height: 40px; padding: 0 30px; background: #f80002; display: block; margin-right: 3px}
    .menu ul .openSub { display: block; color: #fff; font-size: 20px; position: absolute; top: 5px; right: 10px; z-index: 2} 
    .menu ul .openSub.ac .fas:before {content: "\f056"}
    .menu ul .openSub .fas {font-size: 15px}
    .menu ul li ul li { padding: 3px 20px; margin: 0; border: none; background: transparent}
    .menu ul li a i.fa-sort-down {display: none} 
    
    .menu.commonMenuMain ul {background: #17a349}

    #dongsk {display: none}

    .colL {width: 200px}
    .colR {width: calc(100% - 200px)}
    #tthc .table {overflow-x: auto}
    #tthc .table table:first-child {position: static}
    #contact .contact-left .lstinfo {display: flex}
    #contact .contact-left .lstinfo li { flex: auto; width: auto} 
    .select2-search-choice-close,
    .select2-container .select2-choice abbr,
    .select2-container .select2-choice .select2-arrow b {background: url('../js/select2/images/select2x2.png') no-repeat -5px -10px !important;   background-size: 60px 40px;}

    #doanhnghiep > .wrp {width: 100%}
    #doanhnghiep #menu {padding: 0 5px}
    #doanhnghiep #newsdn .parent .listnewstop .item .fl,#doanhnghiep #newsdn .parent .listnewstop .item .fr { width: 100%; padding: 0}
    #doanhnghiep #newsdn .parent .listnewstop .item .fr {margin-top: 10px}
    #doanhnghiep #newsdn .parent .listnewstop .owl-dots { width: 100%; text-align: center; position: static; margin-top: 10px; transform: none;-moz-transform: none}

    #vanban .colright,#vanban .colleft { padding-right: 0; width: 100%; float: none}
    #vanban .colleft {margin-bottom: 20px}
    #doanhnghiep {min-height: 0} 
    #vanban #formSearch .group .item .row .col { margin-bottom: 5px; display: flex; flex-flow: wrap row; align-items: center} 
    #vanban #formSearch .btn {padding: 0} 
    #vanban .phapluat {padding-bottom: 0}
}

@media (max-width:991px){   
    #DacSan .wrp { width: calc(100% - 20px)}
    .colleft,.colright { width: 100%; padding: 0}
    .colleft {margin-bottom: 15px}
    .groupBanner .bannerRight { width: calc((100% - 20px) / 2); float: left; margin-right: 20px; margin-bottom: 20px}
    .groupBanner .bannerRight:nth-child(2n) {margin-right: 0}
    #footer .flex {display: block}
    #footer .logoFoot { display: table; margin: auto}
    #footer .logoFoot img { display: block; max-width: 100%; height: auto}
    #footer .right { float: none; width: 100%; margin-top: 10px; padding: 0}
    #footer .menuFoot {display: none}
    #footer .content {text-align: center}
    #lienketwebsite .tab-content ul li,#lienketwebsite .tab-content ul li:nth-child(3n),#lienketwebsite .tab-content ul li:nth-child(3n + 1){ clear: none; width: 50%;}
    #lienketwebsite .tab-content ul li:nth-child(2n + 1){clear: both}
    #contact .map {display: none}
    .modal-dialog.w80 { width: 90%; -webkit-flex: none; -ms-flex: none;flex: none}
    #header {height: auto}
    #header .logo {width: 100%}
    #header .wrp  {-webkit-flex: none; -ms-flex: none;flex: none}  
    .galleryRight {width: 100%}
     
    #product.hp .commonTitle.flex,#news .group.flex,#news .commonTitle.flex {display: flex}
    #product.hp .left,#product.hp .right {width: 100%}
    #product.hp .left {margin-bottom: 10px}
    #product.hp .left ul { max-width: 100%; overflow: auto}
    #product.hp .left ul li { display: table-cell; width: auto; padding: 0 20px}
    #product .group .item .name {font-size: 15px}

    #news .flex { display: block}
    /*#news .group.flex .left,#news .group.flex .right { width: 100%; padding: 0}*/
    #videoRight { width: 100%; margin: 0; padding: 0; margin-top: 10px}

    #slide .wrp {width: 100%}

    #news.list #lstNews.group {display: flex}
    #news.list .group .item, #news.list .group .item ~.item { width: calc((100% - 40px) / 3); margin-right: 20px; clear: none}
    #news.list .group .item:nth-child(3n),#news.detail .other .item:nth-child(3n) {margin-right: 0}
    #news.list .group .item:nth-child(3n + 1),#news.detail .other .item:nth-child(3n + 1) {clear: both}

    #news.detail .content {padding-right: 0}
    #news.detail .right { width: 100%; margin-top: 20px}

    #news .right .parent { display: flex; flex-flow: wrap row; align-content: space-between;padding-bottom: 0}
    #news.detail .other .item,#news.detail .other .item ~.item { width: calc((100% - 20px) / 2); margin-right: 20px}
    #news.detail .other .item:nth-child(2n) {margin-right: 0}
    #news.list, #news.detail {padding: 20px 0}
 
    #product.detail .top .right,#product.detail .left { width: 100%; margin: 0}
    #product.detail .top .right, #product.detail .bot .right {margin-top: 10px} 
    #product.detail .bot .left, #product.detail .bot .right {width: 100%}

    
    #vanban .colright {display: none}

    #mvideo .parent .group .item,#mvideo .parent .group .item ~.item,#gallery .parent .group .item,#gallery .parent .group .item ~.item,#gallery.detail .lstImg .wImage,#gallery.detail .lstImg .wImage ~.wImage,#gallery .parent .group .item:first-child, #gallery .parent .group .item ~.item { width: calc((100% - 60px) / 3); margin-right: 30px; clear: none}
    #mvideo .parent .group .item:nth-child(3n),#gallery .parent .group .item:nth-child(3n),#gallery.detail .lstImg .wImage:nth-child(3n) {margin-right: 0}
    #mvideo .parent .group .item:nth-child(3n + 1),#gallery .parent .group .item:nth-child(3n + 1) {clear: both}

    #product.hp .left {border: none}
    #product.hp .left ul li a {white-space: nowrap}

    #DacSan #header .wrp .right {flex: none}
    #DacSan #menu .wrp{ display: flex; align-items: center; padding: 5px 0}
    #DacSan #menu #Search { margin: 0; flex: 1; height: auto}
    #DacSan #menu.ac #Search {display: block}

    #product .group .item,#product .group .item ~.item { width: calc((100% - 40px) / 3); margin-right: 20px}
    #product .group .item:nth-child(3n) {margin-right: 0}
    #News_Video.wrp.flex,#product.detail .top {display: block}
    #news.hp,#videoRight {width: 100%}

    #ImageHomeDS .item,#ImageHomeDS .item ~.item,#dsDN.list .group .item:first-child, #dsDN.list .group .item ~.item { width: calc((100% - 45px) / 3); margin-right: 15px}
    #ImageHomeDS .item:nth-child(3n),#dsDN.list .group .item:nth-child(3n) {margin-right: 0}
     
    #product.list .colright .group .item,#product.list .colright .group .item ~.item,#dsDN.list .group .item { width: calc((100% - 30px) / 2); margin-right: 30px} 
    #product.list .colright .group .item:nth-child(2n) {margin-right: 0}
    #product.list.detail .other .item,#product.detail .left .imgLarge {width: 100%}

    #dsDN.detail .flex {display: block}
    #dsDN.detail .left,#dsDN.detail .right { width: 100%; padding: 0}
    #dsDN.detail .left {margin-bottom: 20px}
    #mvideo .bound,#mvideo .infovideo { width: 100%; margin: 0}
    #mvideo .infovideo {padding: 15px}
    #menu.commonMenuMain ul {display: block}
    #menu.commonMenuMain ul li,#menu.commonMenuMain ul li ul li {padding: 0}
    #menu.commonMenuMain ul li a { text-align: left; border: none; padding: 10px}
    #menu.commonMenuMain ul li ul,#menu.commonMenuMain ul li:hover ul { position: static; display: none}
    #menu.commonMenuMain ul li ul { opacity: 1; visibility: visible; transition: none}
    #menu.commonMenuMain ul li.flag { text-align: left; padding: 10px}
    #menu.commonMenuMain ul li.flag a { padding: 0; margin-right: 5px}
    #afterSlide {display: none}
    #product.list .colright .commonTitle.flex { display: block; width: 100%}
    #news.list .group .item .wImage {margin-right: 0}
    #ImageHomeDS {margin-bottom: 20px}

    #menu.commonMenuMain #Search {display: block}
}

@media (max-width:767px){ 
   .wrp,#menu .wrp { width: calc(100% - 20px)}  
    #bttop {display: none!important} 
    #header { height: 100px; height: auto}
    #header .logo img { max-width: 100%; max-height: none}
    .colL {display: none}
    .colR { width: 100%; padding: 0}
    .commonTitleDetail { font-size: 18px; line-height: 25px}
     
    #tthc .table table th:first-child ~th,#tthc .table table td:first-child ~td { width: 150px!important} 
    #tthc .table table,.danhbatable {table-layout: fixed!important}
    #header .wrp {margin-top: 0}
     
    #news .parent .group .left,#news .parent .group .right {width: 100%}
    #news .group.flex {display: block}
    #news .parent .group .right {padding-left: 0}

    #news.list .group {margin-top: 10px}
    #news.list .group .item, #news.list .group .item ~.item { width: calc((100% - 20px) / 2); margin-right: 20px; clear: none}
    #news.list .group .item:nth-child(2n) {margin-right: 0}
    #news.list .group .item:nth-child(2n + 1) {clear: both}
    .typeView {display: none}

    #product.list>.wrp>.flex {display: block} 

    #DacSan #header { min-height: auto; position: relative; padding: 10px 0} 
    #DacSan #header .wrp {position: static}
    #DacSan #header .wrp .right { top: inherit; bottom: 0}
    #DacSan #header .right ul { margin-bottom: 5px; }
    #DacSan #header .logo img {max-height: 70px}
    #DacSan #header .logo .text {font-size: 22px}
    #doanhnghiep #menu .wrp {width: 100%}

    #vanban #formSearch .group .item .row { flex-flow: wrap row;}
    #vanban #formSearch .group .item .row:nth-child(n+1) {padding-bottom: 0!important}
    #vanban #formSearch .group .item .col.col3 {margin-left: 0}
    #vanban #formSearch .group .item .col.col1,#vanban #formSearch .group .item .col.col3 { width: 110px!important; }
    #vanban #formSearch .group .item .col.col4,#vanban #formSearch .group .item .col.col2 { width: calc(100% - 120px); flex: none}
    #vanban #formSearch .group .item>.row:first-child {display: block}
    #vanban #formSearch .group .item>.row:first-child>.col:nth-child(3)>span:first-child { width: 110px; display: inline-block}

    #mvideo .parent .group .item,#mvideo .parent .group .item ~.item,#gallery .parent .group .item,#gallery .parent .group .item ~.item,#gallery.detail .lstImg .wImage,#gallery.detail .lstImg .wImage ~.wImage,#gallery .parent .group .item:first-child, #gallery .parent .group .item ~.item { width: calc((100% - 30px) / 2); margin-right: 30px; clear: none}
    #mvideo .parent .group .item:nth-child(2n),#gallery .parent .group .item:nth-child(2n),#gallery.detail .lstImg .wImage:nth-child(2n) {margin-right: 0}
    #mvideo .parent .group .item:nth-child(2n + 1),#gallery .parent .group .item:nth-child(2n + 1) {clear: both}
    .noidung table, .noidung .table-responsive {width: 100% !important; max-width: 100% !important; overflow: unset !important} 

    #product.list .colright,#product.list.detail .other .item { width: 100%!important; margin: 0}
    #product.list .colright .commonTitle.flex,#product.list .nameCate.flex { display: block; width: 100%}
    #product.list .colleft {margin-top: 10px}
    #product.list .colleft .sticky { display: table; width: 100%}
    #product.list .colleft .sticky ul,#product.list .colleft .sticky .slideBanner { width: calc((100% - 15px) / 2); float: left}
    #product.list .colleft .sticky ul {margin-right: 15px}
    #product.list .colright .group .item:first-child, #product.list .colright .group .item~.item { width: calc((100% - 40px) / 3); margin-right: 20px}
    #product.list .colright .group .item:nth-child(3n) {margin-right: 0} 
    #footer .info {width: 100%}
    #product.hp {padding-top: 0}
    #dsDN.detail .nameMain {font-size: 25px}
    #header .slideHeader {display: none}
}

@media (max-width:479px){
    #newsHot .left,
    #newsHot .right,
    .parentNews .group,
    #chuyenmuc ul li,
    #lienketwebsite .tab-content ul li,
    #lienketwebsite .tab-links li,
    #news .other .group .item .wImage,
    #news .other .group .item .info,
    #tthc .formSearch .item .flex,
    #contact .contact-left .lstinfo li,
    #contact .contact-right .ipt .item.item1,
    #news.list .main .wImage,
    #news.list .main .info,
    #news.list .group .item .wImage,
    #news.list .group .item .info,
    .bannerDuoiNB a,
    #lienketlink .item{ width: 100% !important }
    #newsHot .right,
    .bannerDuoiTin a { margin-top: 15px; padding: 0; flex: none; width: 100% }
    .parentNews .group,.parentNews .group.style1 {margin-right: 0}
    #bannerLienKet ul li,#bannerLienKet ul li:nth-child(3n + 1),#bannerLienKet ul li:nth-child(3n) { width: 100%; margin-right: 0; clear: none} 
    #lienketwebsite .tab-links li {text-align: center}
    .bannerDuoiTin a {margin: 7px 0}
    #CommonCuoiChiTietTin { padding: 0}
    #CommonCuoiChiTietTin>.fl { width: 100%; border-bottom: 7px solid #fff;padding: 5px}
    #CommonCuoiChiTietTin>.fr {padding: 5px }
    #news .other .group .item .info {margin-top: 10px}
    #tthc .formSearch .item {flex-flow:row wrap}
    #tthc .formSearch .item .flex_1 { flex: none; margin-bottom: 10px}
    #tthc .formSearch .item .flex_1.select2 { flex: 1; margin-bottom: 0} 
    #tthc .formSearch .item .flex_1:last-child { margin-bottom: 0; margin-top: 10px} 
    #contact .contact-left .lstinfo {display: block}
    #contact .cb.h20 {height: 10px}
    input[name=txtimgcode] { width: 110px !important; display: inline-block}
    .modal input[name=txtimgcode] { width: 100% !important; margin-bottom: 5px}
    .commonxemthem.fr { float: none; margin-top: 20px}
    #sodoweb .sitemap {margin-left: 20px}
    #detailTable .content .col1,#detailTable .content .col2,#duthaovanban .row .collum {width: 100%}
    .modal-dialog {margin: auto}
    #duthaovanban .row {display: block}
    #duthaovanban .row .collum:last-child { margin-top: 20px; width: 100%;}
    #duthaovanban .row .collum .cb {display: none}
    #duthaovanban .row .collum:last-child .btnDT { width: calc((100% - 15px) / 2); float: left; margin-right: 15px}
    #duthaovanban .row .collum:last-child .btnDT:last-child {margin-right: 0}
    #formGopY .row .title { width: 100%; margin-bottom: 7px}
    #news.list .group .item {display: block}
    #news.list .main .info,#news.list .group .item .info {margin-top: 10px}
    .bannerDuoiNB { display: block;}
    .parentNews .group .content .list {flex: none}
    .parentNews .group .content .main,.parentNews .group .content .list { width: 100%; position: static; padding: 0}
    .parentNews .group .content .main {margin-bottom: 10px}

    #lienketlink .item { width: calc((100% - 15px) / 2); margin:5px 0}
    #lienketlink .item:nth-child(2n) {margin-right: 0}

    #news.list .group1 {display: block}
    #news.list .main .wImage {margin-right: 0}
    #vbHome table th:first-child, #vbHome table td:first-child, #vbHome table th:nth-child(2), #vbHome table td:nth-child(2) {width: auto}
    #doanhnghiep #qa ul { display: block; margin-bottom: -10px}
    #doanhnghiep #qa ul li { width: 100%; margin: 0; margin-bottom: 10px}
    
    #hoidap .form .item { display: block; margin-bottom: 10px}
    #hoidap .form .item .form-control, #hoidap .form .item .select2,#hoidap .form .item p { flex: none; width: 100%}
    #hoidap .form .item p {margin-bottom: 5px}
    #lstQA .group .item .wImage {display: none}
    #lstQA .group .item .info {margin-left: 0}

    .modal #detailTable .content .row {display: block}
    .modal #detailTable .content .col1,.modal #detailTable .content .col2 {width: 100%}
    #news.list .group .item, #news.list .group .item ~.item  { width: 100%; margin-right: 0}
    #news.list .group .item:last-child { padding-bottom: 0; border: none}

    #news.detail .other .item,#news.detail .other .item ~.item {width: 100%}
    #news.detail .other .item:last-child {margin-bottom: 0} 

    #product .group .item,#product .group .item ~.item { width: calc((100% - 20px) / 2); clear: none}
    #product .group .item:nth-child(2n) {margin-right: 0}
    #product.detail .left .imgSmall,#product.detail .left .imgLarge {width: 100%}
    #product.detail .left .imgSmall .slick-slide { margin: 0 5px}

    #vanban #formSearch .group .item>.row:first-child>.col:nth-child(3)>span { width: 110px; display: inline-block;}
    #vanban #formSearch .group .item>.row:first-child>.col:nth-child(3)>select { width: calc(100% - 120px); margin-right: 0; margin-bottom: 5px}
    #vanban #formSearch .group .item>.row:first-child>.col:nth-child(3)>select:last-child {margin-bottom: 0}

    #congdan .parent .group .left,#congdan .parent .group .right {width: 100%}
    #congdan .parent .group .left {padding-bottom: 0}
    #congdan .parent .group .right .listnews ul li { padding: 0; padding-left: 15px}
    #congdan .parent .group .right .listnews ul li a { padding: 7px 0}
    #congdan #news.list {padding: 0}
     
    #mvideo .bound,#mvideo .infovideo,#gallery .parent .group .item, #gallery .parent .group .item ~.item,#gallery.detail .lstImg .wImage,#gallery.detail .lstImg .wImage ~.wImage,#gallery .parent .group .item:first-child, #gallery .parent .group .item ~.item { width: 100%; }
    #mvideo .infovideo {padding: 10px}
    #mvideo .bound,#mvideo .infovideo {margin: 0}
    #mvideo .parent .group .item,#mvideo .parent .group .item ~.item {width: 100%}
    #mvideo .parent .group .item .info {padding: 10px 10px 10px 50px} 
    #gallery .parent .group .item, #gallery .parent .group .item ~.item,#gallery.detail .lstImg .wImage,#gallery.detail .lstImg .wImage ~.wImage {margin-bottom: 10px}

    #hophoinghi #searchForm .flex {flex-wrap: wrap}
    #hophoinghi #searchForm .item,#keyword {width: 100%} 
    #keyword { flex: none; margin-bottom: 10px} 
    #hophoinghi #searchForm .commonxemthem,#tthc.danhba .formSearch .commonxemthem {margin: auto}
    #tthc.danhba .table table { width: auto; min-width: 600px}
    #tthc.danhba .danhbatable td { width: 150px !important; max-width: 150px!important}
    #DacSan .commonTitle {line-height: 38px}

    #footer .wrp {padding: 0}
    #footer .info { display: block; }
    #footer .info a.logo { display: block; margin: auto; margin-bottom: 10px} 
    #ImageHomeDS .item, #ImageHomeDS .item~.item, #dsDN.list .group .item:first-child, #dsDN.list .group .item~.item,#product.list .colright .group .item:first-child, #product.list .colright .group .item~.item { width: calc((100% - 15px) / 2); margin-right: 15px}
    #ImageHomeDS .item:nth-child(2n), #dsDN.list .group .item:nth-child(2n),#product.list .colright .group .item:nth-child(2n) {margin-right: 0}
    #product.list .colleft .sticky ul, #product.list .colleft .sticky .slideBanner { width: 100%; margin-bottom: 10px}
    .dib.fl.lh35 {line-height: 22px}
    #mvideo .title .cateName {font-size: 14px}
}