:root {
    --kh-navy-950: #035bd6;
    --kh-navy-900: #2266c5;
    --kh-navy-800: #457cc4;
    --kh-navy-700: #5b8ccc;
    --kh-navy-600: #678ec5;
    --kh-navy-500: #89a6cc;
    --kh-navy-100: #e7f0ff;
    --kh-navy-050: #f6faff;
    --kh-navy-border: #c6d8f4;
}

/* =========================
       BUTTON GROUP
    ========================= */

.kh-toolbar-actions {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

    .kh-toolbar-actions button {
        height: 38px;
        border-radius: 10px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        font-size: 0.83rem;
        letter-spacing: 0.02em;
    }

/* =========================
       BUTTON BASE
    ========================= */

.kh-btn-xem,
.kh-btn-luu {
    width: auto;
    min-width: 120px;
    font-weight: 600;
    font-size: 0.83rem;
    padding: 0.5rem 0.95rem;
    margin: 0 4px;
    border-radius: 10px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--kh-navy-border);
    transition: all 0.22s ease;
    box-shadow: 0 6px 14px rgba(17, 43, 80, 0.12), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Nút xem */

.kh-btn-xem {
    background: linear-gradient(180deg,#08A5C9 0%,var(--kh-navy-900) 100%);
    color: var(--kh-navy-800);
    border-color: var(--kh-navy-border);
}

    .kh-btn-xem:hover {
        background: linear-gradient(180deg,#08A5C9 0%,#033945 100%);
        color: var(--kh-navy-900);
        border-color: #a9c5ee;
        box-shadow: 0 10px 20px rgba(29,66,115,.16), inset 0 1px 0 rgba(255,255,255,.68);
        transform: translateY(-2px);
    }

/* Nút lưu */

.kh-btn-luu {
    background: linear-gradient(180deg,var(--kh-navy-600) 0%,var(--kh-navy-800) 100%);
    color: #f8fbff;
    border-color: var(--kh-navy-800);
    text-shadow: 0 1px 0 rgba(10,29,56,.3);
}

    .kh-btn-luu:hover {
        background: linear-gradient(180deg,#6f9fdd 0%,#214878 100%);
        border-color: #183960;
        box-shadow: 0 12px 22px rgba(17,43,80,.22), inset 0 1px 0 rgba(255,255,255,.24);
        transform: translateY(-2px);
    }

    /* Active */

    .kh-btn-xem:active,
    .kh-btn-luu:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 5px rgba(10,29,56,.14);
    }

    /* Disabled */

    .kh-btn-xem:disabled,
    .kh-btn-luu:disabled {
        background: linear-gradient(180deg,#67a9f5 0%,#267cfc 100%);
        color: #f7f7f8;
        border-color: #027070;
        opacity: .85;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
        text-shadow: none;
    }

/* Mượn thiết bị */

.btn-muon-tb {
    background: linear-gradient(180deg,#f9fcff 0%,#dfebff 100%);
    color: var(--kh-navy-800);
    border: 1px solid var(--kh-navy-border);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 4px 10px rgba(17,43,80,.1), inset 0 1px 0 rgba(255,255,255,.65);
    transition: all .22s ease;
}

    .btn-muon-tb:hover,
    .btn-muon-tb:focus {
        background: linear-gradient(180deg,var(--kh-navy-600) 0%,var(--kh-navy-800) 100%);
        color: white;
        border-color: var(--kh-navy-800);
        box-shadow: 0 10px 18px rgba(17,43,80,.18), inset 0 1px 0 rgba(255,255,255,.2);
        transform: translateY(-1px);
    }

    .btn-muon-tb:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 5px rgba(10,29,56,.14);
    }
/* Xóa mọi vạch active bên trái */

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.modern-btn.active {
    border-left: none !important;
}

    .navbar-nav .nav-link.active::before,
    .navbar-nav .nav-link.active::after,
    .modern-btn.active::before,
    .modern-btn.active::after {
        display: none !important;
        content: none !important;
    }

@media (max-width:768px) {
    .kh-toolbar-actions {
        grid-template-columns: 1fr;
    }

    .kh-btn-xem,
    .kh-btn-luu {
        width: 100%;
    }
}