.sx-shortcode{position:relative}.sx-shortcode .sx-container{max-width:1200px;margin-inline:auto}.sx-rich-copy{white-space:normal}.sx-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.sx-gallery img,.sx-master img,.sx-map img,.sx-feature-media img{display:block;width:100%;height:auto}.sx-map{position:relative;overflow:hidden}.sx-location__pin{position:absolute;width:1rem;height:1rem;border-radius:50%;background:#b45309;transform:translate(-50%,-50%)}.sx-boundaries,.sx-facts{display:grid;gap:.75rem}.sx-tab-panel[hidden]{display:none}.sx-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.sx-pricing-table-wrap{overflow-x:auto}.sx-consult-form{position:relative;isolation:isolate}.sx-consult-form__background{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;max-width:none;object-fit:cover}.sx-consult-form input,.sx-consult-form textarea{padding:.6rem;border:1px solid #cbd5e1}.sx-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:767px){.sx-shortcode{overflow:hidden}.sx-shortcode .sx-container{padding-inline:1rem}}

/*
 * Shared tokens sampled directly from the reference page
 * (https://vinhomesland.vn/toa-sa3-vinhomes-smart-city/) via computed styles:
 * body text #444, section heading 25px/400/uppercase, primary CTA #00b3e3,
 * dark navy info band, hotline pill #eee290.
 */
.sx-shortcode {
    --sx-text: #444;
    --sx-heading: #333;
    --sx-navy: #16324a;
    --sx-navy-deep: #0e2032;
    --sx-green: #1c3c33;
    --sx-accent: #00b3e3;
    --sx-accent-dark: #0092bd;
    --sx-gold: #eee290;
    --sx-border: #e5e7eb;
    --sx-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--sx-text);
    font-family: var(--sx-font);
}
.sx-shortcode h2 {
    margin: 0 0 1.75rem;
    color: var(--sx-heading);
    font: 400 25px/1.3 var(--sx-font);
    text-transform: uppercase;
    letter-spacing: .01em;
}
.sx-shortcode--overview,
.sx-shortcode--pricing { padding-block: 3.5rem; }

/* The hero owns its layout independently of the legacy project templates.
   Kiểu 1 · Hiện đại (Modern Luxury Architectural Pavilion). */
