.div-with-bg {
    position: relative;
    width: 100%;

    img {
        width: 100%;
    }

    .content {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;

        .about-logo {
            width: 30%;
            position: absolute;
            top: 25%;
            left: 10%;
        }

        .tam-nhin-logo {
            position: absolute;
            width: 25%;
            top: 29.3%;
            right: 25%;
        }

        .title {
            font-size: 6vw;
            text-transform: uppercase;
            font-family: 'PaytoneOne';
            color: white;
            text-shadow: 2px 2px 1em black;
        }

        .tam-nhin-title {
            position: absolute;
            margin: 0;
            left: 3%;
            bottom: 4%;
        }

        .about-texts {
            position: absolute;
            width: 50%;
            left: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .title {
                font-size: 6vw;
                text-transform: uppercase;
                font-family: 'PaytoneOne';
                color: white;
                text-shadow: 2px 2px 1em black;
            }

            .line {
                margin-bottom: 0.1%;

                .title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 0.5%;
                    margin-top: 0.5%;

                    img {
                        width: 10%;
                    }

                    .sub-title {
                        margin-left: 2%;
                        font-size: 4vw;
                        font-family: 'Inter';
                        color: white;
                        text-shadow: 1px 1px 1em black;
                        font-weight: bold;
                    }
                }

                .desc {
                    font-family: 'Inter';
                    color: white;
                    text-shadow: 1px 1px 1em black;
                    font-size: 1vw;
                    text-align: justify;
                    padding-right: 5%;
                    margin-bottom: 0.5%;
                }
            }
        }

        .su-menh-title {
            position: absolute;
            margin: auto;
            top: 10%;
            right: 0;
            left: 0;
            text-align: center;
        }

        .su-menh-logo {
            position: absolute;
            width: 20%;
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            -webkit-filter: drop-shadow(5px 5px 5px #222);
            filter: drop-shadow(5px 5px 5px #222);
        }

        .su-menh-sub-title {
            position: absolute;
            margin: auto;
            right: 0;
            left: 0;
            text-align: center;
            bottom: 10%;
        }
    }
}

@font-face {
    font-family: 'PaytoneOne';
    src: url('../fonts/PaytoneOne-Regular.ttf');
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_28pt-Medium.ttf');
}