/* ==================== CUSTOM STYLES ==================== */
/* Supplements TailwindCSS for brand-specific styling */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Custom pulse animation for floating CTA */
@keyframes pulse-slow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
    50% { box-shadow: 0 0 0 12px rgba(5, 150, 105, 0); }
}

.animate-pulse-slow {
    animation: pulse-slow 2.5s ease-in-out infinite;
}

/* Header shadow on scroll */
.header-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Hero pattern overlay */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Service card hover lift */
#dich-vu .group:hover {
    transform: translateY(-4px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Area badge hover */
#khu-vuc .bg-emerald-50:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* CTA button press effect */
.cta-call:active,
.cta-zalo:active {
    transform: scale(0.95);
}

/* Floating CTA responsive */
@media (min-width: 768px) {
    #floating-cta {
        bottom: 2rem;
        right: 2rem;
    }
}

/* Hide floating CTA when at the very top of the page */
#floating-cta.hidden-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#floating-cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print styles */
@media print {
    #floating-cta,
    #header {
        display: none !important;
    }
    body {
        color: #000;
    }
}