.g-intro {
    --g-intro-primary: #004892;
    --g-intro-accent: #ed1c25;
    --g-intro-bg: #f6f8fb;
    --g-intro-max: 1400px;
    --g-intro-image-h: 470px;
    --g-intro-radius: 46px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    background: var(--g-intro-bg);
    color: #202630;
    font-family: Manrope,Arial,sans-serif;
    font-weight: normal
}

.g-intro * {
    box-sizing: border-box
}

.g-intro strong,.g-intro b {
    font-weight: bold
}

.g-intro__inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px),var(--g-intro-max));
    margin: 0 auto
}

.g-intro__decor {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px)
}

.g-intro__decor--one {
    width: 430px;
    height: 430px;
    top: -250px;
    right: -130px;
    background: radial-gradient(circle,rgba(0,72,146,.14),rgba(0,72,146,0) 69%)
}

.g-intro__decor--two {
    width: 360px;
    height: 360px;
    bottom: -240px;
    left: -110px;
    background: radial-gradient(circle,rgba(237,28,37,.1),rgba(237,28,37,0) 70%)
}

.g-intro__header {
    text-align: center;
    margin: 0 auto clamp(34px,4vw,54px);
    max-width: 850px
}

.g-intro__heading-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 18px;
    color: var(--g-intro-primary);
    background: #fff;
    border: 1px solid rgba(0,72,146,.09);
    box-shadow: 0 12px 35px rgba(0,45,91,.11)
}

.g-intro__heading-icon svg {
    width: 27px;
    height: 27px
}

.g-intro__heading-icon:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    margin: 42px 0 0 42px;
    border-radius: 50%;
    background: var(--g-intro-accent);
    border: 3px solid #fff
}

.g-intro__subtitle {
    margin-bottom: 8px;
    color: var(--g-intro-accent);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .16em;
    text-transform: uppercase
}

.g-intro__title {
    margin: 0!important;
    color: var(--g-intro-primary)!important;
    font-family: inherit;
    font-size: clamp(34px,4vw,58px)!important;
    line-height: 1.12!important;
    font-weight: bold!important;
    letter-spacing: -.035em
}

.g-intro-timeline {
    position: relative;
    margin-bottom: clamp(30px,3.3vw,48px);
    overflow: visible
}

.g-intro-timeline__track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 100%;
    padding: 0 2px
}

.g-intro-timeline__track:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg,rgba(0,72,146,.08),rgba(0,72,146,.24) 12%,rgba(0,72,146,.24) 88%,rgba(0,72,146,.08))
}

.g-intro-tab {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    min-width: 120px;
    max-width: 250px;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #707780;
    cursor: pointer;
    box-shadow: none!important;
    text-transform: none
}

.g-intro-tab:hover,.g-intro-tab:focus {
    background: transparent;
    color: var(--g-intro-primary);
    outline: 0
}

.g-intro-tab__label {
    display: block;
    font-size: clamp(15px,1.45vw,21px);
    font-weight: bold;
    line-height: 1.25;
    white-space: nowrap;
    transition: color .25s ease,transform .25s ease
}

.g-intro-tab__marker {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--g-intro-bg);
    transition: all .3s ease
}

.g-intro-tab__marker span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #858b92;
    transition: all .3s ease
}

.g-intro-tab.is-active .g-intro-tab__label {
    color: var(--g-intro-primary);
    font-weight: bold;
    transform: translateY(-2px)
}

.g-intro-tab.is-active .g-intro-tab__marker {
    background: #fff;
    box-shadow: 0 0 0 2px var(--g-intro-accent),0 6px 18px rgba(237,28,37,.22)
}

.g-intro-tab.is-active .g-intro-tab__marker span {
    width: 7px;
    height: 7px;
    background: var(--g-intro-accent)
}

.g-intro-slider-wrap {
    overflow: visible!important
}

.g-intro-slider {
    min-height: 100px
}

.g-intro-slider:not(.flickity-enabled) {
    display: flex;
    overflow: hidden
}

.g-intro-slider:not(.flickity-enabled)>.g-intro-slide:not(:first-child) {
    display: none
}

