﻿/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.home-slogan {
    background-image: url(../../../Design/img/bg-slogan_02.png);
    background-color: #022155;
    background-size: cover;
    background-repeat: no-repeat;
    height: 325px;
}

    .home-slogan .grid.wide {
        max-width: 1182px;
    }

    .home-slogan .container {
        padding: 68px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 100%;
    }

        .home-slogan .container .item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-right: 55px;
        }

            .home-slogan .container .item:last-child {
                margin-right: 0;
            }

    .home-slogan .item .img {
        width: 90px;
        height: 76px;
        background-color: #022155;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: 10px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        pointer-events: none;
        background: linear-gradient(94deg,rgba(0, 78, 146, 1) 0%, rgba(13, 20, 82, 1) 100%);
    }

        .home-slogan .item .img img {
        filter: brightness(0) invert(1); /* Đổi thành màu trắng */
        }

    .home-slogan .item .content {
        margin-left: 18px;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

        .home-slogan .item .content h3 {
            margin: 0;
            font-family: OpenB;
            font-size: 22px;
            color: #ffffff;
        }

        .home-slogan .item .content span {
            font-size: 22px;
            color: #ffffff;
            line-height: 100%;
            margin-top: 4px;
            display: block;
        }


        .home-slogan .item .content h3::selection,
        .home-slogan .item .content span::selection {
            background-color: var(--bg-selection);
            color: var(--color-selection);
        }