.sx-shortcode--hero {
    --hero-surface: rgba(255, 255, 255, 0.94);
    --hero-heading: #0f172a;
    --hero-text: #475569;
    --hero-muted: #64748b;
    --hero-gold: #c5a059;
    --hero-gold-deep: #9a7428;
    --hero-gold-soft: #fbf7ee;
    --hero-gold-gradient: linear-gradient(135deg, #c5a059 0%, #e5c88b 50%, #b88d3d 100%);
    --hero-link: #9a7428;
    --hero-height: clamp(540px, 70vh, 720px);
    --hero-width: 1240px;
    --hero-card-width: 580px;
    --hero-gutter: clamp(28px, 4vw, 44px);
    --hero-title-size: clamp(28px, 3.2vw, 38px);
    --hero-copy-size: 15.5px;
    --hero-copy-leading: 1.75;
    --hero-serif: "Playfair Display", "Cormorant Garamond", "Noto Serif", Georgia, serif;
    --hero-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--hero-text);
    font: var(--hero-copy-size)/var(--hero-copy-leading) var(--hero-sans);
}
.sx-shortcode--hero .sx-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: var(--hero-height);
    padding: clamp(3rem, 6vw, 5.5rem) 0;
    background: #0b1320;
    overflow: hidden;
}
.sx-shortcode--hero .sx-hero__backdrop-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.sx-shortcode--hero .sx-hero__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-shortcode--hero:hover .sx-hero__background {
    transform: scale(1.05);
}
.sx-shortcode--hero .sx-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 19, 32, 0.86) 0%, rgba(11, 19, 32, 0.58) 45%, rgba(11, 19, 32, 0.15) 75%, transparent 100%),
        linear-gradient(180deg, rgba(11, 19, 32, 0.25) 0%, transparent 40%, rgba(11, 19, 32, 0.55) 100%);
    pointer-events: none;
}
.sx-shortcode--hero .sx-hero__scrim-radial {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 65%;
    height: 120%;
    background: radial-gradient(circle at 30% 40%, rgba(197, 160, 89, 0.14), transparent 60%);
    pointer-events: none;
}
.sx-shortcode--hero .sx-container {
    position: relative;
    z-index: 2;
    width: min(var(--hero-width), calc(100% - 2 * 24px));
    max-width: var(--hero-width);
    margin-inline: auto;
    padding: 0;
}
.sx-shortcode--hero .sx-hero__card {
    box-sizing: border-box;
    width: min(var(--hero-card-width), 100%);
    padding: var(--hero-gutter);
    background: var(--hero-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--hero-text);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 24px 48px -12px rgba(11, 19, 32, 0.28),
        0 4px 16px -2px rgba(11, 19, 32, 0.12),
        0 0 0 1px rgba(197, 160, 89, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.sx-shortcode--hero:hover .sx-hero__card {
    box-shadow:
        0 30px 60px -12px rgba(11, 19, 32, 0.35),
        0 6px 20px -2px rgba(11, 19, 32, 0.15),
        0 0 0 1px rgba(197, 160, 89, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 1);
}
.sx-shortcode--hero .sx-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 16px;
    background: rgba(197, 160, 89, 0.1);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hero-gold-deep);
}
.sx-shortcode--hero .sx-hero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hero-gold);
    box-shadow: 0 0 6px var(--hero-gold);
    animation: sxDotPulse 2s ease-in-out infinite;
}
@keyframes sxDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
.sx-shortcode--hero h1 {
    margin: 0 0 14px;
    color: var(--hero-heading);
    font-family: var(--hero-serif);
    font-size: var(--hero-title-size);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-align: left;
    text-transform: none;
    text-wrap: balance;
}
.sx-shortcode--hero .sx-hero__divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
}
.sx-shortcode--hero .sx-hero__divider-line {
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, var(--hero-gold), var(--hero-gold-deep));
    border-radius: 2px;
}
.sx-shortcode--hero .sx-hero__divider-diamond {
    width: 6px;
    height: 6px;
    background: var(--hero-gold);
    transform: rotate(45deg);
}
.sx-shortcode--hero .sx-rich-copy {
    max-width: none;
    margin: 0 0 20px;
    font: inherit;
    font-size: var(--hero-copy-size);
    line-height: var(--hero-copy-leading);
    color: var(--hero-text);
    text-align: left;
}
.sx-shortcode--hero .sx-rich-copy p {
    margin: 0 0 1em;
    font: inherit;
    color: inherit;
}
.sx-shortcode--hero .sx-rich-copy > :last-child { margin-bottom: 0; }
.sx-shortcode--hero .sx-rich-copy strong {
    color: var(--hero-heading);
    font-weight: 600;
}
.sx-shortcode--hero .sx-rich-copy a {
    color: var(--hero-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sx-shortcode--hero .sx-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.sx-shortcode--hero .sx-hero__feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #334155;
    background: rgba(241, 245, 249, 0.85);
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(226, 232, 240, 0.9);
}
.sx-shortcode--hero .sx-hero__feature-tag svg {
    color: var(--hero-gold-deep);
    flex-shrink: 0;
}

.sx-hero-lux .sx-hero-lux__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 18px;
    margin-bottom: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sx-hero-lux .sx-hero-lux__features .sx-hero__feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}
