﻿
.k-tabstrip-items .k-item, .k-panelbar .k-tabstrip-items .k-item {
    list-style-type: none;
    display: inline-block;
    border-bottom: 2px solid blue;
    border-left: 0px !important;
    border-top: 0px !important;
    border-right: 0px !important;
    vertical-align: top;
}

.k-tabstrip-items .k-state-default,
.k-ie7 .k-tabstrip-items .k-state-default .k-loading {
    border: 0 !important;
    border-radius: 0 !important;
    /* nền gần trắng + gloss rất nhẹ ở mép trên */
    background-color: #ffffff !important; /* fallback */
    background-image: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 52%), linear-gradient(180deg, #fbfdff 0%, #fefeff 60%, #ffffff 100%) !important;
    background-clip: padding-box !important;
    /* bóng sâu theo chiều dọc; negative spread để 2 bên mỏng hơn */
    box-shadow: 0 2px 6px -2px rgba(16,24,40,.08), 0 14px 28px -12px rgba(16,24,40,.10), 0 32px 48px -28px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.96), /* highlight mép trên */
    inset 1px 0 0 rgba(255,255,255,.70), /* hairline trái: mỏng thị giác */
    inset -1px 0 0 rgba(255,255,255,.70), /* hairline phải */
    inset 0 -2px 4px -2px rgba(16,24,40,.10) !important; /* đáy có chiều sâu */

    transition: background-image .18s ease, box-shadow .18s ease;
}
    .k-tabstrip-items .k-state-default:hover {
        box-shadow: 0 4px 10px -3px rgba(16,24,40,.10), 0 20px 42px -16px rgba(16,24,40,.12), 0 40px 72px -32px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.97), inset 1px 0 0 rgba(255,255,255,.72), inset -1px 0 0 rgba(255,255,255,.72), inset 0 -2px 4px -2px rgba(16,24,40,.12) !important;
    }
    .k-tabstrip-items .k-state-default .k-link:hover, .k-panelbar > li.k-state-default > .k-link:hover {
        color: #000;
        font-weight: bold;
    }


.k-tabstrip-items .k-loading {
    border: none !important;
}

.k-tabstrip-items .k-state-active, .k-ie7 .k-tabstrip-items .k-state-active .k-loading {
    color: #000;
    font-weight: bolder;
    border-bottom: 2px solid #66ccff !important;
    box-shadow: none !important;
}

.k-state-active, .k-state-active:hover, .k-active-filter, .k-tabstrip .k-state-active {
    background-color: #fff !important;
}

.k-state-hover, .k-state-hover:hover, .k-splitbar-horizontal-hover:hover, .k-splitbar-vertical-hover:hover, .k-list > .k-state-hover, .k-scheduler .k-scheduler-toolbar ul li.k-state-hover, .k-pager-wrap .k-link:hover, .k-dropdown .k-state-focused, .k-imagebrowser-dropzone, .k-mobile-list .k-item > .k-link:active, .k-mobile-list .k-item > .k-label:active, .k-mobile-list .k-edit-label.k-check:active, .k-mobile-list .k-scheduler-timezones .k-edit-field:nth-child(2):active, .k-mobile-list .k-recur-view .k-check:active {
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
    /*border-bottom: 2px solid #66ccff !important;*/
    font-weight: bold !important;
}
.k-tabstrip .k-content.k-state-active {
    padding: 6px !important;
    border-radius: 10px !important;
    /* viền theo cạnh (top mỏng hơn 1px so với trước) */
    border-top: 1px solid rgba(16,24,40,.18) !important; /* was 2px .20 */
    border-right: 1px solid rgba(16,24,40,.12) !important;
    border-bottom: 1px solid rgba(16,24,40,.06) !important;
    border-left: 1px solid rgba(16,24,40,.12) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 64%), linear-gradient(180deg, #edf3fa 0%, #f4f7fc 54%, #fafcfe 100%) !important;
    background-color: #f7f9fc !important;
    background-clip: padding-box !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.60), inset 0 12px 24px rgba(255,255,255,.06) !important;
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
    /* Hover: tăng chiều sâu rất nhẹ (không chói) */
    .k-tabstrip .k-content.k-state-active:hover {
        box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 12px 24px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.55) !important;
    }

    /* Focus-within: ring chuẩn a11y (giữ nhẹ nhàng) */
    .k-tabstrip .k-content.k-state-active:focus-within {
        outline: none;
        /*box-shadow: 0 0 0 2px rgba(37,99,235,.2), 0 0 0 4px rgba(37,99,235,.1), 0 2px 4px rgba(16,24,40,.05), 0 12px 24px rgba(16,24,40,.06) !important;*/
    }

