/* ============================================================
   KSK v2 — Header strip (badges mã lượt / BN / trạng thái)
   ============================================================ */
.ksk-header-strip {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 5px 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ksk-badge {
    font-size: 13px;
    color: #495057;
    margin-right: 14px;
}

/* ============================================================
   KSK v2 — Card wrapper
   ============================================================ */
.ksk-wrapper-pb {
    padding: 14px 14px 120px;
    background: #f0f2f5;
    min-height: calc(100vh - 90px);
}

.ksk-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.09);
}

.ksk-card-header {
    padding: 9px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 10px 10px 0 0;
}

.ksk-card-header-blue {
    background: linear-gradient(90deg, #dbeeff 0%, #eef5ff 100%);
    border-bottom: 2px solid #a8d4f5;
    color: #0a58ca;
}

.ksk-card-header-blue i { color: #0a58ca; }

.ksk-card-header-orange {
    background: linear-gradient(90deg, #fff0cc 0%, #fffaee 100%);
    border-bottom: 2px solid #ffc845;
    color: #a0620a;
}

.ksk-card-header-orange i { color: #c87a0a; }

/* ============================================================
   KSK v2 — Fixed bottom bar: 2 tầng
   toolbar (tầng trên) + mini nav (tầng dưới)
   ============================================================ */

/* Tầng dưới: mini nav tabs */
.ksk-mini-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    background: #343a40;
    border-top: 1px solid #495057;
}

.ksk-nav-btn {
    font-size: 14px;
    padding: 4px 16px;
    border-radius: 20px;
    border: 1.5px solid #6c757d;
    color: #ced4da;
    background: transparent;
    display: inline-flex;
    align-items: center;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none;
}

.ksk-nav-btn:hover {
    background: #495057;
    border-color: #adb5bd;
    color: #fff;
    text-decoration: none;
}

.ksk-nav-btn.active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    font-weight: 600;
}

/* Tầng trên: toolbar row — override #button-alway-show global */
.ksk-bottom-toolbar-row {
    position: fixed !important;
    bottom: 46px !important;
    left: 0;
    right: 0;
    z-index: 999 !important;
    height: 50px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    padding: 0 14px;
}

/* Cancel global fixed từ styles_custom.css cho #button-alway-show bên trong ksk-toolbar-bar */
#ksk-toolbar-bar #button-alway-show {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ksk-bn-info {
    min-width: 220px;
    margin-right: 12px;
    overflow: hidden;
}

.ksk-bn-hoten {
    font-size: 16px;
    font-weight: 700;
    color: #0d1bff;
    text-transform: uppercase;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ksk-bn-meta {
    font-size: 14px;
    color: #495057;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.ksk-bn-dichvu {
    color: #198754;
    font-weight: 600;
}

.ksk-toolbar-slot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ksk-thongke-toolbar {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    line-height: 1.4;
    min-width: 140px;
    color: #495057;
}

/* Wrapper padding tổng = toolbar(50px) + nav(40px) + buffer */
.ksk-wrapper-pb,
#contaner-template #wrapper {
    padding-bottom: 110px !important;
}

/* ============================================================
   ca_kham.html
   ============================================================ */
.cakham-huyetap-input {
    width: 80px;
}

.cakham-cv-col-ten   { width: 55%; }
.cakham-cv-col-nam   { width: 8%; }
.cakham-cv-col-thang { width: 8%; }
.cakham-cv-col-ngay  { width: 12%; }
.cakham-cv-col-xoa   { width: 5%; }

/* ============================================================
   hanh_chinh_bn.html
   ============================================================ */
.hcbn-anh-daidien {
    width: 110px;
    height: 140px;
    border: 2px dashed #adb5bd;
    border-radius: 6px;
    background: #f8f9fa;
    overflow: hidden;
}

.hcbn-btn-sm { font-size: 12px; }

.hcbn-chuky-wrap {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px;
    background: #fff;
}

.hcbn-chuky-img {
    width: 100%;
    max-height: 55px;
    object-fit: contain;
    display: block;
}

.hcbn-tuoi-text { font-size: 12px; }

/* ============================================================
   KSK v2 — Typography helpers
   ============================================================ */

/* Đơn vị đo kèm label — thay thế text-muted small */
.ksk-unit {
    font-size: 11px;
    font-weight: 400;
    color: #555;
}

/* Ghi chú nhỏ dưới form (hóa đơn, v.v.) */
.ksk-hint-text {
    font-size: 12px;
    color: #555;
    font-style: italic;
}

/* Label phụ (chữ ký BN, v.v.) */
.ksk-label-sm {
    font-size: 12px;
    font-weight: 500;
    color: #444;
}

/* Đồng nhất font-size toàn bộ form trong ksk module */
#cakham-container label,
#hcbn-container label {
    font-size: 13px !important;
    margin-bottom: 3px;
}

#cakham-container .form-control,
#hcbn-container .form-control,
#cakham-container .selectize-input,
#hcbn-container .selectize-input {
    font-size: 13px !important;
}

