.approval {
    background-image: url(/assets/images/icons/approval_delegation.svg);
    display: block;
    width: 40px;
    height: 38px;
}

.person {
    background-image: url(/assets/images/icons/person_heart.svg);
    display: block;
    width: 35px;
    height: 30px;
}

.cheer {
    background-image: url(/assets/images/icons/cheer.svg);
    display: block;
    width: 42px;
    height: 43px;
}

.sentiment {
    background-image: url(/assets/images/icons/sentiment_excited.svg);
    display: block;
    width: 39px;
    height: 38px;
}

.help {
    background-image: url(/assets/images/icons/help.svg);
    display: block;
    width: 38px;
    height: 38px;
}

.philosophy-content {
    margin: 0 auto;
    max-width: 1440px;
    gap: 4rem;
    padding: 8rem 11.2rem;
}

.philosophy-content-header {
    gap: 3.2rem;
}

.philosophy-line {
    height: 1px;
    width: 6.4rem;
}

.philosophy-sub-title {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 2rem;
    letter-spacing: 10%;
    vertical-align: middle;
    text-transform: uppercase;
}

.color-white {
    color: var(--primary-FFF);
}

.color-444 {
    color: var(--primary-444);
}

.color-830 {
    color: var(--primary-830);
}

.color-C2C {
    color: var(--primary-C2C);
}

.bg-830 {
    background: var(--primary-830);
}

.bg-white {
    background: var(--primary-FFF);
}

.g-1 {
    gap: 1rem;
}

.g-2 {
    gap: 2rem;
}

.border-8cc {
    border: 1px solid var(--primary-8CC);
}

.philosophy-title {
    font-family: serif;
    font-weight: 400;
    font-size: 6rem;
    line-height: 7.2rem;
    letter-spacing: -2.5%;
    vertical-align: middle;
}

.philosophy-description {
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 1.4rem;
    line-height: 3.2rem;
    letter-spacing: 0%;
    vertical-align: middle;
}

.motto-gap {
    gap: 4.8rem;
}

.motto-content {
    max-width: 869px;
    width: 869px;
    gap: 1.6rem;
}

.motto-row-gap {
    gap: 1.6rem;
}

.flex-1 {
    flex: 1;
}

.item-end {
    align-items: end;
}

.motto-content-block {
    height: 240px;
    gap: 1.6rem;
    border-radius: 2.4rem;
    padding: 4rem;
}

.motto-title {
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 3.2rem;
    letter-spacing: 0px;
    vertical-align: middle;
}

.motto-description {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.4rem;
    letter-spacing: 0%;
    vertical-align: middle;
}

.meaning-gap {
    gap: 8rem;
}

.meaning-content-gap {
    gap: 3.2rem;
}

.meaning-item {
    gap: 2.4rem;
    padding: 3.2rem;
}

.item-start {
    align-items: start;
}

.relative {
    position: relative;
}

.bg-image-banner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.philosophy-banner {
    margin: 0 auto;
    max-width: 1440px;
    padding: 8rem 11.2rem;
}

.image-group-banner {
    position: relative;
    z-index: 2;
}

.three_bears {
    margin-bottom: -3rem;
    max-width: 524px;
    max-height: 291px;
}

.banner-right {
    margin-right: -9rem;
}

.three_bears_2 {
    display: none;
}

.dot-icon {
    width: 8px;
    height: 8px;
    display: block;
    background: var(--primary-830);
    border-radius: 50%;
}

/* Extra Small - Mobile XS */
@media (max-width: 575.98px) {
    /* ≤575px */
}

/* Small - Mobile S/M */
@media (max-width: 767.98px) {
    /* ≤767px */
    .philosophy-title {
        font-size: 3.6rem;
        line-height: 4.8rem;
    }

    .philosophy-description {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .philosophy-sub-title {
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .three_bears_2,
    .image-group-banner {
        max-width: 335px;
    }

    .philosophy-content {
        padding: 2rem 2rem 2.4rem 2rem !important;
        gap: 3.2rem;
    }

    .motto-content {
        width: auto;
    }

    .motto-gap {
        flex-direction: column-reverse;
    }

    .motto-row-gap {
        flex-direction: column;
    }

    .motto-content-block {
        align-self: stretch;
    }

    .motto-image {
        max-width: 291px;
        height: 309px;
    }

    .meaning-gap {
        flex-direction: column;
        gap: 4rem;
    }

    .meaning-image {
        width: 153px;
        height: 288px;
    }
}

/* Medium - Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 768px → 991.98px */
    .motto-title {
        font-size: 2rem;
        line-height: 2.6rem;
    }

    .motto-description {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .motto-image {
        width: 240px;
    }

    .meaning-gap {
        gap: 2rem;
    }

    .meaning-content-gap {
        gap: 1.6rem
    }

    .meaning-item {
        gap: 1.4rem;
        padding: 2.2rem;
    }

    .meaning-image {
        height: 400px;
    }
}

/* COMMON */
/* Tablet & Mobile */
@media(max-width: 991.98px) {
    .philosophy-banner {
        padding: 4.8rem 2rem;
    }

    .banner-right {
        margin-right: 0;
        gap: 3.2rem;
        align-items: center;
    }

    .image-group-banner,
    .three_bears_2 {
        max-width: 500px;
    }

    .banner-right,
    .philosophy-banner {
        flex-direction: column;
    }

    .three_bears,
    .bg-image-banner {
        display: none;
    }

    .three_bears_2 {
        display: block;
    }

    .motto-content-block {
        padding: 1.6rem;
    }

    .motto-content-block,
    .motto-gap {
        gap: 1rem;
    }
}

@media(max-width: 1300px) {
    .philosophy-title {
        font-size: 4rem;
        line-height: 5.2rem;
    }

    .philosophy-content-header {
        gap: 2.2rem;
    }

    .bg-image-banner {
        top: -12rem;
        right: -12rem;
    }

    .philosophy-description {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .three_bears {
        max-width: 400px;
    }

    .philosophy-content {
        padding: 4rem;
    }

    .motto-content-block {
        padding: 1rem 2rem;
    }
}

/* Large - Desktop nhỏ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* 992px → 1199.98px */
}

/* Extra Large - Desktop lớn */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* 1200px → 1399.98px */

}

/* XXL - Màn hình rất lớn (TV/4K) */
@media (min-width: 1400px) {
    /* ≥ 1400px */
}
 /* .philosophy-content {
    display: none !important;
 } */