/* DreamCode Hoàng Hùng Intro – 1.3.0 (Thành Vinh SVG reference).
 * Component-scoped styles: no generic Elementor selectors are mutated.
 */
.dc-hhi,
.dc-hhi *,
.dc-hhi *::before,
.dc-hhi *::after { box-sizing: border-box; }

.dc-hhi {
    --dc-hhi-image-gap: 24px;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 852px;
    padding: 40px 24px;
    margin: 0;
    color: #091b54;
    background: #fff url('../images/intro-background.webp') center center / cover no-repeat;
}

/* Visibility toggle must take precedence over Elementor generated background selectors. */
.dc-hhi.dc-hhi--no-bg { background-image: none !important; }

.dc-hhi__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    width: 100%;
    max-width: 1328px;
    min-width: 0;
    margin: 0 auto;
}

.dc-hhi__content,
.dc-hhi__media {
    min-width: 0;
    max-width: 100%;
}

.dc-hhi__content { flex: 1 1 47%; }
.dc-hhi__media {
    position: relative;
    flex: 0 1 48.2%;
    display: flex;
    flex-direction: column;
    gap: var(--dc-hhi-image-gap);
    isolation: isolate;
    min-width: 0;
}

.dc-hhi__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 17px;
    color: #c8010a;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.dc-hhi__eyebrow::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.dc-hhi__heading {
    margin: 0 0 28px;
    color: #091b54;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 40px;
    font-weight: 750;
    line-height: 1.43;
    letter-spacing: -.016em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.dc-hhi__body {
    min-width: 0;
    max-width: 100%;
    color: #303030;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.44;
    overflow-wrap: anywhere;
}
.dc-hhi__body > :first-child { margin-top: 0; }
.dc-hhi__body > :last-child { margin-bottom: 0; }
.dc-hhi__body p { margin: 0; }
.dc-hhi__body p + p { margin-top: 18px; }
.dc-hhi__body :is(img, video, iframe, table, pre, code) { max-width: 100%; }
.dc-hhi__body :is(img, video, iframe) { height: auto; }
.dc-hhi__body :is(table, pre) { display: block; overflow-x: auto; }

.dc-hhi__cta { margin-top: 36px; max-width: 100%; }

/* Guard against Elementor Global Styles on anchors and buttons, including hover. */
.dc-hhi a.dc-hhi__button,
.dc-hhi span.dc-hhi__button,
.elementor .dc-hhi a.dc-hhi__button,
.elementor .dc-hhi span.dc-hhi__button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    min-width: 191px;
    max-width: 100%;
    padding: 3px 3px 3px 23px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: #080977;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .3s cubic-bezier(.2,.7,.3,1), color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.dc-hhi span.dc-hhi__button,
.elementor .dc-hhi span.dc-hhi__button { cursor: default; }
.dc-hhi a.dc-hhi__button:is(:hover, :focus-visible, :active),
.elementor .dc-hhi a.dc-hhi__button:is(:hover, :focus-visible, :active) {
    background-color: #fff;
    color: #080977;
    border-color: #080977;
    text-decoration: none;
}
.dc-hhi a.dc-hhi__button:focus-visible { outline: 2px solid #080977; outline-offset: 3px; }
.dc-hhi .dc-hhi__button-text {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* One fixed-size icon circle, two independent Elementor icon controls.
 * The two glyph layers crossfade/slide without rotating the wrapper or changing layout.
 */
.dc-hhi .dc-hhi__button-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #080977;
    line-height: 1;
    font-size: 14px;
    isolation: isolate;
    transition: background-color .3s ease, color .3s ease;
}
.dc-hhi a.dc-hhi__button:is(:hover, :focus-visible, :active) .dc-hhi__button-icon {
    background-color: #080977;
    color: #fff;
}
.dc-hhi .dc-hhi__button-icon-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1);
    will-change: auto;
}
.dc-hhi .dc-hhi__button-icon-state--normal { opacity: 1; transform: translateX(0); }
.dc-hhi .dc-hhi__button-icon-state--hover { opacity: 0; transform: translateX(-5px); }
.dc-hhi a.dc-hhi__button:is(:hover, :focus-visible, :active) .dc-hhi__button-icon-state--normal {
    opacity: 0;
    transform: translateX(5px);
}
.dc-hhi a.dc-hhi__button:is(:hover, :focus-visible, :active) .dc-hhi__button-icon-state--hover {
    opacity: 1;
    transform: translateX(0);
}
.dc-hhi .dc-hhi__button-icon-state :is(svg, i) {
    display: block;
    width: 1em;
    height: 1em;
    max-width: 100%;
    font-size: inherit;
    color: inherit;
}
.dc-hhi .dc-hhi__button-icon-state i::before { display: block; line-height: 1; }
.dc-hhi .dc-hhi__button-icon-state svg[data-dc-hhi-arrow] { fill: none; stroke: none; }