.sx-hero-lux .sx-hero-lux__features .sx-hero__feature-tag svg {
    color: #d4af37;
    flex-shrink: 0;
}
.sx-shortcode--hero .sx-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.sx-shortcode--hero .sx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 28px;
    background: var(--hero-gold-gradient);
    color: #1a140a;
    font-family: var(--hero-sans);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 10px 24px -6px rgba(184, 141, 61, 0.42),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-shortcode--hero .sx-button:hover {
    background: linear-gradient(135deg, #d4ae65 0%, #e8c683 50%, #c5a059 100%);
    color: #1a140a;
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px -6px rgba(184, 141, 61, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.sx-shortcode--hero .sx-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -2px rgba(184, 141, 61, 0.4);
}
.sx-shortcode--hero .sx-button .sx-hero__cta-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.25s ease;
}
.sx-shortcode--hero .sx-button:hover .sx-hero__cta-arrow {
    transform: translateX(4px);
}
.sx-shortcode--hero a:focus-visible {
    outline: 3px solid var(--hero-gold);
    outline-offset: 3px;
}
@media (max-width: 991px) {
    .sx-shortcode--hero {
        --hero-card-width: 520px;
        --hero-height: auto;
    }
    .sx-shortcode--hero .sx-hero {
        padding: 3.5rem 0;
    }
}
@media (max-width: 767px) {
    .sx-shortcode--hero {
        --hero-gutter: 22px;
        --hero-title-size: 25px;
        --hero-copy-size: 15px;
    }
    .sx-shortcode--hero .sx-hero {
        align-items: flex-end;
        min-height: 520px;
        padding: 2rem 0;
    }
    .sx-shortcode--hero .sx-hero__scrim {
        background: linear-gradient(180deg, rgba(11, 19, 32, 0.2) 0%, rgba(11, 19, 32, 0.85) 60%, rgba(11, 19, 32, 0.95) 100%);
    }
    .sx-shortcode--hero .sx-hero__card {
        border-radius: 12px;
    }
    .sx-shortcode--hero .sx-hero__actions .sx-button {
        width: 100%;
        text-align: center;
    }
}
/* Luxury hero variants (hero_style = editorial | cinematic). Own `sx-hero-lux`
   namespace + doubled wrapper class so neither the classic rules above nor legacy
   template overrides (.sx-section h1 !important, .sx-hero, .sx-rich-copy …) apply. */
.sx-shortcode.sx-shortcode--hero .sx-hero-lux {
    --lux-ivory: #f6f1e7;
    --lux-ivory-deep: #ece3d2;
    --lux-ink: #1d1914;
    --lux-muted: #5b5247;
    --lux-gold: #a8844a;
    --lux-gold-deep: #7a5b2c;
    --lux-gold-soft: #d9bf8c;
    --lux-night: #121417;
    --lux-white: #fff;
    --lux-serif: "Cormorant Garamond", "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;
    --lux-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --lux-max: 1200px;
    --lux-pad-x: clamp(20px, 5vw, 72px);
    --lux-pad-y: clamp(56px, 8vw, 120px);
    --lux-gap: clamp(32px, 5vw, 88px);
    --lux-space-1: 8px;
    --lux-space-2: 16px;
    --lux-space-3: 24px;
    --lux-space-4: 40px;
    --lux-title: clamp(2.25rem, 1.35rem + 3.4vw, 4.25rem);
    --lux-title-leading: 1.08;
    --lux-copy: clamp(1rem, .96rem + .2vw, 1.125rem);
    --lux-copy-leading: 1.75;
    --lux-rule: 1px;
    --lux-ease: cubic-bezier(.2, .7, .2, 1);
    --lux-duration: 220ms;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: block;
    width: min(var(--lux-max), 100%);
    min-height: 0;
    margin: 0 auto;
    padding: var(--lux-pad-y) var(--lux-pad-x);
    overflow: hidden;
    font: 400 var(--lux-copy)/var(--lux-copy-leading) var(--lux-sans);
    text-align: left;
}
.sx-shortcode.sx-shortcode--hero.sx-shortcode--full-width .sx-hero-lux { width: 100%; }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux *,
.sx-shortcode.sx-shortcode--hero .sx-hero-lux *::before,
.sx-shortcode.sx-shortcode--hero .sx-hero-lux *::after { box-sizing: border-box; }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--lux-max);
    margin: 0 auto;
}
.sx-shortcode.sx-shortcode--hero.sx-shortcode--full-width .sx-hero-lux .sx-hero-lux__inner { max-width: none; }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__content {
    min-width: 0;
    overflow-wrap: anywhere;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__rule {
    display: block;
    width: 56px;
    height: var(--lux-rule);
    margin: 0 0 var(--lux-space-3);
    background: var(--lux-gold);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__title {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: var(--lux-serif);
    font-size: var(--lux-title);
    font-style: normal;
    font-weight: 500;
    line-height: var(--lux-title-leading);
    letter-spacing: -.01em;
    text-align: left;
    text-transform: none;
    text-wrap: balance;
    hyphens: auto;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__copy {
    max-width: 38rem;
    margin: var(--lux-space-3) 0 0;
    color: inherit;
    font: inherit;
    white-space: normal;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__copy p {
    margin: 0 0 1em;
    color: inherit;
    font: inherit;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__copy > :last-child { margin-bottom: 0; }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__copy strong { font-weight: 700; }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__copy a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lux-space-2);
    min-width: 44px;
    min-height: 48px;
    max-width: 100%;
    margin: var(--lux-space-4) 0 0;
    padding: 12px 28px;
    border: var(--lux-rule) solid transparent;
    border-radius: 0;
    font: 600 .875rem/1.4 var(--lux-sans);
    letter-spacing: .14em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    transition: background-color var(--lux-duration) var(--lux-ease), color var(--lux-duration) var(--lux-ease), border-color var(--lux-duration) var(--lux-ease);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta-arrow {
    display: inline-block;
    transition: transform var(--lux-duration) var(--lux-ease);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta:hover .sx-hero-lux__cta-arrow,
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta:focus-visible .sx-hero-lux__cta-arrow { transform: translateX(4px); }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta:focus-visible,
.sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__copy a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Editorial: ivory page, serif headline left, project image right, muted gold lines. */
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial {
    background: var(--lux-ivory);
    color: var(--lux-muted);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial::before {
    content: "";
    position: absolute;
    inset: var(--lux-space-3);
    z-index: 0;
    border: var(--lux-rule) solid rgba(168, 132, 74, .45);
    pointer-events: none;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lux-gap);
    align-items: center;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__title { color: var(--lux-ink); }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial.sx-hero-lux--no-media .sx-hero-lux__content { max-width: 48rem; }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__copy a { color: var(--lux-gold-deep); }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__cta {
    background: var(--lux-ink);
    border-color: var(--lux-ink);
    color: var(--lux-ivory);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__cta:hover,
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__cta:focus-visible {
    background: var(--lux-gold-deep);
    border-color: var(--lux-gold-deep);
    color: var(--lux-white);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__cta:focus-visible { outline-color: var(--lux-ink); }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__media {
    position: relative;
    min-width: 0;
    margin: 0 var(--lux-space-2) var(--lux-space-2) 0;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__media::after {
    content: "";
    position: absolute;
    inset: var(--lux-space-2) calc(-1 * var(--lux-space-2)) calc(-1 * var(--lux-space-2)) var(--lux-space-2);
    z-index: -1;
    border: var(--lux-rule) solid var(--lux-gold);
    pointer-events: none;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--lux-ivory-deep);
}
@media (min-width: 768px) {
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial.sx-hero-lux--has-media .sx-hero-lux__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial .sx-hero-lux__image { aspect-ratio: 4 / 5; }
}

/* Cinematic: full-bleed image under a dark scrim so white type stays legible. */
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic {
    display: flex;
    align-items: flex-end;
    min-height: clamp(520px, 86vh, 880px);
    background: radial-gradient(120% 90% at 20% 100%, #2a2620 0%, var(--lux-night) 60%);
    color: rgba(255, 255, 255, .9);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic.sx-hero-lux--has-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(10, 11, 13, .72) 0%, rgba(10, 11, 13, .38) 55%, rgba(10, 11, 13, .2) 100%),
        linear-gradient(0deg, rgba(10, 11, 13, .88) 0%, rgba(10, 11, 13, .35) 55%, rgba(10, 11, 13, .25) 100%);
    pointer-events: none;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__content {
    max-width: 46rem;
    text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__rule { background: var(--lux-gold-soft); }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__title {
    color: var(--lux-white);
    font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);
    font-weight: 400;
    line-height: 1.04;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__copy a { color: var(--lux-gold-soft); }
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__cta {
    background: var(--lux-gold-soft);
    border-color: var(--lux-gold-soft);
    color: var(--lux-night);
    text-shadow: none;
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__cta:hover,
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__cta:focus-visible {
    background: var(--lux-white);
    border-color: var(--lux-white);
    color: var(--lux-night);
}
.sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic .sx-hero-lux__cta:focus-visible { outline-color: var(--lux-white); }
@media (max-width: 767px) {
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux--cinematic { min-height: clamp(480px, 80vh, 720px); }
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux--editorial::before { inset: var(--lux-space-1); }
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta,
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta-arrow { transition: none; }
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta:hover .sx-hero-lux__cta-arrow,
    .sx-shortcode.sx-shortcode--hero .sx-hero-lux .sx-hero-lux__cta:focus-visible .sx-hero-lux__cta-arrow { transform: none; }
}

/* Overview: gallery left, heading + copy + spec list right (matches the
   reference's two-column "Tổng quan" layout) via grid placement only, no
   markup change — the DOM order stays title -> copy -> gallery -> specs. */
.sx-shortcode--overview .sx-rich-copy,
.sx-shortcode--overview .sx-facts dd { font-size: 15px; line-height: 1.65; }
.sx-shortcode--overview .sx-container {
    display: grid;
    /* Matches the reference's Avia column split: av_three_fifth (gallery)
       and av_two_fifth (copy), roughly 60/40. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2.5rem;
    align-items: start;
}
.sx-shortcode--overview h2 { grid-column: 2; grid-row: 1; margin-bottom: 1rem; }
.sx-shortcode--overview .sx-rich-copy { grid-column: 2; grid-row: 2; margin-bottom: 1.5rem; }
.sx-shortcode--overview .sx-facts { grid-column: 2; grid-row: 3; }
.sx-shortcode--overview .sx-gallery {
    grid-column: 1;
    grid-row: 1 / 4;
    display: block;
}
.sx-shortcode--overview .sx-gallery__big {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: #f2f2f2;
}
.sx-shortcode--overview .sx-gallery__big img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.sx-shortcode--overview .sx-gallery__big img.is-swapping { opacity: .6; }
.sx-shortcode--overview .sx-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}
.sx-shortcode--overview .sx-gallery__thumb {
    flex: 0 0 calc(25% - .375rem);
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    background: none;
    overflow: hidden;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s ease, border-color .2s ease;
}
.sx-shortcode--overview .sx-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-shortcode--overview .sx-gallery__thumb[aria-current="true"] { border-color: var(--sx-accent); opacity: 1; }
.sx-shortcode--overview .sx-gallery__thumb:hover,
.sx-shortcode--overview .sx-gallery__thumb:focus-visible { opacity: 1; }
.sx-shortcode--overview .sx-facts { gap: .85rem; }
.sx-shortcode--overview .sx-facts > div { display: block; }
.sx-shortcode--overview .sx-facts dt {
    display: inline;
    font-weight: 700;
    color: var(--sx-heading);
}
.sx-shortcode--overview .sx-facts dt::after { content: ": "; }
.sx-shortcode--overview .sx-facts dd { display: inline; margin: 0; }
@media (max-width: 900px) {
    .sx-shortcode--overview .sx-container { grid-template-columns: 1fr; }
    .sx-shortcode--overview h2,
    .sx-shortcode--overview .sx-rich-copy,
    .sx-shortcode--overview .sx-facts,
    .sx-shortcode--overview .sx-gallery { grid-column: 1; }
    .sx-shortcode--overview .sx-gallery { grid-row: auto; margin-bottom: 1.5rem; }
}

/* Location: the reference (av_section_2, "modern-quote modern-centered" heading)
   is a plain light section with a centered heading + short centered underline,
   then a two-column body: the write-up in a 2/3 column, the boundary list as a
   plain bulleted 1/3 column. No dark band, no map card in this section. */
.sx-shortcode--location {
    padding-block: 4.5rem;
}
/* --sx-location-text is declared as an inline custom property on the inner
   <section class="sx-location"> (see location.blade.php), not on this outer
   wrapper div (added by index.blade.php). A custom property only cascades to
   descendants of where it's declared, so this rule must target .sx-location
   itself (or a descendant of it) to see it — targeting the wrapper here would
   silently fall back to the default every time. */
.sx-shortcode--location .sx-location {
    color: var(--sx-location-text, var(--sx-text));
    position: relative;
}


/* Header trung tâm thanh thoát */
.sx-shortcode--location .sx-location__header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 3rem;
}

.sx-shortcode--location .sx-location__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 9999px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    margin-bottom: 1.25rem;
}

.sx-shortcode--location .sx-location__eyebrow i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D4AF37;
    display: inline-block;
}

.sx-shortcode--location .sx-location__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--sx-location-text, var(--sx-heading));
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
    text-align: center;
}

.sx-shortcode--location .sx-location__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto;
    max-width: 220px;
}

.sx-shortcode--location .sx-location__divider::before,
.sx-shortcode--location .sx-location__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6));
}
.sx-shortcode--location .sx-location__divider::after {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.6), transparent);
}

.sx-shortcode--location .sx-location__divider span {
    color: #D4AF37;
    font-size: 0.85rem;
    line-height: 1;
}

/* Lưới 2 cột: Nội dung & Tiếp giáp tứ cận */
.sx-shortcode--location .sx-location__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: stretch;
    margin-bottom: 2.75rem;
}