/* Hạn chế chuyển động nếu người dùng bật Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .k-tabstrip .k-content.k-state-active {
        transition: none !important;
    }
}

.k-widget, .k-block, .k-inline-block, .k-draghandle {
    border: none !important;
}

.k-tabstrip > .k-content, .k-panelbar .k-tabstrip > .k-content {
    border:none !important;
}

/* [Start] PKCB – Locked Kendo Grid*/
.pkcb-locked-grid-pk {
    padding: 6px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #f4f6f8 !important;
    background-clip: padding-box;
    box-shadow: 6px 6px 12px rgba(0,0,0,.06), -6px -6px 12px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.65) !important;
}

    /* viewport phải */
    .pkcb-locked-grid-pk .k-grid-content {
        height: auto !important;
        overflow: auto !important;
        max-height: var(--pkcb-body-max, 289px) !important;
    }

    /* viewport trái (locked) – không cuộn dọc */
    .pkcb-locked-grid-pk .k-grid-content-locked {
        overflow: hidden !important;
        max-height: var(--pkcb-locked-max, 275px);
        /* nếu JS có set --hscroll thì bù đáy, mặc định = 0 */
        padding-bottom: var(--hscroll, 0px) !important;
    }

    /* Header / Footer: 1 dòng, không tràn khung */
    .pkcb-locked-grid-pk > .k-grid-header,
    .pkcb-locked-grid-pk > .k-grid-footer {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        /* nếu JS set --vscroll thì bù mép phải, mặc định = 0 */
        padding-right: var(--vscroll, 0px) !important;
    }

    /* Khối locked giữ nguyên width Kendo tính */
    .pkcb-locked-grid-pk .k-grid-header-locked,
    .pkcb-locked-grid-pk .k-grid-footer-locked {
        flex: 0 0 auto;
        display: block !important;
        padding-right: 0 !important;
    }

    /* Khối phải (unlocked) – để JS set px-width, không tự giãn */
    .pkcb-locked-grid-pk .k-grid-header-wrap,
    .pkcb-locked-grid-pk .k-grid-footer-wrap {
        flex: 0 0 auto;
        display: block !important;
        width: calc(100% - 380px) !important; /* JS sẽ override bằng px */
        min-width: 0;
        overflow: hidden;
    }

    /* Wrap trong locked luôn full theo container locked */
    .pkcb-locked-grid-pk .k-grid-header-locked .k-grid-header-wrap,
    .pkcb-locked-grid-pk .k-grid-footer-locked .k-grid-footer-wrap {
        width: 100% !important;
    }

    /* Ô 2 bên đồng nhất */
    .pkcb-locked-grid-pk .k-grid-content-locked td,
    .pkcb-locked-grid-pk .k-grid-content td {
        white-space: normal;
        vertical-align: middle;
    }

    /* Tránh reflow khi bảng tự giãn */
    .pkcb-locked-grid-pk .k-grid-content-locked table,
    .pkcb-locked-grid-pk .k-grid-content table {
        table-layout: fixed;
    }
/* [End] PKCB – Locked Kendo Grid*/

/* [Start] PKCB – Locked Kendo Grid- Xử trí thuốc*/


#gridDSToaThuoc {
    height: 450px;
}

    #gridDSToaThuoc .k-grid-content {
        min-height: auto;
        max-height: 250px;
        width: calc(100% - 340px) !important;
    }
