/* ============================================
   In247 — Custom Styles & Brand Tokens
   Màu sắc chuẩn:
   - Xanh Lam (Primary): #20518d
   - Cam (Accent):      #f27123
   ============================================ */

:root {
    --color-in-blue: #20518d;
    --color-in-blue-dark: #14345c;
    --color-in-blue-light: #f0f4f9;
    --color-in-orange: #f27123;
    --color-in-orange-hover: #e35515;
}

/* === Scroll Behavior === */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f0f4f9;
}
::-webkit-scrollbar-thumb {
    background: #20518d;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #f27123;
}

/* === Header Scroll Behavior === */
#header {
    background: transparent;
}
#header.scrolled {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(32, 81, 141, 0.1);
    box-shadow: 0 4px 20px rgba(20, 52, 92, 0.06);
}

/* === Fade In Up Animation === */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Service Card Shine Effect === */
.service-card {
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(242, 113, 35, 0.08),
        transparent
    );
    transition: left 0.7s ease;
}
.service-card:hover::before {
    left: 100%;
}

/* === Back to Top Button === */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* === Form Focus Glow === */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(242, 113, 35, 0.2);
}

/* === Counter Animation Tabular Nums === */
.counter {
    font-variant-numeric: tabular-nums;
}

/* === Selection Color === */
::selection {
    background-color: rgba(242, 113, 35, 0.25);
    color: #20518d;
}

/* === Loading Spinner === */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* === Mobile Menu Transition === */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out;
    opacity: 0;
}
#mobile-menu.open {
    display: block;
    max-height: 600px;
    opacity: 1;
}

/* === Mobile Touch Optimization === */
@media (max-width: 640px) {
    button, a {
        touch-action: manipulation;
    }
}