.sx-shortcode--location .sx-location__grid--single {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin-inline: auto;
}

.sx-shortcode--location .sx-location__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sx-shortcode--location .sx-rich-copy {
    font-size: 1.05rem;
    line-height: 1.8;
    color: inherit;
    opacity: 0.92;
}

.sx-shortcode--location .sx-rich-copy p {
    margin: 0 0 1.15rem;
}

.sx-shortcode--location .sx-rich-copy p:last-child {
    margin-bottom: 0;
}

/* Thẻ Tiếp giáp tứ cận */
.sx-shortcode--location .sx-location__aside {
    display: flex;
    flex-direction: column;
}

.sx-shortcode--location .sx-location__boundaries-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Khi không có nền panel (nền sáng mặc định) */
.sx-shortcode--location .sx-location:not([style*="background"]) .sx-location__boundaries-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.sx-shortcode--location .sx-location__boundaries-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.sx-shortcode--location .sx-boundaries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    flex: 1;
}

.sx-shortcode--location .sx-boundary-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.sx-shortcode--location .sx-location:not([style*="background"]) .sx-boundary-item {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.sx-shortcode--location .sx-boundary-item:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.45);
}

.sx-shortcode--location .sx-boundary-item__dir {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4AF37;
    display: inline-block;
}

.sx-shortcode--location .sx-boundary-item__text {
    font-size: 0.88rem;
    line-height: 1.45;
    color: inherit;
    font-weight: 500;
    opacity: 0.95;
}