/* The two images and floating brand mark are independent editable media. */
.dc-hhi__picture {
    display: block;
    position: relative;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 288px;
    border-radius: 24px;
    background-color: #e7edf1;
    overflow: hidden; /* intentional: only the media crop owner */
}
.dc-hhi__picture--top { align-self: center; width: 85.625%; }
.dc-hhi__picture--bottom { align-self: stretch; }
.dc-hhi img.dc-hhi__image,
.elementor .dc-hhi img.dc-hhi__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}
.dc-hhi__brand {
    position: absolute;
    z-index: 2;
    top: calc(50% - 0px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    max-width: 45%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / .03);
}
.dc-hhi .dc-hhi__brand-img,
.elementor .dc-hhi .dc-hhi__brand-img {
    display: block;
    width: 73%;
    max-width: 90%;
    height: auto;
    object-fit: contain;
}

/* Start state exists in markup before JavaScript – never flash final state. */
.dc-hhi--motion.dc-hhi--pending .dc-hhi__motion-item {
    opacity: 0;
    transform: translate3d(0, var(--dc-hhi-distance, 22px), 0);
    transition: opacity var(--dc-hhi-duration, 700ms) cubic-bezier(.2,.72,.2,1),
                transform var(--dc-hhi-duration, 700ms) cubic-bezier(.2,.72,.2,1);
    transition-delay: calc(var(--dc-hhi-delay, 60ms) + var(--dc-hhi-item-index, 0) * var(--dc-hhi-stagger, 90ms));
    animation: dc-hhi-reveal-failsafe 0s 2.6s forwards;
}
.dc-hhi--fade-left.dc-hhi--pending .dc-hhi__motion-item { transform: translate3d(var(--dc-hhi-distance, 22px), 0, 0); }
.dc-hhi--fade-right.dc-hhi--pending .dc-hhi__motion-item { transform: translate3d(calc(var(--dc-hhi-distance, 22px) * -1), 0, 0); }
.dc-hhi--fade.dc-hhi--pending .dc-hhi__motion-item { transform: none; }
.dc-hhi--soft-zoom.dc-hhi--pending .dc-hhi__motion-item { transform: scale(.975); }
.dc-hhi--motion.is-visible .dc-hhi__motion-item,
.dc-hhi--motion:not(.dc-hhi--pending) .dc-hhi__motion-item {
    opacity: 1;
    transform: none;
    animation: none;
}
@keyframes dc-hhi-reveal-failsafe { to { opacity: 1; transform: none; } }
.elementor-editor-active .dc-hhi--motion .dc-hhi__motion-item,
.elementor-editor-preview .dc-hhi--motion .dc-hhi__motion-item {
    opacity: 1;
    transform: none;
    animation: none;
}

@media (max-width: 1536px) {
    .dc-hhi__heading { font-size: clamp(30px, 2.75vw, 40px); }
    .dc-hhi__body { font-size: clamp(16px, 1.32vw, 20px); }
    .dc-hhi__eyebrow { font-size: clamp(19px, 1.85vw, 28px); }
}
@media (max-width: 1280px) {
    .dc-hhi { min-height: 0; }
    .dc-hhi__inner { gap: 36px; }
    .dc-hhi__heading { font-size: clamp(29px, 2.8vw, 36px); line-height: 1.32; }
    .dc-hhi__body { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55; }
    .dc-hhi__picture { height: clamp(220px, 22.5vw, 288px); }
}
@media (max-width: 1024px) {
    .dc-hhi { padding: 58px 28px; }
    .dc-hhi__inner { flex-direction: column; gap: 48px; max-width: 820px; }
    .dc-hhi__content, .dc-hhi__media {
        flex: 0 1 auto !important;
        width: 100%;
        max-width: 100%;
    }
    .dc-hhi__heading { font-size: clamp(30px, 4vw, 40px); }
    .dc-hhi__body { font-size: clamp(16px, 1.95vw, 19px); }
    .dc-hhi__picture { height: clamp(240px, 35vw, 288px); }
    .dc-hhi__brand { width: 110px; height: 110px; }
}
@media (max-width: 767px) {
    .dc-hhi { padding: 42px 18px; }
    .dc-hhi__inner { gap: 32px; }
    .dc-hhi-mobile-image-before .dc-hhi__media { order: -1; }
    .dc-hhi-mobile-image-after .dc-hhi__media { order: 2; }
    .dc-hhi__eyebrow { font-size: 17px; margin-bottom: 14px; }
    .dc-hhi__heading { font-size: clamp(26px, 7.2vw, 38px); line-height: 1.2; margin-bottom: 20px; }
    .dc-hhi__body { font-size: 15px; line-height: 1.65; }
    .dc-hhi__cta { margin-top: 26px; }
    .dc-hhi__picture { height: clamp(144px, 43vw, 250px); border-radius: 16px; }
    .dc-hhi__picture--top { width: 88%; }
    .dc-hhi__media { --dc-hhi-image-gap: 16px; }
    .dc-hhi__brand { width: 86px; height: 86px; }
    .dc-hhi a.dc-hhi__button,
    .dc-hhi span.dc-hhi__button,
    .elementor .dc-hhi a.dc-hhi__button,
    .elementor .dc-hhi span.dc-hhi__button { min-height: 48px; }
}
@media (max-width: 360px) {
    .dc-hhi { padding-inline: 15px; }
    .dc-hhi__heading { font-size: 26px; }
    .dc-hhi__brand { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-hhi--motion .dc-hhi__motion-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .dc-hhi .dc-hhi__button,
    .dc-hhi .dc-hhi__button-icon,
    .dc-hhi .dc-hhi__button-icon-state { transition: none !important; }
}