.g-intro-slider.flickity-enabled {
    overflow: visible
}

.g-intro-slider .flickity-viewport {
    overflow: hidden;
    border-radius: calc(var(--g-intro-radius) + 4px);
    transition: height .35s ease
}

.g-intro-slide {
    width: 100%;
    padding: 4px 7px 22px
}

.g-intro-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
    min-height: calc(var(--g-intro-image-h) + 64px);
    padding: 30px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(0,72,146,.08);
    border-radius: var(--g-intro-radius);
    box-shadow: 0 28px 70px rgba(13,43,72,.12),0 4px 16px rgba(13,43,72,.05);
    overflow: hidden
}

.g-intro-card:before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,transparent,var(--g-intro-primary),var(--g-intro-accent),transparent);
    opacity: .9
}

.g-intro-card__media {
    position: relative;
    min-height: var(--g-intro-image-h);
    overflow: hidden;
    border-radius: 34px 112px 34px 112px;
    background: #e9eef4
}

.g-intro-card__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--g-intro-image-h);
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.65,.25,1)
}

.g-intro-card:hover .g-intro-card__image {
    transform: scale(1.035)
}

.g-intro-card__media-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 58%,rgba(0,34,70,.25));
    pointer-events: none
}

.g-intro-card__media-badge {
    position: absolute;
    right: 23px;
    bottom: 23px;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(145deg,var(--g-intro-primary),#00366d);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 15px 35px rgba(0,45,91,.28);
    backdrop-filter: blur(12px)
}

.g-intro-card__media-badge:after {
    content: "";
    position: absolute;
    right: -5px;
    top: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--g-intro-accent);
    border: 3px solid #fff
}

.g-intro-card__media-badge svg {
    width: 29px;
    height: 29px
}

.g-intro-card__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: var(--g-intro-image-h);
    color: rgba(0,72,146,.3);
    background: radial-gradient(circle at 20% 20%,rgba(0,72,146,.12),transparent 34%),linear-gradient(135deg,#f1f5f9,#e6edf4)
}

.g-intro-card__placeholder svg {
    width: 78px;
    height: 78px
}

.g-intro-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px,4.4vw,70px) clamp(34px,4.3vw,68px)
}

.g-intro-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px
}

.g-intro-card__icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 15px;
    color: var(--g-intro-primary);
    background: rgba(0,72,146,.07);
    border: 1px solid rgba(0,72,146,.1)
}

.g-intro-card__icon svg {
    width: 22px;
    height: 22px
}

.g-intro-card__period {
    color: var(--g-intro-primary);
    font-size: clamp(19px,1.65vw,27px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: -.02em
}

.g-intro-card__title {
    margin: 0 0 18px!important;
    color: #202630!important;
    font-size: clamp(25px,2.25vw,38px)!important;
    line-height: 1.22!important;
    font-weight: bold!important;
    letter-spacing: -.025em
}

.g-intro-card__body {
    color: #4a515a;
    font-size: clamp(15px,1.25vw,18px);
    line-height: 1.75
}

.g-intro-card__body>:last-child {
    margin-bottom: 0
}

.g-intro-card__body p {
    margin: 0 0 13px
}

.g-intro-card__body .row {
    margin-left: -10px;
    margin-right: -10px
}

.g-intro-card__body .col {
    padding-left: 10px;
    padding-right: 10px
}

.g-intro-card__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 24px;
    padding: 12px 19px;
    border-radius: 999px;
    color: #fff!important;
    background: var(--g-intro-primary);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-decoration: none!important;
    box-shadow: 0 10px 24px rgba(0,72,146,.2);
    transition: transform .25s ease,background .25s ease,box-shadow .25s ease
}

.g-intro-card__button:hover {
    color: #fff!important;
    background: var(--g-intro-accent);
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(237,28,37,.22)
}

.g-intro-card__button svg {
    width: 18px;
    height: 18px
}

.g-intro-slide--image-right .g-intro-card__media {
    order: 2;
    border-radius: 112px 34px 112px 34px
}

.g-intro-slide--image-right .g-intro-card__content {
    order: 1
}