/* Khung Bản đồ kiến trúc nổi bật */
.sx-shortcode--location .sx-map {
    margin-top: 1rem;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.sx-shortcode--location .sx-map__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0F172A;
}

.sx-shortcode--location .sx-map__frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sx-shortcode--location .sx-map:hover .sx-map__frame img {
    transform: scale(1.02);
}

/* Huy hiệu bản đồ */
.sx-shortcode--location .sx-map__badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 5;
    pointer-events: none;
}

/* Ghim vị trí (Map Pins) cao cấp với hiệu ứng sóng radar */
.sx-shortcode--location .sx-location__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sx-shortcode--location .sx-location__pin-point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #D4AF37;
    border: 2.5px solid #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: transform 0.25s ease, background 0.25s ease;
}

.sx-shortcode--location .sx-location__pin-point i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0F172A;
    display: block;
}

.sx-shortcode--location .sx-location__pin-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.8);
    background: rgba(212, 175, 55, 0.2);
    animation: sxLocationPinPulse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes sxLocationPinPulse {
    0% { transform: scale(0.8); opacity: 0.9; }
    70% { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

.sx-shortcode--location .sx-location__pin:hover .sx-location__pin-point {
    transform: scale(1.25);
    background: #F3E5AB;
}

/* Nhãn ghim vị trí (Pin Label) */
.sx-shortcode--location .sx-location__pin-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0F172A;
    color: #FFFFFF;
    border: 1px solid rgba(212, 175, 55, 0.45);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 15;
    opacity: 0.92;
}

.sx-shortcode--location .sx-location__pin-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0F172A transparent transparent transparent;
}

