.green-background,
.yeuto__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)
}

.yeuto__background {
    z-index: -5;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.yeuto__wapper {
    position: relative;
    color: #fff;
    padding-top: 70px;
    padding-bottom: 135px;
    text-align: center
}

.yeuto__wapper h4 {
    font-size: 20px;
    padding-left: 75px;
    padding-right: 75px;
    margin-bottom: 2em
}

.yeuto__wapper a,
.yeuto__wapper h4 {
    font-family: iCielProza, sans-serif
}

.yeuto__icon {
    text-transform: uppercase
}

.yeuto__icon img {
    display: block;
    height: 62px
}

.yeuto__icon span {
    display: block;
    margin-top: 1em
}

.kinhte__wapper,
.xahoi__wapper,
.moitruong__wapper {
    padding: 60px 20px 55px
}

.kinhte h2,
.moitruong h2,
.xahoi h2 {
    text-transform: uppercase;
    font-size: 24px;
    color: var(--main-site-coffee-color);
    font-family: iCielProza, sans-serif
}

.kinhte__wapper,
.xahoi__wapper,
.moitruong__wapper {
    display: grid;
    grid-gap: 30px
}

.kinhte article,
.xahoi article,
.moitruong article {
    display: grid;
    grid-template-areas: "title" "." ".";
    grid-gap: 30px 45px
}

.kinhte article h2,
.moitruong article h2 {
    grid-area: title
}

.xahoi .cong-dong {
    margin-bottom: 110px
}

.xahoi .cong-dong__content {
    display: grid;
    grid-template-areas: "title" "description" "quote";
    grid-gap: 30px
}

.xahoi .cong-dong img {
    margin-bottom: 30px
}

.xahoi .cong-dong h2 {
    grid-area: title
}

.xahoi .cong-dong__description {
    grid-area: description
}

.xahoi .cong-dong__description p:not(:last-child) {
    margin-bottom: 1em
}

.xahoi .cong-dong__quote {
    grid-area: quote;
    font-size: 20px;
    text-transform: uppercase;
    font-family: iCielProza, sans-serif;
    color: var(--main-site-bakground)
}

.xahoi .nguoi-dung__wapper {
    display: grid;
    grid-template-areas: "title" "description" "image";
    grid-gap: 30px
}

.xahoi .nguoi-dung__title {
    grid-area: title
}

.xahoi .nguoi-dung__description {
    grid-area: description
}

.xahoi .nguoi-dung__description p:not(:last-child) {
    margin-bottom: 1em
}

.xahoi .nguoi-dung img {
    grid-area: image
}

@media screen and (min-width:768px) {
    .yeuto__wapper {
        padding: 145px 65px 185px
    }
    .yeuto a,
    .yeuto h4 {
        font-size: 18px
    }
    .yeuto h4 {
        margin-bottom: 3em
    }
    .yeuto__icon img {
        height: 101px
    }
    .kinhte__wapper,
    .xahoi__wapper,
    .moitruong__wapper,
    .xahoi__wapper {
        padding-left: 70px;
        padding-right: 70px
    }
    .kinhte h2,
    .moitruong h2,
    .xahoi h2 {
        font-size: 2rem
    }
    .kinhte article,
    .xahoi article,
    .moitruong article {
        grid-template-areas: "title title" ". .";
        grid-template-columns: 1fr 1fr
    }
    .kinhte__wapper,
    .xahoi__wapper,
    .moitruong__wapper {
        padding-top: 60px;
        padding-bottom: 80px
    }
    .xahoi__wapper {
        padding-top: 60px;
        padding-bottom: 65px
    }
    .xahoi .cong-dong {
        margin-left: -40px;
        margin-right: -40px
    }
    .xahoi .cong-dong__content {
        grid-template-areas: "title description quote";
        grid-template-columns: 3fr 5fr 4fr
    }
    .xahoi .cong-dong h2 {
        font-size: 19px
    }
    .xahoi .nguoi-dung {
        border-top: 1px solid var(--main-light-color);
        margin-left: -70px;
        margin-right: -70px
    }
    .xahoi .nguoi-dung__wapper {
        grid-template-areas: "title image" "description image";
        grid-template-columns: 6fr 4fr;
        grid-template-rows: -webkit-max-content 1fr;
        grid-template-rows: max-content 1fr;
        padding-left: 70px;
        padding-right: 70px;
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px)
    }
    .xahoi .nguoi-dung h2 {
        display: inline-block;
        padding-left: .5em;
        padding-right: .5em;
        background: #fff;
        -webkit-transform: translateX(-.5em);
        transform: translateX(-.5em)
    }
}

@media screen and (min-width:1024px) {
    .yeuto a,
    .yeuto h4 {
        font-size: 32px
    }
    .yeuto__icon img {
        height: 179px
    }
    .kinhte__wapper,
    .xahoi__wapper,
    .moitruong__wapper {
        padding-left: 135px;
        padding-right: 135px
    }
    .kinhte__wapper,
    .xahoi__wapper,
    .moitruong__wapper {
        grid-gap: 150px
    }
    .kinhte article,
    .xahoi article,
    .moitruong article {
        grid-template-areas: "title . .";
        grid-template-columns: 1fr 1fr 1fr
    }
    /* Gia tri cot loi: bot khoang cach cho gon (feedback L1 - slide 14) */
    .kinhte__wapper {
        grid-gap: 70px;
        padding-top: 110px;
        padding-bottom: 90px
    }
    .moitruong__wapper {
        padding-top: 80px;
        padding-bottom: 100px
    }
    .xahoi__wapper {
        padding-top: 80px
    }
    .xahoi .cong-dong {
        margin-left: 0;
        margin-right: 0
    }
    .xahoi .cong-dong__content {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 55px 30px
    }
    .xahoi .cong-dong img {
        margin-bottom: 55px
    }
    .xahoi .cong-dong h2 {
        font-size: 32px
    }
    .xahoi .cong-dong__description {
        margin-right: 70px
    }
    .xahoi .cong-dong__quote {
        font-size: 28px
    }
    .xahoi .nguoi-dung {
        margin-left: -135px;
        margin-right: -135px
    }
    .xahoi .nguoi-dung__wapper {
        grid-template-areas: "title . image" ". description image";
        grid-template-columns: 1fr 1fr 1fr;
        padding-left: 135px;
        padding-right: 135px
    }
    .xahoi .nguoi-dung h2 {
        margin-right: 40px
    }
    .xahoi .nguoi-dung__description {
        margin-right: 70px
    }
}

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