.pkcb-locked-grid-pk-thuoc {
    height: calc(100% - var(--pkcb-container-offset, 28px));
    border-bottom: 1px solid var(--pkcb-border, #abc1de) !important;
    width: 100% !important;
    min-height: var(--pkcb-container-min, 350px);
    max-height: var(--pkcb-container-max, 290px);
    box-sizing: border-box;
}

    /* viewport phải */
    .pkcb-locked-grid-pk-thuoc .k-grid-content {
        height: auto !important;
        overflow: auto !important;
        max-height: var(--pkcb-body-max, 289px) !important;
    }

    /* viewport trái (locked) – không cuộn dọc */
    .pkcb-locked-grid-pk-thuoc .k-grid-content-locked {
        overflow: hidden !important;
        max-height: var(--pkcb-locked-max, 275px);
        /* nếu JS có set --hscroll thì bù đáy, mặc định = 0 */
        padding-bottom: var(--hscroll, 0px) !important;
        min-width: 340px !important;
    }

    /* Header / Footer: 1 dòng, không tràn khung */
    .pkcb-locked-grid-pk-thuoc > .k-grid-header,
    .pkcb-locked-grid-pk-thuoc > .k-grid-footer {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        /* nếu JS set --vscroll thì bù mép phải, mặc định = 0 */
        padding-right: var(--vscroll, 0px) !important;
    }

    /* Khối locked giữ nguyên width Kendo tính */
    .pkcb-locked-grid-pk-thuoc .k-grid-header-locked,
    .pkcb-locked-grid-pk-thuoc .k-grid-footer-locked {
        flex: 0 0 auto;
        display: block !important;
        padding-right: 0 !important;
        min-width: 340px !important;
    }

    /* Khối phải (unlocked) – để JS set px-width, không tự giãn */
    .pkcb-locked-grid-pk-thuoc .k-grid-header-wrap,
    .pkcb-locked-grid-pk-thuoc .k-grid-footer-wrap {
        flex: 0 0 auto;
        display: block !important;
        width: calc(100% - 346px) !important; /* JS sẽ override bằng px */
        min-width: 0;
        overflow: hidden;
    }

    /* Wrap trong locked luôn full theo container locked */
    .pkcb-locked-grid-pk-thuoc .k-grid-header-locked .k-grid-header-wrap,
    .pkcb-locked-grid-pk-thuoc .k-grid-footer-locked .k-grid-footer-wrap {
        width: 100% !important;
    }

    /* Ô 2 bên đồng nhất */
    .pkcb-locked-grid-pk-thuoc .k-grid-content-locked td,
    .pkcb-locked-grid-pk-thuoc .k-grid-content td {
        white-space: normal;
        vertical-align: middle;
    }

    /* Tránh reflow khi bảng tự giãn */
    .pkcb-locked-grid-pk-thuoc .k-grid-content-locked table,
    .pkcb-locked-grid-pk-thuoc .k-grid-content table {
        table-layout: fixed;
    }
/* [End] PKCB – Locked Kendo Grid*/


/* style chung cho 2 icon */
.iconLich-Hen,
.iconDon-Thuoc-Quoc-Gia,
.iconTiem-Chung,
.iconBHYT,
.iconPhong-Lay-Mau-Doan,
.iconXetNghiem,
.iconBao-Cao,
.iconPhac-Do-Thuoc,
.iconPhong-Lay-Mau,
.iconDang-Ky-Dieu-Duong,
.iconKham-Doan,
.iconKham-Benh,
.iconKho-Duoc,
.iconXet-Nghiem,
.iconQuay-Thuoc,
.iconPhong-CLS,
.iconPhong-Sieu-Am,
.iconQuayThuoc,
.iconBenh-Nhan,
.iconDang-Ky,
.iconThu-Ngan,
.iconZalo,
.iconPhong-kham {
    display: inline-block; /* <- quan trọng: cho phép width/height */
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain; /* hoặc 100% 100% nếu muốn fill đủ */
    vertical-align: middle; /* optional: canh giữa theo dòng */
    margin-top: -10px !important;
}

/* icon riêng */
.iconZalo {
    background-image: url('/images/Menu/Zalo.png');
}
.iconLich-Hen {
    background-image: url('/images/Menu/Dat-Hen.png');
}
.iconDon-Thuoc-Quoc-Gia {
    background-image: url('/images/Menu/Don-Thuoc-Quoc-Gia.png');
}
.iconTiem-Chung {
    background-image: url('/images/Menu/Tiem-Chung.png');
}
.iconBHYT {
    background-image: url('/images/Menu/BHYT.png');
}
.iconPhong-Lay-Mau-Doan {
    background-image: url('/images/Menu/Phong-Lay-Mau-Doan.png');
}
.iconXetNghiem {
    background-image: url('/images/Menu/Xet-Nghiem_0.png');
}
.iconPhac-Do-Thuoc {
    background-image: url('/images/Menu/List.png');
}
.iconPhong-Lay-Mau {
    background-image: url('/images/Menu/Xet-Nghiem-Mau.png');
}
.iconDang-Ky-Dieu-Duong {
    background-image: url('/images/Menu/Dang-Ky-DD.png');
}
.iconKham-Doan {
    background-image: url('/images/Menu/Kham-Doan.png');
}
.iconKham-Benh {
    background-image: url('/images/Menu/Kham-Benh.png');
}
.iconKho-Duoc {
    background-image: url('/images/Menu/Kho-Duoc.png');
}
.iconXet-Nghiem {
    background-image: url('/images/Menu/Xet-Nghiem.png');
}
.iconQuay-Thuoc {
    background-image: url('/images/Menu/Quay-Thuoc.png');
}
.iconPhong-CLS {
    background-image: url('/images/Menu/Phong-CLS.png');
}
.iconQuayThuoc {
    background-image: url('/images/Menu/thuoc.png');
}
.iconPhong-kham {
    background-image: url('/images/Menu/Phong-kham.png');
}
.iconDang-Ky {
    background-image: url('/images/Menu/Dang-Ky.png');
}
.iconThu-Ngan {
    background-image: url('/images/Menu/Thu_Ngan.png');
}
.iconPhong-Sieu-Am {
    background-image: url('/images/Menu/Sieu-Am.png');
}
/* Nếu icon nằm trong Kendo button/link bị ép inline,
   tăng specificity để thắng, tránh phải dùng !important */
.k-button .iconQuayThuoc,
.k-button .iconBenh-Nhan,
.k-link .iconQuayThuoc,
.k-link .iconBenh-Nhan {
    display: inline-block;
}

#tabsPhieuKham .k-menu .k-item > .k-link {
    padding: .4em 1.1em .1em !important;
}
legend {
    border: 0 none;
    display: block;
    font-size: 12px;
    font-weight: bold !important;
    line-height: inherit;
    margin-bottom: 0;
    padding: 0;
    width: auto;
    color: #000 !important;
    padding-left: 2px;
}

    legend .title {
        background-color: transparent;
        font-size: 12px;
        padding-left: 5px;
        padding-top: 10px;
    }