.sx-shortcode--location .sx-location__pin:hover .sx-location__pin-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    border-color: #D4AF37;
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.3);
}

@media (max-width: 991px) {
    .sx-shortcode--location .sx-location__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .sx-shortcode--location .sx-boundaries-grid {
        grid-template-columns: 1fr;
    }
    .sx-shortcode--location .sx-map__badge {
        display: none;
    }
}

/* Master plan: give the section heading the same colored-banner treatment
   the reference uses to introduce each floor-plan view, and present the
   repeater tabs as an underlined nav beneath it. */
.sx-shortcode--master-plan { padding-block: 0 3.5rem; overflow-x: hidden; }
.sx-shortcode--master-plan h2 {
    /* Boxed by default: banner stays confined to .sx-container's 1200px width
       so "layout_width=container" is honored (see .sx-shortcode--full-width
       below for the viewport-bleed variant used in "full" mode). */
    background: var(--sx-green);
    color: #fff;
    margin: 0 0 1.5rem;
    padding: 1.5rem;
}
.sx-shortcode--master-plan.sx-shortcode--full-width h2 {
    padding: 1.5rem calc(50vw - 600px + 1.5rem);
    margin-inline: calc(50% - 50vw);
    width: 100vw;
}
.sx-shortcode--master-plan .sx-tabs {
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--sx-border);
}
.sx-shortcode--master-plan .sx-tabs [role="tab"] {
    padding: .75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--sx-text);
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .02em;
    cursor: pointer;
}
.sx-shortcode--master-plan .sx-tabs [aria-selected="true"] {
    color: var(--sx-navy);
    border-bottom-color: var(--sx-accent);
}
.sx-shortcode--master-plan .sx-tab-panel { text-align: center; }
.sx-shortcode--master-plan .sx-tab-panel img { border-radius: 4px; margin-inline: auto; }
.sx-shortcode--master-plan .sx-tab-panel p { margin-top: .75rem; color: #6b6b6b; font-size: 13px; }

/* Feature media: consecutive shortcode instances sit as siblings under the
   same content column. The compiler leaves the newline the visual builder
   saves between shortcodes (see ShortcodeParserService::serialize()) intact
   in the rendered HTML, and that whitespace text node renders as a visible
   gap between inline-block siblings — enough on some viewports to push a
   3rd 33.3333%-wide card onto its own row. Floats aren't part of the inline
   formatting context, so whitespace between them collapses to nothing,
   giving an exact 3-up row that wraps past 3 without that gap. Every
   shortcode wrapper clears floats by default so unrelated sections below a
   feature-media run always start on their own line; feature-media opts back
   out so runs of it stay side by side. A single instance with no same-type
   neighbor before or after fills the whole row instead of staying pinned to
   33%. */
.project-content-shortcode { display: flow-root; }
.sx-shortcode { clear: both; }
.sx-shortcode--feature-media {
    float: left;
    clear: none;
    width: 33.3333%;
    box-sizing: border-box;
    padding: 2rem .75rem 2rem;
    margin: 0;
}
.sx-shortcode--feature-media:not(.sx-shortcode--feature-media + .sx-shortcode--feature-media):not(:has(+ .sx-shortcode--feature-media)) {
    width: 100%;
}
.sx-shortcode--feature-media .sx-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.5rem;
    border: 1px solid var(--sx-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(20, 30, 40, .06);
    text-align: center;
}
/* Scoped to .sx-container's direct-child <p> (the optional group_title) only.
   The unscoped "p:first-child" descendant selector used to also match the
   .sx-rich-copy body's own first <p> whenever its rich-text content happened
   to be wrapped in a real <p> tag (not all saved content is: see the
   BaseHelper::clean()/nl2br() branch in shortcodes-project.php), collapsing
   that first sentence of body copy into an invisible circle badge. */
.sx-shortcode--feature-media .sx-container > p:first-child {
    order: -2;
    margin: 0 auto 1rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sx-navy);
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.sx-shortcode--feature-media .sx-container > p:first-child::before {
    content: "\2726";
    color: #fff;
    font-size: 20px;
    line-height: 1;
}
.sx-shortcode--feature-media h2 {
    order: -1;
    font-size: 17px;
    margin-bottom: .85rem;
}
.sx-shortcode--feature-media .sx-rich-copy {
    order: 2;
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sx-text);
    flex: 1;
}
.sx-shortcode--feature-media img { order: 1; margin-top: 1.25rem; border-radius: 4px; }
/* "Ảnh bên phải" (image_position=right) has no visual meaning in this card's
   vertical stack, so it's repurposed as "image after the copy" (image_position=left,
   the default, keeps the image above the copy per the order values above). */
