.green-background {
    background-color: var(--main-site-bakground);
    color: #fff
}

.green-background a {
    color: #fff
}

.green-background h6 {
    color: var(--main-light-color)
}

.coffee-background {
    background-color: var(--main-second-site-background);
    color: #fff
}

.coffee-background a {
    color: #fff
}

.coffee-background h6 {
    color: var(--main-light-color)
}

.areas__wapper {
    padding: 60px 0 110px
}

.areas__wapper h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: var(--main-site-bakground);
    font-family: var(--main-font-coffee)
}

.areas__wapper .h6 {
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px
}

.areas__wapper .slick-arrow {
    top: 25%
}

/* Ban do cham cua tung vung, nam tren khoi thong tin.
   Khung cao co dinh + object-fit:contain -> moi slide cao bang nhau
   du anh ban do moi vung co ti le khac nhau. */
.areas__map {
    display: block;
    margin: 0 auto;
    max-width: 640px;
    height: 300px
}

.areas__map img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    -o-object-fit: contain;
    object-fit: contain
}

.areas__infos {
    display: grid;
    margin: 25px 50px 0;
    text-align: left;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px
}

.areas__infos .area-meta p {
    line-height: 1.6
}

.areas__infos h3 {
    grid-column: 1/3
}

.areas__item {
    text-align: center
}

.areas .slick-arrow.slick-prev {
    left: 20px
}

.areas .slick-arrow.slick-next {
    right: 20px
}

.map-layer {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 714px;
    max-width: 100%
}

.map-layer .line_map {
    opacity: .3;
    -webkit-transition: opacity 1.2s ease-out;
    transition: opacity 1.2s ease-out
}

.slick-slide .map-layer .line_map {
    opacity: 0
}

.slick-current .map-layer .line_map {
    opacity: .3
}

.map-layer .dot_map {
    position: absolute
}

.slick-slide .map-layer .dot_map {
    opacity: 0
}

.map-layer__title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.map-layer__title h5 {
    font-size: 30px;
    font-weight: 100;
    color: var(--main-site-bakground);
    text-transform: uppercase
}

@media screen and (min-width:768px) {
    .areas__wapper {
        padding: 50px 30px 40px
    }
    .areas__wapper h3 {
        font-size: 24px
    }
    .areas__wapper .slick-arrow {
        /* Canh mui ten ngang tam ban do */
        top: 42%
    }
    .areas__map {
        height: 380px
    }
    /* Ten vung ben trai + 4 cot thong tin: Vi tri / Cao do / Chung loai / San luong */
    .areas__infos {
        margin: 15px 0 0;
        grid-template-columns: 1.3fr 1.5fr .9fr 1.1fr 1fr;
        grid-gap: 35px;
        align-items: start
    }
    .areas__infos h3 {
        grid-column: 1 / 2
    }
    .areas .slick-arrow.slick-prev {
        left: 0
    }
    .areas .slick-arrow.slick-next {
        right: 0
    }
}

@media screen and (min-width:1024px) {
    /* Man hinh 1024-1399: le vua phai, neu de 230/250px thi 5 cot bi bop va tran ra ngoai */
    .areas__wapper {
        padding: 60px 130px 120px 130px
    }
    .areas__wapper h3 {
        font-size: 26px
    }
    .areas__map {
        height: 400px
    }
    .areas__infos {
        grid-template-columns: minmax(190px, 1fr) 1.7fr .85fr 1.05fr .9fr;
        grid-gap: 24px
    }
}

@media screen and (min-width:1400px) {
    /* Man hinh rong: chua le phai cho cot do cao */
    .areas__wapper {
        padding: 60px 250px 160px 230px
    }
    .areas__wapper h3 {
        font-size: 34px
    }
    .areas__map {
        height: 440px
    }
    /* Cot ten vung du rong cho 2 dong "Vung trong / <ten tinh>" */
    .areas__infos {
        grid-template-columns: minmax(240px, 1.1fr) 2fr .8fr 1.1fr .95fr;
        grid-gap: 35px
    }
}

/*# sourceMappingURL=areas.style.css.map*/