.about-milestones__slider-item {
    padding: 0 10px
}

.about-milestones__slider-item--inner {
    border-left: 2px solid #c1cd23
}

.about-milestones__slider--title {
    margin-bottom: 20px;
    padding-left: 15px
}

.about-milestones__slider--title h4 {
    font-size: 25px;
    color: #06c;
    margin-top: 0;
    height: 27px;
    overflow: hidden
}

.about-milestones__slider--title .description-box {
    font-size: 16px;
    height: 92px;
    overflow: auto;
    margin-bottom: 0;
    word-break: break-word;
}

.about-milestones__slider--img {
    display: block
}

.about-milestones__slider--img img {
    width: 100%
}

.about-milestones__slider-item.style-2 .about-milestones__slider--img {
    margin-bottom: 20px
}

.about-milestones__slider-item.style-2 .about-milestones__slider--title {
    margin-bottom: 0
}

/* @media (max-width: 1199px) {
    .about-milestones__slider .slick-prev {
        left: 100%;
    }
} */
/* map in app */
.about-milestones__map--inner {
    height: 100vh;
    padding: 50px 0;
    margin: 0 auto;
    display: inline-block;
    position: relative
}

    .about-milestones__map--inner > img {
        height: 100%
    }

.about-milestones__map {
    display: flex;
    justify-content: center
}

.about-milestones-bg {
    background: 0 0
}

.map-detail {
    position: absolute
}

    .map-detail .map-detail__inner {
        position: relative
    }

        .map-detail .map-detail__inner img {
            width: 23px
        }

        .map-detail .map-detail__inner .ins {
            animation: glowing 1.5s infinite
        }

        .map-detail .map-detail__inner span {
            color: #fff;
            font-size: 8px;
            position: absolute;
            width: 230%
        }

        .map-detail .map-detail__inner a {
            width: 24px;
            height: 24px;
            display: block;
            overflow: hidden
        }

        .map-detail .map-detail__inner:hover a span {
            color: #d7df23
        }

@keyframes glowing {
    0% {
        width: 23px
    }

    25% {
        width: 20px
    }

    50% {
        width: 23px
    }

    75% {
        width: 20px
    }

    to {
        width: 23px
    }
}

.map-detail.active .map-detail__inner span {
    color: #d7df23
}

.map-danang .map-detail__inner img, .map-hanoi .map-detail__inner img, .map-hochiminh .map-detail__inner img {
    width: 11px
}

.map-danang .map-detail__inner span, .map-hanoi .map-detail__inner span, .map-hochiminh .map-detail__inner span {
    width: 500%
}

.map-binhduong {
    left: 47%;
    bottom: 20.7%
}

    .map-binhduong .map-detail__inner span {
        left: 98%;
        top: 0
    }

.map-hochiminh {
    left: 47.4%;
    bottom: 18.2%
}

    .map-hochiminh .map-detail__inner span {
        left: 120%;
        bottom: 15%
    }

.map-quangngai {
    top: 53.3%;
    left: 69.2%
}

    .map-quangngai .map-detail__inner span {
        left: -143%;
        top: 116%
    }

.map-danang {
    top: 49%;
    left: 64%
}

    .map-danang .map-detail__inner span {
        left: -200%;
        top: 100%
    }

.map-nghean {
    top: 28.8%;
    left: 33%
}

    .map-nghean .map-detail__inner span {
        left: -90%;
        top: 98%
    }

.map-haiduong {
    top: 19.5%;
    left: 44.5%
}

    .map-haiduong .map-detail__inner span {
        left: -140%;
        top: 100%
    }

.map-haiphong {
    top: 19.7%;
    left: 50%
}

    .map-haiphong .map-detail__inner span {
        left: 10%;
        top: -53%
    }

.map-hanoi {
    top: 19%;
    left: 40%
}

    .map-hanoi .map-detail__inner span {
        left: -290%;
        top: 5%
    }

.map-bacninh {
    top: 16.8%;
    left: 43%
}

    .map-bacninh .map-detail__inner span {
        left: -160%;
        top: -40%
    }

.map-content {
    position: absolute;
    width: 530px;
    left: 55%;
    top: 20%;
    height: 0;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden
}

    .map-content.active {
        visibility: inherit;
        height: auto;
        transform: translateY(0);
        opacity: 1;
        transition: all .5s ease
    }

.map-content__inner {
    position: relative
}

    .map-content__inner .slick-next, .map-content__inner .slick-prev {
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
        z-index: 2;
        transform: rotate(45deg);
        right: 15px
    }

        .map-content__inner .slick-next:before, .map-content__inner .slick-prev:before {
            color: #ccc;
            transform: rotate(-45deg);
            font-family: FontAwesome;
            display: inline-block;
            width: 25px;
            height: 25px;
            opacity: 1
        }

        .map-content__inner .slick-prev:before {
            content: "\F106"
        }

        .map-content__inner .slick-next:before {
            content: "\F107"
        }

    .map-content__inner .slick-prev {
        left: auto;
        right: 13px;
        top: 10%
    }

    .map-content__inner .slick-next {
        top: auto;
        bottom: 10%
    }

        .map-content__inner .slick-next:hover, .map-content__inner .slick-prev:hover {
            background: #d7df23
        }

            .map-content__inner .slick-next:hover:before, .map-content__inner .slick-prev:hover:before {
                color: #fff !important
            }