.g-intro-slide--image-right .g-intro-card__media-badge {
    right: auto;
    left: 23px
}

.g-intro--has-arrows .flickity-prev-next-button {
    display: block!important;
    top: 50%!important;
    width: 44px!important;
    height: 44px!important;
    margin: 0!important;
    padding: 0!important;
    border: 1px solid rgba(255,255,255,.72)!important;
    border-radius: 14px!important;
    color: #fff!important;
    background: var(--g-intro-primary)!important;
    box-shadow: 0 10px 26px rgba(0,45,91,.22)!important;
    opacity: 1!important;
    transform: translateY(-50%)!important;
    transition: background .25s ease,transform .25s ease,box-shadow .25s ease!important
}

.g-intro--has-arrows .flickity-prev-next-button:hover {
    background: var(--g-intro-accent)!important;
    transform: translateY(-50%) scale(1.04)!important;
    box-shadow: 0 13px 30px rgba(237,28,37,.22)!important
}

.g-intro--has-arrows .flickity-prev-next-button:focus {
    outline: 2px solid rgba(0,72,146,.22)!important;
    outline-offset: 3px!important
}

.g-intro--has-arrows .flickity-prev-next-button.previous {
    left: -15px!important
}

.g-intro--has-arrows .flickity-prev-next-button.next {
    right: -15px!important
}

.g-intro--has-arrows .flickity-prev-next-button svg {
    display: none!important
}

.g-intro--has-arrows .flickity-prev-next-button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform-origin: center;
    pointer-events: none
}

.g-intro--has-arrows .flickity-prev-next-button.previous:before {
    transform: translate(-38%,-50%) rotate(135deg)
}

.g-intro--has-arrows .flickity-prev-next-button.next:before {
    transform: translate(-62%,-50%) rotate(-45deg)
}

.g-intro--has-arrows .flickity-prev-next-button:disabled {
    opacity: .28!important
}

.g-intro-empty {
    padding: 20px;
    border: 1px dashed #9aa6b2;
    background: #f7f9fb;
    color: #36414d;
    text-align: center
}

.uxb-wrapper .g-intro {
    min-height: 200px
}

@media (max-width: 1100px) {
    .g-intro-card {
        grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
        padding: 22px
    }

    .g-intro-card__content {
        padding: 38px 34px
    }

    .g-intro--has-arrows .flickity-prev-next-button.previous {
        left: 10px!important
    }

    .g-intro--has-arrows .flickity-prev-next-button.next {
        right: 10px!important
    }
}

@media (max-width: 849px) {
    .g-intro {
        padding:50px 0
    }

    .g-intro__inner {
        width: min(calc(100% - 24px),var(--g-intro-max))
    }

    .g-intro__header {
        margin-bottom: 30px
    }

    .g-intro__heading-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px
    }

    .g-intro__heading-icon svg {
        width: 24px;
        height: 24px
    }

    .g-intro-timeline {
        margin-left: -12px;
        margin-right: -12px;
        padding: 0 12px 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    .g-intro-timeline::-webkit-scrollbar {
        display: none
    }

    .g-intro-timeline__track {
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
        gap: 0
    }

    .g-intro-timeline__track:before {
        left: 42px;
        right: 42px
    }

    .g-intro-tab {
        flex: 0 0 142px;
        min-width: 142px;
        padding: 0 7px
    }

    .g-intro-tab__label {
        font-size: 15px
    }

    .g-intro-slide {
        padding: 3px 2px 18px
    }

    .g-intro-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 14px;
        border-radius: 30px
    }

    .g-intro-card__media,.g-intro-slide--image-right .g-intro-card__media {
        order: 1;
        min-height: clamp(230px,62vw,370px);
        height: clamp(230px,62vw,370px);
        border-radius: 24px 72px 24px 72px
    }

    .g-intro-card__image,.g-intro-card__placeholder {
        min-height: 100%;
        height: 100%
    }

    .g-intro-card__content,.g-intro-slide--image-right .g-intro-card__content {
        order: 2;
        padding: 28px 15px 20px
    }

    .g-intro-card__media-badge,.g-intro-slide--image-right .g-intro-card__media-badge {
        left: auto;
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
        border-radius: 17px
    }

    .g-intro-card__media-badge svg {
        width: 25px;
        height: 25px
    }

    .g-intro-card__meta {
        margin-bottom: 14px
    }

    .g-intro-card__icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 13px
    }

    .g-intro-card__title {
        margin-bottom: 13px!important
    }

    .g-intro-card__body {
        line-height: 1.68
    }

    .g-intro--has-arrows .flickity-prev-next-button {
        width: 40px!important;
        height: 40px!important;
        border-radius: 13px!important
    }

    .g-intro--has-arrows .flickity-prev-next-button:before {
        width: 8px;
        height: 8px
    }

    .g-intro--has-arrows .flickity-prev-next-button.previous {
        left: 8px!important
    }

    .g-intro--has-arrows .flickity-prev-next-button.next {
        right: 8px!important
    }
}

