/* =============================================================
   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; }
}


/* =============================================================================
   MOBILE — cac trang PUBLIC (dang nhap / dang ky / quen mat khau / doi mat khau)
   -----------------------------------------------------------------------------
   Day la toan bo phan nguoi dung cuoi nhin thay truoc khi vao khu quan tri.
   Do duoc tren may 375px truoc khi sua:
       o nhap        39-41px cao  (duoi nguong cham 44px)
       nut Dang nhap 122x39px     (duoi nguong, lai khong tran chieu ngang)
       nut mo menu   33x26px      (qua nho de bam bang ngon tay)

   Moc khoanh vung: layout public dung <body id="body">, layout admin dung
   <body id="page-top">. Chon theo #body nen moi trang public deu duoc ap dung
   ma tuyet doi khong dung toi khu quan tri.
   Chi chinh kich thuoc / khoang cach, khong doi mau thuong hieu.
   ============================================================================= */
@media (max-width: 767.98px) {

    /* --- Khung noi dung gon trong man hinh --- */
    #body .container { padding-left: 14px; padding-right: 14px; }
    #body .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* --- Nhan va o nhap xep doc thay vi 2 cot chat choi --- */
    #body .form-horizontal .form-group > .control-label,
    #body .form-horizontal .form-group > label {
        flex: 0 0 100%; max-width: 100%; width: 100%;
        text-align: left !important;
        padding-bottom: .3rem;
        font-weight: 600; font-size: .9rem;
    }
    #body .form-horizontal .form-group > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #body .form-group > [class*="col-md-offset"] { margin-left: 0 !important; }

    /* --- O nhap du cao de cham --- */
    #body .form-control,
    #body input[type="text"],
    #body input[type="email"],
    #body input[type="password"],
    #body input[type="tel"],
    #body input[type="number"],
    #body select,
    #body textarea {
        min-height: 46px;
        font-size: 16px;              /* >=16px de iOS khong tu phong to khi focus */
        border-radius: 10px;
        box-sizing: border-box;
    }
    #body textarea { min-height: 110px; }

    /* --- Nut chinh tran chieu ngang, du cao --- */
    #body input[type="submit"],
    #body button[type="submit"],
    #body .btn-primary {
        width: 100%;
        min-height: 48px;
        font-size: 1rem; font-weight: 700;
        border-radius: 10px;
    }

    /* --- O tick de bam hon --- */
    #body .checkbox label {
        display: inline-flex; align-items: center; gap: .55rem;
        min-height: 44px; margin: 0; font-size: .95rem;
    }
    #body .checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

    /* --- Header: nut mo menu va link dieu huong du vung cham --- */
    #body .menu-toggle,
    #body #mobile-nav-toggle,
    #body .mobile-nav-toggle {
        width: 44px !important; height: 44px !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        font-size: 1.25rem;
    }
    #body #header .nav-menu > li > a,
    #body #nav-menu-container .nav-menu > li > a {
        min-height: 44px; display: flex; align-items: center;
    }

    /* --- Chan tran ngang toan cuc cho khu public --- */
    #body { max-width: 100%; overflow-x: hidden; }
    #body img, #body iframe { max-width: 100%; }
}