.elementor-481 .elementor-element.elementor-element-7bd2f4f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-78b293a *//* ===================================================================
   SPC VIETNAM - UNIFIED CORE STYLES (REVISED)
   =================================================================== */

/* --- Core Brand & Font Styles --- */
:root {
    --brand-yellow: #fac456;
    --brand-blue-dark: #063c96;
    --brand-blue-medium: #496d9c;
    --brand-blue-text: #153b63;
    --brand-off-white: #f1f6f5;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--brand-off-white);
    color: var(--brand-blue-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Anti-FOUC (Flash of Unstyled Content) --- */
/* For this to work perfectly, a small part of this needs to be in the <head>. See Section 2 below. */
#spc-app {
    visibility: hidden;
    opacity: 0;
}
html.tailwind-ready.fonts-ready #spc-app {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s ease;
}
/* Prevents transitions from running before Tailwind has loaded */
html:not(.tailwind-ready) #spc-app * {
    transition: none !important;
}

/* --- Typography & Section Headers --- */
.section-headline {
    color: var(--brand-blue-dark);
    font-weight: 800;
    letter-spacing: -0.025em;
    position: relative;
    padding-bottom: 0.75rem;
    /* Ensures the line doesn't sit too far away on multi-line headers */
    display: inline-block;
}
.section-headline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background-color: var(--brand-yellow);
    border-radius: 2px;
}
.text-center .section-headline::after {
    left: 50%;
    transform: translateX(-50%);
}

/* --- Components & Cards --- */
.btn-glow:hover {
    box-shadow: 0 0 15px rgba(250, 196, 86, 0.7), 0 0 30px rgba(250, 196, 86, 0.3);
}

.product-card {
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.feature-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(21, 59, 99, 0.1);
}

.media-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    background: #fff;
}
.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.media-ring {
    /* This creates the subtle inner border effect */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08);
}


/* --- Layout Helpers & Modifiers --- */
.dark-section {
    background-color: var(--brand-blue-text);
    color: var(--brand-off-white);
}
.dark-section .section-headline {
    color: var(--brand-yellow);
}
.dark-section .section-headline::after {
    background-color: var(--brand-off-white);
}
.dark-section .feature-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-section .feature-card h3 {
   color: var(--brand-off-white);
}
.dark-section .feature-card p {
   color: #d1d5db;
}

.uniform-radius {
    border-radius: 1.5rem; /* 24px */
}

.hero-bg {
    background: radial-gradient(900px 450px at 10% -10%, rgba(6,60,150,.10), transparent),
                radial-gradient(900px 450px at 110% 110%, rgba(250,196,86,.14), transparent),
                linear-gradient(180deg,#fff,#f4f7fb 65%,#eef4ff);
}

/* --- Responsive Media Layouts (from Page 4) --- */
/* Set aspect ratios to auto on mobile to prevent squished images */
.ratio-16-10, .ratio-4-3 {
    aspect-ratio: auto;
}
.bleed {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* On mobile devices, give images a max-height to avoid them being overly tall */
@media (max-width: 639px) {
    .media-frame {
        max-height: 320px;
    }
    .media-frame img {
        height: auto; /* Let the image height be natural */
    }
    /* === ADD THIS CLASS === */
    .mobile-aspect-4-3 {
        aspect-ratio: 4 / 3;
        height: auto !important; /* Override fixed heights to enforce aspect ratio */
    }
}

/* On screens 640px and wider, apply aspect ratios and restore default behaviors */
@media (min-width: 640px) {
    .section-headline::after {
        left: 0;
        transform: none;
    }
    .text-center .section-headline::after{
        left: 50%;
        transform: translateX(-50%);
    }
    .ratio-16-10 {
        aspect-ratio: 16/10;
    }
    .ratio-4-3 {
        aspect-ratio: 4/3;
    }
    .media-frame {
        max-height: none;
    }
    .media-frame img {
        height: 100%;
    }
}

/* --- Animations & Effects --- */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Product Gallery Specific --- */
.thumbnail-item {
    border: 3px solid transparent;
    transition: border-color 0.3s ease;
    border-radius: 0.5rem; /* 8px */
}
.thumbnail-item.active {
    border-color: var(--brand-blue-dark);
}

/* --- Lightbox --- */
#lightbox-modal.hidden {
    display: none;
}
#lightbox-modal {
    transition: opacity 0.3s ease-in-out;
}/* End custom CSS */