@extends('layouts.app')

@section('title', 'Ecosystem - LVT Global Technologies Group')
@section('description', 'Hệ sinh thái sản phẩm của LVT Global Technologies Group')

@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'>
        /* Text Truncation Utilities */
.text-truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 1.4em;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 4.2em;
}

.text-truncate-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 5.6em;
}

/* Fallback for browsers that don't support -webkit-line-clamp */
@supports not (-webkit-line-clamp: 2) {
    .text-truncate-2 {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-height: 2.8em;
    }
}

/* Responsive text truncation */
@media (max-width: 768px) {
    .text-truncate-2 {
        -webkit-line-clamp: 1;
        max-height: 1.4em;
    }
    
    .text-truncate-3 {
        -webkit-line-clamp: 2;
        max-height: 2.8em;
    }
}

/* Custom line heights */
.text-truncate-2-tight {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    max-height: 2.4em;
}

.text-truncate-2-loose {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    max-height: 3.2em;
}

        html {
            scroll-behavior: smooth
        }


        :root {}

        body {
             font-family: 'Poppins', sans-serif;
            color: #000000
        }

        .brxe-container {
            padding-right: 20px;
            padding-left: 20px;
            width: 1160px
        }

        .woocommerce main.site-main {
            width: 1160px
        }

        #brx-content.wordpress {
            width: 1160px
        }

        .bricks-button {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.26;
            border-radius: 8px;
            box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            padding-top: 14px;
            padding-right: 20px;
            padding-bottom: 14px;
            padding-left: 20px
        }

        :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
            font-size: 16px;
            color: #ffffff;
            font-weight: 600;
            line-height: 1.25;
            border: 1px solid #9da4ae;
            border-radius: 8px
        }

        :root .bricks-button[class*="light"]:not(.outline):not(.bricks-lightbox) {
            background-color: rgba(0, 0, 0, 0)
        }

        .bricks-button.md {
            font-size: 16px
        }

        .bricks-button.sm {
            padding-top: 12px;
            padding-right: 16px;
            padding-bottom: 12px;
            padding-left: 16px
        }

        .bricks-button.lg {
            padding-top: 16px;
            padding-right: 24px;
            padding-bottom: 16px;
            padding-left: 24px
        }

        .brxe-form .form-group input {
            border-radius: 14px
        }

        .brxe-form .flatpickr {
            border-radius: 14px
        }

        .brxe-form select {
            border-radius: 14px
        }

        .brxe-form textarea {
            border-radius: 14px
        }

        .brxe-form .bricks-button {
            border-radius: 14px
        }

        .brxe-form .choose-files {
            border-radius: 14px
        }

        @media (max-width: 767px) {
            :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
                font-size: 18px
            }
        }

        @media (max-width: 478px) {
            .bricks-button {
                font-size: 16px
            }

            :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
                font-size: 14px
            }
        }

        .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: 117px
        }

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

        #brxe-excvid {
            width: auto
        }

        #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
        }

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

        #brxe-ikrywt {
            width: 40px;
            height: 40px;
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            position: relative;
            cursor: pointer;
            border-radius: 0;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)
        }

        #brxe-ikrywt:before {
            width: 100%;
            height: 2px;
            position: absolute;
            top: calc(50% - 3px);
            background-color: #000000;
            left: 0px;
            content: '';
            transition: all 0.3s
        }

        #brxe-ikrywt:after {
            width: 100%;
            height: 2px;
            position: absolute;
            top: calc(50% + 3px);
            content: '';
            left: 0px;
            background-color: #000000;
            transition: all 0.3s
        }

        #brxe-ikrywt.active::before {
            transform: rotate(45deg);
            top: calc(50% - 1px);
        }

        #brxe-ikrywt.active::after {
            transform: rotate(-45deg);
            top: calc(50% - 1px);
        }

        #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: 100px;
                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-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: 55px
        }

        @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-yvurfv {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 55px
        }

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

        #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)
            }
        }

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

        @media (max-width: 991px) {
            #brxe-jwhxvr {
                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-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 bricks-lazy-hidden">
            <div id="brxe-zzlptn" class="brxe-container bricks-lazy-hidden">
                <h3 id="brxe-itkaec" class="brxe-heading"
                    data-interactions="[{&quot;id&quot;:&quot;eskgec&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                    data-interaction-id="aa8ad8" data-interaction-hidden-on-load="1">Apero Technologies Group</h3>
                <h3 id="brxe-jzgkgj" class="brxe-heading"
                    data-interactions="[{&quot;id&quot;:&quot;ijwwwt&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                    data-interaction-id="478a7c" data-interaction-hidden-on-load="1">High-tech <br>Products for
                    <br>Billions Users.
                </h3>
                <div id="brxe-duttfq" class="brxe-text"
                    data-interactions="[{&quot;id&quot;:&quot;nvungt&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                    data-interaction-id="5e2160" data-interaction-hidden-on-load="1">
                    <p>300+ sản phẩm, 3 ngành hot</p>
                </div>
                <div id="brxe-kcvjna" class="brxe-text"
                    data-interactions="[{&quot;id&quot;:&quot;lyknsm&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                    data-interaction-id="aa2ecb" data-interaction-hidden-on-load="1">
                    <p>Công nghệ hàng đầu, nhiều business model tối ưu</p>
                </div><img width="970" height="384"
                    src="data:image/svg+xml,%3Csvg%20xmlns=&#039;http://www.w3.org/2000/svg&#039;%20viewBox=&#039;0%200%20970%20384&#039;%3E%3C/svg%3E"
                    class="brxe-image css-filter size-full bricks-lazy-hidden" alt="" id="brxe-repdix"
                    data-interactions="[{&quot;id&quot;:&quot;itjikk&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                    data-interaction-id="c92ce7" data-interaction-hidden-on-load="1" 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 bricks-lazy-hidden">
            <div id="brxe-nattqe" class="brxe-container bricks-lazy-hidden">
                <h3 id="brxe-mwwrbb" class="brxe-heading"
                    data-interactions="[{&quot;id&quot;:&quot;imupbr&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                    data-interaction-id="6f8497" data-interaction-hidden-on-load="1">Những sản <br>phẩm nổi bật</h3>
            </div>
            <div id="brxe-sbqflx" class="brxe-container brx-grid bricks-lazy-hidden"
                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 bricks-lazy-hidden"
                        data-interactions="[{&quot;id&quot;:&quot;yanvfa&quot;,&quot;trigger&quot;:&quot;enterView&quot;,&quot;action&quot;:&quot;startAnimation&quot;,&quot;animationType&quot;:&quot;fadeInUp&quot;,&quot;runOnce&quot;:&quot;1&quot;}]"
                        data-interaction-id="d294b7" data-interaction-hidden-on-load="1"
                        style="min-height: 400px; max-width: 400px; flex-shrink: 0;">
                        <h3 class="brxe-heading">
                            @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">
                            {{ truncateTextLines($app->short_description, 2, 100) }}
                        </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 bricks-lazy-hidden" 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