#main-content > .contact {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
}

    #main-content > .contact > .branches {
        with: 100%;
        z-index: 1;
        right: 20px;
        display: none
    }

@media screen and (max-width: 767.8px) {
    #main-content > .contact > .branches {
        position: relative;
        right: 0;
        padding: 20px 15px;
        display: block
    }

    #main-content #map {
        display: none
    }
}

@media screen and (min-width: 768px) {
    #main-content > .contact > .branches {
        width: 320px;
        bottom: auto;
        display: block
    }

    #main-content #map {
        display: none
    }
}

@media screen and (min-width: 992px) {
    #main-content > .contact > .branches {
        width: 550px;
        bottom: 20px;
        display: none
    }

    #main-content #map {
        display: block
    }
}

@media screen and (min-width: 1200px) {
    #main-content > .contact > .branches {
        width: 650px;
        ;
        display: none
    }

    #main-content #map {
        display: block
    }
}

#main-content > .contact > .branches > .row {
    margin-bottom: 5px;
}

    #main-content > .contact > .branches > .row > div {
        padding: 0 5px;
    }

        #main-content > .contact > .branches > .row > div > .item {
            background: #f6fcff;
            margin-bottom: 5px;
            padding: 10px 40px;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }

            #main-content > .contact > .branches > .row > div > .item > .title {
                margin-bottom: 10px;
                height: 24px;
            }

                #main-content > .contact > .branches > .row > div > .item > .title > a {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    max-height: 1.5em;
                    line-height: 1.5em;
                    box-sizing: content-box;
                    height: 1.5em;
                    color: #000;
                    padding-left: 30px;
                    background: url(/Content/img/ico-logo.png) no-repeat left center;
                    font-weight: bold;
                    font-size: 16px;
                    position: relative;
                    overflow: visible;
                }

                    #main-content > .contact > .branches > .row > div > .item > .title > a:after {
                        content: "";
                        background: url(/Content/img/gmap.png) no-repeat;
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        position: absolute;
                        top: -5px;
                        right: -35px;
                        margin-left: 10px;
                    }

            #main-content > .contact > .branches > .row > div > .item > .contact {
                -webkit-flex-direction: column;
                flex-direction: column;
            }

                #main-content > .contact > .branches > .row > div > .item > .contact > p {
                    margin-bottom: 0.5em;
                }

                    #main-content > .contact > .branches > .row > div > .item > .contact > p.address {
                        background: url(/Content/img/locationlh.png) no-repeat -2px 3px;
                        padding-left: 20px;
                    }

                    #main-content > .contact > .branches > .row > div > .item > .contact > p.phone {
                        background: url(/Content/img/phonelh.png) no-repeat left top;
                        padding-left: 20px;
                    }

            #main-content > .contact > .branches > .row > div > .item.active {
                background: #ffffff;
            }

                #main-content > .contact > .branches > .row > div > .item.active:before {
                    content: '';
                    position: absolute;
                    width: 6px;
                    height: calc(100% + 20px);
                    background: #005d8c;
                    left: 0;
                    top: -10px;
                }

#main-content #map {
    background: url(/Content/img/TSD_MAPS-01.png) no-repeat;
    background-size: cover;
    height: 600px;
    width: 100%;
}

    #main-content #map .map-container {
        position: relative;
    }

    #main-content #map .map-image {
        height: 600px;
        display: block;
    }

    #main-content #map .pin {
        position: absolute;
        width: 30px;
        height: 30px;
        cursor: pointer;
        transform: translate(-50%, -100%);
        opacity: 0
    }

    #main-content #map .pin-hanoi {
        top: 24%;
        left: 142px;
        width: 40px;
        height: 46px;
    }

    #main-content #map .pin-danang {
        top: 50%;
        left: 218px;
    }

    #main-content #map .pin-hcm {
        top: 80%;
        left: 170px;
        width: 30px;
        height: 25px;
    }

    #main-content #map .pin-dongnai {
        top: 86%;
        left: 152px;
    }

    #main-content #map .pin-binhduong {
        top: 80%;
        left: 138px;
        width: 25px;
        height: 25px;
    }

    #main-content #map .tooltipTag {
        position: absolute;
        background: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 13px;
        white-space: nowrap;
        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
        z-index: 10;
        transform: translateX(10px);
        text-transform: uppercase;
        font-weight: 600;
        color: #f49d12;
        display: none;
    }

    #main-content #map .popup {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    #main-content #map .box-popup {
        width: 100%;
        padding: 20px 0;
    }

    #main-content #map .popup iframe {
        width: 100%;
        height: 100%;
        border: none;
    }