.paddingTop{
    padding-top: 50px;
}
.homeThreeInfo { background: url('../images/bg-hethong.jpg') no-repeat center center; background-size: cover; }
.vntSystem { }
.gripSystem { display: flex; flex-wrap: wrap; margin: 0 -20px; }
    .gripSystem > div { padding: 0 20px; }
    .gripSystem .colL { width: calc(100% - 560px); }
.mapSystem { position: relative; height: 100% }
    .mapSystem .thumbMap { height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; }
        .mapSystem .thumbMap img { max-width: 100%; height: auto; }
    .gripSystem .infoAddresSys { position: absolute; top: 50%; transform: translateY(-50%); left: -270px; max-width: 420px; padding: 20px 30px; background-color: #f2f2f2; z-index: 2; display: none; text-align: center; }
        .gripSystem .infoAddresSys.active { display: block; }
.infoAddresSys .logoSy { max-width: 230px; margin: 0px auto 10px; }
.infoAddresSys .nameCampa { font-size: 15px; line-height: 23px; color: #015ba6; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; }
.infoAddresSys .lstInfoSyAdd li { margin-bottom: 5px; font-size: 15px; line-height: 23px; }
.gripSystem .colR { width: 560px; padding: 30px 40px 25px 20px; }
.gripSystem .infoSystem { max-width: 100%; }
#system-list { background: #02437b; position: relative; padding-right: 50px; padding-bottom: 30px; padding-top: 30px; }
    #system-list:before { content: ''; position: absolute; right: 100%; top: 0px; height: 100%; width: 9999px; background: #02437b; }
.infoSystem .vntTitleLine { margin-bottom: 10px; }
.lstSystem { margin-bottom: 15px; }
    .lstSystem ul { display: flex; margin-left: -15px; margin-right: -15px; flex-wrap:wrap; }
    .lstSystem li { display: block; width: calc(100% / 6 - 1px); flex-wrap: wrap; justify-content: space-between; padding: 5px 0; font-size: 16px; line-height: 24px; color: #666666; }
    .lstSystem li { padding: 0px 15px; }
        .lstSystem li .numSy { width: 100%; padding-top: calc(100% - 10px); height: 0px; border-radius: 50%; border: solid 5px #b7b7b7; position: relative; }
            .lstSystem li .numSy span { font-size: 25px; font-weight: bold; color: #777777; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); text-align: center; width: 100%; }
        .lstSystem li .nameSy { margin-left: -10px; margin-right: -10px; text-align: center; padding: 15px 0px; }
        .lstSystem li:last-child { border-bottom: none; }
.formSystem { margin-bottom: 20px; }
    .formSystem .frmSystem { position: relative; }
        .formSystem .frmSystem input { width: 100%; height: 35px; border: 0px; border-bottom: 1px solid #fff; padding: 0 10px 0 50px; background: transparent; color:#fff;}
            .formSystem .frmSystem input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */ }

            .formSystem .frmSystem input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; }

            .formSystem .frmSystem input::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; }
        .formSystem .frmSystem button { position: absolute; left: 0; width: 40px; height: 100%; border: none; background-color: transparent; text-align: left; }
.lstPonsiSys { overflow-y: scroll; scrollbar-color: #0A4C95 #c5c5c5; scrollbar-width: thin; }
    .lstPonsiSys li { margin-bottom: 5px; }
        .lstPonsiSys li a { font-size: 15px; line-height: 23px; color: #fff; position: relative; padding-left: 28px; }
            .lstPonsiSys li a:before { position: absolute; left: 0px; top: 2px; font: normal normal normal 18px/1 FontAwesome; content: "\f041"; }
        .lstPonsiSys li.active a, .lstPonsiSys li:hover a { color: #015ba6; }
.lstPonsiSys { max-height: 245px; overflow: hidden; overflow-y: auto; }
    .lstPonsiSys::-webkit-scrollbar { width: 6px; background-color: #c5c5c5; }
    .lstPonsiSys::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px #3d6a91; background-color: #3d6a91; border-left: 2px solid #02437b; border-right: 2px solid #02437b; }
    .lstPonsiSys::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 0px #26b3ef; background-color: #26b3ef; }

@media all and (min-width: 1600px){
    .gripSystem { margin: 0 -30px; }
        .gripSystem > div { padding: 0 30px; }
        .gripSystem .colL { width: calc(100% - 610px); }
        .gripSystem .colR { width: 610px; padding: 40px 50px 25px 30px; }
    .lstSystem li { font-size: 18px; line-height: 27px; }
        .lstSystem li .numSy span { font-size: 30px; }
    .formSystem { margin-bottom: 30px; }
    .lstPonsiSys li { margin-bottom: 10px; }
        .lstPonsiSys li a { font-size: 17px; line-height: 25px; }
    .gripSystem .infoAddresSys .nameCampa { font-size: 17px; line-height: 25px; }
    .infoAddresSys .lstInfoSyAdd li { font-size: 17px; line-height: 25px; }
    .lstPonsiSys { max-height: 420px; }
    .lstSystem li .numSy span { font-size: 40px; }

}
@media all and (max-width: 1200px){
    /*  */
    .gripSystem { margin: 0 -15px; }
        .gripSystem > div { padding: 0 15px; }

        .gripSystem .colR { width: 400px; padding: 15px 30px 15px 15px; }
        .gripSystem .colL { width: calc(100% - 400px); }
    .infoAddresSys .logoSy { max-width: 100px; }
    .gripSystem .infoAddresSys { max-width: 350px; padding: 15px 20px; }
    .infoAddresSys .nameCampa, .infoAddresSys .lstInfoSyAdd li { font-size: 14px; line-height: 22px; }
}
@media all and (max-width: 1100px){
    .lstPonsiSys { max-height: 180px; }
}
@media all and (max-width: 991px){
    .lstSystem li { font-size: 14px; line-height: 22px; }
    .gripSystem .colL, .gripSystem .colR { width: 100%; }
    .mapSystem .thumbMap img { display: block; }
    .gripSystem .infoSystem { max-width: 100%; padding: 30px; }
    .gripSystem { }
    .mapSystem .thumbMap { display: none; }
    .lstPonsiSys{position:relative;}
    #system-list { padding-right: 0px; }
    #system-list:before { right: -100%; }
   
}
@media all and (max-width: 767px){
    .gripSystem .infoSystem { padding: 20px 10px 0px; }
    .paddingTop { padding-top: 20px; }
    .gripSystem .infoAddresSys, .gripSystem .infoAddresSys.active { position: absolute; max-width: 100%; transform: inherit; top: calc(100% ); left: 0px; width: 100%; }
    .lstSystem li { width: calc(100%/3); }
}