@media (max-width: 549px) {
    .g-intro__title {
        font-size:34px!important
    }

    .g-intro-card__period {
        font-size: 19px
    }

    .g-intro-card__title {
        font-size: 25px!important
    }

    .g-intro-card__body {
        font-size: 15px
    }

    .g-intro-card__button {
        width: 100%;
        justify-content: center
    }

    .g-intro--has-arrows .flickity-prev-next-button {
        top: 34%!important
    }
}

@media (prefers-reduced-motion:reduce) {
    .g-intro * {
        scroll-behavior: auto!important;
        transition-duration: .01ms!important;
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important
    }

    .g-intro-card:hover .g-intro-card__image {
        transform: none
    }
}

/* UX Builder preview */
.g-intro--builder-preview {
    padding: 38px 0!important;
    background: #f6f8fb!important;
    min-height: 260px
}

.g-intro--builder-preview .g-intro__inner {
    width: min(calc(100% - 30px),1200px)
}

.g-intro--builder-preview .g-intro__header {
    margin-bottom: 24px
}

.g-intro-builder-help {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid rgba(0,72,146,.12);
    border-radius: 14px;
    background: #fff;
    color: #52606d;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,72,146,.06)
}

.g-intro-builder-help strong {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #004892;
    color: #fff;
    font-size: 11px;
    letter-spacing: .05em
}

.g-intro-builder-items {
    display: grid;
    gap: 18px
}

.g-intro-builder-item {
    width: 100%!important;
    padding: 0!important
}

.g-intro-builder-item .g-intro-card {
    min-height: 330px;
    padding: 18px;
    border-radius: 30px;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    box-shadow: 0 16px 42px rgba(13,43,72,.1)
}

.g-intro-builder-item .g-intro-card__media {
    min-height: 290px;
    border-radius: 24px 70px 24px 70px
}

.g-intro-builder-item .g-intro-card__image {
    min-height: 290px
}

.g-intro-builder-item .g-intro-card__content {
    padding: 30px
}

.g-intro-builder-item .g-intro-card__placeholder {
    min-height: 290px;
    gap: 10px;
    align-content: center;
    font-size: 13px;
    font-weight: bold
}

.g-intro-builder-item .g-intro-card__placeholder svg {
    width: 56px;
    height: 56px
}

.g-intro-builder-description {
    margin: 0 0 12px;
    color: #5b6570;
    white-space: pre-line
}

.g-intro-builder-content:empty:before {
    content: "Có thể thêm Text, Row, Col, Button… vào trong item";
    display: block;
    padding: 12px;
    border: 1px dashed rgba(0,72,146,.25);
    border-radius: 12px;
    color: #7a8793;
    font-size: 13px
}

.g-intro-builder-error {
    padding: 16px;
    border: 1px solid #ed1c25;
    background: #fff5f5;
    color: #a80d14
}

@media(max-width: 849px) {
    .g-intro-builder-help {
        align-items:flex-start;
        flex-direction: column
    }

    .g-intro-builder-item .g-intro-card {
        display: flex;
        min-height: 0
    }

    .g-intro-builder-item .g-intro-card__media {
        min-height: 230px
    }

    .g-intro-builder-item .g-intro-card__content {
        padding: 24px 15px
    }
}