@extends('layouts.app')

@section('title', 'Ecosystem - ' . config('site.company_name'))
@section('description', 'Hệ sinh thái sản phẩm của ' . config('site.company_name'))

@push('page-styles')
    {{-- CSS riêng cho trang ecosystem --}}
    <link rel='stylesheet' id='bricks-child-css' href='{{ asset('css/stylecce6.css') }}' media='all' />
    <link rel='stylesheet' id='styles-child-css' href='{{ asset('css/stylesf910.css') }}' media='all' />
    <style scoped id='bricks-frontend-inline-inline-css'>
        /* Consolidated Page-Specific Styles */

        .overlay-line:before {
            bottom: -1px !important;
        }

        :root {
            --bricks-color-2d93d0: #f5f5f5;
            --bricks-color-1700e1: #e0e0e0;
            --bricks-color-8c3664: #9e9e9e;
            --bricks-color-b11a5b: #616161;
            --bricks-color-6a2d91: #424242;
            --bricks-color-8d98cc: #212121;
            --bricks-color-49af18: #ffeb3b;
            --bricks-color-9b330b: #ffc107;
            --bricks-color-3c49ed: #ff9800;
            --bricks-color-c0e8de: #ff5722;
            --bricks-color-09740f: #f44336;
            --bricks-color-08fbf0: #9c27b0;
            --bricks-color-2c5bf5: #2196f3;
            --bricks-color-fc2603: #03a9f4;
            --bricks-color-dd779d: #81D4FA;
            --bricks-color-86c91f: #4caf50;
            --bricks-color-4ee077: #8bc34a;
            --bricks-color-168b8f: #cddc39;
            --bricks-color-sgxved: #292643;
            --bricks-color-ecjtdt: #e03d1e;
            --bricks-color-qgmzac: #f38230;
            --bricks-color-gxvlol: #0d0421;
            --bricks-color-gjxbvx: #ededf3;
            --bricks-color-csvmmc: #ffffff;
            --bricks-color-ribhdx: #000000;
            --bricks-color-klbxns: #9da4ae;
            --bricks-color-qltrdz: #f86e00;
            --bricks-color-kvyhlx: rgba(252, 182, 10, 0.29);
            --bricks-color-oymoye: rgba(254, 212, 14, 0);
            --bricks-color-oudukw: #0d0421;
            --bricks-color-huqhzn: #0d0421;
            --bricks-color-shktmv: rgba(13, 4, 33, 0.4);
            --bricks-color-invwkc: rgba(13, 4, 33, 0.1);
            --bricks-color-gcvncq: rgba(13, 4, 33, 0);
        }

        #brxe-heconf {
            width: 150px
        }

        #brxe-tcgagu {
            display: none;
            width: 150px
        }


        #brxe-obiwxv .bricks-nav-menu>li>a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu>li>.brx-submenu-toggle>* {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu>li {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 32px
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15)
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu>li>a {
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu>li>.brx-submenu-toggle>* {
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu>li>.sub-menu {
            transform: translateY(12px)
        }

        #brxe-obiwxv .bricks-nav-menu>li>.brx-megamenu {
            transform: translateY(12px)
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu button {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-obiwxv .bricks-nav-menu>li.menu-item-has-children>.brx-submenu-toggle button[aria-expanded] {
            font-size: 10px;
            color: #000000
        }

        .header-light #brxe-obiwxv .bricks-nav-menu>li>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li .brx-submenu-toggle>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li .brx-submenu-toggle button i {
            color: #fff;
        }

        #brxe-obiwxv>.menu-item-has-children>.brx-submenu-toggle>a {
            padding-right: 0;
        }

        #brxe-obiwxv li a {
            border-bottom: 1px solid transparent;
        }

        #brxe-obiwxv li:hover>a,
        #brxe-obiwxv li:hover>.brx-submenu-toggle>a,
        #brxe-obiwxv li.current-menu-ancestor>.brx-submenu-toggle>a,
        #brxe-obiwxv .bricks-nav-menu .current-menu-item>a,
        #brxe-obiwxv li.current-menu-item>a {
            border-bottom-color: #000;
        }

        .header-light #brxe-obiwxv .bricks-nav-menu>li:hover>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li:hover>.brx-submenu-toggle>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li.current-menu-ancestor>.brx-submenu-toggle>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>.bricks-nav-menu .current-menu-item>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li.current-menu-item>a {
            border-bottom-color: #fff;
        }

        #brxe-obiwxv .sub-menu {
            padding: 16px;
        }

        #brxe-obiwxv .sub-menu li {
            width: auto;
            display: flex;
        }

        #brxe-obiwxv .sub-menu li a {
            width: auto;
        }

        #brxe-obiwxv .sub-menu li+li {
            margin-top: 12px;
        }

        @media (max-width: 1199px) {
            #brxe-obiwxv .bricks-nav-menu>li {
                margin-left: 24px
            }
        }

        #brxe-euafom {
            font-size: 16px;
            line-height: 1.5
        }

        #brxe-dikwfp {
            width: auto;
            flex-direction: row;
            align-items: center;
            column-gap: 24px
        }

        #brx-content {
            margin-top: -15px;
        }

        @media (max-width: 991px) {
            #brxe-dikwfp {
                display: none
            }

            #brx-content {
                margin-top: -75px;
            }
        }



        #brxe-hhafin {
            width: auto;
            display: none
        }

        @media (max-width: 991px) {
            #brxe-hhafin {
                display: flex
            }
        }

        #brxe-zhnncx {
            padding-top: 16px;
            padding-right: 24px;
            padding-bottom: 16px;
            padding-left: 24px;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            min-height: 80px
        }

        @media (max-width: 991px) {
            #brxe-zhnncx {
                padding-top: 10px;
                padding-bottom: 10px;
                min-height: 60px
            }
        }

        #brxe-rcdtem .bricks-nav-menu>li>a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 24px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu>li>.brx-submenu-toggle>* {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 24px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu>li {
            margin-top: 32px;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>li>a {
            font-size: 20px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>li>.brx-submenu-toggle>* {
            font-size: 20px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu button {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-rcdtem .bricks-nav-menu>li.menu-item-has-children>.brx-submenu-toggle button[aria-expanded] {
            font-size: 10px;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu {
            flex-direction: column
        }

        #brxe-rcdtem {
            width: 100%;
            padding-right: 24px;
            padding-bottom: 32px;
            padding-left: 24px;
            border-top: 1px solid #d4d4d4;
            border-bottom: 1px solid #d4d4d4
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu {
            background-color: rgba(0, 0, 0, 0)
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-item>a {
            border-bottom: 1px solid #000000;
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-item>.brx-submenu-toggle {
            border-bottom: 1px solid #000000
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-ancestor>a {
            border-bottom: 1px solid #000000;
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-ancestor>.brx-submenu-toggle {
            border-bottom: 1px solid #000000
        }

        #brxe-rcdtem .bricks-nav-menu .current-menu-item>a {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .current-menu-item>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-parent>a {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-parent>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-ancestor>a {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-ancestor>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-item>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-ancestor>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem {
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }

        #brxe-rcdtem .sub-menu li+li {
            margin-top: 24px;
        }

        #brxe-rcdtem .sub-menu {
            padding: 24px 24px 0 24px;
            display: block;
            opacity: 1;
            visibility: visible;
            pointer-events: visible;
        }

        #brxe-rcdtem .menu-item-has-children>.brx-submenu-toggle>button {
            display: none;
        }

        #brxe-rcdtem li {
            width: auto;
            display: flex;
            align-items: flex-start;
        }

        #brxe-rcdtem .menu-item-has-children>.brx-submenu-toggle>a {
            padding-right: 0;
        }

        #brxe-rcdtem li a {
            border-bottom: 1px solid transparent;
        }

        #brxe-rcdtem li.current-menu-ancestor>.brx-submenu-toggle>a,
        #brxe-rcdtem .bricks-nav-menu .current-menu-item>a {
            border-bottom-color: #000;
        }

        #brxe-rcdtem li a {
            width: auto;
        }

        #brxe-sivrqp {
            font-size: 18px;
            font-weight: 400
        }

        #brxe-cojohe {
            font-size: 16px;
            line-height: 1.5
        }

        #brxe-gkagld {
            flex-direction: row;
            align-items: center;
            column-gap: 10px;
            padding-top: 16px;
            padding-right: 24px;
            padding-bottom: 16px;
            padding-left: 24px
        }

        #brxe-bsueod {
            padding-right: 0;
            padding-left: 0;
            width: 100%;
            display: none;
            background-color: #ffffff
        }

        @media (max-width: 991px) {
            #brxe-bsueod {
                padding-right: 0;
                padding-left: 0
            }
        }

        #brxe-fanzgd {
            background-color: rgba(255, 255, 255, 0.01)
        }

        .header-light #brxe-fanzgd .btn-toggle:before,
        .header-light #brxe-fanzgd .btn-toggle:after {
            background: #fff;
        }

        .header-light #brxe-fanzgd {
            background: rgba(0, 0, 0, 0.3);
        }

        #brxe-fanzgd {
            backdrop-filter: blur(16px);
            transition: all 0.3s !important;
        }

        .header-light .header-logo-black {
            display: none;
        }

        .header-light .header-logo-white {
            display: block !important;
        }

        @media screen and (min-width: 992px) {
            .header-light #brxe-fanzgd .brxe-wpml-language-switcher {
                color: #fff;
            }
        }

        @media screen and (max-width: 991px) {
            #brx-header.show-nav>#brxe-fanzgd {
                background: #fff;
                backdrop-filter: none;
                height: 100vh;
            }

            #brx-header.show-nav .menu-mobile {
                display: block;
            }

            .header-light #brx-header.show-nav #brxe-fanzgd .btn-toggle:before,
            .header-light #brx-header.show-nav #brxe-fanzgd .btn-toggle:after {
                background: #000;
            }

            .header-light #brx-header.show-nav .header-logo-black {
                display: block;
            }

            .header-light #brx-header.show-nav .header-logo-white {
                display: none !important;
            }
        }

        #brxe-itkaec {
            color: #9da4ae;
            font-size: 18px;
            line-height: 1.55;
            font-weight: 600
        }

        #brxe-jzgkgj {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(301.19deg, #f4b055 37.55%, #6bcdef 75.06%);
            padding-bottom: 10px;
            margin-bottom: 230px
        }

        @media (max-width: 1199px) {
            #brxe-jzgkgj {
                font-size: 100px;
                margin-bottom: 200px
            }
        }

        @media (max-width: 991px) {
            #brxe-jzgkgj {
                font-size: 76px;
                margin-bottom: 150px
            }
        }

        @media (max-width: 767px) {
            #brxe-jzgkgj {
                font-size: 56px;
                margin-bottom: 100px
            }
        }

        @media (max-width: 478px) {
            #brxe-jzgkgj {
                font-size: 38px;
                margin-bottom: 50px
            }
        }

        #brxe-duttfq {
            max-width: 926px;
            align-self: center;
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            margin-bottom: 30px
        }

        #brxe-duttfq a {
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            font-size: inherit
        }

        @media (max-width: 1199px) {
            #brxe-duttfq {
                font-size: 40px
            }

            #brxe-duttfq a {
                font-size: 40px;
                font-size: inherit
            }
        }

        @media (max-width: 991px) {
            #brxe-duttfq {
                font-size: 32px
            }

            #brxe-duttfq a {
                font-size: 32px;
                font-size: inherit
            }
        }

        @media (max-width: 767px) {
            #brxe-duttfq {
                font-size: 24px;
                margin-bottom: 20px
            }

            #brxe-duttfq a {
                font-size: 24px;
                font-size: inherit
            }
        }

        @media (max-width: 478px) {
            #brxe-duttfq {
                font-size: 20px
            }

            #brxe-duttfq a {
                font-size: 20px;
                font-size: inherit
            }
        }

        #brxe-kcvjna {
            max-width: 926px;
            align-self: center;
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            margin-bottom: 80px;
            width: 85%
        }

        #brxe-kcvjna a {
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            font-size: inherit
        }

        @media (max-width: 1199px) {
            #brxe-kcvjna {
                font-size: 40px
            }

            #brxe-kcvjna a {
                font-size: 40px;
                font-size: inherit
            }
        }

        @media (max-width: 991px) {
            #brxe-kcvjna {
                font-size: 32px
            }

            #brxe-kcvjna a {
                font-size: 32px;
                font-size: inherit
            }
        }

        @media (max-width: 767px) {
            #brxe-kcvjna {
                font-size: 24px;
                margin-bottom: 60px
            }

            #brxe-kcvjna a {
                font-size: 24px;
                font-size: inherit
            }
        }

        @media (max-width: 478px) {
            #brxe-kcvjna {
                font-size: 20px;
                margin-bottom: 40px
            }

            #brxe-kcvjna a {
                font-size: 20px;
                font-size: inherit
            }
        }

        #brxe-repdix {
            align-items: center;
            align-self: center;
            max-width: 90%
        }

        @media (max-width: 767px) {
            #brxe-repdix {
                max-width: 70%
            }
        }

        #brxe-sjiztd {
            background-color: #0d0421;
            background-image: url("{{ asset('images/') }}/banner-eco.png");
            background-position: top center;
            background-size: 100%;
            background-repeat: no-repeat;
            padding-top: 210px
        }

        @media (max-width: 767px) {
            #brxe-sjiztd {
                padding-top: 120px
            }
        }

        @media (max-width: 478px) {
            #brxe-sjiztd {
                padding-top: 40px;
                background-position: 50% 50%
            }
        }

        #brxe-mwwrbb {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(305.57deg, #e99e75 24.94%, #292643 47.94%);
            padding-bottom: 10px;
            margin-bottom: 60px
        }

        @media (max-width: 1199px) {
            #brxe-mwwrbb {
                font-size: 100px
            }
        }

        @media (max-width: 991px) {
            #brxe-mwwrbb {
                font-size: 76px;
                margin-bottom: 40px
            }
        }

        @media (max-width: 767px) {
            #brxe-mwwrbb {
                font-size: 56px
            }
        }

        @media (max-width: 478px) {
            #brxe-mwwrbb {
                font-size: 38px;
                margin-bottom: 30px
            }
        }

        #brxe-jpdgke {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-jpdgke {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-jpdgke {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-jpdgke {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-jpdgke {
                margin-bottom: 12px
            }
        }

        #brxe-nhbiyg {
            font-size: 18px;
            line-height: 1.55;
            max-width: 270px;
            margin-bottom: 38px
        }

        @media (max-width: 991px) {
            #brxe-nhbiyg {
                font-size: 16px;
                max-width: 251px
            }
        }

        @media (max-width: 767px) {
            #brxe-nhbiyg {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-nhbiyg {
                max-width: 245px
            }
        }

        #brxe-bqcddp {
            width: 100%
        }

        #brxe-ggduic {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(117.02deg, #ffffff 21.69%, #bfc7fd 108.1%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: center;
            position: relative;
            z-index: 1
        }

        @media (max-width: 991px) {
            #brxe-ggduic {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-ggduic {
                min-height: 73vw;
                border-radius: 32px
            }
        }

        @media (max-width: 478px) {
            #brxe-ggduic {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-jujxwf {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-jujxwf {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-jujxwf {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-jujxwf {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-jujxwf {
                margin-bottom: 12px
            }
        }

        #brxe-lnyyrb {
            font-size: 18px;
            line-height: 1.55;
            text-align: center;
            max-width: 275px
        }

        @media (max-width: 991px) {
            #brxe-lnyyrb {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-lnyyrb {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-lnyyrb {
                max-width: 100%
            }
        }

        #brxe-ardohu {
            position: absolute;
            z-index: -1;
            transform: translateX(-50%);
            left: 50%;
            top: 0px;
            max-width: 69%;
            width: 100%;
            bottom: auto;
            height: auto
        }

        #brxe-dwisdj {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(180deg, #eeedf1 0%, #ffffff 100%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            position: relative;
            z-index: 1;
            align-items: center;
            justify-content: flex-end
        }

        @media (max-width: 991px) {
            #brxe-dwisdj {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-dwisdj {
                min-height: 73vw;
                border-radius: 32px
            }
        }

        @media (max-width: 478px) {
            #brxe-dwisdj {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-kibtvp {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-kibtvp {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-kibtvp {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-kibtvp {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-kibtvp {
                margin-bottom: 12px
            }
        }

        #brxe-bzcxbj {
            font-size: 18px;
            line-height: 1.55;
            text-align: center;
            max-width: 360px
        }

        @media (max-width: 991px) {
            #brxe-bzcxbj {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-bzcxbj {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-bzcxbj {
                max-width: 100%
            }
        }

        #brxe-zulnfy {
            z-index: -1;
            width: 100%;
            max-width: 80%;
            position: static;
            margin-top: auto;
            transform: translateX(13%)
        }

        #brxe-olrwmn {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(29.47deg, #fdfcfb 30.56%, #e2d1c3 115.25%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-left: 43px;
            position: relative;
            z-index: 1;
            align-items: center;
            height: auto;
            justify-content: space-between
        }

        @media (max-width: 991px) {
            #brxe-olrwmn {
                padding-top: 30px;
                padding-right: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-olrwmn {
                border-radius: 32px;
                min-height: 73vw
            }
        }

        @media (max-width: 478px) {
            #brxe-olrwmn {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-ezutqe {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px;
            max-width: 210px
        }

        @media (max-width: 1199px) {
            #brxe-ezutqe {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-ezutqe {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-ezutqe {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-ezutqe {
                margin-bottom: 12px
            }
        }

        #brxe-nohlji {
            font-size: 18px;
            line-height: 1.55;
            max-width: 275px
        }

        @media (max-width: 991px) {
            #brxe-nohlji {
                max-width: 55%;
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-nohlji {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-nohlji {
                max-width: 58%
            }
        }

        #brxe-fpxixg {
            position: absolute;
            z-index: -1;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            mix-blend-mode: multiply;
            max-width: 63%;
            height: auto
        }

        @media (max-width: 767px) {
            #brxe-fpxixg {
                max-width: 60%
            }
        }

        #brxe-sborfu {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(180deg, #ffffff 0%, #ffe6fa 100%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: center;
            position: relative;
            z-index: 1
        }

        @media (max-width: 991px) {
            #brxe-sborfu {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-sborfu {
                min-height: 73vw;
                border-radius: 32px
            }
        }

        @media (max-width: 478px) {
            #brxe-sborfu {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-zugumj {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px;
            max-width: 400px
        }

        @media (max-width: 1199px) {
            #brxe-zugumj {
                font-size: 36px
            }
        }

        @media (max-width: 767px) {
            #brxe-zugumj {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-zugumj {
                margin-bottom: 12px
            }
        }

        #brxe-dwplun {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 767px) {
            #brxe-dwplun {
                font-size: 16px
            }
        }

        #brxe-vsvwah {
            position: absolute;
            z-index: -1;
            right: 27px;
            bottom: 0px;
            max-width: 46%;
            height: auto
        }

        @media (max-width: 767px) {
            #brxe-vsvwah {
                max-width: 50%
            }
        }

        #brxe-syxupc {
            background-color: #ffffff;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url({{ asset('images/') }}2024/10/06.png);
            border-radius: 42px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: center;
            position: relative;
            z-index: 1;
            grid-column: 1/3;
            min-height: 380px;
            margin-top: 80px
        }

        @media (max-width: 1199px) {
            #brxe-syxupc {
                margin-top: 8vw
            }
        }

        @media (max-width: 991px) {
            #brxe-syxupc {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px;
                margin-top: 5vw
            }
        }

        @media (max-width: 767px) {
            #brxe-syxupc {
                min-height: 73vw;
                border-radius: 32px;
                justify-content: flex-start;
                margin-top: 0;
                grid-column: 1/2
            }
        }

        @media (max-width: 478px) {
            #brxe-syxupc {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-sbqflx {
            flex-direction: row;
            column-gap: 32px;
            row-gap: 48px;
            display: grid;
            align-items: initial;
            grid-template-columns: 1fr 1fr;
            grid-gap: 48px 32px
        }

        @media (max-width: 767px) {
            #brxe-sbqflx {
                grid-template-columns: 1fr
            }
        }

        @media (max-width: 478px) {
            #brxe-sbqflx {
                grid-gap: 30px
            }
        }

        #brxe-frstdr {
            padding-top: 120px;
            padding-bottom: 120px;
            background-color: #ededf3;
            background-image: url({{ asset('images/') }}2024/10/bg-1.png);
            background-size: 100%;
            background-position: 50% 40%
        }

        @media (max-width: 991px) {
            #brxe-frstdr {
                padding-top: 80px;
                padding-bottom: 80px
            }
        }

        @media (max-width: 767px) {
            #brxe-frstdr {
                background-position: 130% -3%;
                background-repeat: no-repeat;
                background-size: 60%
            }
        }

        @media (max-width: 478px) {
            #brxe-frstdr {
                padding-top: 60px;
                padding-bottom: 60px
            }
        }

        #brxe-lsfdmj {
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            color: #ffffff;
            max-width: 926px
        }

        @media (max-width: 1199px) {
            #brxe-lsfdmj {
                font-size: 40px;
                max-width: 80%
            }
        }

        @media (max-width: 991px) {
            #brxe-lsfdmj {
                font-size: 32px
            }
        }

        @media (max-width: 767px) {
            #brxe-lsfdmj {
                font-size: 26px
            }
        }

        @media (max-width: 478px) {
            #brxe-lsfdmj {
                max-width: 100%;
                font-size: 24px
            }
        }

        #brxe-pxfcye {
            width: 100%;
            margin-top: -3vw;
            margin-bottom: -10vw;
            position: relative;
            z-index: -1
        }

        :where(#brxe-pxfcye > *) {
            position: relative
        }

        #brxe-pxfcye::before {
            background-image: linear-gradient(180deg, #0d0421 8.63%, rgba(13, 4, 33, 0.4) 26.9%, rgba(13, 4, 33, 0.1) 45.18%, rgba(13, 4, 33, 0.1) 63.45%, rgba(13, 4, 33, 0.4) 81.73%, #0d0421 100%);
            position: absolute;
            content: "";
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none
        }

        #brxe-adezjd {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(301.19deg, #f4b055 37.55%, #6bcdef 75.06%);
            padding-bottom: 10px
        }

        @media (max-width: 1199px) {
            #brxe-adezjd {
                font-size: 100px
            }
        }

        @media (max-width: 991px) {
            #brxe-adezjd {
                font-size: 76px
            }
        }

        @media (max-width: 767px) {
            #brxe-adezjd {
                font-size: 56px
            }
        }

        @media (max-width: 478px) {
            #brxe-adezjd {
                font-size: 38px
            }
        }

        #brxe-spzlgx {
            margin-bottom: 68px
        }

        @media (max-width: 767px) {
            #brxe-spzlgx {
                margin-bottom: 40px
            }
        }

        #brxe-ixigiz {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-ixigiz {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-ixigiz {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-ixigiz {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-ixigiz {
                margin-bottom: 12px
            }
        }

        #brxe-kgufvs {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-kgufvs a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-kgufvs {
                font-size: 16px
            }

            #brxe-kgufvs a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-wstusf {
            width: 37%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px
        }

        #brxe-wstusf {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-wstusf {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-wstusf {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-wstusf {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-ipotsu {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-ipotsu {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-ipotsu {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-ipotsu {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-ipotsu {
                margin-bottom: 12px
            }
        }

        #brxe-ggyoqg {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-ggyoqg a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-ggyoqg {
                font-size: 16px
            }

            #brxe-ggyoqg a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-vrjunq {
            width: 63%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px
        }

        #brxe-vrjunq {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-vrjunq {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-vrjunq {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-vrjunq {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-oigwti {
            flex-direction: row;
            column-gap: 32px;
            row-gap: 32px;
            align-items: stretch;
            margin-bottom: 36px
        }

        @media (max-width: 991px) {
            #brxe-oigwti {
                column-gap: 30px;
                row-gap: 30px;
                margin-bottom: 30px
            }
        }

        #brxe-rerfpt {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-rerfpt {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-rerfpt {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-rerfpt {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-rerfpt {
                margin-bottom: 12px
            }
        }

        #brxe-lbxphc {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-lbxphc a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-lbxphc {
                font-size: 16px
            }

            #brxe-lbxphc a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-mjvkpq {
            width: 58%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            min-height: 380px
        }

        #brxe-mjvkpq {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-mjvkpq {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-mjvkpq {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-mjvkpq {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }

            .brxe-container-1 {
                margin-top: 155px;
            }
        }

        #brxe-nggcpl {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-nggcpl {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-nggcpl {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-nggcpl {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-nggcpl {
                margin-bottom: 12px
            }
        }

        #brxe-idiukf {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-idiukf a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-idiukf {
                font-size: 16px
            }

            #brxe-idiukf a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-urfrnb {
            width: 42%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            min-height: 380px
        }

        #brxe-urfrnb {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-urfrnb {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-urfrnb {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-urfrnb {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-vmqgcu {
            flex-direction: row;
            column-gap: 32px;
            row-gap: 32px;
            align-items: stretch
        }

        @media (max-width: 991px) {
            #brxe-vmqgcu {
                column-gap: 30px;
                row-gap: 30px
            }
        }

        #brxe-fnmxko {
            background-color: #0d0421;
            background-image: url({{ asset('images/') }}2024/10/bg-gr.png);
            background-position: bottom center;
            background-size: 100%;
            background-repeat: no-repeat;
            padding-top: 120px;
            padding-bottom: 120px;
            z-index: 1;
            position: relative
        }

        @media (max-width: 991px) {
            #brxe-fnmxko {
                padding-top: 80px;
                padding-bottom: 80px
            }
        }

        @media (max-width: 478px) {
            #brxe-fnmxko {
                padding-top: 60px;
                padding-bottom: 60px
            }
        }

        #brxe-nrkfog {
            position: absolute;
            z-index: 1;
            left: 0px;
            width: 100%;
            bottom: 0px;
            pointer-events: none
        }

        #brxe-wnprzs {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            text-align: center;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(305.57deg, #e99e75 24.94%, #292643 47.94%);
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 20px
        }

        @media (max-width: 1199px) {
            #brxe-wnprzs {
                font-size: 100px
            }
        }

        @media (max-width: 991px) {
            #brxe-wnprzs {
                font-size: 76px
            }
        }

        @media (max-width: 767px) {
            #brxe-wnprzs {
                font-size: 56px
            }
        }

        @media (max-width: 478px) {
            #brxe-wnprzs {
                font-size: 38px
            }
        }

        #brxe-yojwuu {
            padding-top: 134px;
            padding-bottom: 31.777vw;
            background-color: #ededf3;
            background-position: bottom center;
            background-size: auto;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-yojwuu {
                padding-top: 120px
            }
        }

        @media (max-width: 991px) {
            #brxe-yojwuu {
                padding-top: 80px
            }
        }

        @media (max-width: 767px) {
            #brxe-yojwuu {
                padding-top: 60px;
                padding-bottom: 35vw
            }
        }

        #brxe-kqfaxz {
            font-weight: 600;
            font-size: 48px;
            line-height: 1.25
        }

        @media (max-width: 1199px) {
            #brxe-kqfaxz {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-kqfaxz {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-kqfaxz {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-kqfaxz {
                font-size: 20px
            }
        }

        #brxe-ljalyq {
            margin-bottom: 68px
        }

        @media (max-width: 1199px) {
            #brxe-ljalyq {
                margin-bottom: 46px
            }
        }

        @media (max-width: 991px) {
            #brxe-ljalyq {
                margin-bottom: 30px
            }
        }

        #brxe-tovbko {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            color: #000000;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-tovbko {
                font-size: 30px
            }
        }

        @media (max-width: 991px) {
            #brxe-tovbko {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-tovbko {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-tovbko {
                margin-bottom: 12px
            }
        }

        #brxe-xskcdf {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 1199px) {
            #brxe-xskcdf {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-xskcdf {
                font-size: 16px;
                max-width: 70%
            }
        }

        #brxe-lzldyw {
            position: absolute;
            right: 0px;
            top: 19px;
            max-width: 73%;
            height: auto;
            z-index: -1
        }

        @media (max-width: 767px) {
            #brxe-lzldyw {
                top: 0px
            }
        }

        #brxe-yrslpu {
            background-color: #ffffff;
            background-position: top right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 12px;
            min-height: 400px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: flex-end;
            background-image: linear-gradient(180deg, #eeedf1, #ffffff);
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-yrslpu {
                min-height: 320px
            }
        }

        @media (max-width: 991px) {
            #brxe-yrslpu {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 260px
            }
        }

        @media (max-width: 767px) {
            #brxe-yrslpu {
                min-height: 240px
            }
        }

        #brxe-eyimce {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            color: #000000;
            margin-bottom: 16px;
            max-width: 200px;
            position: relative;
            z-index: 2
        }

        @media (max-width: 1199px) {
            #brxe-eyimce {
                font-size: 30px;
                max-width: 140px
            }
        }

        @media (max-width: 991px) {
            #brxe-eyimce {
                font-size: 26px;
                max-width: 100%
            }
        }

        @media (max-width: 767px) {
            #brxe-eyimce {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-eyimce {
                margin-bottom: 12px
            }
        }

        #brxe-jttuar {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 1199px) {
            #brxe-jttuar {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-jttuar {
                font-size: 16px;
                max-width: 75%
            }
        }

        #brxe-huuagr {
            position: absolute;
            right: 0px;
            top: 0px;
            max-width: 69%;
            height: auto;
            z-index: -1
        }

        @media (max-width: 767px) {
            #brxe-huuagr {
                max-width: 60%
            }
        }

        #brxe-novwpp {
            background-color: #ffffff;
            border-radius: 12px;
            min-height: 400px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: flex-end;
            background-image: linear-gradient(180deg, #eeedf1, #ffffff);
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-novwpp {
                min-height: 320px
            }
        }

        @media (max-width: 991px) {
            #brxe-novwpp {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 260px
            }
        }

        @media (max-width: 767px) {
            #brxe-novwpp {
                min-height: 240px
            }
        }

        #brxe-jfsvob {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            color: #000000;
            margin-bottom: 16px;
            max-width: 200px;
            position: relative;
            z-index: 2
        }

        @media (max-width: 1199px) {
            #brxe-jfsvob {
                font-size: 30px;
                max-width: 140px
            }
        }

        @media (max-width: 991px) {
            #brxe-jfsvob {
                font-size: 26px;
                max-width: 100%
            }
        }

        @media (max-width: 767px) {
            #brxe-jfsvob {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-jfsvob {
                margin-bottom: 12px
            }
        }

        #brxe-vsqgpq {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 1199px) {
            #brxe-vsqgpq {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-vsqgpq {
                font-size: 16px
            }
        }

        #brxe-mmsrdw {
            position: absolute;
            right: 0px;
            top: 0px;
            max-width: 69%;
            height: auto;
            z-index: -1
        }

        #brxe-eugwjv {
            background-color: #ffffff;
            border-radius: 12px;
            min-height: 400px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: flex-end;
            background-image: linear-gradient(180deg, #eeedf1, #ffffff);
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-eugwjv {
                min-height: 320px
            }
        }

        @media (max-width: 991px) {
            #brxe-eugwjv {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 260px
            }
        }

        @media (max-width: 767px) {
            #brxe-eugwjv {
                min-height: 270px
            }
        }

        #brxe-wlthpd {
            flex-direction: row;
            column-gap: 24px;
            row-gap: 24px
        }

        #brxe-ihjdur {
            padding-top: 68px;
            padding-bottom: 120px;
            background-color: #ededf3;
            background-image: url({{ asset('images/') }}2024/10/career-bg-2.png);
            background-position: bottom center;
            background-size: auto;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1
        }

        @media (max-width: 991px) {
            #brxe-ihjdur {
                padding-bottom: 80px
            }
        }

        @media (max-width: 478px) {
            #brxe-ihjdur {
                padding-bottom: 60px
            }
        }

        #brxe-vzaccw {
            mix-blend-mode: multiply;
            max-width: 207px
        }

        #brxe-ynukax {
            width: 100%;
            margin-bottom: 82px;
            max-width: 1035px
        }

        @media (max-width: 991px) {
            #brxe-ynukax {
                margin-bottom: 60px
            }
        }

        @media (max-width: 767px) {
            #brxe-ynukax {
                margin-bottom: 60px
            }
        }

        #brxe-fexnwx {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 15px
        }

        @media (max-width: 991px) {
            #brxe-fexnwx {
                margin-bottom: 30px
            }
        }

        #brxe-jnenbp {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 3px
        }

        #brxe-rjhocu {
            flex-direction: column;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-xbedek {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-xbedek {
                width: calc(50% - 15px)
            }
        }



        #brxe-qcjadp {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 3px
        }

        #brxe-nfssob {
            flex-direction: column;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-riockm {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-riockm {
                width: calc(50% - 15px)
            }
        }

        #title-footer {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 15px
        }

        @media (max-width: 991px) {
            #title-footer {
                margin-bottom: 30px
            }
        }

        #brxe-yquheb {
            margin-right: 0
        }

        #brxe-orneop {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 3px
        }

        #brxe-ciltcg {
            flex-direction: column;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-zgwwmh {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-zgwwmh {
                width: calc(50% - 15px)
            }
        }

        #brxe-bjrdzu {
            flex-direction: row;
            max-width: 1035px;
            width: 100%;
            margin-bottom: 30px;
            column-gap: 30px;
            row-gap: 30px;
            justify-content: space-between
        }

        @media (max-width: 767px) {
            #brxe-bjrdzu {
                margin-bottom: 60px;
                row-gap: 40px
            }
        }

        #brxe-qauejr {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        #brxe-axovgc {
            font-size: 16px
        }

        #brxe-axovgc a {
            font-size: 16px;
            font-size: inherit
        }

        #brxe-ykccwm {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-ykccwm {
                width: 100%
            }
        }

        #brxe-ybieel {
            font-size: 16px;
            font-weight: 700
        }

        #brxe-ybieel a {
            font-size: 16px;
            font-weight: 700;
            font-size: inherit
        }

        #brxe-ybieel p {
            margin-bottom: 7px;
        }

        #brxe-ybieel p:last-of-type {
            margin-bottom: 0;
        }

        #brxe-vaxusp {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-vaxusp {
                width: 100%
            }
        }

        #brxe-soyark {
            flex-direction: row;
            justify-content: space-between;
            max-width: 1035px;
            margin-bottom: 40px;
            align-items: center;
            width: 100%
        }

        @media (max-width: 767px) {
            #brxe-soyark {
                row-gap: 20px
            }
        }

        #brxe-aorpaj {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-kchnqo {
            row-gap: 50px;
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-kchnqo {
                width: calc(50% - 15px)
            }
        }

        #brxe-rzxbav {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-cxqaxh {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-bcdavf {
            width: auto;
            flex-direction: row;
            column-gap: 53px
        }

        @media (max-width: 767px) {
            #brxe-bcdavf {
                width: calc(50% - 15px)
            }
        }

        #brxe-kbsyij {
            flex-direction: row;
            width: 100%;
            column-gap: 30px;
            row-gap: 30px;
            padding-top: 30px;
            padding-right: 0;
            padding-left: 0;
            border-top: 1px solid #000000;
            justify-content: space-between
        }

        @media (max-width: 767px) {
            #brxe-kbsyij {
                row-gap: 0px;
                padding-top: 20px
            }
        }

        #brxe-alqlac {
            flex-direction: row;
            max-width: 1035px;
            width: 100%;
            column-gap: 30px;
            row-gap: 30px
        }

        @media (max-width: 767px) {
            #brxe-alqlac {
                row-gap: 0px;
                margin-bottom: 20px
            }
        }

        #brxe-rnccbt {
            font-size: 16px;
            font-weight: 700
        }

        #brxe-ymiplj {
            width: 100%;
            max-width: 1035px
        }

        #brxe-tpforl {
            background-color: #ffffff;
            padding-top: 96px;
            padding-bottom: 120px
        }

        @media (max-width: 991px) {
            #brxe-tpforl {
                padding-top: 80px;
                padding-bottom: 100px
            }
        }

        @media (max-width: 478px) {
            #brxe-tpforl {
                padding-top: 60px;
                padding-bottom: 40px;
                position: relative;
                z-index: 3
            }
        }

        .brxe-popup-1809 .brx-popup-content {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            background-color: rgba(0, 0, 0, 0);
            width: 100%
        }

        #brxe-kgrzzd {
            gap: 0px;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            border-radius: 0;
            position: absolute;
            top: 8px;
            right: 8px
        }

        #brxe-gcgxrn {
            background-image: url({{ asset('images/') }}2024/10/Heading-and-supporting-text-1.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom center;
            padding-top: 32px;
            padding-right: 32px;
            padding-bottom: 32px;
            padding-left: 32px;
            min-height: 172px;
            justify-content: center;
            position: relative
        }

        #brxe-pbdcrc .form-group:not(:last-child):not(.captcha) {
            padding-bottom: 24px
        }

        #brxe-pbdcrc .form-group input {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px
        }

        #brxe-pbdcrc .flatpickr {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px
        }

        #brxe-pbdcrc select {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px;
            color: #667085
        }

        #brxe-pbdcrc textarea {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px
        }

        #brxe-pbdcrc .bricks-button:not([type=submit]) {
            border: 1px solid #d0d5dd;
            border-radius: 8px
        }

        #brxe-pbdcrc .choose-files {
            border: 1px solid #d0d5dd;
            border-radius: 8px
        }

        #brxe-pbdcrc label {
            font-size: 14px;
            font-weight: 700;
            text-transform: none;
            line-height: 1.43
        }

        #brxe-pbdcrc .label {
            font-size: 14px;
            font-weight: 700;
            text-transform: none;
            line-height: 1.43
        }

        #brxe-pbdcrc ::placeholder {
            color: #667085
        }

        #brxe-pbdcrc {
            box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05)
        }

        #brxe-pbdcrc .submit-button-wrapper {
            width: 100%;
            margin-top: 8px
        }

        #brxe-pbdcrc button[type=submit].bricks-button {
            border-radius: 8px
        }

        #brxe-pbdcrc .bricks-button {
            font-size: 16px
        }

        #brxe-pbdcrc h3 {
            color: #475467;
            font-size: 18px;
            margin-bottom: -8px;
            font-weight: 400;
        }

        @media screen and (min-width: 992px) {
            #brxe-pbdcrc h3 {
                font-size: 20px;
            }


        }

        #brxe-emlesh {
            padding-top: 40px;
            padding-right: 32px;
            padding-bottom: 32px;
            padding-left: 32px
        }

        #brxe-ecqxom {
            padding-right: 0;
            padding-left: 0
        }

        .brxe-heading-box {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis
        }

        #brxe-etneud {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            max-width: 800px;
            margin-top: 32px;
            margin-bottom: 32px;
            background-color: #ffffff;
            border-radius: 8px
        }
    </style>
