﻿@media(max-width: 1199px){
    .container {width: calc(100% - 40px);min-width: 0}

    #open_menu {display: block;width: 40px;height: 40px;background: white  url(images/openMN.png) no-repeat center;border-radius: 3px;float: right;margin: 2px 0 0 20px;background-size: 20px}
    #open_menu.active {background-image: url(images/closeMN.png)}
    .mainMN {position: relative;z-index: 6;clear: both}
    #menu {position: absolute;top: 131px;right: -310px;width: 300px;z-index: 5;background-color: white;padding: 0;margin: 0;box-shadow: -2px 2px 5px rgba(0,0,0,0.2);transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s}
    #menu.active {right: 0;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s}
    #menu li {list-style: none;display: block;position: relative}
    #menu > li > a {display: block;text-decoration: none;color: #333;padding: 10px;font-family: 'MB';text-transform: uppercase}
    #menu > li {border-top: 1px solid #333}
    #menu ul {padding: 0;margin: 0;display: none}
    #menu ul li {border-top: 1px solid #dbdbdb}
    #menu ul a {display: block;text-decoration: none;color: #333;padding: 10px 10px 10px 25px;font-family: 'MB';position: relative}
    #menu .hasSub > a {padding-right: 30px}
    #menu .openSub {width: 30px;height: 40px;position: absolute;top: 0;right: 0;text-align: center;color: #a37a66;font: 30px 'HB';line-height: 38px}
    #menu .openSub:before {content:"+"}
    #menu .hasSub.show > ul {display: block}
    #menu .hasSub.show > a {background-color: #a37a66;color: white}
    #menu .hasSub.show .openSub {color: white}
    #menu .hasSub.show .openSub:before {content:"-"}

    #header .email {display: none}
    #header .logo {margin-left: 50px}
    .camKet {padding: 30px 0}
    .camKet .imgc {margin: 30px 0 30px 30px}
    .camKet .right {width: calc(100% - 400px)}
    .slick-prev {left: 0}
    .slick-next {right: 0}

    .list_sp .item {width: calc((100% - 60px)/3)}
    .list_sp:not(.slick-slider) .item:nth-child(4n) {margin-right: 30px}
    .list_sp:not(.slick-slider) .item:nth-child(3n) {margin-right: 0}
    .list_sp .title {margin: 10px}
    .list_sp .price {padding: 0 10px}
    .list_sp .price .old {margin-left: 10px}
    .bao_tt .title {font-size: 20px}

    #footer .contact_ft {width: calc(50% - 15px)}
    #footer .menuFT {float: right;width: calc(50% - 30px)}
    #footer .mxhFB {width: 300px;float: left;margin-bottom: 30px}

    .list_news .title {font-size: 15px}
    .info_ct .item {width: calc(50% - 15px);margin-bottom: 20px}
    .info_ct .item:nth-child(2n) {margin-right: 0}
    .pageLH .left {padding: 10px}
    #form_contact .btn a {padding: 0 12px}
    .spCate.active {display: block}

    .nd_SoSanh .left {width: 130px}
    .nd_SoSanh .right {width: calc(100% - 130px)}
    #listSS.list_sp .item {padding: 40px 10px 0 10px}
    #listSS.list_sp .spInfo {margin: 0 -10px;padding: 10px}
    #listSS.list_sp .price {padding: 0 10px 10px 10px;margin: 0 -10px}
    #listSS.list_sp .imgc {max-width: 170px;margin: auto}
    .nd_SoSanh .left .item:first-child {height: 304px}

    .spCate li.show > a {background-color: var(--other-color)}
    .spCate li.show > .openSub:after {display: none}
    .spCate li ul {position: static}
    .spCate li a {padding: 5px 30px 5px 10px;font-size: 14px}
    .spCate li ul li a {padding: 5px 15px 5px 30px}
}
@media(max-width: 767px){
    .container {width: calc(100% - 20px)}
    .list_sp .tooltip {display: none !important}
    #header .hotline {display: none}
    #header .logo {margin-left: 0;width: 80px}
    #header .logo .imgc0 {height: 60px}
    #header .search {margin-top: 18px}
    #header .search input {width: 140px;height: 30px;padding: 0 15px}
    #header .search a {height: 30px;width: 40px}
    #header .cart {font-size: 0;padding: 0 20px 0 15px;background-position: center}
    #header .cart span {left: 25px}
    .cateSP .openCate {font-size: 13px;letter-spacing: -0.3px}
    #open_menu {margin-left: 10px}
    #header {height: 112px}
    #slide_home .slick-arrow {width: 35px;height: 35px;background-size: cover;top: calc(50% - 17px)}
    #slide_home .slick-prev {left: 0}
    #slide_home .slick-next {right: 0}
    #slide_home .bannerPC {display: none}
    #slide_home .bannerMB {display: block}
    #slide_home .imgc:before {padding-bottom: 66.66%}

    .camKet {padding: 20px 0}
    .camKet .imgc {width: 250px;height: 250px;margin: 20px auto;float: none;border: 10px solid #2d363d;box-shadow: 0 0 0 15px rgba(0,0,0,0.3)}
    .camKet .right {width: auto;float: none;padding-top: 20px}
    .list_ti .item {width: auto;float: none;margin: 0 0 30px 0;overflow: hidden}
    .list_ti .imgc0 {margin-bottom: 20px;float: left}
    .list_ti .title {margin-bottom: 5px;padding-bottom: 5px;width: calc(100% - 90px);float: right}
    .list_ti .desc {width: calc(100% - 90px);float: right}
    .cateSPHome {padding: 30px 0}
    .bao_tt .title {font-size: 18px}
    .list_sp:not(.slick-slider) .item {width: calc(50% - 5px);margin: 0 0 10px 10px !important}
    .list_sp:not(.slick-slider) .item:nth-child(2n+1) {margin-left: 0 !important;clear: both}
    .vdHome, .gt2, .newsHome, .cnForm {padding: 30px 0}
    .list_dv .imgc, .list_dv .info {width: 100%}
    .bao_tt {margin-bottom: 20px}
    .reviewKH, .formHome {width: 100%}
    .reviewKH {margin-bottom: 50px}
    .list_cn .content {left: 0}
    #footer {padding-top: 30px}
    #footer .searchFT {margin-bottom: 20px;padding-bottom: 20px}
    #footer .ttSearch {font-size: 20px}
    #footer .contact_ft {width: auto;float: none}
    #footer .menuFT {width: auto;float: none;margin: 0 0 30px 0}
    #fixRight {width: 35px;right: 2px;bottom: 50px}
    #fixRight a {margin-bottom: 3px}
    #fixRight a img {max-width: 35px}
    #page_head {width: 35px;height: 35px;background-size: cover}
    #menu {top: 112px}
    .gt1, .gt3 {padding: 30px 0}
    .gt1 .big_tt span {font-size: 24px}
    .gt2 .item {width: auto;float: none;margin-bottom: 10px}
    .gt3 .noidung {width: auto}
    .list_news .item {width: 100%;margin-right: 0}
    .commonTool .date .view {margin-left: 10px}
    .commonTool .changeSize .NormalSize {display: none}
    .bao_nd {padding: 30px 0}
    .tt_Detail {font-size: 22px}
    .album_zoom .imgc {width: calc(50% - 5px);margin: 0 10px 10px 0}
    .album_zoom .imgc:nth-child(2n) {margin-right: 0}
    .pageLH {padding: 30px 0}
    .info_ct .item {width: 100%;margin-right: 0}
    .info_ct b {margin-bottom: 10px}
    .pageLH .left {width: auto;float: none;margin-bottom: 30px}
    .pageLH .map {width: auto;float: none;height: auto}
    .pageLH .map:before {padding-bottom: 100%}
    #form_contact .btn a {padding: 0 5px;letter-spacing: -0.3px}

    .spInfo {padding: 30px 0 0 0}
    .spInfo .left, .spInfo .right {width: auto;float: none;margin-bottom: 30px}
    .spInfo .right .btn a {width: auto;padding: 0 15px;float: none;display: inline-block;margin-bottom: 10px}
    .tablabel a {width: 48%;box-sizing: border-box;line-height: 20px;font-size: 12px;padding: 5px;text-align: center}
    #Cart {margin: 30px 0}
    #ds_hang {margin: 0 10px}
    #ds_hang .giaDelete {float: none;padding-top: 10px;clear: both}
    #Cart .total {padding: 10px}
    #Cart .total .tongtien {line-height: 22px;margin-bottom: 15px}
    .tab_label {margin: 10px 10px 0 10px;padding-bottom: 20px}
    .tab_label .item {font-size: 12px}
    .title_ct {font-size: 20px}
    #form_pay .item {width: 100%}
    .tab_nd {padding: 0 10px 20px 10px}
    #form_pay {padding: 10px}
    .btnCart {padding: 0 20px}
    .btnCart a {padding: 0;display: block}

    .nd_SoSanh .left {display: none}
    .nd_SoSanh .right {width: auto;float: none}
    #listSS.list_sp {border-left: 1px solid #ececec}
    #listSS.list_sp .item {width: 50%;float: left}

    .lvSP, .lbVideo {display: flex;margin-bottom: 10px}
    .lvSP a, .lbVideo a {font-size: 14px}

    .list_sp .title {font-size: 15px}
    .list_sp.slick-slider .slick-list {width: calc(100% + 10px)}
    .list_sp.slick-slider .item {margin-right: 10px}
}