.sx-feature-media--right img { order: 3; }
@media (max-width: 900px) {
    .sx-shortcode--feature-media { float: none; width: 100%; padding: 0 0 1.5rem; }
}

/* Pricing table: dark navy header row, readable row labels, hairline rows. */
.sx-pricing-table-wrap table { width: 100%; border-collapse: collapse; }
.sx-pricing-table-wrap thead tr { background: var(--sx-navy); }
.sx-pricing-table-wrap thead th {
    padding: 1rem 1.5rem;
    color: #fff;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .02em;
}
.sx-pricing-table-wrap tbody th,
.sx-pricing-table-wrap tbody td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--sx-border);
    text-align: left;
}
.sx-pricing-table-wrap tbody th { color: var(--sx-text); font-weight: 400; }
.sx-pricing-table-wrap tbody tr:hover { background: #f8fafb; }
.sx-shortcode--pricing p { margin-top: 1.25rem; color: #8a8a8a; font-size: 13px; }

/* Consult form: full-bleed photo with a dark scrim so the reference's white
   uppercase heading and inline field row stay legible over any background
   image an admin picks. */
/* padding-block (not just background) lives on the inner .sx-consult-form,
   not this outer wrapper, so an admin-picked background_color (applied as an
   inline style on .sx-consult-form; see consult-form.blade.php) covers the
   full section including its vertical breathing room instead of leaving the
   wrapper's own background peeking through as an unstyled band above/below. */
.sx-consult-form {
    background: var(--sx-navy-deep);
    padding-block: 4rem;
}
.sx-shortcode--consult-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgba(10, 20, 32, .55), rgba(10, 20, 32, .8));
}
.sx-shortcode--consult-form h2 { color: #fff; text-align: center; margin-bottom: .5rem; }
.sx-shortcode--consult-form .sx-rich-copy { color: #d7e2ea; text-align: center; margin-bottom: 1.75rem; }
.sx-consult-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 960px;
    margin-inline: auto;
}
.sx-consult-form label {
    flex: 1 1 200px;
    display: grid;
    gap: .35rem;
    color: #fff;
    font-size: 13px;
}
.sx-consult-form label:has(textarea) { flex-basis: 100%; }
.sx-consult-form input,
.sx-consult-form textarea {
    padding: .85rem 1rem;
    border: none;
    border-radius: 3px;
    background: #fff;
    color: #222;
    font: inherit;
}
.sx-consult-form label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    flex-basis: 100%;
}
.sx-consult-form label:has(input[type="checkbox"]) input { flex: none; width: auto; }
.sx-consult-form button[type="submit"] {
    flex-basis: 100%;
    justify-self: start;
    padding: .9rem 2.5rem;
    background: var(--sx-accent);
    color: #fff;
    border: none;
    border-radius: 3px;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    width: max-content;
}
.sx-consult-form button[type="submit"]:hover { background: var(--sx-accent-dark); }
.sx-consult-form button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 767px) {
    .sx-shortcode { overflow: hidden; }
    .sx-shortcode .sx-container { padding-inline: 1rem; }
    .sx-shortcode--master-plan h2 { padding-inline: 1.5rem; }
}