.map-content__inner--img {
    display: inline-block;
    width: 130px;
    height: 130px;
    border: 10px solid #fff;
    transform: rotate(45deg);
    overflow: hidden;
    position: absolute;
    top: 13px;
    left: 15px
}

    .map-content__inner--img div {
        transform: translate(-28%, -20%)
    }

        .map-content__inner--img div img {
            transform: rotate(-45deg);
            width: 180px
        }

    .map-content__inner--img a {
        display: inline-block;
        position: relative
    }

        .map-content__inner--img a span {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            justify-content: center;
            align-items: center;
            background: rgba(0, 102, 153, .6);
            display: none
        }

            .map-content__inner--img a span i {
                color: hsla(0, 0%, 100%, .7);
                font-size: 50px;
                transform: rotate(45deg)
            }

        .map-content__inner--img a:hover span {
            display: flex
        }

.map-content__inner--title {
    overflow: hidden;
    padding: 15px;
    padding-right: 0;
    padding-left: 125px;
    margin-left: 65px;
    background: #ebebeb;
    width: 72%
}

    .map-content__inner--title h4 {
        text-transform: uppercase;
        font-size: 20px;
        color: #06c;
        margin-top: 0;
        height: 22px;
        overflow: hidden
    }

    .map-content__inner--title ul li {
        display: block;
        margin-bottom: 5px;
        height: 20px;
        overflow: hidden
    }

        .map-content__inner--title ul li a {
            color: #333
        }

            .map-content__inner--title ul li a:hover {
                color: #337ab7
            }

        .map-content__inner--title ul li:last-child {
            margin-bottom: 0
        }

    .map-content__inner--title:after {
        position: absolute;
        left: 84%;
        top: 0;
        content: "";
        width: 0;
        height: 0;
        border-top: 78px solid transparent;
        border-bottom: 79px solid transparent;
        border-left: 78px solid #ebebeb
    }

.lightbox .lb-image {
    border: 0 solid transparent
}

.lb-data .lb-details {
    width: 100%;
    padding: 15px
}

.lb-dataContainer {
    background: rgba(0, 102, 153, .9);
    border-radius: 0
}

.lb-closeContainer {
    display: none
}

.lb-data {
    color: #fff
}

    .lb-data .lb-caption {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px
    }

    .lb-data .lb-number {
        display: none !important
    }

.lb-container > img {
    width: 400px !important;
    height: 300px !important
}

.lb-container .lb-nav {
    display: none !important
}

.lightboxOverlay {
    background: 0 0
}

.lightbox {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: fixed;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

/* map in custom */
.map-detail .map-detail__inner a span {
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    width: 150px;
    transition: all 0.2s ease-in-out;
}

.map-detail.active .map-detail__inner:hover span {
    font-size: 12px;
    width: 100px;
    font-weight: bold;
    z-index: 9999;
}

.about-milestones__map--inner {
    height: 110vh;
}

.map-content.map-content-bacninh {
    left: -106%;
    top: 9%;
}

.map-content.map-content-haiphong {
    left: 70%;
    top: 12%;
}

.map-content.map-content-haiduong {
    left: 65%;
    top: 15%;
}

.map-content.map-content-nghean {
    left: -87%;
    top: 23%;
}

.map-content.map-content-quangngai {
    left: -55%;
    top: 46%;
}

/* down */
.map-detail .map-detail__inner span {
    font-size: 16px;
    color: #C2FD55;
    font-weight: bold;
}

.map-detail.active .map-detail__inner:hover span {
    font-size: 16px;
    color: #C2FD55;
}

.map-detail.active .map-detail__inner span {
    color: #C2FD55;
}

.map-hanoi .map-detail__inner span {
    left: -488%;
    top: 2%;
}

.map-danang .map-detail__inner span {
    width: 167px;
    left: -330%;
}

.lightbox {
    left: 1% !important;
    right: auto !important;
    width: auto !important;
}

.right-box {
    left: auto !important;
    right: 1% !important;
    width: auto !important;
}

.slick-track {
    margin-bottom: 20px;
}

.map-content__inner--title .content_des_map {
    height: 94px;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (min-width: 992px) {
    .map-content.map-content-nghean {
        left: -120%;
        top: 35%
    }

    .map-content.map-content-bacninh {
        left: -135%;
        top: 22%
    }

    .map-content.map-content-quangngai {
        left: -100%;
        top: 51%
    }

    .map-content.map-content-binhduong {
        left: 77%;
        top: 70%
    }
}