.btn,
.btn:hover,
.btn:focus,
.btn.focus {
    transition: none !important;
    animation: none !important;
}

    /* Hover/Focus: chỉ thêm bóng, giữ nguyên viền theo rule hiện có */
    .btn:hover,
    .btn:focus,
    .btn.focus {
        background-color: #66ccff !important;
        color: #000 !important;
        border-color: transparent !important;
        /* bóng nhẹ, phản hồi tức thì */
        box-shadow: 0 2px 6px rgba(16,24,40,.12), 0 8px 18px rgba(16,24,40,.08) !important;
    }
.border-menu {
    border-bottom: none !important;
}
k-calendar .k-content .k-link {
    color: #000 !important;
}
.k-button:focus:not(.k-state-disabled):not([disabled]) {
    -webkit-box-shadow: inset 0 0 0 1px #66ccff;
    box-shadow: inset 0 0 0 1px #66ccff
}
fieldset {
    padding: 6px !important;
    border-radius: 10px !important;
    /* viền theo cạnh (top mỏng hơn 1px so với trước) */
    border-top: 1px solid rgba(16,24,40,.18) !important; /* was 2px .20 */
    border-right: 1px solid rgba(16,24,40,.12) !important;
    border-bottom: 1px solid rgba(16,24,40,.06) !important;
    border-left: 1px solid rgba(16,24,40,.12) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 64%), linear-gradient(180deg, #edf3fa 0%, #f4f7fc 54%, #fafcfe 100%) !important;
    background-color: #f7f9fc !important;
    background-clip: padding-box !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.60), inset 0 12px 24px rgba(255,255,255,.06) !important;
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#right-popupbutton {
    border: none !important;
}
.sweet-alert fieldset {
    border: none !important;
    position: relative;
}
/* Áp dụng chung cho tooltip */
.tooltip .tooltip-inner {
    text-align: left; /* canh trái */
    white-space: normal; /* cho phép xuống dòng */
    max-width: 450px; /* tránh quá dài, tuỳ chỉnh */
}