/* Header strip badges đồng nhất */
.ksk-header-strip .ksk-badge,
.ksk-header-strip .page-title {
    font-size: 14px;
}

/* Selectize dropdown z-index — cao hơn toolbar để không bị che */
.selectize-dropdown {
    z-index: 1050 !important;
}

/* ============================================================
   KSK v2 — CLS (Cận lâm sàng) table layout
   Copy từ version cũ (tpl/model.html inline style)
   ============================================================ */

/* Chỉ số field — flex wrap nhỏ gọn */
.xn-chiso-row {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-content: flex-start;
    margin: -2px -5px;
}
.xn-chiso-row > .xn-chiso-field { margin: 2px 5px; }
.xn-chiso-field { min-width: 80px; max-width: 145px; }
.xn-chiso-field label {
    color: #666; margin-bottom: 1px; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px;
}
.xn-chiso-field .form-control { height: 26px; padding: 2px 6px; }

/* Ngày + giờ cùng hàng */
.xn-datetime-wrap { display: flex; align-items: center; }
.xn-date-input { min-width: 0; }
.xn-time-input { flex: 1; min-width: 0; }

/* Controls: ngày giờ + nút */
.xn-controls {
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-content: flex-start; margin: -2px -3px; width: 100%;
}
.xn-controls > * { margin: 2px 3px; }
.xn-controls .xn-datetime-wrap { flex: 0 0 100%; }
.xn-controls .form-control,
.xn-controls .btn { height: 28px; padding-top: 2px; padding-bottom: 2px; line-height: 1.4; }

/* Chữ ký */
.xn-kyso-block { display: flex; align-items: center; padding: 4px 0; margin-top: 3px; flex-shrink: 0; }
.xn-kyso-block > * + * { margin-left: 6px; }
.xn-kyso-block.d-none { display: none !important; }
.img-chukyso-bacsi { width: 40px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
.xn-kyso-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tenbacsi { color: #1565c0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thoigian-xacnhan { color: #666; }

/* Bảng CLS — table-layout fixed với colgroup */
.table-cls-mac-dinh,
.table-cls-ke-them {
    table-layout: fixed;
    width: 100%;
}
.table-cls-mac-dinh th,
.table-cls-ke-them th { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.table-cls-mac-dinh td,
.table-cls-ke-them td { vertical-align: top; padding: 4px 6px; }
.table-cls-mac-dinh td.xn-td-hidden,
.table-cls-ke-them td.xn-td-hidden { width: 0; padding: 0; overflow: hidden; display: none; }
.cls-td-chiso { width: 100%; }
.cls-td-trangthai { vertical-align: top; }

/* Header nhóm */
.table-cls-mac-dinh .cls-tr-nhom td,
.table-cls-ke-them .cls-tr-nhom td {
    background: #e8f0fe; font-weight: 700; color: #1565c0; padding: 4px 8px; vertical-align: middle !important;
}
.table-cls-mac-dinh .cls-tr-nhom td.cls-td-trangthai,
.table-cls-ke-them .cls-tr-nhom td.cls-td-trangthai {
    vertical-align: top !important; background: #fff; font-weight: normal; color: inherit; border-left: 1px solid #dee2e6;
}
.xn-row-child > td { background: #fafbff; }
.xn-child-name { padding-left: 16px !important; }

/* Ngày giờ trong cột tên dịch vụ */
.xn-datetime-in-ten .xn-datetime-wrap { width: 100%; }
.xn-datetime-in-ten .xn-date-input { width: 110px; flex: 0 0 110px; min-width: 0; }
.xn-datetime-in-ten .xn-time-input { width: 95px; flex: 0 0 95px; min-width: 0; }

/* Cho phép dropdown datepicker/clockpicker thoát ra ngoài td/tr/table */
.table-cls-mac-dinh,
.table-cls-ke-them,
.table-cls-mac-dinh tbody,
.table-cls-ke-them tbody,
.table-cls-mac-dinh tr,
.table-cls-ke-them tr,
.table-cls-mac-dinh td,
.table-cls-ke-them td { overflow: visible !important; }

/* Datepicker và clockpicker — z-index cao hơn navbar (1030) để không bị che */
.clockpicker-popover { z-index: 1200 !important; position: absolute !important; }
.bootstrap-datetimepicker-widget,
.gonrin-datetimepicker-widget.dropdown-menu { z-index: 1200 !important; }

/* Badge outline */
.badge-outline-secondary { color: #6c757d; border: 1px solid #6c757d; background: transparent; }
.badge-outline-info      { color: #17a2b8; border: 1px solid #17a2b8; background: transparent; }
.badge-outline-warning   { color: #856404; border: 1px solid #ffc107; background: transparent; }
.badge-outline-success   { color: #28a745; border: 1px solid #28a745; background: transparent; }
.badge-outline-danger    { color: #dc3545; border: 1px solid #dc3545; background: transparent; }