﻿@media(max-width:1600px) and (min-width:1200px) {
    .suMenhTamNhin .suMenh .khungAnh:before,
    .suMenhTamNhin .tamNhin .khungAnh:before {
        padding-bottom: calc(1050/950*100%);
    }
}

@media(min-width:1200px) {
    .menuBox {
        float: left;
        margin-right: 65px;
    }
    .menuMain {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .menuMain>li {
        float: left;
        margin-right: 30px;
        position: relative;
    }
    .menuMain>li>a {
        font: 17px/22px RobotoMedium;
        text-transform: uppercase;
    }
    .menuMain>li>a:hover {
        color: #2d2f8c;
    }
    .menuMain>li:last-child {
        margin-right: 0;
    }
    .menuMain>li.active a {
        color: #2d2f8c;
    }
    .menuMain .subMenu {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9;
        padding: 33px 0 0;
        min-width: 220px;
        opacity: 0;
        transform: translateY(30px);
        pointer-events: none;
        transition: .5s;
    }
    .menuMain .subMenu li.top {
        padding-top: 20px;
    }
    .menuMain li:hover>.subMenu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: .5s;
    }
    .menuMain .subMenu>li>a {
        font: 15px/22px Roboto;
        color: #333;
        padding: 8px 20px 8px 20px;
        border-bottom: 1px solid #fff;
        display: block;
        background: #eee;
        width:250px;
    }
    .menuMain .subMenu>li>a i {
        display: none;
    }
    .menuMain .subMenu>li:last-child>a {
        border-bottom: none;
    }
    .menuMain>li>.subMenu>li>a {
        position: relative;
    }
    .menuMain .subMenu>li:hover>a,
    .menuMain .subMenu>li.active>a {
        color: #2d2f8c;
        text-shadow: 0 0 0;
    }
    .menuMain .subMenu .subMenu {
        top: 0;
        left: 100%;
        border-left: 1px solid rgba(0, 0, 0, 0);
    }
    .menuMain .subMenu2 {
        left: 50%;
        transform: translate(-50%, 30px);
        -webkit-transform: translate(-50%, 30px);
        background-color: #eee;
        padding: 40px 0 10px;
        width: 500px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .menuMain .subMenu2:before {
        content: '';
        width: 100%;
        height: 33px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 7;
    }
    .menuMain li:hover>.subMenu2 {
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
    }
    .menuMain .subMenu2>li {
        webkit-flex: 0 0 calc(50%);
        -ms-flex: 0 0 calc(50%);
        flex: 0 0 calc(50%);
        max-width: calc(50%);
    }
    .menuMain .subMenu2>li>a {
        border-bottom: none;
        background: none !important;
        box-shadow: none !important;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .menuMain .subMenu2>li>a:hover,
    .menuMain .subMenu2>li.active>a {
        color: #2d2f8c;
    }
    .menuResBtn,
    .liSearch {
        display: none;
    }
}

@media(max-width:1199px) {
    .container {
        width: calc(100% - 40px);
    }
    .btn_top {
        bottom: 100px;
        right: 10px;
    }
    .bgClose {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        z-index: 9;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        transition: .5s ease-in-out;
        -webkit-transition: .5s ease-in-out;
    }
    body.active .bgClose {
        pointer-events: auto;
        opacity: 1;
    }
    .slideBox .slick-arrow {
        width: 40px;
        height: 40px;
        top: calc(50% - 20px);
    }
    .slideBox .slick-arrow i {
        line-height: 40px;
    }
    .slideBox .slick-arrow:before {
        font-size: 25px;
    }
    .homeTop {
        padding-bottom: 20px;
    }
    .newsHome {
        width: 100%;
        margin-right: 0;
    }
    .newsHome .col1 {
        width: calc(354/728*100%);
        margin-right: 20px;
    }
    .newsHome .col2 {
        width: calc(100% - 354/728*100% - 20px);
    }
    .newsHome .col1 .itemDescription {
        max-height: 90px;
    }
    .newsHome .col1 .khungAnh:before {
        padding-bottom: calc(236/354*100%);
    }
    .newsHome .col2 .khungAnh {
        width: calc(118/354*100%);
    }
    .newsHome .col2 .itemDetail {
        width: calc(100% - 118/354*100% - 15px);
    }
    .videoHome {
        width: 100%;
        margin-top: 25px;
    }
    .videoHome .tab {
        margin-top: 10px;
    }
    .productHome {
        padding-bottom: 0;
    }
    .productDS .slick-list {
        margin: 0 -10px;
    }
    .productDS .item {
        padding-left: 10px;
        padding-right: 10px;
    }
    .productSlide1 .slick-arrow.slick-next {
        right: -20px;
    }
    .productSlide1 .slick-arrow.slick-prev {
        left: -20px;
    }
    .productSlide1 .slick-arrow:before {
        font-size: 34px;
    }
    .giaTriCotLoi .slick-list {
        margin: 0 -10px;
    }
    .giaTriCotLoi .item {
        padding-left: 10px;
        padding-right: 10px;
    }
    .giaTriCotLoi .slick-arrow.slick-next {
        right: -20px;
    }
    .giaTriCotLoi .slick-arrow.slick-prev {
        left: -20px;
    }
    .giaTriCotLoi .slick-arrow:before {
        font-size: 20px;
    }
    .videoHome1 {
        width: 100%;
        margin-right: 0;
    }
    .QAHome {
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }
    .QAHome .content {
        padding-bottom: 20px;
    }
    .logoSP {
        background: #fafafa;
        padding: 5px 0 25px;
    }
    .giaTriCotLoi .slick-arrow {
        opacity: .8;
    }
    .logoSP .slick-arrow.slick-next {
        right: -17px;
    }
    .logoSP .slick-arrow.slick-prev {
        left: -20px;
    }
    .logoSP .slick-arrow:before {
        font-size: 34px;
    }
    .footerBox .contactInfo {
        width: calc(50% - 15px);
        margin-right: 30px;
    }
    .footerBox .contactInfo:nth-child(2n+1) {
        width: calc(50% - 15px);
        margin-right: 0;
    }
    .footerBox .contactInfo.item1 {
        width: 100%;
        margin-bottom: 25px;
    }
    .footerBox .bottom .text1 {
        float: none;
        margin-top: 15px;
    }
    .footerBox .bottom {
        padding: 15px 0 10px;
    }
    .footerBox .bottom .text {
        float: none;
    }
    .footerBox .bottom .logoBCT {
        float: right;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        margin-top: 22px;
    }
    .footerBox .bottom .container {
        position: relative;
    }
    .masterMain {
        width: 100%;
        margin-right: 0;
    }
    .sideBar {
        display: none;
    }
    .sideBar2 {
        display: block;
        width: 100%;
    }
    .newsRight1,
    .datCauHoi,
    .videoRight1,
    .fbLink,
    .productRight1 {
        display: none;
    }
    .productRight1.lienQuan {
        margin-top: 20px;
        display: block;
    }
    .productDS .filter input,
    .productDS .filter select {
        width: 288px;
    }
    .productDS .itemBox:nth-child(n) {
        width: calc((100% - 40px)/3);
        margin-right: 20px;
        margin-top: 0;
    }
    .productDS .itemBox:nth-child(3n) {
        margin-right: 0;
    }
    .productDS .itemBox:nth-child(3)~.itemBox {
        margin-top: 20px;
    }
    .productDS .itemDetail {
        padding: 0 10px;
    }
    .fullDetail .tab a {
        padding: 0 15px;
    }
    .chiNhanh .itemBox:nth-child(1) .khungAnh {
        width: 100%;
    }
    .chiNhanh ul li.map {
        position: relative;
        left: 0;
        bottom: 0;
    }
    .infoContact .col1 {
        width: 100%;
        margin-right: 0;
    }
    .infoContact .col2 {
        width: 100%;
        margin-top: 30px;
    }
    .thuVienDS .itemBox:nth-child(n) {
        width: calc((100% - 40px)/3);
        margin-right: 20px;
        margin-top: 0;
    }
    .thuVienDS .itemBox:nth-child(3n) {
        margin-right: 0;
    }
    .thuVienDS .itemBox:nth-child(3)~.itemBox {
        margin-top: 20px;
    }
    .thuVienDS .filter input,
    .thuVienDS .filter select {
        width: 585px;
    }
    .hoiDapDS .filter input,
    .hoiDapDS .filter select {
        width: 288px;
    }
    .trietLyKinhDoanh .itemDetail {
        width: 345px;
    }
    .suMenhTamNhin .suMenh {
        width: 100%;
    }
    .suMenhTamNhin .tamNhin {
        width: 100%;
    }
    .suMenhTamNhin .suMenh .detail {
        width: 500px;
        height: 500px;
        right: calc(-500px/2);
    }
    .suMenhTamNhin .suMenh .detail .content {
        width: 450px;
        height: 450px;
    }
    .suMenhTamNhin .suMenh .detail .content .boxContent {
        padding: 0 15px 0 60px;
    }
    .suMenhTamNhin .tamNhin .detail {
        width: 500px;
        height: 500px;
        left: calc(-500px/2);
    }
    .suMenhTamNhin .tamNhin .detail .content {
        width: 450px;
        height: 450px;
    }
    .suMenhTamNhin .tamNhin .detail .content .boxContent {
        padding: 0 60px 0 15px;
    }
    .thongSo .itemBox {
        width: 50%;
        margin-right: 0;
    }
    .thongSo .itemBox:nth-child(2)~.itemBox {
        margin-top: 30px;
    }
    .menuResBtn {
        float: right;
        width: 22px;
        height: 19px;
        margin-top: 24px;
    }
    .openMenuRes {
        display: block;
        background: url(Pic/openMenu.png) no-repeat center center;
        background-size: 22px auto;
        width: 22px;
        height: 19px;
        font-size: 0;
        cursor: pointer;
        vertical-align: top;
        position: relative;
        z-index: 10;
    }
    .openMenuRes.active {
        background-image: url(Pic/closeMenu.png);
        background-size: 16px auto;
    }
    .menuMain {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 300;
        overflow-y: scroll;
        max-height: calc(100vh - 122px);
        width: 100%;
        padding: 0 10px;
        margin: 0;
        list-style: none;
        display: none;
        background: #eee;
    }
    .menuBox .menuMain>li>a {
        font-family: RobotoBold;
        font-size: 15px;
        line-height: 22px;
        text-transform: uppercase;
        display: block;
        border-bottom: 1px solid #c6c6c6;
        color: #333;
        padding: 12px 30px 12px 10px;
        background: #eee;
    }
    .menuBox .menuMain>li>a>i {
        display: none;
    }
    .menuBox .menuMain>li.home a {
        border-top: none;
    }
    .menuBox .menuMain>li:last-child a {
        border-bottom: none;
    }
    .menuBox .menuMain>li {
        position: relative;
        margin-right: 0;
    }
    .menuBox .menuMain>li.active>a {
        background-color: #c6c6c6;
    }
    .menuMain span.openSub {
        height: 46px;
        width: 30px;
        z-index: 3;
        border: none;
        top: 0;
        right: 0;
        position: absolute;
        cursor: pointer;
        display: inline-block;
        text-align: center;
    }
    .menuMain span.openSub:before {
        content: '';
        font-family: FontAwesome;
        color: #333;
        line-height: 46px;
        font-size: 16px;
    }
    .menuMain span.openSub.active:before {
        content: '';
    }
    .menuMain .subMenu span.openSub:before {
        color: #333;
    }
    .menuMain .subMenu span.openSub.active:before {
        color: #fff;
    }
    .menuMain .subMenu {
        display: none;
        padding: 0;
        list-style: none;
    }
    .menuMain .subMenu li {
        position: relative;
    }
    .menuMain .subMenu li a {
        color: #333;
        text-transform: none;
        border-bottom: 1px solid #c6c6c6;
        font: 15px/22px RobotoBold;
        padding: 12px 10px 12px 10px;
        background: #fff;
        display: block;
    }
    .menuMain .subMenu li a i {
        margin-right: 5px;
        font-size: 15px;
        color: #999;
        font-size: 9px;
        transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
    }
    .menuMain .subMenu li:last-child a {
        border-bottom: none;
    }
    .menuMain .subMenu li>a:hover,
    .menuMain .subMenu li.active>a {
        color: #2d2f8c;
    }
    .menuMain .subMenu li>a:hover i,
    .menuMain .subMenu li.active>a i {
        color: #2d2f8c;
    }
    .menuMain .subMenu .subMenu li a {
        color: #333;
        text-transform: none;
        border-bottom: 1px solid #c6c6c6;
        font: 15px/22px RobotoBold;
        padding: 12px 10px 12px 32px;
        background: #fff;
        display: block;
    }
    .menuMain .subMenu .subMenu li>a:hover {
        color: #2d2f8c;
    }
    .searchBox {
        position: relative;
        border-bottom: 1px solid #c6c6c6;
    }
    .searchBox .searchIcon {
        display: none;
    }
    .searchBox input {
        font: 14px/46px Roboto;
        height: 46px;
        padding-right: 30px;
        margin:0px 10px;
    }
    .searchBox .searchBtn {
        width: 30px;
        height: 46px;
        display: block;
        top: 0;
        right: 0;
        z-index: 1;
        text-align: center;
        position: absolute;
    }
    .searchBox .searchBtn i {
        line-height: 46px;
    }
    .popUpLuuY {
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 9999999999;
    }
    .productDS .itemMore {
        display: table;
    }
    .menuBottomBox {
        width: calc(50% - 20px);
        margin-right: 40px;
    }
    .footerBox .moreInfo {
        width: calc(50% - 20px);
    }
}

@media(min-width:768px) {
    .videoHome1 .itemBox:nth-child(1) .khungAnh .icon {
        width: 84px;
        height: 84px;
    }
    .videoHome1 .itemBox:nth-child(1) .khungAnh .icon .bg {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        position: absolute;
        z-index: 5;
        height: 62px;
        width: 62px;
        background-size: 21px auto;
        background-position: left 24px center;
    }
    .videoHome1 .itemBox:nth-child(1) .khungAnh .icon .border {
        height: 84px;
        width: 84px;
    }
    .mb {
        display: none;
    }
}

@media(max-width:767px) {
    .container {
        width: calc(100% - 20px);
    }
    .pc {
        display: none;
    }
    .headerBox {
        padding: 10px 0;
    }
    .slideBox .khungAnh:before,
    .bannerBox .khungAnh:before {
        padding-bottom: calc(242/320*100%);
    }
    .slideBox .slick-arrow.slick-prev {
        left: 10px;
    }
    .slideBox .slick-arrow.slick-next {
        right: 10px;
    }
    .newsHome .col1 {
        width: 100%;
        margin-right: 0;
    }
    .newsHome .col2 {
        width: 100%;
        margin-top: 20px;
    }
    .productSlide1 .slick-arrow.slick-prev {
        left: 0;
    }
    .productSlide1 .slick-arrow.slick-next {
        right: 0;
    }
    .QAHome .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    .logoSP .slick-arrow:before {
        font-size: 24px;
    }
    .logoSP .slick-arrow.slick-prev {
        left: -10px;
    }
    .logoSP .slick-arrow.slick-next {
        right: -11px;
    }
    .videoHome1 .itemBox:nth-child(n) {
        width: calc(50% - 5px);
        margin-right: 10px;
    }
    .videoHome1 .itemBox:nth-child(2n+1) {
        margin-right: 0;
    }
    .videoHome1 .itemBox:nth-child(3)~.itemBox {
        display: none;
    }
    .videoHome1 .itemBox:nth-child(1)~.itemBox {
        margin-top: 10px;
    }
    .videoHome1 .itemTitle {
        padding: 0 10px 10px;
    }
    .videoHome1 .itemTitle a {
        font: 15px/22px RobotoBold;
    }
    .topBox .text {
        display: none;
    }
    .footerBox .contactInfo {
        width: 100% !important;
        margin-right: 0;
    }
    .footerBox .contactInfo.item2 {
        margin-bottom: 25px;
    }
    .footerBox .bottom .text {
        width: 100%;
        margin-right: 0;
    }
    .footerBox .bottom .text1 {
        margin-top: 10px;
    }
    .footerBox .bottom .container {
        padding-bottom: 60px;
    }
    .footerBox .bottom .logoBCT {
        margin-top: 0;
        bottom: 0;
        top: auto;
        right: auto;
        left: 0;
    }
    .newsTop .khungAnh {
        width: 100%;
        margin-right: 0;
    }
    .newsTop .itemDetail {
        width: 100%;
        margin-top: 15px;
    }
    .newsDS .itemBox {
        width: 100%;
        margin-right: 0;
    }
    .newsDS .itemBox:nth-child(1)~.itemBox {
        margin-top: 20px;
    }
    .productBottom .title a,
    .productBottom .title span {
        font-size: 20px;
    }
    .newsOther .slick-list {
        margin: 0 -10px;
    }
    .newsOther .item {
        padding: 0 10px;
    }
    .productDS .filter input,
    .productDS .filter select {
        margin-bottom: 10px;
        width: 100%;
        margin-right: 0;
    }
    .productDS .filter a {
        width: 100%;
    }
    .productDS .itemBox:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .productDS .itemBox:nth-child(1)~.itemBox {
        margin-top: 20px;
    }
    .shortDetail .col1 {
        width: 100%;
        margin-right: 0;
    }
    .shortDetail .col2 {
        width: 100%;
        margin-top: 20px;
    }
    .shortDetail .col2 .bottom .fbPlugin {
        margin-right: 0;
    }
    .shortDetail .col2 .contact {
        float: right;
    }
    .thuVienDS .itemBox:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .thuVienDS .itemBox:nth-child(1)~.itemBox {
        margin-top: 20px;
    }
    .thuVienDS .filter input,
    .thuVienDS .filter select {
        margin-bottom: 10px;
        width: 100%;
        margin-right: 0;
    }
    .thuVienDS .filter a {
        width: 100%;
    }
    .dsHinhAnh .itemBox:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .dsHinhAnh .itemBox:nth-child(1)~.itemBox {
        margin-top: 20px;
    }
    .kienThucDS .filter input,
    .kienThucDS .filter select {
        margin-bottom: 10px;
        width: 100%;
        margin-right: 0;
    }
    .kienThucDS .filter a {
        width: 100%;
    }
    .kienThucDS .khungAnh {
        width: 100%;
        margin-right: 0;
    }
    .kienThucDS .itemDetail {
        width: 100%;
        margin-top: 15px;
    }
    .gioiThieuTop {
        padding-bottom: 40px;
    }
    .thongSo .itemBox {
        width: 100%;
    }
    .thongSo .itemBox:nth-child(1)~.itemBox {
        margin-top: 30px;
    }
    .suMenhTamNhin .suMenh .detail {
        width: 384px;
        height: 384px;
        bottom: -192px;
        right: auto;
        left: 50%;
        top: auto;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        border: 5px solid rgba(255, 255, 255, .5);
    }
    .suMenhTamNhin .suMenh .detail .content {
        width: 360px;
        height: 360px;
    }
    .suMenhTamNhin .suMenh .detail .content .boxContent {
        padding: 0 50px 0 50px;
        top: 20px;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        width: 100%;
        text-align: center;
    }
    .suMenhTamNhin .suMenh .detail .content .boxContent .description {
        margin-top: 5px;
        text-align: center;
        height: 90px;
    }
    .suMenhTamNhin .tamNhin .khungAnh:before,
    .suMenhTamNhin .suMenh .khungAnh:before {
        padding-bottom: calc(1050/950*100%);
    }
    .suMenhTamNhin .tamNhin .detail {
        width: 384px;
        height: 384px;
        bottom: auto;
        right: auto;
        left: 50%;
        top: -192px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        border: 5px solid rgba(255, 255, 255, .5);
    }
    .suMenhTamNhin .tamNhin .detail .content {
        width: 360px;
        height: 360px;
    }
    .suMenhTamNhin .tamNhin .detail .content .boxContent {
        padding: 0 50px 0 50px;
        top: calc(50% + 20px);
        transform: translateY(0);
        -webkit-transform: translateY(0);
        width: 100%;
        text-align: center;
    }
    .suMenhTamNhin .tamNhin .detail .content .boxContent .description {
        margin-top: 5px;
        text-align: center;
        height: 68px;
    }
    .giaTriCotLoi .slick-arrow.slick-next {
        right: -9px;
    }
    .giaTriCotLoi .slick-arrow.slick-prev {
        left: -10px;
    }
    .trietLyKinhDoanh .itemBox:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .trietLyKinhDoanh .itemBox:nth-child(1)~.itemBox {
        margin-top: 34px;
    }
    .trietLyKinhDoanh .itemDetail {
        width: 100%;
        border-radius: 60px !important;
    }
    .trietLyKinhDoanh .itemDetail:before {
        display: none !important;
    }
    .hoiDapDS .filter input,
    .hoiDapDS .filter select {
        margin-bottom: 10px;
        width: 100%;
        margin-right: 0;
    }
    .hoiDapDS .filter a {
        width: 100%;
    }
    .fullDetail .tab li {
        width: 100%;
    }
    .fullDetail .tab li a {
        border: none;
        border-bottom: 1px solid #fff;
    }
    .fullDetail .tab li:last-child a {
        border: none !important;
    }
    .fullDetail .boxContent {
        padding: 15px 15px 20px;
    }
    .chiNhanh .itemBox:nth-child(n) {
        width: 100%;
        margin-right: 0;
    }
    .chiNhanh .itemTitle {
        padding: 0 15px;
        left: 15px;
    }
    .chiNhanh .itemBox:nth-child(1) .itemDetail {
        width: 100%;
    }
    .bannerContact .container {
        padding-bottom: calc(134/320*100%);
        text-align: center;
    }
    .bannerContact .text,
    .bannerContact .text {
        font: 20px/36px RobotoBold;
    }
    .bannerContact .text2 {
        margin-left: 0;
    }
    .guiThongTin .box {
        width: 100%;
        margin-right: 0;
    }
    .guiThongTin .box:nth-child(1)~.box {
        margin-top: 10px;
    }
    .guiThongTin .btnClick a {
        width: 100%;
        margin: 5px 0;
    }
    .menuBottomBox {
        width: 100%;
    }
    .footerBox .moreInfo {
        width: 100%;
        margin-top: 25px;
    }
}

@media(max-width:519px) {
    .popUp.binhLuan .khungAnh {
        width: 100%;
        margin-right: 0;
    }
    .popUp.binhLuan .itemDetail {
        width: 100%;
        margin-top: 10px;
    }
    .popUp.binhLuan .btnClick a {
        margin-bottom: 10px;
    }
}