.readonly {
    background-color: #edf1fa !important;
}

.btSearch {
    float: left;
    margin-top: 2px !important;
}

    .btSearch button {
        height: 25px;
        width: 83px;
        background-color: rgba(169.5, 169.5, 169.5, 0.5);
        border-color: #BCC6CC;
        color: #000;
        font-size: 13px;
        margin-left: 5px;
        padding-left: 2px;
        white-space: nowrap;
        font-family: 'UTM Neo Sans Intel' !important;
        border-style: solid;
        border-width: .5px;
        border-radius: 5px;
        box-shadow: 1px 0px 2px 0px #BCC6CC;
        text-transform: none;
    }

        .btSearch button:hover {
            -webkit-transform: none !important;
            background-color: #66ccff;
            border-color: #66ccff;
        }

.pkcb-Customers {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
}

.ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.08);
    vertical-align: middle;
}

.ui-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ui-switch__track {
    position: relative;
    width: 26px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(148,163,184,.40), rgba(148,163,184,.18));
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 22px rgba(2,6,23,.10);
    transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
    flex: 0 0 auto;
}

    .ui-switch__track::after {
        content: "";
        position: absolute;
        top: 1.25px;
        left: 1.5px;
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: linear-gradient(180deg, #fff, rgba(255,255,255,.82));
        box-shadow: 0 10px 18px rgba(2,6,23,.18);
        transition: transform .22s ease;
    }

.ui-switch__input:checked + .ui-switch__track {
    background: linear-gradient(90deg, rgba(0,184,255,.95), rgba(59,130,246,.95));
    border-color: rgba(0,184,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 28px rgba(0,184,255,.20);
}

    .ui-switch__input:checked + .ui-switch__track::after {
        transform: translateX(12px);
    }

.ui-switch__input:focus-visible + .ui-switch__track {
    outline: 2px solid rgba(0,184,255,.55);
    outline-offset: 2px;
}

.ui-switch__label {
    line-height: 1;
    white-space: nowrap;
}

.ui-switch--tag {
    gap: 8px;
    padding: 3px 8px 3px 6px;
    background: #fff;
    border: 1px solid rgba(37,99,235,.18);
    box-shadow: 0 1px 2px rgba(2,6,23,.06);
}

    .ui-switch--tag:hover {
        background: #f8fbff;
        border-color: rgba(37,99,235,.28);
    }

    .ui-switch--tag .ui-switch__track {
        width: 30px;
        height: 16px;
    }

        .ui-switch--tag .ui-switch__track::after {
            top: 1px;
            left: 1px;
            width: 12px;
            height: 12px;
        }

    .ui-switch--tag .ui-switch__input:checked + .ui-switch__track::after {
        transform: translateX(14px);
    }

    .ui-switch--tag .ui-switch__label {
        font-size: 12px;
        font-weight: 700;
        color: #2563eb;
        letter-spacing: .2px;
        white-space: nowrap;
    }
.pkcb-switch-col {
    float: left;
    width: auto !important;
    padding-left: 8px;
    padding-right: 0;
}

    .pkcb-switch-col:first-child {
        padding-left: 3px;
    }

.ui-switch--tag {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
