/*
Theme Name: VBaseUp Final v2.7
Theme URI: https://vbaseup.com/
Author: VBaseUp
Description: Theme WordPress hoàn chỉnh cho VBaseUp, gồm Trang chủ, Về VBaseUp, FAQ và Liên hệ.
Version: 2.7.0
Text Domain: vbaseup
*/

:root {
    --vbaseup-primary: #008F62;
    --vbaseup-deep: #064E3B;
    --vbaseup-soft: #D1FAE5;
    --vbaseup-text: #17201C;
    --vbaseup-secondary: #52605A;
    --vbaseup-border: #DDE5E1;
}

html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: var(--vbaseup-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: "Manrope", sans-serif; }
img { max-width: 100%; height: auto; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: var(--vbaseup-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vbaseup-primary); }

.faq-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
}
.faq-item.active .faq-content { max-height: 500px; opacity: 1; margin-top: 1rem; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform .3s ease; }

.custom-logo { width: auto; max-height: 72px; }
#wpadminbar + .site-shell .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    #wpadminbar + .site-shell .site-header { top: 46px; }
}

.vbaseup-content a { color: var(--vbaseup-primary); }
.vbaseup-content p { line-height: 1.8; }


/* Keep the imported HTML design independent from WordPress/plugin defaults. */
.site-shell *,
.site-shell *::before,
.site-shell *::after { box-sizing: border-box; }
.site-shell button,
.site-shell input,
.site-shell textarea { font: inherit; }
.site-shell a { text-decoration: none; }
.site-shell p,
.site-shell h1,
.site-shell h2,
.site-shell h3,
.site-shell h4,
.site-shell ul { margin-top: 0; }


/* Imported from vbaseup_optimized_mobile_layout (2).html */
.bg-pattern-green {
    background-image: radial-gradient(#008F62 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.05;
}
.input-validate:valid + .check-icon { opacity: 1; transform: scale(1); }
@keyframes vbaseup-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.animate-float { animation: vbaseup-float 6s ease-in-out infinite; }
.animate-float-delayed { animation: vbaseup-float 6s ease-in-out 3s infinite; }
.site-footer .custom-logo { max-height: 56px; width: auto; }

.site-header .custom-logo { max-height: 64px; width: auto; }

.mobile-menu-logo .custom-logo { max-height: 48px; width: auto; }

@media (max-width: 767px) {
    .site-header .custom-logo { max-height: 56px; }
    .site-footer .custom-logo { max-height: 40px; }
}

/* Desktop/tablet scale from the final supplied HTML. */
@media (min-width: 768px) {
    #app-content { zoom: 0.9; }
}