/* =========================================================
   KTS – TOPBAR & NAVBAR FIX (Bootstrap 4.5 + FTCO theme)
   ========================================================= */

/* --- 1) Cấu hình: chiều cao topbar --- */
:root {
    --kts-topbar-h: 40px; /* mặc định desktop */
}

/* Mobile (<=991.98px): topbar cao hơn chút cho dễ bấm */
@media (max-width: 991.98px) {
    :root {
        --kts-topbar-h: 48px;
    }
}

/* --- 2) TOPBAR: mảnh, gọn, canh giữa --- */
#kts-topbar {
    position: sticky;
    top: 0;
    z-index: 1060;
    height: var(--kts-topbar-h);
    background: #fff; /* muốn trong suốt thì dùng: transparent */
    border-bottom: 1px solid rgba(0,0,0,.06); /* bỏ viền -> border-bottom: 0; */
    display: flex;
    align-items: center;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

    #kts-topbar .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

/* --- 3) NAVBAR: luôn nằm ngay dưới topbar --- */
/* Theme gốc hay để .ftco-navbar-light { position:absolute; top:42px } -> ép lại theo topbar */
#ftco-navbar.kts-has-topbar {
    position: absolute !important;
    top: var(--kts-topbar-h) !important;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0 !important;
    z-index: 1050; /* dưới topbar (1060), trên hero */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

    /* Khi theme thêm .scrolled / .awake lúc cuộn -> giữ đúng vị trí dưới topbar */
    #ftco-navbar.kts-has-topbar.scrolled,
    #ftco-navbar.kts-has-topbar.awake {
        position: fixed !important; /* theme thường chuyển sang fixed */
        top: var(--kts-topbar-h) !important; /* bám sát dưới topbar */
        left: 0;
        right: 0;
        background: #000; /* nav đen theo site của bạn */
        box-shadow: 0 2px 8px rgba(0,0,0,.08); /* bỏ bóng -> comment dòng này */
    }

/* Nếu bạn muốn navbar sáng khi scrolled:
#ftco-navbar.kts-has-topbar.scrolled,
#ftco-navbar.kts-has-topbar.awake {
  background: #fff;
  color: #0f172a;
}
#ftco-navbar.kts-has-topbar.scrolled .navbar-nav > .nav-item > .nav-link {
  color: #0f172a;
}
*/

/* --- 4) Nền menu khi mở ở mobile (collapse) để dễ nhìn --- */
@media (max-width: 991.98px) {
    #ftco-nav.collapse.show,
    #ftco-nav.collapsing {
        background: #fff; 
        padding: .5rem .5rem; /* có khoảng thở hai bên */
        border-top: 1px solid rgba(255,255,255,.06);
    }
}

/* --- 5) Dropdown desktop: đảm bảo nổi trên mọi thứ --- */
#ftco-navbar .dropdown-menu {
    z-index: 1070; /* cao hơn header/hero */
}

/* --- 6) Kích thước logo cho mobile --- */
@media (max-width: 991.98px) {
    .navbar-brand img {
        height: 52px;
        width: auto;
    }
}

/* --- 7) Dọn margin/padding thừa nếu theme cũ chèn --- */
body {
    margin-top: 0 !important;
}

/* --- 8) Nút trong menu mobile (đã dùng ở câu trả lời trước) --- */
@media (max-width: 991.98px) {
    #ftco-nav .navbar-nav .kts-mbtn {
        margin: .25rem 0;
        border-radius: .35rem;
    }

    #ftco-nav .navbar-nav {
        padding-left: .25rem;
        padding-right: .25rem;
    }
}

/* --- 9) (Tuỳ chọn) Map màu brand vào btn-success cho đồng bộ toàn site --- */
/* Nếu bạn đã dùng biến --brand ở nơi khác, mở block này để đồng bộ */
/*
:root{
  --brand:#28a745;   // xanh KTS
  --brand-600:#1f8a3a;
}
.btn-success {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color:#fff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}
*/