@endpush

@push('scripts-libs')
    {{-- JS riêng cho trang ecosystem --}}
    <script src="{{ asset('js/scriptsf910.js') }}"></script>
@endpush

@section('content')
    <main id="brx-content">
        <section id="brxe-sjiztd" class="brxe-section">
            <div id="brxe-zzlptn" class="brxe-container brxe-container-1">
                <h3 id="brxe-itkaec" class="brxe-heading">LVT GLOBAL Technologies Group</h3>
                <h3 id="brxe-jzgkgj" class="brxe-heading">High-tech <br>Products for
                    <br>Billions Users
                </h3>
                <div id="brxe-duttfq" class="brxe-text">
                    <p>300+ sản phẩm, 3 ngành hot</p>
                </div>
                <div id="brxe-kcvjna" class="brxe-text">
                    <p>Công nghệ hàng đầu, nhiều business model tối ưu</p>
                </div><img width="970" height="384" src="{{ asset('images/') }}/eco-logo.png"
                    class="brxe-image css-filter size-full" alt="" id="brxe-repdix" decoding="async" fetchpriority="high"
                    data-src="{{ asset('images/') }}/eco-logo.png" data-type="string"
                    data-sizes="(max-width: 970px) 100vw, 970px"
                    data-srcset="{{ asset('images/') }}/eco-logo.png 970w, {{ asset('images/') }}/eco-logo.png 300w, 
                                                                                                                {{ asset('images/') }}/eco-logo.png 768w" />
            </div>
        </section>
        <section id="brxe-frstdr" class="brxe-section">
            <div id="brxe-nattqe" class="brxe-container">
                <h3 id="brxe-mwwrbb" class="brxe-heading">Những sản <br>phẩm nổi bật</h3>
            </div>
            <div id="brxe-sbqflx" class="brxe-container brx-grid"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start;">
                @forelse($mobileApps as $index => $app)
                    <div class="brxe-block" style="min-height: 400px; max-width: 400px; flex-shrink: 0;">
                        <h3 class="brxe-heading brxe-heading-box">
                            @if ($app->google_play_url)
                                <a href="{{ $app->google_play_url }}" target="_blank">{{ $app->name }}</a>
                            @else
                                {{ $app->name }}
                            @endif
                        </h3>
                        <div class="brxe-text-basic text-truncate-2" style="min-height: 3em;">
                            {{ Str::limit(strip_tags($app->short_description), 90) }}
                        </div>
                        <div class="brxe-image tag"
                            style="width: 100%; height: 300px; overflow: hidden; border-radius: 8px; flex-shrink: 0;">
                            @if ($app->google_play_url)
                                <a href="{{ $app->google_play_url }}" target="_blank"
                                    style="display: block; width: 100%; height: 100%;">
                            @endif
                                @if ($app->featured_image)
                                    <img width="400" height="300"
                                        src="{{ getImageUrl($app->featured_image, 'default-image.png', 'storage') }}"
                                        class="css-filter size-full" alt="{{ $app->name }}" decoding="async"
                                        style="width: 400px !important; height: 300px !important; object-fit: cover; object-position: center;" />
                                @else
                                    <div class="app-placeholder"
                                        style="width: 400px !important; height: 300px !important; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; border-radius: 8px; flex-shrink: 0;">
                                        {{ substr($app->name, 0, 2) }}
                                    </div>
                                @endif
                                @if ($app->google_play_url)
                                    </a>
                                @endif
                        </div>
                    </div>
                @empty
                    <div class="brxe-block">
                        <h3 class="brxe-heading">Chưa có ứng dụng nào</h3>
                        <div class="brxe-text-basic">Hiện tại chưa có ứng dụng nào được thêm vào hệ sinh thái.</div>
                    </div>
                @endforelse
            </div>
        </section>
    </main>
@endsection