/* "layout_width" = full lets a section's content span the full section width
   instead of the default 1200px boxed container (see 'layout_width' admin field
   in shortcodes-project.php and its `.sx-shortcode--full-width` wrapper class). */
.sx-shortcode--full-width .sx-container {
    max-width: none;
}
.sx-shortcode--hero.sx-shortcode--full-width .sx-container {
    width: calc(100% - 2 * var(--hero-gutter));
    max-width: none;
}

/* Consult-form's background image is a section-level decorative element
   (siblings .sx-container, not a child of it), so it needs the same
   container/full-width confinement applied separately from .sx-container. */
.sx-shortcode--consult-form .sx-consult-form__background {
    left: 50%;
    width: min(1200px, 100%);
    transform: translateX(-50%);
}
.sx-shortcode--consult-form.sx-shortcode--full-width .sx-consult-form__background {
    left: 0;
    width: 100%;
    transform: none;
}

/* Per-shortcode entrance animation (settings: animation, animation_duration,
   animation_delay). Hidden only after JS marks the page (`sx-anim-js`), so no-JS
   and reduced-motion visitors always see the content. */
.sx-anim-js [data-sx-anim] {
    transition: opacity var(--sx-anim-dur, 600ms) ease var(--sx-anim-delay, 0ms),
        transform var(--sx-anim-dur, 600ms) cubic-bezier(.2, .7, .2, 1) var(--sx-anim-delay, 0ms);
}
.sx-anim-js [data-sx-anim]:not(.is-in) { opacity: 0; }
.sx-anim-js [data-sx-anim="fade-up"]:not(.is-in) { transform: translate3d(0, 32px, 0); }
.sx-anim-js [data-sx-anim="fade-down"]:not(.is-in) { transform: translate3d(0, -32px, 0); }
.sx-anim-js [data-sx-anim="fade-left"]:not(.is-in) { transform: translate3d(32px, 0, 0); }
.sx-anim-js [data-sx-anim="fade-right"]:not(.is-in) { transform: translate3d(-32px, 0, 0); }
.sx-anim-js [data-sx-anim="zoom-in"]:not(.is-in) { transform: scale(.92); }
.sx-anim-js [data-sx-anim="zoom-out"]:not(.is-in) { transform: scale(1.08); }
.sx-anim-js [data-sx-anim].is-in { opacity: 1; transform: none; }

/* Per-shortcode image styling (settings image_*; see functions/shortcodes-image-style.php).
   Static properties arrive inline; filter/hover use variables so the hover state can swap
   them. `scale`/`translate` compose with existing transforms (e.g. translateX(-50%)). */
.sx-shortcode img[data-sx-img-filter] { filter: var(--sx-img-filter, none); }
.sx-shortcode img[data-sx-img-hover] { transition: scale .5s ease, translate .3s ease, filter .4s ease, box-shadow .3s ease; }
.sx-shortcode:hover img[data-sx-img-filter] { filter: var(--sx-img-filter-hover, var(--sx-img-filter, none)); }
.sx-shortcode:hover img[data-sx-img-hover="zoom"] { scale: 1.05; }
.sx-shortcode:hover img[data-sx-img-hover="lift"] { translate: 0 -6px; box-shadow: 0 18px 40px rgba(15, 23, 42, .22); }
.sx-shortcode--hero .sx-hero:has(.sx-hero__background[data-sx-img-hover="zoom"]),
.sx-shortcode--consult-form .sx-consult-form:has(.sx-consult-form__background[data-sx-img-hover="zoom"]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .sx-shortcode img[data-sx-img-hover] { transition: none; }
    .sx-shortcode:hover img[data-sx-img-hover="zoom"],
    .sx-shortcode:hover img[data-sx-img-hover="lift"] { scale: none; translate: none; }
}