/* =============================================================
   Public marketing site — polish tren template "Reveal"
   Nap sau app.css. Mobile-first.
   ============================================================= */

/* Top bar */
#topbar {
    background: var(--ink-900);
    color: var(--ink-200);
    font-size: .86rem;
    padding: .4rem 0;
}
#topbar a { color: var(--ink-200); }
#topbar a:hover { color: #fff; }
#topbar .social-links a {
    display:inline-grid; place-items:center; width:30px; height:30px;
    border-radius: 8px; margin-left:.25rem; transition: background .15s, color .15s;
}
#topbar .social-links a:hover { background: var(--brand-500); color:#fff; }

/* Footer */
#footer {
    background: var(--ink-900);
    color: var(--ink-300);
    padding: 2.2rem 0 1.6rem;
    text-align: center;
    font-size: .9rem;
}
#footer .copyright { color: var(--ink-100); }
#footer .copyright strong { color: var(--brand-400); }
#footer .credits { margin-top:.35rem; color: var(--ink-400); font-size:.82rem; }

/* Back to top */
.back-to-top {
    position: fixed; right: 18px; bottom: 18px; z-index: 996;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-500); color: #fff !important;
    box-shadow: var(--shadow-lg);
    transition: transform .15s, background .15s;
}
.back-to-top:hover { background: var(--brand-600); transform: translateY(-2px); }

/* Section titles */
.section-header h2, .section-title h2 { position: relative; }

/* Generic hero polish */
.hero-title { font-weight: 800; letter-spacing: -.01em; }

/* Buttons in marketing content: make legacy get-started buttons modern */
.btn-get-started, a.btn-get-started {
    background: var(--brand-500); border:0; color:#fff !important;
    border-radius: var(--radius-pill); padding:.75rem 1.7rem; font-weight:700;
    box-shadow: var(--shadow); display:inline-block; transition: all .16s;
}
.btn-get-started:hover { background: var(--brand-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Make container comfortable on mobile */
@media (max-width: 768px) {
    #footer { padding: 1.8rem 1rem 1.4rem; }
}

/* ===== FIX header-sticky hard height + can doi header ===== */
div#header-sticky-wrapper { height: auto !important; }

/* Nen #team trong suot -> noi dung tren nen xam dong nhat (het dai xam "can") */
#team { background: transparent !important; padding-top: .6rem; }
#team .section-header.mtop30 { margin-top: 1rem !important; }

/* Nut "Man hinh quan ly" trong header, canh trai account admin */
#header .nav-menu > li.nav-quicklink { margin-right: .3rem; }
#header .nav-menu > li.nav-quicklink > a {
    background: var(--brand-500); color: #fff !important; border-radius: var(--radius-pill) !important;
    padding: .5rem .95rem !important; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem;
    line-height: 1.1; border: 0;
}
#header .nav-menu > li.nav-quicklink > a:hover { background: var(--brand-600); color: #fff !important; }
#header .nav-menu > li.nav-quicklink > a:after { display: none !important; }
#header {
    height: auto !important; min-height: 62px; padding: 10px 0 !important;
    display: flex; align-items: center;
}
#header > .container { width: 100%; }
#header #logo h1 { font-size: 26px !important; }
@media (max-width: 768px) {
    #header { min-height: 56px; padding: 8px 0 !important; }
    #header #logo h1 { font-size: 19px !important; }
    #header #nav-menu-container, #header #nav-menu { margin-top: 0 !important; }
}