/* ─── CSS Variables ────────────────────────────────────────────────────────── */
:root {
    --color-navy: #0A142F;
    --color-electric-blue: #0066FF;
    --color-gray-soft: #F3F4F6;
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Be Vietnam Pro', 'ui-sans-serif', system-ui, sans-serif;
    background-color: #FFFFFF;
    color: #111827;
}

.font-syne {
    font-family: ui-sans-serif, sans-serif;
}

/* ─── Gradient Text ─────────────────────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(90deg, var(--color-electric-blue), #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Hero & CTA Backgrounds ───────────────────────────────────────────────── */
.hero-bg {
    background-color: var(--color-navy);
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 102, 255, 0.10), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(0, 102, 255, 0.10), transparent 30%);
}

.cta-bg {
    background-color: var(--color-navy);
    background-image:
        radial-gradient(circle at 10% 10%, rgba(0, 102, 255, 0.15), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(0, 102, 255, 0.15), transparent 40%);
}

/* ─── Navigation ────────────────────────────────────────────────────────────── */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

/* ─── Mega Menu ─────────────────────────────────────────────────────────────── */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* Use padding-top instead of margin-top so the gap is inside the element.
       This prevents the menu from closing when the pointer crosses the gap. */
    padding-top: 0.5rem;
    width: min(95vw, 64rem);
    z-index: 50;
}

.mega-menu-trigger:hover .mega-menu,
.mega-menu-trigger:focus-within .mega-menu,
.mega-menu-trigger.mega-open .mega-menu {
    display: block;
}

/* Keep the menu open while hovering over it directly */
.mega-menu:hover {
    display: block;
}

/* ─── Product Cards ─────────────────────────────────────────────────────────── */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ─── Language Switcher Logic ───────────────────────────────────────────────── */
html[data-lang-state="en"] [data-lang="vi"],
html[data-lang-state="vi"] [data-lang="en"] {
    display: none;
}

/* ─── Mobile Detail Marker ──────────────────────────────────────────────────── */
summary::-webkit-details-marker {
    display: none;
}

/* ─── Page inner hero ───────────────────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}

/* ─── Pricing cards ─────────────────────────────────────────────────────────── */
.pricing-card-popular {
    border: 2px solid var(--color-electric-blue);
    position: relative;
}

/* ─── Responsive utilities ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .mega-menu {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 0;
    }
}